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

{% block content %}

<div class="container page-container">

    <div class="page-header mb-4">
        <h4><i class="bi bi-speedometer2"></i> Tenant Dashboard</h4>
        <p class="text-muted">Manage your rent, requests, and account activity</p>
    </div>

    <!-- ================= CURRENT RENT CARD ================= -->
    <div class="row mb-4">

        <div class="col-md-6">

            <div class="card shadow-sm border-0">

                <div class="card-body">

                    <h6 class="mb-3">
                        <i class="bi bi-cash-coin"></i> Current Rent Status
                    </h6>

                    {% if current_invoice %}

                        <p class="mb-1">
                            <strong>Unit:</strong> {{ current_invoice.unit.unit_number }}
                        </p>

                        <p class="mb-1">
                            <strong>Amount Due:</strong>
                            <span class="fw-bold text-danger">
                                KES {{ current_invoice.balance|intcomma }}
                            </span>
                        </p>

                        <p class="mb-1">
                            <strong>Due Date:</strong>
                            {{ current_invoice.due_date|date:"M d, Y" }}
                        </p>

                        <p class="mb-2">
                            <strong>Status:</strong>

                            <span class="badge
                                {% if current_invoice.status == 'paid' %}bg-success
                                {% elif current_invoice.status == 'partial' %}bg-warning text-dark
                                {% elif current_invoice.status == 'overdue' %}bg-danger
                                {% else %}bg-secondary{% endif %}">
                                {{ current_invoice.status|title }}
                            </span>

                        </p>

                        {% if current_invoice.status == 'overdue' %}
                            <div class="alert alert-danger py-2">
                                This payment is overdue. Please pay immediately.
                            </div>
                        {% elif current_invoice.status == 'pending' %}
                            <div class="alert alert-warning py-2">
                                Upcoming rent due soon.
                            </div>
                        {% endif %}

                        {% if current_invoice.balance > 0 %}
                            <a href="{% url 'initiate_payment' current_invoice.id %}"
                               class="btn btn-success btn-sm mt-2">
                                Pay Now via M-Pesa
                            </a>
                        {% else %}
                            <span class="text-success fw-semibold">Fully Paid</span>
                        {% endif %}

                    {% else %}
                        <p class="text-muted">No active rent invoice found.</p>
                    {% endif %}

                </div>

            </div>

        </div>

    </div>

    <!-- ================= ACTION GRID ================= -->
    <div class="row g-3">

        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_finance' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-wallet2"></i>
                    <p>Payments</p>
                </div>
            </a>
        </div>

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

        <div class="col-6 col-md-3">
            <a href="{% url 'profile' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-person"></i>
                    <p>My Profile</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'complaint' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-exclamation-circle"></i>
                    <p>Report Issue</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-list-check"></i>
                    <p>My Complaints</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'repair' %}" class="text-decoration-none">
                <div class="dashboard-card text-center">
                    <i class="bi bi-wrench"></i>
                    <p>Request Repair</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>Repairs</p>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_vacate_self' %}" class="text-decoration-none">
                <div class="dashboard-card text-center border border-danger">
                    <i class="bi bi-box-arrow-right text-danger"></i>
                    <p>Request Vacate</p>
                </div>
            </a>
        </div>

        {% if user.tenantprofile and not user.tenantprofile.id_image %}
        <div class="col-6 col-md-3">
            <a href="{% url 'tenant_onboarding' %}" class="text-decoration-none">
                <div class="dashboard-card text-center border border-warning">
                    <i class="bi bi-person-check text-warning"></i>
                    <p>Complete Profile</p>
                </div>
            </a>
        </div>
        {% endif %}

    </div>

</div>

{% endblock %}