{% extends "hotel/public/base.html" %}
{% block title %}Book Your Stay - {{ hotel_name }}{% endblock %}

{% block head %}
<style>
  :root{
    --gold:#b8860b;
    --gold2:#d4af37;
    --dark:#111827;
    --muted:#6b7280;
    --border:#e5e7eb;
    --soft:#f8fafc;
    --success:#16a34a;
    --danger:#b91c1c;
  }

  .bp-public-page{
    max-width:1180px;
    margin:0 auto;
    padding:10px 10px 28px;
  }

  .hotel-top{
    border-radius:24px;
    padding:18px;
    color:#fff;
    background:
      linear-gradient(135deg, rgba(17,24,39,.96), rgba(55,65,81,.92)),
      radial-gradient(circle at top right, rgba(212,175,55,.55), transparent 35%);
    box-shadow:0 18px 45px rgba(15,23,42,.18);
    overflow:hidden;
    position:relative;
  }

  .hotel-top:after{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:220px;
    height:220px;
    border-radius:999px;
    background:rgba(212,175,55,.18);
  }

  .hotel-brand{
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
    z-index:2;
  }

  .hotel-logo{
    width:62px;
    height:62px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex:0 0 auto;
  }

  .hotel-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .hotel-logo span{
    font-size:28px;
    font-weight:900;
    color:#facc15;
  }

  .hotel-brand h1{
    margin:0;
    font-size:1.8rem;
    line-height:1.1;
    font-weight:900;
  }

  .hotel-brand p{
    margin:5px 0 0;
    color:#e5e7eb;
    font-size:.92rem;
  }

  .hotel-contact{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
    position:relative;
    z-index:2;
  }

  .hotel-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.16);
    font-size:.82rem;
    color:#f9fafb;
  }

  .booking-hero{
    margin-top:16px;
    border-radius:22px;
    padding:18px;
    background:linear-gradient(135deg,#fff7ed,#fffbeb 45%,#ffffff);
    border:1px solid #fde68a;
    box-shadow:0 12px 32px rgba(146,64,14,.08);
  }

  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);
    gap:18px;
    align-items:center;
  }

  .hero-title{
    margin:0;
    font-size:1.45rem;
    font-weight:900;
    color:var(--dark);
  }

  .hero-text{
    margin:7px 0 0;
    color:#4b5563;
    font-size:.94rem;
  }

  .hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
  }

  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid #fde68a;
    color:#78350f;
    font-weight:700;
    font-size:.8rem;
  }

  .quick-date-card{
    background:#fff;
    border:1px solid #f3e8b8;
    border-radius:18px;
    padding:12px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
  }

  .booking-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(300px,.9fr);
    gap:18px;
    margin-top:16px;
  }

  .panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 12px 32px rgba(15,23,42,.07);
  }

  .panel-body{
    padding:16px;
  }

  .stepper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:8px;
    background:#f8fafc;
    border-bottom:1px solid var(--border);
    border-radius:22px 22px 0 0;
  }

  .step{
    border-radius:999px;
    padding:8px 10px;
    background:#fff;
    border:1px solid var(--border);
    text-align:center;
    color:#64748b;
    font-size:.82rem;
    font-weight:800;
  }

  .step.active{
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#fff;
    border-color:var(--gold);
    box-shadow:0 8px 16px rgba(184,134,11,.22);
  }

  .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .field label{
    display:block;
    font-size:.78rem;
    color:#6b7280;
    margin-bottom:5px;
    font-weight:800;
  }

  .field input,
  .field select{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:14px;
    padding:10px 12px;
    font-size:.92rem;
    background:#fff;
  }

  .field input:focus,
  .field select:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(184,134,11,.12);
  }

  .btn-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
  }

  .btn{
    border:1px solid #d1d5db;
    background:#fff;
    color:#111827;
    border-radius:999px;
    padding:10px 15px;
    cursor:pointer;
    font-weight:800;
    font-size:.9rem;
  }

  .btn:hover{
    background:#f9fafb;
  }

  .btn.primary{
    border-color:var(--gold);
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#fff;
  }

  .btn.primary:disabled{
    opacity:.55;
    cursor:not-allowed;
  }

  .btn.ghost{
    background:#f8fafc;
  }

  .hint{
    color:#6b7280;
    font-size:.82rem;
    margin-top:10px;
  }

  .hint.ok{
    color:var(--success);
    font-weight:800;
  }

  .room-list{
    display:grid;
    gap:12px;
    margin-top:12px;
  }

  .room-card{
    border:1px solid var(--border);
    border-radius:18px;
    padding:12px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
  }

  .room-card-grid{
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    gap:14px;
  }

  .room-thumb{
    height:150px;
    border-radius:16px;
    overflow:hidden;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#94a3b8;
    font-weight:800;
  }

  .room-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .room-title{
    margin:0;
    font-size:1.1rem;
    font-weight:900;
    color:#0f172a;
  }

  .room-desc{
    margin:6px 0;
    color:#64748b;
    font-size:.88rem;
    min-height:38px;
  }

  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:8px 0;
  }

  .chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 9px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-size:.78rem;
    font-weight:800;
  }

  .qty-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
  }

  .qty-row input{
    width:70px;
    text-align:center;
    border-radius:999px;
    font-weight:900;
  }

  .summary-card{
    position:sticky;
    top:12px;
    overflow:hidden;
  }

  .summary-head{
    padding:16px;
    color:#fff;
    background:linear-gradient(135deg,#111827,#374151);
  }

  .summary-head h3{
    margin:0;
    font-size:1.1rem;
    font-weight:900;
  }

  .summary-head p{
    margin:4px 0 0;
    font-size:.82rem;
    color:#d1d5db;
  }

  .summary-body{
    padding:16px;
  }

  .sum-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px dashed #e5e7eb;
    font-size:.9rem;
  }

  .sum-row:last-child{
    border-bottom:0;
  }

  .grand{
    font-size:1.25rem;
    font-weight:900;
    color:#111827;
  }

  .review-box{
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:16px;
    padding:12px;
  }

  .review-line{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px dashed #e2e8f0;
    font-size:.9rem;
  }

  .review-line:last-child{
    border-bottom:0;
  }

  .status-msg{
    display:none;
    margin-top:10px;
    padding:10px;
    border-radius:14px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:700;
  }

  @media(max-width:980px){
    .hero-grid,
    .booking-grid{
      grid-template-columns:1fr;
    }

    .summary-card{
      position:static;
    }
  }

  @media(max-width:680px){
    .hotel-brand{
      align-items:flex-start;
    }

    .hotel-brand h1{
      font-size:1.35rem;
    }

    .stepper{
      grid-template-columns:repeat(2,1fr);
      border-radius:18px 18px 0 0;
    }

    .form-grid,
    .room-card-grid{
      grid-template-columns:1fr;
    }

    .room-thumb{
      height:180px;
    }
  }
