{% extends "pos/base.html" %}
{% load static %}
{% block title %}{% if mode == "edit" %}Edit Pre-Booking{% else %}New Pre-Booking{% endif %}{% endblock %}
{% block heading %}{% if mode == "edit" %}Edit Staff Pre-Booking{% else %}New Staff Pre-Booking (Unpaid Voucher){% endif %}{% endblock %}
{% block stylesheets %}
<style>
  .table-sm td input { width: 100%; }
  .totals-card .v { font-weight: 600; }
</style>
{% endblock %}
{% if error %}
<div class="alert alert-warning py-2 small">{{ error }}</div>
{% endif %}

{% block content %}
<form method="post" id="prebook-form">
  {% csrf_token %}
  {% if mode == "edit" %}
    <input type="hidden" name="booking_id" value="{{ b.id }}">
  {% endif %}

  <div class="card mb-3">
    <div class="card-header">Stay</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-3">
          <label>Check-in</label>
          {{ form.checkin_date }}
        </div>
        <div class="col-md-3">
          <label>Check-out</label>
          {{ form.checkout_date }}
        </div>
        <div class="col-md-3">
          <label>Advance %</label>
          {{ form.advance_percent }}
        </div>
        <div class="col-md-3">
          <label>Payment Mode (for tax)</label>
          {{ form.pay_mode }}
        </div>
      </div>
    </div>
    <button type="button" id="btnViewAvail" class="btn btn-sm btn-outline-info mt-2">
      View availability
    </button>
  </div>

  <div class="card mb-3">
    <div class="card-header">Guest</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-4"><label>Name</label>{{ form.name }}</div>
        <div class="col-md-4"><label>Contact</label>{{ form.contact }}</div>
        <div class="col-md-4"><label>Company</label>{{ form.company_name }}</div>
      </div>
      <div class="form-row mt-2">
        <div class="col-md-4"><label>CNIC</label>{{ form.cnic }}</div>
        <div class="col-md-4"><label>Passport</label>{{ form.passport }}</div>
        <div class="col-md-4"><label>Nationality</label>{{ form.nationality }}</div>
      </div>
      <div class="form-row mt-2">
        <div class="col-md-4"><label>Profession</label>{{ form.profession }}</div>
        <div class="col-md-4"><label>Car #</label>{{ form.car_no }}</div>
        <div class="col-md-4"><label>Address</label>{{ form.address }}</div>
      </div>
      <div class="form-row mt-2">
        <div class="col-md-4"><label>Adults</label>{{ form.no_of_adults }}</div>
        <div class="col-md-4"><label>Kids</label>{{ form.no_of_kids }}</div>
        <div class="col-md-4 d-none">
          <label>Discount Note</label>{{ form.discount_note }}
        </div>
      </div>

      <div class="form-row mt-2">
        <div class="col-md-6"><label>Description</label>{{ form.description }}</div>
        <div class="col-md-6"><label>Remarks</label>{{ form.remarks }}</div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">Categories</div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th style="width:40%">Category</th>
              <th style="width:15%">Qty</th>
              <th style="width:20%">Rate/Night</th>
              <th style="width:20%" class="d-none">Discount/Night</th>
              <th style="width:5%"></th>
            </tr>
          </thead>

          <tbody id="rows">
            {% if items %}
              {% for i in items %}
                <tr>
                  <td>
                    <select class="form-control" name="cat[]">
                      {% for c in cats %}
                        <option value="{{ c.pk }}" data-rate="{{ c.base_rate|default_if_none:'0' }}"
                          {% if i.category_id == c.pk %}selected{% endif %}>
                          {{ c.name }}
                        </option>
                      {% endfor %}
                    </select>
                  </td>
                  <td><input type="number" min="1" value="{{ i.qty }}" name="qty[]" class="form-control"></td>
                  <td>
                    <input type="number" step="0.01"
                           value="{{ i.rate_per_night|floatformat:'2' }}"
                           name="rate[]" class="form-control rate-input">
                  </td>
                  <td class="d-none">
                    <input type="number" step="0.01"
                           value="{{ i.discount_per_night|floatformat:'2' }}"
                           name="disc[]" class="form-control" readonly>
                  </td>

                  <td><button class="btn btn-sm btn-danger remove-row" type="button">&times;</button></td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td>
                  <select class="form-control" name="cat[]">
                    {% for c in cats %}
                      <option value="{{ c.pk }}" data-rate="{{ c.base_rate|default_if_none:'0' }}">{{ c.name }}</option>
                    {% endfor %}
                  </select>
                </td>
                <td><input type="number" min="1" value="1" name="qty[]" class="form-control"></td>
                <td>
                  <input type="number" step="0.01" value="0"
                         name="rate[]" class="form-control rate-input">
                </td>
                <td class="d-none">
                  <input type="number" step="0.01" value="0"
                         name="disc[]" class="form-control" readonly>
                </td>

                <td><button class="btn btn-sm btn-danger remove-row" type="button">&times;</button></td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
      <button class="btn btn-outline-primary" id="add-row" type="button"><i class="fas fa-plus mr-1"></i>Add Row</button>
    </div>
  </div>

  <!-- ===== Totals (live) ===== -->
  <div class="card mb-3 totals-card">
    <div class="card-header">Totals</div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-3">Nights: <span class="v" id="v_nights">0</span></div>
        <div class="col-md-3">Per-Night Sum: <span class="v" id="v_pernight">0.00</span></div>
        <div class="col-md-3">Subtotal (all nights): <span class="v" id="v_subtotal">0.00</span></div>
        <div class="col-md-3">Tax %: <span class="v" id="v_taxp">0</span></div>
      </div>
      <div class="row mt-2">
        <div class="col-md-3">Tax: <span class="v" id="v_tax">0.00</span></div>
        <div class="col-md-3"><b>Total: <span class="v" id="v_total">0.00</span></b></div>
        <div class="col-md-3">Advance %: <span class="v" id="v_advp">0</span></div>
        <div class="col-md-3">Advance Required: <span class="v" id="v_adv">0.00</span></div>
      </div>
      <div class="text-muted small mt-2" id="v_hint" style="display:none;">
        Hint: Select check-in & check-out to multiply Per-Night Sum by Nights.
      </div>
    </div>
  </div>

  {% if mode == "edit" %}
    <button class="btn btn-warning"><i class="fas fa-save mr-1"></i>Save Changes</button>
    <a href="{% url 'hotel:staff_prebook_detail' b.id %}" class="btn btn-secondary">Cancel</a>
  {% else %}
    <button class="btn btn-success"><i class="fas fa-save mr-1"></i>Save (Unpaid Voucher)</button>
    <a href="{% url 'hotel:staff_prebook_list' %}" class="btn btn-secondary">Cancel</a>
  {% endif %}
