{% extends 'base.html.twig' %}
{% block title %}Entretiens — {{ car.getDisplayName() }}{% endblock %}

{% block content %}
{# ── En-tête ── #}
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small">
                <li class="breadcrumb-item"><a href="{{ path('app_car_index') }}">Véhicules</a></li>
                <li class="breadcrumb-item"><a href="{{ path('app_car_edit', {id: car.id}) }}">{{ car.getDisplayName() }}</a></li>
                <li class="breadcrumb-item active">Entretiens</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0 fw-bold">
            <i class="fas fa-wrench text-primary me-2"></i>Entretiens &amp; Charges
        </h1>
    </div>
    <a href="{{ path('app_car_maintenance_new', {carId: car.id}) }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>Nouvel entretien
    </a>
</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 %}
{% for msg in app.flashes('error') %}
    <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2">
        <i class="fas fa-exclamation-circle"></i><span>{{ msg }}</span>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
{% endfor %}

{# ── KPI cards ── #}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-lg-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-primary bg-opacity-10 p-3 text-primary fs-4">
                    <i class="fas fa-list-check"></i>
                </div>
                <div>
                    <p class="text-muted small mb-0">Nb. entretiens</p>
                    <h4 class="mb-0 fw-bold">{{ maintenances|length }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-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-success bg-opacity-10 p-3 text-success fs-4">
                    <i class="fas fa-coins"></i>
                </div>
                <div>
                    <p class="text-muted small mb-0">Coût total</p>
                    <h4 class="mb-0 fw-bold">{{ totalCost|number_format(2, '.', ' ') }} <small class="fs-6 text-muted">MAD</small></h4>
                </div>
            </div>
        </div>
    </div>
    {% if car.insuranceExpirationDate %}
    {% set insuranceDays = ((car.insuranceExpirationDate.timestamp - ('now'|date('U')))/86400)|round %}
    <div class="col-sm-6 col-lg-3">
        <div class="card border-0 shadow-sm h-100 {{ insuranceDays < 30 ? 'border border-danger' : '' }}">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-3 {{ insuranceDays < 30 ? 'bg-danger' : 'bg-warning' }} bg-opacity-10 p-3 {{ insuranceDays < 30 ? 'text-danger' : 'text-warning' }} fs-4">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div>
                    <p class="text-muted small mb-0">Assurance expire</p>
                    <h5 class="mb-0 fw-bold {{ insuranceDays < 30 ? 'text-danger' : '' }}">
                        {{ car.insuranceExpirationDate|date('d/m/Y') }}
                    </h5>
                    <small class="{{ insuranceDays < 0 ? 'text-danger fw-bold' : (insuranceDays < 30 ? 'text-warning' : 'text-muted') }}">
                        {% if insuranceDays < 0 %}Expirée !
                        {% elseif insuranceDays < 30 %}Dans {{ insuranceDays }} jours
                        {% else %}Dans {{ (insuranceDays / 30)|round }} mois{% endif %}
                    </small>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% if car.nextTechnicalControlAt %}
    {% set ctDays = ((car.nextTechnicalControlAt.timestamp - ('now'|date('U')))/86400)|round %}
    <div class="col-sm-6 col-lg-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 text-info fs-4">
                    <i class="fas fa-clipboard-check"></i>
                </div>
                <div>
                    <p class="text-muted small mb-0">Prochain CT</p>
                    <h5 class="mb-0 fw-bold">{{ car.nextTechnicalControlAt|date('d/m/Y') }}</h5>
                    <small class="text-muted">
                        {% if ctDays < 0 %}Dépassé !{% else %}Dans {{ (ctDays / 30)|round }} mois{% endif %}
                    </small>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{# ── Répartition par type ── #}
{% if statsByType|length > 0 %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent fw-semibold border-0 pb-0">
        <i class="fas fa-chart-pie me-2 text-primary"></i>Répartition par type
    </div>
    <div class="card-body pt-2">
        <div class="row g-2">
            {% for stat in statsByType %}
            <div class="col-6 col-md-3">
                <div class="d-flex justify-content-between align-items-center p-2 rounded-2 bg-light">
                    <span class="small fw-semibold text-truncate me-2">{{ stat.typeLabel }}</span>
                    <span class="badge bg-primary rounded-pill">{{ stat.total|number_format(0, '.', ' ') }} MAD</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{# ── Table historique ── #}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-transparent d-flex flex-wrap gap-2 align-items-center justify-content-between border-0">
        <span class="fw-semibold"><i class="fas fa-history me-2 text-primary"></i>Historique des interventions</span>
        <div class="input-group input-group-sm" style="max-width:260px">
            <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
            <input type="text" id="maint-search" class="form-control border-start-0" placeholder="Filtrer…">
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="maint-table">
            <thead class="table-light text-nowrap small text-uppercase text-muted">
                <tr>
                    <th>Type</th>
                    <th>Date</th>
                    <th>Expiration</th>
                    <th>Coût</th>
                    <th>Kilométrage</th>
                    <th>Description</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for m in maintenances %}
                {% set typeLower = m.typeLabel|lower %}
                <tr class="maint-row">
                    <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>
                    <td class="text-nowrap">{{ m.performedAt|date('d/m/Y') }}</td>
                    <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') }}">
                                <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') }}">
                                <i class="fas fa-clipboard-check me-1"></i>{{ m.technicalControlDate|date('d/m/Y') }}
                            </span>
                        {% else %}
                            <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td class="fw-semibold text-nowrap">{{ m.cost|number_format(2, '.', ' ') }} <span class="text-muted fw-normal small">MAD</span></td>
                    <td class="text-muted small">{{ m.mileageAtService ? m.mileageAtService|number_format(0, '.', ' ') ~ ' km' : '—' }}</td>
                    <td style="max-width:200px">
                        <span class="d-block text-muted small text-truncate" title="{{ m.description }}">{{ m.description ?? '—' }}</span>
                    </td>
                    <td class="text-end text-nowrap">
                        <a href="{{ path('app_car_maintenance_edit', {carId: 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: 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>
                {% else %}
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <i class="fas fa-wrench fa-3x mb-3 d-block text-muted opacity-25"></i>
                        <p class="text-muted mb-3">Aucun entretien enregistré pour ce véhicule.</p>
                        <a href="{{ path('app_car_maintenance_new', {carId: car.id}) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>Ajouter le premier entretien
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    const input = document.getElementById('maint-search');
    if (!input) return;
    input.addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('#maint-table .maint-row').forEach(function (row) {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
})();
</script>
{% endblock %}