</style>
{% endblock %}

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

  <div id="bookingApp"
       data-tenant="{{ tenant_public_code|default:tenant_id|default:'1' }}"
       data-tenant-label="{{ tenant_label|default:hotel_name|default:'Hotel' }}"></div>

  <!-- Hotel Header -->
  <section class="hotel-top">
    <div class="hotel-brand">
      <div class="hotel-logo">
        {% if hotel_logo %}
          <img src="{{ hotel_logo }}" alt="{{ hotel_name }}">
        {% else %}
          <span>{{ hotel_name|first|upper }}</span>
        {% endif %}
      </div>

      <div>
        <h1>{{ hotel_name|default:"Hotel" }}</h1>
        <p>{{ hotel_tagline|default:"Book your stay in a few simple steps." }}</p>
      </div>
    </div>

    <div class="hotel-contact">
      {% if hotel_address %}
        <span class="hotel-pill">📍 {{ hotel_address }}</span>
      {% endif %}
      {% if hotel_phone %}
        <span class="hotel-pill">☎ {{ hotel_phone }}</span>
      {% endif %}
      <span class="hotel-pill">🏨 Online Room Booking</span>
    </div>
  </section>

  <!-- Hero -->
  <section class="booking-hero">
    <div class="hero-grid">
      <div>
        <h2 class="hero-title">Plan Your Stay</h2>
        <p class="hero-text">
          Select your dates, choose available rooms, enter your details and submit your booking request.
        </p>
        <div class="hero-badges">
          <span class="hero-badge">✓ Instant availability</span>
          <span class="hero-badge">✓ Secure guest record</span>
          <span class="hero-badge">✓ Bank transfer slip upload</span>
        </div>
      </div>

      <div class="quick-date-card">
        <div class="form-grid">
          <div class="field">
            <label>Check-in</label>
            <input type="date" id="checkin" value="{{ default_checkin|default:'' }}">
          </div>
          <div class="field">
            <label>Check-out</label>
            <input type="date" id="checkout" value="{{ default_checkout|default:'' }}">
          </div>
        </div>
        <button type="button" class="btn primary" id="btnLoad" style="width:100%;margin-top:10px;">
          Check Availability
        </button>
      </div>
    </div>
  </section>

  <div class="booking-grid">

    <!-- Main Form -->
    <section class="panel">
      <div class="stepper">
        <div class="step active" id="s1">1. Rooms</div>
        <div class="step" id="s2">2. Guest</div>
        <div class="step" id="s3">3. Payment</div>
        <div class="step" id="s4">4. Review</div>
      </div>

      <div class="panel-body">

        <!-- Step 1 -->
        <div id="step1">
          <h3 style="margin:0;">Choose Available Rooms</h3>
          <div class="hint" id="step1Warning">Pick dates and at least one room to continue.</div>
          <div id="categoryList" class="room-list"></div>

          <div class="btn-row">
            <span></span>
            <button type="button" class="btn primary" id="toStep2" disabled>Continue</button>
          </div>
        </div>

        <!-- Step 2 -->
        <div id="step2" style="display:none">
          <h3 style="margin-top:0;">Guest Details</h3>

          <div class="form-grid">
            <div class="field"><label>Full Name *</label><input id="g_name" required></div>
            <div class="field"><label>Email *</label><input id="g_email" type="email" required></div>
            <div class="field"><label>Phone *</label><input id="g_phone" required></div>
            <div class="field"><label>Nationality</label><input id="g_nationality"></div>
            <div class="field"><label>CNIC</label><input id="g_cnic"></div>
            <div class="field"><label>Passport</label><input id="g_passport"></div>
            <div class="field"><label>Create Password</label><input id="g_pwd" type="password"></div>
            <div class="field"><label>Confirm Password</label><input id="g_pwd2" type="password"></div>
            <div class="field"><label>Profession</label><input id="g_profession"></div>
            <div class="field"><label>Company</label><input id="g_company"></div>
            <div class="field"><label>Car No</label><input id="g_car"></div>
            <div class="field"><label>Address</label><input id="g_address"></div>
            <div class="field"><label>Adults</label><input id="g_adults" type="number" min="1" value="1"></div>
            <div class="field"><label>Kids</label><input id="g_kids" type="number" min="0" value="0"></div>
            <div class="field"><label>Remarks</label><input id="g_remarks"></div>
            <div class="field"><label>Additional Remarks</label><input id="g_remarks2"></div>
          </div>

          <div class="btn-row">
            <button type="button" class="btn ghost" id="back1">← Back</button>
            <button type="button" class="btn primary" id="toStep3">Continue</button>
          </div>
        </div>

        <!-- Step 3 -->
        <div id="step3" style="display:none">
          <h3 style="margin-top:0;">Payment Method</h3>

          <div class="chips">
            <label class="chip"><input type="radio" name="pay" value="transfer" checked> Bank Transfer</label>
            <label class="chip"><input type="radio" name="pay" value="cash"> On-Desk</label>
            <label class="chip"><input type="radio" name="pay" value="card"> Card</label>
          </div>

          <div class="hint">
            For bank transfer, booking confirmation page will allow you to upload payment slip.
          </div>

          <div class="btn-row">
            <button type="button" class="btn ghost" id="back2">← Back</button>
            <button type="button" class="btn primary" id="toStep4">Continue</button>
          </div>
        </div>

        <!-- Step 4 -->
        <div id="step4" style="display:none">
          <h3 style="margin-top:0;">Review Booking</h3>
          <div id="reviewBox" class="review-box"></div>

          <div class="btn-row">
            <button type="button" class="btn ghost" id="back3">← Back</button>
            <button type="button" class="btn primary" id="btnCreate">Create Booking</button>
          </div>

          <div id="doneMsg" class="status-msg">Creating booking…</div>
        </div>

      </div>
    </section>

    <!-- Summary -->
    <aside class="panel summary-card">
      <div class="summary-head">
        <h3>Booking Summary</h3>
        <p>Live calculation based on selected rooms and dates.</p>
      </div>

      <div class="summary-body">
        <div class="sum-row"><span>Nights</span><b id="t_nights">0</b></div>
        <div class="sum-row"><span>Subtotal</span><b id="t_subtotal">0.00</b></div>
        <div class="sum-row"><span>Tax (<span id="t_taxp">0</span>%)</span><b id="t_tax">0.00</b></div>
        <div class="sum-row"><span>Rooms</span><b id="t_rooms">0</b></div>
        <div class="sum-row"><span>Grand Total</span><span class="grand" id="t_grand">0.00</span></div>

        <div class="hint">
          Advance amount and deposit deadline will be shown after booking is created.
        </div>
      </div>
    </aside>

  </div>
