@extends('layout.app')

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

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/editors/summernote.css') }}">
    <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>
@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">
            <div class="content-header-left col-md-6 col-12 mb-2 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-md-right">
                    <a class="btn btn-dark" href="{{ route('reservations.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Reservations') }}
                    </a>
                    <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">
                        <form id="reservationForm" method="POST" action="{{ isset($reservation) ? route('reservations.update', $reservation->id) : route('reservations.store') }}">
                            @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: Date, roundtrip, Return Date -->
                            <div class="step" id="step2">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 2: 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">
                                            <label for="date" class="required">{{ __('Departure Date & Time') }}</label>
                                            <input type="datetime-local" name="date" id="date" 
                                                   class="form-control" 
                                                   value="{{ isset($reservation) ? $reservation->date->format('Y-m-d\TH:i') : old('date') }}" 
                                                   required>
                                            <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="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: Départ -->
                            <div class="step" id="step3">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 3: 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) ? '' : 'checked' }}>
                                                <span class="location-toggle-label">{{ __('Address') }}</span>
                                            </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="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: Destination -->
                            <div class="step" id="step4">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 4: 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) ? '' : 'checked' }}>
                                                <span class="location-toggle-label">{{ __('Address') }}</span>
                                            </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="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: Passenger -->
                            <div class="step" id="step5">
                                <div class="step-header">
                                    <h4 class="step-title">{{ __('Step 5: 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>{{ __('Selected Passengers') }}</label>
                                            <div class="d-flex align-items-center">
                                                <span class="badge badge-pill badge-primary" id="selectedCount">0</span>
                                                <span class="counter-display" id="nb_places_display">0 {{ __('passenger(s)') }}</span>
                                            </div>
                                            <input type="hidden" name="nb_places" id="nb_places" value="{{ isset($reservation) ? $reservation->nb_places : 0 }}">
                                            <span class="help-block" id="passengers_error" style="display: none;">{{ __('Please select at least one passenger') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 mb-2">
                                        <div class="select-all-buttons">
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="selectAllEmployees">
                                                <i class="la la-users"></i> {{ __('Select All Employees') }}
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="deselectAllEmployees">
                                                <i class="la la-user-times"></i> {{ __('Deselect All') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>{{ __('Available Employees') }}</label>
                                        <div class="employee-card-container" id="availableEmployees">
                                            @foreach($employes as $employe)
                                                @php
                                                    $isSelected = isset($reservation) && in_array($employe->id, $reservation->employes ?? []);
                                                    $isCurrentUser = $employe->id == auth()->user()->employe_id;
                                                @endphp
                                                <div class="employee-card {{ $isSelected ? 'selected' : '' }} {{ $isCurrentUser ? 'current-user' : '' }}" 
                                                     data-id="{{ $employe->id }}" 
                                                     data-name="{{ $employe->first_name }} {{ $employe->last_name }}"
                                                     data-reference="{{ $employe->reference }}">
                                                    <div class="employee-avatar">
                                                        {{ strtoupper(substr($employe->first_name, 0, 1) . substr($employe->last_name, 0, 1)) }}
                                                    </div>
                                                    <div class="employee-info">
                                                        <h5>{{ $employe->first_name }} {{ $employe->last_name }}</h5>
                                                        <div class="employee-ref">{{ $employe->reference }}</div>
                                                        @if($isCurrentUser)
                                                            <small class="text-success">({{ __('You') }})</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>{{ __('Selected Passengers') }}</label>
                                        <div class="selected-employees-container" id="selectedEmployees">
                                            @if(isset($reservation) && $reservation->employes)
                                                @foreach($reservation->employes as $empId)
                                                    @php
                                                        $emp = $employes->firstWhere('id', $empId);
                                                    @endphp
                                                    @if($emp)
                                                        <div class="selected-employee-item" data-id="{{ $emp->id }}">
                                                            <div class="selected-employee-info">
                                                                <div class="selected-employee-avatar">
                                                                    {{ strtoupper(substr($emp->first_name, 0, 1) . substr($emp->last_name, 0, 1)) }}
                                                                </div>
                                                                <div>
                                                                    <strong>{{ $emp->first_name }} {{ $emp->last_name }}</strong>
                                                                    <div class="employee-ref">{{ $emp->reference }}</div>
                                                                </div>
                                                            </div>
                                                            <span class="remove-employee">×</span>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </div>
                                        <input type="hidden" name="employes[]" id="employesInput" 
                                               value="{{ isset($reservation) && $reservation->employes ? json_encode($reservation->employes) : '[]' }}">
                                    </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" 
                                              placeholder="{{ __('Enter any special instructions, requirements, or additional information...') }}">{{ 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

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/editors/summernote/summernote.js') }}"></script>
    <script>
        $(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'
            });
            
            $('#description').summernote({
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'hr']]
                ]
            });

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

            // Employee selection
            let selectedEmployees = JSON.parse($('#employesInput').val() || '[]');
            
            // Update counter display
            function updateCounterDisplay() {
                const count = selectedEmployees.length;
                $('#selectedCount').text(count);
                $('#nb_places_display').text(count + ' {{ __("passenger(s)") }}');
                $('#nb_places').val(count);
            }
            
            // Initialize counter
            updateCounterDisplay();
            
            // Add employee to selection
            $(document).on('click', '#availableEmployees .employee-card:not(.selected)', function() {
                const employeeId = $(this).data('id');
                const employeeName = $(this).data('name');
                const employeeRef = $(this).data('reference');
                
                // Check if already selected
                if (!selectedEmployees.includes(employeeId)) {
                    selectedEmployees.push(employeeId);
                    
                    // Update UI
                    $(this).addClass('selected');
                    
                    // Get initials for avatar
                    const names = employeeName.split(' ');
                    const initials = (names[0].charAt(0) + (names[1] ? names[1].charAt(0) : '')).toUpperCase();
                    
                    // Add to selected list
                    const selectedHtml = `
                        <div class="selected-employee-item" data-id="${employeeId}">
                            <div class="selected-employee-info">
                                <div class="selected-employee-avatar">${initials}</div>
                                <div>
                                    <strong>${employeeName}</strong>
                                    <div class="employee-ref">${employeeRef}</div>
                                </div>
                            </div>
                            <span class="remove-employee">×</span>
                        </div>`;
                    $('#selectedEmployees').append(selectedHtml);
                    updateEmployeesInput();
                    updateCounterDisplay();
                    $('#passengers_error').hide();
                }
            });

            // Remove employee from selection
            $(document).on('click', '.remove-employee', function() {
                const employeeId = $(this).closest('.selected-employee-item').data('id');
                
                // Remove from array
                selectedEmployees = selectedEmployees.filter(id => id != employeeId);
                
                // Update UI
                $(this).closest('.selected-employee-item').remove();
                $('#availableEmployees .employee-card[data-id="' + employeeId + '"]').removeClass('selected');
                updateEmployeesInput();
                updateCounterDisplay();
            });

            // Sélectionner tous les employés
            $('#selectAllEmployees').click(function() {
                const availableEmployees = $('#availableEmployees .employee-card:not(.selected)');
                availableEmployees.each(function() {
                    const employeeId = $(this).data('id');
                    const employeeName = $(this).data('name');
                    const employeeRef = $(this).data('reference');
                    
                    if (!selectedEmployees.includes(employeeId)) {
                        selectedEmployees.push(employeeId);
                        $(this).addClass('selected');
                        
                        // Get initials for avatar
                        const names = employeeName.split(' ');
                        const initials = (names[0].charAt(0) + (names[1] ? names[1].charAt(0) : '')).toUpperCase();
                        
                        // Add to selected list
                        const selectedHtml = `
                            <div class="selected-employee-item" data-id="${employeeId}">
                                <div class="selected-employee-info">
                                    <div class="selected-employee-avatar">${initials}</div>
                                    <div>
                                        <strong>${employeeName}</strong>
                                        <div class="employee-ref">${employeeRef}</div>
                                    </div>
                                </div>
                                <span class="remove-employee">×</span>
                            </div>`;
                        $('#selectedEmployees').append(selectedHtml);
                    }
                });
                updateEmployeesInput();
                updateCounterDisplay();
                $('#passengers_error').hide();
            });

            // Désélectionner tous les employés
            $('#deselectAllEmployees').click(function() {
                // Clear array
                selectedEmployees = [];
                
                // Update UI
                $('#availableEmployees .employee-card').removeClass('selected');
                $('#selectedEmployees').empty();
                
                updateEmployeesInput();
                updateCounterDisplay();
            });

            // 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:
                        if (!$('#date').val()) {
                            $('#date_error').text('{{ __("Departure date is required") }}').show();
                            $('#date').closest('.form-group').addClass('has-error');
                            isValid = false;
                        }
                        
                        if ($('#round_trip').is(':checked') && !$('#date_round_trip').val()) {
                            $('#date_round_trip').closest('.form-group').addClass('has-error');
                            isValid = false;
                        }
                        break;
                    case 3:
                        // 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 4:
                        // 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 5:
                        if (selectedEmployees.length === 0) {
                            $('#passengers_error').show();
                            isValid = false;
                        }
                        break;
                    case 6:
                        if (!$('#priority_input').val()) {
                            isValid = false;
                        }
                        break;
                }
                
                return isValid;
            }

            function updateEmployeesInput() {
                $('#employesInput').val(selectedEmployees);
            }
            ajaxForm("#reservationForm");
            // Initialize selected employees
            selectedEmployees.forEach(empId => {
                $('#availableEmployees .employee-card[data-id="' + empId + '"]').addClass('selected');
            });
            
            @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