<?php require 'leave_calendar_script.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leave Calendar - Executive HR Boardroom</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../components/sidebar.css">
</head>
<body class="bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100 min-h-screen flex flex-col md:flex-row antialiased text-slate-800">

<?php include '../components/sidebar.php'; ?>

<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 hidden z-40" onclick="toggleSidebar()"></div>

<div class="mobile-trigger-bar w-full bg-slate-900 text-white flex items-center justify-between p-4 md:hidden sticky top-0 z-30 shadow-md">
    <span class="font-bold tracking-wide">HR System</span>
    <button onclick="toggleSidebar()" class="bg-white/10 hover:bg-white/20 px-3 py-2 rounded-lg text-xl transition">
        ☰
    </button>
</div>

<div id="main-content" class="flex-1 content-expanded transition-all duration-300 w-full p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">

    <div class="bg-white/70 backdrop-blur-xl border border-white/40 p-5 rounded-3xl shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl sm:text-3xl font-black text-gray-800">Leave Calendar Overview</h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-1">Cross-departmental timeline tracking upcoming team absences.</p>
        </div>
        <div class="bg-blue-100 text-blue-700 px-4 py-2 rounded-xl font-bold text-xs sm:text-sm shadow-sm text-center">
            Reporting Month: <span class="font-black"><?= date('F Y'); ?></span>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-md border border-white/60 overflow-hidden">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <h2 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Scheduled Leave Exception Records</h2>
            <span class="text-xs bg-slate-100 text-slate-600 px-2.5 py-1 rounded-lg font-mono font-bold">Total: <?= count($calendarLeaves ?? []) ?></span>
        </div>

        <div class="p-4 sm:p-6 space-y-4">
            <?php if (!empty($calendarLeaves)): ?>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <?php foreach($calendarLeaves as $leave): ?>
                        <div class="bg-slate-50/50 hover:bg-slate-50 border border-slate-100 hover:border-slate-200 p-4 rounded-2xl transition flex flex-col justify-between space-y-3">
                            <div>
                                <div class="font-bold text-base text-gray-800">
                                    <?= htmlspecialchars($leave['employee_name']) ?>
                                </div>
                                <div class="mt-1">
                                    <span class="bg-indigo-50 text-indigo-700 px-2.5 py-0.5 rounded-md text-xs font-bold">
                                        <?= htmlspecialchars($leave['leave_type']) ?>
                                    </span>
                                </div>
                            </div>
                            
                            <div class="pt-2 border-t border-slate-100 flex items-center justify-between text-xs font-mono font-medium text-slate-500">
                                <div class="bg-white px-2.5 py-1.5 rounded-lg border border-slate-200/60 shadow-sm text-center">
                                    <span class="block text-[9px] uppercase tracking-wider text-slate-400 font-sans font-bold">From</span>
                                    <?= $leave['start_date'] ?>
                                </div>
                                <div class="text-slate-300 font-sans text-base mx-1">➔</div>
                                <div class="bg-white px-2.5 py-1.5 rounded-lg border border-slate-200/60 shadow-sm text-center">
                                    <span class="block text-[9px] uppercase tracking-wider text-slate-400 font-sans font-bold">Until</span>
                                    <?= $leave['end_date'] ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="p-8 text-center text-sm text-slate-400 font-medium">
                    No scheduled employee leaves recorded on the system timeline for this tracking interval.
                </div>
            <?php endif; ?>
        </div>
    </div>

</div>

<script src="../components/sidebar.js"></script>
</body>
</html>