</div>

<script>
const cfg = document.getElementById("bookingApp").dataset;
const TENANT = cfg.tenant || "1";
const TENANT_LABEL = cfg.tenantLabel || ("Tenant #" + TENANT);

const CONFIRM_TENANT_URL = "{% url 'hotel:public:booking_tenant_confirmation' tenant='__TENANT__' t_id=999999 %}";
const CONFIRM_FALLBACK_URL = "{% url 'hotel:public:booking_confirmation' t_id=999999 %}";
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
  return "";
}

const CSRF = getCookie("csrftoken");
const sel = {};

let totals = {
  nights: 0,
  subtotal: "0.00",
  tax_percent: "0.00",
  tax_amount: "0.00",
  grand_total: "0.00"
};

function step(n){
  [1,2,3,4].forEach(function(i){
    document.getElementById("step" + i).style.display = (i === n ? "block" : "none");
    document.getElementById("s" + i).classList.toggle("active", i === n);
  });
}

function val(id){
  const el = document.getElementById(id);
  return el ? el.value.trim() : "";
}

function selections(){
  return Object.entries(sel)
    .filter(function(pair){ return parseInt(pair[1] || 0, 10) > 0; })
    .map(function(pair){
      return {
        category_id: parseInt(pair[0], 10),
        qty: parseInt(pair[1], 10)
      };
    });
}

