{{define "content"}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-8">
    <div class="bg-white shadow rounded-lg overflow-hidden" style="height: calc(100vh - 12rem);" x-data="compactJourneySearch()">
        <!-- Top Bar with Search Form -->
        <div class="border-b border-gray-200 p-4">
            <form method="GET" class="flex items-end">
            <div class="flex-1" x-data='{
                input: {{if .ViewState.departure}}"{{.ViewState.departure.Properties.label}}"{{else}}null{{end}},
                address: {{if .ViewState.departure}}JSON.stringify({{template "geojson" .ViewState.departure}}){{else}}null{{end}},
                addressObject: {{if .ViewState.departure}}{{template "geojson" .ViewState.departure }}{{else}}null{{end}},
                responselength: 0,
                async autocomplete() {
                    if(this.input == null || this.input == "") {
                        this.responselength = 0
                        return []
                    }
                    if(this.addressObject != null && this.input == this.addressObject.properties.label) {
                        this.responselength = 0
                        return []
                    }
                    if(this.input.length < 3) {
                        this.responselength = 0
                        return []
                    }
                    result = await fetch("https://api-adresse.data.gouv.fr/search/?q=" + this.input)
                    json = await result.json()
                    this.responselength = json["features"].length
                    return json["features"]
                },
                select(a) {
                    this.address = JSON.stringify(a)
                    this.addressObject = a
                    this.input = a.properties.label
                }
            }' class="relative">
                <input type="hidden" name="departure" x-model="address">
                <label for="departure-compact" class="block text-sm font-medium text-gray-700 mb-1">Départ</label>
                <input type="text"
                    id="departure-compact"
                    class="p-2 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-l-lg"
                    x-model="input"
                    placeholder="Adresse de départ">
                <ul x-show="responselength > 0"
                    class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm" tabindex="-1">
                    <template x-for="item in autocomplete">
                        <a href="#">
                            <li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
                                @click="select(item)">
                                <span class="font-normal block truncate" x-text="item.properties.label"></span>
                            </li>
                        </a>
                    </template>
                </ul>
            </div>

            <div class="flex-1" x-data='{
                input: {{if .ViewState.destination}}"{{.ViewState.destination.Properties.label}}"{{else}}null{{end}},
                address: {{if .ViewState.destination}}JSON.stringify({{template "geojson" .ViewState.destination}}){{else}}null{{end}},
                addressObject: {{if .ViewState.destination}}{{template "geojson" .ViewState.destination }}{{else}}null{{end}},
                responselength: 0,
                async autocomplete() {
                    if(this.input == null || this.input == "") {
                        this.responselength = 0
                        return []
                    }
                    if(this.addressObject != null && this.input == this.addressObject.properties.label) {
                        this.responselength = 0
                        return []
                    }
                    if(this.input.length < 3) {
                        this.responselength = 0
                        return []
                    }
                    result = await fetch("https://api-adresse.data.gouv.fr/search/?q=" + this.input)
                    json = await result.json()
                    this.responselength = json["features"].length
                    return json["features"]
                },
                select(a) {
                    this.address = JSON.stringify(a)
                    this.addressObject = a
                    this.input = a.properties.label
                }
            }' class="relative">
                <input type="hidden" name="destination" x-model="address">
                <label for="destination-compact" class="block text-sm font-medium text-gray-700 mb-1">Destination</label>
                <input type="text"
                    id="destination-compact"
                    class="p-2 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-none"
                    x-model="input"
                    placeholder="Adresse de destination">
                <ul x-show="responselength > 0"
                    class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm" tabindex="-1">
                    <template x-for="item in autocomplete">
                        <a href="#">
                            <li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
                                @click="select(item)">
                                <span class="font-normal block truncate" x-text="item.properties.label"></span>
                            </li>
                        </a>
                    </template>
                </ul>
            </div>

            <div class="w-40">
                <label for="departuredate-compact" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input type="date"
                       id="departuredate-compact"
                       name="departuredate"
                       value="{{.ViewState.departuredate}}"
                       class="p-2 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-none">
            </div>

            <div class="w-32">
                <label for="departuretime-compact" class="block text-sm font-medium text-gray-700 mb-1">Heure</label>
                <input type="time"
                       id="departuretime-compact"
                       name="departuretime"
                       value="{{.ViewState.departuretime}}"
                       class="p-2 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-none">
            </div>

            {{if ne .ViewState.passengerid ""}}
            <input type="hidden" name="passengerid" value="{{.ViewState.passengerid}}">
            {{end}}

            <button type="submit"
                    class="px-4 py-2 border border-transparent text-sm font-medium rounded-r-lg text-white bg-co-blue hover:bg-co-blue-dark focus:outline-none">
                Rechercher
            </button>
            </form>

            {{if .ViewState.searched}}
            <div class="mt-2 flex items-center justify-between gap-4">
                <!-- Filtres -->
                <div class="flex-1 flex items-center gap-4 text-sm">
                    <span class="text-gray-700 font-medium">Filtres:</span>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.transit" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Transports en commun</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.solidarity" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Transport solidaire</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.organizedCarpool" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Covoiturage solidaire</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.carpool" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Covoiturage</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.kb" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Solutions locales</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="filters.vehicles" class="rounded border-gray-300 text-co-blue focus:ring-co-blue">
                        <span class="ml-2 text-gray-600">Véhicules</span>
                    </label>
                </div>
                <!-- Bouton Enregistrer -->
                <a href="/app/journeys/save?departure={{json .ViewState.departure}}&destination={{json .ViewState.destination}}&departuredate={{.ViewState.departuredate}}&departuretime={{.ViewState.departuretime}}{{if ne .ViewState.passengerid ""}}&passengerid={{.ViewState.passengerid}}{{end}}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue flex-shrink-0">
                    {{$.IconSet.Icon "hero:outline/bookmark" "h-4 w-4 mr-2"}}
                    Enregistrer pour plus tard
                </a>
            </div>
            {{end}}
        </div>

        <!-- Main Content: Results List (Left) + Map (Right) -->
        <div class="flex overflow-hidden" style="height: calc(100% - 8rem);">
        <!-- Results List (Left Side) -->
        <div class="w-96 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            {{if .ViewState.searched}}
            <div class="divide-y divide-gray-200">
                <!-- Transit Results -->
                {{range $index, $journey := .ViewState.journeys}}
                <div x-show="filters.transit" @click="selectSolution('transit', {{$index}})"
                     :class="selectedType === 'transit' && selectedIndex === {{$index}} ? 'bg-blue-50 border-l-4 border-co-blue' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-semibold text-gray-900">{{ timeFormat $journey.StartTime "15:04" }}</span>
                            <span class="text-gray-400">→</span>
                            <span class="text-sm font-semibold text-gray-900">{{ timeFormat $journey.EndTime "15:04" }}</span>
                        </div>
                        <span class="text-xs font-medium text-gray-600">{{ shortDuration $journey.Duration }}</span>
                    </div>
                    <div class="flex items-center gap-1 flex-wrap">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                            {{$.IconSet.Icon "tabler-icons:bus" "h-3 w-3"}}
                            <span class="ml-1">Transport</span>
                        </span>
                        {{range $leg := $journey.Legs}}
                            {{if or (eq $leg.Mode "BUS") (eq $leg.Mode "COACH")}}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold"
                                  style="background-color: #{{$leg.RouteColor}}; color: #{{$leg.RouteTextColor}}">
                                {{$leg.RouteShortName}}
                            </span>
                            {{else if or (eq $leg.Mode "REGIONAL_FAST_RAIL") (eq $leg.Mode "REGIONAL_RAIL")}}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold"
                                  style="background-color: #{{$leg.RouteColor}}; color: #{{$leg.RouteTextColor}}">
                                {{$leg.RouteShortName}}
                            </span>
                            {{end}}
                        {{end}}
                    </div>
                </div>
                {{end}}

                <!-- Solidarity Transport Results -->
                {{if .ViewState.driver_journeys}}
                <div x-show="filters.solidarity" @click="selectSolution('solidarity', 0)"
                     :class="selectedType === 'solidarity' ? 'bg-blue-50 border-l-4 border-co-lightblue' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-900">Transport solidaire</span>
                        <span class="text-xs font-medium bg-blue-50 text-co-lightblue px-2 py-1 rounded-full">
                            {{len .ViewState.driver_journeys}} conducteur{{if gt (len .ViewState.driver_journeys) 1}}s{{end}}
                        </span>
                    </div>
                    <div class="flex items-center gap-1">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-co-lightblue">
                            {{$.IconSet.Icon "tabler-icons:car" "h-3 w-3"}}
                            <span class="ml-1">Conducteurs disponibles</span>
                        </span>
                    </div>
                </div>
                {{end}}

                <!-- Organized Carpool Results -->
                {{if .ViewState.organized_carpools}}
                <div x-show="filters.organizedCarpool" @click="selectSolution('organized_carpool', 0)"
                     :class="selectedType === 'organized_carpool' ? 'bg-blue-50 border-l-4 border-co-blue' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-900">Covoiturage solidaire</span>
                        <span class="text-xs font-medium bg-blue-50 text-co-blue px-2 py-1 rounded-full">
                            {{len .ViewState.organized_carpools}} trajet{{if gt (len .ViewState.organized_carpools) 1}}s{{end}}
                        </span>
                    </div>
                    <div class="flex items-center gap-1">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            {{$.IconSet.Icon "tabler-icons:users" "h-3 w-3"}}
                            <span class="ml-1">Trajets disponibles</span>
                        </span>
                    </div>
                </div>
                {{end}}

                <!-- Carpool Operator Results -->
                {{range $carpoolIndex, $carpoolFC := .ViewState.carpools}}
                {{$carpoolData := index $carpoolFC.ExtraMembers "ocss"}}
                <div x-show="filters.carpool" @click="selectSolution('carpool', {{$carpoolIndex}})"
                     :class="selectedType === 'carpool' && selectedIndex === {{$carpoolIndex}} ? 'bg-gray-50 border-l-4 border-co-blue' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-semibold text-gray-900">{{$carpoolData.Driver.Alias}}</span>
                        </div>
                        <template x-if="carpools[{{$carpoolIndex}}] && carpools[{{$carpoolIndex}}].price">
                        <span class="text-xs font-medium text-gray-600" x-text="carpools[{{$carpoolIndex}}].price.toFixed(2) + '€'"></span>
                        </template>
                    </div>
                    {{if or $carpoolData.PassengerPickupAddress $carpoolData.PassengerDropAddress}}
                    <div class="text-xs text-gray-600 mb-2">
                        {{if $carpoolData.PassengerPickupAddress}}
                        <div class="flex items-start gap-1">
                            {{$.IconSet.Icon "hero:outline/map-pin" "h-3 w-3 mt-0.5 flex-shrink-0"}}
                            <span>{{$carpoolData.PassengerPickupAddress}}</span>
                        </div>
                        {{end}}
                        {{if $carpoolData.PassengerDropAddress}}
                        <div class="flex items-start gap-1 mt-1">
                            {{$.IconSet.Icon "hero:outline/flag" "h-3 w-3 mt-0.5 flex-shrink-0"}}
                            <span>{{$carpoolData.PassengerDropAddress}}</span>
                        </div>
                        {{end}}
                    </div>
                    {{end}}
                    <div class="flex items-center gap-1 flex-wrap">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-co-blue">
                            {{$.IconSet.Icon "tabler-icons:car" "h-3 w-3"}}
                            <span class="ml-1">Covoiturage</span>
                        </span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                            {{$carpoolData.Operator}}
                        </span>
                        {{if $carpoolData.AvailableSteats}}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                            {{$carpoolData.AvailableSteats}} place(s)
                        </span>
                        {{end}}
                    </div>
                </div>
                {{end}}

                <!-- Knowledge Base Results -->
                {{range $index, $solution := .ViewState.kb_data}}
                <div x-show="filters.kb" @click="selectSolution('kb', {{$index}})"
                     :class="selectedType === 'kb' && selectedIndex === {{$index}} ? 'bg-yellow-50 border-l-4 border-co-orange' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="mb-2">
                        <span class="text-sm font-semibold text-gray-900">{{if $solution.title}}{{$solution.title}}{{else if $solution.name}}{{$solution.name}}{{else}}Solution locale{{end}}</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-50 text-co-orange">
                            {{$.IconSet.Icon "hero:outline/map" "h-3 w-3"}}
                            <span class="ml-1">Solution locale</span>
                        </span>
                    </div>
                </div>
                {{end}}

                <!-- Vehicles Results -->
                {{if .ViewState.vehicles}}
                <div x-show="filters.vehicles" @click="selectSolution('vehicles', 0)"
                     :class="selectedType === 'vehicles' ? 'bg-orange-50 border-l-4 border-co-orange' : 'hover:bg-gray-50'"
                     class="p-4 cursor-pointer transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-900">Véhicules disponibles</span>
                        <span class="text-xs font-medium bg-orange-50 text-co-orange px-2 py-1 rounded-full">
                            {{len .ViewState.vehicles}} véhicule{{if gt (len .ViewState.vehicles) 1}}s{{end}}
                        </span>
                    </div>
                    <div class="flex items-center gap-1">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-50 text-co-orange">
                            {{$.IconSet.Icon "tabler-icons:car" "h-3 w-3"}}
                            <span class="ml-1">Véhicules partagés</span>
                        </span>
                    </div>
                </div>
                {{end}}
            </div>
            {{else}}
            <div class="p-8 text-center text-gray-500">
                <p>Effectuez une recherche pour voir les résultats</p>
            </div>
            {{end}}
        </div>

        <!-- Solidarity Transport Driver List (Middle Column) -->
        <template x-if="selectedType === 'solidarity'">
        <div x-transition
             class="w-80 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-sm font-semibold text-gray-900">Conducteurs disponibles</h3>
            </div>
            <div class="divide-y divide-gray-200">
                <template x-for="(journey, idx) in solidarityJourneys" :key="idx">
                    <div @click="selectDriver(idx)"
                         :class="selectedDriverIndex === idx ? 'bg-blue-50 border-l-4 border-co-lightblue' : 'hover:bg-gray-50'"
                         class="p-4 cursor-pointer transition-colors">
                        <div class="mb-2">
                            <span class="text-sm font-semibold text-gray-900" x-text="journey.driverName"></span>
                        </div>
                        <div class="space-y-1 text-xs text-gray-600">
                            <div class="flex items-center gap-2">
                                <span>Distance conducteur:</span>
                                <span class="font-medium" x-text="journey.driverDistance + ' km'"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span>Distance passager:</span>
                                <span class="font-medium" x-text="journey.passengerDistance + ' km'"></span>
                            </div>
                            <div x-show="journey.duration > 0" class="flex items-center gap-2">
                                <span>Durée:</span>
                                <span class="font-medium" x-text="Math.round(journey.duration / 60) + ' min'"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span>Profil validé:</span>
                                <template x-if="journey.profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-green text-white rounded-2xl">Oui</span>
                                </template>
                                <template x-if="!journey.profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
                                </template>
                            </div>
                            <div x-show="journey.comment" class="pt-1">
                                <span class="italic text-gray-500" x-text="journey.comment"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        </template>

        <!-- Transit Journey Details (Middle Column) -->
        <template x-if="selectedType === 'transit' && selectedIndex !== null">
        <div x-transition
             class="w-96 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <template x-if="selectedIndex !== null && transitJourneys[selectedIndex]">
                <div>
                    <!-- Header -->
                    <div class="p-4 border-b border-gray-200 bg-co-blue">
                        <div class="flex items-center justify-between text-white">
                            <div class="flex items-center gap-3">
                                <div class="text-2xl font-bold" x-text="transitJourneys[selectedIndex].startTime"></div>
                                <div class="text-lg">→</div>
                                <div class="text-2xl font-bold" x-text="transitJourneys[selectedIndex].endTime"></div>
                            </div>
                            <div class="text-sm font-medium text-white bg-co-lightblue px-3 py-1 rounded-full" x-text="transitJourneys[selectedIndex].duration"></div>
                        </div>
                    </div>

                    <!-- Journey Steps -->
                    <div class="p-4 space-y-3">
                        <template x-for="(leg, idx) in transitJourneys[selectedIndex].detailedLegs" :key="idx">
                            <div>
                                <!-- Walk Leg -->
                                <template x-if="leg.mode === 'WALK' && leg.distance">
                                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                                        <div class="flex-shrink-0 w-10 h-10 rounded-co bg-gray-300 flex items-center justify-center">
                                            {{$.IconSet.Icon "tabler-icons:walk" "h-5 w-5 stroke-gray-700"}}
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <div class="text-sm font-medium text-gray-900">Marche à pied</div>
                                            <div class="text-xs text-gray-600" x-text="leg.distance + ' mètres'"></div>
                                        </div>
                                    </div>
                                </template>

                                <!-- Bus Leg -->
                                <template x-if="leg.mode === 'BUS' || leg.mode === 'COACH'">
                                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                                        <!-- Route Header -->
                                        <div class="p-3 flex items-center gap-3 bg-gray-50">
                                            <div class="flex-shrink-0 w-10 h-10 rounded-co flex items-center justify-center"
                                                 :style="'background-color: #' + leg.color + '; color: #' + leg.textColor">
                                                {{$.IconSet.Icon "tabler-icons:bus" "h-6 w-6"}}
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <div class="text-lg font-bold text-gray-900" x-text="'Ligne ' + leg.routeShortName"></div>
                                                <div class="text-xs text-gray-600" x-text="leg.agencyName"></div>
                                            </div>
                                        </div>

                                        <!-- Route Details -->
                                        <div class="p-3 space-y-2 bg-gray-50">
                                            <!-- Times -->
                                            <div class="flex items-center justify-between text-sm">
                                                <div class="flex items-center gap-2">
                                                    <span class="font-semibold text-gray-900" x-text="leg.startTime"></span>
                                                    <span class="text-gray-500">départ</span>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <span class="text-gray-500">arrivée</span>
                                                    <span class="font-semibold text-gray-900" x-text="leg.endTime"></span>
                                                </div>
                                            </div>

                                            <!-- Stops -->
                                            <div class="text-xs text-gray-600">
                                                <div class="flex items-start gap-2 mb-1">
                                                    <div class="w-2 h-2 rounded-full bg-co-green mt-1 flex-shrink-0"></div>
                                                    <span class="font-medium" x-text="leg.fromName"></span>
                                                </div>
                                                <div class="flex items-start gap-2">
                                                    <div class="w-2 h-2 rounded-full bg-co-red mt-1 flex-shrink-0"></div>
                                                    <span class="font-medium" x-text="leg.toName"></span>
                                                </div>
                                            </div>

                                            <!-- Direction -->
                                            <div x-show="leg.headsign" class="text-xs text-gray-500 flex items-center gap-1 pt-1 border-t border-gray-200">
                                                <span>Direction</span>
                                                <span class="font-medium text-gray-700" x-text="leg.headsign"></span>
                                            </div>
                                        </div>
                                    </div>
                                </template>

                                <!-- Rail Leg -->
                                <template x-if="leg.mode === 'REGIONAL_FAST_RAIL' || leg.mode === 'REGIONAL_RAIL'">
                                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                                        <!-- Route Header -->
                                        <div class="p-3 flex items-center gap-3 bg-gray-50">
                                            <div class="flex-shrink-0 w-10 h-10 rounded-co flex items-center justify-center"
                                                 :style="'background-color: #' + leg.color + '; color: #' + leg.textColor">
                                                {{$.IconSet.Icon "tabler-icons:train" "h-6 w-6"}}
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <div class="text-lg font-bold text-gray-900" x-text="'TER ' + leg.routeShortName"></div>
                                                <div class="text-xs text-gray-600" x-text="leg.agencyName"></div>
                                            </div>
                                        </div>

                                        <!-- Route Details -->
                                        <div class="p-3 space-y-2 bg-gray-50">
                                            <!-- Times -->
                                            <div class="flex items-center justify-between text-sm">
                                                <div class="flex items-center gap-2">
                                                    <span class="font-semibold text-gray-900" x-text="leg.startTime"></span>
                                                    <span class="text-gray-500">départ</span>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <span class="text-gray-500">arrivée</span>
                                                    <span class="font-semibold text-gray-900" x-text="leg.endTime"></span>
                                                </div>
                                            </div>

                                            <!-- Stops -->
                                            <div class="text-xs text-gray-600">
                                                <div class="flex items-start gap-2 mb-1">
                                                    <div class="w-2 h-2 rounded-full bg-co-green mt-1 flex-shrink-0"></div>
                                                    <span class="font-medium" x-text="leg.fromName"></span>
                                                </div>
                                                <div class="flex items-start gap-2">
                                                    <div class="w-2 h-2 rounded-full bg-co-red mt-1 flex-shrink-0"></div>
                                                    <span class="font-medium" x-text="leg.toName"></span>
                                                </div>
                                            </div>

                                            <!-- Direction -->
                                            <div x-show="leg.headsign" class="text-xs text-gray-500 flex items-center gap-1 pt-1 border-t border-gray-200">
                                                <span>Direction</span>
                                                <span class="font-medium text-gray-700" x-text="leg.headsign"></span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
        </template>

        <!-- Organized Carpool List (Middle Column) -->
        <template x-if="selectedType === 'organized_carpool'">
        <div x-transition
             class="w-80 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-sm font-semibold text-gray-900">Trajets disponibles</h3>
            </div>
            <div class="divide-y divide-gray-200">
                <template x-for="(carpool, idx) in organizedCarpools" :key="idx">
                    <div @click="selectOrganizedCarpool(idx)"
                         :class="selectedOrganizedCarpoolIndex === idx ? 'bg-blue-50 border-l-4 border-co-blue' : 'hover:bg-gray-50'"
                         class="p-4 cursor-pointer transition-colors">
                        <div class="mb-2">
                            <span class="text-sm font-semibold text-gray-900" x-text="carpool.driverName"></span>
                        </div>
                        <div class="space-y-1 text-xs text-gray-600">
                            <div x-show="carpool.driverDepartureAddress" class="flex items-start gap-2">
                                <span class="flex-shrink-0">Départ conducteur:</span>
                                <span class="font-medium" x-text="carpool.driverDepartureAddress"></span>
                            </div>
                            <div x-show="carpool.driverArrivalAddress" class="flex items-start gap-2">
                                <span class="flex-shrink-0">Arrivée conducteur:</span>
                                <span class="font-medium" x-text="carpool.driverArrivalAddress"></span>
                            </div>
                            <div x-show="carpool.pickupDate" class="flex items-center gap-2">
                                <span>Date et heure:</span>
                                <span class="font-medium" x-text="carpool.pickupDate"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span>Profil validé:</span>
                                <template x-if="carpool.profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-green text-white rounded-2xl">Oui</span>
                                </template>
                                <template x-if="!carpool.profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        </template>

        <!-- Organized Carpool Details (Third Column) -->
        <template x-if="selectedType === 'organized_carpool' && selectedOrganizedCarpoolIndex !== null">
        <div x-transition
             class="w-96 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <template x-if="selectedOrganizedCarpoolIndex !== null && organizedCarpools[selectedOrganizedCarpoolIndex]">
                <div>
                    <!-- Header -->
                    <div class="p-4 border-b border-gray-200 bg-co-blue">
                        <div class="text-white">
                            <div class="text-xl font-bold mb-2" x-text="organizedCarpools[selectedOrganizedCarpoolIndex].driverName"></div>
                            <div class="text-sm" x-text="'Trajet du ' + organizedCarpools[selectedOrganizedCarpoolIndex].pickupDate"></div>
                        </div>
                    </div>

                    <!-- Journey Details -->
                    <div class="p-4 space-y-4">
                        <!-- Driver Info -->
                        <div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
                            <div class="text-xs font-semibold text-gray-700 mb-2">Conducteur</div>
                            <div class="space-y-2 text-sm">
                                <div>
                                    <span class="text-gray-600">Nom:</span>
                                    <span class="font-medium ml-2" x-text="organizedCarpools[selectedOrganizedCarpoolIndex].driverName"></span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-600">Profil validé:</span>
                                    <template x-if="organizedCarpools[selectedOrganizedCarpoolIndex].profileValidated">
                                        <span class="p-1 px-2 text-xs bg-co-green text-white rounded-2xl">Oui</span>
                                    </template>
                                    <template x-if="!organizedCarpools[selectedOrganizedCarpoolIndex].profileValidated">
                                        <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <!-- Locations -->
                        <div class="space-y-3">
                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-blue flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Départ conducteur</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="organizedCarpools[selectedOrganizedCarpoolIndex].driverDepartureAddress"></div>
                                </div>
                            </div>

                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-green flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="14" height="14">
                                        <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Prise en charge passager</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="'Coordonnées: ' + organizedCarpools[selectedOrganizedCarpoolIndex].departureLocation[1].toFixed(5) + ', ' + organizedCarpools[selectedOrganizedCarpoolIndex].departureLocation[0].toFixed(5)"></div>
                                </div>
                            </div>

                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-red flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="14" height="14">
                                        <path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Dépose passager</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="'Coordonnées: ' + organizedCarpools[selectedOrganizedCarpoolIndex].arrivalLocation[1].toFixed(5) + ', ' + organizedCarpools[selectedOrganizedCarpoolIndex].arrivalLocation[0].toFixed(5)"></div>
                                </div>
                            </div>

                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-blue flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Arrivée conducteur</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="organizedCarpools[selectedOrganizedCarpoolIndex].driverArrivalAddress"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Button -->
                        <div class="pt-4 border-t border-gray-200">
                            <a :href="'/app/organized-carpool/drivers/' + organizedCarpools[selectedOrganizedCarpoolIndex].driverId + '/journeys/' + organizedCarpools[selectedOrganizedCarpoolIndex].id + (passengerId ? '?passengerid=' + passengerId : '')"
                               class="block w-full text-center bg-co-blue text-white px-4 py-2 rounded-2xl hover:bg-blue-700 transition-colors">
                                Organiser le covoiturage solidaire
                            </a>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        </template>

        <!-- Knowledge Base Solution Details (Middle Column) -->
        <template x-if="selectedType === 'kb' && selectedIndex !== null">
        <div x-transition
             class="w-80 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <template x-if="selectedIndex !== null && kbSolutions[selectedIndex]">
                <div>
                    <div class="p-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-sm font-semibold text-gray-900" x-text="kbSolutions[selectedIndex].title"></h3>
                    </div>
                    <div class="p-4">
                        <div x-show="kbSolutions[selectedIndex].description" class="mb-4">
                            <p class="text-sm text-gray-700" x-text="kbSolutions[selectedIndex].description"></p>
                        </div>
                        <div x-show="kbSolutions[selectedIndex].url" class="mb-4">
                            <a :href="kbSolutions[selectedIndex].url"
                               target="_blank"
                               class="text-sm text-co-blue hover:underline">
                                Voir plus →
                            </a>
                        </div>
                        <div x-show="kbSolutions[selectedIndex].geography && kbSolutions[selectedIndex].geography.length > 0">
                            <h4 class="text-xs font-semibold text-gray-700 mb-2">Zone couverte</h4>
                            <div class="space-y-1">
                                <template x-for="geo in kbSolutions[selectedIndex].geography">
                                    <div class="text-xs text-gray-600">
                                        <span x-text="geo.layer"></span>: <span class="font-medium" x-text="geo.name ? geo.name + ' (' + geo.code + ')' : geo.code"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        </template>

        <!-- Carpool Details (Third Column) -->
        <template x-if="selectedType === 'carpool' && selectedIndex !== null">
        <div x-transition
             class="w-96 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <template x-if="selectedIndex !== null && carpools[selectedIndex]">
                <div>
                    <!-- Header -->
                    <div class="p-4 border-b border-gray-200 bg-co-blue">
                        <div class="text-white">
                            <div class="text-xl font-bold mb-2" x-text="carpools[selectedIndex].driverAlias"></div>
                            <div class="text-sm" x-text="carpools[selectedIndex].operator"></div>
                        </div>
                    </div>

                    <!-- Journey Details -->
                    <div class="p-4 space-y-4">
                        <!-- Price -->
                        <template x-if="carpools[selectedIndex].price">
                        <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                            <div class="text-xs font-semibold text-gray-700 mb-1">Prix</div>
                            <div class="text-2xl font-bold text-co-blue" x-text="carpools[selectedIndex].price.toFixed(2) + ' €'"></div>
                            <template x-if="carpools[selectedIndex].seats">
                                <div class="text-xs text-gray-600 mt-1" x-text="carpools[selectedIndex].seats + ' place' + (carpools[selectedIndex].seats > 1 ? 's' : '') + ' disponible' + (carpools[selectedIndex].seats > 1 ? 's' : '')"></div>
                            </template>
                        </div>
                        </template>

                        <!-- Locations -->
                        <div class="space-y-3">
                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-green flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="14" height="14">
                                        <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Départ</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="carpools[selectedIndex].pickupAddress || 'Adresse non disponible'"></div>
                                </div>
                            </div>

                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-co bg-co-red flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="14" height="14">
                                        <path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-xs text-gray-500">Arrivée</div>
                                    <div class="text-sm font-medium text-gray-900" x-text="carpools[selectedIndex].dropAddress || 'Adresse non disponible'"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Distance & Duration -->
                        <div class="grid grid-cols-2 gap-3">
                            <template x-if="carpools[selectedIndex].distance">
                            <div class="bg-gray-50 rounded-lg p-3">
                                <div class="text-xs text-gray-500 mb-1">Distance</div>
                                <div class="text-sm font-semibold text-gray-900" x-text="(carpools[selectedIndex].distance / 1000).toFixed(1) + ' km'"></div>
                            </div>
                            </template>
                            <template x-if="carpools[selectedIndex].duration">
                            <div class="bg-gray-50 rounded-lg p-3">
                                <div class="text-xs text-gray-500 mb-1">Durée</div>
                                <div class="text-sm font-semibold text-gray-900" x-text="Math.floor(carpools[selectedIndex].duration / 60) + ' min'"></div>
                            </div>
                            </template>
                        </div>

                        <!-- Action Button -->
                        <template x-if="carpools[selectedIndex].webUrl">
                        <div class="pt-4 border-t border-gray-200">
                            <a :href="carpools[selectedIndex].webUrl"
                               target="_blank"
                               class="block w-full text-center bg-co-blue text-white px-4 py-2 rounded-2xl hover:bg-co-darkblue transition-colors">
                                <span>Voir l'offre sur </span><span x-text="carpools[selectedIndex].operator"></span>
                            </a>
                        </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
        </template>

        <!-- Vehicles List (Middle Column) -->
        <template x-if="selectedType === 'vehicles'">
        <div x-transition
             class="w-80 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-sm font-semibold text-gray-900">Véhicules disponibles</h3>
            </div>
            <div class="divide-y divide-gray-200">
                <template x-for="(vehicle, idx) in vehicles" :key="idx">
                    <div @click="selectVehicle(idx)"
                         :class="selectedVehicleIndex === idx ? 'bg-orange-50 border-l-4 border-co-orange' : 'hover:bg-gray-50'"
                         class="p-4 cursor-pointer transition-colors">
                        <div class="mb-2">
                            <div class="text-sm font-semibold text-gray-900" x-text="vehicle.name"></div>
                            <div class="text-xs text-gray-500 mt-1">
                                <span x-text="vehicle.type"></span>
                                <span x-show="vehicle.type === 'Voiture' && vehicle.automatic"> (boite auto)</span>
                            </div>
                        </div>
                        <div class="space-y-1 text-xs text-gray-600">
                            <div x-show="vehicle.licencePlate" class="flex items-center gap-2">
                                <span>Numéro:</span>
                                <span class="font-medium" x-text="vehicle.licencePlate"></span>
                            </div>
                            <div x-show="vehicle.address" class="flex items-start gap-2">
                                <span class="flex-shrink-0">Localisation:</span>
                                <span class="font-medium" x-text="vehicle.address"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        </template>

        <!-- Vehicle Details (Third Column) -->
        <template x-if="selectedType === 'vehicles' && selectedVehicleIndex !== null">
        <div x-transition
             class="w-96 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto">
            <template x-if="selectedVehicleIndex !== null && vehicles[selectedVehicleIndex]">
                <div>
                    <!-- Header -->
                    <div class="p-4 border-b border-gray-200 bg-co-orange">
                        <div class="text-white">
                            <div class="text-xl font-bold mb-2" x-text="vehicles[selectedVehicleIndex].name"></div>
                            <div class="text-sm" x-text="vehicles[selectedVehicleIndex].type"></div>
                        </div>
                    </div>

                    <!-- Vehicle Details -->
                    <div class="p-4 space-y-4">
                        <!-- Vehicle Info -->
                        <div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
                            <div class="text-xs font-semibold text-gray-700 mb-2">Informations du véhicule</div>
                            <div class="space-y-2 text-sm">
                                <div x-show="vehicles[selectedVehicleIndex].type" class="flex items-center justify-between">
                                    <span class="text-gray-600">Type:</span>
                                    <span class="font-medium text-gray-900">
                                        <span x-text="vehicles[selectedVehicleIndex].type"></span>
                                        <span x-show="vehicles[selectedVehicleIndex].type === 'Voiture' && vehicles[selectedVehicleIndex].automatic" class="text-gray-500"> (boite auto)</span>
                                    </span>
                                </div>
                                <div x-show="vehicles[selectedVehicleIndex].licencePlate" class="flex items-center justify-between">
                                    <span class="text-gray-600">Numéro:</span>
                                    <span class="font-medium text-gray-900" x-text="vehicles[selectedVehicleIndex].licencePlate"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Location -->
                        <div x-show="vehicles[selectedVehicleIndex].address" class="bg-orange-50 rounded-lg p-3 border border-orange-200">
                            <div class="text-xs font-semibold text-gray-700 mb-2">Localisation</div>
                            <div class="text-sm text-gray-900" x-text="vehicles[selectedVehicleIndex].address"></div>
                        </div>

                        <!-- Description -->
                        <div x-show="vehicles[selectedVehicleIndex].description" class="space-y-2">
                            <div class="text-xs font-semibold text-gray-700">Description</div>
                            <div class="text-sm text-gray-600" x-text="vehicles[selectedVehicleIndex].description"></div>
                        </div>

                        <!-- Optional Fields -->
                        <template x-if="vehicleOptionalFields && vehicleOptionalFields.length > 0">
                            <div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
                                <div class="text-xs font-semibold text-gray-700 mb-2">Autres propriétés</div>
                                <div class="space-y-2 text-sm">
                                    <template x-for="field in vehicleOptionalFields" :key="field.name">
                                        <div x-show="vehicles[selectedVehicleIndex].data[field.name]" class="flex items-center justify-between">
                                            <span class="text-gray-600" x-text="field.label"></span>
                                            <span class="font-medium text-gray-900">
                                                <template x-if="field.type === 'select'">
                                                    <span x-text="getSelectLabel(field, vehicles[selectedVehicleIndex].data[field.name])"></span>
                                                </template>
                                                <template x-if="field.type !== 'select'">
                                                    <span x-text="vehicles[selectedVehicleIndex].data[field.name]"></span>
                                                </template>
                                            </span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>

                        <!-- Booking Button -->
                        <div class="pt-4">
                            <a :href="getVehicleBookingUrl()"
                               class="block w-full bg-co-orange hover:bg-co-orange-dark text-white text-center font-medium py-2 px-4 rounded-2xl transition-colors">
                                Réserver un véhicule
                            </a>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        </template>

        <!-- Map (Right Side) -->
        <div class="flex-1 bg-gray-100 relative">
            <!-- Driver Detail Panel -->
            <div x-show="selectedType === 'solidarity' && selectedDriverIndex !== null"
                 x-transition
                 class="absolute top-4 left-4 right-4 bg-white rounded-lg shadow-lg p-4 z-10 max-w-md">
                <template x-if="selectedDriverIndex !== null && solidarityJourneys[selectedDriverIndex]">
                    <div>
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900" x-text="solidarityJourneys[selectedDriverIndex].driverName"></h3>
                            <button @click="selectedDriverIndex = null" class="text-gray-400 hover:text-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Distance conducteur:</span>
                                <span class="font-medium text-gray-900" x-text="solidarityJourneys[selectedDriverIndex].driverDistance + ' km'"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Distance passager:</span>
                                <span class="font-medium text-gray-900" x-text="solidarityJourneys[selectedDriverIndex].passengerDistance + ' km'"></span>
                            </div>
                            <div class="flex items-center gap-2" x-show="solidarityJourneys[selectedDriverIndex].duration > 0">
                                <span class="text-gray-500">Durée:</span>
                                <span class="font-medium text-gray-900" x-text="Math.round(solidarityJourneys[selectedDriverIndex].duration / 60) + ' min'"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Profil validé:</span>
                                <template x-if="solidarityJourneys[selectedDriverIndex].profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-green text-white rounded-2xl">Oui</span>
                                </template>
                                <template x-if="!solidarityJourneys[selectedDriverIndex].profileValidated">
                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
                                </template>
                            </div>
                            <div x-show="solidarityJourneys[selectedDriverIndex].comment" class="pt-2 border-t border-gray-200">
                                <span class="text-gray-700 italic" x-text="solidarityJourneys[selectedDriverIndex].comment"></span>
                            </div>
                        </div>
                        <div class="mt-4">
                            <a :href="'/app/solidarity-transport/drivers/' + solidarityJourneys[selectedDriverIndex].driverId + '/journeys/' + solidarityJourneys[selectedDriverIndex].id + (passengerId ? '?passengerid=' + passengerId : '')"
                               class="block w-full text-center px-4 py-2 bg-co-blue text-white rounded-lg hover:bg-co-blue-dark transition-colors">
                                Organiser le transport solidaire
                            </a>
                        </div>
                    </div>
                </template>
            </div>

            <div id="compact-journey-map" class="w-full h-full"></div>
        </div>
        </div>
    </div>
