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

{% block title %}Checkout — Booking T#{{ booking.t_id }}{% endblock %}
{% block heading %}Checkout — Booking T#{{ booking.t_id }}{% endblock %}

{% block stylesheets %}
<style>
  .co-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.04);
  }

  .co-card-header{
    padding:10px 14px;
    border-bottom:1px solid #eef0f3;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .co-card-body{
    padding:14px;
  }

  .co-muted{
    color:#6b7280;
    font-size:12px;
  }

  .co-badge{
    display:inline-block;
    padding:3px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
  }

  .co-badge-open{
    background:#e0f2fe;
    color:#075985;
  }

  .co-badge-settled{
    background:#dcfce7;
    color:#166534;
  }

  .co-summary-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
  }

  .co-summary-row strong{
    font-weight:800;
  }

  .co-total-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
  }

  .co-grand{
    font-size:24px;
    font-weight:900;
    color:#111827;
  }

  .co-payable{
    font-size:28px;
    font-weight:900;
    color:#b91c1c;
  }

  .co-table th,
  .co-table td{
    vertical-align:middle !important;
  }

  .co-tender-row{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px;
    margin-bottom:8px;
    background:#fff;
  }

  .co-sticky{
    position:sticky;
    top:12px;
  }

  .route-box{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }

  .route-mini{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:8px;
    text-align:center;
  }

  .route-mini span{
    display:block;
    color:#6b7280;
    font-size:12px;
  }

  .co-tax-exclusive{
  background:#dbeafe;
  color:#1d4ed8;
}

.co-tax-inclusive{
  background:#dcfce7;
  color:#166534;
}

  .route-mini strong{
    font-size:16px;
  }

  @media(max-width:991px){
    .co-sticky{position:static;}
    .route-box{grid-template-columns:repeat(2, 1fr);}
  }
</style>
{% endblock %}

{% block content %}

<div class="row">
  <div class="col-lg-8">

    <!-- Guest / Stay Summary -->
    <div class="co-card mb-3">
      <div class="co-card-header">
        <span>Guest / Stay Summary</span>
        {% if folio.status == "Settled" %}
          <span class="co-badge co-badge-settled">Folio Settled</span>
        {% else %}
          <span class="co-badge co-badge-open">Folio Open</span>
        {% endif %}
      </div>

      <div class="co-card-body">
        <div class="row">
          <div class="col-md-4">
            <div><b>Guest:</b> {{ booking.guest.name|default:"-" }}</div>
            <div>
            <b>Booking:</b> T#{{ booking.t_id }}
            {% if booking.booking_code %} / Code #{{ booking.booking_code }}{% endif %}
          </div>
            <div><b>Status:</b> {{ booking.status }}</div>
          </div>

          <div class="col-md-4">
            <div><b>Check-in:</b> {{ booking.checkin_date|date:"Y-m-d" }}</div>
            <div><b>Checkout:</b> {{ booking.checkout_date|date:"Y-m-d" }}</div>
            <div><b>Nights:</b> {{ booking.nights }}</div>
          </div>

          <div class="col-md-4">
            <div><b>Billing:</b> {{ booking.billing_profile|default:"WalkIn" }}</div>
            <div><b>Pay Mode:</b> {{ default_pay_mode|default:"cash" }}</div>
            <div>
  <b>Tax Type:</b>

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

<div>
  <b>Tax Rate:</b>
  {{ tax_percent|floatformat:2 }}%
