{% extends 'base.html' %}
{% block title %}Guests{% endblock %}
{% block page_title %}Guest Registry{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div class="text-muted small">All registered guests</div>
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#guestModal">
    <i class="bi bi-person-plus me-1"></i>Register Guest
  </button>
</div>

<!-- Search -->
<div class="card mb-4">
  <div class="card-body py-2">
    <form method="get" class="d-flex gap-2">
      <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Search by name, phone or ID number...">
      <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bi bi-search"></i></button>
      {% if q %}<a href="{% url 'guest_list' %}" class="btn btn-sm btn-outline-secondary">Clear</a>{% endif %}
    </form>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-people me-2"></i>Guests</span>
    <span class="badge bg-primary">{{ total_guests }} total</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>Full Name</th>
          <th>Phone</th>
          <th>ID Type</th>
          <th>ID Number</th>
          <th>Registered</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for guest in guests %}
        <tr>
          <td>
            <a href="{% url 'guest_detail' guest.pk %}" class="fw-semibold text-decoration-none">
              <i class="bi bi-person-circle me-1 text-muted"></i>{{ guest.full_name }}
            </a>
          </td>
          <td>{{ guest.phone }}</td>
          <td><span class="badge bg-light text-dark border">{{ guest.get_id_type_display }}</span></td>
          <td>{{ guest.id_number }}</td>
          <td class="text-muted small">{{ guest.created_at|date:"d M Y" }}</td>
          <td class="text-end">
            <a href="{% url 'guest_detail' guest.pk %}" class="btn btn-sm btn-outline-primary" title="View"><i class="bi bi-eye"></i></a>
            <a href="{% url 'guest_edit' guest.pk %}" class="btn btn-sm btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="text-center text-muted py-4">
            {% if q %}No guests found for "{{ q }}".
            {% else %}No guests registered yet.
              <button class="btn btn-sm btn-link p-0" data-bs-toggle="modal" data-bs-target="#guestModal">Register the first guest.</button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Register Guest Modal -->
<div class="modal fade" id="guestModal" tabindex="-1" aria-labelledby="guestModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{% url 'guest_list' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="guestModalLabel"><i class="bi bi-person-plus me-2"></i>Register New Guest</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {% if show_guest_modal and guest_form.errors %}
          <div class="alert alert-danger py-2 small">Please fix the errors below.</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Full Name <span class="text-danger">*</span></label>
              {{ guest_form.full_name }}
              {% if guest_form.full_name.errors %}<div class="text-danger small mt-1">{{ guest_form.full_name.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone <span class="text-danger">*</span></label>
              {{ guest_form.phone }}
              {% if guest_form.phone.errors %}<div class="text-danger small mt-1">{{ guest_form.phone.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Email</label>
              {{ guest_form.email }}
            </div>
            <div class="col-md-4">
              <label class="form-label">ID Type <span class="text-danger">*</span></label>
              {{ guest_form.id_type }}
            </div>
            <div class="col-md-8">
              <label class="form-label">ID Number <span class="text-danger">*</span></label>
              {{ guest_form.id_number }}
              {% if guest_form.id_number.errors %}<div class="text-danger small mt-1">{{ guest_form.id_number.errors }}</div>{% endif %}
            </div>
            <div class="col-12">
              <label class="form-label">Address</label>
              {{ guest_form.address }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Save Guest</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

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