{% extends "pos/base.html" %}
{% load static %}

{% block title %}Delivery Person Detail{% endblock %}
{% block heading %}Delivery Person Detail{% endblock %}

{% block stylesheets %}
<style>
  .dpd-wrap{max-width:1480px;margin:0 auto;}
  .dpd-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 3px 12px rgba(15,23,42,.05);margin-bottom:12px;}
  .dpd-head{padding:10px 12px;border-bottom:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .dpd-title{font-size:15px;font-weight:900;color:#0f172a;}
  .dpd-body{padding:12px;}
  .filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:end;}
  .filter-row .form-group{margin-bottom:0;}
  .filter-row label{font-size:12px;margin-bottom:3px;color:#64748b;}
  .mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
  .mini-kpi{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:13px;}
  .mini-kpi .label{font-size:12px;color:#64748b;font-weight:700;}
  .mini-kpi .value{font-size:23px;color:#0f172a;font-weight:900;line-height:1.2;}
  .mini-kpi .sub{font-size:11px;color:#64748b;}
  .k-blue{border-top:4px solid #2563eb;}
  .k-green{border-top:4px solid #059669;}
  .k-red{border-top:4px solid #dc2626;}
  .k-orange{border-top:4px solid #f97316;}
  .k-slate{border-top:4px solid #475569;}
  .dpd-table th,.dpd-table td{vertical-align:middle !important;font-size:12px;}
  .dpd-table thead th{background:#f8fafc;color:#334155;font-weight:900;}
  .dpd-table tfoot th{background:#f8fafc;font-weight:900;}
  .money{text-align:right;font-weight:900;white-space:nowrap;}
  .num{text-align:right;white-space:nowrap;}
  .order-badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800;}
  .status-badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#f1f5f9;color:#334155;font-size:11px;font-weight:800;}
  .pending-badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:11px;font-weight:800;}
  .due-badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:800;}
  .paid-badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:800;}
  .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
  .info-box{border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;}
  .info-box small{color:#64748b;font-weight:700;}
  .info-box div{font-weight:900;color:#0f172a;}
  .section-note{font-size:11px;color:#64748b;}
  @media(max-width:1100px){
    .mini-kpis,.info-grid{grid-template-columns:1fr;}
  }
</style>
{% endblock %}

{% block content %}
<div class="dpd-wrap">

  <!-- Header -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">Delivery Person Detail - {{ person.name }}</div>
        <small class="text-muted">
          T#{{ person.t_id }}
          {% if person.mobile %} | {{ person.mobile }}{% endif %}
        </small>
      </div>

      <div class="d-flex" style="gap:8px;">
        <a href="{% url 'hotel:reports:delivery_person_sales_report_list' %}" class="btn btn-sm btn-outline-secondary">
          Back
        </a>

        <a
          href="{% url 'hotel:reports:delivery_person_sales_report_list_pdf' %}?{{ pdf_qs }}"
          target="_blank"
          class="btn btn-sm btn-danger"
        >
          Print PDF
        </a>
      </div>
    </div>

    <div class="dpd-body">
      <div class="info-grid">
        <div class="info-box">
          <small>Name</small>
          <div>{{ person.name|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Mobile</small>
          <div>{{ person.mobile|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Phone</small>
          <div>{{ person.phone|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Status</small>
          <div>{{ person.status|default:"-" }}</div>
        </div>

        <div class="info-box" style="grid-column:1/-1;">
          <small>Address</small>
          <div>{{ person.address|default:"-" }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filter -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">Filtered Orders</div>
        <small class="text-muted">
          {{ start|date:"Y-m-d" }} → {{ end|date:"Y-m-d" }}
        </small>
      </div>
    </div>

    <div class="dpd-body">
      <form method="get" class="filter-row">
        <div class="form-group">
          <label>Start</label>
          <input type="date" name="start" class="form-control form-control-sm" value="{{ start|date:'Y-m-d' }}">
        </div>

        <div class="form-group">
          <label>End</label>
          <input type="date" name="end" class="form-control form-control-sm" value="{{ end|date:'Y-m-d' }}">
        </div>

        <div class="form-group">
          <label>Status</label>
          <select name="status" class="form-control form-control-sm">
            {% for value,label in status_options %}
              <option value="{{ value }}" {% if status == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label>Payment</label>
          <select name="payment_filter" class="form-control form-control-sm">
            {% for value,label in payment_filter_options %}
              <option value="{{ value }}" {% if payment_filter == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label>Search</label>
          <input type="text" name="q" class="form-control form-control-sm" value="{{ q }}" placeholder="Order, customer, phone">
        </div>

        <div class="form-group">
          <button class="btn btn-sm btn-primary">Apply</button>
        </div>

        <div class="form-group">
          <a href="{% url 'hotel:reports:delivery_person_sales_report_detail' person.t_id %}" class="btn btn-sm btn-light">
            Reset
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Top Calculation -->
  <div class="mini-kpis">
    <div class="mini-kpi k-slate">
      <div class="label">Filtered Orders</div>
      <div class="value">{{ filtered_calc.orders }}</div>
      <div class="sub">Date/filter based</div>
    </div>

    <div class="mini-kpi k-blue">
      <div class="label">Filtered Total</div>
      <div class="value">Rs {{ filtered_calc.total|floatformat:0 }}</div>
      <div class="sub">Total bill amount</div>
    </div>

    <div class="mini-kpi k-green">
      <div class="label">Filtered Received</div>
      <div class="value">Rs {{ filtered_calc.received|floatformat:0 }}</div>
      <div class="sub">Bank/cash received</div>
    </div>

    <div class="mini-kpi k-red">
      <div class="label">Filtered Balance</div>
      <div class="value">Rs {{ filtered_calc.balance|floatformat:0 }}</div>
      <div class="sub">Total - received</div>
    </div>
  </div>

  <!-- Full Calculation -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">Full Calculation</div>
        <small class="section-note">Pending, unpaid and filter-based calculations.</small>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 dpd-table">
        <thead>
          <tr>
            <th>Section</th>
            <th class="num">Orders</th>
            <th class="money">Subtotal</th>
            <th class="money">Discount</th>
            <th class="money">Charges</th>
            <th class="money">Tax</th>
            <th class="money">Total</th>
            <th class="money">Received</th>
            <th class="money">Balance</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td><b>Pending/Open Orders</b></td>
            <td class="num">{{ pending_calc.orders }}</td>
            <td class="money">Rs {{ pending_calc.subtotal|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ pending_calc.discount|floatformat:0 }}</td>
            <td class="money">Rs {{ pending_calc.charges|floatformat:0 }}</td>
            <td class="money">Rs {{ pending_calc.tax|floatformat:0 }}</td>
            <td class="money">Rs {{ pending_calc.total|floatformat:0 }}</td>
            <td class="money text-success">Rs {{ pending_calc.received|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ pending_calc.balance|floatformat:0 }}</td>
          </tr>

          <tr>
            <td><b>Unpaid / Due Orders</b></td>
            <td class="num">{{ unpaid_calc.orders }}</td>
            <td class="money">Rs {{ unpaid_calc.subtotal|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ unpaid_calc.discount|floatformat:0 }}</td>
            <td class="money">Rs {{ unpaid_calc.charges|floatformat:0 }}</td>
            <td class="money">Rs {{ unpaid_calc.tax|floatformat:0 }}</td>
            <td class="money">Rs {{ unpaid_calc.total|floatformat:0 }}</td>
            <td class="money text-success">Rs {{ unpaid_calc.received|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ unpaid_calc.balance|floatformat:0 }}</td>
          </tr>

          <tr>
            <td><b>Filtered Orders</b></td>
            <td class="num">{{ filtered_calc.orders }}</td>
            <td class="money">Rs {{ filtered_calc.subtotal|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ filtered_calc.discount|floatformat:0 }}</td>
            <td class="money">Rs {{ filtered_calc.charges|floatformat:0 }}</td>
            <td class="money">Rs {{ filtered_calc.tax|floatformat:0 }}</td>
            <td class="money">Rs {{ filtered_calc.total|floatformat:0 }}</td>
            <td class="money text-success">Rs {{ filtered_calc.received|floatformat:0 }}</td>
            <td class="money text-danger">Rs {{ filtered_calc.balance|floatformat:0 }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Pending Orders -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">Pending Orders</div>
        <small class="section-note">
          All pending orders assigned to {{ person.name }}.
        </small>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 dpd-table">
        <thead>
          <tr>
            <th>Order</th>
            <th>Date / Time</th>
            <th>Customer</th>
            <th>Phone</th>
            <th>Address</th>
            <th class="money">Total</th>
            <th class="money">Received</th>
            <th class="money">Balance</th>
            <th>Status</th>
            <th style="width:90px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for r in pending_rows %}
            <tr>
              <td><span class="order-badge">#{{ r.order_no }}</span></td>
              <td>{{ r.created_at|date:"Y-m-d h:i A" }}</td>
              <td><b>{{ r.customer_name|default:r.customer_title|default:"-" }}</b></td>
              <td>{{ r.customer_phone|default:"-" }}</td>
              <td>{{ r.customer_address|default:"-" }}</td>
              <td class="money">Rs {{ r.grand_total|floatformat:0 }}</td>
              <td class="money text-success">Rs {{ r.received|floatformat:0 }}</td>
              <td class="money text-danger">Rs {{ r.balance|floatformat:0 }}</td>
              <td><span class="pending-badge">{{ r.status }}</span></td>
              <td>
                <a href="{% url 'hotel:reports:restaurant_sales_report_detail' r.order_no %}" class="btn btn-sm btn-info">
                  View
                </a>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="10" class="text-center text-muted py-3">
                No pending orders found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="5">Pending Total</th>
            <th class="money">Rs {{ pending_calc.total|floatformat:0 }}</th>
            <th class="money text-success">Rs {{ pending_calc.received|floatformat:0 }}</th>
            <th class="money text-danger">Rs {{ pending_calc.balance|floatformat:0 }}</th>
            <th colspan="2"></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- Unpaid Orders -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">Unpaid / Due Orders</div>
        <small class="section-note">
          Orders where balance is greater than zero.
        </small>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 dpd-table">
        <thead>
          <tr>
            <th>Order</th>
            <th>Date / Time</th>
            <th>Customer</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Status</th>
            <th class="money">Total</th>
            <th class="money">Received</th>
            <th class="money">Balance</th>
            <th style="width:90px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for r in unpaid_rows %}
            <tr>
              <td><span class="order-badge">#{{ r.order_no }}</span></td>
              <td>{{ r.created_at|date:"Y-m-d h:i A" }}</td>
              <td><b>{{ r.customer_name|default:r.customer_title|default:"-" }}</b></td>
              <td>{{ r.customer_phone|default:"-" }}</td>
              <td>{{ r.customer_address|default:"-" }}</td>
              <td><span class="status-badge">{{ r.status|default:"-" }}</span></td>
              <td class="money">Rs {{ r.grand_total|floatformat:0 }}</td>
              <td class="money text-success">Rs {{ r.received|floatformat:0 }}</td>
              <td class="money text-danger">
                <span class="due-badge">Rs {{ r.balance|floatformat:0 }}</span>
              </td>
              <td>
                <a href="{% url 'hotel:reports:restaurant_sales_report_detail' r.order_no %}" class="btn btn-sm btn-info">
                  View
                </a>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="10" class="text-center text-muted py-3">
                No unpaid orders found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="6">Unpaid Total</th>
            <th class="money">Rs {{ unpaid_calc.total|floatformat:0 }}</th>
            <th class="money text-success">Rs {{ unpaid_calc.received|floatformat:0 }}</th>
            <th class="money text-danger">Rs {{ unpaid_calc.balance|floatformat:0 }}</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- Filtered All Orders -->
  <div class="dpd-card">
    <div class="dpd-head">
      <div>
        <div class="dpd-title">All Orders - Filter Based</div>
        <small class="section-note">
          Date, status, payment and search filters apply here.
        </small>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 dpd-table">
        <thead>
          <tr>
            <th>Order</th>
            <th>Date / Time</th>
            <th>Customer</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Status</th>
            <th>Payment</th>
            <th class="money">Subtotal</th>
            <th class="money">Discount</th>
            <th class="money">Tax</th>
            <th class="money">Total</th>
            <th class="money">Received</th>
            <th class="money">Balance</th>
            <th style="width:90px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for r in rows %}
            <tr>
              <td><span class="order-badge">#{{ r.order_no }}</span></td>
              <td>{{ r.created_at|date:"Y-m-d h:i A" }}</td>
              <td><b>{{ r.customer_name|default:r.customer_title|default:"-" }}</b></td>
              <td>{{ r.customer_phone|default:"-" }}</td>
              <td>{{ r.customer_address|default:"-" }}</td>
              <td><span class="status-badge">{{ r.status|default:"-" }}</span></td>

              <td>
                {% if r.payment_status == "Paid" %}
                  <span class="paid-badge">Paid</span>
                {% elif r.payment_status == "Partial" %}
                  <span class="pending-badge">Partial</span>
                {% else %}
                  <span class="due-badge">No Payment</span>
                {% endif %}
              </td>

              <td class="money">Rs {{ r.subtotal|floatformat:0 }}</td>
              <td class="money text-danger">Rs {{ r.discount|floatformat:0 }}</td>
              <td class="money">Rs {{ r.tax|floatformat:0 }}</td>
              <td class="money">Rs {{ r.grand_total|floatformat:0 }}</td>
              <td class="money text-success">Rs {{ r.received|floatformat:0 }}</td>
              <td class="money text-danger">Rs {{ r.balance|floatformat:0 }}</td>

              <td>
                <a href="{% url 'hotel:reports:restaurant_sales_report_detail' r.order_no %}" class="btn btn-sm btn-info">
                  View
                </a>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="14" class="text-center text-muted py-3">
                No filtered orders found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="7">Filtered Total</th>
            <th class="money">Rs {{ filtered_calc.subtotal|floatformat:0 }}</th>
            <th class="money text-danger">Rs {{ filtered_calc.discount|floatformat:0 }}</th>
            <th class="money">Rs {{ filtered_calc.tax|floatformat:0 }}</th>
            <th class="money">Rs {{ filtered_calc.total|floatformat:0 }}</th>
            <th class="money text-success">Rs {{ filtered_calc.received|floatformat:0 }}</th>
            <th class="money text-danger">Rs {{ filtered_calc.balance|floatformat:0 }}</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}