</div>
          </div>
        </div>

        {% if booking_extended %}
        <div class="alert alert-warning">
          Guest stay was extended automatically until
          <b>{{ actual_checkout_date|date:"Y-m-d" }}</b>.
          Extra room-night folio lines added: <b>{{ extra_nights_added }}</b>.
        </div>
      {% endif %}
      </div>
    </div>

    <!-- Route Buckets -->
    <div class="co-card mb-3">
      <div class="co-card-header">
        <span>Routing Summary</span>
        <small class="co-muted">Based on FolioLine.routed_to</small>
      </div>

      <div class="co-card-body">
        <div class="route-box">
          <div class="route-mini">
            <span>Guest</span>
            <strong>Rs {{ guest_subtotal|floatformat:0 }}</strong>
          </div>

          <div class="route-mini">
            <span>Company</span>
            <strong>Rs {{ company_subtotal|floatformat:0 }}</strong>
          </div>

          <div class="route-mini">
            <span>Board</span>
            <strong>Rs {{ board_subtotal|floatformat:0 }}</strong>
          </div>

          <div class="route-mini">
            <span>ENT</span>
            <strong>Rs {{ ent_subtotal|floatformat:0 }}</strong>
          </div>
        </div>

        <div class="alert alert-info mt-3 mb-0 py-2">
          Checkout payment sirf <b>Guest routed</b> amount par receive hoga. Company/Board/ENT later separate invoice/handling ke liye rahen ge.
        </div>
      </div>
    </div>

    <!-- Folio Lines -->
    <div class="co-card mb-3">
      <div class="co-card-header">
        <span>Folio Lines</span>
        <small class="co-muted">RoomNight / RoomService / Restaurant / Other</small>
      </div>

      <div class="co-card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0 co-table">
            <thead class="thead-light">
              <tr>
                <th style="width:105px;">Date</th>
                <th style="width:120px;">Type</th>
                <th style="width:90px;">Ref</th>
                <th class="text-right" style="width:80px;">Qty</th>
                <th class="text-right" style="width:110px;">
                  Entered Rate
                </th>

                <th class="text-right" style="width:110px;">
                  Discount
                </th>

                <th class="text-right" style="width:85px;">
                  Tax %
                </th>

                <th style="width:90px;">
                  Route
                </th>

                <th class="text-right" style="width:130px;">
                  Pre-Tax Amount
                </th>              </tr>
            </thead>

            <tbody>
              {% for ln in folio_lines %}
                <tr>
                  <td>{{ ln.date|date:"Y-m-d" }}</td>
                  <td>{{ ln.item_label }}</td>
                  <td>{{ ln.ref_id }}</td>
                  <td class="text-right">{{ ln.qty|floatformat:2 }}</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">
                    <b>{{ ln.amount|floatformat:2 }}</b>
                  </td>
                </tr>
              {% empty %}
                <tr>
                  <td colspan="9" class="text-center text-muted py-3">
                    No folio lines found.
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <div class="col-lg-4">
    <div class="co-sticky">

      <!-- Bill Summary -->
      <div class="co-card mb-3">
        <div class="co-card-header">
          <span>Bill Summary</span>
        </div>

        <div class="co-card-body">
          <div class="co-summary-row">
            <span>Room Rent</span>
            <strong>Rs {{ room_rent|floatformat:0 }}</strong>
          </div>

          <div class="co-summary-row">
            <span>Room Service</span>
            <strong>Rs {{ room_service|floatformat:0 }}</strong>
          </div>

          <div class="co-summary-row">
            <span>Restaurant</span>
            <strong>Rs {{ restaurant|floatformat:0 }}</strong>
          </div>

          <div class="co-summary-row">
            <span>Other</span>
            <strong>Rs {{ other|floatformat:0 }}</strong>
          </div>

          <hr>

          <div class="co-summary-row">
            <span>Pre-Tax Guest Subtotal</span>

            <strong id="jsSubtotal">
              Rs {{ guest_subtotal|floatformat:2 }}
            </strong>
          </div>

          <div class="co-summary-row">
            <span>
              {% if booking.tax_exclusive %}
                Tax Added
              {% else %}
                Included Tax
              {% endif %}

              {{ tax_percent|floatformat:2 }}%
            </span>

            <strong id="jsTax">
              Rs {{ tax_amount|floatformat:2 }}
            </strong>
          </div>

          <div class="co-summary-row">
            <span>Grand Total</span>
            <strong class="co-grand" id="jsGrand">Rs {{ grand_total|floatformat:0 }}</strong>
          </div>

          <hr>

          <div class="co-summary-row">
            <span>Advance Paid</span>
            <strong id="jsAdvance">Rs {{ advance_paid|floatformat:0 }}</strong>
          </div>

          <div class="co-summary-row">
            <span>Net Payable</span>
            <strong class="co-payable" id="jsNetPayable">Rs {{ net_payable|floatformat:0 }}</strong>
          </div>

          {% if refund_due > 0 %}
            <div class="alert alert-warning py-2 mb-0">
              Refund due before checkout payment: <b>Rs {{ refund_due|floatformat:0 }}</b>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Checkout Form -->
      <form method="post" action="{% url 'hotel:checkout:checkout_finalize' booking.t_id %}" id="checkoutForm">
        {% csrf_token %}
        <input type="hidden" name="checkout_action" id="checkoutAction" value="finalize">

        {% if is_refinalize %}
          <div class="alert alert-warning py-2">
            <b>Re-finalization mode:</b> existing checkout summary found.
          </div>
        {% endif %}

        <div class="co-card mb-3">
          <div class="co-card-header">
            <span>
              {% if refund_due > 0 %}
                Refund Tenders
              {% else %}
                Payment Tenders
              {% endif %}
            </span>
            <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddTender">+ Add</button>
          </div>

          <div class="co-card-body">
            <input type="hidden" name="tenders_count" id="tendersCount" value="1">

            <div id="tendersBox">
              <div class="co-tender-row tender-row" data-index="0">
                <div class="form-row">
                  <div class="col-4">
                    <label class="small">Type</label>
                    <select name="tender[0][type]" class="form-control form-control-sm tender-type">
                      <option value="Cash">Cash</option>
                      <option value="Digital">Digital</option>
                    </select>
                  </div>

                  <div class="col-5">
                    <label class="small">Bank</label>
                    <select name="tender[0][bank_tid]" class="form-control form-control-sm tender-bank">
                      {% for b in banks %}
                        <option value="{{ b.t_id }}">{{ b.name }}</option>
                      {% endfor %}
                    </select>
                  </div>

                  <div class="col-3">
                    <label class="small">Amount</label>
                    <input type="number" step="0.01" min="0" name="tender[0][amount]" class="form-control form-control-sm tender-amount" value="0">
                  </div>
                </div>

                <div class="text-right mt-2">
                  <button type="button" class="btn btn-sm btn-outline-danger btnRemoveTender">Remove</button>
                </div>
              </div>
            </div>

            <button type="button" class="btn btn-sm btn-outline-success mt-2" id="btnFillPayable">
              {% if refund_due > 0 %}
                Fill Refund Amount
              {% else %}
                Fill Net Payable
              {% endif %}
            </button>
          </div>
        </div>

        <div class="co-card mb-3">
          <div class="co-card-header">
            <span>Live Payment Status</span>
          </div>

          <div class="co-card-body">
            <div class="co-total-box">
              <div class="co-summary-row">
                <span>Net Payable</span>
                <strong id="liveNet">Rs {{ net_payable|floatformat:0 }}</strong>
              </div>

              <div class="co-summary-row">
                <span>Paid Now</span>
                <strong id="livePaid">Rs 0</strong>
              </div>

              <div class="co-summary-row">
                <span>Remaining</span>
                <strong id="liveRemaining">Rs {{ net_payable|floatformat:0 }}</strong>
              </div>

              <div class="co-summary-row">
                <span>Refund</span>
                <strong id="liveRefund">Rs 0</strong>
              </div>
            </div>

            <small class="co-muted d-block mt-2">
              Finalize tab enable hoga jab paid amount net payable ke equal ya greater ho.
            </small>
          </div>
        </div>

        <div class="text-right mb-3">
          <button type="button" id="btnPreprint" class="btn btn-outline-secondary">
            Pre-Print
          </button>

          <button type="submit" class="btn btn-primary" id="btnFinalize" disabled>
            Finalize Checkout
          </button>
          <button type="button"
                class="btn btn-success"
                id="btnFinalizeWhatsApp"
                style="background-color:#25D366;border-color:#25D366;">
          <i class="fab fa-whatsapp mr-1"></i>Finalize & WhatsApp
        </button>
        </div>
      </form>

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