</div>

<script>
function compactJourneySearch() {
    const transitJourneys = [
        {{range $journeyIndex, $journey := .ViewState.journeys}}
        {
            startTime: '{{ timeFormat $journey.StartTime "15:04" }}',
            endTime: '{{ timeFormat $journey.EndTime "15:04" }}',
            duration: '{{ shortDuration $journey.Duration }}',
            legs: [
                {{range $legIndex, $leg := $journey.Legs}}
                {
                    mode: '{{$leg.Mode}}',
                    color: '{{$leg.RouteColor}}',
                    from: {{if and $leg.From $leg.From.Lon $leg.From.Lat}}[{{$leg.From.Lon}}, {{$leg.From.Lat}}]{{else}}null{{end}},
                    to: {{if and $leg.To $leg.To.Lon $leg.To.Lat}}[{{$leg.To.Lon}}, {{$leg.To.Lat}}]{{else}}null{{end}},
                    polyline: {{if $leg.LegGeometry}}'{{$leg.LegGeometry.Points}}'{{else}}null{{end}},
                    precision: {{if $leg.LegGeometry}}{{$leg.LegGeometry.Precision}}{{else}}6{{end}}
                },
                {{end}}
            ].filter(function(leg) { return leg.from && leg.to; }),
            detailedLegs: [
                {{range $legIndex, $leg := $journey.Legs}}
                {
                    mode: '{{$leg.Mode}}',
                    color: '{{$leg.RouteColor}}',
                    textColor: '{{$leg.RouteTextColor}}',
                    distance: {{if $leg.Distance}}{{$leg.Distance}}{{else}}0{{end}},
                    duration: {{if $leg.Duration}}{{$leg.Duration}}{{else}}0{{end}},
                    agencyName: {{if $leg.AgencyName}}'{{$leg.AgencyName}}'{{else}}null{{end}},
                    routeShortName: {{if $leg.RouteShortName}}'{{$leg.RouteShortName}}'{{else}}null{{end}},
                    headsign: {{if $leg.Headsign}}'{{$leg.Headsign}}'{{else}}null{{end}},
                    startTime: '{{ timeFormat $leg.StartTime "15:04" }}',
                    endTime: '{{ timeFormat $leg.EndTime "15:04" }}',
                    fromName: {{if and $leg.From $leg.From.Name}}'{{$leg.From.Name}}'{{else}}null{{end}},
                    toName: {{if and $leg.To $leg.To.Name}}'{{$leg.To.Name}}'{{else}}null{{end}}
                },
                {{end}}
            ]
        },
        {{end}}
    ];

    const solidarityJourneys = [
        {{range $index, $driverJourney := .ViewState.driver_journeys}}
        {{$driver := index $.ViewState.solidarity_drivers $driverJourney.DriverId}}
        {
            id: '{{$driverJourney.Id}}',
            driverId: '{{$driverJourney.DriverId}}',
            driverName: '{{$driver.Data.first_name}} {{$driver.Data.last_name}}',
            driverDistance: {{$driverJourney.DriverDistance}},
            passengerDistance: {{$driverJourney.PassengerDistance}},
            duration: {{if $driverJourney.Duration}}{{$driverJourney.Duration}}{{else}}0{{end}},
            polyline: {{if $driverJourney.JourneyPolyline}}'{{$driverJourney.JourneyPolyline}}'{{else}}null{{end}},
            comment: {{if $driver.Data.other_properties}}{{if $driver.Data.other_properties.comment}}"{{$driver.Data.other_properties.comment}}"{{else}}null{{end}}{{else}}null{{end}},
            profileValidated: {{solidarityDriverValidatedProfile $driver (solidarityDocuments $driver.ID)}},
            driverLocation: {{if $driverJourney.DriverDeparture}}(function() {
                try {
                    const f = JSON.parse('{{$driverJourney.DriverDeparture.Serialized}}');
                    return f.geometry && f.geometry.coordinates ? f.geometry.coordinates : null;
                } catch(e) { return null; }
            })(){{else}}null{{end}},
            passengerPickup: {{if $driverJourney.PassengerPickup}}(function() {
                try {
                    const f = JSON.parse('{{$driverJourney.PassengerPickup.Serialized}}');
                    return f.geometry && f.geometry.coordinates ? f.geometry.coordinates : null;
                } catch(e) { return null; }
            })(){{else}}null{{end}},
            passengerDropoff: {{if $driverJourney.PassengerDrop}}(function() {
                try {
                    const f = JSON.parse('{{$driverJourney.PassengerDrop.Serialized}}');
                    return f.geometry && f.geometry.coordinates ? f.geometry.coordinates : null;
                } catch(e) { return null; }
            })(){{else}}null{{end}},
            driverDestination: {{if $driverJourney.DriverArrival}}(function() {
                try {
                    const f = JSON.parse('{{$driverJourney.DriverArrival.Serialized}}');
                    return f.geometry && f.geometry.coordinates ? f.geometry.coordinates : null;
                } catch(e) { return null; }
            })(){{else}}null{{end}}
        },
        {{end}}
    ];

    const organizedCarpools = [
        {{range $index, $carpool := .ViewState.organized_carpools}}
        {{$driver := index $.ViewState.solidarity_drivers $carpool.Driver.Id}}
        {
            id: '{{$carpool.Id}}',
            driverId: '{{$carpool.Driver.Id}}',
            driverName: '{{$driver.Data.first_name}} {{$driver.Data.last_name}}',
            departureLocation: {{if and $carpool.PassengerPickupLng $carpool.PassengerPickupLat}}[{{$carpool.PassengerPickupLng}}, {{$carpool.PassengerPickupLat}}]{{else}}null{{end}},
            arrivalLocation: {{if and $carpool.PassengerDropLng $carpool.PassengerDropLat}}[{{$carpool.PassengerDropLng}}, {{$carpool.PassengerDropLat}}]{{else}}null{{end}},
            distance: {{if $carpool.Distance}}{{$carpool.Distance}}{{else}}0{{end}},
            passengerPickupAddress: {{if $carpool.PassengerPickupAddress}}"{{$carpool.PassengerPickupAddress}}"{{else}}null{{end}},
            passengerDropAddress: {{if $carpool.PassengerDropAddress}}"{{$carpool.PassengerDropAddress}}"{{else}}null{{end}},
            driverDepartureAddress: {{if $carpool.DriverDepartureAddress}}"{{$carpool.DriverDepartureAddress}}"{{else}}null{{end}},
            driverArrivalAddress: {{if $carpool.DriverArrivalAddress}}"{{$carpool.DriverArrivalAddress}}"{{else}}null{{end}},
            pickupDate: {{if $carpool.PassengerPickupDate}}"{{$carpool.PassengerPickupDate.AsTime.Format "02/01/2006 15:04"}}"{{else}}null{{end}},
            profileValidated: {{carpoolDriverValidatedProfile $driver (carpoolDocuments $driver.ID)}},
            polyline: {{if $carpool.JourneyPolyline}}'{{$carpool.JourneyPolyline}}'{{else}}null{{end}},
            driverDepartureLocation: {{if and $carpool.DriverDepartureLng $carpool.DriverDepartureLat}}[{{$carpool.DriverDepartureLng}}, {{$carpool.DriverDepartureLat}}]{{else}}null{{end}},
            driverArrivalLocation: {{if and $carpool.DriverArrivalLng $carpool.DriverArrivalLat}}[{{$carpool.DriverArrivalLng}}, {{$carpool.DriverArrivalLat}}]{{else}}null{{end}}
        },
        {{end}}
    ];

    const carpools = [
        {{range $carpoolIndex, $carpoolFC := .ViewState.carpools}}
        {{$carpoolData := index $carpoolFC.ExtraMembers "ocss"}}
        {{$departure := index $carpoolFC.Features 0}}
        {{$arrival := index $carpoolFC.Features 1}}
        {
            operator: '{{$carpoolData.Operator}}',
            driverAlias: {{if $carpoolData.Driver}}'{{$carpoolData.Driver.Alias}}'{{else}}'Conducteur'{{end}},
            pickupLocation: [{{$carpoolData.PassengerPickupLng}}, {{$carpoolData.PassengerPickupLat}}],
            dropLocation: [{{$carpoolData.PassengerDropLng}}, {{$carpoolData.PassengerDropLat}}],
            driverDepartureLocation: {{if and $carpoolData.DriverDepartureLng $carpoolData.DriverDepartureLat}}[{{$carpoolData.DriverDepartureLng}}, {{$carpoolData.DriverDepartureLat}}]{{else}}null{{end}},
            driverArrivalLocation: {{if and $carpoolData.DriverArrivalLng $carpoolData.DriverArrivalLat}}[{{$carpoolData.DriverArrivalLng}}, {{$carpoolData.DriverArrivalLat}}]{{else}}null{{end}},
            pickupAddress: {{if $carpoolData.PassengerPickupAddress}}'{{$carpoolData.PassengerPickupAddress}}'{{else}}null{{end}},
            dropAddress: {{if $carpoolData.PassengerDropAddress}}'{{$carpoolData.PassengerDropAddress}}'{{else}}null{{end}},
            distance: {{if $carpoolData.Distance}}{{$carpoolData.Distance}}{{else}}null{{end}},
            duration: {{if $carpoolData.Duration}}{{$carpoolData.Duration.Seconds}}{{else}}null{{end}},
            price: {{if and $carpoolData.Price $carpoolData.Price.Amount}}{{$carpoolData.Price.Amount}}{{else}}null{{end}},
            seats: {{if $carpoolData.AvailableSteats}}{{$carpoolData.AvailableSteats}}{{else}}null{{end}},
            webUrl: {{if $carpoolData.JourneySchedule}}{{if $carpoolData.JourneySchedule.WebUrl}}'{{$carpoolData.JourneySchedule.WebUrl}}'{{else}}null{{end}}{{else}}null{{end}},
            polyline: {{if $carpoolData.JourneyPolyline}}'{{$carpoolData.JourneyPolyline}}'{{else}}null{{end}}
        },
        {{end}}
    ];

    const kbSolutions = [
        {{range $index, $solution := .ViewState.kb_data}}
        {
            title: {{if $solution.title}}"{{$solution.title}}"{{else if $solution.name}}"{{$solution.name}}"{{else}}"Solution locale"{{end}},
            description: {{if $solution.description}}"{{$solution.description}}"{{else}}null{{end}},
            url: {{if $solution.url}}"{{$solution.url}}"{{else}}null{{end}},
            geography: {{if $solution.geography}}{{json $solution.geography}}{{else}}[]{{end}}
        },
        {{end}}
    ];

    const vehicleOptionalFields = {{if .ViewState.vehicle_optional_fields}}{{json .ViewState.vehicle_optional_fields}}{{else}}[]{{end}};

    const vehicles = [
        {{range $index, $vehicle := .ViewState.vehicles}}
        {
            id: '{{$vehicle.ID}}',
            name: {{if $vehicle.Data.name}}'{{$vehicle.Data.name}}'{{else}}'Véhicule'{{end}},
            type: {{if $vehicle.Type}}'{{$vehicle.Type}}'{{else}}null{{end}},
            automatic: {{if $vehicle.Data.automatic}}true{{else}}false{{end}},
            licencePlate: {{if $vehicle.Data.licence_plate}}'{{$vehicle.Data.licence_plate}}'{{else}}null{{end}},
            description: {{if $vehicle.Data.description}}'{{$vehicle.Data.description}}'{{else}}null{{end}},
            address: {{if and $vehicle.Data.address $vehicle.Data.address.properties}}'{{$vehicle.Data.address.properties.label}}'{{else}}null{{end}},
            location: {{if and $vehicle.Data.address $vehicle.Data.address.geometry $vehicle.Data.address.geometry.coordinates}}[{{index $vehicle.Data.address.geometry.coordinates 0}}, {{index $vehicle.Data.address.geometry.coordinates 1}}]{{else}}null{{end}},
            distance: null,
            data: {{json $vehicle.Data}}
        },
        {{end}}
    ];

    return {
        selectedType: null,
        selectedIndex: null,
        selectedDriverIndex: null,
        selectedOrganizedCarpoolIndex: null,
        selectedVehicleIndex: null,
        map: null,
        startMarker: null,
        endMarker: null,
        routeMarkers: [],
        transitJourneys: transitJourneys,
        solidarityJourneys: solidarityJourneys,
        organizedCarpools: organizedCarpools,
        carpools: carpools,
        kbSolutions: kbSolutions,
        vehicles: vehicles,
        vehicleOptionalFields: vehicleOptionalFields,
        passengerId: '{{.ViewState.passengerid}}',
        departureDate: '{{.ViewState.departuredate}}',

        filters: {
            transit: true,
            solidarity: true,
            organizedCarpool: true,
            carpool: true,
            kb: true,
            vehicles: true
        },

        init() {
            // Initialize map
            if (typeof maplibregl !== 'undefined' && typeof pmtiles !== 'undefined') {
                let protocol = new pmtiles.Protocol();
                maplibregl.addProtocol("pmtiles", protocol.tile);

                {{if and .ViewState.departure .ViewState.departure.Geometry}}
                const departureFeature = {{json .ViewState.departure}};
                const destinationFeature = {{if .ViewState.destination}}{{json .ViewState.destination}}{{else}}null{{end}};

                this.map = new maplibregl.Map({
                    container: 'compact-journey-map',
                    style: '/public/maps/protomaps-light/style.json',
                    center: departureFeature.geometry.coordinates,
                    zoom: 12
                });

                this.map.on('load', () => {
                    // Create custom departure marker with map-pin from heroicons
                    const departureEl = document.createElement('div');
                    departureEl.className = 'w-8 h-8 rounded-co bg-co-green border border-white shadow-md flex items-center justify-center';
                    departureEl.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
                            <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                        </svg>
                    `;
                    this.startMarker = new maplibregl.Marker({element: departureEl})
                        .setLngLat(departureFeature.geometry.coordinates)
                        .addTo(this.map);

                    if (destinationFeature) {
                        // Create custom destination marker with flag from heroicons
                        const destinationEl = document.createElement('div');
                        destinationEl.className = 'w-8 h-8 rounded-co bg-co-red border border-white shadow-md flex items-center justify-center';
                        destinationEl.innerHTML = `
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
                                <path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
                            </svg>
                        `;
                        this.endMarker = new maplibregl.Marker({element: destinationEl})
                            .setLngLat(destinationFeature.geometry.coordinates)
                            .addTo(this.map);

                        // Fit bounds to show both markers
                        const bounds = new maplibregl.LngLatBounds()
                            .extend(departureFeature.geometry.coordinates)
                            .extend(destinationFeature.geometry.coordinates);
                        this.map.fitBounds(bounds, { padding: 50 });
                    }
                });
                {{else}}
                this.map = new maplibregl.Map({
                    container: 'compact-journey-map',
                    style: '/public/maps/protomaps-light/style.json',
                    center: [2.3522, 48.8566],
                    zoom: 12
                });
                {{end}}
            }
        },

        selectSolution(type, index) {
            // If clicking on the already selected solution, close it
            if (this.selectedType === type && this.selectedIndex === index) {
                this.clearRoutes();
                this.selectedType = null;
                this.selectedIndex = null;
                this.selectedDriverIndex = null;
                this.selectedOrganizedCarpoolIndex = null;
                this.selectedVehicleIndex = null;
                return;
            }

            // Clear existing route layers first
            this.clearRoutes();

            // Reset selections when changing solution type
            if (type !== 'solidarity') {
                this.selectedDriverIndex = null;
            }
            if (type !== 'organized_carpool') {
                this.selectedOrganizedCarpoolIndex = null;
            }
            if (type !== 'vehicles') {
                this.selectedVehicleIndex = null;
            }

            // Update selection
            this.selectedType = type;
            this.selectedIndex = index;

            // Use setTimeout to ensure clearing completes before displaying new route
            setTimeout(() => {
                // Display the selected solution on the map
                if (type === 'transit') {
                    this.displayTransitRoute(index);
                } else if (type === 'solidarity') {
                    this.selectedDriverIndex = null;
                    this.displaySolidarityRoute(index);
                } else if (type === 'organized_carpool') {
                    this.selectedOrganizedCarpoolIndex = null;
                    this.displayOrganizedCarpoolRoute(index);
                } else if (type === 'carpool') {
                    this.displayCarpoolRoute(index);
                } else if (type === 'kb') {
                    this.displayKBSolution(index);
                } else if (type === 'vehicles') {
                    this.selectedVehicleIndex = null;
                    this.displayVehiclesMarkers();
                }
            }, 500);
        },

        selectDriver(driverIndex) {
            // Clear routes before selecting new driver
            this.clearRoutes();

            // Update driver selection
            this.selectedDriverIndex = driverIndex;

            // Use setTimeout to ensure clearing completes before displaying new route
            setTimeout(() => {
                this.displaySolidarityRoute(0);
            }, 500);
        },

        selectOrganizedCarpool(carpoolIndex) {
            // Clear routes before selecting new carpool
            this.clearRoutes();

            // Update carpool selection
            this.selectedOrganizedCarpoolIndex = carpoolIndex;

            // Use setTimeout to ensure clearing completes before displaying new route
            setTimeout(() => {
                this.displayOrganizedCarpoolRoute(carpoolIndex);
            }, 500);
        },

        selectVehicle(vehicleIndex) {
            // Clear routes before selecting new vehicle
            this.clearRoutes();

            // Update vehicle selection
            this.selectedVehicleIndex = vehicleIndex;

            // Use setTimeout to ensure clearing completes before displaying new route
            setTimeout(() => {
                this.displayVehicleMarker(vehicleIndex);
            }, 500);
        },

        clearRoutes() {
            // Remove route markers
            this.routeMarkers.forEach(marker => marker.remove());
            this.routeMarkers = [];

            // Remove existing layers and sources
            if (this.map && this.map.loaded()) {
                // Create a copy of the layers array to avoid modification during iteration
                const layers = [...this.map.getStyle().layers];
                const layersToRemove = layers.filter(layer => layer.id.startsWith('route-'));

                layersToRemove.forEach((layer) => {
                    if (this.map.getLayer(layer.id)) {
                        this.map.removeLayer(layer.id);
                    }
                });

                // Create a copy of the sources object keys
                const sources = Object.keys(this.map.getStyle().sources);
                const sourcesToRemove = sources.filter(sourceId => sourceId.startsWith('route-'));

                sourcesToRemove.forEach((sourceId) => {
                    if (this.map.getSource(sourceId)) {
                        this.map.removeSource(sourceId);
                    }
                });
            }
        },

        displayTransitRoute(index) {
            if (!this.map || !this.map.loaded() || !this.transitJourneys[index]) return;

            const journey = this.transitJourneys[index];
            const allCoords = [];

            journey.legs.forEach((leg, legIndex) => {
                const lineColor = leg.mode === 'WALK' ? '#9ca3af' : (leg.color && leg.color !== '' ? '#' + leg.color : '#243887');
                const lineWidth = leg.mode === 'WALK' ? 2 : 4;
                const lineDasharray = leg.mode === 'WALK' ? [2, 2] : undefined;

                let coordinates;
                if (leg.polyline && typeof polyline !== 'undefined') {
                    // Decode polyline with the precision from the API response
                    const decoded = polyline.decode(leg.polyline, leg.precision);
                    // Convert from [lat, lon] to [lon, lat] for MapLibre
                    coordinates = decoded.map((coord) => [coord[1], coord[0]]);
                    coordinates.forEach((coord) => allCoords.push(coord));
                } else {
                    // Fallback to straight line
                    coordinates = [leg.from, leg.to];
                    allCoords.push(leg.from);
                    allCoords.push(leg.to);
                }

                this.map.addSource('route-transit-' + index + '-' + legIndex, {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': coordinates
                        }
                    }
                });

                const layerConfig = {
                    'id': 'route-transit-' + index + '-' + legIndex,
                    'type': 'line',
                    'source': 'route-transit-' + index + '-' + legIndex,
                    'layout': {
                        'line-join': 'round',
                        'line-cap': 'round'
                    },
                    'paint': {
                        'line-color': lineColor,
                        'line-width': lineWidth
                    }
                };

                if (lineDasharray) {
                    layerConfig.paint['line-dasharray'] = lineDasharray;
                }

                this.map.addLayer(layerConfig);
            });

            // Fit map to show all coordinates
            if (allCoords.length > 0) {
                const bounds = allCoords.reduce((bounds, coord) => {
                    return bounds.extend(coord);
                }, new maplibregl.LngLatBounds(allCoords[0], allCoords[0]));

                this.map.fitBounds(bounds, {
                    padding: 50
                });
            }
        },

        displaySolidarityRoute(index) {
            if (!this.map || !this.map.loaded()) return;

            // If a specific driver is selected, show their route
            if (this.selectedDriverIndex !== null && this.solidarityJourneys[this.selectedDriverIndex]) {
                const journey = this.solidarityJourneys[this.selectedDriverIndex];
                const allCoords = [];

                // If we have a detailed polyline, use it
                if (journey.polyline && typeof polyline !== 'undefined') {
                    const decoded = polyline.decode(journey.polyline, 5); // Assume precision 5 for Google polyline
                    // Convert from [lat, lon] to [lon, lat] for MapLibre
                    const coordinates = decoded.map((coord) => [coord[1], coord[0]]);

                    coordinates.forEach((coord) => allCoords.push(coord));

                    this.map.addSource('route-solidarity-polyline', {
                        'type': 'geojson',
                        'data': {
                            'type': 'Feature',
                            'properties': {},
                            'geometry': {
                                'type': 'LineString',
                                'coordinates': coordinates
                            }
                        }
                    });

                    this.map.addLayer({
                        'id': 'route-solidarity-polyline',
                        'type': 'line',
                        'source': 'route-solidarity-polyline',
                        'paint': {
                            'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-lightblue').trim(),
                            'line-width': 4
                        }
                    });
                } else {
                    // Fallback to simple line segments if no polyline
                    if (journey.driverLocation && journey.passengerPickup) {
                        allCoords.push(journey.driverLocation, journey.passengerPickup);

                        this.map.addSource('route-solidarity-driver-pickup', {
                            'type': 'geojson',
                            'data': {
                                'type': 'Feature',
                                'properties': {},
                                'geometry': {
                                    'type': 'LineString',
                                    'coordinates': [journey.driverLocation, journey.passengerPickup]
                                }
                            }
                        });

                        this.map.addLayer({
                            'id': 'route-solidarity-driver-pickup',
                            'type': 'line',
                            'source': 'route-solidarity-driver-pickup',
                            'paint': {
                                'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-lightblue').trim(),
                                'line-width': 4
                            }
                        });
                    }

                    if (journey.passengerPickup && journey.passengerDropoff) {
                        allCoords.push(journey.passengerDropoff);

                        this.map.addSource('route-solidarity-passenger', {
                            'type': 'geojson',
                            'data': {
                                'type': 'Feature',
                                'properties': {},
                                'geometry': {
                                    'type': 'LineString',
                                    'coordinates': [journey.passengerPickup, journey.passengerDropoff]
                                }
                            }
                        });

                        this.map.addLayer({
                            'id': 'route-solidarity-passenger',
                            'type': 'line',
                            'source': 'route-solidarity-passenger',
                            'paint': {
                                'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
                                'line-width': 4
                            }
                        });
                    }

                    if (journey.passengerDropoff && journey.driverDestination) {
                        allCoords.push(journey.driverDestination);

                        this.map.addSource('route-solidarity-driver-dest', {
                            'type': 'geojson',
                            'data': {
                                'type': 'Feature',
                                'properties': {},
                                'geometry': {
                                    'type': 'LineString',
                                    'coordinates': [journey.passengerDropoff, journey.driverDestination]
                                }
                            }
                        });

                        this.map.addLayer({
                            'id': 'route-solidarity-driver-dest',
                            'type': 'line',
                            'source': 'route-solidarity-driver-dest',
                            'paint': {
                                'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
                                'line-width': 4,
                                'line-dasharray': [2, 2]
                            }
                        });
                    }
                }

                // Add markers for driver departure and destination
                if (journey.driverLocation) {
                    const driverStartEl = document.createElement('div');
                    driverStartEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
                    driverStartEl.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    `;
                    const driverStartMarker = new maplibregl.Marker({element: driverStartEl})
                        .setLngLat(journey.driverLocation)
                        .addTo(this.map);
                    this.routeMarkers.push(driverStartMarker);
                }

                if (journey.driverDestination) {
                    const driverEndEl = document.createElement('div');
                    driverEndEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
                    driverEndEl.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    `;
                    const driverEndMarker = new maplibregl.Marker({element: driverEndEl})
                        .setLngLat(journey.driverDestination)
                        .addTo(this.map);
                    this.routeMarkers.push(driverEndMarker);
                }

                // Fit bounds to show the journey
                if (allCoords.length > 0) {
                    const bounds = allCoords.reduce((bounds, coord) => {
                        return bounds.extend(coord);
                    }, new maplibregl.LngLatBounds(allCoords[0], allCoords[0]));

                    this.map.fitBounds(bounds, {
                        padding: 80
                    });
                }
            } else {
                // Show all driver locations when no specific driver is selected
                const driverLocations = [];
                this.solidarityJourneys.forEach((journey) => {
                    if (journey.driverLocation) {
                        driverLocations.push(journey.driverLocation);
                    }
                });

                if (driverLocations.length === 0) return;

                // Create custom marker element for each driver
                this.solidarityJourneys.forEach((journey, idx) => {
                    if (!journey.driverLocation) return;

                    const el = document.createElement('div');
                    el.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center cursor-pointer transition-all';
                    el.setAttribute('data-driver-index', idx);

                    // Add person icon (using SVG)
                    el.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    `;

                    // Add click handler
                    el.addEventListener('click', (e) => {
                        e.stopPropagation();
                        this.selectedDriverIndex = idx;
                        this.displaySolidarityRoute(0);
                    });

                    const marker = new maplibregl.Marker({element: el})
                        .setLngLat(journey.driverLocation)
                        .addTo(this.map);

                    this.routeMarkers.push(marker);
                });

                // Fit bounds to show all driver locations
                if (driverLocations.length > 0) {
                    const bounds = driverLocations.reduce((bounds, coord) => {
                        return bounds.extend(coord);
                    }, new maplibregl.LngLatBounds(driverLocations[0], driverLocations[0]));

                    this.map.fitBounds(bounds, {
                        padding: 80
                    });
                }
            }
        },

        displayOrganizedCarpoolRoute(index) {
            if (!this.map || !this.map.loaded() || !this.organizedCarpools[index]) return;

            const carpool = this.organizedCarpools[index];
            const allCoords = [];

            // If we have a detailed polyline, use it
            if (carpool.polyline && typeof polyline !== 'undefined') {
                const decoded = polyline.decode(carpool.polyline, 5);
                const coordinates = decoded.map((coord) => [coord[1], coord[0]]);

                coordinates.forEach((coord) => allCoords.push(coord));

                this.map.addSource('route-carpool-polyline', {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': coordinates
                        }
                    }
                });

                this.map.addLayer({
                    'id': 'route-carpool-polyline',
                    'type': 'line',
                    'source': 'route-carpool-polyline',
                    'paint': {
                        'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
                        'line-width': 4
                    }
                });
            }

            // Add markers for driver departure and arrival
            if (carpool.driverDepartureLocation) {
                const driverStartEl = document.createElement('div');
                driverStartEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
                driverStartEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                `;
                const driverStartMarker = new maplibregl.Marker({element: driverStartEl})
                    .setLngLat(carpool.driverDepartureLocation)
                    .addTo(this.map);
                this.routeMarkers.push(driverStartMarker);
                allCoords.push(carpool.driverDepartureLocation);
            }

            if (carpool.driverArrivalLocation) {
                const driverEndEl = document.createElement('div');
                driverEndEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
                driverEndEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                `;
                const driverEndMarker = new maplibregl.Marker({element: driverEndEl})
                    .setLngLat(carpool.driverArrivalLocation)
                    .addTo(this.map);
                this.routeMarkers.push(driverEndMarker);
                allCoords.push(carpool.driverArrivalLocation);
            }

            // Add passenger pickup and drop locations to bounds (markers already exist)
            if (carpool.departureLocation) {
                allCoords.push(carpool.departureLocation);
            }
            if (carpool.arrivalLocation) {
                allCoords.push(carpool.arrivalLocation);
            }

            // Fit bounds to show all points
            if (allCoords.length > 0) {
                const bounds = allCoords.reduce((bounds, coord) => {
                    return bounds.extend(coord);
                }, new maplibregl.LngLatBounds(allCoords[0], allCoords[0]));

                this.map.fitBounds(bounds, {
                    padding: 80
                });
            }
        },

        displayCarpoolRoute(index) {
            if (!this.map || !this.map.loaded() || !this.carpools[index]) return;

            const carpool = this.carpools[index];
            const allCoords = [];

            // If we have a detailed polyline, use it
            if (carpool.polyline && typeof polyline !== 'undefined') {
                const decoded = polyline.decode(carpool.polyline, 5);
                const coordinates = decoded.map((coord) => [coord[1], coord[0]]);

                coordinates.forEach((coord) => allCoords.push(coord));

                this.map.addSource('route-carpool-rdex-polyline', {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': coordinates
                        }
                    }
                });

                this.map.addLayer({
                    'id': 'route-carpool-rdex-polyline',
                    'type': 'line',
                    'source': 'route-carpool-rdex-polyline',
                    'paint': {
                        'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
                        'line-width': 4
                    }
                });
            } else {
                // If no polyline, draw lines between driver departure -> pickup -> drop -> driver arrival
                const routeCoords = [];

                // Always use at least pickup and drop (they should always exist)
                if (carpool.driverDepartureLocation) {
                    routeCoords.push(carpool.driverDepartureLocation);
                    allCoords.push(carpool.driverDepartureLocation);
                }
                if (carpool.pickupLocation) {
                    routeCoords.push(carpool.pickupLocation);
                    allCoords.push(carpool.pickupLocation);
                }
                if (carpool.dropLocation) {
                    routeCoords.push(carpool.dropLocation);
                    allCoords.push(carpool.dropLocation);
                }
                if (carpool.driverArrivalLocation) {
                    routeCoords.push(carpool.driverArrivalLocation);
                    allCoords.push(carpool.driverArrivalLocation);
                }

                console.log('Carpool route coords:', routeCoords);

                if (routeCoords.length >= 2) {
                    this.map.addSource('route-carpool-rdex-simple', {
                        'type': 'geojson',
                        'data': {
                            'type': 'Feature',
                            'properties': {},
                            'geometry': {
                                'type': 'LineString',
                                'coordinates': routeCoords
                            }
                        }
                    });

                    this.map.addLayer({
                        'id': 'route-carpool-rdex-simple',
                        'type': 'line',
                        'source': 'route-carpool-rdex-simple',
                        'paint': {
                            'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
                            'line-width': 4,
                            'line-dasharray': [2, 2] // dashed line to indicate it's not the actual route
                        }
                    });
                }
            }

            // Add markers for driver departure and arrival (if they exist)
            if (carpool.driverDepartureLocation) {
                const driverStartEl = document.createElement('div');
                driverStartEl.className = 'w-8 h-8 rounded-co bg-blue-600 border border-white shadow-md flex items-center justify-center';
                driverStartEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                `;
                const driverStartMarker = new maplibregl.Marker({element: driverStartEl})
                    .setLngLat(carpool.driverDepartureLocation)
                    .addTo(this.map);
                this.routeMarkers.push(driverStartMarker);
            }

            if (carpool.driverArrivalLocation) {
                const driverEndEl = document.createElement('div');
                driverEndEl.className = 'w-8 h-8 rounded-co bg-blue-600 border border-white shadow-md flex items-center justify-center';
                driverEndEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                `;
                const driverEndMarker = new maplibregl.Marker({element: driverEndEl})
                    .setLngLat(carpool.driverArrivalLocation)
                    .addTo(this.map);
                this.routeMarkers.push(driverEndMarker);
            }

            // Add marker for pickup location (green)
            if (carpool.pickupLocation) {
                const pickupEl = document.createElement('div');
                pickupEl.className = 'w-8 h-8 rounded-co bg-green-600 border border-white shadow-md flex items-center justify-center';
                pickupEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                `;
                const pickupMarker = new maplibregl.Marker({element: pickupEl})
                    .setLngLat(carpool.pickupLocation)
                    .addTo(this.map);
                this.routeMarkers.push(pickupMarker);
            }

            // Add marker for drop location (red)
            if (carpool.dropLocation) {
                const dropEl = document.createElement('div');
                dropEl.className = 'w-8 h-8 rounded-co bg-red-600 border border-white shadow-md flex items-center justify-center';
                dropEl.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
                        <line x1="4" y1="22" x2="4" y2="15"></line>
                    </svg>
                `;
                const dropMarker = new maplibregl.Marker({element: dropEl})
                    .setLngLat(carpool.dropLocation)
                    .addTo(this.map);
                this.routeMarkers.push(dropMarker);
            }

            // Fit bounds to show all points
            if (allCoords.length > 0) {
                const bounds = allCoords.reduce((bounds, coord) => {
                    return bounds.extend(coord);
                }, new maplibregl.LngLatBounds(allCoords[0], allCoords[0]));

                this.map.fitBounds(bounds, {
                    padding: 80
                });
            }
        },

        async displayKBSolution(index) {
            if (!this.map || !this.map.loaded() || !this.kbSolutions[index]) return;

            const solution = this.kbSolutions[index];

            if (!solution.geography || solution.geography.length === 0) return;

            // Collect geography features from the solution
            const allFeatures = [];
            for (const geo of solution.geography) {
                // Use the geography feature that was fetched by the backend
                if (geo.geography && geo.geography.geometry) {
                    allFeatures.push(geo.geography);
                }
            }

            if (allFeatures.length === 0) return;

            // Add all polygons to the map
            allFeatures.forEach((feature, idx) => {
                const sourceId = 'route-kb-' + index + '-' + idx;

                this.map.addSource(sourceId, {
                    'type': 'geojson',
                    'data': feature
                });

                // Add fill layer
                this.map.addLayer({
                    'id': sourceId + '-fill',
                    'type': 'fill',
                    'source': sourceId,
                    'paint': {
                        'fill-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-orange').trim(),
                        'fill-opacity': 0.2
                    }
                });

                // Add outline layer
                this.map.addLayer({
                    'id': sourceId + '-outline',
                    'type': 'line',
                    'source': sourceId,
                    'paint': {
                        'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-orange').trim(),
                        'line-width': 2
                    }
                });
            });

            // Fit bounds to show all polygons
            const bounds = new maplibregl.LngLatBounds();
            allFeatures.forEach(feature => {
                if (feature.geometry.type === 'Polygon') {
                    feature.geometry.coordinates[0].forEach(coord => {
                        bounds.extend(coord);
                    });
                } else if (feature.geometry.type === 'MultiPolygon') {
                    feature.geometry.coordinates.forEach(polygon => {
                        polygon[0].forEach(coord => {
                            bounds.extend(coord);
                        });
                    });
                }
            });

            if (!bounds.isEmpty()) {
                this.map.fitBounds(bounds, {
                    padding: 50
                });
            }
        },

        displayVehiclesMarkers() {
            if (!this.map || !this.map.loaded()) return;

            const bounds = new maplibregl.LngLatBounds();
            let hasMarkers = false;

            // Display all vehicles as markers
            this.vehicles.forEach((vehicle, idx) => {
                if (!vehicle.location) return;

                const el = document.createElement('div');
                el.className = 'w-10 h-10 rounded-co bg-co-orange border-2 border-white shadow-md flex items-center justify-center cursor-pointer hover:scale-110 transition-transform';
                el.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path>
                        <circle cx="7" cy="17" r="2"></circle>
                        <circle cx="17" cy="17" r="2"></circle>
                    </svg>
                `;

                const marker = new maplibregl.Marker({element: el})
                    .setLngLat(vehicle.location)
                    .setPopup(new maplibregl.Popup({offset: 25, className: 'rounded-lg'})
                        .setHTML(`
                            <div class="p-3">
                                <div class="font-semibold text-sm text-gray-900">${vehicle.name}</div>
                                ${vehicle.type ? `<p class="text-xs text-gray-600 mt-1">${vehicle.type}</p>` : ''}
                                ${vehicle.address ? `<p class="text-xs text-gray-500 mt-1">${vehicle.address}</p>` : ''}
                            </div>
                        `))
                    .addTo(this.map);

                this.routeMarkers.push(marker);
                bounds.extend(vehicle.location);
                hasMarkers = true;
            });

            // Fit map to show all vehicle markers
            if (hasMarkers) {
                this.map.fitBounds(bounds, {
                    padding: 100,
                    maxZoom: 14
                });
            }
        },

        displayVehicleMarker(vehicleIndex) {
            if (!this.map || !this.map.loaded() || !this.vehicles[vehicleIndex]) return;

            const vehicle = this.vehicles[vehicleIndex];
            if (!vehicle.location) return;

            // Create a larger marker for the selected vehicle
            const el = document.createElement('div');
            el.className = 'w-12 h-12 rounded-co bg-co-orange border-2 border-white shadow-lg flex items-center justify-center';
            el.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path>
                    <circle cx="7" cy="17" r="2"></circle>
                    <circle cx="17" cy="17" r="2"></circle>
                </svg>
            `;

            const marker = new maplibregl.Marker({element: el})
                .setLngLat(vehicle.location)
                .addTo(this.map);

            this.routeMarkers.push(marker);

            // Center map on the vehicle
            this.map.flyTo({
                center: vehicle.location,
                zoom: 15,
                duration: 1000
            });
        },

        getVehicleBookingUrl() {
            let url = '/app/vehicles/?';

            if (this.passengerId) {
                url += 'beneficiaryid=' + this.passengerId;
            }

            // Use the departure date from search as start date
            if (this.departureDate) {
                url += '&startdate=' + this.departureDate;

                // Calculate end date as 7 days after start date
                const startDate = new Date(this.departureDate);
                startDate.setDate(startDate.getDate() + 7);
                const endDate = startDate.toISOString().split('T')[0];
                url += '&enddate=' + endDate;
            }

            return url;
        },

        getSelectLabel(field, value) {
            if (!field.options || !value) return value;

            const option = field.options.find(opt => opt.value === value);
            return option ? option.label : value;
        }
    };
}
</script>
{{end}}