@extends('layout.app')
@section('title', __('Trips'))

@push('styles')
    <style>
        .destination-item {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .passenger-section {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .type-selector {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }
        .type-selector label {
            margin-right: 5px;
            margin-bottom: 0;
        }
        .site-field, .free-field {
            transition: all 0.3s ease;
        }
        
        /* Styles pour les étapes */
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .step-indicator .step {
            display: flex;
            align-items: center;
        }
        .step-indicator .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        .step-indicator .step.active .step-circle {
            background-color: #009a9c;
            color: white;
        }
        .step-indicator .step.completed .step-circle {
            background-color: #009a9c;
            color: white;
        }
        .step-indicator .step-label {
            margin-left: 10px;
            font-weight: 500;
            color: #6c757d;
        }
        .step-indicator .step.active .step-label {
            color: #009a9c;
            font-weight: 600;
        }
        .step-indicator .step.completed .step-label {
            color: #009a9c;
        }
        .step-indicator .step-connector {
            width: 80px;
            height: 2px;
            background-color: #e9ecef;
            margin: 0 15px;
            transition: all 0.3s ease;
        }
        .step-indicator .step-connector.active {
            background-color: #009a9c;
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
        }
        .btn-outline-primary-custom {
            color: #009a9c;
            border-color: #009a9c;
        }
        .btn-outline-primary-custom:hover {
            background-color: #009a9c;
            color: white;
        }
        .btn-primary-custom {
            background-color: #009a9c;
            border-color: #009a9c;
            color: white;
        }
        .btn-primary-custom:hover {
            background-color: #008584;
            border-color: #008584;
        }
    </style>
    <style>
        .passenger-source-section {
            margin-bottom: 20px;
        }

        .passenger-target-section {
            height: 100%;
        }

        .passenger-list {
            min-height: 50px;
            border: 2px dashed #dee2e6;
            border-radius: 5px;
            padding: 10px;
            background-color: #fafafa;
            transition: all 0.3s ease;
        }

        .passenger-list-scrollable {
            max-height: 250px;
            overflow-y: auto;
        }

        #selected-passengers.passenger-list-scrollable {
            max-height: 500px;
        }

        .passenger-list.drag-over {
            border-color: #009a9c;
            background-color: #e8f5f5;
        }

        .passenger-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 8px 12px;
            margin-bottom: 8px;
            cursor: grab;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .passenger-card:active {
            cursor: grabbing;
        }

        .passenger-card.dragging {
            opacity: 0.5;
            transform: scale(0.95);
        }

        .passenger-card.drag-disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .passenger-card .drag-handle {
            color: #999;
            cursor: grab;
            font-size: 18px;
            flex-shrink: 0;
        }

        .passenger-card .passenger-info {
            flex: 1;
            min-width: 0;
        }

        .passenger-card .passenger-info strong {
            font-size: 13px;
        }

        .passenger-card .passenger-info small {
            font-size: 11px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .passenger-card .remove-passenger {
            color: #dc3545;
            cursor: pointer;
            padding: 2px 8px;
            border: none;
            background: none;
            font-size: 18px;
            font-weight: bold;
            line-height: 1;
            flex-shrink: 0;
        }

        .passenger-card .remove-passenger:hover {
            color: #a71d2a;
        }

        .passenger-card.selected-passenger {
            background-color: #e8f5f5;
            border-color: #009a9c;
        }

        .passenger-type-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 500;
            flex-shrink: 0;
        }

        .badge-aller {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-retour {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-employee {
            background-color: #cce5ff;
            color: #004085;
        }

        .badge-info {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        .no-results-message {
            text-align: center;
            padding: 20px;
            color: #999;
        }
    </style>
@endpush

@section('active_trips', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Trips')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($trip))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$trip->reference ?? ''}}</li>
                            @else
                                <li class="breadcrumb-item active">{{ __('Add') }}</li>
                            @endif
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-msm-right">
                    <a class="btn btn-dark" href="{{ route('trips.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Trips') }}
                    </a>
                    <button type="button" class="btn btn-outline-primary-custom ml-1" id="prevStep" style="display: none;">
                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                    </button>
                    <button type="button" class="btn btn-primary-custom ml-1" id="nextStep">
                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                    </button>
                    <button type="submit" form="tripForm" class="btn btn-success ml-1" id="submitForm" style="display: none;">
                        <i class="la la-save"></i> {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <!-- Indicateur d'étapes -->
                        <div class="step-indicator">
                            <div class="step active" data-step="1">
                                <div class="step-circle">1</div>
                                <span class="step-label">{{ __('Trip Info') }}</span>
                            </div>
                            <div class="step-connector" data-connector="1"></div>
                            <div class="step" data-step="2">
                                <div class="step-circle">2</div>
                                <span class="step-label">{{ __('Destinations') }}</span>
                            </div>
                            <div class="step-connector" data-connector="2"></div>
                            <div class="step" data-step="3">
                                <div class="step-circle">3</div>
                                <span class="step-label">{{ __('Passengers') }}</span>
                            </div>
                        </div>

                        <form autocomplete="off" id="tripForm" method="POST" action="{{ isset($trip) ? route('trips.update', $trip->id) : route('trips.store') }}" enctype="multipart/form-data">
                            @csrf
                            @if(isset($trip))
                                @method('PUT')
                            @endif
                            <input type="hidden" name="status" value="pending">
                            <input type="hidden" name="employe_id" id="employe_id" value="{{ auth()->user()->employe_id }}">
                            <input type="hidden" name="driver_id" id="driver_id" value="{{old('driver_id', $trip->driver_id ?? '')}}">
                            
                            <!-- Étape 1: Informations du trajet -->
                            <div class="form-step active" id="step1">
                                @if (!isset($trip))
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="load_reservation">{{ __('Load reservation data') }}</label>
                                                <select id="load_reservation" name="load_reservation" class="form-control select2">
                                                    <option value=""></option>
                                                    @foreach($reservations as $reservation)
                                                        <option value="{{ $reservation->id }}">
                                                            #{{ $reservation->reference .' | '. $reservation->date->format('Y-m-d H:i') .' | '. $reservation->departAddress(0).' --> '.$reservation->destinationAddress(0) }} 
                                                            {{ $reservation->round_trip && $reservation->date_round_trip ? ' ['. __("Round Trip").': '.$reservation->date_round_trip->format('Y-m-d H:i').']' : '' }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <h4 class="form-section mb-2"><i class="la la-info-circle"></i> {{ __('Trip Information') }}</h4>
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="vehicule_id">{{ __('Vehicle') }} <span class="text-danger">*</span></label>
                                            <select id="vehicule_id" name="vehicule_id" class="form-control select2" required>
                                                <option value="">{{ __('Select a vehicle') }}</option>
                                                @foreach($vehicles as $vehicle)
                                                    <option value="{{ $vehicle->id }}" {{ old('vehicule_id', $trip->vehicule_id ?? '') == $vehicle->id ? 'selected' : '' }}>
                                                        {{ $vehicle->immatriculation }} - {{ $vehicle->marque }}  ({{ $vehicle->nombre_places }} {{ __('Places')}})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="driver_source">{{ __('Driver Source') }} <span class="text-danger">*</span></label>
                                            <select id="driver_source" name="driver_source" class="form-control" required>
                                                <option value="drivers" {{$driver_source == 'drivers' ? 'selected' : ''}} >{{ __("Drivers")}}</option>
                                                <option value="employes" {{$driver_source == 'employes' ? 'selected' : ''}} >{{ __("Employes")}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 {{$driver_source == 'drivers' ? '' : 'd-none'}}" id="source-drivers">
                                        <div class="form-group">
                                            <label for="driver_id_1">{{ __('Driver') }} <span class="text-danger">*</span></label>
                                            <select id="driver_id_1" name="driver_id_1" class="form-control select2">
                                                <option value="">{{ __('Select a driver') }}</option>
                                                @foreach($drivers as $driver)
                                                    <option value="{{ $driver->id }}" {{ old('driver_id', $trip->driver_id ?? '') == $driver->id ? 'selected' : '' }}>
                                                        #{{ $driver->reference }} {{ $driver->first_name }} {{ $driver->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 {{$driver_source == 'drivers' ? 'd-none' : ''}}" id="source-employes">
                                        <div class="form-group">
                                            <label for="driver_id_2">{{ __('Employés') }} <span class="text-danger">*</span></label>
                                            <select id="driver_id_2" name="driver_id_2" class="form-control select2">
                                                <option value="">{{ __('Select a driver') }}</option>
                                                @foreach($other_drivers as $driver)
                                                    <option value="{{ $driver->id }}" {{ old('driver_id', $trip->driver_id ?? '') == $driver->id ? 'selected' : '' }}>
                                                        #{{ $driver->reference }} {{ $driver->first_name }} {{ $driver->last_name }} @if($driver->has_permit) ({{ __('A un permis de conduite')}}) @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="start_date">{{ __('Start date') }} <span class="text-danger">*</span></label>
                                            <input type="datetime-local" id="start_date" name="start_date" class="form-control" 
                                                   value="{{ old('start_date', isset($trip) && $trip->start_date ? $trip->start_date->format('Y-m-d\TH:i') : '') }}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4 class="form-section"><i class="la la-map-marker"></i> {{ __('Departure') }}</h4>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="depart_type">{{ __('Departure type:') }} </label>
                                            <select id="depart_type" name="depart_type" class="form-control">
                                                <option value="site" {{ (($trip->depart_site_id??'') ? 'site' : 'free') == 'site' ? 'selected' : ''}} >{{ __("Site")}}</option>
                                                <option value="free" {{ (!($trip->depart_site_id??'') && ($trip->depart??'') ? 'free' : 'site') == 'free' ? 'selected' : ''}} >{{ __("Free address")}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-8 {{ (!($trip->depart_site_id??'') && ($trip->depart??'') ? 'free' : 'site') == 'free' ? 'd-none' : ''}}" id="depart-site-field">
                                        <div class="form-group">
                                            <label for="depart_site_id">{{ __('Departure Site') }}</label>
                                            <select id="depart_site_id" name="depart_site_id" class="form-control select2">
                                                <option value="">{{ __('Select a site') }}</option>
                                                @foreach($sites as $site)
                                                    <option value="{{ $site->id }}" {{ old('depart_site_id', $trip->depart_site_id ?? '') == $site->id ? 'selected' : '' }}>{{ $site->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-8 {{ (!($trip->depart_site_id??'') && ($trip->depart??'') ? 'free' : 'site') == 'free' ? '' : 'd-none'}}" id="depart-free-field">
                                        <div class="form-group">
                                            <label for="depart">{{ __('Departure Address') }}</label>
                                            <input type="text" id="depart" name="depart" class="form-control" value="{{ old('depart', $trip->depart ?? '') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 form-group">
                                        <label for="description">{{ __('Notes') }}</label>
                                        <textarea name="description" id="description" class="form-control" rows="5" >{{ isset($trip) ? $trip->description : old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Étape 2: Destinations -->
                            <div class="form-step" id="step2">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4 class="form-section"><i class="la la-road"></i> {{ __('Destinations') }}</h4>
                                        <div id="destinations-container">
                                            @php
                                                $destinations = old('destinations', isset($trip) ? ($trip->destinations->count() ? $trip->destinations->toArray() : [['destination_site_id' => null, 'destination' => null]]) : [['destination_site_id' => null, 'destination' => null]]);
                                            @endphp
                                            
                                            @foreach($destinations as $index => $destination)
                                                <div class="destination-item" data-index="{{ $index }}">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="type-selector">
                                                                <span class="font-weight-bold mr-2">{{ __('Destination type:') }}</span>
                                                                <div class="custom-control custom-radio custom-control-inline">
                                                                    <input type="radio" id="dest_{{ $index }}_type_site" 
                                                                           name="destinations[{{ $index }}][type]" 
                                                                           value="site" 
                                                                           class="custom-control-input destination-type"
                                                                           {{ old('destinations.'.$index.'.type', (isset($destination['destination_site_id']) && $destination['destination_site_id']) ? 'site' : 'free') == 'site' ? 'checked' : '' }}
                                                                           data-index="{{ $index }}">
                                                                    <label class="custom-control-label" for="dest_{{ $index }}_type_site">{{ __('Site') }}</label>
                                                                </div>
                                                                <div class="custom-control custom-radio custom-control-inline">
                                                                    <input type="radio" id="dest_{{ $index }}_type_free" 
                                                                           name="destinations[{{ $index }}][type]" 
                                                                           value="free" 
                                                                           class="custom-control-input destination-type"
                                                                           {{ old('destinations.'.$index.'.type', (!isset($destination['destination_site_id']) || !$destination['destination_site_id']) ? 'free' : '') == 'free' ? 'checked' : '' }}
                                                                           data-index="{{ $index }}">
                                                                    <label class="custom-control-label" for="dest_{{ $index }}_type_free">{{ __('Free address') }}</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-10">
                                                            <div class="form-group site-field destination-site-field-{{ $index }}" 
                                                                 style="{{ old('destinations.'.$index.'.type', (isset($destination['destination_site_id']) && $destination['destination_site_id']) ? 'site' : 'free') == 'site' ? '' : 'display: none;' }}">
                                                                <label for="destinations_{{ $index }}_site">{{ __('Site') }}</label>
                                                                <select id="destinations_{{ $index }}_site" 
                                                                        name="destinations[{{ $index }}][destination_site_id]" 
                                                                        class="form-control select2 destination-site">
                                                                    <option value="">{{ __('Select a site') }}</option>
                                                                    @foreach($sites as $site)
                                                                        <option value="{{ $site->id }}" 
                                                                            {{ ($destination['destination_site_id'] ?? '') == $site->id ? 'selected' : '' }}>
                                                                            {{ $site->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group free-field destination-free-field-{{ $index }}"
                                                                 style="{{ old('destinations.'.$index.'.type', (!isset($destination['destination_site_id']) || !$destination['destination_site_id']) ? 'free' : '') == 'free' ? '' : 'display: none;' }}">
                                                                <label for="destinations_{{ $index }}_address">{{ __('Address') }}</label>
                                                                <input type="text" 
                                                                       id="destinations_{{ $index }}_address" 
                                                                       name="destinations[{{ $index }}][destination]" 
                                                                       class="form-control destination-address" 
                                                                       value="{{ $destination['destination'] ?? '' }}" 
                                                                       placeholder="{{ __('Enter destination address') }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label>&nbsp;</label>
                                                                @if($loop->first)
                                                                    <button type="button" class="btn btn-success btn-block add-destination">
                                                                        <i class="la la-plus"></i>
                                                                    </button>
                                                                @else
                                                                    <button type="button" class="btn btn-danger btn-block remove-destination">
                                                                        <i class="la la-trash"></i>
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Étape 3: Passagers -->
                            <div class="form-step" id="step3">
                                <div class="row">
                                    <!-- Colonne gauche : Passagers disponibles -->
                                    <div class="col-md-5">
                                        <div class="passenger-source-section">
                                            <h4 class="form-section"><i class="la la-user-plus"></i> {{ __('Available Passengers') }}</h4>
                                            
                                            <!-- Filtres -->
                                            <div class="row mb-2">
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="la la-search"></i></span>
                                                        </div>
                                                        <input type="text" id="passenger-filter" class="form-control" placeholder="{{ __('Search by reference, site or date...') }}">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Passagers des réservations -->
                                            <div class="form-group mt-2">
                                                <label class="font-weight-bold">
                                                    <span class="badge badge-info">{{ __('Reservations') }}</span>
                                                </label>
                                                <div class="passenger-list passenger-list-scrollable" id="available-reservation-passengers" data-type="reservation">
                                                    @foreach($reservations as $reservation)
                                                        @foreach ($reservation->passagers as $passager)
                                                            @php
                                                                $isAllerSelected = in_array($passager->id, old('reservation_employe_id_aller', isset($trip) ? $trip->passagers->whereNotNull('reservation_id')->where('type', 'aller')->pluck('reservation_employe_id')->toArray() : []));
                                                                $isRetourSelected = in_array($passager->id, old('reservation_employe_id_retour', isset($trip) ? $trip->passagers->whereNotNull('reservation_id')->where('type', 'retour')->pluck('reservation_employe_id')->toArray() : []));
                                                                $isSelected = $isAllerSelected || $isRetourSelected;
                                                                $passengerType = $isAllerSelected ? 'aller' : ($isRetourSelected ? 'retour' : null);
                                                                
                                                                // Construire les adresses
                                                                $allerAddress = $reservation->departAddress(0).' --> '.$reservation->destinationAddress(0);
                                                                $retourAddress = $reservation->round_trip ? $reservation->departAddress(1).' --> '.$reservation->destinationAddress(1) : '';
                                                                
                                                                // Sites pour le filtre
                                                                $departSite = $reservation->depart_site_id ? \App\Models\Site::find($reservation->depart_site_id)?->name : '';
                                                                $destinationSite = $reservation->destination_site_id ? \App\Models\Site::find($reservation->destination_site_id)?->name : '';
                                                                
                                                                // Vérifier si ce passager peut être ajouté au trajet
                                                                $canBeAddedAller = ($passager->trip_id == null) || (isset($trip) && ($passager->trip_id == $trip->id));
                                                                $canBeAddedRetour = $reservation->round_trip && (($passager->return_trip_id == null) || (isset($trip) && ($passager->return_trip_id == $trip->id)));
                                                            @endphp
                                                            
                                                            @if($canBeAddedAller)
                                                                <div class="passenger-card @if($isAllerSelected) selected-passenger @endif" 
                                                                    draggable="{{ $isAllerSelected ? 'false' : 'true' }}" 
                                                                    data-id="{{ $passager->id }}" 
                                                                    data-type="aller"
                                                                    data-name="{{ $passager->employe->first_name.' '.$passager->employe->last_name }}"
                                                                    data-reference="#{{ $passager->employe->reference }}"
                                                                    data-reservation-ref="#{{ $reservation->reference }}"
                                                                    data-sites="{{ $departSite }} {{ $destinationSite }}"
                                                                    data-date="{{ $reservation->date ? $reservation->date->format('Y-m-d H:i') : '' }}"
                                                                    data-address="{{ $allerAddress }}"
                                                                    data-search="{{ $reservation->reference }} {{ $departSite }} {{ $destinationSite }} {{ $reservation->date ? $reservation->date->format('Y-m-d') : '' }} {{ $passager->employe->first_name }} {{ $passager->employe->last_name }} {{ $passager->employe->reference }}">
                                                                    <span class="drag-handle">⋮⋮</span>
                                                                    <div class="passenger-info">
                                                                        <strong>#{{ $passager->employe->reference }}</strong> 
                                                                        {{ $passager->employe->first_name.' '.$passager->employe->last_name }}
                                                                        <br>
                                                                        <small class="text-muted">
                                                                            #{{ $reservation->reference }} 
                                                                            <span class="badge badge-aller">{{ __('Aller') }}</span>
                                                                            [{{ $allerAddress }}]
                                                                        </small>
                                                                    </div>
                                                                    @if($isAllerSelected)
                                                                        <button type="button" class="remove-passenger" title="{{ __('Remove') }}">×</button>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                            
                                                            @if($canBeAddedRetour)
                                                                <div class="passenger-card @if($isRetourSelected) selected-passenger @endif" 
                                                                    draggable="{{ $isRetourSelected ? 'false' : 'true' }}" 
                                                                    data-id="{{ $passager->id }}" 
                                                                    data-type="retour"
                                                                    data-name="{{ $passager->employe->first_name.' '.$passager->employe->last_name }}"
                                                                    data-reference="#{{ $passager->employe->reference }}"
                                                                    data-reservation-ref="#{{ $reservation->reference }}"
                                                                    data-sites="{{ $departSite }} {{ $destinationSite }}"
                                                                    data-date="{{ $reservation->date_round_trip ? $reservation->date_round_trip->format('Y-m-d H:i') : '' }}"
                                                                    data-address="{{ $retourAddress }}"
                                                                    data-search="{{ $reservation->reference }} {{ $departSite }} {{ $destinationSite }} {{ $reservation->date_round_trip ? $reservation->date_round_trip->format('Y-m-d') : '' }} {{ $passager->employe->first_name }} {{ $passager->employe->last_name }} {{ $passager->employe->reference }}">
                                                                    <span class="drag-handle">⋮⋮</span>
                                                                    <div class="passenger-info">
                                                                        <strong>#{{ $passager->employe->reference }}</strong> 
                                                                        {{ $passager->employe->first_name.' '.$passager->employe->last_name }}
                                                                        <br>
                                                                        <small class="text-muted">
                                                                            #{{ $reservation->reference }} 
                                                                            <span class="badge badge-retour">{{ __('Retour') }}</span>
                                                                            [{{ $retourAddress }}]
                                                                        </small>
                                                                    </div>
                                                                    @if($isRetourSelected)
                                                                        <button type="button" class="remove-passenger" title="{{ __('Remove') }}">×</button>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            </div>
                                            
                                            <!-- Employés -->
                                            <div class="form-group mt-3">
                                                <label class="font-weight-bold">
                                                    <span class="badge badge-employee">{{ __('Employees') }}</span>
                                                </label>
                                                <div class="passenger-list passenger-list-scrollable" id="available-employees-passengers" data-type="employee">
                                                    @foreach($allEmployees as $employee)
                                                        @php
                                                            $isSelected = in_array($employee->id, old('employees', isset($trip) ? $trip->passagers->whereNull('reservation_id')->pluck('employe_id')->toArray() : []));
                                                        @endphp
                                                        <div class="passenger-card @if($isSelected) selected-passenger @endif" 
                                                            draggable="{{ $isSelected ? 'false' : 'true' }}" 
                                                            data-id="{{ $employee->id }}" 
                                                            data-type="employee"
                                                            data-name="{{ $employee->first_name }} {{ $employee->last_name }}"
                                                            data-reference="#{{ $employee->reference }}"
                                                            data-reservation-ref=""
                                                            data-sites=""
                                                            data-date=""
                                                            data-address=""
                                                            data-search="{{ $employee->reference }} {{ $employee->first_name }} {{ $employee->last_name }}">
                                                            <span class="drag-handle">⋮⋮</span>
                                                            <div class="passenger-info">
                                                                <strong>#{{ $employee->reference }}</strong> 
                                                                {{ $employee->first_name }} {{ $employee->last_name }}
                                                            </div>
                                                            @if($isSelected)
                                                                <button type="button" class="remove-passenger" title="{{ __('Remove') }}">×</button>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Colonne droite : Passagers sélectionnés -->
                                    <div class="col-md-7">
                                        <div class="passenger-target-section">
                                            <h4 class="form-section"><i class="la la-check-circle"></i> {{ __('Selected Passengers') }}</h4>
                                            <div class="passenger-list passenger-list-scrollable" id="selected-passengers">
                                                <p class="text-muted text-center" id="no-passengers-message">
                                                    <i class="la la-info-circle"></i> {{ __('Drag and drop passengers here') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Champs cachés pour la soumission -->
                                <div id="hidden-passenger-inputs"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            let currentStep = 1;
            const totalSteps = 3;
            // Initialisation
            updateStepUI();
            // Gestion de la navigation par étapes
            $('#nextStep').on('click', function() {
                if (currentStep < totalSteps) {
                    // Validation de l'étape courante si nécessaire
                    if (validateStep(currentStep)) {
                        currentStep++;
                        updateStepUI();
                    }
                }
            });
            $('#prevStep').on('click', function() {
                if (currentStep > 1) {
                    currentStep--;
                    updateStepUI();
                }
            });
            function updateStepUI() {
                // Masquer toutes les étapes
                $('.form-step').removeClass('active');
                // Afficher l'étape courante
                $('#step' + currentStep).addClass('active');

                // Mettre à jour l'indicateur d'étapes
                $('.step').removeClass('active completed');
                $('.step-connector').removeClass('active');

                for (let i = 1; i <= totalSteps; i++) {
                    if (i < currentStep) {
                        $('.step[data-step="' + i + '"]').addClass('completed');
                        if (i < totalSteps) {
                            $('.step-connector[data-connector="' + i + '"]').addClass('active');
                        }
                    } else if (i === currentStep) {
                        $('.step[data-step="' + i + '"]').addClass('active');
                    }
                }

                // Mettre à jour les boutons de navigation
                if (currentStep === 1) {
                    $('#prevStep').hide();
                } else {
                    $('#prevStep').show();
                }

                if (currentStep === totalSteps) {
                    $('#nextStep').hide();
                    $('#submitForm').show();
                } else {
                    $('#nextStep').show();
                    $('#submitForm').hide();
                }

                // Scroll en haut du formulaire
                $('html, body').animate({
                    scrollTop: $('.step-indicator').offset().top - 100
                }, 300);
            }
            function validateStep(step) {
                // Validation simple pour l'étape 1
                if (step === 1) {
                    const vehicule = $('#vehicule_id').val();
                    const startDate = $('#start_date').val();
                    
                    if (!vehicule) {
                        toastr.error('{{ __("Please select a vehicle") }}');
                        $('#vehicule_id').focus();
                        return false;
                    }
                    if (!startDate) {
                        toastr.error('{{ __("Please select a start date") }}');
                        $('#start_date').focus();
                        return false;
                    }
                }
                return true;
            }
            ajaxForm("#tripForm");
            $('#driver_source').on('change', function() {
                if ($(this).val() === 'drivers') {
                    $('#driver_id_2').val('').trigger('change');
                    $('#driver_id').val('');
                    $('#source-employes').addClass('d-none');
                    $('#source-drivers').removeClass('d-none');
                } else {
                    $('#driver_id_1').val('').trigger('change');
                    $('#driver_id').val('');
                    $('#source-drivers').addClass('d-none');
                    $('#source-employes').removeClass('d-none');
                }
            });
            $('#driver_id_1,#driver_id_2').on('change', function() {
                $('#driver_id').val($(this).val());
            });
            $('#depart_type').on('change', function() {
                if ($(this).val() === 'site') {
                    $('#depart').val('');
                    $('#depart-free-field').addClass('d-none');
                    $('#depart-site-field').removeClass('d-none');
                } else {
                    $('#depart_site_id').val('').trigger('change');
                    $('#depart-site-field').addClass('d-none');
                    $('#depart-free-field').removeClass('d-none');
                }
            });
            $('#load_reservation').on('change', function() {
                var resId = $(this).val();
                if (resId) {
                    $("body").LoadingOverlay("show");
                    $.ajax({
                        type: "GET",
                        url: '/trips/'+resId+'/getReservation',
                        dataType: 'JSON',
                        data:{
                            'id': resId,
                            '_token': '{{ csrf_token() }}',
                        },
                        success: function (data) {
                            if (data.success) {
                                // Update start_date
                                if (data.data.start_date) {
                                    $('#start_date').val(data.data.start_date);
                                }
                                
                                // Update departure type and fields
                                $('#depart_type').val(data.data.depart_type).trigger('change');
                                if (data.data.depart_type === 'site') {
                                    $('#depart_site_id').val(data.data.depart_site_id).trigger('change');
                                } else {
                                    $('#depart').val(data.data.depart);
                                }
                                
                                // Update destinations
                                if (data.data.destinations && data.data.destinations.length > 0) {
                                    // Clear existing destinations except the first one
                                    $('#destinations-container .destination-item:not(:first)').remove();
                                    
                                    // Update first destination
                                    const firstDest = data.data.destinations[0];
                                    const firstItem = $('#destinations-container .destination-item').first();
                                    const firstIndex = firstItem.data('index');
                                    
                                    if (firstDest.type === 'site') {
                                        $(`#dest_${firstIndex}_type_site`).prop('checked', true).trigger('change');
                                        $(`#destinations_${firstIndex}_site`).val(firstDest.destination_site_id).trigger('change');
                                    } else {
                                        $(`#dest_${firstIndex}_type_free`).prop('checked', true).trigger('change');
                                        $(`#destinations_${firstIndex}_address`).val(firstDest.destination);
                                    }
                                    
                                    // Add additional destinations if any
                                    for (let i = 1; i < data.data.destinations.length; i++) {
                                        const dest = data.data.destinations[i];
                                        // Trigger click on add destination button
                                        $('#destinations-container .add-destination').last().click();
                                        
                                        // Get the newly added destination index
                                        const newIndex = destinationCount - 1;
                                        
                                        if (dest.type === 'site') {
                                            $(`#dest_${newIndex}_type_site`).prop('checked', true).trigger('change');
                                            $(`#destinations_${newIndex}_site`).val(dest.destination_site_id).trigger('change');
                                        } else {
                                            $(`#dest_${newIndex}_type_free`).prop('checked', true).trigger('change');
                                            $(`#destinations_${newIndex}_address`).val(dest.destination);
                                        }
                                    }
                                }
                                
                                // Add passengers to selected area
                                if (data.data.passengers && data.data.passengers.length > 0) {
                                    data.data.passengers.forEach(function(passenger) {
                                        // Find the passenger card in available list and add it
                                        const $passengerCard = $(`.passenger-card[data-id="${passenger.id}"][data-type="aller"]`);
                                        if ($passengerCard.length && !$passengerCard.hasClass('selected-passenger')) {
                                            addPassengerToSelected($passengerCard[0]);
                                        }
                                    });
                                }
                                
                                $("body").LoadingOverlay("hide", true);
                                toastr.success(data.message);
                            } else {
                                $("body").LoadingOverlay("hide", true);
                                toastr.error(data.message);
                            }
                        },
                        error: function (data) {
                            $("body").LoadingOverlay("hide", true);
                            toastr.error("{{ __('An error has occurred. Please try again.')}}");
                        }
                    });
                }
            });
            // Gestion du type de destination
            $(document).on('change', '.destination-type', function() {
                const index = $(this).data('index');
                const type = $(this).val();
                if (type === 'site') {
                    $(`.destination-site-field-${index}`).show();
                    $(`.destination-free-field-${index}`).hide();
                    $(`#destinations_${index}_address`).val('');
                } else {
                    $(`.destination-site-field-${index}`).hide();
                    $(`.destination-free-field-${index}`).show();
                    $(`#destinations_${index}_site`).val('').trigger('change');
                }
            });
            let destinationCount = {{ count($destinations) }};
            // Gérer l'ajout de destinations
            $(document).on('click', '.add-destination', function() {
                const index = destinationCount++;
                const html = `
                    <div class="destination-item" data-index="${index}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="type-selector">
                                    <span class="font-weight-bold mr-2">{{ __('Destination type:') }}</span>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="dest_${index}_type_site" 
                                               name="destinations[${index}][type]" 
                                               value="site" 
                                               class="custom-control-input destination-type"
                                               data-index="${index}"
                                               checked>
                                        <label class="custom-control-label" for="dest_${index}_type_site">{{ __('Site') }}</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="dest_${index}_type_free" 
                                               name="destinations[${index}][type]" 
                                               value="free" 
                                               class="custom-control-input destination-type"
                                               data-index="${index}">
                                        <label class="custom-control-label" for="dest_${index}_type_free">{{ __('Free address') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-10">
                                <div class="form-group site-field destination-site-field-${index}">
                                    <label for="destinations_${index}_site">{{ __('Site') }}</label>
                                    <select id="destinations_${index}_site" 
                                            name="destinations[${index}][destination_site_id]" 
                                            class="form-control select2 destination-site">
                                        <option value="">{{ __('Select a site') }}</option>
                                        @foreach($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group free-field destination-free-field-${index}" style="display: none;">
                                    <label for="destinations_${index}_address">{{ __('Address') }}</label>
                                    <input type="text" 
                                           id="destinations_${index}_address" 
                                           name="destinations[${index}][destination]" 
                                           class="form-control destination-address" 
                                           placeholder="{{ __('Enter destination address') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-danger btn-block remove-destination">
                                        <i class="la la-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>`;
                $('#destinations-container').append(html);
                $('#destinations_' + index + '_site').select2();
            });
            // Gérer la suppression de destinations
            $(document).on('click', '.remove-destination', function() {
                $(this).closest('.destination-item').remove();
            });

            // Gestion du drag and drop des passagers
            function initDragAndDrop() {
                let draggedItem = null;
                
                // Gestionnaires d'événements pour les cartes passagers disponibles
                $(document).on('dragstart', '.passenger-card[draggable="true"]:not(.selected-passenger)', function(e) {
                    draggedItem = this;
                    $(this).addClass('dragging');
                    e.originalEvent.dataTransfer.effectAllowed = 'move';
                    e.originalEvent.dataTransfer.setData('text/plain', $(this).data('id'));
                });
                
                $(document).on('dragend', '.passenger-card', function(e) {
                    $(this).removeClass('dragging');
                    $('.passenger-list').removeClass('drag-over');
                    draggedItem = null;
                });
                
                // Zone de drop (passagers sélectionnés)
                $('#selected-passengers').on('dragover', function(e) {
                    e.preventDefault();
                    e.originalEvent.dataTransfer.dropEffect = 'move';
                    $(this).addClass('drag-over');
                });
                
                $('#selected-passengers').on('dragleave', function(e) {
                    $(this).removeClass('drag-over');
                });
                
                $('#selected-passengers').on('drop', function(e) {
                    e.preventDefault();
                    $(this).removeClass('drag-over');
                    
                    if (draggedItem) {
                        addPassengerToSelected(draggedItem);
                        draggedItem = null;
                    }
                });
                
                // Permettre le drop directement sur une carte
                $(document).on('drop', '.passenger-card[draggable="true"]:not(.selected-passenger)', function(e) {
                    e.stopPropagation();
                    if (draggedItem && draggedItem !== this) {
                        addPassengerToSelected(draggedItem);
                    }
                    draggedItem = null;
                });
                
                // Suppression d'un passager sélectionné depuis la zone "Available"
                $(document).on('click', '.passenger-list[data-type] .passenger-card.selected-passenger .remove-passenger', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    const $card = $(this).closest('.passenger-card');
                    const passengerId = $card.data('id');
                    const passengerType = $card.data('type');
                    
                    // Retirer de la zone sélectionnée
                    removePassengerFromSelected(passengerId, passengerType);
                    
                    // Réactiver la carte source
                    $card.removeClass('selected-passenger');
                    $card.attr('draggable', true);
                    $(this).remove();
                });
                
                // Suppression d'un passager depuis la zone "Selected"
                $(document).on('click', '#selected-passengers .passenger-card .remove-passenger', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    const $card = $(this).closest('.passenger-card');
                    const passengerId = $card.data('id');
                    const passengerType = $card.data('type');
                    
                    // Réactiver la carte source correspondante
                    const $sourceCard = $(`.passenger-list[data-type="${passengerType}"] .passenger-card[data-id="${passengerId}"]`);
                    if ($sourceCard.length) {
                        $sourceCard.removeClass('selected-passenger');
                        $sourceCard.attr('draggable', true);
                        $sourceCard.find('.remove-passenger').remove();
                    }
                    
                    // Chercher aussi dans les autres listes si le type est différent
                    if (!$sourceCard.length) {
                        // Chercher dans les listes de réservation si c'est aller/retour
                        if (passengerType === 'aller' || passengerType === 'retour') {
                            const $reservationCards = $('#available-reservation-passengers .passenger-card[data-id="' + passengerId + '"]');
                            $reservationCards.each(function() {
                                $(this).removeClass('selected-passenger');
                                $(this).attr('draggable', true);
                                $(this).find('.remove-passenger').remove();
                            });
                        }
                        
                        // Chercher dans les employés
                        const $employeeCard = $('#available-employees-passengers .passenger-card[data-id="' + passengerId + '"]');
                        if ($employeeCard.length) {
                            $employeeCard.removeClass('selected-passenger');
                            $employeeCard.attr('draggable', true);
                            $employeeCard.find('.remove-passenger').remove();
                        }
                    }
                    
                    // Supprimer la carte de la zone sélectionnée
                    $card.remove();
                    
                    if ($('#selected-passengers .passenger-card').length === 0) {
                        $('#no-passengers-message').show();
                    }
                    
                    updateHiddenInputs();
                });
                
                // Initialiser la suppression pour les cartes déjà sélectionnées au chargement
                $('.passenger-card.selected-passenger .remove-passenger').on('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    const $card = $(this).closest('.passenger-card');
                    const passengerId = $card.data('id');
                    const passengerType = $card.data('type');
                    
                    // Trouver et supprimer de la zone sélectionnée
                    const $selectedCard = $(`#selected-passengers .passenger-card[data-id="${passengerId}"][data-type="${passengerType}"]`);
                    if ($selectedCard.length) {
                        $selectedCard.remove();
                    }
                    
                    // Réactiver la carte
                    $card.removeClass('selected-passenger');
                    $card.attr('draggable', true);
                    $(this).remove();
                    
                    if ($('#selected-passengers .passenger-card').length === 0) {
                        $('#no-passengers-message').show();
                    }
                    
                    updateHiddenInputs();
                });
            }

            // Fonction pour ajouter un passager à la liste sélectionnée
            function addPassengerToSelected(draggedElement) {
                const $card = $(draggedElement);
                const passengerId = $card.data('id');
                const passengerType = $card.data('type');
                const passengerName = $card.data('name');
                const passengerReference = $card.data('reference') || '';
                const reservationRef = $card.data('reservation-ref') || '';
                const address = $card.data('address') || '';
                
                // Vérifier si le passager n'est pas déjà sélectionné
                if ($(`#selected-passengers .passenger-card[data-id="${passengerId}"][data-type="${passengerType}"]`).length > 0) {
                    toastr.warning('{{ __("This passenger is already selected") }}');
                    return;
                }
                
                // Créer la carte pour la zone sélectionnée
                const badgeClass = passengerType === 'aller' ? 'badge-aller' : 
                                passengerType === 'retour' ? 'badge-retour' : 'badge-employee';
                
                let addressHtml = '';
                if (address) {
                    addressHtml = `<br><small class="text-muted">[${address}]</small>`;
                }
                
                const selectedCard = $(`
                    <div class="passenger-card selected-passenger" 
                        data-id="${passengerId}" 
                        data-type="${passengerType}"
                        data-name="${passengerName}">
                        <span class="drag-handle">⋮⋮</span>
                        <div class="passenger-info">
                            <strong>${passengerReference}</strong> ${passengerName}
                            ${reservationRef ? `<br><small class="text-muted">${reservationRef}</small>` : ''}
                            ${addressHtml}
                        </div>
                        <span class="badge ${badgeClass} passenger-type-badge">${getPassengerTypeLabel(passengerType)}</span>
                        <button type="button" class="remove-passenger" title="{{ __('Remove') }}">×</button>
                    </div>
                `);
                
                $('#selected-passengers').append(selectedCard);
                $('#no-passengers-message').hide();
                
                // Mettre à jour la carte source
                $card.addClass('selected-passenger');
                $card.attr('draggable', false);
                if (!$card.find('.remove-passenger').length) {
                    $card.append('<button type="button" class="remove-passenger" title="{{ __("Remove") }}">×</button>');
                }
                
                updateHiddenInputs();
            }

            // Fonction pour retirer un passager de la liste sélectionnée
            function removePassengerFromSelected(passengerId, passengerType) {
                const $selectedCard = $(`#selected-passengers .passenger-card[data-id="${passengerId}"][data-type="${passengerType}"]`);
                $selectedCard.remove();
                
                if ($('#selected-passengers .passenger-card').length === 0) {
                    $('#no-passengers-message').show();
                }
                
                updateHiddenInputs();
            }

            // Traduction des types de passagers
            function getPassengerTypeLabel(type) {
                const labels = {
                    'aller': '{{ __("Aller") }}',
                    'retour': '{{ __("Retour") }}',
                    'employee': '{{ __("Employee") }}'
                };
                return labels[type] || type;
            }

            // Mise à jour des champs cachés pour la soumission
            function updateHiddenInputs() {
                let html = '';
                
                $('#selected-passengers .passenger-card').each(function() {
                    const id = $(this).data('id');
                    const type = $(this).data('type');
                    
                    if (type === 'aller') {
                        html += `<input type="hidden" name="reservation_employe_id_aller[]" value="${id}">`;
                    } else if (type === 'retour') {
                        html += `<input type="hidden" name="reservation_employe_id_retour[]" value="${id}">`;
                    } else if (type === 'employee') {
                        html += `<input type="hidden" name="employees[]" value="${id}">`;
                    }
                });
                
                $('#hidden-passenger-inputs').html(html);
            }

            // Filtre des passagers
            function initPassengerFilter() {
                $('#passenger-filter').on('keyup', function() {
                    const searchTerm = $(this).val().toLowerCase().trim();
                    
                    if (searchTerm === '') {
                        // Afficher tous les passagers
                        $('.passenger-list[data-type] .passenger-card').show();
                        return;
                    }
                    
                    // Filtrer dans chaque liste
                    $('.passenger-list[data-type]').each(function() {
                        const $list = $(this);
                        let hasVisibleCards = false;
                        
                        $list.find('.passenger-card').each(function() {
                            const $card = $(this);
                            const searchData = ($card.data('search') || '').toLowerCase();
                            
                            if (searchData.includes(searchTerm)) {
                                $card.show();
                                hasVisibleCards = true;
                            } else {
                                $card.hide();
                            }
                        });
                        
                        // Afficher un message si aucun résultat
                        let $noResults = $list.find('.no-results-message');
                        if (!hasVisibleCards) {
                            if (!$noResults.length) {
                                $list.append('<p class="no-results-message text-muted text-center">{{ __("No passengers found") }}</p>');
                            }
                        } else {
                            $noResults.remove();
                        }
                    });
                });
            }

            // Initialiser les passagers pré-sélectionnés
            function initPreselectedPassengers() {
                // Créer les cartes dans la zone sélectionnée pour les passagers déjà choisis
                $('.passenger-card.selected-passenger').each(function() {
                    const $sourceCard = $(this);
                    const passengerId = $sourceCard.data('id');
                    const passengerType = $sourceCard.data('type');
                    const passengerName = $sourceCard.data('name');
                    const passengerReference = $sourceCard.data('reference') || '';
                    const reservationRef = $sourceCard.data('reservation-ref') || '';
                    const address = $sourceCard.data('address') || '';
                    
                    // Vérifier si déjà dans la zone sélectionnée
                    if ($(`#selected-passengers .passenger-card[data-id="${passengerId}"][data-type="${passengerType}"]`).length === 0) {
                        const badgeClass = passengerType === 'aller' ? 'badge-aller' : 
                                        passengerType === 'retour' ? 'badge-retour' : 'badge-employee';
                        
                        let addressHtml = '';
                        if (address) {
                            addressHtml = `<br><small class="text-muted">[${address}]</small>`;
                        }
                        
                        const selectedCard = $(`
                            <div class="passenger-card selected-passenger" 
                                data-id="${passengerId}" 
                                data-type="${passengerType}"
                                data-name="${passengerName}">
                                <span class="drag-handle">⋮⋮</span>
                                <div class="passenger-info">
                                    <strong>${passengerReference}</strong> ${passengerName}
                                    ${reservationRef ? `<br><small class="text-muted">${reservationRef}</small>` : ''}
                                    ${addressHtml}
                                </div>
                                <span class="badge ${badgeClass} passenger-type-badge">${getPassengerTypeLabel(passengerType)}</span>
                                <button type="button" class="remove-passenger" title="{{ __('Remove') }}">×</button>
                            </div>
                        `);
                        
                        $('#selected-passengers').append(selectedCard);
                        
                        // S'assurer que la carte source a le bouton de suppression
                        if (!$sourceCard.find('.remove-passenger').length) {
                            $sourceCard.append('<button type="button" class="remove-passenger" title="{{ __("Remove") }}">×</button>');
                        }
                        $sourceCard.attr('draggable', false);
                    }
                });
                
                if ($('#selected-passengers .passenger-card').length > 0) {
                    $('#no-passengers-message').hide();
                }
            }

            // Initialisation au chargement
            $(document).ready(function() {
                initDragAndDrop();
                initPassengerFilter();
                initPreselectedPassengers();
                updateHiddenInputs();
            });
        });
    </script>
@endpush