{% extends "pos/base.html" %}
{% load static %}
{% block title %}Advance Payment — #{{ b.t_id }}{% endblock %}
{% block heading %}Advance Payment — Pre-Booking #{{ b.t_id }}{% endblock %}

{% block stylesheets %}
<style>
  .page-wrap { max-width: 1180px; margin: 0 auto; }
  .meta-bar {
    background: linear-gradient(90deg, #f8f9fa, #ffffff);
    border: 1px solid #e9ecef; border-radius: .5rem; padding: .75rem 1rem;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  }
  .meta-bar .left .title { font-weight: 600; }
  .meta-badges .badge { font-size: .72rem; }
  .meta-badges .badge + .badge { margin-left: .35rem; }

  .card { border-radius: .75rem; }
  .card-header { background: #fff; border-bottom: 1px solid #eee; }
  .pay-card label.small { font-weight: 600; letter-spacing: .2px; color:#333; }
  .amount-lg .input-group-text { font-weight: 700; }
  .amount-lg input { font-size: 1.2rem; font-weight: 700; text-align: right; }
  .kpi { border: 1px dashed #e5e7eb; border-radius: .5rem; padding:.5rem .75rem; }
  .kpi .h { font-size:.75rem; color:#6c757d; }
  .kpi .v { font-size:1.05rem; font-weight:700; }
  .kpi.positive .v { color: #198754; }
  .kpi.warning .v { color: #dc3545; }

  .sticky-actions {
    position: sticky; bottom: 0; z-index: 5; background: #fff;
    border-top: 1px solid #eee; padding: .75rem 0; margin-top: .5rem;
  }
  .bank-only { transition: all .15s ease; }
  .form-hint { font-size:.8rem; color:#6c757d; }
</style>
{% endblock %}

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

  <!-- ===== Meta Bar / Booking Snapshot ===== -->
  <div class="meta-bar mb-3">
    <div class="left">
      <div class="title">
        <i class="fas fa-user mr-1"></i> {{ b.guest.name|default:"Guest" }}
        <span class="text-muted ml-2">B#{{ b.t_id }}</span>
      </div>
      <div class="text-muted small">
        <span class="mr-2"><i class="far fa-calendar-alt"></i> {{ b.checkin_date }} → {{ b.checkout_date }}</span>
        <span class="mr-2"><i class="far fa-moon"></i> {{ b.nights }} night{{ b.nights|pluralize }}</span>
      </div>
    </div>
    <div class="meta-badges">
      <span class="badge badge-{% if b.status == 'CONFIRMED' %}success{% elif b.status == 'CANCELLED' %}danger{% else %}warning{% endif %}">
        {{ b.status }}
      </span>
      {% if b.booking_code %}
      <span class="badge badge-light">Code: {{ b.booking_code }}</span>
      {% endif %}
    </div>
  </div>

  <div class="row">
    <!-- ===== Left: Payment Form ===== -->
    <div class="col-lg-7">
      <div class="card pay-card">
        <div class="card-header py-2"><strong>Record Advance</strong></div>
        <div class="card-body">
          <form method="post" id="payForm"
                data-adv-required="{{ b.advance_required|default_if_none:0 }}"
                data-adv-received="{{ b.advance_received|default_if_none:0 }}">
            {% csrf_token %}

            <!-- Row 1: Amount + Date -->
            <div class="form-row amount-lg">
              <div class="col-md-6 mb-3">
                <label class="small mb-1">Amount</label>
                <div class="input-group">
                  <div class="input-group-prepend"><span class="input-group-text">Rs</span></div>
                  {{ form.amount }}
                </div>
                <div class="form-hint mt-1">
                  <i class="far fa-lightbulb"></i>
                  Recommended will appear below (based on pending).
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label class="small mb-1">Date</label>
                <div class="input-group">
                  <div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div>
                  {{ form.trx_date }}
                </div>
              </div>
            </div>

            <!-- Row 2: Cash Type + Bank + Desc -->
            <div class="form-row">
              <div class="col-md-4 mb-3">
                <label class="small mb-1">Cash Type</label>
                <div class="input-group">
                  <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-wallet"></i></span></div>
                  {{ form.cash_type }}
                </div>
              </div>
              <div class="col-md-4 mb-3 bank-only">
                <label class="small mb-1">Bank</label>
                <div class="input-group">
                  <div class="input-group-prepend"><span class="input-group-text"><i class="far fa-building"></i></span></div>
                  {{ form.bank_name }}
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label class="small mb-1">Description</label>
                <div class="input-group">
                  <div class="input-group-prepend"><span class="input-group-text"><i class="far fa-sticky-note"></i></span></div>
                  {{ form.description }}
                </div>
              </div>
            </div>

            <!-- Sticky actions -->
            <div class="sticky-actions d-flex justify-content-between align-items-center">
              <div class="form-hint">
                <span id="recHint" class="text-muted"></span>
              </div>
              <div>
                <button class="btn btn-success">
                  <i class="fas fa-save mr-1"></i>{% if edit_mode %}Update Payment{% else %}Save Payment{% endif %}
                </button>
                <a href="{% url 'hotel:staff_prebook_detail' b.id %}" class="btn btn-secondary">Cancel</a>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="small text-muted mt-2">
        <i class="far fa-shield-alt"></i> Edits update the ledger & booking’s advance automatically.
      </div>
    </div>

    <!-- ===== Right: Booking / Advance Summary ===== -->
    <div class="col-lg-5">
      <div class="card">
        <div class="card-header py-2"><strong>Advance Summary</strong></div>
        <div class="card-body">
          <div class="row summary-kpis">
            <div class="col-6 mb-2">
              <div class="kpi">
                <div class="h">Advance Required</div>
                <div class="v">Rs {{ b.advance_required|default_if_none:0|floatformat:2 }}</div>
              </div>
            </div>
            <div class="col-6 mb-2">
              <div class="kpi">
                <div class="h">Advance Received</div>
                <div class="v">Rs {{ b.advance_received|default_if_none:0|floatformat:2 }}</div>
              </div>
            </div>
            <div class="col-12 mb-2">
              <div id="kpiPending" class="kpi warning">
                <div class="h">Pending</div>
                <div class="v" id="pendingVal">—</div>
              </div>
            </div>
          </div>
          <div class="form-hint">
            Need full voucher / ledger? <a href="{% url 'hotel:staff_prebook_detail' b.id %}">Open voucher</a>.
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Toggle bank field by Cash Type
  function toggleBank() {
    const sel = document.querySelector('select[name="cash_type"]');
    if (!sel) return;
    const val = (sel.value || '').toLowerCase();
    const show = (val === 'bank');
    document.querySelectorAll('.bank-only').forEach(el => el.style.display = show ? '' : 'none');
    if (show) {
      const bankSel = document.querySelector('select[name="bank_name"]');
      if (bankSel) bankSel.focus();
    }
  }
  const cashTypeSelect = document.querySelector('select[name="cash_type"]');
  if (cashTypeSelect) {
    cashTypeSelect.addEventListener('change', toggleBank);
  }
  toggleBank();

  // Compute & show "Recommended" & "Pending"
  const form = document.getElementById('payForm');
  const amtInput = document.querySelector('input[name="amount"]');
  const recHint = document.getElementById('recHint');
  const kpiPending = document.getElementById('kpiPending');
  const pendingVal = document.getElementById('pendingVal');

  const advReq = parseFloat(form?.dataset?.advRequired || '0') || 0;
  const advRec = parseFloat(form?.dataset?.advReceived || '0') || 0;
  let pending = +(Math.round(((advReq - advRec) + Number.EPSILON) * 100) / 100);

  function fmt2(x){ return (Math.round((x + Number.EPSILON) * 100) / 100).toFixed(2); }

  // Show KPIs
  pendingVal.textContent = 'Rs ' + fmt2(pending);
  if (pending > 0) { kpiPending.classList.add('warning'); kpiPending.classList.remove('positive'); }
  else { kpiPending.classList.add('positive'); kpiPending.classList.remove('warning'); }

  // Prefill recommended if empty
  if (amtInput && (!amtInput.value || parseFloat(amtInput.value) === 0) && pending > 0) {
    amtInput.value = fmt2(pending);
  }
  if (recHint) {
    recHint.innerHTML = pending > 0
      ? `<i class="far fa-lightbulb"></i> Recommended: <strong>Rs ${fmt2(pending)}</strong>`
      : `<i class="far fa-check-circle"></i> No pending advance.`;
  }

  // UX niceties: Enter on amount submits, disable button on submit
  if (amtInput) {
    amtInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        form.requestSubmit && form.requestSubmit();
      }
    });
  }
  form && form.addEventListener('submit', () => {
    const btn = form.querySelector('button[type="submit"], .btn-success');
    if (btn) {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Saving...';
    }
  });
});
</script>
{% endblock %}