@include('components.calendar-styles')


<div class="tab-pane fade show active" id="calendar-page" role="tabpanel">

    <div class="ui-card ui-card--table">
        <div class="calendar-shell">
            <div id="calendar"></div>
        </div>
    </div>


    <!-- Event Details Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">Event Details</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="eventModalBody">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Optional: SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>




<script>
    // Flatpickr setup
    function getDatePicker(receiveID) {
        flatpickr(receiveID, {
            enableTime: true,
            dateFormat: "d/m/Y H:i",
        });
    }

    getDatePicker("#startDate");
    getDatePicker("#endDate");
    getDatePicker("#editstartDate");
    getDatePicker("#editendDate");




    document.addEventListener('DOMContentLoaded', function () {
        const calendarEl = document.getElementById('calendar');

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            buttonText: {
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day: 'Day',
                list: 'List'
            },
            events: function (fetchInfo, successCallback, failureCallback) {
                const type = new URLSearchParams(window.location.search).get('type') || '';
                const search = new URLSearchParams(window.location.search).get('search') || '';
                $.ajax({
                    url: '/students/events/{{ $student->id }}',
                    method: 'GET',
                    data: {
                        type: type,
                        search: search
                    },
                    success: function (data) {
                        successCallback(data.events);
                    },
                    error: function (error) {
                        failureCallback(error);
                    }
                });
            },
            eventClick: function (info) {
                const props = info.event.extendedProps;
                const routeMeetingUrl = props.schedule_id && props.session_id
                    ? `{{ route('courses.sessions.bbb.join', ['course' => '__COURSE__', 'session' => '__SESSION__']) }}`
                        .replace('__COURSE__', props.schedule_id)
                        .replace('__SESSION__', props.session_id)
                    : '';
                const meetingUrl = props.bbb_join_url || props.meeting_url || routeMeetingUrl;
                const safeMeetingUrl = meetingUrl
                    ? String(meetingUrl).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                    : '';
                let trackLabel = 'Program:';
                let categoryLabel = 'Category:';
                let url = '/course/';
                if (props.schedule_type !== 'track') {
                    trackLabel = 'Product:';
                    categoryLabel = 'Category Product:';
                    url = '/course/';
                }

                const htmlContent = `
                        <table class="table table-bordered table-sm table bordered-table sm-table mb-0 text-center">
                            <thead>
                                <tr>
                               
                                    <th class="text-center">Start</th>
                                    <th class="text-center">End</th>
                                    <th class="text-center">${categoryLabel}</th>
                                 <th class="text-center">${trackLabel}</th>
                                 <th class="text-center">Program Type</th>
                                 <th class="text-center">Session Link</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>${info.event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
                                    <td>${info.event.end ? info.event.end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}</td>
                                     <td>${props.category_id || ''}</td>
                                     <td>${props.track_id || ''}</td>                               
                                     <td>${props.track_type || ''}</td>   
                                     <td>
                                        ${safeMeetingUrl ? `<a href="${safeMeetingUrl}" target="_blank" class="btn btn-sm btn-outline-success">Join Meeting</a>` : '<span class="text-muted small">N/A</span>'}
                                     </td>
                                </tr>
                            </tbody>
                        </table>
                    `;

                document.getElementById('eventModalBody').innerHTML = htmlContent;

                const myModal = new bootstrap.Modal(document.getElementById('eventModal'));
                myModal.show();
            },
            eventContent: function (arg) {
                const startTime = arg.event.start.toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
                const endTime = arg.event.end.toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
                const title = `${arg.event._def.extendedProps.track_id} ${startTime}`;
                const color = arg.event._def.ui.borderColor || 'blue';
                return {
                    html: `<div class="text-center text-primary px-3">
                            <div class="col">${startTime}, L${arg.event._def.extendedProps.level_number}, S${arg.event._def.extendedProps.session_number}, 
                                </div><div class="col">${arg.event._def.extendedProps.staff}</div>
                            </div>
                        `
                };
            }
        });
        document.querySelectorAll('.btn-filter').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const type = this.getAttribute('data-type') || '';
                const search = new URLSearchParams(window.location.search).get('search') || '';
                const newUrl = new URL(window.location);
                if (type) {
                    newUrl.searchParams.set('type', type);
                } else {
                    newUrl.searchParams.delete('type');
                }
                window.history.pushState({}, '', newUrl);
                calendar.getEvents().forEach(event => event.remove());
                calendar.refetchEvents();
                document.querySelectorAll('.btn-filter').forEach(btn => {
                    btn.classList.remove('btn-outline-secondary');
                    btn.classList.add('btn-outline-secondary');
                });
                this.classList.remove('btn-outline-secondary');
                this.classList.add('btn-outline-secondary');
            });
        });
        calendar.render();
    });
</script>