{% extends 'base.html' %}
{% block title %}{{ hotel.name }}{% endblock %}
{% block page_title %}{{ hotel.name }}{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'hotel_list' %}">Hotels</a></li>
    <li class="breadcrumb-item active">{{ hotel.name }}</li>
  </ol>
</nav>

<!-- Hotel Info + Stats -->
<div class="row g-3 mb-4">
  <div class="col-md-8">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-building me-2"></i>Hotel Details</span>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  data-bs-toggle="modal" data-bs-target="#editHotelModal">
            <i class="bi bi-pencil me-1"></i>Edit
          </button>
          <a href="{% url 'hotel_delete' hotel.pk %}" class="btn btn-sm btn-outline-danger">
            <i class="bi bi-trash me-1"></i>Delete
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-2">
          <div class="col-sm-4 text-muted small">Registration No.</div>
          <div class="col-sm-8"><code>{{ hotel.registration_number }}</code></div>
          <div class="col-sm-4 text-muted small">Owner</div>
          <div class="col-sm-8">{{ hotel.owner.get_full_name|default:hotel.owner.username|default:'—' }}</div>
          <div class="col-sm-4 text-muted small">Phone</div>
          <div class="col-sm-8">{{ hotel.phone }}</div>
          <div class="col-sm-4 text-muted small">Email</div>
          <div class="col-sm-8">{{ hotel.email|default:'—' }}</div>
          <div class="col-sm-4 text-muted small">Location</div>
          <div class="col-sm-8">{{ hotel.district.name }}, {{ hotel.region.name }}</div>
          <div class="col-sm-4 text-muted small">Address</div>
          <div class="col-sm-8">{{ hotel.address|default:'—' }}</div>
          <div class="col-sm-4 text-muted small">Status</div>
          <div class="col-sm-8">
            {% if hotel.is_active %}<span class="badge bg-success">Active</span>
            {% else %}<span class="badge bg-secondary">Inactive</span>{% endif %}
          </div>
          <div class="col-sm-4 text-muted small">Registered by</div>
          <div class="col-sm-8">{{ hotel.created_by.username|default:'—' }} &middot; {{ hotel.created_at|date:"d M Y" }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row g-3">
      <div class="col-6 col-md-12">
        <div class="stat-card">
          <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-door-open"></i></div>
          <div><div class="label">Available</div><div class="value">{{ available_count }}</div></div>
        </div>
      </div>
      <div class="col-6 col-md-12">
        <div class="stat-card">
          <div class="icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-person-fill"></i></div>
          <div><div class="label">Occupied</div><div class="value">{{ occupied_count }}</div></div>
        </div>
      </div>
      <div class="col-12">
        <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 Revenue</div><div class="value" style="font-size:1.1rem;">TSh {{ total_revenue|floatformat:0 }}</div></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Rooms -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-grid me-2"></i>Rooms ({{ total_rooms }})</span>
    <button type="button" class="btn btn-sm btn-primary"
            data-bs-toggle="modal" data-bs-target="#addRoomModal">
      <i class="bi bi-plus-lg me-1"></i>Add Room
    </button>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>Room No.</th>
          <th>Type</th>
          <th>Price/Night</th>
          <th>Capacity</th>
          <th>Status</th>
          <th>Active Booking</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for room in rooms %}
        <tr>
          <td class="fw-semibold">{{ room.room_number }}</td>
          <td>{{ room.get_room_type_display }}</td>
          <td>TSh {{ room.price_per_night|floatformat:0 }}</td>
          <td>{{ room.capacity }}</td>
          <td>
            {% if room.status == 'available' %}<span class="badge bg-success">Available</span>
            {% elif room.status == 'occupied' %}<span class="badge bg-danger">Occupied</span>
            {% else %}<span class="badge bg-warning text-dark">Maintenance</span>{% endif %}
          </td>
          <td>
            {% with bk=room.get_active_booking %}
              {% if bk %}
                <a href="{% url 'booking_detail' bk.pk %}" class="text-decoration-none small">
                  BK{{ bk.pk|stringformat:"04d" }} — {{ bk.guest.full_name }}
                </a>
              {% else %}—{% endif %}
            {% endwith %}
          </td>
          <td class="text-end">
            <a href="{% url 'lodge_room_edit' room.pk %}" class="btn btn-sm btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
            <a href="{% url 'lodge_room_delete' room.pk %}" class="btn btn-sm btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center text-muted py-4">
            No rooms added yet.
            <a href="#" data-bs-toggle="modal" data-bs-target="#addRoomModal">Add the first room.</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- ── Edit Hotel Modal ───────────────────────────────────────────────────── -->
