{% extends "pos/base.html" %}
{% block title %}Pre-booking Check-in{% endblock %}
{% block heading %}Pre-booking Check-in — B#{{ booking.booking_code }}{% endblock %}
{% block content %}
<form method="post">
  {% csrf_token %}
  <div class="card mb-3">
    <div class="card-header">Assign Rooms</div>
    <div class="card-body">
      {% for itm in booking.items.all %}
      <div class="border rounded p-2 mb-2">
        <div class="small font-weight-bold">{{ itm.category.name }} &times; {{ itm.qty }}</div>
        <div id="rooms_{{ itm.id }}" class="small">
          <!-- rendered by JS -->
        </div>
        <input type="hidden" name="room_ids_for_item_{{ itm.id }}" id="hid_{{ itm.id }}">
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">C/I Advance (optional)</div>
    <div class="card-body">
      <div class="row">
        {% for idx in "123" %}
        <div class="col-md-4">
          <div class="border rounded p-2 mb-2">
            <div class="small font-weight-bold mb-1">Payment #{{ forloop.counter }}</div>
            <label class="small">Amount</label>
            <input name="adv_amount_{{ forloop.counter }}" type="number" step="0.01" class="form-control">
            <label class="small mt-1">Bank</label>
            <select name="adv_bank_{{ forloop.counter }}" class="form-control">
              <option value="0">—</option>
              {% for b in banks %}
                <option value="{{ b.t_id }}">{{ b.name }}</option>
              {% endfor %}
            </select>

            <label class="small mt-1">Date</label>
            <input name="adv_date_{{ forloop.counter }}" type="date" class="form-control" value="{{ today|date:'Y-m-d' }}">
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <button class="btn btn-success">Check-in Now</button>
  <a href="{% url 'hotel:inhouse_list' %}" class="btn btn-secondary">Cancel</a>
</form>
{% endblock %}

{% block javascripts %}
<script>
const roomsByItem = {{ rooms_by_item_json|safe }};
document.addEventListener('DOMContentLoaded', () => {
  for (const key in roomsByItem) {
    const holder = document.getElementById('rooms_'+key);
    const opts = roomsByItem[key] || [];
    let html = '';
    for (let i=0;i<opts.length;i++) {
      const o = opts[i];
      html += `
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="${o.id}" id="r_${key}_${o.id}" onchange="sync('${key}')">
          <label class="form-check-label small" for="r_${key}_${o.id}">${o.room_no}</label>
        </div>`;
    }
    holder.innerHTML = html || '<span class="text-danger small">No free rooms in this category for the date range.</span>';
  }
});

function sync(key) {
  const checks = document.querySelectorAll(`#rooms_${key} input[type="checkbox"]`);
  let chosen = [];
  checks.forEach(c => { if (c.checked) chosen.push(c.value); });
  document.getElementById('hid_'+key).value = chosen.join(',');
}
</script>
{% endblock %}