@extends('layout')

@section('content')
    <div class="page-header page-header-light " style="border-radius: 0px;">

        <div class="d-flex justify-content-between align-items-center mx-3 my-2">

            <div class="d-flex flex-column tailwind-scope">

                <h4 class="text-white text-2xl font-bold mb-1">Réservation et séjour</h4>
                <p class="text-white text-sm">Gestion des réservations</p>
            </div>
            @include('shared.navbar')
        </div>
    </div>
    <div class="content tailwind-scope h-screen">
        <div class="shadow-md rounded-2xl p-3 m-1">


            <a class="flex items-center mb-4 text-lg " href="/reservation/index">
                <i class="fa-solid fa-arrow-left pr-2"></i> <span class="font-semibold">Nouvelle réservation</span>
            </a>
            @if(session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif
            <div class=" ">
                <p class="font-bold mb-3">Informations générale:</p>
                <form action="{{ route('reservation-store') }}" method="post" enctype="multipart/form-data"
                    id="create-reservation-form">
                    {{ csrf_field() }}
                    <x-form-group label="Type de réservation:">
                        <select class="custom-input w-1/2 " required id="ancienne_reservation" name="ancienne_reservation">

                            <option value="Non" selected>Nouvelle réservation</option>
                            <option value="Oui">Ancienne réservation</option>
                        </select>
                    </x-form-group>
                    <x-form-group label="Client:" required="true">
                        <div class="w-1/2">

                            <select class="select-search custom-input  " required name="client_id">
                                @foreach($client as $key => $item)
                                    <option class="text-[#110F24]" value="{{ $item->id }}" @if($item->id == old('client_id'))
                                    selected @endif>
                                        {{ $item->f_name }} {{ $item->l_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </x-form-group>
                    <x-form-group label="Logement:" required="true">
                        <div class="w-1/2">

                            <select class="select-search custom-input " id="property_id" required name="property_id">
                                <option value="">Veuillez choisir un Logement</option>
                                @foreach($properties as $key => $item)
                                    <option value="{{ $item->uid }}">
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </x-form-group>

                    <x-form-group label="Mode de paiement:">
                        <select class="custom-input w-1/2 " required name="paidMode">
                            @foreach (config('payment.mode') as $val)
                                <option value="{{ $val }}" @if ($val == old('paidMode')) selected @endif>{{ $val }}</option>


                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Montant (en chiffre):" required="true">
                        <div class="w-1/2">

                            <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="total_price" required
                                class="custom-input w-full" value="{{old("total_price")}}" min="0"
                                placeholder="Veuillez saisir un nombre décimal valide"
                                title="Veuillez saisir un nombre décimal valide (eg 150.80)">
                            @error('total_price')
                                <div>
                                    <span class="text-red-500 text-xs italic">{{$message }}</span>
                                </div>
                            @enderror
                        </div>

                    </x-form-group>

                    <x-form-group label="Numéro de chèque :">
                        <input class="custom-input w-1/2  py-2" name="check_number">
                    </x-form-group>
                    <x-form-group label="Nom de la banque :">
                        <select class="custom-input w-1/2 " required name="bank">
                            @foreach (config('bank.list') as $val)
                                <option value="{{ $val }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </x-form-group>



                    <x-form-group label="Paiement:">
                        <select class="custom-input w-1/2 " name="paid">
                            @foreach (config('status.no-paid') as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Type des taxes:">
                        <select class="custom-input w-1/2 " required name="taxe">
                            <option value="HT">HT</option>
                            <option value="TTC">TTC</option>
                        </select>
                    </x-form-group>



                    <x-form-group label="Avance:">
                        <input class="custom-input w-1/2 p-2" name="advance">
                    </x-form-group>

                    <x-form-group label="Devise:">
                        <select class="custom-input w-1/2 " required name="currency">
                            @foreach (config('payment.currency') as $val)
                                <option value="{{ $val }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Inclure les frais de service par default:">
                        <select class="custom-input w-1/2 " id="servicefee" required name="servicefee">
                            <option value="Oui">Oui</option>
                            <option value="Non">Non</option>
                        </select>
                    </x-form-group>
                    <div id="servicefee_perc" class="d-none">
                        <x-form-group label="Pourcentage frais de service:">
                            <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="servicefee_perc" class="custom-input w-1/2"
                                min="0" value="0.00" placeholder="Veuillez saisir un nombre décimal valide"
                                title="Veuillez saisir un nombre décimal valide (ex: 8.25)">
                        </x-form-group>
                    </div>

                    <x-form-group label="Platform:">
                        <select class="custom-input w-1/2 " required name="platform">
                            @foreach (config('creators.reservation') as $val)
                                <option value="{{ $val }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Langue de contrat de réservation:">
                        <select class="custom-input w-1/2 " required name="lang">
                            <option value="Anglais">Anglais</option>
                            <option value="Français">Français</option>
                        </select>
                    </x-form-group>

                    <x-form-group label="Nombre de personne:" required="true">
                        <div class="w-1/2 flex flex-col gap-2">

                            <input type="number" min="0" name="guests_number" class="custom-input w-full" required
                                placeholder="Nombre de person " value="{{old("guests_number")}}">
                            @error('guests_number')
                                <div>
                                    <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                                </div>
                            @enderror
                        </div>
                    </x-form-group>
                    <x-form-group label="Durée de séjour minimum:">
                        <input id="minStay" type="text" class="custom-input w-1/2 " readonly>
                    </x-form-group>

                    <x-form-group label="Date de début:" required="true">
                        <div class="w-1/2">

                            <div class="input-group w-full">
                                <span class="input-group-prepend">
                                    <span class="input-group-text"><i class="icon-calendar5"></i></span>
                                </span>
                                <input type="date" name="check_in" class="form-control startDate custom-input"
                                    id="startDate" readonly required>
                            </div>
                            @error('check_in')
                                <div>
                                    <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                                </div>
                            @enderror
                        </div>
                    </x-form-group>
                    <x-form-group label="Date de fin:" required="true">
                        <div class="w-1/2">

                            <div class="input-group w-full">
                                <span class="input-group-prepend">
                                    <span class="input-group-text"><i class="icon-calendar5"></i></span>
                                </span>
                                <input type="date" name="check_out" id="endDate" class="form-control endDate custom-input"
                                    readonly required>

                            </div>
                            @error('check_out')
                                <div>
                                    <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                                </div>
                            @enderror
                        </div>

                    </x-form-group>


                    {{-- <div class="alert alert-danger d-none" role="alert" id="alertDates">
                        {{ session('error') }}
                    </div> --}}


                    <x-form-group label="Caution:">
                        <div class="w-1/2">

                            <input type="text" pattern="[0-9]+(\.[0-9]+)?" value="{{old("deposit")}}" name="deposit"
                                class="custom-input  w-full"
                                placeholder="Veuillez saisir un nombre décimal valide (eg: 10.25)">

                            @error('deposit')
                                <div>
                                    <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                                </div>
                            @enderror
                        </div>
                    </x-form-group>
                    <x-form-group label="Devise de la caution:">
                        <select class="custom-input w-1/2 " required name="deposit_currency">
                            @foreach (config('payment.currency') as $val)
                                <option value="{{ $val }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Commentaires:" class="border-b ">
                        <textarea class="custom-input w-1/2" rows="6" name="comments"></textarea>
                    </x-form-group>


                    <div class="form-group d-none">
                        <input type="hidden" name="is_local" value="1">
                        <input type="hidden" name="last_editor" value="{{ Auth::user()->name }}">
                        <input type="hidden" name="creator" value="{{ Auth::user()->email }}">
                    </div>

                    <div class="w-full flex">
                        <button type="submit" id="submitBox" class="w-full bg-[#1F9878] font-bold py-2 text-white ">
                            Sauvegarder
                        </button>
                    </div>

                </form>
            </div>


        </div>
    </div>

    <script>
        // Function to hide loader
        function hideLoader() {
            $('.spinner-border').addClass('d-none');
            $('body').css('opacity', '1');
            $('body').css('pointer-events', 'auto');
        }
        $('#servicefee').change(function () {
            if ($(this).val() === 'Non') {
                $('#servicefee_perc').removeClass('d-none');
            } else {
                $('#servicefee_perc').addClass('d-none');
            }
        });

        $(document).on('submit', '#create-reservation-form', function () {
            const button = $('#submitBox');
            button.prop('disabled', true).addClass('opacity-50').html('<i class="fa fa-spinner fa-spin"></i> En cours...');
        });


        $('#ancienne_reservation').change(function () {
            // Reset the property select to its default value (empty or first option)
            $('#property_id').val('');  // '' ou la valeur par défaut souhaitée

            // Optionnel : si vous voulez aussi vider le champ minStay ou masquer certains éléments
            $("#property-selected").addClass('d-none');
            $('#minStay').val(''); // Reset minStay input
            // Reset the datepickers
            $('#startDate').val('');
            $('#endDate').val('');
            $('#startDate').datepicker('destroy');
            $('#endDate').datepicker('destroy');

            // Trigger change event on property to update datepickers accordingly
            $('#property_id').trigger('change');
        });
        // Intercept the form submission event
        // $('form').submit(function (event) {
        //     // Prevent the default form submission
        //     event.preventDefault();

        //     // Serialize form data
        //     var formData = $(this).serialize();
        //     var form = $(this);

        //     // Send form data via AJAX
        //     $.ajax({
        //         url: form.attr('action'),
        //         method: form.attr('method'),
        //         data: formData,
        //         success: function (response) {

        //             // Handle successful response from the server
        //             if (response.error) {
        //                 $('#startDate').addClass('alert-danger');
        //                 $('#endDate').addClass('alert-danger');
        //                 $('#alertDates').removeClass('d-none').html(response.error);
        //                 hideLoader();
        //             }
        //             if (response.errors) {
        //                 $.each(response.errors, function (index, value) {
        //                     // Handle each error message here
        //                     $('[name="' + value + '"]').addClass('alert-danger').attr('placeholder', 'Champ obligatoire!');
        //                 });
        //                 hideLoader();
        //             }
        //             if (response.redirect) {
        //                 // Redirect to the specified URL
        //                 window.location.href = response.redirect;
        //             }
        //         },
        //         error: function (xhr) {
        //             // Parse the responseText to JSON
        //             var response = JSON.parse(xhr.responseText);

        //             // Log the entire response
        //             console.error(response);

        //             // Hide the loader
        //             hideLoader();

        //             // Display the error message
        //             $('#error').removeClass('d-none').html(response.error || "An error occurred");
        //         }
        //     });
        // });
        function initializeDatepickersForOldReservation() {
            $('#startDate').datepicker('destroy');
            $('#endDate').datepicker('destroy');

            $('#startDate').datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: null, // Aucune restriction, toutes dates sélectionnables
            });

            $('#endDate').datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: null,
            });

            $("#property-selected").removeClass('d-none');
        }
        $('#property_id').change(function () {
            var propertyId = $(this).val(); // Cache property ID
            var ancienneResa = $('#ancienne_reservation').val();

            if (ancienneResa === 'Oui') {
                // Ancienne réservation : ne pas appliquer les règles de blocage, init simple datepicker sans restrictions
                initializeDatepickersForOldReservation();
                return; // Ne pas faire l'ajax etc.
            }
            // Define settings for AJAX request
            var settings = {
                url: "/api/getBlockedDates?property_id=" + propertyId,
                method: "GET",
                timeout: 0
            };

            // Make AJAX request
            $.ajax(settings).done(function (response) {

                $('#startDate').datepicker('destroy');
                $('#endDate').datepicker('destroy');
                console.log(response);
                // Remove 'd-none' class from #property-selected element
                $("#property-selected").removeClass('d-none');

                var minStay = parseInt(response.MinStay);
                $("#minStay").val(minStay);

                if (response.message === 'isLocal') {
                    // Initialize datepickers for 'isLocal' response
                    initializeDatepickersForLocal();
                } else {
                    // Initialize datepickers for other responses
                    initializeDatepickers(response, minStay);
                }
            }).fail(function (xhr, status, error) {
                console.error("AJAX request failed:", status, error);
            });
        });

        // Function to initialize datepickers for 'isLocal' response
        function initializeDatepickersForLocal() {
            // Clear existing datepicker instances
            $('#startDate').datepicker('destroy');
            $('#endDate').datepicker('destroy');

            // Initialize startDate datepicker
            $('#startDate').datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: 0, // Disable past dates
                onSelect: function () {
                    var selectedStartDate = $(this).datepicker('getDate');
                    var endDate = new Date(selectedStartDate);
                    endDate.setDate(selectedStartDate.getDate() + 1); // endDate = startDate + 1 day

                    // Update endDate datepicker minDate option
                    $('#endDate').datepicker('option', 'minDate', endDate);

                    // Update endDate datepicker value to default to endDate
                    $('#endDate').datepicker('setDate', endDate);
                }
            });

            // Initialize endDate datepicker
            $('#endDate').datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: 1, // Minimum date is startDate + 1 day
                beforeShowDay: function (date) {
                    var isPast = date < new Date();
                    return [!isPast];
                }
            });
        }

        // Function to initialize datepickers based on response
        function initializeDatepickers(response, minStay) {
            const blockedDates = response.startBlockedDates.slice();
            const blockedEndDates = response.endBlockedDates.slice();

            $('#startDate').datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: 0, // Disable past dates
                onSelect: function () {
                    var startDate = $(this).datepicker('getDate');
                    var minEndDate = calculateMinEndDate(startDate, minStay);
                    $('#endDate').datepicker('option', 'minDate', minEndDate);
                },
                beforeShowDay: function (date) {
                    return isDateSelectable(date, blockedDates);
                }
            });

            $('#endDate').datepicker({
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function (date) {
                    // Create a copy of blockedDates and remove minEndDate
                    return isDateSelectable(date, blockedEndDates.slice());
                }
            });
        }

        // Function to add last date to blocked dates array
        function addLastDateToBlockedDates(blockedDates) {
            if (blockedDates.length > 0) {
                let lastDate = blockedDates[blockedDates.length - 1];
                blockedDates.push(lastDate);
            }
            return blockedDates;
        }

        // Function to calculate the minimum end date
        function calculateMinEndDate(startDate, minStay) {
            var minEndDate = new Date(startDate);
            minEndDate.setDate(minEndDate.getDate() + minStay);
            return minEndDate;
        }

        // Function to check if a date is selectable
        function isDateSelectable(date, blockedDates) {
            var dateString = $.datepicker.formatDate('yy-mm-dd', date);
            var isBlocked = blockedDates.includes(dateString);
            var isPast = date < new Date().setHours(0, 0, 0, 0);
            return [!isBlocked && !isPast];
        }
    </script>
@endsection