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

{% block content %}
<div class="row g-3 mb-4">
  <!-- Room Info -->
  <div class="col-lg-5">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between">
        <span><i class="bi bi-door-open me-1"></i>Room Info</span>
        <a href="{% url 'room_edit' room.pk %}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-pencil"></i> Edit
        </a>
      </div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-sm-5 text-muted small">Room Number</dt>
          <dd class="col-sm-7 fw-bold">{{ room.room_number }}</dd>

          <dt class="col-sm-5 text-muted small">House</dt>
          <dd class="col-sm-7">
            <a href="{% url 'house_detail' room.house.pk %}">{{ room.house.house_number }}</a>
          </dd>

          <dt class="col-sm-5 text-muted small">Rent/Month</dt>
          <dd class="col-sm-7 fw-semibold text-success">
            {% if room.rent_per_month %}TSh {{ room.rent_per_month|floatformat:0 }}{% else %}<span class="text-warning">Not set</span>{% endif %}
          </dd>

          <dt class="col-sm-5 text-muted small">Season</dt>
          <dd class="col-sm-7">{{ room.get_season_display }}</dd>

          <dt class="col-sm-5 text-muted small">Status</dt>
          <dd class="col-sm-7">
            {% if room.is_occupied %}
            <span class="badge bg-success">Occupied</span>
            {% else %}
            <span class="badge bg-secondary">Vacant</span>
            {% endif %}
          </dd>

          {% if room.current_user_name %}
          <dt class="col-sm-5 text-muted small">Tenant</dt>
          <dd class="col-sm-7">{{ room.current_user_name }}</dd>

          <dt class="col-sm-5 text-muted small">Phone</dt>
          <dd class="col-sm-7">{{ room.current_user_phone|default:"—" }}</dd>
          {% endif %}

          <dt class="col-sm-5 text-muted small">Total Paid</dt>
          <dd class="col-sm-7 fw-bold text-success">TSh {{ total_paid|floatformat:0 }}</dd>
        </dl>
      </div>
    </div>
  </div>

  <!-- Quick Pay -->
  <div class="col-lg-7">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-plus-circle me-1"></i>Record Rent Payment</span>
        {% if not room.rent_per_month %}
        <span class="badge bg-warning text-dark">Set rent first</span>
        {% endif %}
      </div>
      <div class="card-body">
        {% if room.rent_per_month %}
        <a href="{% url 'rent_payment_create' room.pk %}" class="btn btn-success w-100 mb-2">
          <i class="bi bi-cash-coin me-1"></i>Record New Payment
        </a>
        <p class="text-muted small mb-0">
          Rent: <strong>TSh {{ room.rent_per_month|floatformat:0 }}</strong>/month.
          Allowed periods: <strong>3, 4, 6, or 12 months</strong>.
        </p>
        {% else %}
        <a href="{% url 'room_edit' room.pk %}" class="btn btn-warning w-100">
          <i class="bi bi-pencil me-1"></i>Edit Room to Set Rent
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Payment History -->
<div class="card">
  <div class="card-header">
    <i class="bi bi-clock-history me-1"></i>Payment History
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>Year</th>
            <th>Period</th>
            <th>Months Paid</th>
            <th>Tenant</th>
            <th>Date Recorded</th>
            <th class="text-end">Amount</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for payment in payments %}
          <tr>
            <td>{{ payment.year }}</td>
            <td><span class="badge bg-primary">{{ payment.payment_period }} months</span></td>
            <td class="small text-muted">{{ payment.get_months_display }}</td>
            <td>{{ payment.tenant_name|default:"—" }}</td>
            <td>{{ payment.payment_date|date:"d M Y" }}</td>
            <td class="text-end fw-semibold text-success">TSh {{ payment.total_amount|floatformat:0 }}</td>
            <td>
              <a href="{% url 'rent_payment_delete' payment.pk %}"
                 class="btn btn-sm btn-outline-danger"
                 onclick="return confirm('Delete this payment record?')">
                <i class="bi bi-trash"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-center text-muted py-4">No payments recorded yet.</td>
          </tr>
          {% endfor %}
        </tbody>
        {% if payments %}
        <tfoot class="table-light">
          <tr>
            <td colspan="5" class="text-end fw-bold">Total:</td>
            <td class="text-end fw-bold text-success">TSh {{ total_paid|floatformat:0 }}</td>
            <td></td>
          </tr>
        </tfoot>
        {% endif %}
      </table>
    </div>
  </div>
</div>

<div class="mt-3">
  <a href="{% url 'house_detail' room.house.pk %}" class="btn btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Back to House
  </a>
</div>
{% endblock %}