<div class="d-flex justify-content-between align-items-center mb-3">
    <h3>Kalendář akcí</h3>
    <?php if ($user['role'] !== 'sportovec'): ?>
        <a href="<?= BASE_URL ?>/kalendar/pridat" class="btn btn-primary"><i class="ti ti-calendar-plus fs-4"></i></a>
    <?php endif; ?>
</div>

<style>
.fc-daygrid-event {
    overflow: hidden !important;
    max-width: 100% !important;
}
.fc-daygrid-event .fc-event-main {
    overflow: hidden !important;
    min-width: 0 !important;
}
</style>

<div class="card mb-4">
    <div class="card-body">
        <div id="calendar"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var events = <?= json_encode(array_map(function($event) {
        return [
            'id'    => $event['id'],
            'title' => htmlspecialchars_decode($event['tym_nazev']) . ' – ' . ($event['typ'] === 'trenink' ? 'Trénink' : 'Zápas'),
            'start' => $event['datum'],
            'color' => $event['typ'] === 'trenink' ? '#198754' : '#dc3545',
            'extendedProps' => [
                'misto' => $event['misto'] ?? '',
            ]
        ];
    }, $events)) ?>;

    var isMobile = window.innerWidth < 768;

    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'cs',
        themeSystem: 'bootstrap5',
        initialView: isMobile ? 'listMonth' : 'dayGridMonth',
        headerToolbar: isMobile ? {
            left: 'prev,next',
            center: 'title',
            right: 'today'
        } : {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listMonth'
        },
        footerToolbar: isMobile ? {
            center: 'dayGridMonth,listMonth'
        } : false,
        buttonText: {
            today: 'Dnes',
            month: 'Měsíc',
            week:  'Týden',
            list:  'Seznam'
        },
        events: events,
        eventClick: function(info) {
            window.location = '<?= BASE_URL ?>/kalendar/show?id=' + info.event.id;
        },
        eventContent: function(arg) {
            var isList = arg.view.type.startsWith('list');
            var title = document.createElement('span');
            title.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
            title.textContent = arg.event.title;
            var wrapper = document.createElement('div');
            wrapper.style.cssText = 'display:flex;align-items:center;padding:1px 3px;cursor:pointer;overflow:hidden;min-width:0;max-width:100%;';
            if (!isList) {
                var dot = document.createElement('span');
                dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;background:' + arg.event.backgroundColor + ';margin-right:4px;flex-shrink:0;';
                wrapper.appendChild(dot);
            }
            wrapper.appendChild(title);
            return { domNodes: [wrapper] };
        },
        height: 'auto',
        dayMaxEvents: true,
    });

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