{% extends 'base.html' %}
{% block title %}New Booking{% endblock %}
{% block page_title %}New Booking{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'booking_list' %}">Bookings</a></li>
        <li class="breadcrumb-item active">New Booking</li>
      </ol>
    </nav>

    <div class="card">
      <div class="card-header"><i class="bi bi-calendar-plus me-2"></i>Create Booking</div>
      <div class="card-body">
        <form method="post" id="bookingForm">
          {% csrf_token %}
          {% if form.non_field_errors %}
          <div class="alert alert-danger">{{ form.non_field_errors }}</div>
          {% endif %}

          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Guest <span class="text-danger">*</span></label>
              {{ form.guest }}
              {% if form.guest.errors %}<div class="text-danger small">{{ form.guest.errors }}</div>{% endif %}
              <div class="form-text">Don't see the guest? <a href="{% url 'guest_create' %}" target="_blank">Register new guest</a></div>
            </div>
            <div class="col-12">
              <label class="form-label">Room <span class="text-danger">*</span></label>
              {{ form.room }}
              {% if form.room.errors %}<div class="text-danger small">{{ form.room.errors }}</div>{% endif %}
              <div class="form-text">Only available rooms are shown.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Check-In Date <span class="text-danger">*</span></label>
              {{ form.check_in_date }}
              {% if form.check_in_date.errors %}<div class="text-danger small">{{ form.check_in_date.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Check-Out Date <span class="text-danger">*</span></label>
              {{ form.check_out_date }}
              {% if form.check_out_date.errors %}<div class="text-danger small">{{ form.check_out_date.errors }}</div>{% endif %}
            </div>

            <!-- Auto-calculated summary -->
            <div class="col-12">
              <div id="bookingSummary" class="alert alert-info d-none">
                <div class="row">
                  <div class="col-6"><strong>Nights:</strong> <span id="sumNights">—</span></div>
                  <div class="col-6"><strong>Est. Total:</strong> <span id="sumTotal">—</span></div>
                </div>
              </div>
            </div>

            <div class="col-12">
              <label class="form-label">Notes</label>
              {{ form.notes }}
            </div>
          </div>

          <div class="mt-4 d-flex gap-2">
            <button type="submit" class="btn btn-primary"><i class="bi bi-calendar-check me-1"></i>Confirm Booking</button>
            <a href="{% url 'booking_list' %}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Room price map: fetch from select option data or use a simpler approach
const roomPrices = {};
{% for room in form.room.field.queryset %}
roomPrices[{{ room.pk }}] = {{ room.price_per_night }};
{% endfor %}

function updateSummary() {
  const checkIn = document.querySelector('[name="check_in_date"]').value;
  const checkOut = document.querySelector('[name="check_out_date"]').value;
  const roomId = document.getElementById('id_room').value;
  const summary = document.getElementById('bookingSummary');

  if (checkIn && checkOut && roomId) {
    const d1 = new Date(checkIn), d2 = new Date(checkOut);
    const nights = Math.round((d2 - d1) / 86400000);
    if (nights > 0) {
      const price = roomPrices[roomId] || 0;
      const total = nights * price;
      document.getElementById('sumNights').textContent = nights;
      document.getElementById('sumTotal').textContent = 'TSh ' + total.toLocaleString();
      summary.classList.remove('d-none');
      return;
    }
  }
  summary.classList.add('d-none');
}

document.querySelector('[name="check_in_date"]').addEventListener('change', updateSummary);
document.querySelector('[name="check_out_date"]').addEventListener('change', updateSummary);
document.getElementById('id_room').addEventListener('change', updateSummary);
</script>
{% endblock %}