<?php include 'header.php'; ?>

<div class="min-h-screen bg-slate-100 p-4 lg:p-6">

    <!-- Header -->
    <div class="max-w-6xl mx-auto mb-5">

        <div class="flex items-center justify-between gap-4">

            <div>

                <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-sky-500 bg-clip-text text-transparent">
                    Holiday List
                </h1>

            </div>

            <!-- Back Button -->
            <a href="hrms.php"
                class="inline-flex items-center gap-2 h-10 px-4 rounded-xl bg-white border border-slate-200 text-sm font-medium text-slate-700 hover:shadow-md transition-all">

                <i class="ri-arrow-left-line"></i>

                Back

            </a>

        </div>

    </div>

    <!-- Holiday Table -->
    <div class="max-w-6xl mx-auto">

        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">

            <!-- Top Header -->
            <div class="bg-gradient-to-r from-indigo-600 to-sky-500 px-5 py-4">

                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

                    <div>

                        <h2 class="text-lg font-semibold text-white">
                            Holiday List
                        </h2>

                    </div>

                </div>

            </div>

            <!-- Table -->
            <div class="overflow-x-auto">

                <table class="w-full min-w-[750px]">

                    <thead class="bg-slate-50">

                        <tr>

                            <th class="px-5 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                Sr No
                            </th>

                            <th class="px-5 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                Holiday Name
                            </th>

                            <th class="px-5 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                Start Date
                            </th>

                            <th class="px-5 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                End Date
                            </th>

                            <th class="px-5 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                Days
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-slate-100">

                        <!-- Row 1 -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-5 py-4 text-sm font-medium text-slate-700">
                                01
                            </td>

                            <td class="px-5 py-4 text-sm font-semibold text-slate-800">
                                Diwali Vacation
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                01 Nov 2025
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                03 Nov 2025
                            </td>

                            <td class="px-5 py-4">

                                <span class="px-3 py-1 rounded-lg bg-emerald-100 text-emerald-700 text-xs font-semibold">
                                    3 Days
                                </span>

                            </td>

                        </tr>

                        <!-- Row 2 -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-5 py-4 text-sm font-medium text-slate-700">
                                02
                            </td>

                            <td class="px-5 py-4 text-sm font-semibold text-slate-800">
                                Christmas
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                25 Dec 2025
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                25 Dec 2025
                            </td>

                            <td class="px-5 py-4">

                                <span class="px-3 py-1 rounded-lg bg-blue-100 text-blue-700 text-xs font-semibold">
                                    1 Day
                                </span>

                            </td>

                        </tr>

                        <!-- Row 3 -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-5 py-4 text-sm font-medium text-slate-700">
                                03
                            </td>

                            <td class="px-5 py-4 text-sm font-semibold text-slate-800">
                                New Year
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                01 Jan 2026
                            </td>

                            <td class="px-5 py-4 text-sm text-slate-600">
                                01 Jan 2026
                            </td>

                            <td class="px-5 py-4">

                                <span class="px-3 py-1 rounded-lg bg-violet-100 text-violet-700 text-xs font-semibold">
                                    1 Day
                                </span>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <!-- Footer -->
            <div class="px-5 py-4 border-t border-slate-100 flex items-center justify-between">

                <p class="text-xs text-slate-500">
                    Showing 1 to 3 of 3 holidays
                </p>

                <!-- Pagination -->
                <div class="flex items-center gap-2">

                    <button
                        class="w-8 h-8 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center">

                        <i class="ri-arrow-left-s-line text-sm"></i>

                    </button>

                    <button
                        class="w-8 h-8 rounded-lg bg-gradient-to-r from-indigo-600 to-sky-500 text-white text-xs font-semibold">
                        1
                    </button>

                    <button
                        class="w-8 h-8 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center">

                        <i class="ri-arrow-right-s-line text-sm"></i>

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

<?php include 'footer.php'; ?>