{% extends 'base.html' %}
{% block title %}{{ guest.full_name }}{% endblock %}
{% block page_title %}Guest Profile{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'guest_list' %}">Guests</a></li>
    <li class="breadcrumb-item active">{{ guest.full_name }}</li>
  </ol>
</nav>

<div class="row g-3 mb-4">
  <div class="col-md-5">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-person-circle me-2"></i>Guest Info</span>
        <a href="{% url 'guest_edit' guest.pk %}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil me-1"></i>Edit</a>
      </div>
      <div class="card-body">
        <div class="text-center mb-3">
          <i class="bi bi-person-circle text-primary" style="font-size:3rem;"></i>
          <h5 class="mt-2 mb-0">{{ guest.full_name }}</h5>
          <span class="text-muted small">Registered {{ guest.created_at|date:"d M Y" }}</span>
        </div>
        <div class="row g-2 small">
          <div class="col-4 text-muted">Phone</div>
          <div class="col-8">{{ guest.phone }}</div>
          <div class="col-4 text-muted">Email</div>
          <div class="col-8">{{ guest.email|default:'—' }}</div>
          <div class="col-4 text-muted">ID Type</div>
          <div class="col-8"><span class="badge bg-light text-dark border">{{ guest.get_id_type_display }}</span></div>
          <div class="col-4 text-muted">ID Number</div>
          <div class="col-8"><code>{{ guest.id_number }}</code></div>
          <div class="col-4 text-muted">Address</div>
          <div class="col-8">{{ guest.address|default:'—' }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-7">
    <div class="row g-3">
      <div class="col-6">
        <div class="stat-card">
          <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-calendar-check"></i></div>
          <div><div class="label">Total Stays</div><div class="value">{{ total_stays }}</div></div>
        </div>
      </div>
      <div class="col-6">
        <div class="stat-card">
          <div class="icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-cash-stack"></i></div>
          <div><div class="label">Total Spent</div><div class="value" style="font-size:1rem;">TSh {{ total_spent|floatformat:0 }}</div></div>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-end">
        <a href="{% url 'booking_create' %}?guest={{ guest.pk }}" class="btn btn-sm btn-primary">
          <i class="bi bi-plus-lg me-1"></i>New Booking for this Guest
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Booking History -->
<div class="card">
  <div class="card-header"><i class="bi bi-clock-history me-2"></i>Booking History</div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>Booking</th>
          <th>Hotel</th>
          <th>Room</th>
          <th>Check-In</th>
          <th>Check-Out</th>
          <th>Nights</th>
          <th>Total</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for bk in bookings %}
        <tr>
          <td><code>BK{{ bk.pk|stringformat:"04d" }}</code></td>
          <td>{{ bk.room.hotel.name }}</td>
          <td>{{ bk.room.room_number }}</td>
          <td>{{ bk.check_in_date|date:"d M Y" }}</td>
          <td>{{ bk.check_out_date|date:"d M Y" }}</td>
          <td>{{ bk.number_of_nights }}</td>
          <td>TSh {{ bk.total_amount|floatformat:0 }}</td>
          <td>
            {% if bk.booking_status == 'reserved' %}<span class="badge bg-info text-dark">Reserved</span>
            {% elif bk.booking_status == 'checked_in' %}<span class="badge bg-success">Checked In</span>
            {% elif bk.booking_status == 'checked_out' %}<span class="badge bg-secondary">Checked Out</span>
            {% else %}<span class="badge bg-danger">Cancelled</span>{% endif %}
          </td>
          <td><a href="{% url 'booking_detail' bk.pk %}" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a></td>
        </tr>
        {% empty %}
        <tr><td colspan="9" class="text-center text-muted py-3">No bookings yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}