{% extends "base.html" %}
{% block title %}Edit {{ room.room_number }}{% endblock %}
{% block page_title %}Edit Room {{ room.room_number }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <i class="bi bi-door-open me-1"></i>Room Details — {{ room.room_number }}
      </div>
      <div class="card-body">
        <form method="post" novalidate>
          {% csrf_token %}

          <!-- Rent -->
          <h6 class="text-muted text-uppercase small fw-bold mb-3">Rent</h6>
          <div class="mb-3">
            <label class="form-label fw-semibold">Rent Per Month (TSh)</label>
            {{ form.rent_per_month }}
            {% if form.rent_per_month.errors %}<div class="text-danger small">{{ form.rent_per_month.errors }}</div>{% endif %}
          </div>

          <!-- Season -->
          <h6 class="text-muted text-uppercase small fw-bold mb-3 mt-4">
            <i class="bi bi-calendar-range me-1"></i>Rental Season
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-6">
              <label class="form-label fw-semibold">Start Month</label>
              {{ form.season_start_month }}
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">Start Year</label>
              {{ form.season_start_year }}
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">End Month</label>
              {{ form.season_end_month }}
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">End Year</label>
              {{ form.season_end_year }}
            </div>
          </div>

          <!-- Tenant -->
          <h6 class="text-muted text-uppercase small fw-bold mb-3">
            <i class="bi bi-person me-1"></i>Current Tenant
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Tenant Name</label>
              {{ form.current_user_name }}
              {% if form.current_user_name.errors %}<div class="text-danger small">{{ form.current_user_name.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Phone Number</label>
              {{ form.current_user_phone }}
              {% if form.current_user_phone.errors %}<div class="text-danger small">{{ form.current_user_phone.errors }}</div>{% endif %}
            </div>
            <div class="col-12">
              <div class="form-check">
                {{ form.is_occupied }}
                <label class="form-check-label fw-semibold" for="{{ form.is_occupied.id_for_label }}">
                  Room is Currently Occupied
                </label>
              </div>
            </div>
          </div>

          <div class="d-flex gap-2 justify-content-end">
            <a href="{% url 'house_detail' room.house.pk %}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Save Changes
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}