{% extends 'base.html' %}
{% block title %}Unit Details{% endblock %}

{% block content %}
<div class="container mt-3">

    <!-- ================= HEADER ================= -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4><i class="bi bi-house"></i> Unit {{ unit.unit_number }}</h4>
            <p class="text-muted mb-0">{{ unit.building.name }}</p>
        </div>

        <div class="d-flex gap-2">
            <a href="{% url 'unit_list' %}?building={{ unit.building.id }}" class="btn btn-outline-dark btn-sm">
                <i class="bi bi-arrow-left"></i> Back
            </a>

            <a href="{% url 'unit_update' unit.id %}" class="btn btn-dark btn-sm">
                <i class="bi bi-pencil"></i> Edit
            </a>

            <a href="{% url 'select_tenants_for_unit' unit.id %}" class="btn btn-dark btn-sm">
                 <i class="bi bi-plus-lg"></i> Add Tenant
            </a>
        </div>
    </div>

    <div class="card shadow-lg p-4">

        <!-- ================= UNIT INFO ================= -->
        <div class="row">
            <div class="col-md-6">
                <p><strong>Unit Type:</strong> {{ unit.get_unit_type_display }}</p>
                <p><strong>Rent:</strong> KES {{ unit.rent_amount }}</p>
                <p><strong>Deposit:</strong> KES {{ unit.deposit }}</p>

                <p><strong>Capacity:</strong> {{ unit.max_occupants }}</p>
                <p><strong>Occupancy:</strong> {{ unit.current_occupancy }} / {{ unit.max_occupants }}</p>

                <p>
                    <strong>Status:</strong>
                    <span class="badge bg-info">{{ unit.occupancy_status }}</span>
                </p>
            </div>

            <div class="col-md-6">
                <p><strong>Created:</strong> {{ unit.created_at }}</p>
            </div>
        </div>

        <hr>

        <!-- ================= TENANTS ================= -->
        <h6>Current Tenants</h6>
        <ul class="list-group mb-3">
            {% for tenant in unit.tenants.all %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <strong>{{ tenant.user.username }}</strong><br>
                        <small class="text-muted">
                            Occupants: {{ tenant.occupants }}
                        </small>
                    </div>
                </li>
            {% empty %}
                <li class="list-group-item">No tenants assigned</li>
            {% endfor %}
        </ul>

        <hr>

        <!-- ================= FINANCIAL SUMMARY ================= -->
        <h6>Financial Summary</h6>
        <ul class="list-group mb-3">
            <li class="list-group-item">
                Expected: KES {{ unit.total_rent_expected }}
            </li>
            <li class="list-group-item">
                Collected: KES {{ unit.total_collected }}
            </li>
            <li class="list-group-item">
                Balance: KES {{ unit.total_balance }}
            </li>
        </ul>

        <!-- ================= PAYMENTS ================= -->
        <h6>Recent Payments</h6>
        <ul class="list-group mb-3">
            {% for payment in payments %}
                <li class="list-group-item d-flex justify-content-between">
                    <span>KES {{ payment.amount }}</span>
                    <small>{{ payment.created_at }}</small>
                </li>
            {% empty %}
                <li class="list-group-item">No payments found</li>
            {% endfor %}
        </ul>

        <!-- ================= OUTSTANDING INVOICES ================= -->
        <h6>Outstanding Invoices</h6>
        <ul class="list-group mb-3">
            {% for invoice in outstanding_invoices %}
                <li class="list-group-item d-flex justify-content-between">
                    <span>KES {{ invoice.amount }}</span>
                    <small>Due: {{ invoice.due_date }}</small>
                </li>
            {% empty %}
                <li class="list-group-item">No outstanding invoices</li>
            {% endfor %}
        </ul>

        <!-- ================= TENANT HISTORY ================= -->
        <h6>Tenant History</h6>
        <ul class="list-group mb-3">
            {% for history in tenant_history %}
                <li class="list-group-item">
                    {{ history.tenant }} |
                    {{ history.start_date }} →
                    {{ history.end_date|default:"Present" }}
                </li>
            {% empty %}
                <li class="list-group-item">No tenant history</li>
            {% endfor %}
        </ul>

        <!-- ================= RENT HISTORY ================= -->
        <h6>Rent History</h6>
        <ul class="list-group">
            {% for rent in rent_history %}
                <li class="list-group-item">
                    KES {{ rent.old_rent }} → KES {{ rent.new_rent }}
                    <small class="text-muted">({{ rent.changed_at }})</small>
                </li>
            {% empty %}
                <li class="list-group-item">No rent changes recorded</li>
            {% endfor %}
        </ul>

    </div>

</div>
{% endblock %}