{% extends 'base.html.twig' %}

{% block title %}Tableau de bord - RentAuto{% endblock %}

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

    {# ── En-tête ─────────────────────────────────────────────────────────── #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-tachometer-alt text-primary me-2"></i>Tableau de bord
            </h1>
            <p class="text-muted small mb-0">
                {{ today|date('d/m/Y') }} — vue d'ensemble de l'agence
            </p>
        </div>
        <a href="{{ path('app_contract_new') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>Nouveau contrat
        </a>
    </div>

    {# ── KPI Cards ───────────────────────────────────────────────────────── #}
    <div class="row g-3 mb-4">

        {# Contrats actifs #}
        {% set activeCount = contractsByStatus['En cours'] ?? 0 %}
        <div class="col-6 col-xl-3">
            <a href="{{ path('app_contract_index') }}?status=En+cours" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="rounded-3 bg-primary bg-opacity-10 p-3 flex-shrink-0">
                            <i class="fas fa-file-contract fa-lg text-primary"></i>
                        </div>
                        <div>
                            <div class="fs-2 fw-bold text-primary lh-1">{{ activeCount }}</div>
                            <div class="small text-muted mt-1">Contrats actifs</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {# Contrats en retard #}
        {% set overdueCount = contractsByStatus['En retard'] ?? 0 %}
        <div class="col-6 col-xl-3">
            <a href="{{ path('app_contract_index') }}?status=En+retard" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 {% if overdueCount > 0 %}border-start border-warning border-4{% endif %}">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="rounded-3 bg-warning bg-opacity-10 p-3 flex-shrink-0">
                            <i class="fas fa-exclamation-triangle fa-lg text-warning"></i>
                        </div>
                        <div>
                            <div class="fs-2 fw-bold text-warning lh-1">{{ overdueCount }}</div>
                            <div class="small text-muted mt-1">En retard</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {# Véhicules disponibles #}
        {% set availableCount = carsByStatus['Disponible'] ?? 0 %}
        <div class="col-6 col-xl-3">
            <a href="{{ path('app_car_index') }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="rounded-3 bg-success bg-opacity-10 p-3 flex-shrink-0">
                            <i class="fas fa-car fa-lg text-success"></i>
                        </div>
                        <div>
                            <div class="fs-2 fw-bold text-success lh-1">{{ availableCount }}</div>
                            <div class="small text-muted mt-1">Véhicules dispo</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {# Revenus du mois #}
        <div class="col-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="rounded-3 bg-info bg-opacity-10 p-3 flex-shrink-0">
                        <i class="fas fa-coins fa-lg text-info"></i>
                    </div>
                    <div>
                        <div class="fs-4 fw-bold text-info lh-1">
                            {{ revenueThisMonth|number_format(0, '.', ' ') }}
                            <span class="small fw-normal">MAD</span>
                        </div>
                        <div class="small text-muted mt-1">
                            Revenus ce mois
                            {% if revenueEvolution is not null %}
                                <span class="ms-1 badge {% if revenueEvolution >= 0 %}bg-success{% else %}bg-danger{% endif %} rounded-pill">
                                    <i class="fas fa-arrow-{% if revenueEvolution >= 0 %}up{% else %}down{% endif %} me-1"></i>{{ revenueEvolution|abs }}%
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {# ── Alertes + Statut flotte ─────────────────────────────────────────── #}
    <div class="row g-3 mb-4">

        {# Retards #}
        {% if overdueContracts|length > 0 %}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm border-start border-warning border-4 h-100">
                <div class="card-header bg-warning bg-opacity-10 border-0 py-2 px-3">
                    <span class="fw-semibold small" style="color:#856404">
                        <i class="fas fa-clock me-1"></i>Retours en retard ({{ overdueContracts|length }})
                    </span>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for c in overdueContracts %}
                        <li class="list-group-item px-3 py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <a href="{{ path('app_contract_edit', {id: c.id}) }}" class="fw-semibold text-decoration-none small">
                                        {{ c.contractNumber }}
                                    </a>
                                    <div class="text-muted" style="font-size:.75rem">
                                        {{ c.customer.firstName }} {{ c.customer.lastName }} — {{ c.car.brand }} {{ c.car.model }}
                                    </div>
                                </div>
                                <span class="badge bg-warning text-dark rounded-pill">{{ c.endDate|date('d/m') }}</span>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {# Retours prévus aujourd'hui #}
        {% if dueToday|length > 0 %}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm border-start border-warning border-4 h-100">
                <div class="card-header bg-warning bg-opacity-10 border-0 py-2 px-3">
                    <span class="fw-semibold small" style="color:#856404">
                        <i class="fas fa-flag-checkered me-1"></i>Retours prévus aujourd'hui ({{ dueToday|length }})
                    </span>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for c in dueToday %}
                        <li class="list-group-item px-3 py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <a href="{{ path('app_contract_return', {id: c.id}) }}" class="fw-semibold text-decoration-none small">
                                        {{ c.contractNumber }}
                                    </a>
                                    <div class="text-muted" style="font-size:.75rem">
                                        {{ c.customer.firstName }} {{ c.customer.lastName }} — {{ c.car.brand }} {{ c.car.model }}
                                    </div>
                                </div>
                                <a href="{{ path('app_contract_return', {id: c.id}) }}" class="btn btn-sm btn-warning py-0 px-2">
                                    <i class="fas fa-flag-checkered"></i>
                                </a>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {# Assurances expirant bientôt #}
        {% if insuranceExpiring|length > 0 %}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm border-start border-danger border-4 h-100">
                <div class="card-header bg-danger bg-opacity-10 border-0 py-2 px-3">
                    <span class="fw-semibold text-danger small">
                        <i class="fas fa-shield-alt me-1"></i>Assurances expirant &lt; 30j ({{ insuranceExpiring|length }})
                    </span>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for car in insuranceExpiring %}
                        <li class="list-group-item px-3 py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-semibold small">{{ car.brand }} {{ car.model }}</span>
                                    <div class="text-muted" style="font-size:.75rem">{{ car.registrationNumber }}</div>
                                </div>
                                <span class="badge bg-danger rounded-pill">{{ car.insuranceExpirationDate|date('d/m/Y') }}</span>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {# Statut de la flotte — toujours visible #}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm border-start border-success border-4 h-100">
                <div class="card-header bg-success bg-opacity-10 border-0 py-2 px-3">
                    <span class="fw-semibold text-success small">
                        <i class="fas fa-car-side me-1"></i>Statut de la flotte
                    </span>
                </div>
                <div class="card-body">
                    {% set fleetStatuses = [
                        { key: 'Disponible',  label: 'Disponibles',   color: 'success'   },
                        { key: 'Louée',       label: 'Louées',         color: 'primary'   },
                        { key: 'Réservée',    label: 'Réservées',      color: 'info'      },
                        { key: 'Maintenance', label: 'En maintenance', color: 'warning'   },
                        { key: 'Retirée',     label: 'Retirées',       color: 'secondary' },
                    ] %}
                    {% set totalFleet = carsByStatus|reduce((carry, v) => carry + v, 0) %}
                    {% for s in fleetStatuses %}
                        {% set cnt = carsByStatus[s.key] ?? 0 %}
                        {% if cnt > 0 %}
                        <div class="mb-2">
                            <div class="d-flex justify-content-between small mb-1">
                                <span class="text-muted">{{ s.label }}</span>
                                <span class="fw-semibold">{{ cnt }}</span>
                            </div>
                            <div class="progress" style="height:6px">
                                <div class="progress-bar bg-{{ s.color }}"
                                     style="width: {{ totalFleet > 0 ? (cnt / totalFleet * 100)|round : 0 }}%"></div>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% if totalFleet == 0 %}
                        <p class="text-muted small mb-0">Aucun véhicule enregistré.</p>
                    {% else %}
                    <div class="mt-3 pt-2 border-top d-flex justify-content-between small text-muted">
                        <span>Total flotte</span>
                        <span class="fw-semibold">{{ totalFleet }} véhicules</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>


    </div>

    {# ── Graphique revenus + maintenance ─────────────────────────────────── #}
    <div class="row g-3">

        {# Revenus 6 derniers mois #}
        <div class="col-12 col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-3 pb-0 px-3">
                    <h6 class="mb-0 fw-semibold">
                        <i class="fas fa-chart-bar text-muted me-2"></i>Revenus — 6 derniers mois (MAD)
                    </h6>
                </div>
                <div class="card-body">
                    {% set monthNames = ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'] %}
                    {% if revenueByMonth is empty %}
                        <p class="text-muted small mb-0">Aucune donnée disponible.</p>
                    {% else %}
                    {% set maxRev = 0 %}
                    {% for row in revenueByMonth %}
                        {% if row.total|number_format(2,'.','') > maxRev %}
                            {% set maxRev = row.total|number_format(2,'.','') %}
                        {% endif %}
                    {% endfor %}
                    <div class="d-flex align-items-end gap-2" style="height:160px">
                        {% for row in revenueByMonth %}
                        {% set pct = maxRev > 0 ? ((row.total / maxRev) * 100)|round : 0 %}
                        <div class="d-flex flex-column align-items-center flex-fill">
                            <span class="text-muted mb-1" style="font-size:.65rem; white-space:nowrap">
                                {{ row.total|number_format(0, '.', ' ') }}
                            </span>
                            <div class="bg-primary bg-opacity-75 rounded-top w-100"
                                 title="{{ monthNames[row.mo - 1] }} {{ row.yr }} : {{ row.total|number_format(0,'.','') }} MAD"
                                 style="height:{{ pct > 0 ? pct : 2 }}%; min-height:4px; transition:height .3s"></div>
                            <span class="text-muted mt-1 text-center" style="font-size:.7rem; line-height:1.2">
                                {{ monthNames[row.mo - 1] }}<br>{{ row.yr }}
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Véhicules en maintenance #}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-3 pb-0 px-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-semibold">
                        <i class="fas fa-wrench text-muted me-2"></i>En maintenance ({{ underMaintenance|length }})
                    </h6>
                    <a href="{{ path('app_maintenance_list') }}" class="btn btn-sm btn-outline-secondary py-0">Gérer</a>
                </div>
                <div class="card-body p-0">
                    {% if underMaintenance is empty %}
                        <p class="text-muted small p-3 mb-0">Aucun véhicule en maintenance.</p>
                    {% else %}
                    <ul class="list-group list-group-flush">
                        {% for car in underMaintenance %}
                        <li class="list-group-item px-3 py-2 d-flex justify-content-between align-items-center">
                            <div>
                                <span class="fw-semibold small">{{ car.brand }} {{ car.model }}</span>
                                <div class="text-muted" style="font-size:.75rem">{{ car.registrationNumber }}</div>
                            </div>
                            <span class="badge bg-warning text-dark">Maintenance</span>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </div>
        </div>

    </div>

</div>
{% endblock %}