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

@section('content')
    @include('planning.header')
    <div x-data="{ tab: 'checkin' }">
        <div class="space-y-6 p-3">
            <!-- Tabs -->
            <div class="tailwind-scope">

                <div class="flex flex-wrap items-start gap-8 mb-3 border-b border-gray-[#E2E9FC]">
                    <button class="px-8 py-2 text-sm font-medium focus:outline-none  " :class="tab === 'checkin' ? 'border-b-4 border-[#31B08F] text-[#212633] font-extrabold' : 'text-[#8E9ABB] '" @click="tab = 'checkin'">
                        Checkin
                    </button>
                    <button class=" px-8 py-2 text-sm font-medium focus:outline-none  " :class="tab === 'checkout' ? 'border-b-4 border-[#31B08F] text-[#212633] font-extrabold' : 'text-[#8E9ABB] '"
                        @click="tab = 'checkout'">
                        Checkout
                    </button>
                    <button class=" px-8 py-2 text-sm font-medium focus:outline-none  " :class="tab === 'cleanning' ? 'border-b-4 border-[#31B08F] text-[#212633] font-extrabold' : 'text-[#8E9ABB] '"
                        @click="tab = 'cleanning'">
                        Cleanning
                    </button>
                </div>
            </div>

            <!-- Tab Contents -->
            <div x-show="tab === 'checkin'" class="transition tailwind-scope">
                <div class="flex w-full gap-6 justify-between flex-wrap">
                    @include('planning.partials._checkin-calendar')
                </div>
            </div>

            <div x-show="tab === 'checkout'" class="transition tailwind-scope">
                <div class="flex w-full gap-6 justify-between flex-wrap">
                    @include('planning.partials._checkout-calendar')
                </div>
            </div>

            <div x-show="tab === 'cleanning'" class="transition tailwind-scope">
                <div class="flex w-full gap-6 justify-between flex-wrap">
                    @include('planning.partials._cleanning-calendar')
                </div>
            </div>
        </div>
    </div>

    <div class="modal"></div>
    <script>
        $(document).ready(function () {
            $('#calendar-checking').fullCalendar({
                locale: 'fr',
                events: {!! json_encode($checkingEvents) !!},
                eventOverlap: function (stillEvent, movingEvent) {
                    return stillEvent.allDay && movingEvent.allDay;
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek'
                },
                eventRender: function (event, element) {
                    element.find('.fc-time').remove(); // Remove default time if not needed

                    const customNumberDiv = $('<div class="custom-number"></div>').text(event.platform).css({
                        'color': event.borderColor,
                        'border-left': '4px solid ' + event.borderColor,
                    });
                    element.append(customNumberDiv);
                    element.css('background-color', event.color);
                    element.css({
                        'border-top': '4px solid ' + event.borderColor
                    });
                    if (event.isVerif == 'Oui') {
                        element.append('<div class="verif-icon"><i class="fa-solid fa-circle-check"></i></div>');
                    }

                },
                eventClick: function (event) {

                    const reservationId = event.id;
                    const guest = event.extendedProps.guest;
                    const phone = event.extendedProps.phone;

                    const platform = event.platform;
                    // call this endpoint to open the modal planning.modal
                    $.ajax({
                        url: '/planning/modal/' + reservationId,
                        method: 'GET',
                        success: function (data) {
                            // Populate modal with data
                            $('#reservationModal .modal-body').html(data);
                            $('#reservationModal .reservation-id').text(reservationId);

                            $('#reservationModal .guest-name').text(guest);
                            $('#reservationModal .guest-phone').text(phone);
                            $('#reservationModal .platform').text(platform);
                            $('#reservationModal #action').val('Checkin');
                            // Show modal
                            $('#reservationModal').modal('show');
                        },
                        error: function (error) {
                            console.error('Error fetching reservation data:', error);
                        }
                    });


                }

            });

            $('#calendar-checkout').fullCalendar({
                locale: 'fr',
                events: {!! json_encode($checkoutEvents) !!},
                slotEventOverlap: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek'
                },
                eventRender: function (event, element) {
                    element.find('.fc-time').remove(); // Remove default time if not needed

                    const customNumberDiv = $('<div class="custom-number"></div>').text(event.platform).css({
                        'color': event.borderColor,
                        'border-left': '4px solid ' + event.borderColor,
                    });
                    element.append(customNumberDiv);
                    element.css('background-color', event.color);
                    element.css({
                        'border-top': '4px solid ' + event.borderColor
                    });
                    if (event.isVerif == 'Oui') {
                        element.append('<div class="verif-icon"><i class="fa-solid fa-circle-check"></i></div>');
                    }

                },
                eventClick: function (event) {

                    const reservationId = event.id;
                    const guest = event.extendedProps.guest;
                    const phone = event.extendedProps.phone;
                    const platform = event.platform;
                    const action = 'checkin';
                    // call this endpoint to open the modal planning.modal
                    $.ajax({
                        url: '/planning/modal/' + reservationId,
                        method: 'GET',
                        success: function (data) {
                            // Populate modal with data
                            $('#reservationModal .modal-body').html(data);
                            $('#reservationModal .reservation-id').text(reservationId);
                            $('#reservationModal .guest-name').text(guest);
                            $('#reservationModal .guest-phone').text(phone);
                            $('#reservationModal .platform').text(platform);
                            $('#reservationModal #action').val('Checkout');

                            // Show modal
                            $('#reservationModal').modal('show');
                        },
                        error: function (error) {
                            console.error('Error fetching reservation data:', error);
                        }
                    });


                }

            });
            $('#calendar-cleanning').fullCalendar({
                locale: 'fr',
                events: {!! json_encode($midStayCleaningEvents) !!},

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek'
                },
                eventRender: function (event, element) {
                    element.find('.fc-time').remove(); // Remove default time if not needed

                    const customNumberDiv = $('<div class="custom-number"></div>').text(event.platform).css({
                        'color': event.borderColor,
                        'border-left': '4px solid ' + event.borderColor,
                    });
                    element.append(customNumberDiv);
                    element.css('background-color', event.color);
                    element.css({
                        'border-top': '4px solid ' + event.borderColor
                    });
                    if (event.isVerif == 'Oui') {
                        element.append('<div class="verif-icon"><i class="fa-solid fa-circle-check"></i></div>');
                    }
                },
                eventClick: function (event) {

                    const reservationId = event.id;
                    const guest = event.extendedProps.guest;
                    const phone = event.extendedProps.phone;
                    const platform = event.platform;
                    // call this endpoint to open the modal planning.modal
                    $.ajax({
                        url: '/planning/modal/' + reservationId,
                        method: 'GET',
                        success: function (data) {
                            // Populate modal with data
                            $('#reservationModal .modal-body').html(data);
                            $('#reservationModal .reservation-id').text(reservationId);
                            $('#reservationModal .guest-name').text(guest);
                            $('#reservationModal .guest-phone').text(phone);
                            $('#reservationModal .platform').text(platform);
                            $('#reservationModal #action').val('Cleanning');
                            // Show modal
                            $('#reservationModal').modal('show');
                        },
                        error: function (error) {
                            console.error('Error fetching reservation data:', error);
                        }
                    });


                }
            });
        });

    </script>
    @include('planning.new-styles')
    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détails de planning</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>

            </div>
        </div>
    </div>
    {{-- Modal for reservation details --}}
    {{-- <div class="modal fade
                                                                                                    {{-- @include('planning.details-modal') --}}
@endsection