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

{% block title %}Retour véhicule - RentAuto{% endblock %}

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

    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-flag-checkered text-warning me-2"></i>Retour du véhicule
            </h1>
            <p class="text-muted small mb-0">
                Contrat <strong data-contract-return-target="contractNumber">…</strong>
                <span data-contract-return-target="statusBadge" class="badge ms-2"></span>
            </p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ path('app_contract_edit', {id: contractId}) }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Retour au contrat
            </a>
            <a href="{{ path('app_contract_pdf', {id: contractId}) }}" target="_blank" class="btn btn-outline-danger btn-sm">
                <i class="fas fa-file-pdf me-1"></i>PDF
            </a>
        </div>
    </div>

    <!-- Alerte retard -->
    <div data-contract-return-target="overdueAlert" class="d-none alert alert-danger d-flex align-items-center gap-2 mb-3">
        <i class="fas fa-exclamation-triangle fa-lg"></i>
        <span>Ce contrat est <strong>en retard</strong> — le véhicule n'a pas été restitué à temps.</span>
    </div>

    <!-- Loader -->
    <div data-contract-return-target="loader" class="text-center py-5">
        <div class="spinner-border text-warning" role="status"></div>
        <p class="text-muted mt-2">Chargement du contrat…</p>
    </div>

    <!-- Contenu -->
    <div data-contract-return-target="wrapper" class="d-none">
        <div class="row g-4">

            <!-- ══ Colonne gauche : récap contrat ═══════════════════════ -->
            <div class="col-lg-5">

                <!-- Parties -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-users me-2 text-primary"></i>Parties
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="p-2 border rounded h-100">
                                    <div class="text-muted mb-1" style="font-size:.65rem;text-transform:uppercase;letter-spacing:.05em">
                                        <i class="fas fa-user me-1"></i>Client
                                    </div>
                                    <div data-contract-return-target="customerInfo"></div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-2 border rounded h-100">
                                    <div class="text-muted mb-1" style="font-size:.65rem;text-transform:uppercase;letter-spacing:.05em">
                                        <i class="fas fa-car me-1"></i>Véhicule
                                    </div>
                                    <div data-contract-return-target="carInfo"></div>
                                </div>
                            </div>
                            <div class="col-12 d-none" data-contract-return-target="secondDriverWrapper">
                                <div class="p-2 border rounded border-info">
                                    <div class="text-muted mb-1" style="font-size:.65rem;text-transform:uppercase;letter-spacing:.05em">
                                        <i class="fas fa-user-friends me-1 text-info"></i>2ème conducteur
                                    </div>
                                    <div data-contract-return-target="secondDriverInfo"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Période & km départ -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-calendar-alt me-2 text-primary"></i>Période de location
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div data-contract-return-target="periodInfo"></div>
                    </div>
                </div>

                <!-- État départ -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-sign-out-alt me-2 text-success"></i>État au départ
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div data-contract-return-target="departureInfo"></div>
                    </div>
                </div>

                <!-- Finances -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-coins me-2 text-warning"></i>Finances
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div data-contract-return-target="financialInfo"></div>
                    </div>
                </div>

                <!-- Inspection départ (lecture seule) -->
                <div class="card shadow-sm border-0 mb-3"
                     data-controller="inspection"
                     data-inspection-endpoint-value="/api/rental_contracts"
                     data-inspection-contract-id-value="{{ contractId }}"
                     data-inspection-mode-value="start-only">
                    <div class="card-header bg-white py-2 d-flex align-items-center justify-content-between">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-car-crash me-2 text-success"></i>Inspection départ
                        </h6>
                        <span class="badge bg-success bg-opacity-10 text-success" style="font-size:.65rem">
                            <i class="fas fa-lock me-1"></i>Lecture seule
                        </span>
                    </div>
                    <div class="card-body p-2">
                        {# Légende des couleurs (lecture seule — pas de sélection) #}
                        <div class="d-flex flex-wrap gap-2 mb-2">
                            <span class="badge rounded-pill px-2 py-1" style="background:#e74c3c;font-size:.68rem;opacity:.85"><i class="fas fa-minus me-1"></i>Rayure</span>
                            <span class="badge rounded-pill px-2 py-1" style="background:#e67e22;font-size:.68rem;opacity:.85"><i class="fas fa-circle me-1" style="font-size:.55rem;vertical-align:middle"></i>Bosse</span>
                            <span class="badge rounded-pill px-2 py-1" style="background:#3498db;font-size:.68rem;opacity:.85"><i class="fas fa-window-restore me-1"></i>Bris</span>
                            <span class="badge rounded-pill px-2 py-1" style="background:#9b59b6;font-size:.68rem;opacity:.85"><i class="fas fa-exclamation me-1"></i>Autre</span>
                        </div>
                        <div class="position-relative border rounded bg-light"
                             style="max-width:220px;margin:0 auto"
                             data-inspection-target="canvas"
                             data-action="click->inspection#addPoint contextmenu->inspection#removePoint">
                            <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-inspection-target="points"></g>
                            </svg>
                        </div>
                        <div data-inspection-target="list" class="mt-1" style="font-size:.8rem"></div>
                        <span data-inspection-target="hint" class="d-none"></span>
                    </div>
                </div>

            </div>

            <!-- ══ Colonne droite : formulaire retour + inspection ═══════ -->
            <div class="col-lg-7">

                <!-- Card : déjà restitué -->
                <div class="card shadow-sm border-success d-none mb-3" data-contract-return-target="alreadyReturned">
                    <div class="card-header bg-success bg-opacity-10 py-2">
                        <h6 class="mb-0 text-success text-uppercase" style="font-size:.72rem;letter-spacing:.05em">
                            <i class="fas fa-check-circle me-2"></i>Véhicule déjà restitué
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div data-contract-return-target="returnedSummary"></div>
                    </div>
                </div>

                <!-- Formulaire retour -->
                <div class="card shadow-sm border-warning mb-3">
                    <div class="card-header bg-warning bg-opacity-10 py-2 d-flex align-items-center gap-2">
                        <i class="fas fa-undo-alt text-warning"></i>
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.72rem;letter-spacing:.05em">
                            Déclarer le retour
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">
                                    Date et heure de retour <span class="text-danger">*</span>
                                </label>
                                <input type="datetime-local" class="form-control form-control-sm"
                                       data-contract-return-target="returnedAt" />
                                <div data-contract-return-target="returnedAtError" class="text-danger mt-1" style="font-size:.75rem"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">
                                    Kilométrage retour <span class="text-danger">*</span>
                                </label>
                                <input type="number" min="0" class="form-control form-control-sm"
                                       placeholder="Ex: 28500"
                                       data-contract-return-target="mileageAtReturn" />
                                <div data-contract-return-target="mileageAtReturnError" class="text-danger mt-1" style="font-size:.75rem"></div>
                                <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>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">
                                    <i class="fas fa-gas-pump me-1 text-warning"></i>Carburant retour
                                </label>
                                <select class="form-select form-select-sm" data-contract-return-target="fuelLevelAtReturn">
                                    <option value="">— Non renseigné —</option>
                                    {% for f in fuelLevels %}
                                        <option value="{{ f.value }}">{{ f.getLabel() }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">
                                    <i class="fas fa-map-marker-alt me-1 text-danger"></i>Lieu de retour
                                </label>
                                <input type="text" class="form-control form-control-sm"
                                       placeholder="Ex: Aéroport, Agence, Hôtel..."
                                       data-contract-return-target="returnLocationInput" />
                            </div>
                            <div class="col-12">
                                <!-- Inspection retour intégrée -->
                                <div class="border-top pt-3 mt-1"
                                     data-controller="inspection"
                                     data-inspection-endpoint-value="/api/rental_contracts"
                                     data-inspection-contract-id-value="{{ contractId }}"
                                     data-inspection-mode-value="return-only"
                                     data-inspection-role="return-editable">
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="fw-semibold small">
                                            <i class="fas fa-car-crash me-1 text-warning"></i>État du véhicule au retour
                                        </span>
                                    </div>
                                    {% include 'components/_damage_type_buttons.html.twig' %}
                                    <div class="row g-2 align-items-start">
                                        <div class="col-7">
                                            <div class="position-relative border rounded bg-light"
                                                 style="cursor:crosshair"
                                                 data-inspection-target="canvas"
                                                 data-action="click->inspection#addPoint contextmenu->inspection#removePoint">
                                                <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-inspection-target="points"></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-inspection-target="list" 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->inspection#clearPoints">
                                            <i class="fas fa-trash me-1"></i>Effacer tout
                                        </button>
                                    </div>

                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="closeOnReturn"
                                           data-contract-return-target="closeOnReturn" checked />
                                    <label class="form-check-label fw-semibold small" for="closeOnReturn">
                                        <i class="fas fa-lock me-1 text-secondary"></i>Clôturer le contrat (statut → Terminé + marqué payé)
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white py-2 d-flex flex-column gap-2">
                        <button type="button" class="btn btn-warning w-100"
                                data-contract-return-target="returnBtn"
                                data-action="click->contract-return#declareReturn">
                            <i class="fas fa-flag-checkered me-2"></i>Enregistrer le retour
                        </button>
                        <div data-contract-return-target="returnStatus"></div>
                    </div>
                </div>


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