@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>
@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">
                                <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">
                                    <div class="col-md-12">
                                        <h4 class="form-section"><i class="la la-users"></i> {{ __('Passengers') }}</h4>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="passenger-section">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="reservation_employe_id_aller">{{ __('Reservations (Aller)') }}</label>
                                                        <select id="reservation_employe_id_aller" name="reservation_employe_id_aller[]" class="form-control select2" multiple>
                                                            @foreach($reservations as $reservation)
                                                                @foreach ($reservation->passagers as $passager)
                                                                    @if (($passager->trip_id == null) || (isset($trip) && ($passager->trip_id == $trip->id)))
                                                                        <option value="{{ $passager->id }}"
                                                                            {{ in_array($passager->id, old('reservation_employe_id_aller', isset($trip) ? $trip->passagers->whereNotNull('reservation_id')->where('type', 'aller')->pluck('reservation_employe_id')->toArray() : [])) ? 'selected' : '' }}>
                                                                            #{{ $reservation->reference }} - #{{$passager->employe->reference}} </span> {{$passager->employe->first_name.' '.$passager->employe->last_name??''}} -
                                                                            {{ $reservation->date ? $reservation->date->format('Y-m-d H:i') : '' }} [{{$reservation->departAddress(0).' --> '.$reservation->destinationAddress(0)}}]
                                                                        </option>
                                                                    @endif
                                                                @endforeach
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="reservation_employe_id_retour">{{ __('Reservations (Retour)') }}</label>
                                                        <select id="reservation_employe_id_retour" name="reservation_employe_id_retour[]" class="form-control select2" multiple>
                                                            @foreach($reservations as $reservation)
                                                                @if ($reservation->round_trip)
                                                                    @foreach ($reservation->passagers as $passager)
                                                                        @if (($passager->return_trip_id == null) || (isset($trip) && ($passager->return_trip_id == $trip->id)))
                                                                            <option value="{{ $passager->id }}"
                                                                                {{ in_array($passager->id, old('reservation_employe_id_retour', isset($trip) ? $trip->passagers->whereNotNull('reservation_id')->where('type', 'retour')->pluck('reservation_employe_id')->toArray() : [])) ? 'selected' : '' }}>
                                                                                #{{ $reservation->reference }} - #{{$passager->employe->reference}} </span> {{$passager->employe->first_name.' '.$passager->employe->last_name??''}} -
                                                                                {{ $reservation->date_round_trip ? $reservation->date_round_trip->format('Y-m-d H:i') : '' }} [{{$reservation->departAddress(1).' --> '.$reservation->destinationAddress(1)}}]
                                                                            </option>
                                                                        @endif
                                                                    @endforeach
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="employees">{{ __('Employees') }}</label>
                                                        <select id="employees" name="employees[]" class="form-control select2" multiple>
                                                            @foreach($allEmployees as $employee)
                                                                <option value="{{ $employee->id }}"
                                                                    {{ in_array($employee->id, old('employees', isset($trip) ? $trip->passagers->whereNull('reservation_id')->pluck('employe_id')->toArray() : [])) ? 'selected' : '' }}>
                                                                    #{{ $employee->reference }} {{ $employee->first_name }} {{ $employee->last_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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');
                }
            });

            // 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();
            });
        });
    </script>
@endpush