{% extends "hotel/base_public.html" %}
{% block title %}Book Your Stay{% endblock %}

{% block head %}
<style>
  /* Scope everything inside .booking-page so other pages stay safe */
  .booking-page {
    margin-top: 10px;
  }

  .booking-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    background: radial-gradient(circle at top left, #facc15 0, #fbbf24 15%, #fef3c7 55%, #ffffff 100%);
    border: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    padding: 18px 18px 16px;
  }

  .booking-hero-main {
    flex: 1 1 260px;
  }

  .booking-hero-main h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
  }

  .booking-hero-main p {
    margin: 0;
    color: #4b5563;
    font-size: 0.92rem;
  }

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

  .booking-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    color: #111827;
    border: 1px solid rgba(255, 255, 255, 0.9);
  }

  .booking-hero-badge span {
    font-size: 0.8rem;
  }

  .booking-hero-tagline {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 8px;
  }

  /* Main grid */
  .booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 22px;
    margin-top: 16px;
  }

  /* Card tweaks inside booking page */
  .booking-page .card.booking-card {
    border-radius: 18px;
    padding: 16px 16px 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  }

  .booking-page .totalBox {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    background: linear-gradient(to bottom, #f9fafb, #ffffff);
  }

  .booking-page .totalBox h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
  }

  .booking-page .totalBox h3::before {
    content: "";
    font-family: "Font Awesome 6 Free", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    opacity: 0.8;
  }

  .booking-page .totalBox .muted {
    font-size: 0.85rem;
  }

  /* Stepper – scoped to booking card */
  .booking-card .stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px;
    border-radius: 999px;
    background: #f9fafb;
  }

  .booking-card .step {
    flex: 1 1 90px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-weight: 600;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
    justify-content: center;
  }

  .booking-card .step span.step-index {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: #e5e7eb;
  }

  .booking-card .step.active {
    background: #b8860b;
    color: #ffffff;
    border-color: #b8860b;
  }

  .booking-card .step.active span.step-index {
    background: rgba(255, 255, 255, 0.22);
  }

  /* Buttons & inputs inside booking page only */
  .booking-page .btn {
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.9rem;
  }

  .booking-page .btn.primary {
    background: linear-gradient(to right, #b8860b, #c9a227);
    border-color: #b8860b;
  }

  .booking-page .btn.primary:hover {
    filter: brightness(1.05);
  }

  .booking-page input,
  .booking-page select {
    border-radius: 12px;
    border-color: #d1d5db;
    font-size: 0.9rem;
  }

  .booking-page input:focus,
  .booking-page select:focus {
    outline: none;
    border-color: #b8860b;
    box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.25);
  }

  /* Category cards */
  .booking-page .room-card {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 10px;
    background: #ffffff;
  }

  .booking-page .room-card .thumb {
    height: 160px;
  }

  .booking-page .room-card h3 {
    margin: 4px 0 2px;
    font-size: 1rem;
  }

  .booking-page .room-card .muted {
    font-size: 0.83rem;
  }

  .booking-page .room-card .chip {
    font-size: 0.72rem;
    padding: 4px 9px;
  }

  .booking-page .qty {
    border-radius: 999px;
    font-weight: 600;
  }

  /* Step 1 hint */
  .booking-page .step-hint {
    font-size: 0.82rem;
  }

  .booking-page .step-hint.ok {
    color: #16a34a;
    font-weight: 500;
  }

  /* Review box */
  .booking-page #reviewBox .row {
    font-size: 0.9rem;
  }

  /* Mobile responsiveness */
  @media (max-width: 960px) {
    .booking-grid {
      grid-template-columns: 1fr;
    }

    .booking-page .totalBox {
      order: -1;
      position: static;
    }
  }

  @media (max-width: 640px) {
    .booking-hero {
      padding: 14px;
    }

    .booking-hero-main h1 {
      font-size: 1.3rem;
    }

    .booking-card .stepper {
      border-radius: 14px;
    }

    .booking-card .step {
      flex: 1 1 120px;
    }

    .booking-page .row {
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .booking-page .row.right {
      justify-content: flex-start;
    }
  }
</style>
{% endblock %}

{% block content %}

<div class="booking-page">

  <!-- Hidden app config for JS (tenant id + label) -->
  <div id="bookingApp"
       data-tenant="{{ tenant_id|default:'1' }}"
       data-tenant-label="{{ tenant_label|default:'Tenant' }}"></div>

  <!-- Hero header -->
  <section class="card booking-hero">
    <div class="booking-hero-main">
      <h1>Plan Your Stay</h1>
      <p>Choose your dates, pick your rooms, add your details and confirm — all in a few simple steps.</p>
      <div class="booking-hero-badges">
        <div class="booking-hero-badge">
          <span>✓</span><span>Instant pre-booking</span>
        </div>
        <div class="booking-hero-badge">
          <span>✓</span><span>Secure guest portal access</span>
        </div>
        <div class="booking-hero-badge">
          <span>✓</span><span>Flexible payment options</span>
        </div>
      </div>
      <div class="booking-hero-tagline">
        Dates will auto-select for you (today → tomorrow). You can always adjust before confirming.
      </div>
    </div>
  </section>

  <div class="booking-grid">
    <!-- Left: multi-step form -->
    <section class="card booking-card">
      <div class="stepper">
        <div class="step" id="s1">
          <span class="step-index">1</span>
          <span>Choose Rooms</span>
        </div>
        <div class="step" id="s2">
          <span class="step-index">2</span>
          <span>Your Details</span>
        </div>
        <div class="step" id="s3">
          <span class="step-index">3</span>
          <span>Payment</span>
        </div>
        <div class="step" id="s4">
          <span class="step-index">4</span>
          <span>Review</span>
        </div>
      </div>

      <!-- Step 1 -->
      <div id="step1">
        <div class="row" style="row-gap:10px">
          <div class="field" style="max-width:200px">
            <label>Check-in</label>
            <input type="date" id="checkin" value="{{ default_checkin|default:'' }}">
          </div>
          <div class="field" style="max-width:200px">
            <label>Check-out</label>
            <input type="date" id="checkout" value="{{ default_checkout|default:'' }}">
          </div>
          <div class="row right" style="flex:1">
            <button class="btn" id="btnLoad">Check Availability</button>
          </div>
        </div>
        <div id="categoryList" class="list" style="margin-top:12px;"></div>
        <div class="row" style="margin-top:8px; justify-content:space-between">
          <span class="muted step-hint" id="step1Warning">
            Pick dates and at least one room to continue.
          </span>
          <div><button class="btn primary" id="toStep2" disabled>Continue</button></div>
        </div>
      </div>

      <!-- Step 2 -->
      <div id="step2" style="display:none">
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Full name *</label><input id="g_name" required></div>
          <div class="field" style="flex:1"><label>Email *</label><input id="g_email" type="email" required></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Phone *</label><input id="g_phone" required></div>
          <div class="field" style="flex:1"><label>Nationality</label><input id="g_nationality"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>CNIC</label><input id="g_cnic"></div>
          <div class="field" style="flex:1"><label>Passport</label><input id="g_passport"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Create Password</label><input id="g_pwd" type="password"></div>
          <div class="field" style="flex:1"><label>Confirm Password</label><input id="g_pwd2" type="password"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Profession</label><input id="g_profession"></div>
          <div class="field" style="flex:1"><label>Company</label><input id="g_company"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Car No</label><input id="g_car"></div>
          <div class="field" style="flex:1"><label>Address</label><input id="g_address"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="flex:1"><label>Remarks</label><input id="g_remarks"></div>
          <div class="field" style="flex:1"><label>Additional Remarks</label><input id="g_remarks2"></div>
        </div>
        <div class="row" style="gap:20px">
          <div class="field" style="max-width:160px"><label>Adults</label><input id="g_adults" type="number" min="1" value="1"></div>
          <div class="field" style="max-width:160px"><label>Kids</label><input id="g_kids" type="number" min="0" value="0"></div>
        </div>
        <div class="row" style="margin-top:8px; justify-content:space-between">
          <button class="btn" id="back1">← Back</button>
          <button class="btn primary" id="toStep3">Continue</button>
        </div>
      </div>

      <!-- Step 3 -->
      <div id="step3" style="display:none">
        <div class="row" style="gap:10px; flex-wrap:wrap">
          <label class="chip"><input type="radio" name="pay" value="card"> Card</label>
          <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>
        </div>
        <div class="muted" style="margin-top:6px">Card is placeholder for now; bank integration will be added later.</div>
        <div class="row" style="margin-top:8px; justify-content:space-between">
          <button class="btn" id="back2">← Back</button>
          <button class="btn primary" id="toStep4">Continue</button>
        </div>
      </div>

      <!-- Step 4 -->
      <div id="step4" style="display:none">
        <div id="reviewBox" class="card" style="background:#f9fafb;border-style:dashed;border-radius:12px"></div>
        <div class="row" style="margin-top:8px; justify-content:space-between">
          <button class="btn" id="back3">← Back</button>
          <button class="btn primary" id="btnCreate">Create Booking</button>
        </div>
        <div id="doneMsg" class="muted" style="display:none;margin-top:8px">Creating booking…</div>
      </div>
    </section>

    <!-- Right: totals box -->
    <aside class="card sticky totalBox">
      <h3>Total</h3>
      <div class="muted" style="font-size:0.8rem;margin-bottom:6px">
        Based on your dates, selection and tax for the chosen payment mode.
      </div>
      <div class="row"><div class="muted">Nights</div><div style="margin-left:auto" id="t_nights">0</div></div>
      <div class="row"><div class="muted">Subtotal</div><div style="margin-left:auto" id="t_subtotal">0.00</div></div>
      <div class="row"><div class="muted">Tax (<span id="t_taxp">0</span>%)</div><div style="margin-left:auto" id="t_tax">0.00</div></div>
      <hr>
      <div class="row" style="font-weight:800"><div>Grand</div><div style="margin-left:auto" id="t_grand">0.00</div></div>
    </aside>
  </div>
</div>

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

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 = {}; // {catId: qty}
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(i=>{
    document.getElementById('step'+i).style.display = (i===n?'block':'none');
    document.getElementById('s'+i).classList.toggle('active', i===n);
  });
}
function val(id){ return document.getElementById(id).value.trim(); }
function selections(){ return Object.entries(sel).map(([k,v])=>({category_id: parseInt(k), qty: v})); }
function refreshTotalsDisplay(){
  document.getElementById('t_nights').innerText = totals.nights;
  document.getElementById('t_subtotal').innerText = totals.subtotal;
  document.getElementById('t_taxp').innerText = totals.tax_percent;
  document.getElementById('t_tax').innerText = totals.tax_amount;
  document.getElementById('t_grand').innerText = totals.grand_total;
}
function totalSelectedRooms(){ return selections().reduce((a,b)=>a+b.qty,0); }

