@extends('layout.app')

@section('title')
    {{ __('Reservations') }}
@endsection

@push('styles')
    <style>
        .mission-card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        .mission-card {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        .mission-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .mission-card.selected {
            border-color: #5A8DEE;
            background-color: #e8f4ff;
        }
        .mission-card h5 {
            margin-bottom: 5px;
            color: #333;
        }
        .mission-card .mission-ref {
            color: #666;
            font-size: 12px;
        }
        .mission-card .mission-desc {
            font-size: 13px;
            color: #777;
            margin-top: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .step {
            display: none;
        }
        .step.active {
            display: block;
        }
        .step-header {
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            overflow-x: auto;
        }
        .step-item {
            text-align: center;
            flex: 1;
            min-width: 100px;
            position: relative;
        }
        .step-item .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
            border: 2px solid #ddd;
        }
        .step-item.active .step-circle {
            background: #5A8DEE;
            color: white;
            border-color: #5A8DEE;
        }
        .step-item.completed .step-circle {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }
        .step-item .step-title {
            font-size: 12px;
            color: #666;
            word-break: break-word;
        }
        .step-item.active .step-title {
            color: #5A8DEE;
            font-weight: bold;
        }
        .step-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        .employee-card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        .employee-card {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            display: flex;
            align-items: center;
        }
        .employee-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .employee-card.selected {
            border-color: #5A8DEE;
            background-color: #e8f4ff;
        }
        .employee-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #5A8DEE;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .employee-info {
            flex: 1;
        }
        .employee-card h5 {
            margin-bottom: 2px;
            color: #333;
            font-size: 14px;
        }
        .employee-card .employee-ref {
            color: #666;
            font-size: 12px;
        }
        .counter-display {
            font-size: 16px;
            font-weight: bold;
            color: #5A8DEE;
            margin-left: 10px;
        }
        .help-block {
            display: block;
            margin-top: 5px;
            color: #dc3545;
            font-size: 12px;
        }
        .has-error .form-control {
            border-color: #dc3545;
        }
        .location-switch-container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .location-label {
            font-weight: bold;
            color: #333;
            margin-right: 15px;
            min-width: 80px;
        }
        .location-toggle {
            display: flex;
            align-items: center;
        }
        .location-toggle-label {
            margin: 0 10px;
            font-weight: 500;
        }
        .location-fields {
            display: none;
        }
        .location-fields.active {
            display: block;
        }
        /* Style personnalisé pour les switches iCheck */
        .icheckbox_flat-blue.location-switch {
            width: 60px;
            height: 24px;
            margin: 0 10px;
        }
        .icheckbox_flat-blue.location-switch .icheckbox_futurico {
            width: 60px;
            height: 24px;
            background: #5A8DEE;
            border-radius: 12px;
            position: relative;
        }
        .icheckbox_flat-blue.location-switch .icheckbox_futurico:after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: all 0.3s ease;
        }
        .icheckbox_flat-blue.location-switch.checked .icheckbox_futurico:after {
            left: 38px;
        }
        /* Priority Cards */
        .priority-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        .priority-card {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        .priority-card:hover {
            border-color: #5A8DEE;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .priority-card.selected {
            border-color: #5A8DEE;
            background-color: #e8f4ff;
        }
        .priority-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .priority-card h5 {
            margin-bottom: 5px;
            color: #333;
        }
        .priority-card p {
            font-size: 12px;
            color: #666;
            margin: 0;
        }
        .priority-card.low .priority-icon {
            color: #28a745;
        }
        .priority-card.medium .priority-icon {
            color: #ffc107;
        }
        .priority-card.high .priority-icon {
            color: #fd7e14;
        }
        .priority-card.urgent .priority-icon {
            color: #dc3545;
        }
        .selected-employees-container {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            min-height: 200px;
            background: #f9f9f9;
        }
        .selected-employee-item {
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .selected-employee-info {
            display: flex;
            align-items: center;
        }
        .selected-employee-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #5A8DEE;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }
        .remove-employee {
            color: #dc3545;
            cursor: pointer;
            font-size: 18px;
            padding: 0 5px;
        }
        .remove-employee:hover {
            color: #c82333;
        }
        .select-all-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        /* Styles pour les badges de priorité */
        .priority-badge {
            padding: 6px 15px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.9rem;
            display: inline-block;
        }

        .priority-badge.low { background: #28a745; color: white; }
        .priority-badge.medium { background: #ffc107; color: #212529; }
        .priority-badge.high { background: #fd7e14; color: white; }
        .priority-badge.urgent { background: #dc3545; color: white; }

        /* Conteneur pour les passagers */
        .passengers-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .passenger-chip {
            background: #e8f4ff;
            border: 1px solid #5A8DEE;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 0.85rem;
            color: #333;
            display: inline-flex;
            align-items: center;
        }

        .passenger-chip:before {
            content: '👤';
            margin-right: 5px;
            font-size: 0.9rem;
        }

        /* Conteneur pour les notes */
        .notes-container {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            line-height: 1.6;
            color: #555;
        }

        .notes-container.empty {
            color: #999;
            font-style: italic;
            background: #f8f9fa;
        }

        /* Animation d'entrée */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <style>
        /* Recommendations Modal Styles */
        .recommendation-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            transition: all 0.3s ease;
            background: white;
        }

        .recommendation-item:hover {
            border-color: #009a9c;
            box-shadow: 0 3px 15px rgba(0, 154, 156, 0.15);
            transform: translateX(5px);
        }

        .recommendation-item.selected-recommendation {
            border-color: #009a9c;
            background-color: rgba(0, 154, 156, 0.05);
            box-shadow: 0 3px 15px rgba(0, 154, 156, 0.2);
        }

        .recommendation-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #009a9c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1rem;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .recommendation-details {
            flex: 1;
        }

        .recommendation-date {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
        }

        .recommendation-date i {
            margin-right: 8px;
        }

        .recommendation-info {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .recommendation-info .badge {
            font-size: 0.85rem;
            padding: 5px 10px;
        }

        .select-recommendation-btn {
            transition: all 0.3s ease;
            border-radius: 20px;
            padding: 8px 20px;
        }

        .select-recommendation-btn:hover {
            transform: scale(1.05);
        }

        /* Animation for modal content */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .recommendations-container {
            animation: slideDown 0.4s ease-out;
        }

        /* Confirmation toast animation */
        .recommendation-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            animation: slideInRight 0.3s ease-out;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
@endpush

@section('active_reservations', '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">{{ __('Reservations')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($reservation))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$reservation->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('reservations.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Reservations') }}
                    </a>
                    <button type="button" class="btn btn-secondary ml-1" id="prevStepHeader">
                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                    </button>
                    <button type="button" class="btn btn-primary ml-1" id="nextStepHeader">
                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                    </button>
                    <button type="submit" form="reservationForm" class="btn btn-success ml-1" id="submitForm">
                        <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">
                        <div class="step-indicator">
                            <div class="step-item active" data-step="1">
                                <div class="step-circle">1</div>
                                <div class="step-title">{{ __('Mission') }}</div>
                            </div>
                            <div class="step-item" data-step="2">
                                <div class="step-circle">2</div>
                                <div class="step-title">{{ __('Departure') }}</div>
                            </div>
                            <div class="step-item" data-step="3">
                                <div class="step-circle">3</div>
                                <div class="step-title">{{ __('Destination') }}</div>
                            </div>
                            <div class="step-item" data-step="4">
                                <div class="step-circle">4</div>
                                <div class="step-title">{{ __('Passengers') }}</div>
                            </div>
                            <div class="step-item" data-step="5">
                                <div class="step-circle">5</div>
                                <div class="step-title">{{ __('Date & Type') }}</div>
                            </div>
                            <div class="step-item" data-step="6">
                                <div class="step-circle">6</div>
                                <div class="step-title">{{ __('Priority') }}</div>
                            </div>
                            <div class="step-item" data-step="7">
                                <div class="step-circle">7</div>
                                <div class="step-title">{{ __('Note') }}</div>
                            </div>
                        </div>

                        <form autocomplete="off" id="reservationForm" method="POST" action="{{ isset($reservation) ? route('reservations.update', $reservation->id) : route('reservations.store') }}" enctype="multipart/form-data">
                            @csrf
                            @if(isset($reservation))
                                @method('PUT')
                            @endif
                            
                            <!-- Hidden fields -->
                            <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="priority" id="priority_input" value="{{ isset($reservation) ? $reservation->priority : 'medium' }}">

                            <!-- Step 1: Mission -->
                            <div class="step active" id="step1">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 1: Select Mission') }}</h4>
                                    <p class="text-muted">{{ __('Choose a mission for this reservation') }}</p>
                                </div>
                                
                                <div class="form-group">
                                    <div class="mission-card-container">
                                        @foreach($missions as $mission)
                                            <div class="mission-card" data-mission-id="{{ $mission->id }}">
                                                <h5>{{ $mission->name }}</h5>
                                                <div class="mission-ref">{{ $mission->reference }}</div>
                                                @if($mission->description)
                                                    <div class="mission-desc">{!! $mission->description !!}</div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                    <input type="hidden" name="mission_id" id="mission_id" value="{{ isset($reservation) ? $reservation->mission_id : '' }}">
                                    <span class="help-block" id="mission_error" style="display: none;">{{ __('Please select a mission') }}</span>
                                    @error('mission_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="step-actions">
                                    <div></div>
                                    <button type="button" class="btn btn-primary next-step" data-next="2">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Step 2: Départ -->
                            <div class="step" id="step2">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 2: Departure Location') }}</h4>
                                    <p class="text-muted">{{ __('Select departure point') }}</p>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="location-switch-container">
                                            <span class="location-label">{{ __('Type') }}</span>
                                            <div class="location-toggle">
                                                <span class="location-toggle-label">{{ __('Site') }}</span>
                                                <input type="checkbox" id="depart_site_toggle" 
                                                    {{ (isset($reservation) && $reservation->depart) || ($sites->count() == 0) ? '' : 'checked' }}
                                                    {{ $sites->count() == 0 ? 'disabled' : '' }}>
                                                
                                            </div>
                                        </div>
                                        
                                        <div class="location-container">
                                            <!-- Site selection -->
                                            <div class="location-fields active" id="depart_site_fields">
                                                <div class="form-group">
                                                    <label for="depart_site_id" class="required">{{ __('Select Departure Site') }}</label>
                                                    <select name="depart_site_id" id="depart_site_id" class="form-control select2">
                                                        <option value="">{{ __('Select a site') }}</option>
                                                        @foreach($sites as $site)
                                                            <option value="{{ $site->id }}" {{ (isset($reservation) && $reservation->depart_site_id == $site->id) ? 'selected' : '' }}>
                                                                {{ $site->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="help-block" id="depart_site_error" style="display: none;">{{ __('Please select a departure site') }}</span>
                                                    @error('depart_site_id')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            
                                            <!-- Free address -->
                                            <div class="location-fields" id="depart_free_fields">
                                                <div class="form-group">
                                                    <label for="depart" class="required">{{ __('Departure Address') }}</label>
                                                    <input type="text" name="depart" id="depart" class="form-control" 
                                                           value="{{ isset($reservation) ? $reservation->depart : old('depart') }}"
                                                           placeholder="{{ __('Enter full address') }}">
                                                    <span class="help-block" id="depart_error" style="display: none;">{{ __('Please enter departure address') }}</span>
                                                    @error('depart')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="1">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-primary next-step" data-next="3">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Step 3: Destination -->
                            <div class="step" id="step3">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 3: Destination Location') }}</h4>
                                    <p class="text-muted">{{ __('Select destination point') }}</p>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="location-switch-container">
                                            <span class="location-label">{{ __('Type') }}</span>
                                            <div class="location-toggle">
                                                <span class="location-toggle-label">{{ __('Site') }}</span>
                                                <input type="checkbox" id="destination_site_toggle" 
                                                    {{ (isset($reservation) && $reservation->destination) || ($sites->count() == 0) ? '' : 'checked' }}
                                                    {{ $sites->count() == 0 ? 'disabled' : '' }}>
                                                
                                            </div>
                                        </div>
                                        
                                        <div class="location-container">
                                            <!-- Site selection -->
                                            <div class="location-fields active" id="destination_site_fields">
                                                <div class="form-group">
                                                    <label for="destination_site_id" class="required">{{ __('Select Destination Site') }}</label>
                                                    <select name="destination_site_id" id="destination_site_id" class="form-control select2">
                                                        <option value="">{{ __('Select a site') }}</option>
                                                        @foreach($sites as $site)
                                                            <option value="{{ $site->id }}" {{ (isset($reservation) && $reservation->destination_site_id == $site->id) ? 'selected' : '' }}>
                                                                {{ $site->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="help-block" id="destination_site_error" style="display: none;">{{ __('Please select a destination site') }}</span>
                                                    @error('destination_site_id')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            
                                            <!-- Free address -->
                                            <div class="location-fields" id="destination_free_fields">
                                                <div class="form-group">
                                                    <label for="destination" class="required">{{ __('Destination Address') }}</label>
                                                    <input type="text" name="destination" id="destination" class="form-control" 
                                                           value="{{ isset($reservation) ? $reservation->destination : old('destination') }}"
                                                           placeholder="{{ __('Enter full address') }}">
                                                    <span class="help-block" id="destination_error" style="display: none;">{{ __('Please enter destination address') }}</span>
                                                    @error('destination')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="2">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-primary next-step" data-next="4">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Step 4: Passenger -->
                            <div class="step" id="step4">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 4: Passengers') }}</h4>
                                    <p class="text-muted">{{ __('Select passengers for this trip') }}</p>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="employesInput">{{ __('Selected Passengers') }}</label>
                                            <select name="employes[]" id="employesInput" class="form-control select2" multiple required>
                                                @foreach ($employes as $employe)
                                                    <option value="{{$employe->id}}" {{isset($reservation) && $reservation->isPassager($employe->id) ? 'selected' : ''}}>{{'('.$employe->reference.') '.$employe->first_name.' '.$employe->last_name}}</option>
                                                @endforeach
                                            </select>
                                            <span class="help-block" id="passengers_error" style="display: none;">{{ __('Please select at least one passenger') }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="3">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-primary next-step" data-next="5">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- Step 5: Date, roundtrip, Return Date -->
                            <div class="step" id="step5">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 5: Dates and Trip Type') }}</h4>
                                    <p class="text-muted">{{ __('Select departure date and trip type') }}</p>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            @if(!isset($reservation))
                                                <label for="date_depart" class="required">{{ __('Departure Date') }}</label>
                                                <input type="date" name="date_depart" id="date_depart" 
                                                    class="form-control" 
                                                    value="{{ old('date_depart') }}" 
                                                    required>
                                                <span class="help-block" id="date_depart_error" style="display: none;"></span>
                                                @error('date_depart')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                
                                                <div id="heure_depart_container" style="display: none; margin-top: 15px;">
                                                    <label for="heure_depart" class="required">{{ __('Departure Time') }}</label>
                                                    <input type="time" name="heure_depart" id="heure_depart" 
                                                        class="form-control" 
                                                        value="{{ old('heure_depart') }}" 
                                                        required>
                                                    <span class="help-block" id="heure_depart_error" style="display: none;"></span>
                                                    @error('heure_depart')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                
                                                <!-- Champ caché pour la valeur datetime complète -->
                                                <input type="hidden" name="date" id="date" value="">
                                            @else
                                                <label for="date" class="required">{{ __('Departure Date & Time') }}</label>
                                                <input type="datetime-local" name="date" id="date" 
                                                    class="form-control" 
                                                    value="{{ $reservation->date->format('Y-m-d\TH:i') }}" 
                                                    required>
                                            @endif
                                            <span class="help-block" id="date_error" style="display: none;"></span>
                                            @error('date')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" id="round_trip_date_container" style="display: none;">
                                            <label for="date_round_trip">{{ __('Return Date & Time') }}</label>
                                            <input type="datetime-local" name="date_round_trip" id="date_round_trip" 
                                                class="form-control" 
                                                value="{{ isset($reservation) ? ($reservation->date_round_trip ? $reservation->date_round_trip->format('Y-m-d\TH:i') : '') : old('date_round_trip') }}">
                                            @error('date_round_trip')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="icheck-primary">
                                                <input type="checkbox" name="round_trip" id="round_trip" 
                                                    value="1" {{ (isset($reservation) && $reservation->round_trip) ? 'checked' : '' }}>
                                                <label for="round_trip">{{ __('Round Trip') }}</label>
                                                <p class="text-muted">{{ __('Check if you need a return trip') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="4">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-primary next-step" data-next="6">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="step" id="step6">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 6: Priority Level') }}</h4>
                                    <p class="text-muted">{{ __('Select the priority level for this reservation') }}</p>
                                </div>
                                
                                <div class="form-group">
                                    <label class="required">{{ __('Priority') }}</label>
                                    <div class="priority-cards">
                                        <div class="priority-card low {{ (isset($reservation) && $reservation->priority == 'low') ? 'selected' : (old('priority') == 'low' ? 'selected' : '') }}" data-priority="low">
                                            <div class="priority-icon">
                                                <i class="fas fa-thermometer-empty"></i>
                                            </div>
                                            <h5>{{ __('Low') }}</h5>
                                            <p>{{ __('Standard priority') }}</p>
                                        </div>
                                        
                                        <div class="priority-card medium {{ (!isset($reservation) && !old('priority')) || (isset($reservation) && $reservation->priority == 'medium') || old('priority') == 'medium' ? 'selected' : '' }}" data-priority="medium">
                                            <div class="priority-icon">
                                                <i class="fas fa-thermometer-half"></i>
                                            </div>
                                            <h5>{{ __('Medium') }}</h5>
                                            <p>{{ __('Normal priority') }}</p>
                                        </div>
                                        
                                        <div class="priority-card high {{ (isset($reservation) && $reservation->priority == 'high') || old('priority') == 'high' ? 'selected' : '' }}" data-priority="high">
                                            <div class="priority-icon">
                                                <i class="fas fa-thermometer-three-quarters"></i>
                                            </div>
                                            <h5>{{ __('High') }}</h5>
                                            <p>{{ __('Important trip') }}</p>
                                        </div>
                                        
                                        <div class="priority-card urgent {{ (isset($reservation) && $reservation->priority == 'urgent') || old('priority') == 'urgent' ? 'selected' : '' }}" data-priority="urgent">
                                            <div class="priority-icon">
                                                <i class="fas fa-thermometer-full"></i>
                                            </div>
                                            <h5>{{ __('Urgent') }}</h5>
                                            <p>{{ __('Immediate attention') }}</p>
                                        </div>
                                    </div>
                                    @error('priority')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="5">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-primary next-step" data-next="7">
                                        {{ __('Next') }} <i class="la la-arrow-right"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Step 7: Note -->
                            <div class="step" id="step7">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 7: Additional Notes') }}</h4>
                                    <p class="text-muted">{{ __('Add any additional information or special instructions') }}</p>
                                </div>

                                <div class="form-group">
                                    <label for="description">{{ __('Notes & Instructions') }}</label>
                                    <textarea name="description" id="description" class="form-control" rows="8">{{ isset($reservation) ? $reservation->description : old('description') }}</textarea>
                                    @error('description')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="step-actions">
                                    <button type="button" class="btn btn-secondary prev-step" data-prev="6">
                                        <i class="la la-arrow-left"></i> {{ __('Previous') }}
                                    </button>
                                    <button type="submit" class="btn btn-success">
                                        {{ __('Save') }} <i class="la la-check-circle"></i>
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')
    <div class="modal animated bounceInUp text-left" id="recommendationModal" tabindex="-1" role="dialog" aria-labelledby="recommendationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body px-2 pb-3">
                    
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function getRecommendationData() {
            $("body").LoadingOverlay("show");
            
            // Construire une date complète pour l'appel API
            let dateForApi = '';
            @if(!isset($reservation))
                const dateDepart = $('#date_depart').val();
                const heureDepart = $('#heure_depart').val();
                if (dateDepart && heureDepart) {
                    dateForApi = dateDepart + ' ' + heureDepart + ':00';
                } else if (dateDepart) {
                    dateForApi = dateDepart + ' 00:00:00';
                }
            @else
                dateForApi = $('#date').val();
                if (dateForApi) {
                    // Convertir le format datetime-local en format compatible
                    dateForApi = dateForApi.replace('T', ' ') + ':00';
                }
            @endif
            
            if (!dateForApi) {
                $("body").LoadingOverlay("hide", true);
                return;
            }
            
            // Créer un FormData temporaire avec les données nécessaires
            let formData = new FormData();
            formData.append('date', dateForApi);
            formData.append('depart_site_id', $('#depart_site_id').val());
            formData.append('destination_site_id', $('#destination_site_id').val());
            formData.append('_token', $('input[name="_token"]').val());
            
            // Ajouter les employés sélectionnés
            let employes = $('#employesInput').val();
            if (employes && employes.length > 0) {
                employes.forEach(function(employeId) {
                    formData.append('employes[]', employeId);
                });
            }
            
            $.ajax({
                url: '{{ route("reservations.recommendation") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $("body").LoadingOverlay("hide", true);
                    if (response.success && response.html) {
                        $('#recommendationModal .modal-body').html(response.html);
                        initRecommendationHandlers();
                        $('#recommendationModal').modal('show');
                    } else {
                        // Pas de recommandation, afficher le champ heure si c'est une nouvelle réservation
                        @if(!isset($reservation))
                            showHeureDepartField();
                        @endif
                    }
                },
                error: function(error) {
                    $("body").LoadingOverlay("hide", true);
                    @if(!isset($reservation))
                        showHeureDepartField();
                    @endif
                }
            });
        }

        @if(!isset($reservation))
            function showHeureDepartField() {
                if ($('#date_depart').val()) {
                    $('#heure_depart_container').slideDown();
                    $('#heure_depart').prop('required', true);
                }
            }

            function updateDateTimeHiddenField() {
                const dateDepart = $('#date_depart').val();
                const heureDepart = $('#heure_depart').val();
                if (dateDepart && heureDepart) {
                    $('#date').val(dateDepart + 'T' + heureDepart);
                } else {
                    $('#date').val('');
                }
            }
        @endif

        function initRecommendationHandlers() {
            // Handle recommendation selection
            $('.select-recommendation-btn').click(function() {
                const $item = $(this).closest('.recommendation-item');
                const selectedDate = $item.data('date');
                const tripId = $item.data('trip-id');
                
                // Highlight selected item
                $('.recommendation-item').removeClass('selected-recommendation');
                $item.addClass('selected-recommendation');
                
                // Update the date input selon le contexte
                @if(!isset($reservation))
                    // Extraire la date et l'heure de la valeur datetime
                    const dateObj = new Date(selectedDate);
                    const datePart = selectedDate.split('T')[0];
                    const timePart = selectedDate.split('T')[1].substring(0, 5);
                    
                    // Mettre à jour les champs séparés
                    $('#date_depart').val(datePart);
                    $('#heure_depart').val(timePart);
                    updateDateTimeHiddenField();
                    
                    // Afficher le champ heure s'il était caché
                    showHeureDepartField();
                @else
                    $('#date').val(selectedDate);
                @endif
                
                // Add visual feedback
                const $btn = $(this);
                const originalHtml = $btn.html();
                $btn.prop('disabled', true)
                    .html('<i class="fas fa-check"></i> {{ __("Selected!") }}')
                    .addClass('btn-success')
                    .removeClass('btn-teal-maq');
                
                // Close modal after short delay
                setTimeout(function() {
                    $('#recommendationModal').modal('hide');
                    
                    // Show success notification
                    toastr.success(
                        '{{ __("Date updated successfully") }}', 
                        '{{ __("Date Changed") }}',
                        {
                            timeOut: 3000,
                            progressBar: true,
                            positionClass: 'toast-top-right'
                        }
                    );
                    
                    // Reset button state
                    setTimeout(function() {
                        $btn.prop('disabled', false)
                            .html(originalHtml)
                            .addClass('btn-teal-maq')
                            .removeClass('btn-success');
                        $('.recommendation-item').removeClass('selected-recommendation');
                    }, 500);
                }, 500);
            });
            
            // Add keyboard navigation
            $(document).on('keydown.recommendation', function(e) {
                if (!$('#recommendationModal').is(':visible')) return;
                
                const $items = $('.recommendation-item');
                const $selected = $('.recommendation-item.selected-recommendation');
                let index = $selected.index();
                
                if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                    e.preventDefault();
                    index = (index + 1) % $items.length;
                    updateSelection($items.eq(index));
                } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
                    e.preventDefault();
                    index = (index - 1 + $items.length) % $items.length;
                    updateSelection($items.eq(index));
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if ($selected.length) {
                        $selected.find('.select-recommendation-btn').click();
                    }
                }
            });
            
            // Remove keyboard listener when modal is hidden
            $('#recommendationModal').on('hidden.bs.modal', function() {
                $(document).off('keydown.recommendation');
            });
        }

        function updateSelection($item) {
            $('.recommendation-item').removeClass('selected-recommendation');
            $item.addClass('selected-recommendation');
            $item[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        $(document).ready(function() {
            
            // Initialiser iCheck pour tous les checkboxes avec style personnalisé
            $('input[type="checkbox"]').iCheck({
                checkboxClass: 'icheckbox_flat-blue',
                radioClass: 'iradio_flat-blue',
                // Configuration spéciale pour les switches de localisation
                handle: 'checkbox'
            });
            
            // Step navigation
            let currentStep = 1;
            
            // Function to update header buttons visibility
            function updateHeaderButtons() {
                if (currentStep === 1) {
                    $('#prevStepHeader').hide();
                    $('#nextStepHeader').show();
                    $('#submitForm').hide();
                } else if (currentStep === 7) {
                    $('#prevStepHeader').show();
                    $('#nextStepHeader').hide();
                    $('#submitForm').show();
                } else {
                    $('#prevStepHeader').show();
                    $('#nextStepHeader').show();
                    $('#submitForm').hide();
                }
            }
            
            // Initialize header buttons
            updateHeaderButtons();
            
            @if(!isset($reservation))
                // Écouteur sur le changement de date de départ pour lancer la recommandation
                $('#date_depart').on('change', function() {
                    const dateVal = $(this).val();
                    if (dateVal) {
                        // Cacher le champ heure pendant le chargement
                        $('#heure_depart_container').slideUp();
                        $('#heure_depart').val('');
                        updateDateTimeHiddenField();
                        
                        // Lancer la recommandation seulement si les champs site départ/destination sont remplis
                        const departSite = $('#depart_site_id').val();
                        const destinationSite = $('#destination_site_id').val();
                        showHeureDepartField();
                        if (departSite && destinationSite) {
                            getRecommendationData();
                        }
                    } else {
                        $('#heure_depart_container').slideUp();
                        $('#heure_depart').val('');
                        updateDateTimeHiddenField();
                    }
                });
                
                // Mise à jour du champ caché datetime quand l'heure change
                $('#heure_depart').on('change', function() {
                    updateDateTimeHiddenField();
                });
            @endif

            // Next step from header
            $('#nextStepHeader').click(function() {
                $('.next-step[data-next="' + (currentStep + 1) + '"]').click();
            });
            
            // Previous step from header
            $('#prevStepHeader').click(function() {
                $('.prev-step[data-prev="' + (currentStep - 1) + '"]').click();
            });
            
            // Next step from form
            $('.next-step').click(function() {
                const nextStep = $(this).data('next');
                if (validateStep(currentStep)) {
                    navigateToStep(nextStep);
                }
            });
            
            // Previous step from form
            $('.prev-step').click(function() {
                const prevStep = $(this).data('prev');
                navigateToStep(prevStep);
            });

            // Round trip toggle
            $('#round_trip').on('ifChanged', function() {
                if ($(this).is(':checked')) {
                    $('#round_trip_date_container').show();
                    $('#date_round_trip').prop('required', true);
                } else {
                    $('#round_trip_date_container').hide();
                    $('#date_round_trip').prop('required', false);
                }
            }).trigger('ifChanged');

            // Mission card selection
            $('.mission-card').click(function() {
                $('.mission-card').removeClass('selected');
                $(this).addClass('selected');
                const missionId = $(this).data('mission-id');
                $('#mission_id').val(missionId);
                $('#mission_error').hide();
            });

            // Location toggles avec iCheck
            $('#depart_site_toggle').on('ifChanged', function() {
                const isSite = $(this).is(':checked');
                if (isSite) {
                    $('#depart_site_fields').addClass('active');
                    $('#depart_free_fields').removeClass('active');
                    $('#depart').prop('required', false);
                    $('#depart_site_id').prop('required', true);
                } else {
                    $('#depart_site_fields').removeClass('active');
                    $('#depart_free_fields').addClass('active');
                    $('#depart').prop('required', true);
                    $('#depart_site_id').prop('required', false);
                }
            }).trigger('ifChanged');

            $('#destination_site_toggle').on('ifChanged', function() {
                const isSite = $(this).is(':checked');
                if (isSite) {
                    $('#destination_site_fields').addClass('active');
                    $('#destination_free_fields').removeClass('active');
                    $('#destination').prop('required', false);
                    $('#destination_site_id').prop('required', true);
                } else {
                    $('#destination_site_fields').removeClass('active');
                    $('#destination_free_fields').addClass('active');
                    $('#destination').prop('required', true);
                    $('#destination_site_id').prop('required', false);
                }
            }).trigger('ifChanged');

            // Priority card selection
            $('.priority-card').click(function() {
                $('.priority-card').removeClass('selected');
                $(this).addClass('selected');
                const priority = $(this).data('priority');
                $('#priority_input').val(priority);
            });
            
            // Functions
            function navigateToStep(step) {
                $('.step').removeClass('active');
                $('.step-item').removeClass('active');
                
                $(`#step${step}`).addClass('active');
                $(`.step-item[data-step="${step}"]`).addClass('active');
                
                // Mark previous steps as completed
                for (let i = 1; i < step; i++) {
                    $(`.step-item[data-step="${i}"]`).addClass('completed');
                }
                
                // Unmark future steps
                for (let i = step + 1; i <= 8; i++) {
                    $(`.step-item[data-step="${i}"]`).removeClass('completed');
                }
                
                currentStep = step;
                updateHeaderButtons();
            }

            function validateStep(step) {
                let isValid = true;
                
                // Reset errors
                $(`.help-block`).hide();
                $(`.form-group`).removeClass('has-error');
                
                switch(step) {
                    case 1:
                        if (!$('#mission_id').val()) {
                            $('#mission_error').show();
                            $('#mission_id').closest('.form-group').addClass('has-error');
                            isValid = false;
                        }
                        break;
                    case 2:
                        // Validate departure location
                        if ($('#depart_site_toggle').is(':checked')) {
                            if (!$('#depart_site_id').val()) {
                                $('#depart_site_error').show();
                                $('#depart_site_id').closest('.form-group').addClass('has-error');
                                isValid = false;
                            }
                        } else {
                            if (!$('#depart').val()) {
                                $('#depart_error').show();
                                $('#depart').closest('.form-group').addClass('has-error');
                                isValid = false;
                            }
                        }
                        break;
                    case 3:
                        // Validate destination location
                        if ($('#destination_site_toggle').is(':checked')) {
                            if (!$('#destination_site_id').val()) {
                                $('#destination_site_error').show();
                                $('#destination_site_id').closest('.form-group').addClass('has-error');
                                isValid = false;
                            }
                        } else {
                            if (!$('#destination').val()) {
                                $('#destination_error').show();
                                $('#destination').closest('.form-group').addClass('has-error');
                                isValid = false;
                            }
                        }
                        break;
                    case 4:
                        if ($('#employesInput').find('option:selected').length === 0) {
                            $('#passengers_error').show();
                            isValid = false;
                        }
                        break;
                        case 5:
                            @if(!isset($reservation))
                                // Validation nouvelle réservation
                                if (!$('#date_depart').val()) {
                                    $('#date_depart_error').text('{{ __("Departure date is required") }}').show();
                                    $('#date_depart').closest('.form-group').addClass('has-error');
                                    isValid = false;
                                }
                                if (!$('#heure_depart').val()) {
                                    $('#heure_depart_error').text('{{ __("Departure time is required") }}').show();
                                    $('#heure_depart').closest('.form-group').addClass('has-error');
                                    isValid = false;
                                }
                                if ($('#date_depart').val() && $('#heure_depart').val()) {
                                    updateDateTimeHiddenField();
                                    // Vérifier que la date/heure est dans le futur
                                    const dateTimeStr = $('#date').val();
                                    if (dateTimeStr) {
                                        const selectedDate = new Date(dateTimeStr);
                                        const now = new Date();
                                        if (selectedDate <= now) {
                                            $('#date_depart_error').text('{{ __("Departure date must be in the future") }}').show();
                                            $('#date_depart').closest('.form-group').addClass('has-error');
                                            isValid = false;
                                        }
                                    }
                                }
                            @else
                                // Validation édition réservation existante
                                if (!$('#date').val()) {
                                    $('#date_error').text('{{ __("Departure date is required") }}').show();
                                    $('#date').closest('.form-group').addClass('has-error');
                                    isValid = false;
                                }
                            @endif
                            
                            if ($('#round_trip').is(':checked') && !$('#date_round_trip').val()) {
                                $('#date_round_trip').closest('.form-group').addClass('has-error');
                                isValid = false;
                            }
                            break;
                    case 6:
                        if (!$('#priority_input').val()) {
                            isValid = false;
                        }
                        break;
                }
                
                return isValid;
            }

            ajaxForm("#reservationForm");
            
            @if(isset($reservation) && $reservation->mission_id)
                $('.mission-card[data-mission-id="{{ $reservation->mission_id }}"]').addClass('selected');
            @endif
            
            @if(isset($reservation) && $reservation->priority)
                $('.priority-card.selected').removeClass('selected');
                $('.priority-card[data-priority="{{ $reservation->priority }}"]').addClass('selected');
                $('#priority_input').val('{{ $reservation->priority }}');
            @endif
            
            @if(isset($reservation))
                @if($reservation->depart)
                    $('#depart_site_toggle').iCheck('uncheck');
                @else
                    $('#depart_site_toggle').iCheck('check');
                @endif
                
                @if($reservation->destination)
                    $('#destination_site_toggle').iCheck('uncheck');
                @else
                    $('#destination_site_toggle').iCheck('check');
                @endif
            @endif
        });
    </script>
@endpush