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

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

{% block content %}
<div data-controller="contract-edit"
     data-contract-edit-endpoint-value="/api/rental_contracts"
     data-contract-edit-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-file-contract text-primary me-2"></i>Contrat
                <span data-contract-edit-target="statusBadge" class="badge fs-6 ms-2"></span>
            </h1>
            <p class="text-muted small mb-0" data-contract-edit-target="subtitle"></p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ path('app_contract_index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Retour
            </a>
            <a href="{{ path('app_contract_return', {id: contractId}) }}"
               class="btn btn-warning btn-sm d-none"
               data-contract-edit-target="returnPageBtn">
                <i class="fas fa-flag-checkered me-1"></i>Retour véhicule
            </a>
            <a href="{{ path('app_contract_pdf', {id: contractId}) }}" target="_blank" class="btn btn-danger btn-sm">
                <i class="fas fa-file-pdf me-1"></i>PDF
            </a>
        </div>
    </div>

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

    <!-- Contenu -->
    <div data-contract-edit-target="wrapper" class="d-none">

        <!-- Alerte retard -->
        <div data-contract-edit-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>

        <div class="row g-4">

            <!-- ══ Colonne gauche : formulaire ══════════════════════════ -->
            <div class="col-lg-8">

                <!-- Informations 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:.75rem;letter-spacing:.05em">
                            <i class="fas fa-info-circle me-2 text-primary"></i>Parties du contrat
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="p-2 border rounded h-100">
                                    <div class="text-muted small text-uppercase mb-1" style="font-size:.65rem;letter-spacing:.05em">
                                        <i class="fas fa-user me-1"></i>Client
                                    </div>
                                    <div data-contract-edit-target="customerInfo"></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-2 border rounded h-100">
                                    <div class="text-muted small text-uppercase mb-1" style="font-size:.65rem;letter-spacing:.05em">
                                        <i class="fas fa-car me-1"></i>Véhicule
                                    </div>
                                    <div data-contract-edit-target="carInfo"></div>
                                </div>
                            </div>
                            <div class="col-md-4" data-contract-edit-target="secondDriverWrapper">
                                <div class="p-2 border rounded h-100">
                                    <div class="text-muted small text-uppercase mb-1" style="font-size:.65rem;letter-spacing:.05em">
                                        <i class="fas fa-user-friends me-1"></i>2ème conducteur
                                    </div>
                                    <div data-contract-edit-target="secondDriverInfo"></div>
                                    <div class="mt-2" data-contract-edit-target="secondDriverEditArea">
                                        <div class="position-relative">
                                            <input type="text" class="form-control form-control-sm ps-4"
                                                   placeholder="Rechercher..."
                                                   data-contract-edit-target="secondDriverSearch"
                                                   data-action="input->contract-edit#onSecondDriverInput focus->contract-edit#onSecondDriverFocus blur->contract-edit#onSecondDriverBlur" />
                                            <div class="position-absolute top-50 start-0 translate-middle-y ms-2" style="pointer-events:none">
                                                <i class="fas fa-search text-muted" style="font-size:.7rem"></i>
                                            </div>
                                            <ul data-contract-edit-target="secondDriverDropdown"
                                                class="list-group position-absolute w-100 d-none shadow-sm"
                                                style="z-index:1000;max-height:200px;overflow-y:auto;top:100%"></ul>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger mt-1 d-none"
                                                data-contract-edit-target="removeSecondDriverBtn"
                                                data-action="click->contract-edit#removeSecondDriver">
                                            <i class="fas fa-user-minus me-1"></i>Retirer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white py-2 d-flex gap-3 flex-wrap" style="font-size:.8rem">
                        <span class="text-muted">
                            <i class="fas fa-user-edit me-1"></i>Créé par :
                            <strong data-contract-edit-target="createdByDisplay">—</strong>
                        </span>
                        <span class="text-muted d-none" data-contract-edit-target="returnedByWrapper">
                            <i class="fas fa-flag-checkered me-1"></i>Retourné par :
                            <strong data-contract-edit-target="returnedByDisplay">—</strong>
                        </span>
                    </div>
                </div>

                <!-- Période de location -->
                <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:.75rem;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 class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Date de début</label>
                                <input type="datetime-local" class="form-control form-control-sm"
                                       data-contract-edit-target="startDate"
                                       data-action="change->contract-edit#computeTotal" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Date de fin prévue</label>
                                <input type="datetime-local" class="form-control form-control-sm"
                                       data-contract-edit-target="endDate"
                                       data-action="change->contract-edit#computeTotal" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Durée / Total</label>
                                <div class="form-control form-control-sm bg-light fw-bold text-primary"
                                     data-contract-edit-target="totalDisplay">— MAD</div>
                                <small class="text-muted" data-contract-edit-target="durationDisplay"></small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Détail financier -->
                <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:.75rem;letter-spacing:.05em">
                            <i class="fas fa-coins me-2 text-warning"></i>Détail financier
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Tarif/jour (MAD)</label>
                                <input type="number" min="0" step="0.01" class="form-control form-control-sm"
                                       data-contract-edit-target="dailyRate"
                                       data-action="input->contract-edit#computeTotal" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Caution (MAD)</label>
                                <input type="number" min="0" step="0.01" class="form-control form-control-sm"
                                       data-contract-edit-target="deposit" />
                            </div>
                            <div class="col-md-4 d-flex align-items-end pb-1">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="isPaid"
                                           data-contract-edit-target="isPaid" />
                                    <label class="form-check-label fw-semibold small" for="isPaid">
                                        <i class="fas fa-check-circle me-1 text-success"></i>Payé
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- État au 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:.75rem;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 class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">
                                    <i class="fas fa-tachometer-alt me-1 text-muted"></i>Kilométrage départ
                                </label>
                                <input type="number" min="0" class="form-control form-control-sm"
                                       data-contract-edit-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>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">
                                    <i class="fas fa-gas-pump me-1 text-warning"></i>Carburant départ
                                </label>
                                <select class="form-select form-select-sm" data-contract-edit-target="fuelLevelAtStart">
                                    <option value="">— Non renseigné —</option>
                                    {% for f in fuelLevels %}
                                        <option value="{{ f.value }}">{{ f.getLabel() }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">
                                    <i class="fas fa-map-marker-alt me-1 text-primary"></i>Lieu de départ
                                </label>
                                <input type="text" class="form-control form-control-sm"
                                       placeholder="Ex: Aéroport, Agence, Hôtel..."
                                       data-contract-edit-target="departureLocation" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Statut & Notes -->
                <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:.75rem;letter-spacing:.05em">
                            <i class="fas fa-sliders-h me-2 text-secondary"></i>Statut & Notes
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Statut</label>
                                <select class="form-select form-select-sm" data-contract-edit-target="contractStatus">
                                    {% for s in statuses %}
                                        <option value="{{ s.value }}">{{ s.getLabel() }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-semibold small">Notes</label>
                                <textarea class="form-control form-control-sm" rows="2"
                                          data-contract-edit-target="notes"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white py-2 d-flex align-items-center gap-3">
                        <button type="button" class="btn btn-primary btn-sm"
                                data-contract-edit-target="saveBtn"
                                data-action="click->contract-edit#save">
                            <i class="fas fa-save me-1"></i>Enregistrer les modifications
                        </button>
                        <span data-contract-edit-target="saveStatus" class="small"></span>
                    </div>
                </div>

            </div>

            <!-- ══ Colonne droite : paiements + inspection + retour (résumé) ══ -->
            <div class="col-lg-4">

                <!-- Paiements -->
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0 text-uppercase text-muted" style="font-size:.75rem;letter-spacing:.05em">
                            <i class="fas fa-money-bill-wave me-2 text-success"></i>Paiements
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1" style="font-size:.8rem">
                                <span class="text-muted">Payé : <strong data-contract-edit-target="paidAmount">—</strong></span>
                                <span class="text-muted">Reste : <strong data-contract-edit-target="remainingAmount">—</strong></span>
                            </div>
                            <div class="progress" style="height:6px">
                                <div class="progress-bar bg-success"
                                     data-contract-edit-target="paymentProgress"
                                     role="progressbar" style="width:0%"></div>
                            </div>
                            <div class="text-center mt-1">
                                <span data-contract-edit-target="paymentStatusBadge" class="badge"></span>
                            </div>
                        </div>
                        <div data-contract-edit-target="paymentList" class="mb-3" style="max-height:180px;overflow-y:auto;font-size:.82rem"></div>
                        <div data-contract-edit-target="addPaymentForm">
                            <div class="border-top pt-2">
                                <p class="fw-semibold text-muted mb-2" style="font-size:.8rem">Ajouter un paiement</p>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <input type="number" class="form-control form-control-sm"
                                               placeholder="Montant MAD" step="0.01"
                                               data-contract-edit-target="newPaymentAmount"
                                               data-action="input->contract-edit#onPaymentAmountInput" />
                                    </div>
                                    <div class="col-6">
                                        <select class="form-select form-select-sm"
                                                data-contract-edit-target="newPaymentMethod">
                                            {% for m in paymentMethods %}
                                                <option value="{{ m.value }}">{{ m.getLabel() }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <input type="date" class="form-control form-control-sm"
                                               data-contract-edit-target="newPaymentDate" />
                                    </div>
                                    <div class="col-6">
                                        <input type="text" class="form-control form-control-sm"
                                               placeholder="Référence (optionnel)"
                                               data-contract-edit-target="newPaymentReference" />
                                    </div>
                                    <div class="col-12 d-none" data-contract-edit-target="paymentNotesWrapper">
                                        <textarea class="form-control form-control-sm" rows="2"
                                                  placeholder="Motif de l'avoir (obligatoire) *"
                                                  data-contract-edit-target="newPaymentNotes"></textarea>
                                    </div>
                                </div>
                                <div data-contract-edit-target="paymentError" class="text-danger mt-1" style="font-size:.75rem"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white py-2" data-contract-edit-target="addPaymentFooter">
                        <button type="button" class="btn btn-success btn-sm w-100"
                                data-action="click->contract-edit#addPayment"
                                data-contract-edit-target="addPaymentBtn">
                            <i class="fas fa-plus me-1"></i>Enregistrer le paiement
                        </button>
                        <div data-contract-edit-target="paymentStatus" class="mt-1 small text-center"></div>
                    </div>
                </div>

                <!-- Inspection départ -->
                <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:.75rem;letter-spacing:.05em">
                            <i class="fas fa-car-crash me-2 text-success"></i>État au départ
                        </h6>
                        <span class="badge bg-success bg-opacity-10 text-success" style="font-size:.65rem">Départ</span>
                    </div>
                    <div class="card-body p-2">
                        {% include 'components/_damage_type_buttons.html.twig' %}
                        <div class="position-relative border rounded bg-light" style="cursor:crosshair;max-width:240px;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>
                        <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>

                <!-- Véhicule restitué (read-only) -->
                <div class="card shadow-sm border-success d-none mb-3" data-contract-edit-target="returnedCard">
                    <div class="card-header bg-success bg-opacity-10 py-2">
                        <h6 class="mb-0 text-success text-uppercase" style="font-size:.75rem;letter-spacing:.05em">
                            <i class="fas fa-check-circle me-2"></i>Véhicule restitué
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-2" style="font-size:.85rem">
                            <div class="col-6">
                                <div class="text-muted small">Date de retour</div>
                                <strong data-contract-edit-target="returnedAtDisplay"></strong>
                            </div>
                            <div class="col-6">
                                <div class="text-muted small">Km retour</div>
                                <strong data-contract-edit-target="mileageAtReturnDisplay"></strong>
                            </div>
                            <div class="col-6">
                                <div class="text-muted small">Km parcourus</div>
                                <strong data-contract-edit-target="mileageDiffDisplay" class="text-primary"></strong>
                            </div>
                            <div class="col-6">
                                <div class="text-muted small">Carburant retour</div>
                                <strong data-contract-edit-target="fuelLevelAtReturnDisplay"></strong>
                            </div>
                            <div class="col-12 d-none" data-contract-edit-target="returnedLocationWrapper">
                                <div class="text-muted small"><i class="fas fa-map-marker-alt me-1 text-danger"></i>Lieu de retour</div>
                                <strong data-contract-edit-target="returnedLocationDisplay"></strong>
                            </div>
                        </div>
                        <!-- Inspection retour (lecture seule) -->
                        <div class="border-top mt-3 pt-3"
                             data-controller="inspection"
                             data-inspection-endpoint-value="/api/rental_contracts"
                             data-inspection-contract-id-value="{{ contractId }}"
                             data-inspection-mode-value="return-only">
                            <p class="fw-semibold text-muted mb-2" style="font-size:.75rem">
                                <i class="fas fa-car-crash me-1 text-warning"></i>État au retour
                            </p>
                            <div class="position-relative border rounded bg-light"
                                 style="max-width:220px;margin:0 auto"
                                 data-inspection-target="canvas">
                                <svg viewBox="0 0 699 1061" xmlns="http://www.w3.org/2000/svg"
                                     style="width:100%;display:block;user-select:none;pointer-events: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>


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