<div class="modal fade" id="editHotelModal" tabindex="-1" data-bs-backdrop="static"
     aria-labelledby="editHotelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{% url 'hotel_detail' hotel.pk %}">
        {% csrf_token %}
        <input type="hidden" name="form_action" value="edit_hotel">
        <div class="modal-header">
          <h5 class="modal-title" id="editHotelModalLabel">
            <i class="bi bi-pencil me-2"></i>Edit Hotel — {{ hotel.name }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if edit_form.non_field_errors %}
          <div class="alert alert-danger py-2 small">{{ edit_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>
              {{ edit_form.name }}
              {% if edit_form.name.errors %}
              <div class="text-danger small mt-1">{{ edit_form.name.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Owner (User)</label>
              {{ edit_form.owner }}
              {% if edit_form.owner.errors %}
              <div class="text-danger small mt-1">{{ edit_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>
              {{ edit_form.phone }}
              {% if edit_form.phone.errors %}
              <div class="text-danger small mt-1">{{ edit_form.phone.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Email</label>
              {{ edit_form.email }}
              {% if edit_form.email.errors %}
              <div class="text-danger small mt-1">{{ edit_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>
              {{ edit_form.region }}
              {% if edit_form.region.errors %}
              <div class="text-danger small mt-1">{{ edit_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>
              {{ edit_form.district }}
              {% if edit_form.district.errors %}
              <div class="text-danger small mt-1">{{ edit_form.district.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-9">
              <label class="form-label fw-semibold">Address</label>
              {{ edit_form.address }}
            </div>
            <div class="col-md-3">
              <label class="form-label fw-semibold">No. of Rooms</label>
              {{ edit_form.number_of_rooms }}
            </div>
            <div class="col-12">
              <div class="form-check">
                {{ edit_form.is_active }}
                <label class="form-check-label" for="{{ edit_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-save me-1"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ── Add Room Modal ─────────────────────────────────────────────────────── -->
<div class="modal fade" id="addRoomModal" tabindex="-1" data-bs-backdrop="static"
     aria-labelledby="addRoomModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{% url 'hotel_detail' hotel.pk %}">
        {% csrf_token %}
        <input type="hidden" name="form_action" value="add_room">
        <div class="modal-header">
          <h5 class="modal-title" id="addRoomModalLabel">
            <i class="bi bi-grid me-2"></i>Add Room — {{ hotel.name }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if room_form.non_field_errors %}
          <div class="alert alert-danger py-2 small">{{ room_form.non_field_errors }}</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Room Number <span class="text-danger">*</span></label>
              {{ room_form.room_number }}
              {% if room_form.room_number.errors %}
              <div class="text-danger small mt-1">{{ room_form.room_number.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Room Type <span class="text-danger">*</span></label>
              {{ room_form.room_type }}
              {% if room_form.room_type.errors %}
              <div class="text-danger small mt-1">{{ room_form.room_type.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Price per Night (TSh) <span class="text-danger">*</span></label>
              {{ room_form.price_per_night }}
              {% if room_form.price_per_night.errors %}
              <div class="text-danger small mt-1">{{ room_form.price_per_night.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Capacity <span class="text-danger">*</span></label>
              {{ room_form.capacity }}
              {% if room_form.capacity.errors %}
              <div class="text-danger small mt-1">{{ room_form.capacity.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Status</label>
              {{ room_form.status }}
              {% if room_form.status.errors %}
              <div class="text-danger small mt-1">{{ room_form.status.errors|join:", " }}</div>
              {% endif %}
            </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>Add Room
          </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 on load (edit form already has region selected)
if (regionSel.value) {
  populateDistricts(regionSel.value, '{{ edit_form.district.value|default:"" }}');
}

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