function totalSelectedRooms(){
  return selections().reduce(function(a,b){ return a + b.qty; }, 0);
}

function refreshTotalsDisplay(){
  document.getElementById("t_nights").innerText = totals.nights || 0;
  document.getElementById("t_subtotal").innerText = totals.subtotal || "0.00";
  document.getElementById("t_taxp").innerText = totals.tax_percent || "0";
  document.getElementById("t_tax").innerText = totals.tax_amount || "0.00";
  document.getElementById("t_grand").innerText = totals.grand_total || "0.00";
  document.getElementById("t_rooms").innerText = totalSelectedRooms();
}

function validateStep1(){
  const ok = totalSelectedRooms() > 0 && !!val("checkin") && !!val("checkout");
  const btn = document.getElementById("toStep2");
  const hint = document.getElementById("step1Warning");

  if (btn) btn.disabled = !ok;

  if (hint) {
    if (ok) {
      hint.textContent = "Looks good — continue to guest details.";
      hint.classList.add("ok");
    } else {
      hint.textContent = "Pick dates and at least one room to continue.";
      hint.classList.remove("ok");
    }
  }

  refreshTotalsDisplay();
}

async function calcTotals(){
  if(!val("checkin") || !val("checkout")) return;

  const body = {
    tenant: TENANT,
    checkin: val("checkin"),
    checkout: val("checkout"),
    selections: selections(),
    pay_mode: document.querySelector('input[name="pay"]:checked')?.value || "cash"
  };

  const r = await fetch("{% url 'hotel:public:api_calc' %}", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": CSRF
    },
    body: JSON.stringify(body)
  });

  if(!r.ok) return;

  totals = await r.json();
  refreshTotalsDisplay();
}