{% endblock %}

{% block javascripts %}
<script>
(function(){
  "use strict";

  var NET_PAYABLE = parseFloat("{{ net_payable|default:0 }}") || 0;
  var REFUND_DUE = parseFloat("{{ refund_due|default:0 }}") || 0;
  var IS_REFUND = REFUND_DUE > 0.009;

  function fmtMoney(value){
    var n = parseFloat(value || 0);
    if (isNaN(n)) n = 0;

    n = Math.round(n * 100) / 100;

    if (Math.abs(n - Math.trunc(n)) < 0.000001){
      return "Rs " + String(Math.trunc(n));
    }

    return "Rs " + n.toFixed(2);
  }

  function tenderRows(){
    return Array.prototype.slice.call(document.querySelectorAll("#tendersBox .tender-row"));
  }

  function tenderTotal(){
    var total = 0;

    tenderRows().forEach(function(row){
      var inp = row.querySelector(".tender-amount");
      var val = parseFloat((inp && inp.value) || "0");
      if (!isNaN(val) && val > 0){
        total += val;
      }
    });

    return Math.round(total * 100) / 100;
  }

  function reindexTenders(){
    var rows = tenderRows();
    var count = document.getElementById("tendersCount");

    rows.forEach(function(row, idx){
      row.setAttribute("data-index", idx);

      var type = row.querySelector(".tender-type");
      var bank = row.querySelector(".tender-bank");
      var amount = row.querySelector(".tender-amount");

      if (type) type.name = "tender[" + idx + "][type]";
      if (bank) bank.name = "tender[" + idx + "][bank_tid]";
      if (amount) amount.name = "tender[" + idx + "][amount]";
    });

    if (count) count.value = rows.length;
  }

  function replacePlaceholders(template, data) {
  let result = template || '';

  for (const [key, value] of Object.entries(data)) {
    const placeholder = '{' + key + '}';
    result = result.split(placeholder).join(value || '');
  }

  return result;
}

function normalizePkPhone(phone) {
  phone = (phone || '').toString().trim();
  phone = phone.replace(/\s+/g, '').replace(/-/g, '').replace(/\+/g, '');

  if (phone.startsWith('0')) {
    phone = '92' + phone.substring(1);
  }

  return phone;
}

function getCheckoutFallbackTemplate() {
  return `Dear *{guest_name}*,

Your check-out has been completed successfully ✅

*Final Bill Details:*
━━━━━━━━━━━━━━━
🧾 Invoice No: *{invoice_no}*
🏨 Room No: *{room_no}*
📅 Check-In: {checkin_date}
📅 Check-Out: {checkout_date}
🌙 Nights: {nights}
💰 Total Bill: Rs. {amount}
💵 Advance: Rs. {advance}
💳 Paid: Rs. {paid}
📋 Balance: Rs. {remaining}
━━━━━━━━━━━━━━━

Thank you for staying with *{hotel_name}*.
We hope to see you again!`;
}

function validateCheckoutBeforeAjax() {
  var paid = tenderTotal();

  if (IS_REFUND) {
    if (paid + 0.01 < REFUND_DUE) {
      alert("Refund incomplete. Required: " + fmtMoney(REFUND_DUE) + ", Selected: " + fmtMoney(paid));
      return false;
    }

    if (paid > REFUND_DUE + 0.01) {
      alert("Refund cannot be greater than " + fmtMoney(REFUND_DUE));
      return false;
    }

    return true;
  }

  if (NET_PAYABLE > 0 && paid + 0.01 < NET_PAYABLE) {
    alert("Payment incomplete. Required: " + fmtMoney(NET_PAYABLE) + ", Paid: " + fmtMoney(paid));
    return false;
  }

  return true;
}


var waBtn = document.getElementById("btnFinalizeWhatsApp");

if (waBtn) {
  waBtn.addEventListener("click", async function () {
    if (!validateCheckoutBeforeAjax()) {
      return;
    }

    var form = document.getElementById("checkoutForm");
    var actionInput = document.getElementById("checkoutAction");

    if (actionInput) {
      actionInput.value = "save_whatsapp";
    }

    var origHTML = this.innerHTML;
    this.disabled = true;
    this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Finalizing...';

    try {
      // ================================
      // Step 1: Finalize checkout in Django
      // ================================
      var fd = new FormData(form);
      fd.set("checkout_action", "save_whatsapp");

      var checkoutUrl = form.getAttribute("action");

      var resp = await fetch(checkoutUrl, {
        method: "POST",
        body: fd,
        credentials: "same-origin",
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        }
      });

      var rawText = await resp.text();

      var data = null;
      try {
        data = JSON.parse(rawText);
      } catch (jsonErr) {
        console.error("Server returned HTML/text instead of JSON:");
        console.error(rawText);
        throw new Error("Server JSON nahi de raha. Django terminal mein actual error check karo.");
      }

      if (!resp.ok || !data.ok) {
        throw new Error(data.error || "Checkout finalize failed");
      }

      // ================================
      // Step 2: Get default checkout template
      // ================================
      var templateText = "";

      try {
        var templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'hotel_checkout' %}", {
          method: "GET",
          credentials: "same-origin",
          headers: {
            "X-Requested-With": "XMLHttpRequest"
          }
        });

        var templateData = await templateResp.json();

        if (templateData.ok && templateData.template_text) {
          templateText = templateData.template_text;
        } else {
          templateText = getCheckoutFallbackTemplate();
        }

      } catch (templateErr) {
        console.warn("Template fetch failed:", templateErr);
        templateText = getCheckoutFallbackTemplate();
      }

      // ================================
      // Step 3: Build WhatsApp message
      // ================================
      var msg = replacePlaceholders(templateText, {
        hotel_name: data.hotel_name || data.shop_name || "Hotel",
        shop_name: data.shop_name || data.hotel_name || "Hotel",

        guest_name: data.guest_name || "Guest",
        mobile: data.guest_phone || "",

        booking_no: data.booking_no || "",
        invoice_no: data.invoice_no || "",
        room_no: data.room_no || "",

        checkin_date: data.checkin_date || "",
        checkout_date: data.checkout_date || "",
        nights: data.nights || "",

        amount: data.amount || "0",
        advance: data.advance || "0",
        paid: data.paid || "0",
        remaining: data.remaining || "0",
        refund: data.refund || "0",

        date: data.date || "",
        address: data.address || data.shop_address || "",
        remarks: data.shop_remarks || data.shop_footer || ""
      });

      msg += `

━━━━━━━━━━━━━━━
_Attached: Final checkout invoice PDF_
_Automated Message from Blue Primes Software (blueprimes.com)_`;

      // ================================
      // Step 4: Prepare WhatsApp FormData
      // ================================
      var waFD = new FormData();
      waFD.append("phone", normalizePkPhone(data.guest_phone));
      waFD.append("message", msg);

      // ================================
      // Step 5: Fetch final checkout PDF and attach
      // ================================
      if (data.pdf_url) {
        var pdfUrl = data.pdf_url;

        if (pdfUrl.startsWith("/")) {
          pdfUrl = window.location.origin + pdfUrl;
        }

        var pdfResp = await fetch(pdfUrl, {
          method: "GET",
          credentials: "same-origin",
          headers: {
            "X-Requested-With": "XMLHttpRequest"
          }
        });

        if (!pdfResp.ok) {
          throw new Error("Checkout finalized, but PDF fetch failed.");
        }

        var pdfBlob = await pdfResp.blob();

        if (!pdfBlob || pdfBlob.size <= 0) {
          throw new Error("Checkout finalized, but PDF file is empty.");
        }

        var invoiceNo = (data.invoice_no || data.booking_no || data.booking_t_id || "checkout")
          .toString()
          .replace(/[^a-zA-Z0-9_-]/g, "_");

        var pdfFile = new File(
          [pdfBlob],
          "checkout_invoice_" + invoiceNo + ".pdf",
          { type: "application/pdf" }
        );

        waFD.append("attachment", pdfFile);

        console.log("Checkout PDF attached:", pdfFile.name, pdfFile.size);
      } else {
        throw new Error("Checkout PDF URL missing in payload.");
      }

      // ================================
      // Step 6: Send WhatsApp message + PDF
      // ================================
      this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending WhatsApp...';

      var waResp = await fetch("http://localhost:3000/api/send-media", {
        method: "POST",
        body: waFD
      });

      var waData = await waResp.json();

      if (waData.success) {
        alert("✅ Checkout finalized and WhatsApp message + PDF sent to " + data.guest_name);

        if (data.pdf_url) {
          window.location.href = data.pdf_url;
        }
      } else {
        alert("Checkout finalized but WhatsApp/PDF failed: " + (waData.error || "Unknown error"));

        if (data.pdf_url) {
          window.location.href = data.pdf_url;
        }
      }

    } catch (err) {
      console.error(err);
      alert(err.message || "Checkout WhatsApp failed.");
    } finally {
      this.disabled = false;
      this.innerHTML = origHTML;

      if (actionInput) {
        actionInput.value = "finalize";
      }
    }
  });
}

  function recalc(){
    var tenderAmount = tenderTotal();
    var btn = document.getElementById("btnFinalize");

    if (IS_REFUND){
      var refundRemaining = REFUND_DUE - tenderAmount;
      var overRefund = 0;

      if (refundRemaining < 0){
        overRefund = Math.abs(refundRemaining);
        refundRemaining = 0;
      }

      document.getElementById("liveNet").textContent = fmtMoney(REFUND_DUE);
      document.getElementById("livePaid").textContent = fmtMoney(tenderAmount);
      document.getElementById("liveRemaining").textContent = fmtMoney(refundRemaining);
      document.getElementById("liveRefund").textContent = fmtMoney(REFUND_DUE);

      btn.disabled = (
        tenderAmount + 0.01 < REFUND_DUE ||
        tenderAmount > REFUND_DUE + 0.01
      );

      return;
    }

    var paid = tenderAmount;
    var remaining = NET_PAYABLE - paid;
    var refund = 0;

    if (remaining < 0){
      refund = Math.abs(remaining);
      remaining = 0;
    }

    document.getElementById("liveNet").textContent = fmtMoney(NET_PAYABLE);
    document.getElementById("livePaid").textContent = fmtMoney(paid);
    document.getElementById("liveRemaining").textContent = fmtMoney(remaining);
    document.getElementById("liveRefund").textContent = fmtMoney(refund);

    if (NET_PAYABLE <= 0){
      btn.disabled = false;
      return;
    }

    btn.disabled = paid + 0.01 < NET_PAYABLE;
  }

  function makeTenderRow(idx){
    var div = document.createElement("div");
    div.className = "co-tender-row tender-row";
    div.setAttribute("data-index", idx);

    div.innerHTML = `
      <div class="form-row">
        <div class="col-4">
          <label class="small">Type</label>
          <select name="tender[${idx}][type]" class="form-control form-control-sm tender-type">
            <option value="Cash">Cash</option>
            <option value="Digital">Digital</option>
          </select>
        </div>

        <div class="col-5">
          <label class="small">Bank</label>
          <select name="tender[${idx}][bank_tid]" class="form-control form-control-sm tender-bank">
            {% for b in banks %}
              <option value="{{ b.t_id }}">{{ b.name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-3">
          <label class="small">Amount</label>
          <input type="number" step="0.01" min="0" name="tender[${idx}][amount]" class="form-control form-control-sm tender-amount" value="0">
        </div>
      </div>

      <div class="text-right mt-2">
        <button type="button" class="btn btn-sm btn-outline-danger btnRemoveTender">Remove</button>
      </div>
    `;

    return div;
  }

  document.getElementById("btnAddTender").addEventListener("click", function(){
    var box = document.getElementById("tendersBox");
    var idx = tenderRows().length;

    box.appendChild(makeTenderRow(idx));
    reindexTenders();
    recalc();
  });

  document.getElementById("tendersBox").addEventListener("click", function(e){
    if (!e.target.classList.contains("btnRemoveTender")) return;

    var rows = tenderRows();

    if (rows.length <= 1){
      var inp = rows[0].querySelector(".tender-amount");
      if (inp) inp.value = "0";
      recalc();
      return;
    }

    var row = e.target.closest(".tender-row");
    if (row) row.parentNode.removeChild(row);

    reindexTenders();
    recalc();
  });

  document.getElementById("tendersBox").addEventListener("input", function(e){
    if (e.target.classList.contains("tender-amount")){
      recalc();
    }
  });

  document.getElementById("tendersBox").addEventListener("change", function(e){
    if (
      e.target.classList.contains("tender-type") ||
      e.target.classList.contains("tender-bank") ||
      e.target.classList.contains("tender-amount")
    ){
      recalc();
    }
  });

  document.getElementById("btnFillPayable").addEventListener("click", function(){
    var rows = tenderRows();

    rows.forEach(function(row, idx){
      var inp = row.querySelector(".tender-amount");
      if (!inp) return;
      inp.value = idx === 0 ? String(IS_REFUND ? REFUND_DUE : NET_PAYABLE) : "0";
    });

    recalc();
  });

  document.getElementById("checkoutForm").addEventListener("submit", function(e){
    var paid = tenderTotal();

    if (IS_REFUND){
      if (paid + 0.01 < REFUND_DUE){
        e.preventDefault();
        alert("Refund incomplete. Required: " + fmtMoney(REFUND_DUE) + ", Selected: " + fmtMoney(paid));
        return false;
      }

      if (paid > REFUND_DUE + 0.01){
        e.preventDefault();
        alert("Refund cannot be greater than " + fmtMoney(REFUND_DUE));
        return false;
      }

      return true;
    }

    if (NET_PAYABLE > 0 && paid + 0.01 < NET_PAYABLE){
      e.preventDefault();
      alert("Payment incomplete. Required: " + fmtMoney(NET_PAYABLE) + ", Paid: " + fmtMoney(paid));
      return false;
    }

    return true;
  });

  var preBtn = document.getElementById("btnPreprint");
  if (preBtn){
    preBtn.addEventListener("click", function(){
      var url = "{% url 'hotel:checkout:checkout_preprint' booking.t_id %}";
      window.open(url, "_blank");
    });
  }

  recalc();
})();
</script>
{% endblock %}