<!-- jQuery UI -->

<script src="plugins/jquery-ui/jquery-ui.min.js"></script>



<!-- Resolve jQuery UI & Bootstrap tooltip conflict -->

<script>

    $.widget.bridge('uibutton', $.ui.button);

</script>



<!-- Bootstrap 4 Bundle (includes Popper) -->

<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>



<!-- Select2 (local) -->

<script src="dist/js/select2.min.js"></script>



<!-- SweetAlert2 (local) -->

<script src="plugins/sweetalert2/sweetalert2.min.js"></script>



<!-- Tailwind CSS (local) -->

<script src="dist/js/tailwind.min.js"></script>



<!-- FullCalendar (local) -->

<script src="plugins/fullcalendar/main.min.js"></script>

<script src="plugins/fullcalendar/locales-all.min.js"></script>



<!-- Moment.js (Required for date/time plugins) -->

<script src="plugins/moment/moment.min.js"></script>



<!-- Date Range Picker -->

<script src="plugins/daterangepicker/daterangepicker.js"></script>



<!-- Tempusdominus Bootstrap 4 -->

<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>



<!-- overlayScrollbars -->

<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>



<!-- ChartJS (local) -->

<script src="plugins/chart.js/Chart.min.js"></script>



<!-- DataTables -->

<script src="plugins/datatables/jquery.dataTables.min.js"></script>

<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>

<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>

<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>



<!-- Sparkline -->

<script src="plugins/sparklines/sparkline.js"></script>



<!-- JQVMap -->

<script src="plugins/jqvmap/jquery.vmap.min.js"></script>

<script src="plugins/jqvmap/maps/jquery.vmap.usa.js"></script>



<!-- jQuery Knob Chart -->

<script src="plugins/jquery-knob/jquery.knob.min.js"></script>



<!-- Summernote -->

<script src="plugins/summernote/summernote-bs4.min.js"></script>



<!-- AdminLTE Core -->

<script src="dist/js/adminlte.js"></script>



<!-- DataTables Initialization -->

<script>

    $(function () {

        $("#example1").DataTable({

            "responsive": true,

            "autoWidth": false,

        });

        $("#example11").DataTable({

            "responsive": true,

            "autoWidth": false,

        });

        $('#example2').DataTable({

            "paging": true,

            "lengthChange": false,

            "searching": false,

            "ordering": true,

            "info": true,

            "autoWidth": false,

            "responsive": true,

        });



    });

</script>



<!-- ChartJS Data Fetching & Initialization -->

<script>

    document.addEventListener("DOMContentLoaded", function () {

        // 1. FULLCALENDAR INITIALIZATION

        let calendarEl = document.getElementById('calendar');

        if (calendarEl) {

            let calendar = new FullCalendar.Calendar(calendarEl, {

                initialView: 'dayGridMonth',

                headerToolbar: {

                    left: 'prev,next',

                    center: 'title',

                    right: 'today'

                },

                // --- Size Adjustments ---

                height: 'auto',        // Calendar only takes necessary vertical space

                contentHeight: 'auto',

                aspectRatio: 1.8,      // Higher number = shorter calendar

                handleWindowResize: true,

                events: 'fetch_events.php',

                eventColor: '#3b82f6', // blue-500

                eventDidMount: function (info) {

                    let tooltip = document.createElement('div');

                    tooltip.innerHTML = info.event.title;

                    tooltip.className = 'event-tooltip';

                    document.body.appendChild(tooltip);



                    info.el.addEventListener('mouseover', (e) => {

                        tooltip.style.display = 'block';

                        tooltip.style.left = e.pageX + 10 + 'px';

                        tooltip.style.top = e.pageY + 10 + 'px';

                    });



                    info.el.addEventListener('mouseout', () => {

                        tooltip.style.display = 'none';

                    });

                }

            });

            calendar.render();

        } // end if (calendarEl)



        // 2. CHART DATA FETCHING

        if (document.getElementById('paymentsPieChart') || document.getElementById('studentsBarChart') || document.getElementById('monthlyPaymentsChart')) {

            fetch("fetch_chart_data.php")

                .then(response => response.json())

                .then(data => {

                    const chartOptions = {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                display: true,

                                position: 'bottom',

                                labels: { usePointStyle: true, font: { weight: '600', size: 11 } }

                            }

                        }

                    };



                    // DOUGHNUT - Payments Status

                    new Chart(document.getElementById('paymentsPieChart'), {

                        type: 'doughnut',

                        data: {

                            labels: ['Approved', 'Pending', 'Disapproved'],

                            datasets: [{

                                data: [data.approved, data.pending, data.disapproved],

                                backgroundColor: ['#10b981', '#f59e0b', '#f43f5e'],

                                borderWidth: 0,

                                hoverOffset: 8,

                                borderRadius: 4

                            }]

                        },

                        options: {

                            ...chartOptions,

                            cutout: '72%',

                            plugins: {

                                ...chartOptions.plugins,

                                legend: {

                                    display: true,

                                    position: 'bottom',

                                    labels: { usePointStyle: true, pointStyle: 'circle', padding: 14, font: { size: 11, weight: '600' } }

                                }

                            }

                        }

                    });



                    // BAR - Student Registrations

                    new Chart(document.getElementById('studentsBarChart'), {

                        type: 'bar',

                        data: {

                            labels: ['Total Students', 'New This Month'],

                            datasets: [{

                                label: 'Students',

                                data: [data.total_students, data.new_students],

                                backgroundColor: ['rgba(99,102,241,0.85)', 'rgba(129,140,248,0.85)'],

                                borderRadius: 10,

                                borderSkipped: false,

                                barThickness: 36

                            }]

                        },

                        options: {

                            ...chartOptions,

                            scales: {

                                y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' }, ticks: { font: { size: 10 } } },

                                x: { grid: { display: false }, ticks: { font: { size: 10, weight: '600' } } }

                            }

                        }

                    });



                    // BAR - Monthly Revenue Trend

                    new Chart(document.getElementById('monthlyPaymentsChart'), {

                        type: 'bar',

                        data: {

                            labels: data.months.map(m => m.substring(0, 3)),

                            datasets: [{

                                label: 'Revenue (₦)',

                                data: data.payment_totals,

                                backgroundColor: data.payment_totals.map((_, i) =>

                                    i === data.payment_totals.length - 1

                                        ? '#3b82f6'

                                        : 'rgba(59,130,246,0.18)'

                                ),

                                hoverBackgroundColor: '#3b82f6',

                                borderRadius: 8,

                                borderSkipped: false,

                                barPercentage: 0.6,

                                categoryPercentage: 0.7

                            }]

                        },

                        options: {

                            ...chartOptions,

                            scales: {

                                y: {

                                    beginAtZero: true,

                                    grid: { color: 'rgba(0,0,0,0.04)' },

                                    ticks: {

                                        font: { size: 10 },

                                        callback: v => v >= 1000 ? '₦' + (v / 1000).toFixed(0) + 'k' : '₦' + v

                                    }

                                },

                                x: {

                                    grid: { display: false },

                                    ticks: {

                                        font: { size: 9, weight: '600' },

                                        autoSkip: false,

                                        maxRotation: 45,

                                        minRotation: 45

                                    }

                                }

                            }

                        }

                    });

                })

                .catch(error => console.error('Error:', error));

        } // end chart guard

    });

</script>



<script>

    setInterval(() => {

        fetch('includes/keepalive.php?tab_id=<?php echo htmlspecialchars($_GET['tab_id']); ?>');

    }, 5 * 60 * 1000); // every 5 minutes

</script>