</form>


<!-- Availability Modal -->
<div class="modal fade" id="availabilityModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Availability (by Category)</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
      </div>
      <div class="modal-body" id="avail_body">
        <div class="text-muted small">Select check-in & check-out, then click “View availability”.</div>
      </div>
    </div>
  </div>
</div>




{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
  const MODE = "{{ mode|default:'add' }}";
  const form = document.getElementById('prebook-form');
  const rows = document.getElementById('rows');

  const TAX_CASH = parseFloat('{{ tax_cash|default:"0" }}');
  const TAX_DIGITAL = parseFloat('{{ tax_digital|default:"0" }}');

  // Default dates (ADD mode only)
  const todayStr = "{{ today|date:'Y-m-d' }}";
  const tomorrowStr = "{{ tomorrow|date:'Y-m-d' }}";

  const ciInput = form ? form.querySelector('[name="checkin_date"]') : null;
  const coInput = form ? form.querySelector('[name="checkout_date"]') : null;

  if (MODE === 'add') {
    if (ciInput && !ciInput.value) ciInput.value = todayStr;
    if (coInput && !coInput.value) coInput.value = tomorrowStr;
  }

  // Discount note: keep in backend, but lock for user
  const discountNoteInput = form ? form.querySelector('[name="discount_note"]') : null;
  if (discountNoteInput) {
    discountNoteInput.readOnly = true;
  }


  // Flexible date parser: supports YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY
  function parseDateFlex(val){
    if(!val) return null;
    const s = val.trim();

    // YYYY-MM-DD
    const m1 = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
    if (m1) return new Date(parseInt(m1[1],10), parseInt(m1[2],10)-1, parseInt(m1[3],10));

    // DD/MM/YYYY
    const m2 = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s);
    if (m2) return new Date(parseInt(m2[3],10), parseInt(m2[2],10)-1, parseInt(m2[1],10));

    // MM/DD/YYYY
    const m3 = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s);
    if (m3) return new Date(parseInt(m3[3],10), parseInt(m3[1],10)-1, parseInt(m3[2],10));

    // Fallback
    const d = new Date(s);
    return isNaN(d.getTime()) ? null : d;
  }

  function diffDays(d1, d2){
    if(!d1 || !d2) return 0;
    const ms = d2.getTime() - d1.getTime();
    const days = Math.round(ms / (1000*60*60*24));
    return Math.max(days, 0);
  }

  function taxPercentFromMode(){
    const el = form.querySelector('[name="pay_mode"]');
    const v = (el && (el.value || el.options?.[el.selectedIndex]?.value) || '').toString().trim().toLowerCase();
    if (v === 'cash') return isNaN(TAX_CASH) ? 0 : TAX_CASH;
    // Treat card/transfer/wallet/digital as "digital"
    return isNaN(TAX_DIGITAL) ? 0 : TAX_DIGITAL;
  }


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

  function recalc(){
    const ciEl = form.querySelector('[name="checkin_date"]');
    const coEl = form.querySelector('[name="checkout_date"]');
    const apEl = form.querySelector('[name="advance_percent"]');

    const ci = parseDateFlex(ciEl && ciEl.value);
    const co = parseDateFlex(coEl && coEl.value);
    const nights = diffDays(ci, co);

    // Per-night sum (independent of dates)
    let perNightSum = 0.0;
    document.querySelectorAll('#rows tr').forEach(tr => {
      const q = parseFloat(tr.querySelector('input[name="qty[]"]')?.value || '0');
      const r = parseFloat(tr.querySelector('input[name="rate[]"]')?.value || '0');
      const d = parseFloat(tr.querySelector('input[name="disc[]"]')?.value || '0');
      const per = Math.max(r - d, 0);
      perNightSum += q * per;
    });

    // If nights > 0, multiply; else show hint
    let subtotal = 0.0;
    if (nights > 0) {
      subtotal = perNightSum * nights;
      document.getElementById('v_hint').style.display = 'none';
    } else {
      document.getElementById('v_hint').style.display = 'block';
    }

    const tp = taxPercentFromMode();
    const tax = +(Math.round((subtotal * tp / 100) * 100) / 100);
    const total = +(Math.round(((subtotal + tax)) * 100) / 100);
    const advp = parseFloat(apEl && apEl.value || '0');
    const adv = +(Math.round(((total * advp / 100)) * 100) / 100);

    document.getElementById('v_nights').textContent = nights;
    document.getElementById('v_pernight').textContent = fmt2(perNightSum);
    document.getElementById('v_subtotal').textContent = fmt2(subtotal);
    document.getElementById('v_taxp').textContent = tp;
    document.getElementById('v_tax').textContent = fmt2(tax);
    document.getElementById('v_total').textContent = fmt2(total);
    document.getElementById('v_advp').textContent = isNaN(advp) ? 0 : advp;
    document.getElementById('v_adv').textContent = fmt2(adv);
  }

  function wireRow(tr) {
    const sel = tr.querySelector('select[name="cat[]"]');
    const rate = tr.querySelector('input[name="rate[]"]');
    const removeBtn = tr.querySelector('.remove-row');

    if (sel && rate) {
      if (MODE === 'add') {
        const v = parseFloat(rate.value || '0');
        if (!v) {
          rate.value = parseFloat(sel.selectedOptions[0].dataset.rate || '0');
        }
      }
      sel.addEventListener('change', () => {
        rate.value = parseFloat(sel.selectedOptions[0].dataset.rate || '0');
        recalc();
      });
    }
    ['input','change'].forEach(evt => {
      tr.querySelectorAll('input').forEach(i => i.addEventListener(evt, recalc));
    });

    if (removeBtn) {
      removeBtn.addEventListener('click', () => {
        if (document.querySelectorAll('#rows tr').length > 1) tr.remove();
        recalc();
      });
    }
  }

  // Wire existing rows
  document.querySelectorAll('#rows tr').forEach(tr => wireRow(tr));

  // Add-row handler
  document.getElementById('add-row').addEventListener('click', () => {
    const tr = document.querySelector('#rows tr').cloneNode(true);
    tr.querySelectorAll('input').forEach(i => {
      if (i.name==='qty[]') i.value = 1;
      else i.value = 0;
    });
    const sel = tr.querySelector('select[name="cat[]"]');
    if (sel) sel.selectedIndex = 0;
    rows.appendChild(tr);
    wireRow(tr);
    recalc();
  });

  // Stay / PayMode / Advance listeners
  ['checkin_date','checkout_date','advance_percent','pay_mode'].forEach(name => {
    const el = form.querySelector(`[name="${name}"]`);
    if (el) {
      ['change','input'].forEach(evt => el.addEventListener(evt, recalc));
    }
  });

  // Initial calc
  recalc();