function catCard(c){
  const div = document.createElement("div");
  div.className = "room-card";

  const qty = sel[c.category_id] || 0;
  const img = c.photo
    ? `<img src="${c.photo}" alt="${c.name}">`
    : `<span>No Image</span>`;

  div.innerHTML = `
    <div class="room-card-grid">
      <div class="room-thumb">${img}</div>
      <div>
        <h3 class="room-title">${c.name}</h3>
        <p class="room-desc">${c.description || ""}</p>

        <div class="chips">
          <span class="chip">Available: ${c.available}</span>
          <span class="chip">Rate: ${c.rate}</span>
        </div>

        <div class="qty-row">
          <button type="button" class="btn ghost" data-action="minus">−</button>
          <input value="${qty}" data-id="${c.category_id}" class="qty">
          <button type="button" class="btn ghost" data-action="plus">+</button>
          <span class="hint" style="margin:0 0 0 auto;">Max 3 rooms</span>
        </div>
      </div>
    </div>
  `;

  div.querySelectorAll("button").forEach(function(b){
    b.addEventListener("click", function(){
      const id = c.category_id;
      const action = b.getAttribute("data-action");
      const cur = sel[id] || 0;

      if(action === "plus") sel[id] = Math.min(cur + 1, 3, parseInt(c.available || 0, 10));
      if(action === "minus") sel[id] = Math.max(cur - 1, 0);

      div.querySelector(".qty").value = sel[id] || 0;

      validateStep1();
      calcTotals();
    });
  });

  div.querySelector(".qty").addEventListener("change", function(e){
    let v = parseInt(e.target.value || "0", 10);
    if(isNaN(v)) v = 0;

    v = Math.max(0, Math.min(3, v, parseInt(c.available || 0, 10)));
    sel[c.category_id] = v;
    e.target.value = v;

    validateStep1();
    calcTotals();
  });

  return div;
}

async function loadAvailability(){
  const ci = val("checkin");
  const co = val("checkout");

  if(!ci || !co) return;

  const btn = document.getElementById("btnLoad");
  if(btn){
    btn.disabled = true;
    btn.textContent = "Checking...";
  }

  try{
    const url = `{% url 'hotel:public:api_availability' %}?checkin=${ci}&checkout=${co}&t=${TENANT}`;
    const r = await fetch(url);

    if(!r.ok){
      alert("Failed to load availability.");
      return;
    }

    const out = await r.json();
    const wrap = document.getElementById("categoryList");
    wrap.innerHTML = "";

    if(!out.results || !out.results.length){
      wrap.innerHTML = '<div class="hint">No rooms available for selected dates.</div>';
    } else {
      out.results.forEach(function(c){
        wrap.appendChild(catCard(c));
      });
    }

    validateStep1();
    await calcTotals();

  } finally {
    if(btn){
      btn.disabled = false;
      btn.textContent = "Check Availability";
    }
  }
}

function setDefaultDatesIfEmpty(){
  const ciInput = document.getElementById("checkin");
  const coInput = document.getElementById("checkout");
  if(!ciInput || !coInput) return;

  const today = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(today.getDate() + 1);

  const fmt = function(d){ return d.toISOString().split("T")[0]; };

  if(!ciInput.value) ciInput.value = fmt(today);

  if(!coInput.value){
    const ciDate = new Date(ciInput.value);
    const coDate = isNaN(ciDate.getTime()) ? tomorrow : new Date(ciDate);
    if(!isNaN(ciDate.getTime())) coDate.setDate(ciDate.getDate() + 1);
    coInput.value = fmt(coDate);
  }
}

