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

{% block title %}Goods Transport Delivery Challan Report{% endblock %}

{% block content %}
<style>
  .gtr-wrap {
    padding: 18px 14px;
  }

  .gtr-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
  }

  .gtr-filter,
  .gtr-card,
  .gtr-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .gtr-filter {
    padding: 14px;
    margin-bottom: 14px;
  }

  .gtr-card {
    padding: 12px;
    min-height: 72px;
  }

  .gtr-card-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 5px;
  }

  .gtr-card-value {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
  }

  .gtr-section {
    overflow: hidden;
  }

  .gtr-head {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gtr-head h6 {
    margin: 0;
    font-weight: 800;
    color: #111827;
  }

  .gtr-table {
    margin-bottom: 0;
  }

  .gtr-table th {
    background: #f3f4f6;
    color: #111827;
    font-size: 13px;
    white-space: nowrap;
  }

  .gtr-table td {
    font-size: 13px;
    vertical-align: middle;
  }

  .gtr-money {
    text-align: right;
    font-weight: 700;
  }

  .gtr-muted {
    color: #6b7280;
  }

  .gtr-print-btn {
    border: 1px solid #9ca3af;
    background: #ffffff;
    color: #374151;
  }

  @media print {
    .navbar,
    .sidebar,
    .gtr-no-print,
    .btn,
    button {
      display: none !important;
    }

    .gtr-wrap {
      padding: 0;
    }

    .gtr-filter,
    .gtr-card,
    .gtr-section {
      box-shadow: none;
      border: 1px solid #d1d5db;
    }
  }
</style>

<div class="container-fluid gtr-wrap">

  <div class="gtr-title">
    Goods Transport Delivery Challan Report
    <span class="gtr-muted">
      — {{ date_from|date:"M d, Y" }} to {{ date_to|date:"M d, Y" }}
    </span>
  </div>

  <div class="gtr-filter gtr-no-print">
    <form method="get">
      <div class="row align-items-end">

        <div class="col-md-3 mb-2">
          <label><strong>Date From</strong></label>
          <input
            type="date"
            name="date_from"
            value="{{ date_from|date:'Y-m-d' }}"
            class="form-control"
          >
        </div>

        <div class="col-md-3 mb-2">
          <label><strong>Date To</strong></label>
          <input
            type="date"
            name="date_to"
            value="{{ date_to|date:'Y-m-d' }}"
            class="form-control"
          >
        </div>

        <div class="col-md-2 mb-2">
          <label><strong>Status</strong></label>
          <select name="status" class="form-control">
            <option value="">All Status</option>
            {% for value,label in status_choices %}
              <option value="{{ value }}" {% if status == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-3 mb-2">
          <label><strong>Search</strong></label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="form-control"
            placeholder="Run no, delivery person, mobile, hub"
          >
        </div>

        <div class="col-md-1 mb-2">
          <button type="submit" class="btn btn-primary btn-block">
            Go
          </button>
        </div>

      </div>

      <div class="mt-2">
        <button type="button" class="btn gtr-print-btn" onclick="window.print();">
          Print
        </button>
      </div>
    </form>
  </div>

  <div class="row">

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Delivery Challans</div>
        <div class="gtr-card-value">{{ summary.runs }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Total Invoices</div>
        <div class="gtr-card-value">{{ summary.invoices }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Total Amount</div>
        <div class="gtr-card-value">{{ summary.amount|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Collected</div>
        <div class="gtr-card-value text-success">{{ summary.collected|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Balance</div>
        <div class="gtr-card-value text-danger">{{ summary.balance|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Pending</div>
        <div class="gtr-card-value text-warning">{{ summary.pending }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Delivered</div>
        <div class="gtr-card-value text-success">{{ summary.delivered }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Not Delivered</div>
        <div class="gtr-card-value">{{ summary.not_delivered }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Partial</div>
        <div class="gtr-card-value text-info">{{ summary.partial }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Damage</div>
        <div class="gtr-card-value text-danger">{{ summary.damage }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Shortage</div>
        <div class="gtr-card-value text-danger">{{ summary.shortage }}</div>
      </div>
    </div>

  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Delivery Challan Detail</h6>
      <span class="gtr-muted">Showing latest 500 records</span>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered table-hover gtr-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Run No</th>
            <th>Date</th>
            <th>Delivery Person</th>
            <th>From Hub</th>
            <th>Status</th>
            <th class="text-right">Invoices</th>
            <th class="text-right">Amount</th>
            <th class="text-right">Balance</th>
            <th class="text-right">Collected</th>
            <th class="text-right">Pending</th>
            <th class="text-right">Delivered</th>
            <th class="text-right">Not Delivered</th>
            <th class="text-right">Partial</th>
            <th class="text-right">Damage</th>
            <th class="text-right">Shortage</th>
            <th class="gtr-no-print">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            {% with run=row.run totals=row.totals %}
              <tr>
                <td>{{ forloop.counter }}</td>

                <td>
                  <strong>#{{ run.run_no }}</strong>
                </td>

                <td>{{ run.run_date|date:"d-m-Y" }}</td>

                <td>
                  {{ run.delivery_person_name|default:"-" }}<br>
                  <small class="gtr-muted">{{ run.delivery_person_mobile|default:"" }}</small>
                </td>

                <td>{{ run.from_city|default:"-" }}</td>

                <td>{{ run.get_status_display }}</td>

                <td class="gtr-money">{{ totals.total_invoices }}</td>

                <td class="gtr-money">{{ totals.total_amount|floatformat:2 }}</td>

                <td class="gtr-money {% if totals.total_balance > 0 %}text-danger{% else %}text-success{% endif %}">
                  {{ totals.total_balance|floatformat:2 }}
                </td>

                <td class="gtr-money text-success">{{ totals.total_collected|floatformat:2 }}</td>

                <td class="gtr-money text-warning">{{ totals.pending }}</td>

                <td class="gtr-money text-success">{{ totals.delivered }}</td>

                <td class="gtr-money">{{ totals.not_delivered }}</td>

                <td class="gtr-money text-info">{{ totals.partial }}</td>

                <td class="gtr-money text-danger">{{ totals.damage }}</td>

                <td class="gtr-money text-danger">{{ totals.shortage }}</td>

                <td class="gtr-no-print">
                  <a
                    href="{% url 'good_transport:deliveries:detail' run.t_id %}"
                    class="btn btn-sm btn-info"
                  >
                    View
                  </a>
                </td>
              </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="17" class="text-center gtr-muted py-4">
                No delivery challan records found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="6" class="text-right">Total</th>
            <th class="gtr-money">{{ summary.invoices }}</th>
            <th class="gtr-money">{{ summary.amount|floatformat:2 }}</th>
            <th class="gtr-money text-danger">{{ summary.balance|floatformat:2 }}</th>
            <th class="gtr-money text-success">{{ summary.collected|floatformat:2 }}</th>
            <th class="gtr-money text-warning">{{ summary.pending }}</th>
            <th class="gtr-money text-success">{{ summary.delivered }}</th>
            <th class="gtr-money">{{ summary.not_delivered }}</th>
            <th class="gtr-money text-info">{{ summary.partial }}</th>
            <th class="gtr-money text-danger">{{ summary.damage }}</th>
            <th class="gtr-money text-danger">{{ summary.shortage }}</th>
            <th class="gtr-no-print"></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}