@extends('layout')

@section('content')
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4>
                    <i class="icon-add mr-2"></i>
                    Ajouter une réservation
                </h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
        </div>
    </div>
    <div class="content">
        @if(session('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
        @endif
        <div class="card-body">
            <form action="{{ route('reservation-store') }}" method="post" enctype="multipart/form-data" novalidate>
                {{ 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 value="{{ $item->id }}">
                                    {{ $item->f_name }}
                                    {{ $item->l_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col">
                        <label>Logement:</label>
                        <select class="form-control select-search" id="property_id"
                                required
                                name="property_id">
                            <option value="{{ $property->uid }}">{{ $property->name }}</option>
                        </select>
                    </div>
                </div>

                <div id="property-selected" class="d-none">
                    <div class="form-group row">
                        <div class="col">
                            <label>Mode de paiement:</label>
                            <select class="form-control select-search payment-mode" required name="paidMode">
                                @foreach (config('payment.mode') as $val)
                                    <option value="{{ $val }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label>Montant (en chiffre):</label>
                            <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="total_price" required
                                   value="{{ $request->get('price') }}"
                                   class="form-control"
                                   title="Veuillez saisir un nombre décimal valide (par exemple, 10,25)">
                        </div>
                    </div>

                    <div class="form-group row d-none check-number">
                        <div class="col">
                            <div class="form-group">
                                <label>Numéro de chèque :</label>
                                <input class="form-control"
                                       name="check_number">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label>Nom de la banque :</label>
                                <select class="form-control select-search" required
                                        name="bank">
                                    @foreach (config('bank.list') as $val)
                                        <option value="{{ $val }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col">
                            <label>Paiement:</label>
                            <select class="form-control select-search payment-status" name="paid">
                                @foreach (config('status.no-paid') as $key => $val)
                                    <option value="{{ $key }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label>Type des taxes:</label>
                            <select class="form-control form-control-sm select" required name="taxe">
                                <option value="HT">HT</option>
                                <option value="TTC">TTC</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row d-none advance">
                        <div class="col">
                            <div class="form-group">
                                <label>Avance :</label>
                                <input class="form-control"
                                       name="advance">
                            </div>
                        </div>
                        <div class="col">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col">
                            <label>Devise:</label>
                            <select class="form-control form-control-sm select" required name="currency">
                                @foreach (config('payment.currency') as $val)
                                    <option value="{{ $val }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label>Inclure les frais de service TLL:</label>
                            <select class="form-control form-control-sm select" required name="servicefee">
                                <option value="Oui">Oui</option>
                                <option value="Non">Non</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col">
                            <label>Platform:</label>
                            <select class="form-control form-control-sm select" required name="platform">
                                @foreach (config('creators.reservation') as $val)
                                    <option value="{{ $val }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label>Langue de contrat de réservation:</label>
                            <select class="form-control form-control-sm select" required name="lang">
                                <option value="Anglais">Anglais</option>
                                <option value="Français">Français</option>
                            </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" required
                                   placeholder="Nombre de person ">
                        </div>
                        <div class="col">
                            <label>Durée de séjour minimum : </label>
                            <input id="minStay" type="text" class="form-control" readonly>
                        </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="date" name="check_in" class="form-control startDate"
                                       id="startDate" value="{{ $request->get('checkin_first') }}" 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="date" name="check_out" id="endDate"
                                       class="form-control endDate" value="{{ $request->get('checkin_last') }}"
                                       readonly>

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

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

                    <div class="form-group row">
                        <div class="col-3">
                            <label>Caution:</label>
                            <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="deposit" class="form-control"
                                   title="Veuillez saisir un nombre décimal valide (par exemple, 10,25)">
                        </div>
                        <div class="col-3">
                            <label>Devise de la caution:</label>
                            <select class="form-control form-control-sm select" required name="deposit_currency">
                                @foreach (config('payment.currency') as $val)
                                    <option value="{{ $val }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label>Commentaires:</label>
                            <textarea class="form-control" rows="6" name="comments"></textarea>
                        </div>
                    </div>

                    <div class="form-group hidden">
                        <input type="hidden" name="is_local" value="1">
                    </div>

                    <div class="form-group row">
                        <button type="submit" id="submitBox" class="btn btn-success spinner-action">
                            <i class="icon-paperplane"></i> Ajouter
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="alert alert-danger d-none" role="alert" id="error">
        </div>
    </div>

    <script>
        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 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];
        }

        // Function to hide loader
        function hideLoader() {
            $('.spinner-border').addClass('d-none');
            $('body').css('opacity', '1');
            $('body').css('pointer-events', 'auto');
        }

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

    </script>
@endsection