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

{% block content %}

<div class="container page-container">

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

    <!-- ================= KPI SUMMARY ================= -->
    <div class="row g-3 mb-4">

        <div class="col-6 col-md-3">
            <div class="stat-card shadow-sm">
                <div class="stat-value">{{ occupied_units }} / {{ total_units }}</div>
                <div class="stat-label">Occupied Units</div>
            </div>
        </div>

        <div class="col-6 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>

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

        <div class="col-6 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>

    <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_list' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-building"></i>
                    <p class="mb-0">Buildings</p>
                </div>
            </a>
        </div>

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

        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_list' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-people"></i>
                    <p class="mb-0">Tenants</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 'complaint_list' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-chat-left-text"></i>
                    <p class="mb-0">Complaints</p>
                </div>
            </a>
        </div>

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

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

        <div class="col-6 col-md-3">
            <a href="{% url 'send_announcement' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-megaphone"></i>
                    <p class="mb-0">Announcements</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>

</div>

{% endblock %}