<?= $this->extend('layout/main_layout') ?>
<?= $this->section('content') ?>
<div class="container-xxl py-2">
    <div class="container">
        <h3 class="text-center text-danger mt-4 mb-3" style="font-family: Arial, sans-serif;">
            Flip your phone for a zoomed out view of the calendar.
        </h3>

        <div class="d-flex align-items-center gap-3 mb-3">
            <strong>Legend:</strong>
            <span class="d-inline-flex align-items-center"><span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:#3788d8;border:1px solid rgba(0,0,0,.2);margin-right:6px"></span>General Event</span>
            <span class="d-inline-flex align-items-center"><span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:#ffc107;border:1px solid rgba(0,0,0,.2);margin-right:6px"></span>No School Day</span>
        </div>
        <div class="main-content">
            <div id="calendar-container">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
    <?= $this->endSection() ?>
    <?= $this->section('scripts') ?>
    <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>
    <?= $this->endSection() ?>