{% extends 'base.html.twig' %}
{% block title %}Tous les entretiens{% endblock %}

{% set monthNames = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] %}
{% set monthLabel = monthNames[currentMonth - 1] ~ ' ' ~ currentYear %}

{% block content %}
{# ── En-tête ── #}
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-0 fw-bold">
            <i class="fas fa-wrench text-primary me-2"></i>Tous les entretiens
        </h1>
        <p class="text-muted small mb-0 mt-1">Vue globale — {{ monthLabel }}</p>
    </div>
</div>

{# ── Flashs ── #}
{% for msg in app.flashes('success') %}
    <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2">
        <i class="fas fa-check-circle"></i><span>{{ msg }}</span>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
{% endfor %}

{# ── Contrôleur Stimulus ── #}
<div data-controller="maintenance-list"
     data-maintenance-list-month-value="{{ currentMonth }}"
     data-maintenance-list-year-value="{{ currentYear }}">

    {# ── Barre filtres ── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body py-3">
            <div class="row g-3 align-items-end">

                {# Navigation mois #}
                <div class="col-auto">
                    <label class="form-label small text-muted fw-semibold mb-1">Période</label>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                data-action="click->maintenance-list#prevMonth" title="Mois précédent">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <span class="fw-semibold text-nowrap px-2" style="min-width:130px;text-align:center">
                            {{ monthLabel }}
                        </span>
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                data-action="click->maintenance-list#nextMonth" title="Mois suivant">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                {# Filtre type (serveur) #}
                <div class="col-sm-4 col-lg-3">
                    <label class="form-label small text-muted fw-semibold mb-1">Type d'entretien</label>
                    <select class="form-select form-select-sm"
                            data-maintenance-list-target="typeSelect"
                            data-action="change->maintenance-list#onTypeFilter">
                        <option value="" {% if currentType == '' %}selected{% endif %}>— Tous les types —</option>
                        {% for type in types %}
                            <option value="{{ type.label }}" {% if currentType == type.label %}selected{% endif %}>
                                {{ type.label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                {# Recherche texte (client) #}
                <div class="col-sm-4 col-lg-3">
                    <label class="form-label small text-muted fw-semibold mb-1">Recherche</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fas fa-search text-muted"></i>
                        </span>
                        <input type="text"
                               class="form-control border-start-0"
                               placeholder="Voiture, type, description…"
                               data-maintenance-list-target="searchInput"
                               data-action="input->maintenance-list#onSearch">
                    </div>
                </div>

                {# Résumé #}
                <div class="col-sm-auto ms-lg-auto">
                    <div class="d-flex gap-3">
                        <div class="text-center">
                            <div class="fw-bold fs-5 text-primary">{{ maintenances|length }}</div>
                            <div class="text-muted small">entretiens</div>
                        </div>
                        <div class="vr"></div>
                        <div class="text-center">
                            <div class="fw-bold fs-5 text-success">{{ totalCost|number_format(2, '.', ' ') }}</div>
                            <div class="text-muted small">MAD total</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {# ── Table ── #}
    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-nowrap small text-uppercase text-muted">
                    <tr>
                        <th>Véhicule</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th>Échéance</th>
                        <th>Coût</th>
                        <th>Km</th>
                        <th>Description</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for m in maintenances %}
                    {% if m.car is not null %}
                    {% set typeLower = m.typeLabel|lower %}
                    <tr class="maint-row" data-maintenance-list-target="row">
                        {# Voiture #}
                        <td class="text-nowrap">
                            <a href="{{ path('app_car_maintenance_index', {carId: m.car.id}) }}"
                               class="text-decoration-none fw-semibold text-dark">
                                <i class="fas fa-car text-primary me-1 small"></i>
                                {{ m.car.getDisplayName() }}
                            </a>
                        </td>

                        {# Type badge #}
                        <td>
                            {% if typeLower == 'assurance' %}
                                <span class="badge rounded-pill bg-danger"><i class="fas fa-shield-alt me-1"></i>{{ m.typeLabel }}</span>
                            {% elseif typeLower == 'vignette' %}
                                <span class="badge rounded-pill bg-warning text-dark"><i class="fas fa-tag me-1"></i>{{ m.typeLabel }}</span>
                            {% elseif typeLower in ['vidange', 'révision générale'] %}
                                <span class="badge rounded-pill bg-success"><i class="fas fa-oil-can me-1"></i>{{ m.typeLabel }}</span>
                            {% elseif typeLower == 'contrôle technique' %}
                                <span class="badge rounded-pill bg-info text-dark"><i class="fas fa-clipboard-check me-1"></i>{{ m.typeLabel }}</span>
                            {% elseif typeLower == 'pneumatiques' %}
                                <span class="badge rounded-pill bg-secondary"><i class="fas fa-circle me-1"></i>{{ m.typeLabel }}</span>
                            {% elseif typeLower in ['lavage / nettoyage', 'lavage'] %}
                                <span class="badge rounded-pill" style="background:#17a2b8"><i class="fas fa-spray-can me-1"></i>{{ m.typeLabel }}</span>
                            {% else %}
                                <span class="badge rounded-pill bg-primary"><i class="fas fa-wrench me-1"></i>{{ m.typeLabel }}</span>
                            {% endif %}
                        </td>

                        {# Date intervention #}
                        <td class="text-nowrap text-muted small">{{ m.performedAt|date('d/m/Y') }}</td>

                        {# Échéance #}
                        <td class="text-nowrap">
                            {% if m.expirationDate %}
                                {% set expDays = ((m.expirationDate.timestamp - ('now'|date('U')))/86400)|round %}
                                <span class="{{ expDays < 0 ? 'text-danger fw-bold' : (expDays < 30 ? 'text-warning fw-semibold' : 'text-muted') }} small">
                                    <i class="fas fa-shield-alt me-1"></i>{{ m.expirationDate|date('d/m/Y') }}
                                </span>
                            {% elseif m.technicalControlDate %}
                                {% set ctDays = ((m.technicalControlDate.timestamp - ('now'|date('U')))/86400)|round %}
                                <span class="{{ ctDays < 0 ? 'text-danger fw-bold' : (ctDays < 30 ? 'text-warning fw-semibold' : 'text-muted') }} small">
                                    <i class="fas fa-clipboard-check me-1"></i>{{ m.technicalControlDate|date('d/m/Y') }}
                                </span>
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </td>

                        {# Coût #}
                        <td class="fw-semibold text-nowrap">
                            {{ m.cost|number_format(2, '.', ' ') }}
                            <span class="text-muted fw-normal small">MAD</span>
                        </td>

                        {# Km #}
                        <td class="text-muted small">{{ m.mileageAtService ? m.mileageAtService|number_format(0, '.', ' ') ~ ' km' : '—' }}</td>

                        {# Description #}
                        <td style="max-width:180px">
                            <span class="d-block text-muted small text-truncate" title="{{ m.description }}">
                                {{ m.description ?? '—' }}
                            </span>
                        </td>

                        {# Actions #}
                        <td class="text-end text-nowrap">
                            <a href="{{ path('app_car_maintenance_edit', {carId: m.car.id, id: m.id}) }}"
                               class="btn btn-sm btn-outline-primary" title="Modifier">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ path('app_car_maintenance_delete', {carId: m.car.id, id: m.id}) }}"
                                  method="post" class="d-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete_maintenance_' ~ m.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer"
                                        onclick="return confirm('Supprimer cet entretien ?')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endif %}
                    {% endfor %}

                    <tr data-maintenance-list-target="emptyState" style="display:none">
                        <td colspan="8" class="text-center py-4 text-muted">
                            <i class="fas fa-wrench me-2 opacity-50"></i>Aucun entretien enregistré pour {{ monthLabel }}.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>{# /data-controller #}
{% endblock %}