document.getElementById("btnLoad").addEventListener("click", loadAvailability);

["checkin", "checkout"].forEach(function(id){
  document.getElementById(id).addEventListener("change", function(){
    validateStep1();
    loadAvailability();
  });
});

document.querySelectorAll('input[name="pay"]').forEach(function(r){
  r.addEventListener("change", calcTotals);
});

document.getElementById("toStep2").addEventListener("click", function(){
  if(!document.getElementById("toStep2").disabled) step(2);
});

document.getElementById("back1").addEventListener("click", function(){ step(1); });
document.getElementById("back2").addEventListener("click", function(){ step(2); });
document.getElementById("back3").addEventListener("click", function(){ step(3); });

document.getElementById("toStep3").addEventListener("click", function(){
  if(!val("g_name") || !val("g_email") || !val("g_phone") || (!val("g_cnic") && !val("g_passport"))){
    alert("Required: Name, Email, Phone and CNIC or Passport.");
    return;
  }

  if(val("g_pwd") || val("g_pwd2")){
    if(val("g_pwd") !== val("g_pwd2")){
      alert("Password confirmation does not match.");
      return;
    }
  }

  step(3);
});

document.getElementById("toStep4").addEventListener("click", function(){
  const pay = document.querySelector('input[name="pay"]:checked')?.value || "cash";
  const rev = document.getElementById("reviewBox");

  rev.innerHTML = `
    <div class="review-line"><span>Hotel</span><b>${TENANT_LABEL}</b></div>
    <div class="review-line"><span>Dates</span><b>${val("checkin")} → ${val("checkout")}</b></div>
    <div class="review-line"><span>Rooms</span><b>${totalSelectedRooms()}</b></div>
    <div class="review-line"><span>Payment</span><b>${pay}</b></div>
    <div class="review-line"><span>Grand Total</span><b>${totals.grand_total || "0.00"}</b></div>
  `;

  step(4);
});

document.getElementById("btnCreate").addEventListener("click", async function(){
  const done = document.getElementById("doneMsg");
  done.style.display = "block";
  done.innerText = "Creating booking...";

  const body = {
    tenant: TENANT,
    checkin: val("checkin"),
    checkout: val("checkout"),
    guest: {
      name: val("g_name"),
      email: val("g_email"),
      phone: val("g_phone"),
      cnic: val("g_cnic"),
      passport: val("g_passport"),
      password: val("g_pwd"),
      password_confirm: val("g_pwd2"),
      nationality: val("g_nationality"),
      profession: val("g_profession"),
      company_name: val("g_company"),
      car_no: val("g_car"),
      address: val("g_address"),
      remarks: val("g_remarks"),
      additional_remarks: val("g_remarks2"),
      no_of_adults: val("g_adults"),
      no_of_kids: val("g_kids")
    },
    pay_mode: document.querySelector('input[name="pay"]:checked')?.value || "cash",
    selections: selections()
  };

  const r = await fetch("{% url 'hotel:public:api_booking_create' %}", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": CSRF
    },
    body: JSON.stringify(body)
  });

  if(!r.ok){
    const txt = await r.text();
    done.style.background = "#fee2e2";
    done.style.color = "#991b1b";
    done.innerText = "Failed: " + txt;
    return;
  }

  const out = await r.json();

const createdTid = out.t_id || out.code;

  let confirmUrl = "";
  if (TENANT) {
    confirmUrl = CONFIRM_TENANT_URL
      .replace("999999", encodeURIComponent(createdTid))
      .replace("__TENANT__", encodeURIComponent(TENANT));
  } else {
    confirmUrl = CONFIRM_FALLBACK_URL.replace("999999", encodeURIComponent(createdTid));
  }

  window.location.href = confirmUrl;
});

setDefaultDatesIfEmpty();
loadAvailability();
</script>
{% endblock %}