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

{% block title %}Nouveau Contrat - RentAuto{% endblock %}

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

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1"><i class="fas fa-file-contract text-primary me-2"></i>Nouveau Contrat</h1>
        </div>
        <a href="{{ path('app_contract_index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour
        </a>
    </div>

    <!-- Stepper -->
    <div class="card shadow-sm mb-4">
        <div class="card-body py-3">
            <div class="d-flex justify-content-between align-items-center position-relative">
                <div class="position-absolute top-50 start-0 end-0 translate-middle-y" style="height:2px;background:#dee2e6;z-index:0;margin:0 60px;"></div>
                {% set steps = [
                    {num: 1, icon: 'fa-user',          label: 'Client'},
                    {num: 2, icon: 'fa-car',           label: 'Véhicule'},
                    {num: 3, icon: 'fa-calendar-alt',  label: 'Contrat'},
                    {num: 4, icon: 'fa-check-circle',  label: 'Récapitulatif'},
                ] %}
                {% for step in steps %}
                <div class="d-flex flex-column align-items-center position-relative" style="z-index:1;flex:1">
                    <div data-contract-create-target="stepIndicator"
                         data-step="{{ step.num }}"
                         class="rounded-circle d-flex align-items-center justify-content-center mb-1 fw-bold"
                         style="width:42px;height:42px;background:#dee2e6;color:#6c757d;transition:all .3s">
                        <i class="fas {{ step.icon }}"></i>
                    </div>
                    <small data-contract-create-target="stepLabel"
                           data-step="{{ step.num }}"
                           class="text-muted fw-semibold" style="font-size:.7rem">{{ step.label }}</small>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- ── STEP 1 : Client ─────────────────────────────────────────────── -->
    <div data-contract-create-target="step" data-step="1">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-user me-2 text-primary"></i>Sélectionner un client</h5>
            </div>
            <div class="card-body p-4">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Rechercher un client</label>
                        <div class="position-relative">
                            <input type="text" class="form-control ps-5"
                                   placeholder="Nom, prénom, CIN, téléphone..."
                                   data-contract-create-target="customerSearch"
                                   data-action="input->contract-create#onCustomerInput focus->contract-create#onCustomerFocus blur->contract-create#onCustomerBlur" />
                            <div class="position-absolute top-50 start-0 translate-middle-y ms-3">
                                <i class="fas fa-search text-muted"></i>
                            </div>
                            <ul data-contract-create-target="customerDropdown"
                                class="list-group position-absolute w-100 d-none shadow-sm"
                                style="z-index:1000;max-height:260px;overflow-y:auto;top:100%"></ul>
                        </div>
                    </div>
                    <div class="col-md-6 d-flex align-items-end">
                        <a href="{{ path('app_customer_new') }}" target="_blank" class="btn btn-outline-secondary">
                            <i class="fas fa-user-plus me-2"></i>Créer un nouveau client
                        </a>
                    </div>
                </div>

                <!-- Customer card preview -->
                <div data-contract-create-target="customerCard" class="d-none mt-3">
                    <div class="alert alert-success d-flex align-items-center gap-3 mb-0">
                        <i class="fas fa-user-check fa-2x text-success"></i>
                        <div>
                            <div class="fw-bold" data-contract-create-target="customerName"></div>
                            <div class="small text-muted" data-contract-create-target="customerInfo"></div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto"
                                data-action="click->contract-create#clearCustomer">
                            <i class="fas fa-times"></i> Changer
                        </button>
                    </div>
                </div>
                <div data-contract-create-target="customerError" class="text-danger small mt-2"></div>
            </div>

            <!-- ── 2ème conducteur (optionnel) ── -->
            <div class="card-body pt-0 px-4 pb-4 border-top">
                <div class="d-flex align-items-center gap-2 mb-3 mt-3">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="enableSecondDriver"
                               data-action="change->contract-create#toggleSecondDriver" />
                        <label class="form-check-label fw-semibold" for="enableSecondDriver">
                            <i class="fas fa-user-friends me-1 text-secondary"></i>Ajouter un 2ème conducteur <span class="text-muted fw-normal">(optionnel)</span>
                        </label>
                    </div>
                </div>

                <div data-contract-create-target="secondDriverSection" class="d-none">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Rechercher le 2ème conducteur</label>
                            <div class="position-relative">
                                <input type="text" class="form-control ps-5"
                                       placeholder="Nom, prénom, CIN, téléphone..."
                                       data-contract-create-target="secondDriverSearch"
                                       data-action="input->contract-create#onSecondDriverInput focus->contract-create#onSecondDriverFocus blur->contract-create#onSecondDriverBlur" />
                                <div class="position-absolute top-50 start-0 translate-middle-y ms-3">
                                    <i class="fas fa-search text-muted"></i>
                                </div>
                                <ul data-contract-create-target="secondDriverDropdown"
                                    class="list-group position-absolute w-100 d-none shadow-sm"
                                    style="z-index:1000;max-height:260px;overflow-y:auto;top:100%"></ul>
                            </div>
                        </div>
                    </div>

                    <!-- 2ème conducteur card preview -->
                    <div data-contract-create-target="secondDriverCard" class="d-none">
                        <div class="alert alert-info d-flex align-items-center gap-3 mb-0">
                            <i class="fas fa-user-friends fa-2x text-info"></i>
                            <div>
                                <div class="fw-bold" data-contract-create-target="secondDriverName"></div>
                                <div class="small text-muted" data-contract-create-target="secondDriverInfo"></div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary ms-auto"
                                    data-action="click->contract-create#clearSecondDriver">
                                <i class="fas fa-times"></i> Retirer
                            </button>
                        </div>
                    </div>
                    <div data-contract-create-target="secondDriverError" class="text-danger small mt-2"></div>
                </div>
            </div>

            <div class="card-footer bg-white d-flex justify-content-end">
                <button type="button" class="btn btn-primary"
                        data-action="click->contract-create#goStep2">
                    Suivant <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- ── STEP 2 : Véhicule ───────────────────────────────────────────── -->
    <div data-contract-create-target="step" data-step="2" class="d-none">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-car me-2 text-primary"></i>Sélectionner un véhicule</h5>
            </div>
            <div class="card-body p-4">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Rechercher un véhicule</label>
                        <div class="position-relative">
                            <input type="text" class="form-control ps-5"
                                   placeholder="Immatriculation, marque, modèle..."
                                   data-contract-create-target="carSearch"
                                   data-action="input->contract-create#onCarInput focus->contract-create#onCarFocus blur->contract-create#onCarBlur" />
                            <div class="position-absolute top-50 start-0 translate-middle-y ms-3">
                                <i class="fas fa-search text-muted"></i>
                            </div>
                            <ul data-contract-create-target="carDropdown"
                                class="list-group position-absolute w-100 d-none shadow-sm"
                                style="z-index:1000;max-height:260px;overflow-y:auto;top:100%"></ul>
                        </div>
                    </div>
                </div>

                <!-- Car card preview -->
                <div data-contract-create-target="carCard" class="d-none mt-3">
                    <div class="alert alert-success d-flex align-items-center gap-3 mb-3">
                        <i class="fas fa-car fa-2x text-success"></i>
                        <div>
                            <div class="fw-bold" data-contract-create-target="carName"></div>
                            <div class="small text-muted" data-contract-create-target="carInfo"></div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto"
                                data-action="click->contract-create#clearCar">
                            <i class="fas fa-times"></i> Changer
                        </button>
                    </div>

                    <!-- Schéma d'inspection départ -->
                    <div class="border rounded p-3 bg-light" data-contract-create-target="inspectionScope">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="fw-semibold small">
                                <i class="fas fa-car-crash me-1 text-warning"></i>État du véhicule au départ
                            </span>
                            <span class="text-muted" style="font-size:.7rem">
                                Les dommages existants sont pré-remplis depuis la fiche véhicule
                            </span>
                        </div>
                        {% include 'components/_damage_type_buttons.html.twig' with { controller: 'contract-create' } %}
                        <div class="row g-2 align-items-start">
                            <div class="col-sm-5 col-md-4">
                                <div class="position-relative border rounded bg-white"
                                     style="cursor:crosshair;max-width:220px"
                                     data-contract-create-target="inspectionCanvas"
                                     data-action="click->contract-create#inspectionAddPoint contextmenu->contract-create#inspectionRemovePoint">
                                    <svg viewBox="0 0 699 1061" xmlns="http://www.w3.org/2000/svg"
                                         style="width:100%;display:block;user-select:none">
                                        <image href="{{ car_schema_base64() }}" x="0" y="0" width="699" height="1061"/>
                                        <g data-contract-create-target="inspectionPoints"></g>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="text-muted mb-1" style="font-size:.72rem;font-weight:600">
                                    <i class="fas fa-list me-1"></i>Dommages
                                </p>
                                <div data-contract-create-target="inspectionList" style="font-size:.82rem"></div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-outline-danger btn-sm py-0 px-2"
                                    style="font-size:.65rem;line-height:1.8"
                                    data-action="click->contract-create#inspectionClear">
                                <i class="fas fa-trash me-1"></i>Effacer tout
                            </button>
                        </div>
                    </div>
                </div>
                <div data-contract-create-target="carError" class="text-danger small mt-2"></div>
            </div>
            <div class="card-footer bg-white d-flex justify-content-between">
                <button type="button" class="btn btn-outline-secondary"
                        data-action="click->contract-create#goStep1">
                    <i class="fas fa-arrow-left me-2"></i>Précédent
                </button>
                <button type="button" class="btn btn-primary"
                        data-action="click->contract-create#goStep3">
                    Suivant <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- ── STEP 3 : Contrat ────────────────────────────────────────────── -->
    <div data-contract-create-target="step" data-step="3" class="d-none">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-calendar-alt me-2 text-primary"></i>Détails du contrat</h5>
            </div>
            <div class="card-body p-4">
                <div class="row g-3">

                    <!-- Date début -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Date et heure de début <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="startDate" class="form-control"
                               data-contract-create-target="startDate"
                               data-action="change->contract-create#computeTotal" />
                        <div data-contract-create-target="startDateError" class="text-danger small"></div>
                    </div>

                    <!-- Date fin -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Date et heure de fin prévue <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="endDate" class="form-control"
                               data-contract-create-target="endDate"
                               data-action="change->contract-create#computeTotal" />
                        <div data-contract-create-target="endDateError" class="text-danger small"></div>
                    </div>

                    <!-- Tarif journalier -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Tarif/jour (MAD) <span class="text-danger">*</span></label>
                        <input type="number" name="dailyRate" class="form-control"
                               placeholder="Ex: 350" min="0" step="0.01"
                               data-contract-create-target="dailyRate"
                               data-action="input->contract-create#computeTotal" />
                        <div data-contract-create-target="dailyRateError" class="text-danger small"></div>
                    </div>

                    <!-- Total calculé -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Total calculé</label>
                        <div class="form-control bg-light fw-bold text-primary"
                             data-contract-create-target="totalDisplay">— MAD</div>
                        <small class="text-muted" data-contract-create-target="durationDisplay"></small>
                    </div>

                    <!-- Caution -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Caution (MAD)</label>
                        <input type="number" name="deposit" class="form-control"
                               placeholder="Ex: 1000" min="0" step="0.01"
                               data-contract-create-target="deposit" />
                        <div data-contract-create-target="depositError" class="text-danger small"></div>
                    </div>

                    <!-- Kilométrage départ -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Kilométrage départ</label>
                        <input type="number" name="mileageAtStart" class="form-control"
                               placeholder="Ex: 25000" min="0"
                               data-contract-create-target="mileageAtStart" />
                        <div class="form-text text-danger small">
                            <i class="fas fa-sync-alt me-1"></i>Met à jour le km du véhicule
                        </div>
                    </div>

                    <!-- Niveau carburant départ -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-gas-pump me-1 text-warning"></i>Carburant départ
                        </label>
                        <select name="fuelLevelAtStart" class="form-select"
                                data-contract-create-target="fuelLevelAtStart">
                            <option value="">— Non renseigné —</option>
                            {% for f in fuelLevels %}
                                <option value="{{ f.value }}">{{ f.getLabel() }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Lieu de départ -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-map-marker-alt me-1 text-primary"></i>Lieu de départ
                        </label>
                        <input type="text" class="form-control"
                               placeholder="Ex: Aéroport, Agence, Hôtel..."
                               data-contract-create-target="departureLocation" />
                    </div>

                    <!-- Payé -->
                    <div class="col-md-4 d-flex align-items-end">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="isPaid" name="isPaid"
                                   data-contract-create-target="isPaid" />
                            <label class="form-check-label fw-semibold" for="isPaid">Payé</label>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="col-12">
                        <label class="form-label fw-semibold">Notes</label>
                        <textarea name="notes" class="form-control" rows="3"
                                  placeholder="Observations, conditions particulières..."
                                  data-contract-create-target="notes"></textarea>
                    </div>

                    <!-- Statut -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Statut <span class="text-danger">*</span></label>
                        <select name="status" class="form-select"
                                data-contract-create-target="contractStatus">
                            {% for s in statuses %}
                                <option value="{{ s.value }}">{{ s.getLabel() }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- ── Paiement initial ── -->
                    <div class="col-12 mt-2">
                        <div class="border-top pt-3">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" id="enableInitialPayment"
                                       data-action="change->contract-create#toggleInitialPayment" />
                                <label class="form-check-label fw-semibold" for="enableInitialPayment">
                                    <i class="fas fa-money-bill-wave me-1 text-success"></i>Enregistrer un paiement initial
                                </label>
                            </div>
                            <div data-contract-create-target="initialPaymentSection" class="d-none">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">Montant (MAD) <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" min="0.01" step="0.01"
                                               placeholder="Ex: 1500"
                                               data-contract-create-target="paymentAmount" />
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">Mode <span class="text-danger">*</span></label>
                                        <select class="form-select" data-contract-create-target="paymentMethod">
                                            {% for m in paymentMethods %}
                                                <option value="{{ m.value }}">{{ m.getLabel() }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">Date</label>
                                        <input type="date" class="form-control"
                                               data-contract-create-target="paymentDate" />
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">Référence</label>
                                        <input type="text" class="form-control" placeholder="N° chèque, virement..."
                                               data-contract-create-target="paymentReference" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-white d-flex justify-content-between">
                <button type="button" class="btn btn-outline-secondary"
                        data-action="click->contract-create#goStep2">
                    <i class="fas fa-arrow-left me-2"></i>Précédent
                </button>
                <button type="button" class="btn btn-primary"
                        data-action="click->contract-create#goStep4">
                    Récapitulatif <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- ── STEP 4 : Récapitulatif ──────────────────────────────────────── -->
    <div data-contract-create-target="step" data-step="4" class="d-none">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-check-circle me-2 text-success"></i>Récapitulatif</h5>
            </div>
            <div class="card-body p-4">
                <div class="row g-4">
                    <div class="col-md-6">
                        <h6 class="border-bottom pb-2"><i class="fas fa-user me-2 text-muted"></i>Client</h6>
                        <div data-contract-create-target="recapCustomer" class="ps-2"></div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="border-bottom pb-2"><i class="fas fa-car me-2 text-muted"></i>Véhicule</h6>
                        <div data-contract-create-target="recapCar" class="ps-2"></div>
                    </div>
                    <div data-contract-create-target="recapSecondDriverWrapper" class="col-md-6 d-none">
                        <h6 class="border-bottom pb-2"><i class="fas fa-user-friends me-2 text-muted"></i>2ème conducteur</h6>
                        <div data-contract-create-target="recapSecondDriver" class="ps-2"></div>
                    </div>
                    <div class="col-12">
                        <h6 class="border-bottom pb-2"><i class="fas fa-file-alt me-2 text-muted"></i>Détails du contrat</h6>
                        <div data-contract-create-target="recapContract" class="ps-2"></div>
                    </div>
                </div>
                <div data-contract-create-target="status" class="mt-3"></div>
            </div>
            <div class="card-footer bg-white d-flex justify-content-between">
                <button type="button" class="btn btn-outline-secondary"
                        data-action="click->contract-create#goStep3">
                    <i class="fas fa-arrow-left me-2"></i>Précédent
                </button>
                <button type="button" class="btn btn-success"
                        data-contract-create-target="submitBtn"
                        data-action="click->contract-create#submit">
                    <i class="fas fa-save me-2"></i>Créer le contrat
                </button>
            </div>
        </div>
    </div>

</div>
{% endblock %}