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

{% block title %}Checkout Detail{% endblock %}
{% block heading %}Checkout Detail{% endblock %}

{% block stylesheets %}
<style>
  .cod-wrap{
    max-width:1200px;
    margin:0 auto;
  }

  .cod-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(15,23,42,.05);
    margin-bottom:12px;
  }

  .cod-head{
    padding:10px 12px;
    border-bottom:1px solid #eef2f7;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .cod-title{
    font-size:15px;
    font-weight:900;
    color:#0f172a;
  }

  .cod-body{
    padding:12px;
  }

  .mini-kpis{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-bottom:12px;
  }

  .mini-kpi{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:13px;
  }

  .mini-kpi .label{
    font-size:12px;
    color:#64748b;
    font-weight:700;
  }

  .mini-kpi .value{
    font-size:22px;
    color:#0f172a;
    font-weight:900;
    line-height:1.2;
  }

  .k-blue{border-top:4px solid #2563eb;}
  .k-purple{border-top:4px solid #7c3aed;}
  .k-green{border-top:4px solid #059669;}
  .k-red{border-top:4px solid #dc2626;}

  .cod-table th,
  .cod-table td{
    vertical-align:middle !important;
    font-size:12px;
  }

  .cod-table thead th{
    background:#f8fafc;
    color:#334155;
    font-weight:900;
  }

  .cod-table tfoot th{
    background:#f8fafc;
    font-weight:900;
  }

  .money{
    text-align:right;
    font-weight:900;
    white-space:nowrap;
  }

  .info-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }

  .info-box{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px;
    background:#f8fafc;
  }

  .info-box small{
    color:#64748b;
    font-weight:700;
  }

  .info-box div{
    font-weight:900;
    color:#0f172a;
  }

  @media(max-width:900px){
    .mini-kpis,
    .info-grid{
      grid-template-columns:1fr;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="cod-wrap">

  <div class="cod-card">
    <div class="cod-head">
      <div>
        <div class="cod-title">
          Checkout Detail - INV#{{ row.invoice_no }}
        </div>
        <small class="text-muted">
          T#{{ row.booking_tid }}
          |
          {{ row.transaction_date|date:"Y-m-d" }}
        </small>
      </div>

      <div class="d-flex" style="gap:8px;">
        <a
          href="{% url 'hotel:reports:checkout_report_list' %}"
          class="btn btn-sm btn-outline-secondary"
        >
          Back
        </a>

        <a
          href="{% url 'hotel:checkout:checkout_pdf' row.booking_tid %}"
          target="_blank"
          class="btn btn-sm btn-danger"
        >
          Print Invoice
        </a>
      </div>
    </div>
  </div>

  <!-- Top Cards -->
  <div class="mini-kpis">

    <div class="mini-kpi k-blue">
      <div class="label">Grand Total</div>
      <div class="value">Rs {{ row.grand_total|floatformat:0 }}</div>
    </div>

    <div class="mini-kpi k-purple">
      <div class="label">Advance</div>
      <div class="value">Rs {{ row.advance_paid|floatformat:0 }}</div>
    </div>

    <div class="mini-kpi k-green">
      <div class="label">Received</div>
      <div class="value">Rs {{ row.paid_total|floatformat:0 }}</div>
    </div>

    <div class="mini-kpi k-red">
      <div class="label">Balance / Refund</div>
      <div class="value">
        Rs {{ row.due_total|floatformat:0 }}
      </div>
      {% if row.refund_due %}
        <small class="text-muted">
          Refund: Rs {{ row.refund_due|floatformat:0 }}
        </small>
      {% endif %}
    </div>

  </div>

  <!-- Guest Info -->
  <div class="cod-card">
    <div class="cod-head">
      <div class="cod-title">Guest & Stay Information</div>
    </div>

    <div class="cod-body">
      <div class="info-grid">

        <div class="info-box">
          <small>Guest</small>
          <div>{{ row.guest_name|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Contact</small>
          <div>{{ row.guest_contact|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Rooms</small>
          <div>{{ row.rooms }}</div>
        </div>

        <div class="info-box">
          <small>Status</small>
          <div>{{ row.status }}</div>
        </div>

        <div class="info-box">
          <small>Check-in</small>
          <div>{{ row.checkin_date|date:"Y-m-d" }}</div>
        </div>

        <div class="info-box">
          <small>Checkout</small>
          <div>{{ row.checkout_date|date:"Y-m-d" }}</div>
        </div>

      </div>
    </div>
  </div>

  <!-- Amount Summary -->
  <div class="cod-card">
    <div class="cod-head">
      <div class="cod-title">Amount Summary</div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 cod-table">
        <tbody>
          <tr>
            <th>Base Amount</th>
            <td class="money">Rs {{ row.base_amount|floatformat:0 }}</td>
          </tr>

          <tr>
            <th>Tax</th>
            <td class="money">
              Rs {{ row.tax_value|floatformat:0 }}
              <small class="text-muted">
                ({{ row.tax_percent|floatformat:2 }}%)
              </small>
            </td>
          </tr>

          <tr>
            <th>Grand Total</th>
            <td class="money">Rs {{ row.grand_total|floatformat:0 }}</td>
          </tr>

          <tr>
            <th>Advance</th>
            <td class="money">Rs {{ row.advance_paid|floatformat:0 }}</td>
          </tr>

          <tr>
            <th>Paid at Checkout</th>
            <td class="money text-success">Rs {{ row.paid_total|floatformat:0 }}</td>
          </tr>

          <tr>
            <th>Balance</th>
            <td class="money text-danger">Rs {{ row.due_total|floatformat:0 }}</td>
          </tr>

          {% if row.refund_due %}
            <tr>
              <th>Refund</th>
              <td class="money">Rs {{ row.refund_due|floatformat:0 }}</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Folio Breakdown -->
  <div class="cod-card">
    <div class="cod-head">
      <div class="cod-title">Folio Breakdown</div>
      <small class="text-muted">Pre-tax/net amounts</small>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 cod-table">
        <thead>
          <tr>
            <th>Head</th>
            <th class="money">Amount</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Room Rent</td>
            <td class="money">Rs {{ breakdown.room_rent|floatformat:0 }}</td>
          </tr>

          <tr>
            <td>Room Service</td>
            <td class="money">Rs {{ breakdown.room_service|floatformat:0 }}</td>
          </tr>

          <tr>
            <td>Restaurant</td>
            <td class="money">Rs {{ breakdown.restaurant|floatformat:0 }}</td>
          </tr>

          <tr>
            <td>Other</td>
            <td class="money">Rs {{ breakdown.other|floatformat:0 }}</td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <th>Total Base</th>
            <th class="money">Rs {{ row.base_amount|floatformat:0 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- Payment Split -->
  <div class="cod-card">
    <div class="cod-head">
      <div class="cod-title">Checkout Payment Split</div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 cod-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Bank</th>
            <th class="money">Amount</th>
          </tr>
        </thead>

        <tbody>
          {% for p in payment_rows %}
            <tr>
              <td>{{ p.date|date:"Y-m-d" }}</td>
              <td>{{ p.type }}</td>
              <td>{{ p.bank_name }}</td>
              <td class="money text-success">Rs {{ p.amount|floatformat:0 }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted py-3">
                No checkout payment split found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="3">Paid at Checkout</th>
            <th class="money text-success">Rs {{ row.paid_total|floatformat:0 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}