{% extends "base.html" %}
{% block title %}{{ house.house_number }}{% endblock %}
{% block page_title %}{{ house.house_number }}{% endblock %}

{% block content %}
<!-- House Info -->
<div class="row g-3 mb-4">
  <div class="col-lg-8">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-info-circle me-1"></i>House Information</span>
        <div class="d-flex gap-2">
          {% if house.location_type == 'market' %}
          <span class="badge badge-market fs-6">Market</span>
          {% else %}
          <span class="badge badge-home fs-6">Home</span>
          {% endif %}
        </div>
      </div>
      <div class="card-body">
        <div class="row g-2">
          <div class="col-6 col-md-3">
            <div class="text-muted small">House Number</div>
            <div class="fw-bold">{{ house.house_number }}</div>
          </div>
          <div class="col-6 col-md-3">
            <div class="text-muted small">Region</div>
            <div>{{ house.region.name }}</div>
          </div>
          <div class="col-6 col-md-3">
            <div class="text-muted small">District</div>
            <div>{{ house.district.name }}</div>
          </div>
          <div class="col-6 col-md-3">
            <div class="text-muted small">Ward</div>
            <div>{{ house.ward.name }}</div>
          </div>
          <div class="col-6 col-md-3 mt-2">
            <div class="text-muted small">Village</div>
            <div>{{ house.village.name }}</div>
          </div>
          <div class="col-6 col-md-3 mt-2">
            <div class="text-muted small">Total Rooms</div>
            <div>{{ house.total_rooms }}</div>
          </div>
          <div class="col-6 col-md-3 mt-2">
            <div class="text-muted small">Occupied</div>
            <div class="text-success fw-semibold">{{ occupied }}</div>
          </div>
          <div class="col-6 col-md-3 mt-2">
            <div class="text-muted small">Vacant</div>
            <div class="text-secondary fw-semibold">{{ house.total_rooms|add:"-"|add:occupied }}</div>
          </div>
          <div class="col-6 col-md-3 mt-2">
            <div class="text-muted small">Owner</div>
            <div>{{ house.owner.get_full_name|default:house.owner.username|default:"—" }}</div>
          </div>
          {% if house.description %}
          <div class="col-12 mt-2">
            <div class="text-muted small">Description</div>
            <div>{{ house.description }}</div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="stat-card h-100">
      <div class="icon bg-success bg-opacity-10 text-success" style="width:56px;height:56px;font-size:1.8rem">
        <i class="bi bi-cash-coin"></i>
      </div>
      <div>
        <div class="label">Total Rent Collected</div>
        <div class="value text-success">TSh {{ total_rent|floatformat:0 }}</div>
        <div class="small text-muted mt-1">All time, all rooms</div>
      </div>
    </div>
  </div>
</div>

<!-- Rooms Grid -->
<div class="d-flex justify-content-between align-items-center mb-3">
  <h6 class="mb-0 fw-bold text-muted text-uppercase small">
    <i class="bi bi-door-open me-1"></i>Rooms ({{ rooms|length }})
  </h6>
</div>

<div class="row g-3">
  {% for room in rooms %}
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="room-card {% if room.is_occupied %}room-occupied{% else %}room-vacant{% endif %}">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <div class="room-number">{{ room.room_number }}</div>
        {% if room.is_occupied %}
        <span class="badge bg-success-subtle text-success">Occupied</span>
        {% else %}
        <span class="badge bg-secondary-subtle text-secondary">Vacant</span>
        {% endif %}
      </div>

      {% if room.rent_per_month %}
      <div class="small text-muted">TSh <strong>{{ room.rent_per_month|floatformat:0 }}</strong>/month</div>
      {% else %}
      <div class="small text-warning"><i class="bi bi-exclamation-circle me-1"></i>Rent not set</div>
      {% endif %}

      {% if room.current_user_name %}
      <div class="small mt-1">
        <i class="bi bi-person me-1 text-muted"></i>{{ room.current_user_name }}
      </div>
      {% if room.current_user_phone %}
      <div class="small text-muted">
        <i class="bi bi-telephone me-1"></i>{{ room.current_user_phone }}
      </div>
      {% endif %}
      {% endif %}

      {% if room.season_start_year %}
      <div class="small text-muted mt-1">
        <i class="bi bi-calendar me-1"></i>{{ room.get_season_display }}
      </div>
      {% endif %}

      <div class="small mt-1">
        Paid: <strong class="text-success">TSh {{ room.get_total_rent_paid|floatformat:0 }}</strong>
      </div>

      {% with last=room.get_last_paid_info %}
      <div class="small mt-1">
        {% if last %}
        <i class="bi bi-calendar-check me-1 text-muted"></i>Last paid: <strong>{{ last }}</strong>
        {% else %}
        <i class="bi bi-calendar-x me-1 text-muted"></i><span class="text-muted">No payments yet</span>
        {% endif %}
      </div>
      {% endwith %}

      <div class="d-flex gap-1 mt-2 pt-2 border-top">
        <a href="{% url 'room_edit' room.pk %}" class="btn btn-sm btn-outline-secondary flex-fill">
          <i class="bi bi-pencil"></i> Edit
        </a>
        <a href="{% url 'room_detail' room.pk %}" class="btn btn-sm btn-outline-primary flex-fill">
          <i class="bi bi-eye"></i> View
        </a>
      </div>
    </div>
  </div>
  {% empty %}
  <div class="col-12">
    <p class="text-muted">No rooms found for this house.</p>
  </div>
  {% endfor %}
</div>

<div class="mt-4">
  <a href="{% url 'house_list' %}" class="btn btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Back to Houses
  </a>
  <a href="{% url 'house_delete' house.pk %}" class="btn btn-outline-danger ms-2">
    <i class="bi bi-trash me-1"></i>Delete House
  </a>
</div>
{% endblock %}