@extends('layout.app')

@section('title', __('Map Test'))
@section('data_col', '2-columns')
@section('body_class', '2-columns menu-collapsed')

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.min.css">
    <style>
        #main-map {
            height: 750px;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        .leaflet-control-attribution {
            display: none !important;
        }
        .location-info {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
            border: 1px solid #e0e0e0;
        }
        .location-type-selector {
            margin-bottom: 15px;
        }
        .site-selector, .map-selector {
            margin-bottom: 15px;
        }
        .route-info {
            background: #e8f4ff;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            border-left: 4px solid #5A8DEE;
        }
        .map-container {
            position: relative;
        }
        .map-overlay {
            margin-bottom: 10px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            border: 1px solid #dee2e6;
        }
        .coordinates-display {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .search-container {
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        .search-input-wrapper {
            position: relative;
            margin-bottom: 10px;
        }
        .search-input-wrapper input {
            padding-right: 40px;
            border-radius: 20px;
            border: 2px solid #e0e0e0;
            transition: all 0.3s ease;
        }
        .search-input-wrapper input:focus {
            border-color: #5A8DEE;
            box-shadow: 0 0 0 0.2rem rgba(90, 141, 238, 0.25);
        }
        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        .coordinate-input-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        .coordinate-input-group input {
            flex: 1;
            border-radius: 6px;
            border: 1px solid #dee2e6;
            padding: 8px 12px;
        }
        .search-tabs {
            border-bottom: 2px solid #dee2e6;
            margin-bottom: 15px;
        }
        .search-tab {
            padding: 8px 16px;
            cursor: pointer;
            border: none;
            background: none;
            color: #666;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .search-tab.active {
            color: #5A8DEE;
            border-bottom: 2px solid #5A8DEE;
            margin-bottom: -2px;
        }
        .search-tab:hover {
            color: #5A8DEE;
        }
        .autoComplete_wrapper {
            width: 100%;
        }
        .autoComplete_wrapper > input {
            width: 100%;
            border-radius: 20px;
            border: 2px solid #e0e0e0;
            font-size: 14px;
        }
        .autoComplete_wrapper > ul {
            max-height: 300px;
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 2000;
        }
        .autoComplete_wrapper > ul > li {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .autoComplete_wrapper > ul > li:hover {
            background: #e8f4ff;
        }
        .search-result-item {
            display: flex;
            align-items: center;
        }
        .search-result-item i {
            margin-right: 10px;
            color: #5A8DEE;
        }
        .search-result-details {
            flex: 1;
        }
        .search-result-name {
            font-weight: 500;
            color: #333;
        }
        .search-result-address {
            font-size: 12px;
            color: #666;
        }
        .location-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        .location-badge.depart {
            background: #5A8DEE;
            color: white;
        }
        .location-badge.dest {
            background: #28a745;
            color: white;
        }
        .selected-locations-panel {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #dee2e6;
        }
        .location-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .location-item:last-child {
            margin-bottom: 0;
        }
        .location-item-info {
            flex: 1;
        }
        .location-item-actions button {
            margin-left: 5px;
        }
        .leaflet-routing-container {
            max-height: 300px;
            overflow-y: auto;
        }
        .autoComplete_wrapper {
            position: relative;
        }

        .autoComplete_loader {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-top: 2px solid #5A8DEE;
            border-radius: 50%;
            animation: autoCompleteSpin 0.8s linear infinite;
            display: none;
            z-index: 10;
        }

        @keyframes autoCompleteSpin {
            0% { transform: translateY(-50%) rotate(0deg); }
            100% { transform: translateY(-50%) rotate(360deg); }
        }

        .autoComplete_wrapper.loading .autoComplete_loader {
            display: block;
        }

        .autoComplete_wrapper.loading input {
            padding-right: 45px !important;
        }

        .autoComplete_wrapper.loading .search-icon {
            opacity: 0;
        }
        .autoComplete_wrapper > ul {
            transition: opacity 0.2s ease;
        }
        .trip-selector-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 2px solid #e0e0e0;
        }
        .trip-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #dee2e6;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .trip-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 8px rgba(90, 141, 238, 0.2);
        }
        .trip-card.selected {
            border: 2px solid #5A8DEE;
            background: #f0f7ff;
        }
        .trip-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        .trip-waypoints {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        .trip-waypoints i {
            margin: 0 5px;
            color: #5A8DEE;
        }
        .trip-comparison {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 10px;
            margin-top: 10px;
            display: none;
        }
        .trip-card.selected .trip-comparison {
            display: block;
        }
        .comparison-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #dee2e6;
        }
        .comparison-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .comparison-label {
            color: #666;
        }
        .comparison-value {
            font-weight: bold;
        }
        .comparison-value.before {
            color: #666;
        }
        .comparison-value.after {
            color: #5A8DEE;
        }
        .comparison-diff {
            font-size: 12px;
            margin-left: 10px;
        }
        .diff-increase {
            color: #dc3545;
        }
        .diff-decrease {
            color: #28a745;
        }
        .trip-route-info {
            background: #fff3cd;
            border-radius: 6px;
            padding: 12px;
            margin: 15px 0;
            border-left: 4px solid #ffc107;
        }
        .section-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
            color: #5A8DEE;
        }
    </style>
    <style>
        .trip-result-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .trip-result-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 8px rgba(90, 141, 238, 0.15);
        }
        .trip-result-card.selected {
            border: 2px solid #5A8DEE;
            background: #f0f7ff;
        }
        .trip-result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .trip-result-name {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }
        .trip-result-badge {
            background: #5A8DEE;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
        }
        .trip-result-badge.best {
            background: #28a745;
        }
        .trip-result-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .trip-result-stat {
            display: flex;
            align-items: center;
        }
        .trip-result-stat i {
            margin-right: 5px;
            color: #5A8DEE;
        }
        .trip-result-diff {
            color: #dc3545;
        }
        .trip-result-eta {
            font-size: 13px;
            color: #666;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #dee2e6;
        }
        .btn-compare-all {
            background: linear-gradient(135deg, #5A8DEE 0%, #4a7fd4 100%);
            border: none;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: bold;
            width: 100%;
            margin-top: 15px;
            transition: all 0.3s ease;
        }
        .btn-compare-all:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(90, 141, 238, 0.3);
        }
        .btn-compare-all:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .modal-body {
            max-height: 750px;
            overflow-y: auto;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper p-1">
            <div class="content-body pb-5">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card mb-1">
                            <div class="card-header p-1">
                                <h4 class="card-title">
                                    <i class="fas fa-map-pin" style="color: #5A8DEE;"></i> 
                                    {{ __('Departure') }}
                                </h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body pt-0 pb-0">
                                    <div class="location-type-selector">
                                        <label>{{ __('Selection Method:') }}</label>
                                        <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                            <label class="btn btn-outline-primary active" id="depart-site-btn">
                                                <input type="radio" name="depart-type" value="site" checked> 
                                                <i class="fas fa-building"></i> Site
                                            </label>
                                            <label class="btn btn-outline-primary" id="depart-map-btn">
                                                <input type="radio" name="depart-type" value="map"> 
                                                <i class="fas fa-map-marker-alt"></i> Carte
                                            </label>
                                        </div>
                                    </div>
                                    <div id="depart-site-selector" class="site-selector">
                                        <label for="depart_site">{{ __('Select Site:') }}</label>
                                        <select id="depart_site" class="form-control select2">
                                            <option value="">{{ __('Choose a site...') }}</option>
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}" 
                                                        data-lat="{{ $site->latitude }}" 
                                                        data-lng="{{ $site->longitude }}"
                                                        data-name="{{ $site->name }}">
                                                    {{ $site->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div id="depart-map-selector" class="map-selector" style="display: none;">
                                        <div class="search-container">
                                            <div class="search-tabs">
                                                <button class="search-tab active" data-tab="depart-search">Recherche</button>
                                                <button class="search-tab" data-tab="depart-coordinates">Coordonnées</button>
                                            </div>
                                            <div class="search-tab-content" id="tab-depart-search">
                                                <div class="search-input-wrapper">
                                                    <div class="autoComplete_wrapper">
                                                        <input type="text" id="depart-search-input" 
                                                            placeholder="Rechercher une adresse en Tunisie..." 
                                                            class="form-control"
                                                            >
                                                        <div class="autoComplete_loader"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="search-tab-content" id="tab-depart-coordinates" style="display: none;">
                                                <div class="coordinate-input-group">
                                                    <input type="text" id="depart-coord-lat" placeholder="Latitude" class="form-control">
                                                    <input type="text" id="depart-coord-lng" placeholder="Longitude" class="form-control">
                                                    <button class="btn btn-primary" type="button" onclick="window.searchByCoordinates('depart')">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                                <small class="text-muted">Ex: 36.8065, 10.1815 (Tunis)</small>
                                            </div>
                                        </div>
                                        <button class="btn btn-sm btn-success w-100 mb-2" type="button" onclick="window.getCurrentLocation('depart')">
                                            <i class="fas fa-location-arrow"></i> Utiliser ma position
                                        </button>
                                    </div>
                                    <div id="depart-info" class="location-info" style="display: none;">
                                        <strong><i class="fas fa-map-pin" style="color: #5A8DEE;"></i> Départ sélectionné:</strong>
                                        <div id="depart-details"></div>
                                        <div id="depart-coordinates" class="coordinates-display"></div>
                                    </div>
                                    <input type="hidden" id="depart_lat" name="depart_lat">
                                    <input type="hidden" id="depart_lng" name="depart_lng">
                                    <input type="hidden" id="depart_name" name="depart_name">
                                </div>
                            </div>
                        </div>
                        <div class="card mb-1">
                            <div class="card-header p-1">
                                <h4 class="card-title">
                                    <i class="fas fa-flag-checkered" style="color: #28a745;"></i> 
                                    {{ __('Destination') }}
                                </h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body pt-0 pb-0">
                                    <div class="location-type-selector">
                                        <label>{{ __('Selection Method:') }}</label>
                                        <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                            <label class="btn btn-outline-primary active" id="dest-site-btn">
                                                <input type="radio" name="dest-type" value="site" checked> 
                                                <i class="fas fa-building"></i> Site
                                            </label>
                                            <label class="btn btn-outline-primary" id="dest-map-btn">
                                                <input type="radio" name="dest-type" value="map"> 
                                                <i class="fas fa-map-marker-alt"></i> Carte
                                            </label>
                                        </div>
                                    </div>
                                    <div id="dest-site-selector" class="site-selector">
                                        <label for="dest_site">{{ __('Select Site:') }}</label>
                                        <select id="dest_site" class="form-control select2">
                                            <option value="">{{ __('Choose a site...') }}</option>
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}" 
                                                        data-lat="{{ $site->latitude }}" 
                                                        data-lng="{{ $site->longitude }}"
                                                        data-name="{{ $site->name }}">
                                                    {{ $site->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div id="dest-map-selector" class="map-selector" style="display: none;">
                                        <div class="search-container">
                                            <div class="search-tabs">
                                                <button class="search-tab active" data-tab="dest-search">Recherche</button>
                                                <button class="search-tab" data-tab="dest-coordinates">Coordonnées</button>
                                            </div>
                                            <div class="search-tab-content" id="tab-dest-search">
                                                <div class="search-input-wrapper">
                                                    <div class="autoComplete_wrapper">
                                                        <input type="text" id="dest-search-input" 
                                                            placeholder="Rechercher une adresse en Tunisie..." 
                                                            class="form-control"
                                                            >
                                                        <div class="autoComplete_loader"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="search-tab-content" id="tab-dest-coordinates" style="display: none;">
                                                <div class="coordinate-input-group">
                                                    <input type="text" id="dest-coord-lat" placeholder="Latitude" class="form-control">
                                                    <input type="text" id="dest-coord-lng" placeholder="Longitude" class="form-control">
                                                    <button class="btn btn-primary" type="button" onclick="window.searchByCoordinates('dest')">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                                <small class="text-muted">Ex: 36.8065, 10.1815 (Tunis)</small>
                                            </div>
                                        </div>
                                        <button class="btn btn-sm btn-success w-100 mb-2" type="button" onclick="window.getCurrentLocation('dest')">
                                            <i class="fas fa-location-arrow"></i> Utiliser ma position
                                        </button>
                                    </div>
                                    <div id="dest-info" class="location-info" style="display: none;">
                                        <strong><i class="fas fa-flag-checkered" style="color: #28a745;"></i> Destination sélectionnée:</strong>
                                        <div id="dest-details"></div>
                                        <div id="dest-coordinates" class="coordinates-display"></div>
                                    </div>
                                    <input type="hidden" id="dest_lat" name="dest_lat">
                                    <input type="hidden" id="dest_lng" name="dest_lng">
                                    <input type="hidden" id="dest_name" name="dest_name">
                                </div>
                            </div>
                        </div>
                        <div class="selected-locations-panel">
                            <h5><i class="fas fa-list"></i> Points sélectionnés</h5>
                            <div id="selected-locations-list">
                                <p class="text-muted text-center">Aucun point sélectionné</p>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-lg w-100" id="calculate-route" disabled>
                            <i class="fas fa-route"></i> {{ __('Calculer l\'itinéraire') }}
                        </button>
                        <div id="route-info" class="route-info" style="display: none;"></div>
                        <div class="trip-selector-section">
                            <div class="section-title">
                                <i class="fas fa-bus"></i> 
                                {{ __('Analyse des circuits') }}
                            </div>
                            <p class="text-muted small">
                                <i class="fas fa-info-circle"></i> 
                                Cliquez sur "Comparer tous les circuits" pour voir l'impact de l'ajout du passager sur chaque circuit disponible.
                            </p>
                            
                            <button class="btn-compare-all" id="compare-all-trips-btn" disabled>
                                <i class="fas fa-chart-bar"></i> Comparer tous les circuits
                            </button>
                            
                            <!-- Résumé du circuit sélectionné -->
                            <div id="trip-summary" class="trip-route-info" style="display: none;">
                                <strong><i class="fas fa-chart-bar"></i> Circuit sélectionné:</strong>
                                <div id="trip-summary-content"></div>
                            </div>
                        </div>
                        
                        <!-- Données des trips en JSON pour JavaScript -->
                        <script id="trips-data" type="application/json">
                            @json($trips)
                        </script>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <div class="float-right">
                                    <span class="map-overlay mr-1">
                                        <small>
                                            <i class="fas fa-info-circle"></i> 
                                            <span id="selection-mode-indicator">Sélectionnez un point sur la carte</span>
                                        </small>
                                    </span>
                                    <button class="btn btn-sm btn-outline-primary" id="toggle-routing" type="button">
                                        <i class="fas fa-chevron-up"></i> Itinéraire
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="clear-all-markers" type="button">
                                        <i class="fas fa-trash"></i> Tout effacer
                                    </button>
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="card-body p-0">
                                    <div class="map-container">
                                        <div id="main-map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    <div class="modal animated bounceInUp text-left trip-summary-modal" id="allTripsModal" tabindex="-1" role="dialog" aria-labelledby="validateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-chart-line"></i> 
                        Comparaison des circuits
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-header bg-light">
                    <div class="w-100">
                        <strong><i class="fas fa-user"></i> Passager:</strong> 
                        <span id="modal-pickup-name">-</span> 
                        <i class="fas fa-arrow-right mx-2"></i> 
                        <span id="modal-dropoff-name">-</span><br>
                        <small class="text-muted">
                            <strong>Trajet direct:</strong> <span id="modal-direct-distance">-</span> km 
                            (<span id="modal-direct-time">-</span> min)
                        </small>
                    </div>
                </div>
                <div class="modal-body" id="modal-trips-results">
                    <div class="text-center py-4">
                        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2">Calcul des itinéraires optimaux...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
    <script>
        // Variables globales
        window.mainMap = null;
        window.departMarker = null;
        window.destMarker = null;
        window.departSelected = false;
        window.destSelected = false;
        window.routingControl = null;
        window.currentSelectionMode = 'depart';
        window.routingVisible = true;

        window.trips = JSON.parse(document.getElementById('trips-data').textContent);
        window.selectedTripId = null;
        window.originalRoute = null; // Itinéraire direct départ -> destination
        window.tripRoutes = {}; // Cache des itinéraires avec trip

        // Configuration Photon
        const PHOTON_API_URL = 'https://photon.komoot.io/api/';
        const PHOTON_REVERSE_URL = 'https://photon.komoot.io/reverse';

        // Calculer le résultat pour un trip spécifique
        window.calculateTripResult = function(trip) {
            const departLat = parseFloat($('#depart_lat').val());
            const departLng = parseFloat($('#depart_lng').val());
            const departName = $('#depart_name').val();
            
            const destLat = parseFloat($('#dest_lat').val());
            const destLng = parseFloat($('#dest_lng').val());
            const destName = $('#dest_name').val();
            
            // Itinéraire direct
            const directDistance = window.calculateDistance(departLat, departLng, destLat, destLng);
            const directTime = window.estimateTime(directDistance);
            
            const source = {
                lat: trip.source.lat,
                lng: trip.source.lng,
                name: trip.source.name,
                type: 'source'
            };
            
            const waypoints = trip.waypoints.map(wp => ({
                lat: wp.lat,
                lng: wp.lng,
                name: wp.name,
                type: 'waypoint'
            }));
            
            const pickup = {
                lat: departLat,
                lng: departLng,
                name: departName,
                type: 'pickup'
            };
            
            const dropoff = {
                lat: destLat,
                lng: destLng,
                name: destName,
                type: 'dropoff'
            };
            
            const bestRoute = window.findBestRoute(source, waypoints, pickup, dropoff);
            
            return {
                trip: trip,
                directDistance: directDistance,
                directTime: directTime,
                optimalDistance: bestRoute.distance,
                optimalTime: window.estimateTime(bestRoute.distance),
                distanceDiff: bestRoute.distance - directDistance,
                timeDiff: window.estimateTime(bestRoute.distance) - directTime,
                bestRoute: bestRoute,
                source: source,
                pickup: pickup,
                dropoff: dropoff
            };
        };

        // Calculer tous les résultats et afficher le modal
        window.calculateAllTrips = function() {
            if (!window.departSelected || !window.destSelected) {
                alert('Veuillez sélectionner un point de départ et une destination');
                return;
            }
            
            // Mettre à jour les infos du modal
            $('#modal-pickup-name').text($('#depart_name').val().split(',')[0]);
            $('#modal-dropoff-name').text($('#dest_name').val().split(',')[0]);
            
            const directDistance = window.calculateDistance(
                parseFloat($('#depart_lat').val()),
                parseFloat($('#depart_lng').val()),
                parseFloat($('#dest_lat').val()),
                parseFloat($('#dest_lng').val())
            );
            const directTime = window.estimateTime(directDistance);
            
            $('#modal-direct-distance').text(directDistance.toFixed(2));
            $('#modal-direct-time').text(Math.round(directTime));
            
            // Afficher le modal
            $('#allTripsModal').modal('show');
            
            // Calculer tous les résultats
            setTimeout(() => {
                const results = window.trips.map(trip => window.calculateTripResult(trip));
                
                // Trier par distance optimale (du plus court au plus long)
                results.sort((a, b) => a.optimalDistance - b.optimalDistance);
                
                // Stocker les résultats globalement
                window.allTripResults = results;
                
                // Afficher les résultats
                let html = '';
                
                results.forEach((result, index) => {
                    const isBest = index === 0;
                    
                    html += `
                        <div class="trip-result-card" data-trip-id="${result.trip.id}" onclick="window.selectTripFromModal(${result.trip.id})">
                            <div class="trip-result-header">
                                <span class="trip-result-name">
                                    ${index + 1}. ${result.trip.name}
                                </span>
                                <span class="trip-result-badge ${isBest ? 'best' : ''}">
                                    ${isBest ? '🏆 MEILLEUR CHOIX' : `Rang ${index + 1}`}
                                </span>
                            </div>
                            <div class="trip-result-stats">
                                <span class="trip-result-stat">
                                    <i class="fas fa-road"></i> 
                                    ${result.optimalDistance.toFixed(2)} km
                                </span>
                                <span class="trip-result-stat">
                                    <i class="fas fa-clock"></i> 
                                    ${Math.round(result.optimalTime)} min
                                </span>
                                <span class="trip-result-stat trip-result-diff">
                                    <i class="fas fa-plus-circle"></i> 
                                    +${result.distanceDiff.toFixed(2)} km
                                </span>
                            </div>
                            <div class="trip-result-eta">
                                <i class="fas fa-route"></i> 
                                ${result.trip.source.name} → 
                                ${result.bestRoute.sequence.map(p => {
                                    if (p.type === 'pickup') return '<span style="color:#5A8DEE;">🚗 Prise</span>';
                                    if (p.type === 'dropoff') return '<span style="color:#28a745;">🏁 Dépose</span>';
                                    return p.name.split(',')[0];
                                }).join(' → ')}
                            </div>
                        </div>
                    `;
                });
                
                $('#modal-trips-results').html(html);
                
                // Mettre en évidence le meilleur choix
                if (results.length > 0) {
                    const bestTripId = results[0].trip.id;
                    window.selectedTripId = bestTripId;
                    window.compareWithTrip(bestTripId);
                }
            }, 100);
        };

        // Sélectionner un trip depuis le modal
        window.selectTripFromModal = function(tripId) {
            // Mettre à jour l'UI du modal
            $(`.trip-result-card`).removeClass('selected');
            $(`.trip-result-card[data-trip-id="${tripId}"]`).addClass('selected');
            
            window.selectedTripId = tripId;
            window.compareWithTrip(tripId);
            
            // Fermer le modal
            $('#allTripsModal').modal('hide');
        };

        // Générer toutes les permutations d'un tableau
        window.permute = function(arr) {
            if (arr.length <= 1) return [arr];
            let result = [];
            for (let i = 0; i < arr.length; i++) {
                let current = arr[i];
                let remaining = [...arr.slice(0, i), ...arr.slice(i + 1)];
                let perms = window.permute(remaining);
                for (let perm of perms) {
                    result.push([current, ...perm]);
                }
            }
            return result;
        };

        // Trouver le meilleur chemin avec contraintes
        window.findBestRoute = function(source, waypoints, pickup, dropoff) {
            // Tous les points à visiter APRÈS la source
            const points = [...waypoints];
            
            // Tester toutes les positions possibles pour pickup et dropoff
            // pickup doit être AVANT dropoff
            let bestRoute = null;
            let bestDistance = Infinity;
            
            const n = points.length;
            
            // Pour chaque position possible du pickup (0 à n)
            for (let p = 0; p <= n; p++) {
                // Pour chaque position possible du dropoff (après pickup)
                for (let d = p; d <= n; d++) {
                    // Construire la séquence complète
                    let sequence = [];
                    
                    // Ajouter les points avant pickup
                    for (let i = 0; i < p; i++) {
                        sequence.push(points[i]);
                    }
                    
                    // Ajouter pickup
                    sequence.push(pickup);
                    
                    // Ajouter les points entre pickup et dropoff
                    for (let i = p; i < d; i++) {
                        sequence.push(points[i]);
                    }
                    
                    // Ajouter dropoff
                    sequence.push(dropoff);
                    
                    // Ajouter les points après dropoff
                    for (let i = d; i < n; i++) {
                        sequence.push(points[i]);
                    }
                    
                    // Calculer la distance totale de cette séquence
                    let totalDistance = 0;
                    let current = source;
                    
                    for (let point of sequence) {
                        totalDistance += window.calculateDistance(
                            current.lat, current.lng,
                            point.lat, point.lng
                        );
                        current = point;
                    }
                    
                    if (totalDistance < bestDistance) {
                        bestDistance = totalDistance;
                        bestRoute = {
                            sequence: sequence,
                            distance: totalDistance
                        };
                    }
                }
            }
            
            return bestRoute;
        };

        // Comparer l'itinéraire direct avec l'itinéraire incluant le trip (optimisé)
        window.compareWithTrip = function(tripId) {
            const trip = window.trips.find(t => t.id === tripId);
            if (!trip) return;
            
            const departLat = parseFloat($('#depart_lat').val());
            const departLng = parseFloat($('#depart_lng').val());
            const departName = $('#depart_name').val();
            
            const destLat = parseFloat($('#dest_lat').val());
            const destLng = parseFloat($('#dest_lng').val());
            const destName = $('#dest_name').val();
            
            // Itinéraire direct (pickup -> dropoff)
            const directDistance = window.calculateDistance(departLat, departLng, destLat, destLng);
            const directTime = window.estimateTime(directDistance);
            
            // Source du circuit (départ OBLIGATOIRE)
            const source = {
                lat: trip.source.lat,
                lng: trip.source.lng,
                name: trip.source.name,
                type: 'source'
            };
            
            // Waypoints du circuit
            const waypoints = trip.waypoints.map(wp => ({
                lat: wp.lat,
                lng: wp.lng,
                name: wp.name,
                type: 'waypoint'
            }));
            
            // Pickup du passager
            const pickup = {
                lat: departLat,
                lng: departLng,
                name: departName,
                type: 'pickup'
            };
            
            // Dropoff du passager
            const dropoff = {
                lat: destLat,
                lng: destLng,
                name: destName,
                type: 'dropoff'
            };
            
            // Trouver la meilleure route (source toujours en premier)
            const bestRoute = window.findBestRoute(source, waypoints, pickup, dropoff);
            
            const tripDistance = bestRoute.distance;
            const tripTime = window.estimateTime(tripDistance);
            
            // Différences
            const distanceDiff = tripDistance - directDistance;
            const timeDiff = tripTime - directTime;
            
            // Afficher la comparaison
            const comparisonHtml = `
                <div class="comparison-row">
                    <span class="comparison-label"><i class="fas fa-road"></i> Distance:</span>
                    <span>
                        <span class="comparison-value before">${directDistance.toFixed(2)} km</span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span class="comparison-value after">${tripDistance.toFixed(2)} km</span>
                        <span class="comparison-diff ${distanceDiff > 0 ? 'diff-increase' : 'diff-decrease'}">
                            ${distanceDiff > 0 ? '+' : ''}${distanceDiff.toFixed(2)} km
                        </span>
                    </span>
                </div>
                <div class="comparison-row">
                    <span class="comparison-label"><i class="fas fa-clock"></i> Temps estimé:</span>
                    <span>
                        <span class="comparison-value before">${Math.round(directTime)} min</span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span class="comparison-value after">${Math.round(tripTime)} min</span>
                        <span class="comparison-diff ${timeDiff > 0 ? 'diff-increase' : 'diff-decrease'}">
                            ${timeDiff > 0 ? '+' : ''}${Math.round(timeDiff)} min
                        </span>
                    </span>
                </div>
                <div class="comparison-row">
                    <span class="comparison-label"><i class="fas fa-exchange-alt"></i> Détour:</span>
                    <span>
                        <span class="comparison-value">${((distanceDiff / directDistance) * 100).toFixed(1)}%</span>
                    </span>
                </div>
            `;
            
            $(`#trip-comparison-${tripId}`).html(comparisonHtml);
            
            // Construire la liste des étapes pour l'affichage
            let etapesHtml = '<ol style="margin-top:10px;padding-left:20px;">';
            etapesHtml += `<li><strong style="color:#ff6b6b;"><i class="fas fa-flag"></i> DÉPART CIRCUIT:</strong> ${source.name}</li>`;
            
            let stepNum = 2;
            bestRoute.sequence.forEach(point => {
                if (point.type === 'pickup') {
                    etapesHtml += `<li><strong style="color:#5A8DEE;"><i class="fas fa-user-plus"></i> PRISE EN CHARGE:</strong> ${point.name}</li>`;
                } else if (point.type === 'dropoff') {
                    etapesHtml += `<li><strong style="color:#28a745;"><i class="fas fa-flag-checkered"></i> DÉPOSE:</strong> ${point.name}</li>`;
                } else {
                    etapesHtml += `<li>Étape ${stepNum}: ${point.name}</li>`;
                    stepNum++;
                }
            });
            etapesHtml += '</ol>';
            
            // Afficher le résumé
            const summaryHtml = `
                <div class="mt-2">
                    <strong>Circuit sélectionné:</strong> ${trip.name}<br>
                    <strong>Trajet direct passager:</strong> ${directDistance.toFixed(2)} km (${Math.round(directTime)} min)<br>
                    <strong>Trajet optimal avec circuit:</strong> ${tripDistance.toFixed(2)} km (${Math.round(tripTime)} min)<br>
                    <strong>Différence:</strong> 
                    <span class="${distanceDiff > 0 ? 'text-danger' : 'text-success'}">
                        +${distanceDiff.toFixed(2)} km (+${Math.round(timeDiff)} min)
                    </span>
                    <div style="margin-top:10px;padding-top:10px;border-top:1px solid #ffc107;">
                        <strong><i class="fas fa-list-ol"></i> Itinéraire optimisé:</strong>
                        ${etapesHtml}
                    </div>
                </div>
            `;
            
            $('#trip-summary-content').html(summaryHtml);
            $('#trip-summary').show();
            
            // Afficher l'itinéraire optimisé sur la carte
            window.displayTripRouteOptimized(trip, bestRoute);
        };

        // Afficher l'itinéraire optimisé sur la carte
        window.displayTripRouteOptimized = function(trip, bestRoute) {
            if (window.routingControl) {
                window.mainMap.removeControl(window.routingControl);
            }
            
            const source = trip.source;
            
            // Construire les waypoints dans l'ordre optimisé
            const waypoints = [
                L.latLng(source.lat, source.lng)  // 0: Source du circuit (DÉPART)
            ];
            
            // Ajouter la séquence optimisée
            bestRoute.sequence.forEach(point => {
                waypoints.push(L.latLng(point.lat, point.lng));
            });
            
            window.routingControl = L.Routing.control({
                waypoints: waypoints,
                routeWhileDragging: false,
                showAlternatives: false,
                lineOptions: {
                    styles: [
                        {color: '#ff6b6b', weight: 5}  // Segments du circuit
                    ]
                },
                language: 'fr',
                createMarker: function(i, waypoint, n) {
                    let color, icon, label;
                    
                    if (i === 0) {
                        color = '#ff6b6b';
                        icon = 'fa-flag';
                        label = 'DÉPART CIRCUIT';
                    } else {
                        const point = bestRoute.sequence[i - 1];
                        if (point.type === 'pickup') {
                            color = '#5A8DEE';
                            icon = 'fa-user-plus';
                            label = 'PRISE EN CHARGE';
                        } else if (point.type === 'dropoff') {
                            color = '#28a745';
                            icon = 'fa-flag-checkered';
                            label = 'DÉPOSE';
                        } else {
                            color = '#ffc107';
                            icon = 'fa-bus';
                            label = `Étape circuit`;
                        }
                    }
                    
                    return L.marker(waypoint.latLng, {
                        icon: L.divIcon({
                            className: 'custom-div-icon',
                            html: `<div style='background-color:${color};width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;border:2px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.3);'><i class='fas ${icon}' style='font-size:12px;'></i></div>`,
                            iconSize: [28, 28],
                            iconAnchor: [14, 28],
                            popupAnchor: [0, -28]
                        })
                    }).bindPopup(`<b>${label}</b><br>${waypoint.latLng.lat.toFixed(6)}, ${waypoint.latLng.lng.toFixed(6)}`);
                },
                collapsible: true
            }).addTo(window.mainMap);
            
            window.routingControl.on('routesfound', function(e) {
                const bounds = L.latLngBounds(waypoints);
                window.mainMap.fitBounds(bounds, {padding: [50, 50]});
            });
        };

        // Fonction pour trouver le meilleur ordre des waypoints (algorithme du plus proche voisin)
        window.findOptimalWaypointOrder = function(points, startPoint, endPoint) {
            if (points.length === 0) return [];
            
            let unvisited = [...points];
            let ordered = [];
            let currentPoint = startPoint;
            
            while (unvisited.length > 0) {
                // Trouver le point le plus proche du point courant
                let nearestIndex = 0;
                let nearestDistance = window.calculateDistance(
                    currentPoint.lat, currentPoint.lng,
                    unvisited[0].lat, unvisited[0].lng
                );
                
                for (let i = 1; i < unvisited.length; i++) {
                    const distance = window.calculateDistance(
                        currentPoint.lat, currentPoint.lng,
                        unvisited[i].lat, unvisited[i].lng
                    );
                    if (distance < nearestDistance) {
                        nearestDistance = distance;
                        nearestIndex = i;
                    }
                }
                
                // Ajouter le point le plus proche à la liste ordonnée
                const nearestPoint = unvisited[nearestIndex];
                ordered.push({
                    ...nearestPoint,
                    distanceFromPrevious: nearestDistance
                });
                currentPoint = nearestPoint;
                unvisited.splice(nearestIndex, 1);
            }
            
            return ordered;
        };

        // Fonction pour calculer la distance entre deux points (formule de Haversine)
        window.calculateDistance = function(lat1, lon1, lat2, lon2) {
            const R = 6371; // Rayon de la Terre en km
            const dLat = (lat2 - lat1) * Math.PI / 180;
            const dLon = (lon2 - lon1) * Math.PI / 180;
            const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                      Math.sin(dLon/2) * Math.sin(dLon/2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            return R * c;
        };
        
        // Fonction pour calculer la distance totale d'un itinéraire
        window.calculateTotalDistance = function(waypoints) {
            let total = 0;
            for (let i = 0; i < waypoints.length - 1; i++) {
                total += window.calculateDistance(
                    waypoints[i].lat, waypoints[i].lng,
                    waypoints[i+1].lat, waypoints[i+1].lng
                );
            }
            return total;
        };
        
        // Estimer le temps de trajet (en supposant une vitesse moyenne de 40 km/h)
        window.estimateTime = function(distanceKm) {
            const speedKmh = 40;
            return (distanceKm / speedKmh) * 60; // en minutes
        };
        
        // Sélectionner un trip
        window.selectTrip = function(tripId) {
            // Vérifier que départ et destination sont sélectionnés
            if (!window.departSelected || !window.destSelected) {
                alert('Veuillez d\'abord sélectionner un point de départ et une destination');
                return;
            }
            
            // Mise à jour de l'UI
            $('.trip-card').removeClass('selected');
            $(`.trip-card[data-trip-id="${tripId}"]`).addClass('selected');
            
            window.selectedTripId = tripId;
            
            // Calculer et afficher la comparaison
            window.compareWithTrip(tripId);
        };

        // Afficher l'itinéraire complet avec le trip sur la carte
        window.displayTripRoute = function(trip, departLat, departLng, destLat, destLng) {
            if (window.routingControl) {
                window.mainMap.removeControl(window.routingControl);
            }
            
            // Construire les waypoints: départ -> source -> tous les waypoints -> destination
            const waypoints = [
                L.latLng(departLat, departLng),
                L.latLng(trip.source.lat, trip.source.lng)
            ];
            
            // Ajouter tous les waypoints du trip
            trip.waypoints.forEach(wp => {
                waypoints.push(L.latLng(wp.lat, wp.lng));
            });
            
            // Ajouter la destination
            waypoints.push(L.latLng(destLat, destLng));
            
            window.routingControl = L.Routing.control({
                waypoints: waypoints,
                routeWhileDragging: false,
                showAlternatives: false,
                lineOptions: {
                    styles: [
                        {color: '#5A8DEE', weight: 6},
                        {color: '#ffc107', weight: 4, opacity: 0.7}, // Segment du trip
                        {color: '#28a745', weight: 6} // Fin
                    ]
                },
                language: 'fr',
                createMarker: function(i, waypoint, n) {
                    let color, icon;
                    if (i === 0) {
                        // Départ
                        color = '#5A8DEE';
                        icon = 'fa-map-pin';
                    } else if (i === n - 1) {
                        // Destination
                        color = '#28a745';
                        icon = 'fa-flag-checkered';
                    } else {
                        // Points du trip
                        color = '#ffc107';
                        icon = 'fa-bus';
                    }
                    
                    return L.marker(waypoint.latLng, {
                        icon: L.divIcon({
                            className: 'custom-div-icon',
                            html: `<div style='background-color:${color};width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;border:2px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.3);'><i class='fas ${icon}' style='font-size:12px;'></i></div>`,
                            iconSize: [24, 24],
                            iconAnchor: [12, 24],
                            popupAnchor: [0, -24]
                        })
                    }).bindPopup(`<b>${i === 0 ? 'DÉPART' : (i === n-1 ? 'DESTINATION' : `Étape ${i}`)}</b><br>${waypoint.latLng.lat.toFixed(6)}, ${waypoint.latLng.lng.toFixed(6)}`);
                },
                collapsible: true
            }).addTo(window.mainMap);
            
            window.routingControl.on('routesfound', function(e) {
                const bounds = L.latLngBounds(waypoints);
                window.mainMap.fitBounds(bounds, {padding: [50, 50]});
            });
        };
        
        // Surcharger le calculate-route pour sauvegarder l'itinéraire original
        const originalCalculateRoute = $('#calculate-route').click;
        $('#calculate-route').off('click').click(function() {
            const departLat = $('#depart_lat').val();
            const departLng = $('#depart_lng').val();
            const destLat = $('#dest_lat').val();
            const destLng = $('#dest_lng').val();
            
            if (!departLat || !destLat) {
                alert('Veuillez sélectionner un point de départ et une destination');
                return;
            }
            
            // Sauvegarder l'itinéraire original
            window.originalRoute = {
                depart: {lat: departLat, lng: departLng},
                dest: {lat: destLat, lng: destLng}
            };
            
            if (window.routingControl) {
                window.mainMap.removeControl(window.routingControl);
            }
            
            window.routingControl = L.Routing.control({
                waypoints: [
                    L.latLng(departLat, departLng),
                    L.latLng(destLat, destLng)
                ],
                routeWhileDragging: false,
                showAlternatives: true,
                lineOptions: {
                    styles: [{color: '#5A8DEE', weight: 6}]
                },
                language: 'fr',
                createMarker: function() { return null; },
                collapsible: true
            }).addTo(window.mainMap);
            
            window.routingControl.on('routesfound', function(e) {
                const routes = e.routes;
                const summary = routes[0].summary;
                $('#route-info').html(`
                    <strong><i class="fas fa-info-circle"></i> Informations sur l'itinéraire direct:</strong><br>
                    Distance: ${(summary.totalDistance / 1000).toFixed(2)} km<br>
                    Temps estimé: ${Math.round(summary.totalTime / 60)} minutes
                `).show();
                
                const bounds = L.latLngBounds([
                    [departLat, departLng],
                    [destLat, destLng]
                ]);
                window.mainMap.fitBounds(bounds, {padding: [50, 50]});
                window.routingVisible = true;
                $('#toggle-routing').html('<i class="fas fa-chevron-up"></i> Itinéraire');
            });
            
            // Réinitialiser la sélection de trip
            if (window.selectedTripId) {
                // Recalculer avec le trip sélectionné si nécessaire
                window.compareWithTrip(window.selectedTripId);
            }
            
            $('#route-info').html('<i class="fas fa-spinner fa-spin"></i> Calcul de l\'itinéraire...').show();
        });
        
        // Surcharger clearLocation pour réinitialiser aussi le trip
        const originalClearLocation = window.clearLocation;
        window.clearLocation = function(type) {
            originalClearLocation(type);
            
            // Réinitialiser la sélection de trip
            window.selectedTripId = null;
            $('.trip-card').removeClass('selected');
            $('#trip-summary').hide();
            $('.trip-comparison').empty();
        };

        $(document).ready(function() {
            // Configuration de l'autocomplétion avec Photon (focus sur la Tunisie)
            const createAutoComplete = (selector, type) => {
                const wrapper = document.querySelector(selector).closest('.autoComplete_wrapper');
                const loader = wrapper.querySelector('.autoComplete_loader');
                
                const autoCompleteInstance = new autoComplete({
                    selector: selector,
                    placeHolder: "Rechercher...",
                    data: {
                        src: async (query) => {
                            try {
                                // Afficher le loader
                                wrapper.classList.add('loading');
                                
                                // Utilisation de Photon avec bounding box pour la Tunisie
                                // Tunisie: min_lon=7.5, min_lat=30.2, max_lon=11.6, max_lat=37.5
                                const response = await fetch(
                                    `${PHOTON_API_URL}?q=${encodeURIComponent(query)}&limit=5&lang=fr&bbox=7.5,30.2,11.6,37.5`
                                );
                                const data = await response.json();
                                
                                // Cacher le loader
                                wrapper.classList.remove('loading');
                                
                                //console.log('Résultats Photon reçus:', data);
                                
                                // Formatage des résultats Photon
                                return data.features.map(feature => {
                                    const props = feature.properties;
                                    let displayName = '';
                                    if (props.name) displayName = props.name;
                                    if (props.street) displayName = displayName ? `${displayName}, ${props.street}` : props.street;
                                    if (props.city) displayName = displayName ? `${displayName}, ${props.city}` : props.city;
                                    if (props.state) displayName = displayName ? `${displayName}, ${props.state}` : props.state;
                                    if (props.country) displayName = displayName ? `${displayName}, ${props.country}` : props.country;
                                    return {
                                        display: displayName || 'Adresse inconnue',
                                        lat: feature.geometry.coordinates[1],
                                        lon: feature.geometry.coordinates[0],
                                        name: displayName || 'Adresse inconnue'
                                    };
                                });
                            } catch (error) {
                                // Cacher le loader en cas d'erreur
                                wrapper.classList.remove('loading');
                                console.error('Erreur de recherche Photon:', error);
                                return [];
                            }
                        },
                        keys: ["display"]
                    },
                    resultsList: {
                        maxResults: 5,
                        tabSelect: true
                    },
                    resultItem: {
                        highlight: true
                    },
                    events: {
                        input: {
                            selection: (event) => {
                                const selection = event.detail.selection.value;
                                //console.log('Sélection Photon:', selection);
                                if (type === 'depart') {
                                    window.setDepartMarker(parseFloat(selection.lat), parseFloat(selection.lon), selection.name);
                                } else {
                                    window.setDestMarker(parseFloat(selection.lat), parseFloat(selection.lon), selection.name);
                                }
                                window.mainMap.setView([selection.lat, selection.lon], 13);
                            }
                        }
                    }
                });
                
                // Ajouter un gestionnaire pour les erreurs réseau
                const inputElement = document.querySelector(selector);
                inputElement.addEventListener('search-error', () => {
                    wrapper.classList.remove('loading');
                });
                
                return autoCompleteInstance;
            };
            
            // Initialiser l'autocomplétion avec Photon
            const autoCompleteDepart = createAutoComplete("#depart-search-input", 'depart');
            const autoCompleteDest = createAutoComplete("#dest-search-input", 'dest');
            
            // Gestion des onglets de recherche
            $(document).on('click', '.search-tab', function() {
                const tabId = $(this).data('tab');
                const container = $(this).closest('.search-container');
                container.find('.search-tab').removeClass('active');
                $(this).addClass('active');
                container.find('.search-tab-content').hide();
                $(`#tab-${tabId}`).show();
            });
            
            // Initialiser la carte principale
            window.initMap = function() {
                window.mainMap = L.map('main-map').setView([36.8065, 10.1815], 7);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(window.mainMap);
                window.mainMap.on('click', function(e) {
                    window.reverseGeocode(e.latlng.lat, e.latlng.lng);
                });
            };
            
            // Géocodage inverse avec Photon
            window.reverseGeocode = function(lat, lng) {
                fetch(`${PHOTON_REVERSE_URL}?lat=${lat}&lon=${lng}&lang=fr`)
                    .then(response => response.json())
                    .then(data => {
                        let name = `Position (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
                        
                        if (data.features && data.features.length > 0) {
                            const props = data.features[0].properties;
                            let displayName = '';
                            
                            if (props.name) displayName = props.name;
                            if (props.street) displayName = displayName ? `${displayName}, ${props.street}` : props.street;
                            if (props.city) displayName = displayName ? `${displayName}, ${props.city}` : props.city;
                            if (props.state) displayName = displayName ? `${displayName}, ${props.state}` : props.state;
                            if (props.country) displayName = displayName ? `${displayName}, ${props.country}` : props.country;
                            
                            name = displayName || name;
                        }
                        
                        if (window.currentSelectionMode === 'depart') {
                            window.setDepartMarker(lat, lng, name);
                        } else {
                            window.setDestMarker(lat, lng, name);
                        }
                    })
                    .catch(error => {
                        console.error('Erreur de géocodage inverse Photon:', error);
                        const name = `Position (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
                        if (window.currentSelectionMode === 'depart') {
                            window.setDepartMarker(lat, lng, name);
                        } else {
                            window.setDestMarker(lat, lng, name);
                        }
                    });
            };
            
            // Définir le marqueur de départ
            window.setDepartMarker = function(lat, lng, name) {
                if (window.departMarker) {
                    window.mainMap.removeLayer(window.departMarker);
                }
                window.departMarker = L.marker([lat, lng], {
                    icon: L.divIcon({
                        className: 'custom-div-icon',
                        html: "<div style='background-color:#5A8DEE;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;border:3px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.3);'><i class='fas fa-map-pin'></i></div>",
                        iconSize: [30, 30],
                        iconAnchor: [15, 30],
                        popupAnchor: [0, -30]
                    })
                }).addTo(window.mainMap)
                    .bindPopup(`<b>DÉPART</b><br>${name}<br>${lat.toFixed(6)}, ${lng.toFixed(6)}`)
                    .openPopup();
                $('#depart_lat').val(lat);
                $('#depart_lng').val(lng);
                $('#depart_name').val(name);
                $('#depart-details').html(name);
                $('#depart-coordinates').html(`Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}`);
                $('#depart-info').show();
                window.departSelected = true;
                window.updateSelectedLocationsList();
                window.checkRouteButton();
                window.updateSelectionMode();
            };
            
            // Définir le marqueur de destination
            window.setDestMarker = function(lat, lng, name) {
                if (window.destMarker) {
                    window.mainMap.removeLayer(window.destMarker);
                }
                window.destMarker = L.marker([lat, lng], {
                    icon: L.divIcon({
                        className: 'custom-div-icon',
                        html: "<div style='background-color:#28a745;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;border:3px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.3);'><i class='fas fa-flag-checkered'></i></div>",
                        iconSize: [30, 30],
                        iconAnchor: [15, 30],
                        popupAnchor: [0, -30]
                    })
                }).addTo(window.mainMap)
                    .bindPopup(`<b>DESTINATION</b><br>${name}<br>${lat.toFixed(6)}, ${lng.toFixed(6)}`)
                    .openPopup();
                $('#dest_lat').val(lat);
                $('#dest_lng').val(lng);
                $('#dest_name').val(name);
                $('#dest-details').html(name);
                $('#dest-coordinates').html(`Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}`);
                $('#dest-info').show();
                window.destSelected = true;
                window.updateSelectedLocationsList();
                window.checkRouteButton();
                window.updateSelectionMode();
            };
            
            // Mettre à jour la liste des points sélectionnés
            window.updateSelectedLocationsList = function() {
                const listEl = $('#selected-locations-list');
                listEl.empty();
                if (!window.departSelected && !window.destSelected) {
                    listEl.html('<p class="text-muted text-center">Aucun point sélectionné</p>');
                    return;
                }
                if (window.departSelected) {
                    const departName = $('#depart_name').val();
                    const departLat = $('#depart_lat').val();
                    const departLng = $('#depart_lng').val();
                    listEl.append(`
                        <div class="location-item">
                            <div class="location-item-info">
                                <span class="location-badge depart">Départ</span>
                                <strong>${departName.split(',')[0]}</strong><br>
                                <small>${departLat}, ${departLng}</small>
                            </div>
                            <div class="location-item-actions">
                                <button class="btn btn-sm btn-outline-primary" onclick="window.focusOnLocation('depart')" type="button">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="window.clearLocation('depart')" type="button">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    `);
                }
                if (window.destSelected) {
                    const destName = $('#dest_name').val();
                    const destLat = $('#dest_lat').val();
                    const destLng = $('#dest_lng').val();
                    listEl.append(`
                        <div class="location-item">
                            <div class="location-item-info">
                                <span class="location-badge dest">Destination</span>
                                <strong>${destName.split(',')[0]}</strong><br>
                                <small>${destLat}, ${destLng}</small>
                            </div>
                            <div class="location-item-actions">
                                <button class="btn btn-sm btn-outline-primary" onclick="window.focusOnLocation('dest')" type="button">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="window.clearLocation('dest')" type="button">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    `);
                }
            };
            
            // Mettre à jour le mode de sélection
            window.updateSelectionMode = function() {
                if (!window.departSelected) {
                    window.currentSelectionMode = 'depart';
                    $('#selection-mode-indicator').html('<i class="fas fa-map-pin" style="color:#5A8DEE;"></i> Cliquez pour sélectionner le DÉPART');
                } else if (!window.destSelected) {
                    window.currentSelectionMode = 'dest';
                    $('#selection-mode-indicator').html('<i class="fas fa-flag-checkered" style="color:#28a745;"></i> Cliquez pour sélectionner la DESTINATION');
                } else {
                    $('#selection-mode-indicator').html('<i class="fas fa-check-circle" style="color:#28a745;"></i> Points sélectionnés');
                }
            };
            
            // Vérifier si le bouton de calcul d'itinéraire doit être activé
            window.checkRouteButton = function() {
                if (window.departSelected && window.destSelected) {
                    $('#calculate-route').prop('disabled', false);
                } else {
                    $('#calculate-route').prop('disabled', true);
                }
            };
            
            // Sélection de site
            $('#depart_site').change(function() {
                const selected = $(this).find('option:selected');
                const lat = selected.data('lat');
                const lng = selected.data('lng');
                const name = selected.data('name');
                if (lat && lng) {
                    window.setDepartMarker(lat, lng, name);
                    window.mainMap.setView([lat, lng], 13);
                }
            });
            
            $('#dest_site').change(function() {
                const selected = $(this).find('option:selected');
                const lat = selected.data('lat');
                const lng = selected.data('lng');
                const name = selected.data('name');
                if (lat && lng) {
                    window.setDestMarker(lat, lng, name);
                    window.mainMap.setView([lat, lng], 13);
                }
            });
            
            // Toggle entre site et carte
            $('#depart-site-btn').click(function() {
                $('#depart-site-selector').show();
                $('#depart-map-selector').hide();
                window.currentSelectionMode = 'depart';
            });
            
            $('#depart-map-btn').click(function() {
                $('#depart-site-selector').hide();
                $('#depart-map-selector').show();
                window.currentSelectionMode = 'depart';
                window.updateSelectionMode();
                setTimeout(() => window.mainMap.invalidateSize(), 100);
            });
            
            $('#dest-site-btn').click(function() {
                $('#dest-site-selector').show();
                $('#dest-map-selector').hide();
                window.currentSelectionMode = 'dest';
            });
            
            $('#dest-map-btn').click(function() {
                $('#dest-site-selector').hide();
                $('#dest-map-selector').show();
                window.currentSelectionMode = 'dest';
                window.updateSelectionMode();
                setTimeout(() => window.mainMap.invalidateSize(), 100);
            });
            
            // Toggle du panneau d'itinéraire
            $('#toggle-routing').click(function() {
                const container = document.querySelector('.leaflet-routing-container');
                if (container) {
                    if (window.routingVisible) {
                        container.style.display = 'none';
                        $(this).html('<i class="fas fa-chevron-down"></i> Itinéraire');
                    } else {
                        container.style.display = 'block';
                        $(this).html('<i class="fas fa-chevron-up"></i> Itinéraire');
                    }
                    window.routingVisible = !window.routingVisible;
                }
            });
            
            // Calculer l'itinéraire
            $('#calculate-route').click(function() {
                const departLat = $('#depart_lat').val();
                const departLng = $('#depart_lng').val();
                const destLat = $('#dest_lat').val();
                const destLng = $('#dest_lng').val();
                
                if (!departLat || !destLat) {
                    alert('Veuillez sélectionner un point de départ et une destination');
                    return;
                }
                
                if (window.routingControl) {
                    window.mainMap.removeControl(window.routingControl);
                }
                
                window.routingControl = L.Routing.control({
                    waypoints: [
                        L.latLng(departLat, departLng),
                        L.latLng(destLat, destLng)
                    ],
                    routeWhileDragging: false,
                    showAlternatives: true,
                    lineOptions: {
                        styles: [{color: '#5A8DEE', weight: 6}]
                    },
                    language: 'fr',
                    createMarker: function() { return null; },
                    collapsible: true
                }).addTo(window.mainMap);
                
                window.routingControl.on('routesfound', function(e) {
                    const routes = e.routes;
                    const summary = routes[0].summary;
                    $('#route-info').html(`
                        <strong><i class="fas fa-info-circle"></i> Informations sur l'itinéraire:</strong><br>
                        Distance: ${(summary.totalDistance / 1000).toFixed(2)} km<br>
                        Temps estimé: ${Math.round(summary.totalTime / 60)} minutes
                    `).show();
                    
                    const bounds = L.latLngBounds([
                        [departLat, departLng],
                        [destLat, destLng]
                    ]);
                    window.mainMap.fitBounds(bounds, {padding: [50, 50]});
                    window.routingVisible = true;
                    $('#toggle-routing').html('<i class="fas fa-chevron-up"></i> Itinéraire');
                });
                
                $('#route-info').html('<i class="fas fa-spinner fa-spin"></i> Calcul de l\'itinéraire...').show();
            });
            
            // Effacer tous les marqueurs
            $('#clear-all-markers').click(function() {
                window.clearLocation('depart');
                window.clearLocation('dest');
                if (window.routingControl) {
                    window.mainMap.removeControl(window.routingControl);
                    window.routingControl = null;
                }
                $('#route-info').hide();
            });
            
            // Initialiser la carte
            window.initMap();
            window.updateSelectionMode();

            const originalCheckRouteButton = window.checkRouteButton;
            window.checkRouteButton = function() {
                originalCheckRouteButton();
                
                if (window.departSelected && window.destSelected) {
                    $('.trip-selector-section').show();
                    $('#compare-all-trips-btn').prop('disabled', false);
                } else {
                    $('.trip-selector-section').hide();
                    $('#compare-all-trips-btn').prop('disabled', true);
                    window.selectedTripId = null;
                    $('#trip-summary').hide();
                }
            };
            
            // Gérer le clic sur le bouton de comparaison
            $('#compare-all-trips-btn').click(function() {
                window.calculateAllTrips();
            });
            
            // Cacher la section trip au départ
            $('.trip-selector-section').hide();
            
            // Supprimer l'ancien texte du paragraphe et le remplacer
            $('.trip-selector-section p.small').html(`
                <i class="fas fa-info-circle"></i> 
                Cliquez sur "Comparer tous les circuits" pour voir l'impact de l'ajout du passager sur chaque circuit disponible.
            `);
        });
        
        // Fonctions globales exposées
        window.searchByCoordinates = function(type) {
            const lat = $(`#${type}-coord-lat`).val();
            const lng = $(`#${type}-coord-lng`).val();
            
            if (lat && lng) {
                const latNum = parseFloat(lat);
                const lngNum = parseFloat(lng);
                
                if (isNaN(latNum) || isNaN(lngNum)) {
                    alert('Coordonnées invalides');
                    return;
                }
                
                if (type === 'depart') {
                    window.setDepartMarker(latNum, lngNum, `Coordonnées: ${lat}, ${lng}`);
                } else {
                    window.setDestMarker(latNum, lngNum, `Coordonnées: ${lat}, ${lng}`);
                }
                window.mainMap.setView([latNum, lngNum], 13);
            } else {
                alert('Veuillez entrer la latitude et la longitude');
            }
        };
        
        window.getCurrentLocation = function(type) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        
                        if (type === 'depart') {
                            window.setDepartMarker(lat, lng, 'Ma position actuelle');
                        } else {
                            window.setDestMarker(lat, lng, 'Ma position actuelle');
                        }
                        window.mainMap.setView([lat, lng], 13);
                    },
                    (error) => {
                        alert('Impossible d\'obtenir votre position: ' + error.message);
                    }
                );
            } else {
                alert('La géolocalisation n\'est pas supportée par votre navigateur');
            }
        };
        
        window.focusOnLocation = function(type) {
            const lat = $(`#${type}_lat`).val();
            const lng = $(`#${type}_lng`).val();
            
            if (lat && lng) {
                window.mainMap.setView([lat, lng], 13);
                if (type === 'depart' && window.departMarker) {
                    window.departMarker.openPopup();
                } else if (type === 'dest' && window.destMarker) {
                    window.destMarker.openPopup();
                }
            }
        };
        
        window.clearLocation = function(type) {
            if (type === 'depart') {
                if (window.departMarker) {
                    window.mainMap.removeLayer(window.departMarker);
                    window.departMarker = null;
                }
                $('#depart_lat, #depart_lng, #depart_name').val('');
                $('#depart-info').hide();
                window.departSelected = false;
            } else if (type === 'dest') {
                if (window.destMarker) {
                    window.mainMap.removeLayer(window.destMarker);
                    window.destMarker = null;
                }
                $('#dest_lat, #dest_lng, #dest_name').val('');
                $('#dest-info').hide();
                window.destSelected = false;
            }
            
            window.updateSelectedLocationsList();
            window.checkRouteButton();
            window.updateSelectionMode();
            
            if (window.routingControl && (!window.departSelected || !window.destSelected)) {
                window.mainMap.removeControl(window.routingControl);
                window.routingControl = null;
                $('#route-info').hide();
            }
        };
    </script>
@endpush