<div class="page-title mb-4">
    <h5><i class="fas fa-calendar me-2 text-gold"></i>Calendar</h5>
</div>

<div class="glass-card p-0">
    <div class="card-header">
        <div class="card-header-left">
            <i class="fas fa-calendar-alt card-icon"></i>
            <h6 class="card-title">Appointment Calendar</h6>
        </div>
        <div class="card-header-right">
            <a href="<?= url('appointments') ?>" class="btn btn-sm btn-outline-gold me-2">
                <i class="fas fa-list me-1"></i>List View
            </a>
            <a href="<?= url('reception') ?>" class="btn btn-sm btn-outline-gold me-2">
                <i class="fas fa-clipboard-list me-1"></i>Reception
            </a>
            <?php if (can('appointments_create')): ?>
                <a href="<?= url('appointments/create') ?>" class="btn btn-sm btn-gold">
                    <i class="fas fa-plus me-1"></i>New Appointment
                </a>
            <?php endif; ?>
        </div>
    </div>
    <div class="card-body">
        <div id="calendar"></div>
    </div>
</div>

<?php ob_start(); ?>
const calendarEl = document.getElementById('calendar');
if (calendarEl) {
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        themeSystem: 'standard',
        slotMinTime: '08:00:00',
        slotMaxTime: '20:00:00',
        allDaySlot: false,
        height: 'auto',
        contentHeight: 600,
        events: {
            url: '<?= rtrim(APP_URL, '/') ?>/appointments/calendar/events',
            method: 'GET',
            failure: function() {
                console.error('Failed to load calendar events');
            }
        },
        eventClick: function(info) {
            if (info.event.url) {
                window.location.href = info.event.url;
                info.jsEvent.preventDefault();
            }
        },
        eventDidMount: function(info) {
            new bootstrap.Tooltip(info.el, {
                title: info.event.extendedProps.customer + ' - ' + info.event.extendedProps.services,
                placement: 'top',
                container: 'body'
            });
        }
    });

    calendar.render();
    window.appointmentCalendar = calendar;
}
<?php $inlineScripts = ob_get_clean();
?>
