@extends('layout.app')

@section('title')
    {{ __('New Reservation') }}
@endsection

@push('styles')
    <style>
        /* Design sobre et professionnel */
        .mission-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.2s ease;
            height: 100%;
            cursor: pointer;
        }
        
        .mission-card:hover {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
        }
        
        .mission-card.selected {
            border-color: #007bff;
            background-color: #f8fbff;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
        }
        
        .mission-card .card-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .mission-card .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.75rem;
        }
        
        .mission-card .card-text {
            color: #666;
            line-height: 1.5;
            flex-grow: 1;
            font-size: 0.95rem;
        }
        
        .mission-card .badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            margin-bottom: 1rem;
            align-self: flex-start;
        }
        
        /* Header du formulaire */
        .form-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
            padding: 1rem 1.5rem;
        }
        
        .form-header h4 {
            margin: 0;
            font-weight: 600;
            color: #333;
        }
        
        /* Sections du formulaire */
        .form-section {
            padding: 1.5rem;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .form-section:last-child {
            border-bottom: none;
        }
        
        .form-section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #444;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
        }
        
        /* Labels */
        .form-label {
            font-weight: 500;
            color: #555;
            margin-bottom: 0.5rem;
        }
        
        .form-label.required::after {
            content: ' *';
            color: #dc3545;
        }
        
        /* Inputs et contrôles */
        .form-control {
            border-radius: 4px;
            border: 1px solid #ddd;
            padding: 0.5rem 0.75rem;
            transition: border-color 0.2s;
        }
        
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
        }
        
        /* Boutons radio inline */
        .radio-group {
            display: flex;
            gap: 2rem;
            margin-top: 0.25rem;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .radio-option input[type="radio"] {
            margin: 0;
        }
        
        .radio-option label {
            margin: 0;
            font-weight: normal;
            cursor: pointer;
        }
        
        /* Groupe de champs */
        .field-group {
            background-color: #fafafa;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .field-group:last-child {
            margin-bottom: 0;
        }
        
        .field-group-title {
            font-weight: 500;
            color: #666;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Actions */
        .form-actions {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* Info text */
        .info-text {
            color: #666;
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }
        
        /* Spacing */
        .mb-3 {
            margin-bottom: 1rem !important;
        }
        
        .mb-2 {
            margin-bottom: 0.5rem !important;
        }
        
        /* Animation douce */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        #missionFormContainer {
            animation: fadeIn 0.3s ease;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .form-section {
                padding: 1rem;
            }
            
            .field-group {
                padding: 1rem;
            }
            
            .form-actions {
                flex-direction: column;
                gap: 1rem;
            }
            
            .form-actions > div {
                width: 100%;
                display: flex;
                gap: 0.5rem;
            }
            
            .form-actions .btn {
                flex: 1;
            }
        }
    </style>
@endpush

@section('active_reservations_create', 'active')
@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <!-- Header -->
        <div class="content-header row">
            <div class="content-header-left col-md-8 col-12">
                <div class="breadcrumbs-top">
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('reservations.index') }}">{{ __('Reservations') }}</a></li>
                            <li class="breadcrumb-item active">{{ __('New Reservation') }}</li>
                        </ol>
                    </div>
                </div>
                <h1 class="content-header-title mb-0">{{ __('Create New Reservation') }}</h1>
                <p class="text-muted mb-0">{{ __('Select a mission type and provide the necessary details') }}</p>
            </div>
            <div class="content-header-right col-md-4 col-12 text-right">
                <a href="{{ route('reservations.index') }}" class="btn btn-light">
                    <i class="la la-arrow-left"></i> {{ __('Back') }}
                </a>
            </div>
        </div>
        
        <div class="content-body">
            <!-- Sélection de la mission -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{{ __('Step 1: Select Mission Type') }}</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach ($missions as $mission)
                            <div class="col-md-4 mb-4">
                                <div class="card mission-card" data-mission-id="{{ $mission->id }}">
                                    <div class="card-body">
                                        <div class="badge badge-light-primary">{{ $mission->code ?? 'MISSION' }}</div>
                                        <h5 class="card-title">{{ $mission->name }}</h5>
                                        <p class="card-text">{{ Str::limit(strip_tags($mission->description), 120) }}</p>
                                        <button type="button" class="btn btn-outline-primary btn-sm align-self-start choose-mission" data-mission-id="{{ $mission->id }}">
                                            {{ __('Select') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            
            <!-- Formulaire de mission (caché initialement) -->
            <div class="card mb-4" id="missionFormContainer" style="display: none;">
                <div class="form-header">
                    <h4 id="missionFormTitle">{{ __('Step 2: Mission Details') }}</h4>
                </div>
                
                <form id="missionForm" method="POST" action="{{ route('reservations.store') }}">
                    @csrf
                    <input type="hidden" name="mission_id" id="selectedMissionId">
                    
                    <!-- Informations générales -->
                    <div class="form-section">
                        <div class="form-section-title">{{ __('General Information') }}</div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label required">{{ __('Round Trip') }}</label>
                                <div class="radio-group">
                                    <div class="radio-option">
                                        <input type="radio" id="round_trip_no" name="round_trip" value="0" checked>
                                        <label for="round_trip_no">{{ __('No (One-way)') }}</label>
                                    </div>
                                    <div class="radio-option">
                                        <input type="radio" id="round_trip_yes" name="round_trip" value="1">
                                        <label for="round_trip_yes">{{ __('Yes') }}</label>
                                    </div>
                                </div>
                                <div class="info-text">{{ __('Select if this is a round trip') }}</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="priority" class="form-label required">{{ __('Priority') }}</label>
                                <select class="form-control" id="priority" name="priority" required>
                                    <option value="low">{{ __('Low') }}</option>
                                    <option value="medium" selected>{{ __('Medium') }}</option>
                                    <option value="high">{{ __('High') }}</option>
                                    <option value="urgent">{{ __('Urgent') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <!-- Dates -->
                            <div class="form-section">
                                <div class="form-section-title">{{ __('Dates & Schedule') }}</div>
                                
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label for="date" class="form-label required">{{ __('Date & Time') }}</label>
                                        <input type="datetime-local" class="form-control" id="date" name="date" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <!-- Départ -->
                            <div class="form-section">
                                <div class="form-section-title">{{ __('Departure') }}</div>
                                
                                <div class="mb-3">
                                    <label class="form-label required">{{ __('Departure Type') }}</label>
                                    <div class="radio-group">
                                        <div class="radio-option">
                                            <input type="radio" id="from_type_site" name="from_type" value="site" checked>
                                            <label for="from_type_site">{{ __('Site') }}</label>
                                        </div>
                                        <div class="radio-option">
                                            <input type="radio" id="from_type_free" name="from_type" value="free">
                                            <label for="from_type_free">{{ __('Free Address') }}</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="from_site_container">
                                    <label for="from_site" class="form-label required">{{ __('Select Site') }}</label>
                                    <select class="form-control" id="from_site" name="from_site" required>
                                        <option value="">{{ __('-- Choose a site --') }}</option>
                                        @foreach($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div id="from_free_container" style="display: none;">
                                    <label for="from_free" class="form-label required">{{ __('Address') }}</label>
                                    <input type="text" class="form-control" id="from_free" name="from_free" placeholder="{{ __('Enter complete address') }}">
                                    <div class="info-text">{{ __('Street, City, Postal Code') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <!-- Destination -->
                            <div class="form-section">
                                <div class="form-section-title">{{ __('Destination') }}</div>
                                
                                <div class="mb-3">
                                    <label class="form-label required">{{ __('Destination Type') }}</label>
                                    <div class="radio-group">
                                        <div class="radio-option">
                                            <input type="radio" id="to_type_site" name="to_type" value="site" checked>
                                            <label for="to_type_site">{{ __('Site') }}</label>
                                        </div>
                                        <div class="radio-option">
                                            <input type="radio" id="to_type_free" name="to_type" value="free">
                                            <label for="to_type_free">{{ __('Free Address') }}</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="to_site_container">
                                    <label for="to_site" class="form-label required">{{ __('Select Site') }}</label>
                                    <select class="form-control" id="to_site" name="to_site" required>
                                        <option value="">{{ __('-- Choose a site --') }}</option>
                                        @foreach($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div id="to_free_container" style="display: none;">
                                    <label for="to_free" class="form-label required">{{ __('Address') }}</label>
                                    <input type="text" class="form-control" id="to_free" name="to_free" placeholder="{{ __('Enter complete address') }}">
                                    <div class="info-text">{{ __('Street, City, Postal Code') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section Retour (cachée par défaut) -->
                    <div class="form-section" id="return_section" style="display: none;">
                        <div class="form-section-title">{{ __('Return Trip') }}</div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="field-group">
                                    <div class="field-group-title">{{ __('Return Dates') }}</div>
                                    <div class="row">
                                        <div class="col-12 mb-3">
                                            <label for="return_date" class="form-label">{{ __('Return Date') }}</label>
                                            <input type="datetime-local" class="form-control" id="return_date" name="return_date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="field-group">
                                    <div class="field-group-title">{{ __('Return Departure') }}</div>
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Departure Type') }}</label>
                                        <div class="radio-group">
                                            <div class="radio-option">
                                                <input type="radio" id="return_from_type_site" name="return_from_type" value="site" checked>
                                                <label for="return_from_type_site">{{ __('Site') }}</label>
                                            </div>
                                            <div class="radio-option">
                                                <input type="radio" id="return_from_type_free" name="return_from_type" value="free">
                                                <label for="return_from_type_free">{{ __('Free Address') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div id="return_from_site_container">
                                        <label for="return_from_site" class="form-label">{{ __('Select Site') }}</label>
                                        <select class="form-control" id="return_from_site" name="return_from_site">
                                            <option value="">{{ __('-- Choose a site --') }}</option>
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}">{{ $site->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div id="return_from_free_container" style="display: none;">
                                        <label for="return_from_free" class="form-label">{{ __('Address') }}</label>
                                        <input type="text" class="form-control" id="return_from_free" name="return_from_free" placeholder="{{ __('Enter complete address') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="field-group">
                                    <div class="field-group-title">{{ __('Return Destination') }}</div>
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Destination Type') }}</label>
                                        <div class="radio-group">
                                            <div class="radio-option">
                                                <input type="radio" id="return_to_type_site" name="return_to_type" value="site" checked>
                                                <label for="return_to_type_site">{{ __('Site') }}</label>
                                            </div>
                                            <div class="radio-option">
                                                <input type="radio" id="return_to_type_free" name="return_to_type" value="free">
                                                <label for="return_to_type_free">{{ __('Free Address') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div id="return_to_site_container">
                                        <label for="return_to_site" class="form-label">{{ __('Select Site') }}</label>
                                        <select class="form-control" id="return_to_site" name="return_to_site">
                                            <option value="">{{ __('-- Choose a site --') }}</option>
                                            @foreach($sites as $site)
                                                <option value="{{ $site->id }}">{{ $site->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div id="return_to_free_container" style="display: none;">
                                        <label for="return_to_free" class="form-label">{{ __('Address') }}</label>
                                        <input type="text" class="form-control" id="return_to_free" name="return_to_free" placeholder="{{ __('Enter complete address') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="form-actions">
                        <div class="text-muted">
                            <i class="la la-info-circle"></i> {{ __('Fields marked with * are required') }}
                        </div>
                        <div>
                            <button type="button" class="btn btn-light" id="cancelMission">
                                <i class="la la-times"></i> {{ __('Cancel') }}
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="la la-save"></i> {{ __('Create Reservation') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Gestion de la sélection des missions
        $('.mission-card').click(function(e) {
            if (!$(e.target).closest('.choose-mission').length) return;
            
            const missionId = $(this).data('mission-id');
            const missionName = $(this).find('.card-title').text();
            
            // Désélectionner toutes les cartes
            $('.mission-card').removeClass('selected');
            
            // Sélectionner la carte cliquée
            $(this).addClass('selected');
            
            // Mettre à jour le formulaire
            $('#selectedMissionId').val(missionId);
            $('#missionFormTitle').text('Step 2: ' + missionName + ' Details');
            
            // Afficher le formulaire
            $('#missionFormContainer').fadeIn();
            
            // Scroller vers le formulaire
            $('html, body').animate({
                scrollTop: $('#missionFormContainer').offset().top - 20
            }, 300);
        });
        
        // Annuler la sélection
        $('#cancelMission').click(function() {
            $('#missionFormContainer').fadeOut();
            $('#missionForm')[0].reset();
            $('.mission-card').removeClass('selected');
            
            // Réinitialiser l'affichage des champs
            $('#from_site_container').show();
            $('#from_free_container').hide();
            $('#to_site_container').show();
            $('#to_free_container').hide();
            $('#return_section').hide();
        });
        
        // Gestion Aller/Retour
        $('input[name="round_trip"]').change(function() {
            if ($(this).val() === '1') {
                $('#return_section').fadeIn();
                // Rendre les champs obligatoires
                $('#return_start_date, #return_end_date, #return_from_site, #return_to_site').prop('required', true);
            } else {
                $('#return_section').fadeOut();
                // Rendre les champs optionnels
                $('#return_start_date, #return_end_date, #return_from_site, #return_from_free, #return_to_site, #return_to_free').prop('required', false);
            }
        });
        
        // Gestion des types de départ
        $('input[name="from_type"]').change(function() {
            if ($(this).val() === 'site') {
                $('#from_free_container').hide();
                $('#from_site_container').show();
                $('#from_site').prop('required', true);
                $('#from_free').prop('required', false);
            } else {
                $('#from_site_container').hide();
                $('#from_free_container').show();
                $('#from_site').prop('required', false);
                $('#from_free').prop('required', true);
            }
        });
        
        // Gestion des types de destination
        $('input[name="to_type"]').change(function() {
            if ($(this).val() === 'site') {
                $('#to_free_container').hide();
                $('#to_site_container').show();
                $('#to_site').prop('required', true);
                $('#to_free').prop('required', false);
            } else {
                $('#to_site_container').hide();
                $('#to_free_container').show();
                $('#to_site').prop('required', false);
                $('#to_free').prop('required', true);
            }
        });
        
        // Gestion des types de départ retour
        $('input[name="return_from_type"]').change(function() {
            if ($(this).val() === 'site') {
                $('#return_from_free_container').hide();
                $('#return_from_site_container').show();
                if ($('#round_trip_yes').is(':checked')) {
                    $('#return_from_site').prop('required', true);
                }
                $('#return_from_free').prop('required', false);
            } else {
                $('#return_from_site_container').hide();
                $('#return_from_free_container').show();
                $('#return_from_site').prop('required', false);
                if ($('#round_trip_yes').is(':checked')) {
                    $('#return_from_free').prop('required', true);
                }
            }
        });
        
        // Gestion des types de destination retour
        $('input[name="return_to_type"]').change(function() {
            if ($(this).val() === 'site') {
                $('#return_to_free_container').hide();
                $('#return_to_site_container').show();
                if ($('#round_trip_yes').is(':checked')) {
                    $('#return_to_site').prop('required', true);
                }
                $('#return_to_free').prop('required', false);
            } else {
                $('#return_to_site_container').hide();
                $('#return_to_free_container').show();
                $('#return_to_site').prop('required', false);
                if ($('#round_trip_yes').is(':checked')) {
                    $('#return_to_free').prop('required', true);
                }
            }
        });
        
        // Validation du formulaire
        $('#missionForm').submit(function(e) {
            // Validation des dates
            const startDate = new Date($('#start_date').val());
            const endDate = new Date($('#end_date').val());
            
            if (startDate >= endDate) {
                alert('{{ __("End date must be after start date") }}');
                e.preventDefault();
                return false;
            }
            
            if ($('#round_trip_yes').is(':checked')) {
                const returnStartDate = new Date($('#return_start_date').val());
                const returnEndDate = new Date($('#return_end_date').val());
                
                if (returnStartDate && returnEndDate && returnStartDate >= returnEndDate) {
                    alert('{{ __("Return end date must be after return start date") }}');
                    e.preventDefault();
                    return false;
                }
            }
            
            return true;
        });
        
        // Définir les dates par défaut
        const now = new Date();
        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
        
        const tomorrow = new Date(now);
        tomorrow.setDate(tomorrow.getDate() + 1);
        
        // Format pour input datetime-local
        const formatDate = (date) => {
            return date.toISOString().slice(0, 16);
        };
        
        $('#start_date').val(formatDate(now));
        $('#end_date').val(formatDate(tomorrow));
    });
</script>
@endpush