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

{% block title %}Challan Print Sheet #{{ challan.challan_no }}{% endblock %}

{% block content %}
<style>
  .gt-print-wrap {
    padding: 18px;
    color: #111827;
    background: #ffffff;
  }

  .gt-print-page {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
  }

  .gt-actions {
    text-align: right;
    margin-bottom: 12px;
  }

  .gt-shop-title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
  }

  .gt-shop-sub {
    text-align: center;
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 8px;
  }

  .gt-report-title {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    border-top: 2px solid #111827;
    border-bottom: 2px solid #111827;
    padding: 5px 0;
    margin-bottom: 10px;
  }

  .gt-info-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
  }

  .gt-info-grid td {
    border: 1px solid #9ca3af;
    padding: 6px 8px;
    font-size: 12px;
    vertical-align: top;
  }

  .gt-info-label {
    font-weight: 800;
    color: #111827;
  }

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

  .gt-table th {
    border: 1px solid #6b7280;
    background: #f3f4f6;
    padding: 5px 4px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
  }

  .gt-table td {
    border: 1px solid #9ca3af;
    padding: 4px 4px;
    font-size: 11px;
    vertical-align: top;
    line-height: 1.18;
  }

  .gt-num {
    text-align: right;
    white-space: nowrap;
  }

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

  .gt-customer {
    width: 170px;
    max-width: 170px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .gt-remarks {
    width: 145px;
    max-width: 145px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .gt-small {
    font-size: 10px;
    color: #6b7280;
  }

  .gt-transit {
    display: inline-block;
    margin-top: 2px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 9px;
    font-weight: 800;
  }

  .gt-total-row th,
  .gt-total-row td {
    font-weight: 900;
    background: #f9fafb;
  }

  .gt-sign-row {
    margin-top: 40px;
    display: flex;
    gap: 35px;
  }

  .gt-sign-box {
    flex: 1;
    border-top: 1px solid #111827;
    padding-top: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
  }

  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  @media print {
    .navbar,
    .sidebar,
    .gt-actions,
    .btn,
    button {
      display: none !important;
    }

    body {
      background: #ffffff !important;
    }

    .gt-print-wrap {
      padding: 0;
    }

    .gt-print-page {
      max-width: none;
      width: 100%;
      margin: 0;
    }

    .gt-shop-title {
      font-size: 22px;
    }

    .gt-report-title {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .gt-table th,
    .gt-table td {
      font-size: 9.5px;
      padding: 3px 3px;
    }

    .gt-info-grid td {
      font-size: 10px;
      padding: 4px 5px;
    }
  }
</style>

<div class="gt-print-wrap">
  <div class="gt-print-page">

    <div class="gt-actions">
      <button type="button" class="btn btn-primary btn-sm" onclick="window.print();">
        Print / Save PDF
      </button>

      <a href="{% url 'good_transport:challans:detail' challan.t_id %}" class="btn btn-light btn-sm">
        Back
      </a>
    </div>

    <div class="gt-shop-title">
      {% if shop %}
        {{ shop.shop_name|default:"Goods Transport" }}
      {% else %}
        Goods Transport
      {% endif %}
    </div>

    <div class="gt-shop-sub">
      {% if shop %}
        {{ shop.address|default:"" }}
        {% if shop.phone_1 %} | Phone: {{ shop.phone_1 }}{% endif %}
        {% if shop.phone_2 %} | {{ shop.phone_2 }}{% endif %}
      {% endif %}
    </div>

    <div class="gt-report-title">
      Goods Transport Challan Sheet
    </div>

    <table class="gt-info-grid">
      <tr>
        <td>
          <span class="gt-info-label">Challan No:</span>
          #{{ challan.challan_no }}
        </td>

        <td>
          <span class="gt-info-label">Date:</span>
          {{ challan.challan_date|date:"d-m-Y" }}
        </td>

        <td>
          <span class="gt-info-label">Vehicle:</span>
          {{ challan.vehicle_no|default:"-" }}
        </td>

        <td>
          <span class="gt-info-label">Driver:</span>
          {{ challan.driver_name|default:"-" }}
          {{ challan.driver_mobile|default:"" }}
        </td>
      </tr>

      <tr>
        <td>
          <span class="gt-info-label">From Station:</span>
          {{ challan.from_city|default:"-" }}
        </td>

        <td>
          <span class="gt-info-label">To Station:</span>
          {{ challan.to_city|default:"-" }}
        </td>

        <td>
          <span class="gt-info-label">Status:</span>
          {{ challan.get_status_display }}
        </td>

        <td>
          <span class="gt-info-label">Invoices:</span>
          {{ summary.invoice_count }}
        </td>
      </tr>
    </table>

    <table class="gt-table">
      <thead>
        <tr>
          <th style="width:32px;">#</th>
          <th style="width:58px;">Inv No</th>
          <th style="width:70px;">Builty No</th>
          <th style="width:170px;">Customer Name</th>
          <th style="width:70px;">Qty</th>
          <th style="width:75px;">Weight</th>
          <th style="width:75px;">Rent</th>
          <th style="width:75px;">Loading</th>
          <th style="width:75px;">Builty</th>
          <th style="width:75px;">Unloading</th>
          <th style="width:82px;">Cash Exp.</th>
          <th style="width:82px;">Paid Rent</th>
          <th style="width:82px;">Remaining</th>
          <th style="width:145px;">Remarks</th>
        </tr>
      </thead>

      <tbody>
        {% for row in rows %}
          <tr>
            <td class="gt-center">{{ forloop.counter }}</td>

            <td class="gt-center">
              #{{ row.invoice_no }}
            </td>

            <td class="gt-center">
              {{ row.builty_no|default:"-" }}
            </td>

            <td class="gt-customer">
              <strong>{{ row.customer_name|default:"-" }}</strong>
              {% if row.receiver_name %}
                <br>
                <span class="gt-small">Receiver: {{ row.receiver_name }}</span>
              {% endif %}

              {% if row.is_transit %}
                <br>
                <span class="gt-transit">{{ row.transit_note }}</span>
              {% endif %}
            </td>

            <td class="gt-num">{{ row.qty|floatformat:2 }}</td>
            <td class="gt-num">{{ row.weight|floatformat:2 }}</td>
            <td class="gt-num">{{ row.rent|floatformat:2 }}</td>
            <td class="gt-num">{{ row.loading|floatformat:2 }}</td>
            <td class="gt-num">{{ row.builty_service|floatformat:2 }}</td>
            <td class="gt-num">{{ row.unloading|floatformat:2 }}</td>
            <td class="gt-num">{{ row.cash_expense|floatformat:2 }}</td>
            <td class="gt-num">{{ row.paid_rent|floatformat:2 }}</td>
            <td class="gt-num">{{ row.remaining|floatformat:2 }}</td>

            <td class="gt-remarks">
              {{ row.remarks|default:"-" }}
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="14" class="gt-center">
              No challan invoices found.
            </td>
          </tr>
        {% endfor %}
      </tbody>

      <tfoot>
        <tr class="gt-total-row">
          <th colspan="4" class="gt-num">Total</th>
          <th class="gt-num">{{ summary.total_qty|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_weight|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_rent|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_loading|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_builty|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_unloading|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_cash_expense|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_paid|floatformat:2 }}</th>
          <th class="gt-num">{{ summary.total_remaining|floatformat:2 }}</th>
          <th></th>
        </tr>
      </tfoot>
    </table>

    <div class="gt-sign-row">
      <div class="gt-sign-box">Driver Signature</div>
      <div class="gt-sign-box">Station Incharge</div>
      <div class="gt-sign-box">Checked By</div>
    </div>

  </div>
</div>
{% endblock %}