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

{% block title %}Counter Deliveries{% endblock %}

{% block content %}
<style>
  .gt-page {
    padding: 14px;
  }

  .gt-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    overflow: hidden;
  }

  .gt-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .gt-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
  }

  .gt-sub {
    color: #64748b;
    font-size: 13px;
    margin-top: 3px;
  }

  .gt-filter {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
  }

  .gt-summary {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
  }

  .gt-stat {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
  }

  .gt-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
  }

  .gt-stat-value {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    margin-top: 3px;
  }

  .gt-table {
    width: 100%;
    border-collapse: collapse;
  }

  .gt-table th,
  .gt-table td {
    border: 1px solid #e5e7eb;
    padding: 8px;
    font-size: 13px;
    vertical-align: middle;
  }

  .gt-table th {
    background: #eef2f7;
    color: #334155;
    font-weight: 900;
    white-space: nowrap;
  }

  .gt-right {
    text-align: right;
  }

  .gt-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
  }

  .gt-badge-counter {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
  }

  .gt-badge-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #22c55e;
  }

  .gt-btn {
    border: 0;
    border-radius: 7px;
    padding: 7px 10px;
    font-weight: 800;
    text-decoration: none !important;
    display: inline-block;
    font-size: 12px;
  }

  .gt-btn-primary {
    background: #01478f;
    color: #ffffff !important;
  }

  .gt-btn-info {
    background: #0ea5e9;
    color: #ffffff !important;
  }

  .gt-btn-light {
    background: #e5e7eb;
    color: #111827 !important;
  }

  .gt-btn-success {
    background: #16a34a;
    color: #ffffff !important;
  }

  @media (max-width: 900px) {
    .gt-card-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .gt-summary {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

<div class="container-fluid gt-page">

  <div class="gt-card">

    <div class="gt-card-header">
      <div>
        <h4 class="gt-title">Counter Deliveries</h4>
        <div class="gt-sub">
          Station par customer/receiver ko direct handover ki hui deliveries
        </div>
      </div>

      <div>
        <a href="{% url 'good_transport:deliveries:ready' %}" class="gt-btn gt-btn-success">
          Ready / Counter Delivery
        </a>

        <a href="{% url 'good_transport:deliveries:list' %}" class="gt-btn gt-btn-light">
          Delivery Challans
        </a>
      </div>
    </div>

    {% if messages %}
      <div class="px-3 pt-3">
        {% for message in messages %}
          <div class="alert alert-{{ message.tags|default:'info' }} py-2">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="gt-filter">
      <form method="get">
        <div class="row">
          <div class="col-md-2 mb-2">
            <input
              type="date"
              name="date_from"
              value="{{ date_from }}"
              class="form-control"
            >
          </div>

          <div class="col-md-2 mb-2">
            <input
              type="date"
              name="date_to"
              value="{{ date_to }}"
              class="form-control"
            >
          </div>

          <div class="col-md-2 mb-2">
            <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-4 mb-2">
            <input
              type="text"
              name="q"
              value="{{ q }}"
              class="form-control"
              placeholder="Invoice, builty, customer, receiver, mobile search"
            >
          </div>

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

    <div class="gt-summary">
      <div class="gt-stat">
        <div class="gt-stat-label">Counter Deliveries</div>
        <div class="gt-stat-value">{{ summary.count }}</div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Total Amount</div>
        <div class="gt-stat-value">{{ summary.total_amount|floatformat:2 }}</div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Received</div>
        <div class="gt-stat-value text-success">{{ summary.total_received|floatformat:2 }}</div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Balance</div>
        <div class="gt-stat-value text-danger">{{ summary.total_balance|floatformat:2 }}</div>
      </div>
    </div>

    <div class="table-responsive">
      <table class="gt-table">
        <thead>
          <tr>
            <th>Delivery #</th>
            <th>Date</th>
            <th>Invoice</th>
            <th>Builty</th>
            <th>Customer</th>
            <th>Receiver</th>
            <th>Route</th>
            <th>Station</th>
            <th class="gt-right">Total</th>
            <th class="gt-right">Received</th>
            <th class="gt-right">Balance</th>
            <th>Status</th>
            <th style="width:130px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            <tr>
              <td>
                <strong>#{{ row.delivery.t_id }}</strong><br>
                <span class="gt-badge gt-badge-counter">Counter</span>
              </td>

              <td>{{ row.delivery.delivery_date|date:"d-m-Y h:i A" }}</td>

              <td>
                {% if row.invoice %}
                  <strong>#{{ row.invoice.invoice_no }}</strong>
                {% else %}
                  -
                {% endif %}
              </td>

              <td>
                {% if row.invoice %}
                  {{ row.invoice.builty_no|default:"-" }}
                {% else %}
                  -
                {% endif %}
              </td>

              <td>
                {% if row.invoice %}
                  {{ row.invoice.customer_name|default:"-" }}
                {% else %}
                  -
                {% endif %}
              </td>

              <td>
                {{ row.delivery.received_by_name|default:"-" }}<br>
                <small class="text-muted">
                  {{ row.delivery.received_by_mobile|default:"" }}
                </small>
              </td>

              <td>
                {% if row.invoice %}
                  {{ row.invoice.from_city|default:"-" }} → {{ row.invoice.to_city|default:"-" }}
                {% else %}
                  -
                {% endif %}
              </td>

              <td>{{ row.delivery.delivery_city|default:"-" }}</td>

              <td class="gt-right">
                {% if row.invoice %}
                  {{ row.invoice.total_amount|floatformat:2 }}
                {% else %}
                  0.00
                {% endif %}
              </td>

              <td class="gt-right">
                {% if row.invoice %}
                  {{ row.invoice.received_amount|floatformat:2 }}
                {% else %}
                  0.00
                {% endif %}
              </td>

              <td class="gt-right">
                {% if row.invoice %}
                  {{ row.invoice.balance_amount|floatformat:2 }}
                {% else %}
                  0.00
                {% endif %}
              </td>

              <td>
                <span class="gt-badge gt-badge-success">
                  {{ row.delivery.get_status_display }}
                </span>
              </td>

              <td>
                <a
                  href="{% url 'good_transport:deliveries:proof_detail' row.delivery.t_id %}"
                  class="gt-btn gt-btn-info"
                >
                  Proof
                </a>

                {% if row.invoice %}
                  <a
                    href="{% url 'good_transport:bookings:detail' row.invoice.t_id %}"
                    class="gt-btn gt-btn-light"
                  >
                    Invoice
                  </a>
                {% endif %}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="13" class="text-center text-muted py-4">
                Koi counter delivery record nahi mila.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>

</div>
{% endblock %}