<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Favicon -->
    <link href="<?= base_url('assets/images/favicon.ico') ?>" rel="icon">
    <link rel="stylesheet" href="<?= base_url('assets/css/custom.css') ?>">
</head>

<body>
    <?php include(__DIR__ . '/partials/header.php'); ?>
    <?php include(__DIR__ . '/partials/navbar.php'); ?>
    <div class="container-fluid">
        <div class="main-content">
            <div id="calendar-container">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
    <?php include(__DIR__ . '/partials/footer.php'); ?>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
        const isMobile = window.innerWidth <= 576;

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: isMobile ? 'listWeek' : 'dayGridMonth',
            height: 'auto',
            contentHeight: 'auto',
            expandRows: true,
            events: <?= json_encode($events) ?>,

            eventDidMount: function(info) {
                if (info.event.extendedProps.description) {
                    $(info.el).tooltip({
                        title: info.event.extendedProps.description,
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                }
            },

            eventContent: function(arg) {
                const event = arg.event;
                const bg = event.extendedProps.backgroundColor || '#3788d8';
                return {
                    html: `
                    <div style="
                        background-color: ${bg};
                        padding: 4px;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 0.8rem;
                        text-align: center;">
                        ${event.title}
                    </div>`
                };
            },

            windowResize: function(view) {
                if (window.innerWidth <= 576 && calendar.view.type !== 'listWeek') {
                    calendar.changeView('listWeek');
                } else if (window.innerWidth > 576 && calendar.view.type !== 'dayGridMonth') {
                    calendar.changeView('dayGridMonth');
                }
                calendar.updateSize();
            }
        });

        calendar.render();
        window.calendar = calendar;
    });
    </script>


</body>

</html>