@extends('layout.app')

@section('title', __('Test'))

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    .passagers-container, .trip-container {
        min-height: 200px;
        border: 2px dashed #ccc;
        border-radius: 5px;
        padding: 15px;
        margin-top: 10px;
    }
    
    .passager-item {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 8px;
        cursor: move;
        transition: all 0.3s;
    }
    
    .passager-item:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .passager-item.drag-over {
        border: 2px solid #28a745;
        background-color: #d4edda;
    }
    
    .reservation-card {
        margin-bottom: 20px;
        border-left: 4px solid #28a745;
    }
    
    .trip-header {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .badge-passager {
        background-color: #17a2b8;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
    }
    
    .remove-passager {
        color: #dc3545;
        cursor: pointer;
        float: right;
    }
    
    .remove-passager:hover {
        color: #bd2130;
    }
    
    .trip-passagers-list {
        max-height: 500px;
        overflow-y: auto;
    }
    
    .btn-submit-trip {
        margin-top: 20px;
        width: 100%;
    }
    
    /* Styles pour les filtres */
    .filters-card {
        background-color: #f8f9fc;
        border-bottom: 1px solid #e3e6f0;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .filter-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #4e73df;
        margin-bottom: 5px;
    }
    
    .filter-input {
        border-radius: 20px;
        padding: 5px 15px;
        font-size: 0.9rem;
    }
    
    .btn-filter {
        border-radius: 20px;
        padding: 5px 20px;
        margin-right: 10px;
    }
    
    .active-filter {
        background-color: #4e73df;
        color: white;
        border-color: #4e73df;
    }
    
    .no-results {
        padding: 30px;
        text-align: center;
        color: #858796;
        font-style: italic;
    }
    
    .filter-badge {
        background-color: #e3e6f0;
        padding: 5px 10px;
        border-radius: 15px;
        margin-right: 5px;
        margin-bottom: 5px;
        display: inline-block;
        font-size: 0.8rem;
    }
    
    .clear-filter {
        color: #dc3545;
        cursor: pointer;
        margin-left: 5px;
    }
    
    .passagers-list-container {
        max-height: 600px;
        overflow-y: auto;
        padding: 10px;
    }
</style>
@endpush

@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-body pb-5">
            <div class="row">
                <!-- Réservations et Passagers avec Filtres -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ __('Réservations et Passagers') }}</h4>
                            <p class="card-text">{{ __('Sélectionnez les passagers à ajouter au trip (glisser-déposer)') }}</p>
                        </div>
                        
                        <!-- Filtres -->
                        {{--<div class="filters-card">
                            <form id="filter-form" method="POST" action="#">
                                @csrf
                                <div class="row">
                                    <!-- Référence réservation -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Référence Réservation') }}</div>
                                        <input type="text" class="form-control filter-input" id="filter_reservation_ref" 
                                               name="reservation_ref" placeholder="#RES-001" value="{{ request('reservation_ref') }}">
                                    </div>
                                    
                                    <!-- Mission -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Mission') }}</div>
                                        <select class="form-control filter-input" id="filter_mission" name="mission_id">
                                            <option value="">{{ __('Toutes les missions') }}</option>
                                            @php
                                                $missions = \App\Models\Mission::all();
                                            @endphp
                                            @foreach($missions as $mission)
                                                <option value="{{ $mission->id }}" {{ request('mission_id') == $mission->id ? 'selected' : '' }}>
                                                    {{ $mission->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <!-- Site départ -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Site départ') }}</div>
                                        <select class="form-control filter-input" id="filter_depart_site" name="depart_site_id">
                                            <option value="">{{ __('Tous les sites') }}</option>
                                            @php
                                                $sites = \App\Models\Site::all();
                                            @endphp
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}" {{ request('depart_site_id') == $site->id ? 'selected' : '' }}>
                                                    {{ $site->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <!-- Site destination -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Site destination') }}</div>
                                        <select class="form-control filter-input" id="filter_destination_site" name="destination_site_id">
                                            <option value="">{{ __('Tous les sites') }}</option>
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}" {{ request('destination_site_id') == $site->id ? 'selected' : '' }}>
                                                    {{ $site->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <!-- Priorité -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Priorité') }}</div>
                                        <select class="form-control filter-input" id="filter_priority" name="priority">
                                            <option value="">{{ __('Toutes les priorités') }}</option>
                                            <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>{{ __('Low') }}</option>
                                            <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>{{ __('Medium') }}</option>
                                            <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>{{ __('High') }}</option>
                                            <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>{{ __('Urgent') }}</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Date -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Date réservation') }}</div>
                                        <div class="input-group">
                                            <input type="text" class="form-control filter-input datepicker" 
                                                   id="filter_date" name="date" placeholder="YYYY-MM-DD" 
                                                   value="{{ request('date') }}">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="la la-calendar"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Référence passager -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Référence Passager') }}</div>
                                        <input type="text" class="form-control filter-input" id="filter_passager_ref" 
                                               name="passager_ref" placeholder="#EMP-001" value="{{ request('passager_ref') }}">
                                    </div>
                                    
                                    <!-- Nom passager -->
                                    <div class="col-md-6 mb-2">
                                        <div class="filter-label">{{ __('Nom Passager') }}</div>
                                        <input type="text" class="form-control filter-input" id="filter_passager_name" 
                                               name="passager_name" placeholder="Jean Dupont" value="{{ request('passager_name') }}">
                                    </div>
                                </div>
                                
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary btn-filter">
                                            <i class="la la-filter"></i> {{ __('Filtrer') }}
                                        </button>
                                        <a href="{{ route('test3') }}" class="btn btn-secondary btn-filter">
                                            <i class="la la-refresh"></i> {{ __('Réinitialiser') }}
                                        </a>
                                    </div>
                                </div>
                                
                                <!-- Filtres actifs -->
                                @if(request()->anyFilled(['reservation_ref', 'mission_id', 'depart_site_id', 'destination_site_id', 'priority', 'date', 'passager_ref', 'passager_name']))
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <strong>{{ __('Filtres actifs:') }}</strong>
                                        <div class="mt-2">
                                            @if(request('reservation_ref'))
                                                <span class="filter-badge">
                                                    Rés: #{{ request('reservation_ref') }}
                                                    <a href="{{ route('test3', array_merge(request()->except('reservation_ref', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                            @endif
                                            
                                            @if(request('mission_id'))
                                                @php $mission = \App\Models\Mission::find(request('mission_id')); @endphp
                                                @if($mission)
                                                <span class="filter-badge">
                                                    {{ $mission->name }}
                                                    <a href="{{ route('test3', array_merge(request()->except('mission_id', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                                @endif
                                            @endif
                                            
                                            @if(request('depart_site_id'))
                                                @php $depart_site = \App\Models\Site::find(request('depart_site_id')); @endphp
                                                @if($depart_site)
                                                <span class="filter-badge">
                                                    Départ: {{ $depart_site->name }}
                                                    <a href="{{ route('test3', array_merge(request()->except('depart_site_id', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                                @endif
                                            @endif
                                            
                                            @if(request('destination_site_id'))
                                                @php $dest_site = \App\Models\Site::find(request('destination_site_id')); @endphp
                                                @if($dest_site)
                                                <span class="filter-badge">
                                                    Destination: {{ $dest_site->name }}
                                                    <a href="{{ route('test3', array_merge(request()->except('destination_site_id', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                                @endif
                                            @endif
                                            
                                            @if(request('priority'))
                                                <span class="filter-badge">
                                                    Priorité: {{ __(ucfirst(request('priority'))) }}
                                                    <a href="{{ route('test3', array_merge(request()->except('priority', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                            @endif
                                            
                                            @if(request('date'))
                                                <span class="filter-badge">
                                                    Date: {{ request('date') }}
                                                    <a href="{{ route('test3', array_merge(request()->except('date', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                            @endif
                                            
                                            @if(request('passager_ref'))
                                                <span class="filter-badge">
                                                    Passager #: {{ request('passager_ref') }}
                                                    <a href="{{ route('test3', array_merge(request()->except('passager_ref', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                            @endif
                                            
                                            @if(request('passager_name'))
                                                <span class="filter-badge">
                                                    Passager: {{ request('passager_name') }}
                                                    <a href="{{ route('test3', array_merge(request()->except('passager_name', 'page'))) }}" class="clear-filter"><i class="la la-times"></i></a>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </form>
                        </div>--}}
                        
                        <div class="card-content p-1">
                            @php
                                // Construction de la requête avec filtres
                                $query = \App\Models\Reservation\Reservation::with(['mission', 'employe', 'depart_site', 'destination_site'])
                                    ->whereIn('status', ['accepted', 'pending']);
                                
                                // Filtre par référence réservation
                                if(request('reservation_ref')) {
                                    $query->where('reference', 'LIKE', '%' . request('reservation_ref') . '%');
                                }
                                
                                // Filtre par mission
                                if(request('mission_id')) {
                                    $query->where('mission_id', request('mission_id'));
                                }
                                
                                // Filtre par site départ
                                if(request('depart_site_id')) {
                                    $query->where('depart_site_id', request('depart_site_id'));
                                }
                                
                                // Filtre par site destination
                                if(request('destination_site_id')) {
                                    $query->where('destination_site_id', request('destination_site_id'));
                                }
                                
                                // Filtre par priorité
                                if(request('priority')) {
                                    $query->where('priority', request('priority'));
                                }
                                
                                // Filtre par date
                                if(request('date')) {
                                    $query->whereDate('date', request('date'));
                                }
                                
                                $reservations = $query->get();
                                
                                // Filtrer les passagers selon les critères
                                $filteredPassagers = collect();
                                
                                foreach ($reservations as $reservation) {
                                    $passagers = $reservation->passagers();
                                    
                                    // Filtre par référence passager
                                    if(request('passager_ref')) {
                                        $passagers = $passagers->filter(function($passager) {
                                            return stripos($passager->reference, request('passager_ref')) !== false;
                                        });
                                    }
                                    
                                    // Filtre par nom passager
                                    if(request('passager_name')) {
                                        $passagers = $passagers->filter(function($passager) {
                                            $fullName = $passager->first_name . ' ' . $passager->last_name;
                                            return stripos($fullName, request('passager_name')) !== false ||
                                                   stripos($passager->first_name, request('passager_name')) !== false ||
                                                   stripos($passager->last_name, request('passager_name')) !== false;
                                        });
                                    }
                                    
                                    foreach ($passagers as $passager) {
                                        $filteredPassagers->push([
                                            'passager' => $passager,
                                            'reservation' => $reservation
                                        ]);
                                    }
                                }
                            @endphp
                            
                            <div class="passagers-container" id="passagers-list">
                                @forelse ($filteredPassagers as $item)
                                    @php
                                        $passager = $item['passager'];
                                        $reservation = $item['reservation'];
                                    @endphp
                                    <div class="passager-item" 
                                         data-passager-id="{{ $passager->id }}"
                                         data-reservation-id="{{ $reservation->id }}"
                                         data-reservation-ref="{{ $reservation->reference }}"
                                         data-passager-name="{{ $passager->first_name }} {{ $passager->last_name }}"
                                         data-passager-ref="{{ $passager->reference }}"
                                         data-mission="{{ $reservation->mission->name ?? '' }}"
                                         data-depart-site="{{ $reservation->depart_site->name ?? $reservation->depart }}"
                                         data-destination-site="{{ $reservation->destination_site->name ?? $reservation->destination }}"
                                         data-priority="{{ $reservation->priority }}"
                                         data-date="{{ $reservation->date->format('Y-m-d') }}"
                                         draggable="true">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <span class="badge badge-primary mr-1">#{{ $passager->reference }}</span>
                                                <strong>{{ $passager->first_name }} {{ $passager->last_name }}</strong>
                                            </div>
                                            <span class="badge badge-info">Rés: #{{ $reservation->reference }}</span>
                                        </div>
                                        <small class="text-muted">
                                            <i class="la la-map-marker"></i> {{ $reservation->depart_site->name ?? $reservation->depart }} 
                                            → 
                                            <i class="la la-map-signs"></i> {{ $reservation->destination_site->name ?? $reservation->destination }}
                                        </small>
                                        <div class="mt-1">
                                            @if($reservation->mission)
                                                <span class="badge badge-pill badge-secondary">
                                                    <i class="la la-tasks"></i> {{ $reservation->mission->name }}
                                                </span>
                                            @endif
                                            <span class="badge badge-pill badge-{{ $reservation->priority == 'urgent' ? 'danger' : ($reservation->priority == 'high' ? 'warning' : ($reservation->priority == 'medium' ? 'primary' : 'info')) }}">
                                                {{ __(ucfirst($reservation->priority)) }}
                                            </span>
                                            <span class="badge badge-pill badge-secondary">
                                                <i class="la la-calendar"></i> {{ $reservation->date->format('d/m/Y H:i') }}
                                            </span>
                                        </div>
                                    </div>
                                @empty
                                    <div class="no-results">
                                        <i class="la la-search la-3x mb-3"></i>
                                        <h5>{{ __('Aucun passager trouvé') }}</h5>
                                        <p>{{ __('Essayez de modifier vos critères de filtre') }}</p>
                                    </div>
                                @endforelse
                            </div>
                            
                            <div class="mt-3 text-muted text-center">
                                {{ __('Total') }}: {{ $filteredPassagers->count() }} {{ __('passagers') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Trip Container (inchangé) -->
                <div class="col-md-6">
                    <!-- ... Le contenu du Trip Container reste identique ... -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ __('Trip en cours de constitution') }}</h4>
                            <p class="card-text">{{ __('Déposez les passagers ici pour les ajouter au trip') }}</p>
                        </div>
                        <div class="card-content p-1">
                            <form id="trip-form" action="{{ route('trips.store') }}" method="POST">
                                @csrf
                                
                                <!-- Informations du Trip -->
                                <div class="trip-header">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="trip_date">{{ __('Date de départ') }}</label>
                                            <input type="datetime-local" class="form-control" id="trip_date" 
                                                   name="departure_date" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="trip_vehicle">{{ __('Véhicule') }}</label>
                                            <select class="form-control select2" id="trip_vehicle" name="vehicle_id" required>
                                                <option value="">{{ __('Sélectionner un véhicule') }}</option>
                                                @php
                                                    $vehicles = \App\Models\Vehicule::all();
                                                @endphp
                                                @foreach($vehicles as $vehicle)
                                                    <option value="{{ $vehicle->id }}">
                                                        {{ $vehicle->immatriculation }} | {{ $vehicle->marque }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="trip_driver">{{ __('Chauffeur') }}</label>
                                        <select class="form-control select2" id="trip_driver" name="driver_id" required>
                                            <option value="">{{ __('Sélectionner un chauffeur') }}</option>
                                            @php
                                                $drivers = \App\Models\Employe::where('is_driver', true)->get();
                                            @endphp
                                            @foreach($drivers as $driver)
                                                <option value="{{ $driver->id }}">
                                                    #{{ $driver->reference }} - {{ $driver->first_name }} {{ $driver->last_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Passagers sélectionnés pour le trip -->
                                <h5>{{ __('Passagers sélectionnés') }} <span class="badge badge-primary" id="passagers-count">0</span></h5>
                                <div class="trip-container" id="trip-passagers-list">
                                    <!-- Les passagers déposés apparaîtront ici -->
                                </div>
                                
                                <!-- Champs cachés pour les données du formulaire -->
                                <div id="selected-passagers-inputs"></div>
                                
                                <button type="submit" class="btn btn-success btn-submit-trip" id="submit-trip" disabled>
                                    <i class="la la-car"></i> {{ __('Créer le Trip') }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
</div>
@endsection

@section('modals')
<!-- Modal de confirmation -->
<div class="modal fade" id="confirmTripModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Confirmation de création du Trip') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ __('Êtes-vous sûr de vouloir créer ce trip avec les passagers sélectionnés ?') }}</p>
                <div id="modal-passagers-list"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Annuler') }}</button>
                <button type="button" class="btn btn-success" id="confirm-trip-submit">{{ __('Confirmer') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialisation du datepicker
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            language: 'fr'
        });
        
        // Initialisation de Dragula pour le drag and drop
        var drake = dragula({
            containers: [
                document.getElementById('passagers-list'),
                document.getElementById('trip-passagers-list')
            ],
            revertOnSpill: true,
            removeOnSpill: false,
            mirrorContainer: document.body,
            accepts: function(el, target, source, sibling) {
                // Permet de déposer uniquement dans le container du trip depuis la liste des passagers
                return target.id === 'trip-passagers-list' || source.id === 'trip-passagers-list';
            }
        });
        
        // Événement lors du drop
        drake.on('drop', function(el, target, source, sibling) {
            if (target.id === 'trip-passagers-list') {
                // Ajout au trip
                addPassagerToTrip(el);
            } else if (source.id === 'trip-passagers-list' && target.id !== 'passagers-list') {
                // Retrait du trip
                removePassagerFromTrip(el);
            }
            updatePassagersCount();
            validateTripForm();
        });
        
        // Fonction pour ajouter un passager au trip
        function addPassagerToTrip(passagerElement) {
            // Ajouter le bouton de suppression
            if (!passagerElement.querySelector('.remove-passager')) {
                var removeBtn = document.createElement('span');
                removeBtn.className = 'remove-passager';
                removeBtn.innerHTML = '<i class="la la-times-circle"></i>';
                removeBtn.onclick = function(e) {
                    e.stopPropagation();
                    removePassagerFromTrip(passagerElement);
                    // Remettre l'élément dans la liste des passagers disponibles
                    document.getElementById('passagers-list').appendChild(passagerElement);
                    updatePassagersCount();
                    validateTripForm();
                };
                passagerElement.querySelector('.d-flex').appendChild(removeBtn);
            }
            
            // Ajouter l'input caché pour le formulaire
            var passagerId = passagerElement.dataset.passagerId;
            var reservationId = passagerElement.dataset.reservationId;
            
            var inputContainer = document.getElementById('selected-passagers-inputs');
            
            // Vérifier si le passager n'est pas déjà ajouté
            if (!document.querySelector(`input[name="passagers[${passagerId}][passager_id]"]`)) {
                var passagerInput = document.createElement('input');
                passagerInput.type = 'hidden';
                passagerInput.name = `passagers[${passagerId}][passager_id]`;
                passagerInput.value = passagerId;
                inputContainer.appendChild(passagerInput);
                
                var reservationInput = document.createElement('input');
                reservationInput.type = 'hidden';
                reservationInput.name = `passagers[${passagerId}][reservation_id]`;
                reservationInput.value = reservationId;
                inputContainer.appendChild(reservationInput);
            }
        }
        
        // Fonction pour retirer un passager du trip
        function removePassagerFromTrip(passagerElement) {
            // Retirer le bouton de suppression
            var removeBtn = passagerElement.querySelector('.remove-passager');
            if (removeBtn) {
                removeBtn.remove();
            }
            
            // Retirer les inputs cachés
            var passagerId = passagerElement.dataset.passagerId;
            var inputs = document.querySelectorAll(`input[name^="passagers[${passagerId}]"]`);
            inputs.forEach(function(input) {
                input.remove();
            });
        }
        
        // Fonction pour mettre à jour le compteur de passagers
        function updatePassagersCount() {
            var count = document.querySelectorAll('#trip-passagers-list .passager-item').length;
            document.getElementById('passagers-count').textContent = count;
        }
        
        // Fonction pour valider le formulaire
        function validateTripForm() {
            var tripDate = document.getElementById('trip_date').value;
            var tripVehicle = document.getElementById('trip_vehicle').value;
            var tripDriver = document.getElementById('trip_driver').value;
            var passagersCount = document.querySelectorAll('#trip-passagers-list .passager-item').length;
            
            var submitBtn = document.getElementById('submit-trip');
            
            if (tripDate && tripVehicle && tripDriver && passagersCount > 0) {
                submitBtn.disabled = false;
            } else {
                submitBtn.disabled = true;
            }
        }
        
        // Validation en temps réel des champs du formulaire
        document.getElementById('trip_date').addEventListener('change', validateTripForm);
        document.getElementById('trip_vehicle').addEventListener('change', validateTripForm);
        document.getElementById('trip_driver').addEventListener('change', validateTripForm);
        
        // Empêcher le drag and drop par défaut
        document.addEventListener('dragover', function(e) {
            e.preventDefault();
        });
        
        document.addEventListener('dragstart', function(e) {
            if (e.target.classList.contains('passager-item')) {
                e.dataTransfer.setData('text/plain', '');
            }
        });
    });
</script>
@endpush