{% extends "pos/base.html" %}
{% load static %}
{% block title %}Verify Pre-Booking{% endblock %}
{% block heading %}Verify & Confirm Pre-Booking{% endblock %}

{% block content %}
<div class="card card-body">
  <div><b>Booking:</b> #{{ booking.booking_code }} | Status: {{ booking.status }}</div>
  <div><b>Dates:</b> {{ booking.checkin_date }} → {{ booking.checkout_date }} ({{ booking.nights }} night(s))</div>
  <div><b>Grand:</b> {{ grand|floatformat:2 }}</div>
  <form method="post">
    {% csrf_token %}
    <div class="row mt-2">
      <div class="col-md-3">
        <label>Customer T-ID (ledger)</label>
        <input type="number" name="customer_tid" class="form-control" required>
      </div>
      <div class="col-md-3">
        <label>Transaction Date</label>
        <input type="date" name="trx_date" class="form-control" value="{{ booking.checkin_date|date:'Y-m-d' }}">
      </div>
    </div>

    <hr>
    <h6>Receipts (multi-bank)</h6>
    <div id="rcpt">
      <div class="row mb-2">
        <div class="col-md-4">
          <label>Bank</label>
          <select name="bank_tid" class="form-control">
            <option value="0">Cash</option>
            {% for b in bank_accounts %}
              <option value="{{ b.t_id }}">{{ b.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <label>Amount</label>
          <input type="number" step="0.01" name="amount" class="form-control" required>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addRow()">+ Add Another</button>

    <div class="mt-3">
      <button class="btn btn-success">Confirm Booking & Post</button>
    </div>
  </form>
</div>

<script>
function addRow() {
  var html = `
  <div class="row mb-2">
    <div class="col-md-4">
      <select name="bank_tid" class="form-control">
        <option value="0">Cash</option>
        {% for b in bank_accounts %}
          <option value="{{ b.t_id }}">{{ b.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3">
      <input type="number" step="0.01" name="amount" class="form-control" required>
    </div>
  </div>`;
  var div = document.createElement('div');
  div.innerHTML = html;
  document.getElementById('rcpt').appendChild(div);
}
</script>
{% endblock %}