{% extends "base.html" %}
{% block title %}Houses{% endblock %}
{% block page_title %}All Houses{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div class="d-flex gap-2">
    <span class="badge bg-primary fs-6">{{ total_houses }} Total</span>
    <span class="badge bg-info text-dark fs-6">{{ market_houses }} Market</span>
    <span class="badge bg-success fs-6">{{ home_houses }} Home</span>
  </div>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addHouseModal">
    <i class="bi bi-plus-lg me-1"></i>Add House
  </button>
</div>

<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>House No.</th>
            <th>Type</th>
            <th>Owner</th>
            <th>Village</th>
            <th>Ward</th>
            <th>District</th>
            <th>Region</th>
            <th class="text-center">Rooms</th>
            <th class="text-end">Rent Collected</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for house in houses %}
          <tr>
            <td>
              <a href="{% url 'house_detail' house.pk %}" class="fw-semibold text-decoration-none">
                {{ house.house_number }}
              </a>
            </td>
            <td>
              {% if house.location_type == 'market' %}
              <span class="badge badge-market">Market</span>
              {% else %}
              <span class="badge badge-home">Home</span>
              {% endif %}
            </td>
            <td>{{ house.owner.get_full_name|default:house.owner.username|default:"—" }}</td>
            <td>{{ house.village.name }}</td>
            <td>{{ house.ward.name }}</td>
            <td>{{ house.district.name }}</td>
            <td>{{ house.region.name }}</td>
            <td class="text-center">{{ house.total_rooms }}</td>
            <td class="text-end">TSh {{ house.get_total_rent_collected|floatformat:0 }}</td>
            <td>
              <div class="d-flex gap-1 justify-content-end">
                <a href="{% url 'house_detail' house.pk %}" class="btn btn-sm btn-outline-primary" title="View">
                  <i class="bi bi-eye"></i>
                </a>
                <a href="{% url 'house_delete' house.pk %}" class="btn btn-sm btn-outline-danger" title="Delete">
                  <i class="bi bi-trash"></i>
                </a>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="10" class="text-center text-muted py-4">
              No houses yet.
              <a href="#" data-bs-toggle="modal" data-bs-target="#addHouseModal">Add the first house</a>.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Add House Modal -->
<div class="modal fade" id="addHouseModal" tabindex="-1" aria-labelledby="addHouseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addHouseModalLabel">
          <i class="bi bi-house-add me-2"></i>Add New House
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="{% url 'house_create' %}" novalidate>
        {% csrf_token %}
        <div class="modal-body">

          <h6 class="text-muted text-uppercase small fw-bold mb-3">
            <i class="bi bi-geo-alt me-1"></i>Location (TAMISEMI)
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Region <span class="text-danger">*</span></label>
              {{ form.region }}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">District <span class="text-danger">*</span></label>
              {{ form.district }}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Ward <span class="text-danger">*</span></label>
              {{ form.ward }}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Village <span class="text-danger">*</span></label>
              {{ form.village }}
            </div>
          </div>

          <hr class="my-3">
          <h6 class="text-muted text-uppercase small fw-bold mb-3">
            <i class="bi bi-building me-1"></i>House Info
          </h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Type <span class="text-danger">*</span></label>
              {{ form.location_type }}
              <div class="form-text">
                Market → <strong>LEG/MAR/XXX</strong> &nbsp;|&nbsp; Home → <strong>HOME/XXX</strong>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Total Rooms <span class="text-danger">*</span></label>
              {{ form.total_rooms }}
              <div class="form-text">Rooms will be auto-generated on save.</div>
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Description</label>
              {{ form.description }}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Owner</label>
              {{ form.owner }}
              <div class="form-text">Optional – the user who owns this property.</div>
            </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-check-lg me-1"></i>Save & Generate Rooms
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const API = {
  districts: '/locations/districts/?region_id=',
  wards:     '/locations/wards/?district_id=',
  villages:  '/locations/villages/?ward_id=',
};

function populateSelect(selectEl, data, emptyLabel) {
  selectEl.innerHTML = `<option value="">${emptyLabel}</option>`;
  data.forEach(item => {
    const opt = document.createElement('option');
    opt.value = item.id;
    opt.textContent = item.name;
    selectEl.appendChild(opt);
  });
}

document.getElementById('id_region').addEventListener('change', async function () {
  const rid = this.value;
  document.getElementById('id_district').innerHTML = '<option value="">-- Select District --</option>';
  document.getElementById('id_ward').innerHTML = '<option value="">-- Select Ward --</option>';
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!rid) return;
  const res = await fetch(API.districts + rid);
  populateSelect(document.getElementById('id_district'), await res.json(), '-- Select District --');
});

document.getElementById('id_district').addEventListener('change', async function () {
  const did = this.value;
  document.getElementById('id_ward').innerHTML = '<option value="">-- Select Ward --</option>';
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!did) return;
  const res = await fetch(API.wards + did);
  populateSelect(document.getElementById('id_ward'), await res.json(), '-- Select Ward --');
});

document.getElementById('id_ward').addEventListener('change', async function () {
  const wid = this.value;
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!wid) return;
  const res = await fetch(API.villages + wid);
  populateSelect(document.getElementById('id_village'), await res.json(), '-- Select Village --');
});
</script>
{% endblock %}