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

{% block title %}Pre-Booking Detail{% endblock %}


{% block content %}

<style>
  .pbd-page{padding:16px;}
  .pbd-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .pbd-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }
  .pbd-subtitle{
    margin:4px 0 0;
    color:#64748b;
    font-size:13px;
  }
  .pbd-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;
  }
  .table-wrap{overflow:auto;}
  .pbd-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .status-note{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    padding:10px 12px;
    border-radius:12px;
    margin-bottom:14px;
    font-weight:700;
  }
  @media(max-width:900px){
    .info-grid{grid-template-columns:1fr 1fr;}
    .pbd-header{flex-direction:column;align-items:flex-start;}
  }
</style>

<div class="pbd-page">

  <div class="pbd-header">
    <div>
      <h1 class="pbd-title">Pre-Booking Detail - {{ b.prebook_ref_label }}</h1>
      <p class="pbd-subtitle">
        {% if b.has_official_tid %}
          Booking Code: BC#{{ b.booking_code }} |
        {% else %}
          No T# yet |
        {% endif %}
        Source: {{ b.source|default:"-"|title }} |
        Status: {{ b.status }}
      </p>
    </div>

    <div class="pbd-actions">
      <a href="{% url 'hotel:prebook:prebook_list' %}" class="btn btn-light">
        Back
      </a>

      <a href="{% url 'hotel:prebook:prebook_voucher' b.prebook_ref  %}" target="_blank" class="btn btn-secondary">
        Voucher PDF
      </a>

      {% if can_edit %}
        <a href="{% url 'hotel:prebook:prebook_edit' b.prebook_ref  %}" class="btn btn-warning">
          Edit
        </a>
      {% endif %}

      {% if can_pay %}
        <a href="{% url 'hotel:prebook:prebook_pay' b.prebook_ref  %}" class="btn btn-success">
          Payment
        </a>
      {% endif %}

      {% if can_checkin %}
        <a href="{% url 'hotel:checkin:checkin_edit' b.t_id  %}" class="btn btn-primary">
          Check-in
        </a>
      {% endif %}

      {% if can_cancel %}
        <a href="{% url 'hotel:prebook:prebook_cancel' b.prebook_ref  %}"
           class="btn btn-danger"
           onclick="return confirm('Cancel this booking and release holds?');">
          Cancel
        </a>
      {% endif %}
    </div>
  </div>

  {% if not is_active %}
    <div class="status-note">
      This pre-booking is not active. Editing, payment and check-in actions are disabled.
    </div>
  {% endif %}

  <div class="pbd-card">
    <h5><strong>Guest & Booking Info</strong></h5>

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

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

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

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

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

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

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

      <div class="info-item">
        <div class="k">Pay Mode</div>
        <div class="v">{{ b.pay_mode|default:"-" }}</div>
      </div>

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

        <div class="v">
          {% if b.tax_exclusive %}
            Exclusive
          {% else %}
            Inclusive
          {% endif %}
        </div>
      </div>

      <div class="info-item">
        <div class="k">Source</div>
        <div class="v">{{ b.source|default:"-"|title }}</div>
      </div>

      <div class="info-item">
        <div class="k">Booking Code</div>
        <div class="v">{{ b.booking_code|default:"-" }}</div>
      </div>

      <div class="info-item">
        <div class="k">Adults</div>
        <div class="v">{% if b.guest %}{{ b.guest.no_of_adults|default:"1" }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">Kids</div>
        <div class="v">{% if b.guest %}{{ b.guest.no_of_kids|default:"0" }}{% else %}-{% endif %}</div>
      </div>
    </div>
  </div>

  <div class="pbd-card">
    <h5><strong>Room Categories / Booking Items</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Category</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Rate / Night</th>
            <th class="text-right">Discount / Night</th>
            <th class="text-right">Net / Night</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{% if it.category %}{{ it.category.name }}{% else %}-{% endif %}</td>
              <td class="text-right">{{ it.qty }}</td>
              <td class="text-right">{{ it.rate_per_night|floatformat:0 }}</td>
              <td class="text-right">{{ it.discount_per_night|floatformat:0 }}</td>
              <td class="text-right">
                {{ it.rate_per_night|floatformat:0 }}
              </td>
              <td class="text-right">
                {% widthratio it.rate_per_night 1 it.qty %}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="7" class="text-center text-muted">No booking items found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="pbd-card">
    <h5><strong>Amount Summary</strong></h5>

    <div class="info-grid">
      <div class="info-item">
  <div class="k">Pre-Tax Subtotal</div>

  <div class="v">
    {{ b.subtotal|floatformat:2 }}
  </div>
</div>

      <div class="info-item">
        <div class="k">
          {% if b.tax_exclusive %}
            Tax Added
          {% else %}
            Included Tax
          {% endif %}
        </div>

        <div class="v">
          {{ b.tax_amount|floatformat:2 }}
        </div>
      </div>

      <div class="info-item">
        <div class="k">Total Amount</div>
        <div class="v">{{ b.total_amount|floatformat:0 }}</div>
      </div>

      <div class="info-item">
        <div class="k">Advance Required</div>
        <div class="v">{{ b.advance_required|floatformat:0 }}</div>
      </div>

      <div class="info-item">
        <div class="k">Paid</div>
        <div class="v">{{ paid_sum|floatformat:0 }}</div>
      </div>

      <div class="info-item">
        <div class="k">Advance Balance</div>
        <div class="v">{{ advance_balance|floatformat:0 }}</div>
      </div>

      <div class="info-item">
        <div class="k">Remaining Total</div>
        <div class="v">{{ remaining_amount|floatformat:0 }}</div>
      </div>

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

        <div class="v">
          {{ b.tax_percent|floatformat:2 }}%
          {% if b.tax_exclusive %}
            Exclusive
          {% else %}
            Inclusive
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="pbd-card">
    <h5><strong>Payment Ledger</strong></h5>

    <div class="table-wrap">
      <table class="simple-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Stage</th>
            <th>Description</th>
            <th>Bank</th>
            <th>Category</th>
            <th>Transaction</th>
            <th class="text-right">Amount</th>
            <th class="text-right">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for p in ledger %}
            <tr>
              <td>{{ p.transaction_date|date:"d/m/Y" }}</td>
              <td>{{ p.stage_label }}</td>
              <td>{{ p.bill_title_descp|default:"-" }}</td>
              <td>{{ p.bank_name }}</td>
              <td>{{ p.category_label }}</td>
              <td>{{ p.transaction_label }}</td>
              <td class="text-right">{{ p.amount_transaction|floatformat:0 }}</td>
              <td class="text-right">
                {% if p.is_prebook_editable and can_pay %}
                  <a class="btn btn-sm btn-outline-warning"
                     href="{% url 'hotel:prebook:prebook_pay_edit' b.t_id p.payment_id %}">
                    Edit
                  </a>
                {% else %}
                  -
                {% endif %}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="8" class="text-center text-muted">No payment found.</td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="6" class="text-right">Total Paid</th>
            <th class="text-right">{{ paid_sum|floatformat:0 }}</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

{% endblock %}