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

{% block title %}Goods Transport Booking 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 Booking 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-2 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-2 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>Payment Mode</strong></label>
          <select name="payment_mode" class="form-control">
            <option value="">All Modes</option>
            {% for value,label in payment_mode_choices %}
              <option value="{{ value }}" {% if payment_mode == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2 mb-2">
          <label><strong>Status</strong></label>
          <select name="flow_status" class="form-control">
            <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>
        </div>

        <div class="col-md-3 mb-2">
          <label><strong>Search</strong></label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="form-control"
            placeholder="Invoice, builty, customer, receiver, city"
          >
        </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 Bookings</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 Amount</div>
        <div class="gtr-card-value">{{ summary.total|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Received</div>
        <div class="gtr-card-value text-success">{{ summary.received|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Balance</div>
        <div class="gtr-card-value text-danger">{{ summary.balance|floatformat:2 }}</div>
      </div>
    </div>

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

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

  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Booking 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>Invoice</th>
            <th>Builty</th>
            <th>Date</th>
            <th>Customer</th>
            <th>Sender</th>
            <th>Receiver</th>
            <th>Route</th>
            <th>Mode</th>
            <th>Status</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Weight</th>
            <th class="text-right">Total</th>
            <th class="text-right">Received</th>
            <th class="text-right">Balance</th>
          </tr>
        </thead>

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

                <td>
                  <strong>#{{ inv.invoice_no }}</strong>
                </td>

                <td>{{ inv.builty_no|default:"-" }}</td>

                <td>{{ inv.invoice_date|date:"d-m-Y" }}</td>

                <td>
                  {{ inv.customer_name|default:"-" }}<br>
                  <small class="gtr-muted">{{ inv.customer_mobile|default:"" }}</small>
                </td>

                <td>
                  {{ inv.sender_name|default:"-" }}<br>
                  <small class="gtr-muted">{{ inv.sender_mobile|default:"" }}</small>
                </td>

                <td>
                  {{ inv.receiver_name|default:"-" }}<br>
                  <small class="gtr-muted">{{ inv.receiver_mobile|default:"" }}</small>
                </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="gtr-money">{{ row.qty|floatformat:2 }}</td>

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

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

                <td class="gtr-money text-success">{{ inv.received_amount|floatformat:2 }}</td>

                <td class="gtr-money {% if inv.balance_amount > 0 %}text-danger{% else %}text-success{% endif %}">
                  {{ inv.balance_amount|floatformat:2 }}
                </td>
              </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="15" class="text-center gtr-muted py-4">
                No booking records found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="10" class="text-right">Total</th>
            <th class="gtr-money">{{ summary.qty|floatformat:2 }}</th>
            <th class="gtr-money">{{ summary.weight|floatformat:2 }}</th>
            <th class="gtr-money">{{ summary.total|floatformat:2 }}</th>
            <th class="gtr-money text-success">{{ summary.received|floatformat:2 }}</th>
            <th class="gtr-money text-danger">{{ summary.balance|floatformat:2 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}