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

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

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

    <!-- 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-plus-circle text-primary me-2"></i>Nouveau Véhicule</h1>
            <p class="text-muted small mb-0">Remplissez les informations du véhicule à ajouter au parc</p>
        </div>
        <a href="{{ path('app_car_index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour
        </a>
    </div>

    <form id="car-create-form" data-action="submit->car-create#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
                                           data-action="blur->car-create#checkDuplicate"
                                           class="form-control text-uppercase" />
                                </div>
                                <div data-car-create-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-create-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-create-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-create-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-create-target="brandSearch"
                                               data-action="input->car-create#onBrandInput focus->car-create#onBrandFocus blur->car-create#onBrandBlur"
                                               class="form-control" />
                                    </div>
                                    <input type="hidden" name="brand" data-car-create-target="brandHidden" />
                                    <ul data-car-create-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-create-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-create-target="modelSearch"
                                               data-action="input->car-create#onModelInput focus->car-create#onModelFocus blur->car-create#onModelBlur"
                                               class="form-control" />
                                    </div>
                                    <input type="hidden" name="model" data-car-create-target="modelHidden" />
                                    <ul data-car-create-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-create-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-create-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-create-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-create-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-create-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" value="5" required class="form-control" />
                                </div>
                                <div data-car-create-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" value="5" required class="form-control" />
                                </div>
                                <div data-car-create-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-create-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-create-target="nextTechnicalControlAtError" class="invalid-feedback d-block"></div>
                            </div>

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

            </div>

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

                <!-- Section 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-create-target="dailyRentalPriceError" class="invalid-feedback d-block"></div>
                    </div>
                </div>

                <!-- Section Prix & 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-create-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-create-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-create-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-create-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-create-target="submitBtn" class="btn btn-primary btn-lg">
                            <i class="fas fa-save me-2"></i>Enregistrer le véhicule
                        </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-create-target="status" class="text-center text-muted small mt-1"></div>
                    </div>
                </div>

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