{% 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;cursor:pointer}
  .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}
</style>

<div class="gt-card">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Challan #{{ challan.challan_no }}</h2>
    <div style="display:flex;gap:8px;">


      <a href="{% url 'good_transport:challans:print_sheet' challan.t_id %}" class="btn btn-info btn-sm" target="_blank">
        Print Sheet / PDF
      </a>
      {% if challan.status == "arrived" or challan.status == "closed" %}
        <a href="{% url 'good_transport:challans:arrival_confirm' challan.t_id %}" class="btn btn-warning btn-sm">
          Arrival Confirm
        </a>

        <a href="{% url 'good_transport:challans:arrival_sheet' challan.t_id %}" class="btn btn-info btn-sm" target="_blank">
          Arrival Sheet
        </a>
      {% endif %}
      <a href="{% url 'good_transport:challans:recovery' challan.t_id %}" class="btn btn-primary btn-sm">
        Recovery
      </a>


      <a class="gt-btn gt-light" href="{% url 'good_transport:challans:challan_list' %}">Back</a>
      <a class="gt-btn gt-primary" href="{% url 'good_transport:challans:edit' challan.t_id %}">Edit</a>
    </div>
  </div>

  <div class="gt-grid">
    <div><b>Date:</b> {{ challan.challan_date|date:"d-m-Y" }}</div>
    <div><b>Vehicle:</b> {{ challan.vehicle_no|default:"-" }}</div>
    <div><b>Driver:</b> {{ challan.driver_name|default:"-" }}</div>
    <div><b>Status:</b> {{ challan.get_status_display }}</div>
    <div><b>Route:</b> {{ challan.from_city|default:"-" }} → {{ challan.to_city|default:"-" }}</div>
    <div><b>Builties:</b> {{ challan.total_builties }}</div>
    <div><b>Qty:</b> {{ challan.total_qty|floatformat:2 }}</div>
    <div><b>Weight:</b> {{ challan.total_weight|floatformat:2 }}</div>
  </div>

  <div style="margin-top:12px;display:flex;gap:8px;">
    {% if challan.status == "loaded" or challan.status == "draft" %}
      <form method="post" action="{% url 'good_transport:challans:dispatch' challan.t_id %}">
        {% csrf_token %}
        <button class="gt-btn gt-green" type="submit">Mark Dispatch</button>
      </form>
    {% endif %}

    {% if challan.status == "dispatched" %}
      <form method="post" action="{% url 'good_transport:challans:arrive' challan.t_id %}">
        {% csrf_token %}
        <button class="gt-btn gt-primary" type="submit">Mark Arrived</button>
      </form>
    {% endif %}


    {% if challan.status == "arrived" %}
      <form method="post" action="{% url 'good_transport:challans:close' challan.t_id %}" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn btn-dark btn-sm"
                onclick="return confirm('Kya aap is challan ko close karna chahte hain?');">
          Close Challan
        </button>
      </form>
    {% endif %}

    {% if challan.status != "cancelled" %}
      <form method="post" action="{% url 'good_transport:challans:cancel' challan.t_id %}" onsubmit="return confirm('Cancel challan? Builties release ho jayengi.');">
        {% csrf_token %}
        <button class="gt-btn gt-red" type="submit">Cancel</button>
      </form>
    {% endif %}
  </div>
</div>

<div class="gt-card">
  <table class="gt-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Invoice</th>
        <th>Builty</th>
        <th>Customer</th>
        <th>Receiver</th>
        <th>Route</th>
        <th class="gt-right">Qty</th>
        <th class="gt-right">Weight</th>
        <th class="gt-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      {% for line in lines %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>
        <a href="{% url 'good_transport:bookings:detail' line.invoice_no %}" class="">
        #{{ line.invoice_no }}
      </a>
    </td>
        <td>{{ line.builty_no|default:"-" }}</td>
        <td>{{ line.customer_name }}</td>
        <td>{{ line.receiver_name|default:"-" }}</td>
        <td>{{ line.from_city|default:"-" }} → {{ line.to_city|default:"-" }}</td>
        <td class="gt-right">{{ line.qty|floatformat:2 }}</td>
        <td class="gt-right">{{ line.weight|floatformat:2 }}</td>
        <td class="gt-right">{{ line.total_amount|floatformat:2 }}</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="9" style="text-align:center;">No builties in this challan.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}