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

{% block title %}Goods Transport 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 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="Challan no, vehicle, driver, route"
          >
        </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">Total Challans</div>
        <div class="gtr-card-value">{{ summary.count }}</div>
      </div>
    </div>

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

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

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Total Weight</div>
        <div class="gtr-card-value">{{ summary.weight|floatformat:2 }}</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>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>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>Challan No</th>
            <th>Date</th>
            <th>Route</th>
            <th>Vehicle</th>
            <th>Driver</th>
            <th>Status</th>
            <th class="text-right">Builties</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Weight</th>
            <th class="text-right">Amount</th>
            <th class="gtr-no-print">Action</th>
          </tr>
        </thead>

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

                <td>
                  <strong>#{{ ch.challan_no }}</strong>
                </td>

                <td>{{ ch.challan_date|date:"d-m-Y" }}</td>

                <td>
                  {{ ch.from_city|default:"-" }} → {{ ch.to_city|default:"-" }}
                </td>

                <td>{{ ch.vehicle_no|default:"-" }}</td>

                <td>
                  {{ ch.driver_name|default:"-" }}<br>
                  <small class="gtr-muted">{{ ch.driver_mobile|default:"" }}</small>
                </td>

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

                <td class="gtr-money">{{ row.builties }}</td>

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

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

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

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

        <tfoot>
          <tr>
            <th colspan="7" class="text-right">Total</th>
            <th class="gtr-money">{{ summary.builties }}</th>
            <th class="gtr-money">{{ summary.qty|floatformat:2 }}</th>
            <th class="gtr-money">{{ summary.weight|floatformat:2 }}</th>
            <th class="gtr-money">{{ summary.amount|floatformat:2 }}</th>
            <th class="gtr-no-print"></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}