<?php
/**
 * Department Calendar — TeamUp Embed
 */
$todayShift = getShiftForDate();
$calendarKey = TEAMUP_CALENDAR_KEY;
?>

<!-- View Switcher -->
<div class="segmented-control" style="margin-bottom:16px;">
    <button class="seg-btn active" onclick="setCalView('month', this)">Month</button>
    <button class="seg-btn" onclick="setCalView('week', this)">Week</button>
    <button class="seg-btn" onclick="setCalView('day', this)">Day</button>
    <button class="seg-btn" onclick="setCalView('agenda', this)">Agenda</button>
</div>

<!-- Calendar Embed -->
<div class="card" style="padding:0; overflow:hidden;">
    <iframe id="teamupCalendar"
            src="https://teamup.com/<?= htmlspecialchars($calendarKey) ?>?view=month"
            style="width:100%; height:800px; border:0;"
            loading="lazy"></iframe>
</div>

<!-- Shift Legend -->
<div class="card" style="margin-top:16px;">
    <div class="card-header">
        <h2 class="card-title">Shift Legend</h2>
    </div>
    <div style="display:flex; gap:20px; flex-wrap:wrap;">
        <div style="display:flex; align-items:center; gap:8px;">
            <span style="width:16px; height:16px; background:#0B2240; border-radius:4px; display:inline-block;"></span>
            <span style="font-size:14px; font-weight:600;">Unit 3 — A Shift (Red)</span>
        </div>
        <div style="display:flex; align-items:center; gap:8px;">
            <span style="width:16px; height:16px; background:#16A34A; border-radius:4px; display:inline-block;"></span>
            <span style="font-size:14px; font-weight:600;">Unit 1 — B Shift (Green)</span>
        </div>
        <div style="display:flex; align-items:center; gap:8px;">
            <span style="width:16px; height:16px; background:#2563EB; border-radius:4px; display:inline-block;"></span>
            <span style="font-size:14px; font-weight:600;">Unit 2 — C Shift (Blue)</span>
        </div>
    </div>
</div>

<script>
function setCalView(view, btn) {
    const iframe = document.getElementById('teamupCalendar');
    const key = '<?= htmlspecialchars($calendarKey) ?>';
    iframe.src = `https://teamup.com/${key}?view=${view}`;

    // Update active button
    btn.parentElement.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
}
</script>