function validateStep1(){
  const ok = totalSelectedRooms() > 0 && !!val('checkin') && !!val('checkout');
  const btn = document.getElementById('toStep2');
  if (btn) btn.disabled = !ok;

  const hint = document.getElementById('step1Warning');
  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');
    }
  }
}

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:api_public_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 = 'card room-card';
  const img = c.photo
    ? `<img src="${c.photo}" class="thumb" alt="">`
    : `<div class="thumb" style="display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#6b7280">No Image</div>`;
  const qty = sel[c.category_id] || 0;
  div.innerHTML = `
    <div class="row" style="gap:12px">
      <div style="flex:1 1 55%">${img}</div>
      <div style="flex:1 1 45%">
        <h3 style="margin:6px 0 4px">${c.name}</h3>
        <div class="muted" style="min-height:44px">${c.description || ""}</div>
        <div style="margin:6px 0">
          <span class="chip">Available: ${c.available}</span>
          <span class="chip">Rate: ${c.rate}</span>
        </div>
        <div class="row">
          <button class="btn" data-action="minus">−</button>
          <input value="${qty}" data-id="${c.category_id}" class="qty" style="width:64px;text-align:center">
          <button class="btn" data-action="plus">+</button>
          <div style="margin-left:auto" class="muted">max 3</div>
        </div>
      </div>
    </div>`;
  div.querySelectorAll('button').forEach(b=>{
    b.addEventListener('click', ()=>{
      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); }
      if(action==='minus'){ sel[id] = Math.max((cur-1), 0); }
      div.querySelector('.qty').value = sel[id] || 0;
      validateStep1();
      calcTotals();
    });
  });
  div.querySelector('.qty').addEventListener('change', (e)=>{
    let v = parseInt(e.target.value||'0', 10);
    if(isNaN(v)) v=0;
    v = Math.max(0, Math.min(3, v));
    sel[c.category_id]=v;
    e.target.value=v;
    validateStep1();
    calcTotals();
  });
  return div;
}

