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

{% block content %}

<style>
  .cd-page{padding:16px;}
  .cd-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .cd-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }
  .cd-subtitle{
    margin:4px 0 0;
    color:#64748b;
    font-size:13px;
  }
  .cd-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
    padding:14px;
    margin-bottom:14px;
  }
  .info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  .info-item{
    background:#f8fafc;
    border:1px solid #eef2f7;
    border-radius:12px;
    padding:10px;
  }
  .info-item .k{
    font-size:12px;
    font-weight:900;
    color:#64748b;
    text-transform:uppercase;
  }
  .info-item .v{
    font-size:15px;
    font-weight:900;
    color:#0f172a;
    margin-top:4px;
  }
  .simple-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .simple-table th{
    background:#f1f5f9;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    font-weight:900;
    white-space:nowrap;
  }
  .simple-table td{
    padding:10px;
    border-bottom:1px solid #eef2f7;
    white-space:nowrap;
  }

  .cd-badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    line-height:1.2;
  }

  .cd-badge-inclusive{
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
  }

  .cd-badge-exclusive{
    background:#dbeafe;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
  }

  .cd-badge-settled{
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
  }

  .cd-badge-due{
    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fecaca;
  }

  .amount-success{
    color:#047857 !important;
  }

  .amount-danger{
    color:#b91c1c !important;
  }

  .amount-primary{
    color:#1d4ed8 !important;
  }
  .table-wrap{overflow:auto;}
  @media(max-width:900px){
    .info-grid{grid-template-columns:1fr 1fr;}
    .cd-header{flex-direction:column;align-items:flex-start;}
  }
</style>

<div class="cd-page">

  <div class="cd-header">
    <div class="cd-subtitle">
      Booking Code:
      {{ booking.booking_code|default:"-" }}

      {% if last_checkout %}
        &nbsp;|&nbsp;
        Invoice:
        {{ last_checkout.invoice_no }}
      {% endif %}

      &nbsp;|&nbsp;

      {% if booking.tax_exclusive %}
        <span class="cd-badge cd-badge-exclusive">
          Exclusive Tax
        </span>
      {% else %}
        <span class="cd-badge cd-badge-inclusive">
          Inclusive Tax
        </span>
      {% endif %}

      &nbsp;

      {% if final_balance <= 0 %}
        <span class="cd-badge cd-badge-settled">
          Settled
        </span>
      {% else %}
        <span class="cd-badge cd-badge-due">
          Balance Due
        </span>
      {% endif %}
    </div>

    <div>
      <a href="{% url 'hotel:checkout:checkout_list' %}" class="btn btn-light">
        Back
      </a>

      <a href="{% url 'hotel:checkout:checkout_pdf' booking.t_id %}"
         target="_blank"
         class="btn btn-dark">
        Final PDF
      </a>
    </div>
  </div>

  <div class="cd-card">
    <h5><strong>Guest & Stay Info</strong></h5>

    <div class="info-grid">
      <div class="info-item">
        <div class="k">Guest</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.name }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">Contact</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.contact|default:"-" }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">CNIC</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.cnic|default:"-" }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">Status</div>
        <div class="v">{{ booking.status }}</div>
      </div>

      <div class="info-item">
        <div class="k">Check-in</div>
        <div class="v">{{ booking.checkin_date|date:"d/m/Y" }}</div>
      </div>

      <div class="info-item">
        <div class="k">Checkout</div>
        <div class="v">{{ booking.checkout_date|date:"d/m/Y" }}</div>
      </div>

      <div class="info-item">
        <div class="k">Nights</div>
        <div class="v">{{ booking.nights }}</div>
      </div>

      <div class="info-item">
        <div class="k">Pay Mode</div>
        <div class="v">{{ booking.pay_mode }}</div>
      </div>
      <div class="info-item">
  <div class="k">Tax Type</div>

  <div class="v">
    {% if booking.tax_exclusive %}
      <span class="cd-badge cd-badge-exclusive">
        Exclusive
      </span>
    {% else %}
      <span class="cd-badge cd-badge-inclusive">
        Inclusive
      </span>
    {% endif %}
  </div>
</div>

<div class="info-item">
  <div class="k">Tax Rate</div>

  <div class="v">
    {{ final_tax_percent|floatformat:2 }}%
  </div>
</div>

<div class="info-item">
  <div class="k">Billing Profile</div>

  <div class="v">
    {{ booking.billing_profile|default:"-" }}
  </div>
</div>

<div class="info-item">
  <div class="k">Final Invoice</div>

  <div class="v">
    {% if last_checkout %}
      {{ last_checkout.invoice_no }}
    {% else %}
      -
    {% endif %}
  </div>