// --- Availability modal fetch (INSIDE DOMContentLoaded so helpers are in scope) ---
const AVAIL_URL = "{% url 'hotel:prebook_availability_summary' %}";
const btnAvail = document.getElementById('btnViewAvail');
if (btnAvail) {
  btnAvail.addEventListener('click', async () => {
    const ciEl = form.querySelector('[name="checkin_date"]');
    const coEl = form.querySelector('[name="checkout_date"]');
    const ciVal = ciEl && ciEl.value;
    const coVal = coEl && coEl.value;

    if (!ciVal || !coVal) { alert('Please select check-in and check-out first.'); return; }

    const ci = parseDateFlex(ciVal);
    const co = parseDateFlex(coVal);
    const nights = diffDays(ci, co);
    if (!ci || !co || nights <= 0) {
      alert('Checkout must be after check-in (at least 1 night).');
      return;
    }

    try {
      const url = AVAIL_URL + `?from=${encodeURIComponent(ciVal)}&to=${encodeURIComponent(coVal)}`;
      const resp = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
      const html = await resp.text();
      document.getElementById('avail_body').innerHTML = html;
      $('#availabilityModal').modal('show');
    } catch (e) {
      document.getElementById('avail_body').innerHTML = '<div class="text-danger small">Failed to load availability.</div>';
      $('#availabilityModal').modal('show');
    }
  });
  }


  // Global keyboard handling:
  //  - Enter: next field (no form submit)
  //  - Enter on checkout_date: also trigger View Availability
  //  - Ctrl+S: submit form
  document.addEventListener('keydown', function (e) {
    if (!form) return;

    // Ctrl+S → submit
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      form.submit();
      return;
    }

    // Plain Enter handling
    if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
      const target = e.target;
      const tag = target.tagName;

      // Sirf form ke input/select/textarea par apply karein
      if (!form.contains(target)) return;
      if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(tag) === -1) return;

      // Default submit/behaviour rok do
      e.preventDefault();

      // Enter on checkout_date → View Availability
      if (target.name === 'checkout_date' && btnAvail) {
        btnAvail.click();
      }

      // Next focus calculation
      const focusables = Array.from(
        form.querySelectorAll('input, select, textarea')
      ).filter(el => !el.disabled && el.type !== 'hidden' && el.offsetParent !== null);

      const idx = focusables.indexOf(target);
      if (idx !== -1) {
        const next = focusables[idx + 1] || focusables[0];
        if (next) next.focus();
      }
    }
  });





});





</script>
{% endblock %}