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

{% block title %}Modifier un Véhicule - RentAuto{% endblock %}

{% block content %}
<div data-controller="car-edit"
     data-car-edit-endpoint-value="/api/cars"
     data-car-edit-car-id-value="{{ carId }}">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 fw-bold"><i class="fas fa-edit text-primary me-2"></i>Modifier le Véhicule</h1>
            <p class="text-muted small mb-0" data-car-edit-target="subtitle">Chargement…</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('app_car_maintenance_index', {carId: carId}) }}" class="btn btn-outline-warning">
                <i class="fas fa-wrench me-2"></i>Entretiens
            </a>
            <a href="{{ path('app_car_index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Retour
            </a>
        </div>
    </div>

    <!-- Loading -->
    <div data-car-edit-target="loader" class="text-center py-5">
        <div class="spinner-border text-primary" role="status"></div>
        <p class="text-muted mt-2">Chargement des données…</p>
    </div>

    <!-- Form -->
    <div data-car-edit-target="formWrapper" class="d-none">
        <form id="car-edit-form" data-action="submit->car-edit#submit">
            <div class="row g-4">

                <!-- COLONNE GAUCHE -->
                <div class="col-lg-8">

                    <!-- Section Identification -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white border-bottom py-3">
                            <h6 class="mb-0 fw-semibold">
                                <span class="badge bg-primary me-2">1</span>
                                <i class="fas fa-id-card me-2 text-primary"></i>Identification
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">

                                <!-- Ligne 1 : immatriculations + année + couleur -->
                                <div class="col-md-3">
                                    <label for="registrationNumber" class="form-label fw-semibold">
                                        Immatriculation <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-hashtag text-muted"></i></span>
                                        <input id="registrationNumber" name="registrationNumber" type="text"
                                               placeholder="Ex: AB-123-CD" required
                                               class="form-control text-uppercase" />
                                    </div>
                                    <div data-car-edit-target="registrationNumberError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-3">
                                    <label for="wwRegistrationNumber" class="form-label fw-semibold">
                                        Immat. WW <span class="text-muted small fw-normal">(provisoire)</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-warning text-dark"><i class="fas fa-clock"></i></span>
                                        <input id="wwRegistrationNumber" name="wwRegistrationNumber" type="text"
                                               placeholder="Ex: WW-456-AB"
                                               class="form-control text-uppercase" />
                                    </div>
                                    <div data-car-edit-target="wwRegistrationNumberError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-3">
                                    <label for="year" class="form-label fw-semibold">
                                        Année <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-calendar-alt text-muted"></i></span>
                                        <input id="year" name="year" type="number"
                                               placeholder="Ex: 2022" min="1950" max="2100" required
                                               class="form-control" />
                                    </div>
                                    <div data-car-edit-target="yearError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-3">
                                    <label for="color" class="form-label fw-semibold">Couleur</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-palette text-muted"></i></span>
                                        <input id="color" name="color" type="text"
                                               placeholder="Ex: Blanc" class="form-control" />
                                    </div>
                                    <div data-car-edit-target="colorError" class="invalid-feedback d-block"></div>
                                </div>

                                <!-- Ligne 2 : marque + modèle -->
                                <div class="col-md-6">
                                    <label for="brandSearch" class="form-label fw-semibold">
                                        Marque <span class="text-danger">*</span>
                                    </label>
                                    <div class="position-relative">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light"><i class="fas fa-car text-muted"></i></span>
                                            <input id="brandSearch" type="text"
                                                   placeholder="Rechercher une marque..."
                                                   autocomplete="off"
                                                   data-car-edit-target="brandSearch"
                                                   data-action="input->car-edit#onBrandInput focus->car-edit#onBrandFocus blur->car-edit#onBrandBlur"
                                                   class="form-control" />
                                        </div>
                                        <input type="hidden" name="brand" data-car-edit-target="brandHidden" />
                                        <ul data-car-edit-target="brandDropdown"
                                            class="list-group position-absolute w-100 shadow d-none"
                                            style="z-index:1050; max-height:220px; overflow-y:auto; top:100%"></ul>
                                    </div>
                                    <div data-car-edit-target="brandError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-6">
                                    <label for="modelSearch" class="form-label fw-semibold">
                                        Modèle <span class="text-danger">*</span>
                                    </label>
                                    <div class="position-relative">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light"><i class="fas fa-car-side text-muted"></i></span>
                                            <input id="modelSearch" type="text"
                                                   placeholder="Sélectionnez ou saisissez un modèle..."
                                                   autocomplete="off"
                                                   data-car-edit-target="modelSearch"
                                                   data-action="input->car-edit#onModelInput focus->car-edit#onModelFocus blur->car-edit#onModelBlur"
                                                   class="form-control" />
                                        </div>
                                        <input type="hidden" name="model" data-car-edit-target="modelHidden" />
                                        <ul data-car-edit-target="modelDropdown"
                                            class="list-group position-absolute w-100 shadow d-none"
                                            style="z-index:1050; max-height:220px; overflow-y:auto; top:100%"></ul>
                                    </div>
                                    <div data-car-edit-target="modelError" class="invalid-feedback d-block"></div>
                                </div>

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

                    <!-- Section Caractéristiques -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white border-bottom py-3">
                            <h6 class="mb-0 fw-semibold">
                                <span class="badge bg-primary me-2">2</span>
                                <i class="fas fa-cogs me-2 text-primary"></i>Caractéristiques techniques
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">

                                <div class="col-md-4">
                                    <label for="transmission" class="form-label fw-semibold">
                                        Transmission <span class="text-danger">*</span>
                                    </label>
                                    <select id="transmission" name="transmission" required class="form-select">
                                        <option value="">— Choisir —</option>
                                        {% for trans in transmissions %}
                                            <option value="{{ trans.value }}">{{ trans.getLabel() }}</option>
                                        {% endfor %}
                                    </select>
                                    <div data-car-edit-target="transmissionError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-4">
                                    <label for="fuelType" class="form-label fw-semibold">
                                        Carburant <span class="text-danger">*</span>
                                    </label>
                                    <select id="fuelType" name="fuelType" required class="form-select">
                                        <option value="">— Choisir —</option>
                                        {% for fuel in fuelTypes %}
                                            <option value="{{ fuel.value }}">{{ fuel.getLabel() }}</option>
                                        {% endfor %}
                                    </select>
                                    <div data-car-edit-target="fuelTypeError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-4">
                                    <label for="status" class="form-label fw-semibold">
                                        Statut <span class="text-danger">*</span>
                                    </label>
                                    <select id="status" name="status" required class="form-select">
                                        {% for s in statuses %}
                                            <option value="{{ s.value }}">{{ s.getLabel() }}</option>
                                        {% endfor %}
                                    </select>
                                    <div data-car-edit-target="statusError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-4">
                                    <label for="mileage" class="form-label fw-semibold">
                                        Kilométrage <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-road text-muted"></i></span>
                                        <input id="mileage" name="mileage" type="number"
                                               placeholder="Ex: 15000" min="0" required class="form-control" />
                                        <span class="input-group-text bg-light text-muted">km</span>
                                    </div>
                                    <div data-car-edit-target="mileageError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-4">
                                    <label for="seats" class="form-label fw-semibold">
                                        Sièges <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-chair text-muted"></i></span>
                                        <input id="seats" name="seats" type="number"
                                               placeholder="5" min="1" required class="form-control" />
                                    </div>
                                    <div data-car-edit-target="seatsError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-md-4">
                                    <label for="doors" class="form-label fw-semibold">
                                        Portes <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light"><i class="fas fa-door-open text-muted"></i></span>
                                        <input id="doors" name="doors" type="number"
                                               placeholder="5" min="1" required class="form-control" />
                                    </div>
                                    <div data-car-edit-target="doorsError" class="invalid-feedback d-block"></div>
                                </div>

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

                    <!-- Section Dates & Maintenance -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white border-bottom py-3">
                            <h6 class="mb-0 fw-semibold">
                                <span class="badge bg-warning text-dark me-2">3</span>
                                <i class="fas fa-tools me-2 text-warning"></i>Dates &amp; Maintenance
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">

                                <div class="col-md-4">
                                    <label for="insuranceExpirationDate" class="form-label fw-semibold">
                                        <i class="fas fa-shield-alt text-warning me-1"></i>Expiration assurance
                                    </label>
                                    <input id="insuranceExpirationDate" name="insuranceExpirationDate" type="date" class="form-control" />
                                    <div data-car-edit-target="insuranceExpirationDateError" class="invalid-feedback d-block"></div>
                                </div>


                                <div class="col-md-4">
                                    <label for="nextTechnicalControlAt" class="form-label fw-semibold">
                                        <i class="fas fa-clipboard-check text-warning me-1"></i>Prochain CT
                                    </label>
                                    <input id="nextTechnicalControlAt" name="nextTechnicalControlAt" type="date" class="form-control" />
                                    <div data-car-edit-target="nextTechnicalControlAtError" class="invalid-feedback d-block"></div>
                                </div>

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

                </div>

                <!-- COLONNE DROITE -->
                <div class="col-lg-4">

                    <!-- Prix journalier — mise en avant -->
                    <div class="card shadow-sm border-0 border-start border-4 border-primary mb-4">
                        <div class="card-body p-4">
                            <label for="dailyRentalPrice" class="form-label fw-semibold">
                                <i class="fas fa-tag text-primary me-1"></i>Prix de location / jour <span class="text-danger">*</span>
                            </label>
                            <div class="input-group input-group-lg">
                                <input id="dailyRentalPrice" name="dailyRentalPrice" type="number"
                                       placeholder="0.00" min="0" step="0.01" required
                                       class="form-control fw-bold" />
                                <span class="input-group-text bg-primary text-white fw-bold">MAD</span>
                            </div>
                            <div data-car-edit-target="dailyRentalPriceError" class="invalid-feedback d-block"></div>
                        </div>
                    </div>

                    <!-- Section Acquisition & Vente -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white border-bottom py-3">
                            <h6 class="mb-0 fw-semibold">
                                <span class="badge bg-success me-2">4</span>
                                <i class="fas fa-tags me-2 text-success"></i>Acquisition &amp; Vente
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">

                                <div class="col-12">
                                    <label for="acquisitionDate" class="form-label fw-semibold">
                                        <i class="fas fa-calendar-plus text-success me-1"></i>Date d'acquisition
                                    </label>
                                    <input id="acquisitionDate" name="acquisitionDate" type="date" class="form-control" />
                                    <div data-car-edit-target="acquisitionDateError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-12">
                                    <label for="purchasePrice" class="form-label fw-semibold">
                                        <i class="fas fa-shopping-cart text-success me-1"></i>Prix d'achat
                                    </label>
                                    <div class="input-group">
                                        <input id="purchasePrice" name="purchasePrice" type="number" min="0" step="0.01"
                                               placeholder="0.00" class="form-control" />
                                        <span class="input-group-text bg-light text-muted">MAD</span>
                                    </div>
                                    <div data-car-edit-target="purchasePriceError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-12">
                                    <hr class="my-1 text-muted">
                                    <p class="small text-muted mb-2"><i class="fas fa-info-circle me-1"></i>À renseigner lors de la revente</p>
                                </div>

                                <div class="col-12">
                                    <label for="salePrice" class="form-label fw-semibold">
                                        <i class="fas fa-hand-holding-usd text-muted me-1"></i>Prix de vente
                                    </label>
                                    <div class="input-group">
                                        <input id="salePrice" name="salePrice" type="number" min="0" step="0.01"
                                               placeholder="0.00" class="form-control" />
                                        <span class="input-group-text bg-light text-muted">MAD</span>
                                    </div>
                                    <div data-car-edit-target="salePriceError" class="invalid-feedback d-block"></div>
                                </div>

                                <div class="col-12">
                                    <label for="soldAt" class="form-label fw-semibold">
                                        <i class="fas fa-calendar-check text-muted me-1"></i>Date de vente
                                    </label>
                                    <input id="soldAt" name="soldAt" type="date" class="form-control" />
                                    <div data-car-edit-target="soldAtError" class="invalid-feedback d-block"></div>
                                </div>

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

                    <!-- Boutons -->
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-4 d-grid gap-2">
                            <button type="submit" data-car-edit-target="submitBtn" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-2"></i>Enregistrer les modifications
                            </button>
                            <a href="{{ path('app_car_index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Annuler
                            </a>
                            <div data-car-edit-target="status" class="text-center text-muted small mt-1"></div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}