@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@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="{{ route('reservation-index') }}">
                <i class="fa-solid fa-arrow-left pr-2"></i> <span class="font-semibold">Modifier réservation</span>
            </a>
            @if(session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif
            <div class="card-body">
                <form action="{{ route('reservation-update', $reservation) }}" method="post" enctype="multipart/form-data"
                    id="reservation-form">
                    {{ csrf_field() }}
                    <div class="form-group row">
                        <div class="col">
                            <label>Client:</label>
                            <select class="form-control select-search" required name="client_id">
                                @foreach($client as $key => $item)
                                    <option {{ $reservation->client_id == $item->id ? 'selected' : '' }} value="{{ $item->id }}">
                                        {{ $item->f_name }}
                                        {{ $item->l_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label>Logement:</label>
                            <select class="form-control custom-input " id="property_id" name="property_id" readonly>
                                <option value="{{ $property->uid }}">{{ $property->name }}</option>
                            </select>
                        </div>
                    </div>

                    <div id="property-selected">
                        <div class="form-group row">
                            <div class="col">
                                <label>Montant (en chiffre):</label>
                                <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="total_price" required
                                    class="form-control custom-input" value="{{ (float) $reservation->total_price }}">
                                @if ($reservation->getTotalExtensions() > 0)
                                    <div class="alert alert-danger mt-2">
                                        Total des extensions: {{ number_format($reservation->getTotalExtensions(), 2) }} TND
                                    </div>
                                @endif

                            </div>

                            <div class="col">
                                <label>Devise:</label>
                                <select class="form-control form-control-sm select " required name="currency">
                                    <option value="" selected>Pas de devise</option>
                                    @foreach (config('payment.currency') as $val)
                                        <option {{ ($val === $reservation->currency) ? 'selected' : '' }} value="{{ $val }}">
                                            {{ $val }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col">
                                <label>Nombre de personne :</label>
                                <input type="number" name="guests_number" class="form-control custom-input" required
                                    placeholder="Nombre de person " value="{{ $reservation->guests_number }}">

                            </div>
                            <div class="col">
                                <label>Langue de contrat de réservation:</label>
                                <select class="form-control select-search" required name="lang">
                                    <option value="Anglais" {{ $reservation->lang == "Anglais" ? 'selected' : '' }}>Anglais
                                    </option>
                                    <option value="Français" {{ $reservation->lang == "Français" ? 'selected' : '' }}>
                                        Français
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col">
                                <label>Date de début:</label>
                                <div class="input-group">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text"><i class="icon-calendar5"></i></span>
                                    </span>
                                    <input type="text" name="check_in" class="form-control custom-input" id="startDate"
                                        content="{{ $carbon::create($reservation->check_in)->format('Y-m-d') }}"
                                        value="{{ $carbon::create($reservation->check_in)->format('d-m-Y') }}" readonly>
                                </div>
                            </div>
                            <div class="col">
                                <label>Date de fin:</label>
                                <div class="input-group">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text"><i class="icon-calendar5"></i></span>
                                    </span>
                                    <input type="text" name="check_out" id="endDate" class="form-control custom-input"
                                        content="{{ $carbon::create($reservation->check_out)->format('Y-m-d') }}"
                                        value="{{ $carbon::create($reservation->check_out)->format('d-m-Y') }}" readonly>

                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col">
                                <label>Inclure les frais de service:</label>
                                <select class="form-control form-control-sm select" id="service_fee" required
                                    name="servicefee">
                                    <option value="Non" {{ $reservation->servicefee == "Non" ? 'selected' : '' }}>Non
                                    </option>
                                    <option value="Oui" {{ $reservation->servicefee == "Oui" ? 'selected' : '' }}>Oui
                                    </option>
                                </select>
                            </div>
                            <div id="servicefee_perc" class="col d-none">
                                <label>Pourcentage frais de service:</label>
                                <input type="text"
                                    value="{{ $reservation->servicefee_perc !== 0 ? $reservation->servicefee_perc : 0.00 }}"
                                    pattern="[0-9]+(\.[0-9]+)?" name="servicefee_perc" class="form-control custom-input"
                                    min="0" title="Veuillez saisir un nombre décimal valide (ex: 8.25)">
                            </div>

                            <div class="col">
                                <label>Type des taxes:</label>
                                <select class="form-control form-control-sm select" required name="taxe">
                                    <option value="HT" {{ $reservation->taxe == "HT" ? 'selected' : '' }}>HT</option>
                                    <option value="TTC" {{ $reservation->taxe == "TTC" ? 'selected' : '' }}>TTC</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col">
                                <label>Commentaire:</label>

                                <textarea name="commentaire_local" class="form-control custom-input" rows="3"
                                    placeholder="Commentaire">{{ $reservation->commentaire_local }}</textarea>
                            </div>
                        </div>


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

                        <div class="form-group hidden">
                            <input type="hidden" name="is_modify" value="1">
                            <input type="hidden" name="last_editor" value="{{ Auth::user()->name }}">
                        </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>
                    </div>
                </form>
            </div>
        </div>


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


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

        // 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!');
        //                 // });
        //                 $.each(response.errors, function (index, value) {
        //                     const $input = $('[name="' + value + '"]');

        //                     // Add error class to the input
        //                     $input.addClass('border-red-500');

        //                     // Check if error message already exists (to avoid duplicates)
        //                     if ($input.next('.error-message').length === 0) {
        //                         $input.after(`
        //                     <div class="error-message">
        //                         <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
        //                     </div>
        //                 `);
        //                     }
        //                 });
        //                 hideLoader();
        //             }
        //             if (response.redirect) {
        //                 // Redirect to the specified URL
        //                 window.location.href = response.redirect;
        //             }
        //         },
        //         error: function (xhr, status, error) {
        //             // Handle errors
        //             console.error(xhr.responseText);
        //         }
        //     });
        // });

        // Call the function on page load
        handleSelection();

        // Function to get all dates between two dates in 'YYYY-MM-DD' format
        function getDatesInRange(startDate, endDate) {
            var datesArray = [];
            var currentDate = new Date(startDate);

            // Iterate through dates until endDate is reached
            while (currentDate <= endDate) {
                // Format date as 'YYYY-MM-DD' and push to datesArray
                var formattedDate = currentDate.toISOString().slice(0, 10);
                datesArray.push(formattedDate);

                // Increment date by one day
                currentDate.setDate(currentDate.getDate() + 1);
            }

            return datesArray;
        }

        function removeElementsFromArray(PropertyCalendar, datesInRange) {
            // Filter elements from PropertyCalendar that are not present in datesInRange
            return PropertyCalendar.filter(function (element) {
                return !datesInRange.includes(element);
            });
        }

        // Function to handle change event and page load
        function handleSelection() {
            var propertyId = $('#property_id').val(); // Cache property ID

            // 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');

                // 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 initializeDatepickers(response, minStay) {
            const blockedDates = response.startBlockedDates.slice(); // Ensure startBlockedDates is an array of date strings
            const blockedEndDates = response.endBlockedDates.slice(); // Ensure endBlockedDates is an array of date strings

            // Retrieve the value from #startDate and #endDate attributes
            var selectedStartDate = $('#startDate').attr('content');
            var selectedEndDate = $('#endDate').attr('content');

            $('#startDate').datepicker({
                dateFormat: 'dd-mm-yy',
                minDate: 0, // Disable past dates
                defaultDate: selectedStartDate, // Set the initial value from the input field
                onSelect: function () {
                    var startDate = $(this).datepicker('getDate');
                    var minEndDate = calculateMinEndDate(startDate, minStay);
                    $('#endDate').datepicker('option', 'minDate', minEndDate);
                    // Update blockedDates based on new startDate selection
                    $('#endDate').datepicker('option', 'beforeShowDay', function (date) {
                        return isDateSelectable(date, removeCurrentDays(blockedEndDates, selectedStartDate, selectedEndDate));
                    });
                },
                beforeShowDay: function (date) {
                    return isDateSelectable(date, removeCurrentDays(blockedDates, selectedStartDate, selectedEndDate));
                }
            });

            $('#endDate').datepicker({
                dateFormat: 'dd-mm-yy',
                defaultDate: selectedEndDate,
                beforeShowDay: function (date) {
                    return isDateSelectable(date, removeCurrentDays(blockedEndDates, selectedStartDate, selectedEndDate));
                }
            });
        }

        // Function to filter out dates between selectedStartDate and selectedEndDate
        function removeCurrentDays(blockedDates, selectedStartDate, selectedEndDate) {
            // Parse the selected dates
            var startDate = $.datepicker.parseDate('yy-mm-dd', selectedStartDate);
            var endDate = $.datepicker.parseDate('yy-mm-dd', selectedEndDate);

            // Filter the blockedDates to remove dates between selectedStartDate and selectedEndDate
            return blockedDates.filter(function (date) {
                var currentDate = $.datepicker.parseDate('yy-mm-dd', date);
                return currentDate < startDate || currentDate > endDate;
            });
        }

        // 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