@extends('layout')

@inject('carbon', 'Carbon\Carbon')
@inject('recovrey', 'App\Models\Recovrey')

@section('content')
    <div class=" page-header-light">

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

            <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>
        @include('reservation._search')
    </div>

    <div class="content">

        {{-- <a href="{{ route('reservation-create') }}" class="btn btn-outline-success btn-sm pull-right mb-3">
            <i class="icon-add mr-1"></i>Ajouter une nouvelle réservation
        </a> --}}


        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="d-flex mt-2">

            <a href="{{ route('reservation-create') }}" class="button button-success ml-auto">
                <i class="fa-solid fa-plus mr-2"></i>Ajouter une nouvelle réservation
            </a>
        </div>
        <table class="table  nowrap table-responsive">
            <thead>
                <tr>
                    <th>Date de création</th>
                    <th>Source</th>
                    <th>Statut</th>
                    <th class="wider-column">Logement</th>
                    <th>Client</th>
                    <th>Etat de paiement</th>
                    <th>Date début</th>
                    <th>Date fin</th>
                    <th>Nuits</th>
                    <th>N° Contrat</th>
                    <th class="wide-column">Montant</th>
                    <th class="wide-column">Reste à payer</th>
                    <th class="wide-column">Editer par</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($reservations as $key => $item)
                    <tr class="alert alert-{{ $item->is_modify ? 'primary' : '' }}">
                        <td data-order="{{ $carbon::create($item->created_date)->toDateString() }}">
                            {{ $carbon::create($item->created_date)->format('d/m/Y') }}
                        </td>
                        <td>
                            @if(array_key_exists($item['creator'], config('creators.list')))
                                {{ config('creators.list')[$item['creator']] }}
                            @endif
                        </td>
                        <td>
                            {{ $reservationStatuses[$item->status_id] ?? '-' }}
                            @if($item->is_local)
                                (Locale)
                            @endif
                        </td>
                        <td>
                            @if(!is_null($item->getProperty()))
                                <a href="{{ route('property.show', $item->getProperty()->id) }}" style="color: #31b08f;">
                                    {{ $item->getProperty()->name }}
                                </a>
                            @endif
                        </td>
                        <td>
                            @if ($item->getClient() && $item->getClient()->id)
                                <a href="{{ route('client.edit', $item->getClient()->id) }}" class="dropdown-item">
                                    {{ $item->getClient()->l_name }} {{ $item->getClient()->f_name }}
                                </a>
                            @else
                                <span class="dropdown-item">
                                    {{ $item->guest_name }} {{ $item->guest_surname }}
                                </span>
                            @endif
                        </td>
                        <td>

                            @include('reservation.paid-modal')

                            @include('reservation.contract-extension-modal')
                            @include('reservation.cancel-modal')
                        </td>
                        <td data-order="{{ $carbon::create($item->check_in)->toDateString() }}">
                            {{ $carbon::create($item->check_in)->format('d/m/Y') }}
                        </td>
                        <td data-order="{{ $carbon::create($item->check_out)->toDateString() }}">
                            {{ $carbon::create($item->check_out)->format('d/m/Y') }}
                        </td>
                        <td class="text-center">
                            {{ $carbon::create($item->check_in)->diffInDays($item->check_out) }}
                        </td>
                        <td>
                            @if(count($item->extensions()))
                                @include('reservation.extensions-modal')
                            @endif
                            {{ $item->reservation_id }}
                        </td>
                        <td>

                            {{ number_format($item->getTotalPrice() + $item->getTotalExtensions(), 2, '.', ' ') }}
                            TND
                        </td>
                        <td>
                            {{ number_format($item->getLeftToPaid(), 2, '.', ' ') }}
                            TND
                        </td>
                        <td>
                            @if($item->last_editor)
                                @include('reservation.histories-modal')
                            @endif

                        </td>
                        <td class="text-center">
                            <div class="list-icons">
                                <div class="dropdown z-99">
                                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                                        <i class="icon-menu9"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="{{ route('reservation-edit', $item->id) }}"
                                            class="dropdown-item text-secondary">
                                            <i class="fa-solid fa-pencil"></i> Modifier
                                        </a>
                                        <button type="button" class="dropdown-item contract-extension text-secondary"
                                            value="{{ $item->property_id }}" content="{{ $item->reservation_id }}"
                                            data-toggle="modal" title="Payer"
                                            data-target="#contractExtensionModal-{{ $item->id }}" data-value="{{ $item->id }}">
                                            <i class="fa-solid fa-clock"></i> Prolongation du contrat
                                        </button>
                                        <a href="{{ route('sign.reservation.contrat', ['id' => \App\Services\IdEncoderService::encode($item->id)]) }}"
                                            target="_blank" class="dropdown-item text-secondary">
                                            <i class="fa-solid fa-link"></i> Ouvrir le lien du contrat
                                        </a>
                                        <a href="/printContrat/{{ $item->reservation_id }}"
                                            class="dropdown-item text-secondary">
                                            <i class="fa-solid fa-print"></i> Imprimer contrat
                                        </a>
                                        @if ($item->paid == 'Paid')
                                            <a href="/printPaymentReceipt/{{ $item->reservation_id }}" class="dropdown-item">
                                                <i class="icon-file-pdf"></i> Reçu de paiement
                                            </a>
                                        @endif
                                        <a href="{{ route('reservation-send-confirmation-mail', $item->reservation_id) }}"
                                            class="dropdown-item text-secondary">
                                            <i class="fa-solid fa-paper-plane"></i> Envoyer mail de confirmation
                                        </a>
                                        <a href="{{ route('reservation-send-mail-to-owner', $item->reservation_id) }}"
                                            class="dropdown-item text-secondary">
                                            <i class="fa-solid fa-paper-plane"></i> Envoyer mail au Proprietaire
                                        </a>
                                        @if(!$item->hasQuizResponse())
                                            <a href="{{ route('send-quiz', $item->id) }}" class="dropdown-item text-secondary">
                                                <i class="fa-solid fa-circle-question"></i> Envoyer un questionnaire
                                            </a>
                                        @endif
                                        @if (($reservationStatuses[$item->status_id] ?? '-') != 'Canceled')
                                            <button type="button" class="dropdown-item text-danger" data-toggle="modal"
                                                data-target="#cancelModal{{ $item->id }}">
                                                <i class="fa-solid fa-trash"></i> Annuler le contrat
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="swal2-container swal2-center swal2-fade swal2-shown" id="modal4"
            style="overflow-y: auto;display: none;">
            <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-show"
                tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;">

                <div class="swal2-content">
                    <div id="swal2-content" style="display: block;">Modification du prix</div>
                    <input class="swal2-input" style="display: none;">
                    <input type="file" class="swal2-file" style="display: none;">
                    <div class="swal2-range" style="display: none;">
                        <input type="range">
                        <output></output>
                    </div>
                    <select class="swal2-select" style="display: none;">
                    </select>
                    <div class="swal2-radio" style="display: none;"></div>
                    <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input
                            type="checkbox"></label>
                    <textarea class="swal2-textarea" style="display: none;"></textarea>
                    <div class="swal2-validationerror" id="swal2-validationerror" style="display: none;"></div>
                </div>
                <div class="swal2-actions"
                    style="display: flex;flex-wrap: nowrap; justify-content: space-evenly;flex-direction: column;">
                    <form action="/updatePayement" method="post">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Ancien Montant (en chiffre):</label>
                            <input type="number" step="any" disabled id="updatePayement_price_last"
                                name="updatePayement_price_last" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Nouveau Montant(en chiffre):</label>
                            <input type="number" step="any" required id="updatePayement_total_price"
                                name="updatePayement_total_price" class="form-control" placeholder="Nouveau Montant">
                        </div>
                        <div class="form-group">
                            <label>Currency:</label>
                            <select class="form-control form-control-sm select" required id="updatePayement_currency"
                                name="updatePayement_currency" data-fouc>
                                <option value="TND">TND</option>
                                <option value="EUR">EUR</option>
                                <option value="USD">USD</option>
                            </select>
                        </div>
                        <input type="text" style="visibility: hidden;" id="updatePayement_res_id"
                            name="updatePayement_res_id" class="form-control" placeholder="Ancien Montant Par Nuit">


                        <div class="form-group">
                            <label>Payé:</label>
                            <select class="form-control select-search" required id='updatePayement_paid'
                                name="updatePayement_paid" data-fouc>
                                <option value="pending">En attente</option>
                                <option value="Paid">Payé</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Mode de paiement:</label>
                            <select class="form-control select-search" required id='updatePayement_paidMode'
                                name="updatePayement_paidMode" data-fouc>
                                <option value="CHEQUE">CHÈQUE</option>
                                <option value="CASH">CASH</option>
                                <option value="VIREMENT">VIREMENT</option>
                                <option value="PAYMEE">PAYMEE</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn bg-blue ml-3">Enregistré <i
                                    class="icon-paperplane ml-2"></i></button>
                            {{-- <a href="/cancelContrat/" id="formcancel" class="swal2-confirm btn btn-primary"
                                aria-label="">Enregistré</a> --}}
                            <button type="button" class="swal2-cancel btn btn-light" onclick="closePayedModal();"
                                aria-label="" style="display: inline-block;">Annuler
                            </button>
                        </div>
                    </form>
                </div>
                <div class="swal2-footer" style="display: none;">
                </div>
            </div>
        </div>

    </div>
    <script>
        function closeDeleteModal() {
            document.getElementById("modal2").style.display = "none";
        }

        function dateToYMD(date) {
            var strArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var d = date.getDate();
            var m = strArray[date.getMonth()];
            var y = date.getFullYear();
            return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
        }

        function copyContratLink(id) {
            var host = "{{ request()->getSchemeAndHttpHost() }}"; // Get the host
            var copyText = host + '/signReservationContrat/' + id;
            navigator.clipboard.writeText(copyText);
        }

        function openPayedModal(res_id, total_price, currency, paid) {
            document.getElementById("modal4").style.display = "flex";

            document.getElementById("updatePayement_res_id").value = res_id;
            document.getElementById("updatePayement_price_last").value = total_price;
            document.getElementById("updatePayement_total_price").value = total_price;
            document.getElementById("updatePayement_currency").value = currency;
            document.getElementById("updatePayement_paid").value = paid;
        }

        function closePayedModal() {
            document.getElementById("modal4").style.display = "none";
        }

        function showLoader() {
            // Show the loader spinner
            $('.spinner-border').removeClass('d-none');
            // Reduce opacity of the entire body
            $('body').css('opacity', '0.3');
            // Disable user interactions with the body content
            $('body').css('pointer-events', 'none');
        }

        // 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
        $('.modal-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) {
                        hideLoader();
                        $('.alertDates').removeClass('d-none').html(response.error);
                    }
                    if (response.errors) {
                        hideLoader();
                        $.each(response.errors, function (index, value) {
                            // Handle each error message here
                            $('[name="' + value + '"]').addClass('alert-danger').attr('placeholder', 'Champ obligatoire!');
                        });
                    }
                    if (response.redirect) {
                        // Redirect to the specified URL
                        window.location.reload();
                    }

                    if (response.success === true) {
                        // Redirect to the specified URL
                        window.location.reload();
                    }
                },
                error: function (xhr, status, error) {
                    // Handle errors
                    console.error(xhr.responseText);
                }
            });
        });

        // Call the function on page load
        $('.contract-extension').click(function () {
            getBlockedDatesByProperty($(this).val(), $(this).attr('content'));
            getAmountByNight($(this).attr('content'));
        });

        // Function to get blocked dates by property
        function getBlockedDatesByProperty(propertyId, reservationId) {
            // 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) {
                // Last check out date
                var endStringDate = $('#last_check_out-' + reservationId).attr('content'); // Get the end date
                var endDate = new Date(endStringDate);

                if (response.message == 'isLocal') {
                    // Initialize startDate Datepicker
                    $('#startDate-' + reservationId).datepicker({
                        dateFormat: 'dd-mm-yy',
                        minDate: endDate,
                        beforeShowDay: function (date) {
                            // Disable days before the selected start date
                            return [date >= endDate];
                        }
                    });

                    // Initialize endDate Datepicker
                    $('#endDate-' + reservationId).datepicker({
                        dateFormat: 'dd-mm-yy',
                        minDate: endDate,
                        beforeShowDay: function (date) {
                            // Disable days before the selected start date
                            return [date >= endDate];
                        }
                    });
                } else {
                    var blockedDatesStart = response.startBlockedDates;
                    var blockedDatesEnd = response.endBlockedDates;

                    // Initialize startDate Datepicker
                    $('#startDate-' + reservationId).datepicker({
                        dateFormat: 'dd-mm-yy',
                        beforeShowDay: function (date) {
                            var dateString = $.datepicker.formatDate('yy-mm-dd', date);
                            return [!blockedDatesStart.includes(dateString)];
                        }
                    });

                    // Create a new date object based on endDate and add one day
                    var endDatePlusOne = new Date(endDate);
                    endDatePlusOne.setDate(endDatePlusOne.getDate() + 1);

                    // Initialize endDate Datepicker
                    $('#endDate-' + reservationId).datepicker({
                        dateFormat: 'dd-mm-yy',
                        minDate: endDatePlusOne,  // Set minDate to the new date (endDate + 1)
                        beforeShowDay: function (date) {
                            var dateString = $.datepicker.formatDate('yy-mm-dd', date);
                            return [!blockedDatesEnd.includes(dateString)];
                        }
                    });
                }
            });

        }

        // Function to get amount by night
        function getAmountByNight(reservationId) {
            $.ajax({
                url: '/calculate-amount-by-night',
                type: 'GET',
                data: { id: reservationId },
                success: function (response) {
                    // Update input fields with the calculated values
                    $('#amount_' + reservationId).attr('value', response);
                },
                error: function (xhr, status, error) {
                    // Handle error
                    console.error('Error:', error);
                }
            });
        }

        // Attach click event to buttons with class `load-history`
        $('.load-history').on('click', function () {
            const reservationId = $(this).data('id'); // Get the reservation ID from button data attribute
            const historyContent = $('#historyContent'); // Target content div in modal

            // Set loading message while fetching data
            historyContent.html('<p>Chargement des données...</p>');

            // Make AJAX request to fetch history data
            $.ajax({
                url: "{{ route('reservation.history') }}", // Ensure this route points to history data
                type: "GET",
                data: { reservation_id: reservationId }, // Send reservation ID as parameter
                success: function (response) {
                    // Populate modal with the returned data
                    historyContent.html(response);
                },
                error: function () {
                    historyContent.html('<p>Erreur de chargement des données.</p>');
                }
            });
        });

        // Attach click event to buttons with class `load-extension`
        $('.load-extension').on('click', function () {
            const reservationId = $(this).data('id'); // Get the reservation ID from button data attribute
            const extensionContent = $('#extensionContent'); // Target content div in modal

            // Set loading message while fetching data
            extensionContent.html('<p>Chargement des données...</p>');

            // Make AJAX request to fetch history data
            $.ajax({
                url: "{{ route('reservation.extension') }}", // Ensure this route points to history data
                type: "GET",
                data: { reservation_id: reservationId }, // Send reservation ID as parameter
                success: function (response) {
                    // Populate modal with the returned data
                    extensionContent.html(response);
                },
                error: function () {
                    extensionContent.html('<p>Erreur de chargement des données.</p>');
                }
            });
        });
    </script>
@endsection