{% extends 'base.html' %}
{% block title %}Hotels & Lodges{% endblock %}
{% block page_title %}Hotels & Lodges{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <span class="text-muted small">Manage all registered hotels, lodges & guest houses</span>
  </div>
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#hotelModal">
    <i class="bi bi-plus-lg me-1"></i>Register Hotel
  </button>
</div>

<!-- Stat Cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-building"></i></div>
      <div>
        <div class="label">Total Hotels</div>
        <div class="value">{{ total_hotels }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle"></i></div>
      <div>
        <div class="label">Active</div>
        <div class="value">{{ active_hotels }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-slash-circle"></i></div>
      <div>
        <div class="label">Inactive</div>
        <div class="value">{{ total_hotels|add:"-"|add:active_hotels }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-info bg-opacity-10 text-info"><i class="bi bi-door-open"></i></div>
      <div>
        <div class="label">Quick Links</div>
        <div class="value" style="font-size:.9rem;">
          <a href="{% url 'guest_list' %}" class="text-decoration-none">Guests</a> &middot;
          <a href="{% url 'booking_list' %}" class="text-decoration-none">Bookings</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Hotel Table -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-building me-2"></i>All Hotels</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>Reg. No.</th>
          <th>Name</th>
          <th>Owner (User)</th>
          <th>Phone</th>
          <th>Region / District</th>
          <th>Rooms</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for hotel in hotels %}
        <tr>
          <td><code>{{ hotel.registration_number }}</code></td>
          <td><a href="{% url 'hotel_detail' hotel.pk %}" class="fw-semibold text-decoration-none">{{ hotel.name }}</a></td>
          <td>{{ hotel.owner.get_full_name|default:hotel.owner.username|default:'—' }}</td>
          <td>{{ hotel.phone }}</td>
          <td>{{ hotel.region.name }}, {{ hotel.district.name }}</td>
          <td>
            <span class="badge bg-success bg-opacity-10 text-success">{{ hotel.get_available_rooms }} Avail</span>
            <span class="badge bg-danger bg-opacity-10 text-danger">{{ hotel.get_occupied_rooms }} Occ</span>
          </td>
          <td>
            {% if hotel.is_active %}
              <span class="badge bg-success">Active</span>
            {% else %}
              <span class="badge bg-secondary">Inactive</span>
            {% endif %}
          </td>
          <td class="text-end">
            <a href="{% url 'hotel_detail' hotel.pk %}" class="btn btn-sm btn-outline-primary" title="View"><i class="bi bi-eye"></i></a>
            <a href="{% url 'hotel_edit' hotel.pk %}" class="btn btn-sm btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
            <form method="post" action="{% url 'hotel_toggle_status' hotel.pk %}" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm {% if hotel.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}" title="{% if hotel.is_active %}Deactivate{% else %}Activate{% endif %}">
                <i class="bi {% if hotel.is_active %}bi-pause-circle{% else %}bi-play-circle{% endif %}"></i>
              </button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="8" class="text-center text-muted py-4">
            No hotels registered yet.
            <a href="#" data-bs-toggle="modal" data-bs-target="#hotelModal">Register one now.</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- ── Register Hotel Modal ──────────────────────────────────────────────── -->
<div class="modal fade" id="hotelModal" tabindex="-1" data-bs-backdrop="static"
     aria-labelledby="hotelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{% url 'hotel_list' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="hotelModalLabel">
            <i class="bi bi-building me-2"></i>Register Hotel / Lodge
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if hotel_form.non_field_errors %}
          <div class="alert alert-danger py-2 small">{{ hotel_form.non_field_errors }}</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Hotel / Lodge Name <span class="text-danger">*</span></label>
              {{ hotel_form.name }}
              {% if hotel_form.name.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.name.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Owner (User)</label>
              {{ hotel_form.owner }}
              {% if hotel_form.owner.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.owner.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Phone <span class="text-danger">*</span></label>
              {{ hotel_form.phone }}
              {% if hotel_form.phone.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.phone.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Email</label>
              {{ hotel_form.email }}
              {% if hotel_form.email.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.email.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Region <span class="text-danger">*</span></label>
              {{ hotel_form.region }}
              {% if hotel_form.region.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.region.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">District <span class="text-danger">*</span></label>
              {{ hotel_form.district }}
              {% if hotel_form.district.errors %}
              <div class="text-danger small mt-1">{{ hotel_form.district.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-9">
              <label class="form-label fw-semibold">Address</label>
              {{ hotel_form.address }}
            </div>
            <div class="col-md-3">
              <label class="form-label fw-semibold">No. of Rooms</label>
              {{ hotel_form.number_of_rooms }}
            </div>
            <div class="col-12">
              <div class="form-check">
                {{ hotel_form.is_active }}
                <label class="form-check-label" for="{{ hotel_form.is_active.id_for_label }}">Active</label>
              </div>
            </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-check-lg me-1"></i>Register Hotel
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const allDistricts = [{% for d in all_districts %}{id:{{d.id}},name:"{{d.name|escapejs}}",regionId:{{d.region_id}}},{% endfor %}];

const regionSel   = document.getElementById('id_hotel_region');
const districtSel = document.getElementById('id_hotel_district');

function populateDistricts(regionId, keepVal) {
  const current = keepVal !== undefined ? keepVal : districtSel.value;
  districtSel.innerHTML = '<option value="">-- Select District --</option>';
  if (!regionId) return;
  allDistricts.filter(d => d.regionId == regionId).forEach(function(d) {
    const opt = new Option(d.name, d.id);
    if (String(d.id) === String(current)) opt.selected = true;
    districtSel.add(opt);
  });
}

regionSel.addEventListener('change', function() { populateDistricts(this.value); });

// Pre-populate districts if region already selected (form re-render after validation error)
if (regionSel.value) {
  populateDistricts(regionSel.value, '{{ hotel_form.district.value|default:"" }}');
}

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