</div>
    </div>
  </div>

  <div class="cd-card">
    <h5><strong>Rooms</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>Room</th>
            <th>Category</th>
            <th>From</th>
            <th>To</th>
          </tr>
        </thead>
        <tbody>
          {% for ass in assignments %}
            <tr>
              <td>{{ ass.room.room_no }}</td>
              <td>{% if ass.room.category %}{{ ass.room.category.name }}{% else %}-{% endif %}</td>
              <td>{{ ass.from_date|date:"d/m/Y" }}</td>
              <td>{{ ass.to_date|date:"d/m/Y" }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted">No rooms assigned.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

 <div class="info-grid">

  <div class="info-item">
    <div class="k">Room Rent — Pre-Tax</div>
    <div class="v">
      {{ snapshot.room_rent|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Room Service — Pre-Tax</div>
    <div class="v">
      {{ snapshot.room_service|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Restaurant — Pre-Tax</div>
    <div class="v">
      {{ snapshot.restaurant|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Other — Pre-Tax</div>
    <div class="v">
      {{ snapshot.other|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Final Pre-Tax Subtotal</div>
    <div class="v amount-primary">
      {{ final_subtotal|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      {{ tax_amount_label }}
      ({{ final_tax_percent|floatformat:2 }}%)
    </div>

    <div class="v">
      {{ final_tax_amount|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Grand Total</div>

    <div class="v amount-primary">
      {{ final_grand_total|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Advance Paid</div>

    <div class="v amount-success">
      {{ advance_total|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Checkout Paid</div>

    <div class="v amount-success">
      {{ checkout_paid_total|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Refund Processed</div>

    <div class="v">
      {{ refund_processed|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Net Received</div>

    <div class="v amount-success">
      {{ net_received|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Final Balance</div>

    <div class="v {% if final_balance > 0 %}amount-danger{% else %}amount-success{% endif %}">
      {{ final_balance|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Settlement</div>

    <div class="v">
      {% if final_balance <= 0 %}
        <span class="cd-badge cd-badge-settled">
          Settled
        </span>
      {% else %}
        <span class="cd-badge cd-badge-due">
          Balance Due
        </span>
      {% endif %}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Tax Rate / Type</div>

    <div class="v">
      {{ final_tax_percent|floatformat:2 }}%
      {{ tax_type_label }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Folio Status</div>

    <div class="v">
      {{ folio.status }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">Checkout Date</div>

    <div class="v">
      {% if last_checkout %}
        {{ last_checkout.transaction_date|date:"d/m/Y" }}
      {% else %}
        {{ booking.checkout_date|date:"d/m/Y" }}
      {% endif %}
    </div>
  </div>

</div>

  <div class="cd-card">
    <h5><strong>Folio Lines</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Ref</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Rate</th>
            <th class="text-right">Discount</th>
            <th class="text-right">Tax %</th>
            <th>Route</th>
            <th class="text-right">Amount — Pre-Tax</th>
          </tr>
        </thead>
        <tbody>
          {% for ln in folio_lines %}
            <tr>
              <td>{{ ln.date|date:"d/m/Y" }}</td>
              <td>{{ ln.item_label }}</td>
              <td>{{ ln.ref_id }}</td>
              <td class="text-right">{{ ln.qty|floatformat:0 }}</td>
              <td class="text-right">{{ ln.unit_price|floatformat:0 }}</td>
              <td class="text-right">
    {{ ln.flat_discount|floatformat:2 }}
  </td>

    <td class="text-right">
      {{ ln.tax_percent|floatformat:2 }}%
    </td>

    <td>
      {{ ln.routed_to }}
  </td>

  <td class="text-right">
    <strong>
      {{ ln.amount|floatformat:2 }}
    </strong>
  </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="9" class="text-center text-muted">No folio lines found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="cd-card">
    <h5><strong>Advance Payments</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Bank TID</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for p in advance_rows %}
            <tr>
              <td>{{ p.transaction_date|date:"d/m/Y" }}</td>
              <td>{{ p.bill_title_descp }}</td>
              <td>{{ p.bank_id }}</td>
              <td class="text-right">{{ p.amount_transaction|floatformat:0 }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted">No advance found.</td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
    <tr>
      <th colspan="3" class="text-right">
        Advance Total
      </th>

      <th class="text-right">
        {{ advance_total|floatformat:2 }}
      </th>
    </tr>
  </tfoot>
      </table>
    </div>
  </div>

  <div class="cd-card">
    <h5><strong>Checkout Payments</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Invoice / Description</th>
            <th>Bank TID</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for p in checkout_payment_rows %}
            <tr>
              <td>{{ p.transaction_date|date:"d/m/Y" }}</td>
              <td>{{ p.bill_title_descp }}</td>
              <td>{{ p.bank_id }}</td>
              <td class="text-right">{{ p.amount_transaction|floatformat:0 }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted">No checkout payment found.</td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
  <tr>
    <th colspan="3" class="text-right">
      Checkout Paid
    </th>

    <th class="text-right">
      {{ checkout_paid_total|floatformat:2 }}
    </th>
  </tr>

  {% if refund_processed > 0 %}
    <tr>
      <th colspan="3" class="text-right">
        Refund Processed
      </th>

      <th class="text-right">
        {{ refund_processed|floatformat:2 }}
      </th>
    </tr>
  {% endif %}
</tfoot>
      </table>
    </div>
  </div>

</div>

{% endblock %}