{% extends 'base.html' %}
{% block title %}Booking BK{{ booking.pk|stringformat:"04d" }}{% endblock %}
{% block page_title %}Booking Detail{% endblock %}

{% block content %}
<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">BK{{ booking.pk|stringformat:"04d" }}</li>
  </ol>
</nav>

<div class="row g-3 mb-4">
  <!-- Booking Summary -->
  <div class="col-lg-7">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-calendar2-check me-2"></i>BK{{ booking.pk|stringformat:"04d" }}</span>
        <div class="d-flex gap-2 flex-wrap">
          {% if booking.booking_status == 'reserved' or booking.booking_status == 'checked_in' %}
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  data-bs-toggle="modal" data-bs-target="#editBookingModal">
            <i class="bi bi-pencil me-1"></i>Edit
          </button>
          {% endif %}
          {% if booking.booking_status == 'reserved' %}
            <form method="post" action="{% url 'booking_checkin' booking.pk %}" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-success"><i class="bi bi-door-open me-1"></i>Check In</button>
            </form>
            <a href="{% url 'booking_cancel' booking.pk %}" class="btn btn-sm btn-outline-danger">Cancel</a>
          {% elif booking.booking_status == 'checked_in' %}
            <form method="post" action="{% url 'booking_checkout' booking.pk %}" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-warning text-dark"><i class="bi bi-door-closed me-1"></i>Check Out</button>
            </form>
            <a href="{% url 'booking_cancel' booking.pk %}" class="btn btn-sm btn-outline-danger">Cancel</a>
          {% endif %}
        </div>
      </div>
      <div class="card-body">
        <div class="row g-2 small">
          <div class="col-4 text-muted">Guest</div>
          <div class="col-8">
            <a href="{% url 'guest_detail' booking.guest.pk %}" class="text-decoration-none fw-semibold">
              {{ booking.guest.full_name }}
            </a>
            <span class="text-muted ms-2">{{ booking.guest.phone }}</span>
          </div>
          <div class="col-4 text-muted">Hotel</div>
          <div class="col-8">
            <a href="{% url 'hotel_detail' booking.room.hotel.pk %}" class="text-decoration-none">{{ booking.room.hotel.name }}</a>
          </div>
          <div class="col-4 text-muted">Room</div>
          <div class="col-8">
            {{ booking.room.room_number }} — {{ booking.room.get_room_type_display }}
            <span class="text-muted">(TSh {{ booking.room.price_per_night|floatformat:0 }}/night)</span>
          </div>
          <div class="col-4 text-muted">Check-In</div>
          <div class="col-8">{{ booking.check_in_date|date:"l, d M Y" }}</div>
          <div class="col-4 text-muted">Check-Out</div>
          <div class="col-8">{{ booking.check_out_date|date:"l, d M Y" }}</div>
          <div class="col-4 text-muted">Nights</div>
          <div class="col-8 fw-semibold">{{ booking.number_of_nights }}</div>
          <div class="col-4 text-muted">Total Amount</div>
          <div class="col-8 fw-bold">TSh {{ booking.total_amount|floatformat:0 }}</div>
          {% if booking.notes %}
          <div class="col-4 text-muted">Notes</div>
          <div class="col-8">{{ booking.notes }}</div>
          {% endif %}
          <div class="col-4 text-muted">Created by</div>
          <div class="col-8 text-muted">{{ booking.created_by.username|default:'—' }} &middot; {{ booking.created_at|date:"d M Y H:i" }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Status & Payment Summary -->
  <div class="col-lg-5">
    <div class="row g-3">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="text-muted small text-uppercase">Booking Status</span>
              {% if booking.booking_status == 'reserved' %}<span class="badge bg-info text-dark fs-6">Reserved</span>
              {% elif booking.booking_status == 'checked_in' %}<span class="badge bg-success fs-6">Checked In</span>
              {% elif booking.booking_status == 'checked_out' %}<span class="badge bg-secondary fs-6">Checked Out</span>
              {% else %}<span class="badge bg-danger fs-6">Cancelled</span>{% endif %}
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span class="text-muted small text-uppercase">Payment Status</span>
              {% if booking.payment_status == 'paid' %}<span class="badge bg-success fs-6">Paid</span>
              {% elif booking.payment_status == 'partial' %}<span class="badge bg-warning text-dark fs-6">Partial</span>
              {% else %}<span class="badge bg-danger fs-6">Pending</span>{% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="stat-card">
          <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-cash"></i></div>
          <div><div class="label">Paid</div><div class="value" style="font-size:1rem;">TSh {{ total_paid|floatformat:0 }}</div></div>
        </div>
      </div>
      <div class="col-6">
        <div class="stat-card">
          <div class="icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-exclamation-circle"></i></div>
          <div><div class="label">Balance</div><div class="value" style="font-size:1rem;">TSh {{ balance|floatformat:0 }}</div></div>
        </div>
      </div>
      {% if booking.booking_status != 'cancelled' %}
      <div class="col-12 text-end">
        <a href="{% url 'lodge_payment_create' booking.pk %}" class="btn btn-sm btn-primary">
          <i class="bi bi-plus-lg me-1"></i>Record Payment
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Payments Table -->
<div class="card">
  <div class="card-header"><i class="bi bi-receipt me-2"></i>Payment Records</div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>#</th>
          <th>Date</th>
          <th>Amount</th>
          <th>Method</th>
          <th>Reference</th>
          <th>Recorded By</th>
          <th>Notes</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for pay in payments %}
        <tr>
          <td><code>PAY{{ pay.pk|stringformat:"04d" }}</code></td>
          <td>{{ pay.payment_date|date:"d M Y" }}</td>
          <td class="fw-semibold">TSh {{ pay.amount_paid|floatformat:0 }}</td>
          <td>
            {% if pay.payment_method == 'cash' %}<span class="badge bg-success bg-opacity-10 text-success">Cash</span>
            {% elif pay.payment_method == 'card' %}<span class="badge bg-primary bg-opacity-10 text-primary">Card</span>
            {% else %}<span class="badge bg-warning bg-opacity-10 text-warning">Mobile Money</span>{% endif %}
          </td>
          <td>{{ pay.transaction_reference|default:'—' }}</td>
          <td class="text-muted small">{{ pay.recorded_by.username|default:'—' }}</td>
          <td class="text-muted small">{{ pay.notes|default:'—' }}</td>
          <td>
            <form method="post" action="{% url 'lodge_payment_delete' pay.pk %}" class="d-inline"
                  onsubmit="return confirm('Delete this payment?')">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="text-center text-muted py-3">No payments recorded yet.</td></tr>
        {% endfor %}
      </tbody>
      {% if payments %}
      <tfoot>
        <tr class="table-light fw-bold">
          <td colspan="2">Total Paid</td>
          <td>TSh {{ total_paid|floatformat:0 }}</td>
          <td colspan="5"></td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
</div>

<!-- ── Edit Booking Modal ─────────────────────────────────────────────────── -->
{% if booking.booking_status == 'reserved' or booking.booking_status == 'checked_in' %}
<div class="modal fade" id="editBookingModal" tabindex="-1" data-bs-backdrop="static"
     aria-labelledby="editBookingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{% url 'booking_detail' booking.pk %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="editBookingModalLabel">
            <i class="bi bi-pencil me-2"></i>Edit Booking — BK{{ booking.pk|stringformat:"04d" }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if booking_edit_form.non_field_errors %}
          <div class="alert alert-danger py-2 small">{{ booking_edit_form.non_field_errors }}</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Guest <span class="text-danger">*</span></label>
              {{ booking_edit_form.guest }}
              {% if booking_edit_form.guest.errors %}
              <div class="text-danger small mt-1">{{ booking_edit_form.guest.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Room <span class="text-danger">*</span></label>
              {{ booking_edit_form.room }}
              {% if booking_edit_form.room.errors %}
              <div class="text-danger small mt-1">{{ booking_edit_form.room.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Check-In Date <span class="text-danger">*</span></label>
              {{ booking_edit_form.check_in_date }}
              {% if booking_edit_form.check_in_date.errors %}
              <div class="text-danger small mt-1">{{ booking_edit_form.check_in_date.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Check-Out Date <span class="text-danger">*</span></label>
              {{ booking_edit_form.check_out_date }}
              {% if booking_edit_form.check_out_date.errors %}
              <div class="text-danger small mt-1">{{ booking_edit_form.check_out_date.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Notes</label>
              {{ booking_edit_form.notes }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-save me-1"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if show_booking_edit_modal %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  bootstrap.Modal.getOrCreateInstance(document.getElementById('editBookingModal')).show();
});
</script>
{% endif %}
{% endblock %}