<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div class="container-xxl py-5">
    <div class="container">
        <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 && window.bootstrap && bootstrap.Tooltip) {
                        try {
                            new bootstrap.Tooltip(info.el, {
                                title: info.event.extendedProps.description,
                                placement: 'top',
                                trigger: 'hover',
                                container: 'body'
                            });
                        } catch (e) { /* no-op */ }
                    }
                },

                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() ?>
