@extends('admin.layouts.dashboard')
@section('title', 'My Calendar')

@push('head')
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* General Modal Styling */
        .fc .fc-timegrid-slot {
            height: 7.5em;
            border-bottom: 0;
        }

        hr {
            margin-top: 0rem;
            margin-bottom: 0.5rem;
        }

        /* Styling for the table */
        .calendar-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .calendar-table th,
        .calendar-table td {
            border: 1px solid #ddd;
            vertical-align: top;
            position: relative;
            padding: 5px;
        }

        .time-column {
            background-color: #f8f9fa;
            text-align: right;
            font-size: 12px;
            color: #666;
            width: 100px;
        }

        .gmt-header {
            background-color: #f8f9fa;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
        }

        .date-header {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .event-card {
            background-color: #e6f7ff;
            border: 1px solid #b3d7ff;
            border-radius: 5px;
            padding: 5px;
            font-size: 12px;
            margin-bottom: 5px;
            overflow-wrap: break-word;
            cursor: pointer;
            color: black;
            word-wrap: break-word; /* Ensure long words break into multiple lines */
            white-space: normal; /* Allow text to wrap to the next line */
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            min-height: 50px; /* Minimum height to prevent text overflow */
        }

        .event-card:hover {
            background-color: #cceeff;
        }

        .fc-event {
            background-color: transparent !important; /* Blue background ko transparent banaye */
            border: none !important; /* Border bhi hata de */
            box-shadow: none !important; /* Shadow bhi remove kar de */
        }

        .fc-event, .fc-daygrid-event {
            width: auto !important; /* Auto width so events align side-by-side */
            min-width: 120px; /* Ensure minimum width */
            max-width: 100%; /* Prevent overflow */
            white-space: normal !important; /* Ensure text wrapping */
        }

        .event-card:hover {
            background-color: #cceeff;
        }

        .fc-timegrid-event {
            width: 100% !important; /* Full Width */
            display: block; /* Ensure it Stacks */
            position: relative;
        }

        .fc-timegrid-event-harness {
            width: 100% !important;
        }

        button.fc-today-button.btn {
            display: none;
        }

    </style>
    <script>
        // Initialize popovers for event cards
        document.querySelectorAll('[data-bs-toggle="popover"]').forEach((el) => {
            new bootstrap.Popover(el, {html: true});
        });
    </script>
@endpush
@section('content')
    <div id='calendar'></div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.addEventListener('click', async (event) => {
                if (event.target.hasAttribute('data-action') && event.target.hasAttribute('data-appointment-id')) {
                    if (event.target.getAttribute('data-action') === 'approve') {
                        const appointmentId = event.target.dataset.appointmentId;

                        try {
                            showLoader()
                            const response = await fetch('/admin/booking/approve', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    booking_id: appointmentId
                                })
                            });

                            if (!response.ok) {
                                throw new Error('Network response was not ok.');
                            }

                            const jsonResponse = await response.json();
                            const successMessage = 'Appointment approved successfully.';
                            const errorMessage = 'An error occurred while approving the appointment.';
                            const message = jsonResponse.message || (jsonResponse.success ? successMessage : errorMessage);
                            alert(message);

                            if (jsonResponse.success) {
                                event.target.closest('.action-buttons').innerHTML = `<button class="btn btn-sm btn-success" title="Confirmed">Confirmed ✔️</button>`;
                            }
                        } catch (error) {
                            alert(error.message || 'An unexpected error occurred while approving the appointment.');
                        } finally {
                            hideLoader();
                        }
                    } else if (event.target.getAttribute('data-action') === 'cancel') {
                        const appointmentId = event.target.dataset.appointmentId;

                        try {
                            showLoader();
                            const response = await fetch('/admin/booking/cancel', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    booking_id: appointmentId
                                })
                            });

                            if (!response.ok) {
                                throw new Error('Network response was not ok.');
                            }

                            const jsonResponse = await response.json();
                            const successMessage = 'Appointment cancelled successfully.';
                            const errorMessage = 'An error occurred while cancelling the appointment.';
                            const message = jsonResponse.message || (jsonResponse.success ? successMessage : errorMessage);
                            alert(message);

                            if (jsonResponse.success) {
                                event.target.closest('.event-card').remove();
                            }
                        } catch (error) {
                            alert(error.message || 'An unexpected error occurred while cancelling the appointment.');
                        } finally {
                            hideLoader();
                        }
                    }
                }
            });

            async function rescheduleTask(info, remark = null) {
                if (confirm("Are you sure about this change?")) {
                    try {
                        let response = await fetch('/appointment/reschedule', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                id: info.event.id,
                                start: info.event.start.toISOString(),
                                end: info.event.end?.toISOString() ?? null,
                                remark: remark ?? null
                            })
                        });

                        let data = await response.json();

                        if (data.success) {
                            const message = data.message || 'Event updated successfully';

                            const dataElement = info.el.querySelector('.date');
                            if (dataElement && data.data?.date) {
                                dataElement.textContent = data.data.date;
                            }else{
                                console.warn('No element.');
                            }

                            if(info.view.calendar){
                                info.view.calendar.refetchEvents();
                            }
                            alert(message);
                        } else {
                            const message = data.message || 'There was an error updating the event';
                            alert(message);
                            throw new Error(message);
                        }
                    } catch (error) {
                        throw new Error(error);
                    }
                } else {
                    throw new Error('User cancelled the operation');
                }
            }


            const calendarEl = document.getElementById('calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridDay',
                themeSystem: "bootstrap",
                expandRows: true,
                eventMaxStack: true,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                slotDuration: '00:30:00', // 30-minute slots
                slotMinTime: '10:00:00',
                slotMaxTime: '18:00:00',
                events: '/appointments',
                height: "auto",      // Calendar height will auto adjust
                contentHeight: "auto",
                slotEventOverlap: false,
                eventOverlap: true, // Prevent events from overlapping
                eventDisplay: 'list-item', // Display events in list format
                nowIndicator: true,  // Shows the current time line
                eventOrder: "start,-duration,title", // Sort events by time
                businessHours: {
                    daysOfWeek: [1, 2, 3, 4, 5, 6], // Sunday (0) excluded
                    startTime: '10:00',
                    endTime: '17:00'
                },
                editable: true,
                eventDrop: async function (info) {
                    let eventsCache;
                    try {
                        await rescheduleTask(info);
                        eventsCache = {};
                    } catch (error) {
                        info.revert();
                    }
                },

                eventResize: async function (info) {
                    // This function will be called when an event is resized (i.e., the end date/time is changed).
                    // You can use this function to update the event in your database.

                    try {
                        await rescheduleTask(info);
                        eventsCache = {};
                    } catch (error) {
                        info.revert();
                    }
                },
                selectable: true, // Allow date/time selection
                selectAllow: function (selectInfo) {
                    var selectedDate = selectInfo.start;
                    if (selectedDate.getDay() === 0) { // Disable Sundays (0 = Sunday)
                        return false;
                    }
                    return true;
                },
                dayCellDidMount: function (info) {
                    if (info.date.getDay() === 0) { // Disable clicks on Sundays
                        info.el.style.pointerEvents = 'none';
                        info.el.style.backgroundColor = '#f8d7da'; // Light background color for Sundays
                    }
                },
                // Build the event content without inline onclick handlers.
                eventContent: function (arg) {
                    const price = arg.event.extendedProps.price;
                    const displayPrice = price == 0 ? "Free" : `$${price}`;

                    const eventProps = arg.event.extendedProps;

                    // Render action buttons based on booking status
                    let actionButtonHtml = '';
                    if (!eventProps.approved_at) {
                        actionButtonHtml = `<button class="btn btn-sm btn-success confirm-btn" title="Confirm" data-appointment-id="${eventProps.id}" data-action="approve">✔️</button>
                                            <button class="btn btn-sm btn-danger cancel-btn" title="Cancel" data-appointment-id="${eventProps.id}" data-action="cancel">✖️</button>`;
                    } else{
                        actionButtonHtml = `<button class="btn btn-sm btn-success" title="Confirmed">Confirmed ✔️</button>`;
                    }

                    return {
                        html: `
          <div class="event-card" data-bs-toggle="popover" title="${eventProps.name}">
            <strong>${eventProps.item}</strong><br>
            <strong>Date:</strong> <span class="date">${eventProps.date || 'NA'}</span><br>
            <strong>Time:</strong> ${eventProps.time || 'NA'}<br>
            <strong>Phone:</strong> ${eventProps.phone || 'NA'}<br>
            <strong>Price:</strong> ${displayPrice}<br>
            <strong>Email:</strong> ${eventProps.email || 'NA'}<br>
            ${eventProps.event_type ? `<strong>Event Type:</strong> ${eventProps.event_type}<br>` : ''}
            ${eventProps.event_date ? `<strong>Event Date:</strong> ${new Date(eventProps.event_date).toLocaleDateString('en-US', {
                            day: '2-digit',
                            month: 'short',
                            year: '2-digit'
                        })}<br>` : ''}
            <div class="action-buttons d-flex gap-2" style="margin-top: 5px;">
              ${actionButtonHtml}
            </div>
          </div>
        `
                    };
                },
                // Attach native event listeners after the event element has been mounted.
                eventDidMount: function (info) {
                    // Ensure the event element takes full width.
                    info.el.style.width = "100%";

                    // Attach listener for the confirm button, if it exists.
                    // const confirmBtn = info.el.querySelector('.confirm-btn');
                    // if (confirmBtn) {
                    //     confirmBtn.addEventListener('click', function (e) {
                    //         e.stopPropagation();  // Prevent triggering the eventClick handler
                    //         confirmBooking(info.event.id);
                    //     });
                    // }
                    //
                    // // Attach listener for the cancel button, if it exists.
                    // const cancelBtn = info.el.querySelector('.cancel-btn');
                    // if (cancelBtn) {
                    //     cancelBtn.addEventListener('click', function (e) {
                    //         e.stopPropagation();
                    //         cancelBooking(info.event.id);
                    //     });
                    // }

                    // Optional: Initialize popover (if you're using Bootstrap's popovers)
                    const popoverTrigger = info.el.querySelector('[data-bs-toggle="popover"]');
                    if (popoverTrigger) {
                        new bootstrap.Popover(popoverTrigger, {html: true});
                    }
                },
                // Optional: Additional event click handling for the whole event element.
                eventClick: function (info) {
                    // You can handle general event clicks here if needed.
                }
            });

            calendar.render();
        });

        window.addEventListener('resize', function () {
            calendar.updateSize(); // Resize on window change
        });


    </script>
    <script>
    </script>
@endpush