{% extends 'base.html' %}
{% block title %}Record Payment{% endblock %}
{% block page_title %}Record Payment{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <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"><a href="{% url 'booking_detail' booking.pk %}">BK{{ booking.pk|stringformat:"04d" }}</a></li>
        <li class="breadcrumb-item active">Record Payment</li>
      </ol>
    </nav>

    <!-- Booking Summary -->
    <div class="alert alert-light border mb-3">
      <div class="row small">
        <div class="col-6"><strong>Guest:</strong> {{ booking.guest.full_name }}</div>
        <div class="col-6"><strong>Room:</strong> {{ booking.room.hotel.name }} — {{ booking.room.room_number }}</div>
        <div class="col-6 mt-1"><strong>Total:</strong> TSh {{ booking.total_amount|floatformat:0 }}</div>
        <div class="col-6 mt-1"><strong>Balance:</strong>
          <span class="{% if booking.get_balance > 0 %}text-danger fw-bold{% else %}text-success{% endif %}">
            TSh {{ booking.get_balance|floatformat:0 }}
          </span>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><i class="bi bi-cash me-2"></i>Payment Details</div>
      <div class="card-body">
        <form method="post">
          {% 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-md-6">
              <label class="form-label">Amount Paid (TSh) <span class="text-danger">*</span></label>
              {{ form.amount_paid }}
              {% if form.amount_paid.errors %}<div class="text-danger small">{{ form.amount_paid.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Payment Method <span class="text-danger">*</span></label>
              {{ form.payment_method }}
            </div>
            <div class="col-12">
              <label class="form-label">Transaction Reference</label>
              {{ form.transaction_reference }}
              <div class="form-text">e.g. M-Pesa reference, card approval code</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-success"><i class="bi bi-check-lg me-1"></i>Save Payment</button>
            <a href="{% url 'booking_detail' booking.pk %}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}