{% 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(4,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 Bookings</h2>
    <div style="display:flex;gap:8px;align-items:center;">
      <a
        class="gt-btn gt-green"
        href="{% url 'good_transport:bookings:bookings_list_pdf' %}{% if query_string %}?{{ query_string }}{% endif %}"
        target="_blank"
      >
        Print PDF
      </a>

      <a class="gt-btn gt-primary" href="{% url 'good_transport:bookings:add' %}">
        + New Invoice
      </a>
    </div>
  </div>

  <form method="get" class="gt-grid" style="grid-template-columns:repeat(6,1fr);">
    <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="payment_mode">
      <option value="">All Payment Modes</option>
      {% for value,label in payment_mode_choices %}
        <option value="{{ value }}" {% if payment_mode == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>

    <select class="gt-input" name="flow_status">
      <option value="">All Status</option>
      {% for value,label in flow_status_choices %}
        <option value="{{ value }}" {% if flow_status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>

    <input class="gt-input" type="text" name="q" placeholder="Builty / Customer / Receiver / 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>Total:</b> {{ summary.total|floatformat:2 }}</div>
    <div><b>Received:</b> {{ summary.received|floatformat:2 }}</div>
    <div><b>Balance:</b> {{ summary.balance|floatformat:2 }}</div>
  </div>
</div>

<div class="gt-card">
  <table class="gt-table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Builty</th>
        <th>Date</th>
        <th>Customer</th>
        <th>Receiver</th>
        <th>Route</th>
        <th>Mode</th>
        <th>Status</th>
        <th class="gt-right">Total</th>
        <th class="gt-right">Received</th>
        <th class="gt-right">Balance</th>
        <th style="width:260px;">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for inv in invoices %}
      <tr>
        <td>#{{ inv.invoice_no }}</td>
        <td>{{ inv.builty_no|default:"-" }}</td>
        <td>{{ inv.invoice_date|date:"d-m-Y" }}</td>
        <td>{{ inv.customer_name }}</td>
        <td>{{ inv.receiver_name|default:"-" }}</td>
        <td>
          {{ inv.from_city|default:"-" }} → {{ inv.to_city|default:"-" }}
        </td>
        <td>{{ inv.get_payment_mode_display }}</td>
        <td>{{ inv.get_flow_status_display }}</td>
        <td class="gt-right">{{ inv.total_amount|floatformat:2 }}</td>
        <td class="gt-right">{{ inv.received_amount|floatformat:2 }}</td>
        <td class="gt-right">{{ inv.balance_amount|floatformat:2 }}</td>
        <td>
          <a class="gt-btn gt-light" href="{% url 'good_transport:bookings:detail' inv.t_id %}">View</a>
          <a class="gt-btn gt-primary" href="{% url 'good_transport:bookings:edit' inv.t_id %}">Edit</a>
          <a class="gt-btn gt-green" href="{% url 'good_transport:bookings:print' inv.t_id %}" target="_blank">Print</a>
          <a class="gt-btn gt-red" href="{% url 'good_transport:bookings:delete' inv.t_id %}">Delete</a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="12" style="text-align:center;">No invoices found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}