<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-calendar me-2"></i><?= lang('facilities.booking_calendar') ?>: <?= e($facility['name_en']) ?></h5>
        <?php if (auth_can('bookings.create')): ?>
        <a href="/bookings/create" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i>New Booking</a>
        <?php endif; ?>
    </div>
    <div class="card-body">
        <div id="booking-calendar" style="min-height: 600px;"></div>
    </div>
</div>

<?php $__view->push('styles') ?>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css" rel="stylesheet">
<?php $__view->endPush() ?>

<?php $__view->push('scripts') ?>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calEl = document.getElementById('booking-calendar');
    var calendar = new FullCalendar.Calendar(calEl, {
        initialView: 'timeGridWeek',
        headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },
        slotMinTime: '<?= e($facility['operating_hours_start'] ?? '06:00:00') ?>',
        slotMaxTime: '<?= e($facility['operating_hours_end'] ?? '23:00:00') ?>',
        slotDuration: '00:30:00',
        allDaySlot: false,
        direction: '<?= is_rtl() ? 'rtl' : 'ltr' ?>',
        events: {
            url: '/api/bookings/calendar/<?= $facility['id'] ?>',
            method: 'GET',
            failure: function() { Swal.fire('Error', 'Failed to load bookings', 'error'); }
        },
        eventClick: function(info) {
            var props = info.event.extendedProps;
            Swal.fire({
                title: info.event.title,
                html: '<table class="table table-sm text-start">' +
                    '<tr><td><strong>Booking #</strong></td><td>' + (props.booking_number||'-') + '</td></tr>' +
                    '<tr><td><strong>Member</strong></td><td>' + (props.member||'-') + '</td></tr>' +
                    '<tr><td><strong>Status</strong></td><td>' + (props.status||'-') + '</td></tr>' +
                    '<tr><td><strong>Type</strong></td><td>' + (props.type||'-') + '</td></tr>' +
                    '</table>',
                confirmButtonText: 'Close'
            });
        },
        height: 'auto',
    });
    calendar.render();
});
</script>
<?php $__view->endPush() ?>