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

{% block content %}
<style>
  .gt-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:14px}
  .gt-table{width:100%;border-collapse:collapse}
  .gt-table th,.gt-table td{border:1px solid #e5e7eb;padding:8px;font-size:13px}
  .gt-table th{background:#f8fafc}
  .gt-btn{border:0;border-radius:8px;padding:7px 10px;font-weight:700;text-decoration:none;display:inline-block}
  .gt-primary{background:#01478f;color:#fff}
  .gt-green{background:#15803d;color:#fff}
  .gt-red{background:#dc2626;color:#fff}
  .gt-light{background:#e5e7eb;color:#111827}
  .gt-right{text-align:right}
  .gt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  .gt-input{width:100%;height:36px;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px}
</style>

<div class="gt-card">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Goods Transport Challans</h2>
    <div style="display:flex;gap:8px;">
      <a class="gt-btn gt-light" href="{% url 'good_transport:bookings:bookings_list' %}">Bookings</a>
      <a class="gt-btn gt-primary" href="{% url 'good_transport:challans:add' %}">+ New Challan</a>
    </div>
  </div>

  <form method="get" class="gt-grid">
    <input class="gt-input" type="date" name="date_from" value="{{ date_from }}">
    <input class="gt-input" type="date" name="date_to" value="{{ date_to }}">
    <select class="gt-input" name="status">
      <option value="">All Status</option>
      {% for value,label in status_choices %}
        <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <input class="gt-input" type="text" name="q" placeholder="Challan / Vehicle / Driver / City" value="{{ q }}">
    <button class="gt-btn gt-primary" type="submit">Filter</button>
  </form>
</div>

<div class="gt-card">
  <div class="gt-grid">
    <div><b>Builties:</b> {{ summary.total_builties }}</div>
    <div><b>Total Qty:</b> {{ summary.total_qty|floatformat:2 }}</div>
    <div><b>Total Weight:</b> {{ summary.total_weight|floatformat:2 }}</div>
    <div><b>Total Amount:</b> {{ summary.total_amount|floatformat:2 }}</div>
  </div>
</div>

<div class="gt-card">
  <table class="gt-table">
    <thead>
      <tr>
        <th>Challan</th>
        <th>Date</th>
        <th>Vehicle</th>
        <th>Driver</th>
        <th>Route</th>
        <th class="gt-right">Builties</th>
        <th class="gt-right">Qty</th>
        <th class="gt-right">Weight</th>
        <th class="gt-right">Amount</th>
        <th>Status</th>
        <th style="width:160px;">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for ch in challans %}
      <tr>
        <td>#{{ ch.challan_no }}</td>
        <td>{{ ch.challan_date|date:"d-m-Y" }}</td>
        <td>{{ ch.vehicle_no|default:"-" }}</td>
        <td>{{ ch.driver_name|default:"-" }}</td>
        <td>{{ ch.from_city|default:"-" }} → {{ ch.to_city|default:"-" }}</td>
        <td class="gt-right">{{ ch.total_builties }}</td>
        <td class="gt-right">{{ ch.total_qty|floatformat:2 }}</td>
        <td class="gt-right">{{ ch.total_weight|floatformat:2 }}</td>
        <td class="gt-right">{{ ch.total_amount|floatformat:2 }}</td>
        <td>{{ ch.get_status_display }}</td>
        <td>
          <a class="gt-btn gt-light" href="{% url 'good_transport:challans:detail' ch.t_id %}">View</a>
          <a class="gt-btn gt-primary" href="{% url 'good_transport:challans:edit' ch.t_id %}">Edit</a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="11" style="text-align:center;">No challans found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}