{% extends 'base.html.twig' %}
{% block title %}Nouvel entretien — {{ 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"><a href="{{ path('app_car_maintenance_index', {carId: car.id}) }}">Entretiens</a></li>
                <li class="breadcrumb-item active">Nouvel entretien</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0 fw-bold">
            <i class="fas fa-plus-circle text-primary me-2"></i>Nouvel entretien
        </h1>
        <p class="text-muted small mb-0 mt-1"><i class="fas fa-car me-1"></i>{{ car.getDisplayName() }}</p>
    </div>
    <a href="{{ path('app_car_maintenance_index', {carId: car.id}) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Retour
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0"><i class="fas fa-wrench me-2"></i>Informations de l'entretien</h5>
            </div>
            <div class="card-body p-4">
                {{ form_start(form, {attr: {
                    novalidate: 'novalidate',
                    id: 'maintenance-form',
                    'data-controller': 'maintenance-form',
                    'data-maintenance-form-insurance-label-value': 'Assurance',
                    'data-maintenance-form-ct-label-value': 'Contrôle technique'
                }}) }}

                {# ── Bannière erreurs globales ── #}
                {% set formErrors = form_errors(form) %}
                {% if formErrors is not empty %}
                <div class="alert alert-danger d-flex gap-3 align-items-start mb-4 py-3" role="alert">
                    <div class="bg-danger bg-opacity-25 rounded-2 p-2 flex-shrink-0">
                        <i class="fas fa-triangle-exclamation text-danger fs-5"></i>
                    </div>
                    <div>
                        <p class="fw-semibold mb-1">Veuillez corriger les erreurs suivantes :</p>
                        {{ formErrors|raw }}
                    </div>
                </div>
                {% endif %}

                {# Type d'entretien #}
                <div class="mb-3">
                    <label class="form-label fw-semibold required {% if form.typeLabel.vars.errors|length %}text-danger{% endif %}">
                        <i class="fas fa-tag {% if form.typeLabel.vars.errors|length %}text-danger{% else %}text-primary{% endif %} me-1"></i>Type d'entretien
                    </label>
                    {{ form_widget(form.typeLabel, {attr: {
                        class: 'form-select form-select-lg' ~ (form.typeLabel.vars.errors|length ? ' is-invalid' : ''),
                        'data-maintenance-form-target': 'typeSelect',
                        'data-action': 'change->maintenance-form#onTypeChange'
                    }}) }}
                    {{ form_errors(form.typeLabel) }}
                </div>

                {# Date & Coût & dates conditionnelles — grille #}
                <div class="row g-3 mb-3">

                    {# Date d'intervention #}
                    <div class="col-md-6">
                        <label class="form-label fw-semibold required {% if form.performedAt.vars.errors|length %}text-danger{% endif %}">
                            <i class="fas fa-calendar-day {% if form.performedAt.vars.errors|length %}text-danger{% else %}text-primary{% endif %} me-1"></i>{{ form_label(form.performedAt)|striptags }}
                        </label>
                        {{ form_widget(form.performedAt, {attr: {
                            class: 'form-control' ~ (form.performedAt.vars.errors|length ? ' is-invalid' : '')
                        }}) }}
                        {{ form_errors(form.performedAt) }}
                    </div>

                    {# Coût #}
                    <div class="col-md-6">
                        <label class="form-label fw-semibold required {% if form.cost.vars.errors|length %}text-danger{% endif %}">
                            <i class="fas fa-coins {% if form.cost.vars.errors|length %}text-danger{% else %}text-primary{% endif %} me-1"></i>{{ form_label(form.cost)|striptags }}
                        </label>
                        <div class="input-group {% if form.cost.vars.errors|length %}is-invalid{% endif %}">
                            {{ form_widget(form.cost, {attr: {
                                class: 'form-control' ~ (form.cost.vars.errors|length ? ' is-invalid' : '')
                            }}) }}
                            <span class="input-group-text {% if form.cost.vars.errors|length %}border-danger text-danger{% endif %}">MAD</span>
                        </div>
                        {{ form_errors(form.cost) }}
                    </div>

                    {# Date expiration Assurance (conditionnelle) #}
                    <div class="col-md-6"
                         data-maintenance-form-target="insuranceSection"
                         style="display:none">
                        <label class="form-label fw-semibold required {% if form.expirationDate.vars.errors|length %}text-danger{% endif %}">
                            <i class="fas fa-shield-alt text-danger me-1"></i>Date d'expiration assurance
                        </label>
                        {{ form_widget(form.expirationDate, {attr: {
                            class: 'form-control border-danger' ~ (form.expirationDate.vars.errors|length ? ' is-invalid' : ''),
                            'data-maintenance-form-target': 'insuranceDateInput'
                        }}) }}
                        {{ form_errors(form.expirationDate) }}
                        <div class="form-text text-danger small">
                            <i class="fas fa-sync-alt me-1"></i>Met à jour la date d'expiration du véhicule
                        </div>
                    </div>

                    {# Date prochain CT (conditionnelle) #}
                    <div class="col-md-6"
                         data-maintenance-form-target="ctSection"
                         style="display:none">
                        <label class="form-label fw-semibold required {% if form.technicalControlDate.vars.errors|length %}text-danger{% endif %}">
                            <i class="fas fa-clipboard-check text-info me-1"></i>Date du prochain CT
                        </label>
                        {{ form_widget(form.technicalControlDate, {attr: {
                            class: 'form-control border-info' ~ (form.technicalControlDate.vars.errors|length ? ' is-invalid' : ''),
                            'data-maintenance-form-target': 'ctDateInput'
                        }}) }}
                        {{ form_errors(form.technicalControlDate) }}
                        <div class="form-text text-info small">
                            <i class="fas fa-sync-alt me-1"></i>Met à jour le prochain CT du véhicule
                        </div>
                    </div>

                </div>

                {# Kilométrage #}
                <div class="mb-3">
                    <label class="form-label fw-semibold {% if form.mileageAtService.vars.errors|length %}text-danger{% endif %}">
                        <i class="fas fa-tachometer-alt {% if form.mileageAtService.vars.errors|length %}text-danger{% else %}text-primary{% endif %} me-1"></i>{{ form_label(form.mileageAtService)|striptags }}
                    </label>
                    <div class="input-group">
                        {{ form_widget(form.mileageAtService, {attr: {
                            class: 'form-control' ~ (form.mileageAtService.vars.errors|length ? ' is-invalid' : ''),
                            placeholder: 'Ex : 45 000'
                        }}) }}
                        <span class="input-group-text {% if form.mileageAtService.vars.errors|length %}border-danger text-danger{% endif %}">km</span>
                    </div>
                    {{ form_errors(form.mileageAtService) }}
                </div>

                {# Description #}
                <div class="mb-4">
                    <label class="form-label fw-semibold {% if form.description.vars.errors|length %}text-danger{% endif %}">
                        <i class="fas fa-comment-alt {% if form.description.vars.errors|length %}text-danger{% else %}text-primary{% endif %} me-1"></i>{{ form_label(form.description)|striptags }}
                    </label>
                    {{ form_widget(form.description, {attr: {
                        class: 'form-control' ~ (form.description.vars.errors|length ? ' is-invalid' : ''),
                        rows: 3,
                        placeholder: 'Détails optionnels, références de pièces, prestataire…'
                    }}) }}
                    {{ form_errors(form.description) }}
                </div>

                {# Boutons #}
                <div class="d-flex gap-2 pt-2 border-top">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </button>
                    <a href="{{ path('app_car_maintenance_index', {carId: car.id}) }}" class="btn btn-outline-secondary">
                        Annuler
                    </a>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>

<style>
@keyframes mf-fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.required::after { content: ' *'; color: var(--bs-danger); }
</style>
{% endblock %}