{% extends 'base.html' %}
{% load humanize %}
{% block title %}Landlord Dashboard{% endblock %}

{% block content %}

<div class="page-header mb-4">
    <h4>
        <i class="bi bi-speedometer2"></i>
        Dashboard Overview
    </h4>
    <p class="text-muted">Landlord Overview Dashboard</p>
</div>

<!-- ================= KPI TILES ================= -->
<div class="row g-3">

    <!-- Occupancy -->
    <div class="col-12 col-md-3">
        <a href="{% url 'unit_list' %}" class="text-decoration-none">
            <div class="stat-card shadow-sm">
                <div class="stat-value">{{ occupied_units }} / {{ total_units }}</div>
                <div class="stat-label">Occupied Units</div>
            </div>
        </a>
    </div>

    <!-- Expected Rent -->
    <div class="col-12 col-md-3">
        <div class="stat-card shadow-sm">
            <div class="stat-value">KES {{ total_expected|intcomma }}</div>
            <div class="stat-label">Expected Rent</div>
        </div>
    </div>

    <!-- Collected -->
    <div class="col-12 col-md-3">
        <div class="stat-card shadow-sm">
            <div class="stat-value text-success">KES {{ total_paid|intcomma }}</div>
            <div class="stat-label">Total Collected</div>
        </div>
    </div>

    <!-- Arrears -->
    <div class="col-12 col-md-3">
        <div class="stat-card shadow-sm">
            <div class="stat-value text-danger">KES {{ total_balance|intcomma }}</div>
            <div class="stat-label">Arrears</div>
        </div>
    </div>

</div>

<!-- ================= QUICK ACTIONS ================= -->
<div class="mt-4">
    <h6 class="mb-3 text-muted">Quick Actions</h6>

    <div class="row g-3">

        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_applications' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-person-check"></i>
                    <p class="mb-0">Tenant Applications</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'building_add' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-building-add"></i>
                    <p class="mb-0">Add Building</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'unit_add' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-door-open"></i>
                    <p class="mb-0">Add Unit</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_add' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-person-plus"></i>
                    <p class="mb-0">Add Tenant</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'caretaker_list' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-person-badge"></i>
                    <p class="mb-0">Caretakers</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'inspection_history' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-clipboard-check"></i>
                    <p class="mb-0">Inspection History</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'expense_list' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-receipt"></i>
                    <p class="mb-0">Expenses</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'landlord_finance' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-cash-coin"></i>
                    <p class="mb-0">Finance</p>
                </div>
            </a>
        </div>

    </div>
</div>

{% endblock %}