async function loadAvailability(){
  const ci = val('checkin'), co = val('checkout');
  if(!ci || !co){ return; }

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

  try {
    const r = await fetch(`{% url 'hotel:api_public_availability' %}?checkin=${ci}&checkout=${co}&t=${TENANT}`);
    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="muted">No rooms available for selected dates.</div>';
    } else {
      out.results.forEach(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 = d => d.toISOString().split('T')[0];

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

  if (!coInput.value) {
    // ensure checkout is at least +1 day from checkin
    const ciDate = new Date(ciInput.value);
    if (isNaN(ciDate.getTime())) {
      coInput.value = fmt(tomorrow);
    } else {
      const coDate = new Date(ciDate);
      coDate.setDate(ciDate.getDate() + 1);
      coInput.value = fmt(coDate);
    }
  }
}

/* --- Event bindings --- */

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

['checkin','checkout'].forEach(id=>{
  document.getElementById(id).addEventListener('change', ()=>{
    validateStep1();
    loadAvailability(); // re-load on date change
  });
});

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

document.getElementById('toStep2').addEventListener('click', ()=>{
  if(!document.getElementById('toStep2').disabled) step(2);
});
document.getElementById('back1').addEventListener('click', ()=> step(1));
document.getElementById('toStep3').addEventListener('click', ()=>{
  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;
  }
  step(3);
});
document.getElementById('back2').addEventListener('click', ()=> step(2));
document.getElementById('toStep4').addEventListener('click', ()=>{
  const rev = document.getElementById('reviewBox');
  const pay = document.querySelector('input[name="pay"]:checked')?.value || 'cash';
  rev.innerHTML = `
    <div class="row"><div>Tenant</div><div style="margin-left:auto">${TENANT_LABEL} (${TENANT})</div></div>
    <div class="row"><div>Dates</div><div style="margin-left:auto">${val('checkin')} → ${val('checkout')}</div></div>
    <div class="row"><div>Rooms</div><div style="margin-left:auto">${selections().reduce((a,b)=>a+b.qty,0)}</div></div>
    <div class="row"><div>Pay mode</div><div style="margin-left:auto">${pay}</div></div>
  `;
  step(4);
});
document.getElementById('back3').addEventListener('click', ()=> step(3));

document.getElementById('btnCreate').addEventListener('click', async ()=>{
  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:api_public_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.innerText='Failed: ' + txt;
    return;
  }
  const out = await r.json();
  window.location.href = "{% url 'hotel:public_booking_confirmation' code='__X__' %}".replace('__X__', out.code);
});

/* --- On initial load: set defaults and auto-load availability --- */
setDefaultDatesIfEmpty();
loadAvailability();
</script>
{% endblock %}