{% 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.prebook_ref  }}">
  {% 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 class="form-row mt-3">
  <div class="col-md-4">
    <label class="d-block">Tax Type</label>

    <div
      class="btn-group btn-group-toggle"
      data-toggle="buttons"
    >
      <label
        class="btn btn-outline-primary
        {% if form.tax_type.value != 'inc' %}active{% endif %}"
      >
        <input
          type="radio"
          name="{{ form.tax_type.html_name }}"
          value="exc"
          autocomplete="off"
          {% if form.tax_type.value != 'inc' %}checked{% endif %}
        >
        Exclusive
      </label>

      <label
        class="btn btn-outline-primary
        {% if form.tax_type.value == 'inc' %}active{% endif %}"
      >
        <input
          type="radio"
          name="{{ form.tax_type.html_name }}"
          value="inc"
          autocomplete="off"
          {% if form.tax_type.value == 'inc' %}checked{% endif %}
        >
        Inclusive
      </label>
    </div>

    {% if form.tax_type.errors %}
      <div class="text-danger small mt-1">
        {{ form.tax_type.errors }}
      </div>
    {% endif %}
  </div>
</div>
  </div>

  <div class="card mb-3">
    <div class="card-header">Guest</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-3">
          <label>Name</label>
          {{ form.name }}
        </div>

        <div class="col-md-3">
          <label>Contact <span class="text-danger">*</span></label>
          {{ form.contact }}
        </div>

        <div class="col-md-3">
          <label>Email</label>
          {{ form.email }}
          <small class="text-muted d-block">
            Empty ho to system shop website domain se auto email banayega.
          </small>
        </div>

        <div class="col-md-3">
          <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">
          Entered Per-Night:
          <span class="v" id="v_pernight">0.00</span>
        </div>

        <div class="col-md-3">
          Entered Room Total:
          <span class="v" id="v_room_total">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">
          Booking Subtotal:
          <span class="v" id="v_subtotal">0.00</span>
        </div>

        <div class="col-md-3">
          Discount (Pre-Tax):
          <span class="v" id="v_discount">0.00</span>
        </div>

        <div class="col-md-3">
          <span id="v_tax_label">Tax Added</span>:
          <span class="v" id="v_tax">0.00</span>
        </div>

        <div class="col-md-3">
          <b>
            Grand Total:
            <span class="v" id="v_total">0.00</span>
          </b>
        </div>
      </div>

      <div class="row mt-2">
        <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 and check-out to calculate stay totals.
      </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:prebook:prebook_detail' b.prebook_ref  %}" 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:prebook: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');

  // new for phone validtion
  const contactInput = form ? form.querySelector('[name="contact"]') : null;

  let contactError = null;

  if (contactInput) {
    contactInput.required = true;
    contactInput.setAttribute('autocomplete', 'tel');
    contactInput.setAttribute('placeholder', 'Phone number required');

    contactError = document.createElement('div');
    contactError.className = 'text-danger small mt-1';
    contactError.style.display = 'none';
    contactError.textContent = 'Phone number is required.';
    contactInput.parentNode.appendChild(contactError);
  }

  function validateContactPhone() {
    if (!contactInput) return true;

    const phone = (contactInput.value || '').trim();

    if (!phone) {
      contactInput.classList.add('is-invalid');

      if (contactError) {
        contactError.style.display = 'block';
      }

      alert('Please enter guest phone number.');
      contactInput.focus();
      return false;
    }

    contactInput.classList.remove('is-invalid');

    if (contactError) {
      contactError.style.display = 'none';
    }

    return true;
  }

  if (form) {
    form.addEventListener('submit', function (e) {
      if (!validateContactPhone()) {
        e.preventDefault();
        return false;
      }
    });
  }

  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 safeNumber(value) {
    const number = parseFloat(value);

    if (!Number.isFinite(number)) {
      return 0;
    }

    return number;
  }

  function round2(value) {
    value = safeNumber(value);

    return Math.round(
      (value + Number.EPSILON) * 100
    ) / 100;
  }

  function fmt2(value) {
    return round2(value).toFixed(2);
  }

  function taxTypeFromForm() {
    const checked = form.querySelector(
      '[name="tax_type"]:checked'
    );

    if (!checked) {
      return 'exc';
    }

    return checked.value === 'inc'
      ? 'inc'
      : 'exc';
  }
  function recalc() {
    const ciEl = form.querySelector(
      '[name="checkin_date"]'
    );

    const coEl = form.querySelector(
      '[name="checkout_date"]'
    );

    const advanceEl = form.querySelector(
      '[name="advance_percent"]'
    );

    const checkinDate = parseDateFlex(
      ciEl ? ciEl.value : ''
    );

    const checkoutDate = parseDateFlex(
      coEl ? coEl.value : ''
    );

    const nights = diffDays(
      checkinDate,
      checkoutDate
    );

    /*
     * These are user-entered amounts.
     *
     * enteredPerNight:
     * Sum(rate × qty)
     *
     * enteredDiscountPerNight:
     * Sum(discount × qty)
     */
    let enteredPerNight = 0;
    let enteredDiscountPerNight = 0;

    document
      .querySelectorAll('#rows tr')
      .forEach(function (tr) {
        let qty = safeNumber(
          tr.querySelector(
            'input[name="qty[]"]'
          )
            ? tr.querySelector(
                'input[name="qty[]"]'
              ).value
            : 0
        );

        let rate = safeNumber(
          tr.querySelector(
            'input[name="rate[]"]'
          )
            ? tr.querySelector(
                'input[name="rate[]"]'
              ).value
            : 0
        );

        let discount = safeNumber(
          tr.querySelector(
            'input[name="disc[]"]'
          )
            ? tr.querySelector(
                'input[name="disc[]"]'
              ).value
            : 0
        );

        if (qty < 0) {
          qty = 0;
        }

        if (rate < 0) {
          rate = 0;
        }

        if (discount < 0) {
          discount = 0;
        }

        // Backend ke rule ke mutabiq
        if (discount > rate) {
          discount = rate;
        }

        enteredPerNight += qty * rate;
        enteredDiscountPerNight += (
          qty * discount
        );
      });

    enteredPerNight = round2(
      enteredPerNight
    );

    enteredDiscountPerNight = round2(
      enteredDiscountPerNight
    );

    let enteredRoomTotal = 0;
    let enteredDiscountTotal = 0;

    if (nights > 0) {
      enteredRoomTotal = round2(
        enteredPerNight * nights
      );

      enteredDiscountTotal = round2(
        enteredDiscountPerNight * nights
      );

      document
        .getElementById('v_hint')
        .style.display = 'none';
    } else {
      document
        .getElementById('v_hint')
        .style.display = 'block';
    }

    const amountAfterDiscount = round2(
      Math.max(
        enteredRoomTotal - enteredDiscountTotal,
        0
      )
    );

    const taxPercent = round2(
      taxPercentFromMode()
    );

    const taxRate = (
      taxPercent / 100
    );

    const taxType = taxTypeFromForm();

    let bookingSubtotal = 0;
    let taxableAfterDiscount = 0;
    let discountBeforeTax = 0;
    let taxAmount = 0;
    let grandTotal = 0;

    if (taxType === 'exc') {
      /*
       * EXCLUSIVE
       *
       * Entered room amount tax ke baghair hai.
       */
      bookingSubtotal = round2(
        enteredRoomTotal
      );

      taxableAfterDiscount = round2(
        amountAfterDiscount
      );

      discountBeforeTax = round2(
        bookingSubtotal -
        taxableAfterDiscount
      );

      taxAmount = round2(
        taxableAfterDiscount * taxRate
      );

      grandTotal = round2(
        taxableAfterDiscount + taxAmount
      );

      document.getElementById(
        'v_tax_label'
      ).textContent = 'Tax Added';

    } else {
      /*
       * INCLUSIVE
       *
       * Entered room amount mein tax included hai.
       */
      grandTotal = round2(
        amountAfterDiscount
      );

      if (taxRate > 0) {
        const taxDivider = (
          1 + taxRate
        );

        bookingSubtotal = round2(
          enteredRoomTotal / taxDivider
        );

        taxableAfterDiscount = round2(
          amountAfterDiscount / taxDivider
        );

        discountBeforeTax = round2(
          bookingSubtotal -
          taxableAfterDiscount
        );

        taxAmount = round2(
          grandTotal -
          taxableAfterDiscount
        );

      } else {
        bookingSubtotal = round2(
          enteredRoomTotal
        );

        taxableAfterDiscount = round2(
          amountAfterDiscount
        );

        discountBeforeTax = round2(
          bookingSubtotal -
          taxableAfterDiscount
        );

        taxAmount = 0;
      }

      document.getElementById(
        'v_tax_label'
      ).textContent = 'Included Tax';
    }

    let advancePercent = safeNumber(
      advanceEl
        ? advanceEl.value
        : 0
    );

    if (advancePercent < 0) {
      advancePercent = 0;
    }

    const advanceRequired = round2(
      grandTotal *
      advancePercent /
      100
    );

    document.getElementById(
      'v_nights'
    ).textContent = nights;

    document.getElementById(
      'v_pernight'
    ).textContent = fmt2(
      enteredPerNight
    );

    document.getElementById(
      'v_room_total'
    ).textContent = fmt2(
      enteredRoomTotal
    );

    document.getElementById(
      'v_subtotal'
    ).textContent = fmt2(
      bookingSubtotal
    );

    document.getElementById(
      'v_discount'
    ).textContent = fmt2(
      discountBeforeTax
    );

    document.getElementById(
      'v_taxp'
    ).textContent = fmt2(
      taxPercent
    );

    document.getElementById(
      'v_tax'
    ).textContent = fmt2(
      taxAmount
    );

    document.getElementById(
      'v_total'
    ).textContent = fmt2(
      grandTotal
    );

    document.getElementById(
      'v_advp'
    ).textContent = fmt2(
      advancePercent
    );

    document.getElementById(
      'v_adv'
    ).textContent = fmt2(
      advanceRequired
    );
  }

  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));
    }
  });

  form
    .querySelectorAll(
      '[name="tax_type"]'
    )
    .forEach(function (radio) {
      radio.addEventListener(
        'change',
        recalc
      );
    });

  // Initial calc
  recalc();


// --- Availability modal fetch (INSIDE DOMContentLoaded so helpers are in scope) ---
const AVAIL_URL = "{% url 'hotel:prebook: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;
    // }

    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();

      if (typeof form.requestSubmit === 'function') {
        form.requestSubmit();
      } else {
        if (validateContactPhone()) {
          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 %}