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

<!-- SWEET ALERT -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Page Wrapper -->
<div class="px-0 py-4 md:p-2 lg:p-6">

    <!-- Header -->
    <div
        class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">

        <!-- Title -->
        <div>

            <h1 class="text-2xl font-bold text-gray-800">
                Leaves List
            </h1>

            <p class="text-sm text-gray-500">
                Manage all leaves from here
            </p>

        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">

            <!-- Add Leave -->
            <a href="add_leave.php"
                class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium px-5 py-2.5 rounded-xl shadow-lg hover:shadow-blue-200 transition-all duration-300 flex items-center gap-2">

                <i class="ri-add-line text-lg"></i>
                Add Leave

            </a>

        </div>

    </div>

    <!-- Leave Status Cards -->
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 mb-5">

        <!-- Total Leaves -->
        <div
            class="bg-white rounded-2xl border border-gray-200 p-4 shadow-sm hover:shadow-md transition">

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

                <div>

                    <p class="text-sm text-gray-500 font-medium">
                        Total Leaves
                    </p>

                    <h2 class="text-3xl font-bold text-gray-800 mt-1">
                        124
                    </h2>

                </div>

                <div
                    class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">

                    <i class="ri-file-list-3-line text-2xl text-blue-600"></i>

                </div>

            </div>

        </div>

        <!-- Pending -->
        <div
            class="bg-white rounded-2xl border border-yellow-100 p-4 shadow-sm hover:shadow-md transition">

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

                <div>

                    <p class="text-sm text-yellow-600 font-medium">
                        Pending
                    </p>

                    <h2 class="text-3xl font-bold text-gray-800 mt-1">
                        18
                    </h2>

                </div>

                <div
                    class="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center">

                    <i class="ri-time-line text-2xl text-yellow-600"></i>

                </div>

            </div>

        </div>

        <!-- Approved -->
        <div
            class="bg-white rounded-2xl border border-green-100 p-4 shadow-sm hover:shadow-md transition">

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

                <div>

                    <p class="text-sm text-green-600 font-medium">
                        Approved
                    </p>

                    <h2 class="text-3xl font-bold text-gray-800 mt-1">
                        72
                    </h2>

                </div>

                <div
                    class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">

                    <i class="ri-checkbox-circle-line text-2xl text-green-600"></i>

                </div>

            </div>

        </div>

        <!-- Rejected -->
        <div
            class="bg-white rounded-2xl border border-red-100 p-4 shadow-sm hover:shadow-md transition">

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

                <div>

                    <p class="text-sm text-red-600 font-medium">
                        Rejected
                    </p>

                    <h2 class="text-3xl font-bold text-gray-800 mt-1">
                        14
                    </h2>

                </div>

                <div
                    class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">

                    <i class="ri-close-circle-line text-2xl text-red-600"></i>

                </div>

            </div>

        </div>

    </div>

    <!-- Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">

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

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

                <!-- Table Head -->
                <thead class="bg-gray-50 border-b border-gray-200">

                    <tr class="text-left">

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Employee ID
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Employee Name
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Leave Type
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Start Date
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            End Date
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Days
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Status
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Action
                        </th>

                    </tr>

                </thead>

                <!-- Table Body -->
                <tbody class="divide-y divide-gray-100 bg-white">

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

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            EMP-001
                        </td>

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

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=1"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Rahul Sharma
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            Sick Leave
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            22 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            24 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            3 Days
                        </td>

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

                            <span
                                class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">

                                Pending

                            </span>

                        </td>

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

                            <div class="flex items-center gap-2">
                                
                                <!-- Allocated Leave -->
                                <div class="relative group">
                                
                                    <a href="allocated_leave.php"
                                        class="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition flex items-center justify-center">
                                    
                                        <i class="ri-calendar-check-line text-lg"></i>
                                    
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Allocated Leave
                                
                                    </div>
                                
                                </div>

                                <!-- View -->
                                <div class="relative group">
                                
                                    <a href="view_leave.php"
                                        class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                
                                        <i class="ri-eye-line"></i>
                                
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        View Leave
                                
                                    </div>
                                
                                </div>
                                
                                <!-- Delete -->
                                <div class="relative group">
                                
                                    <button
                                        onclick="deleteLeave('Neha Singh')"
                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 transition flex items-center justify-center">
                                
                                        <i class="ri-delete-bin-6-line text-lg"></i>
                                
                                    </button>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Delete Leave
                                
                                    </div>
                                
                                </div>

                            </div>

                        </td>

                    </tr>

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

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            EMP-002
                        </td>

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

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=2"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Priya Verma
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            Casual Leave
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            18 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            20 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            2 Days
                        </td>

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

                            <span
                                class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">

                                Approved

                            </span>

                        </td>

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

                            <div class="flex items-center gap-2">
                                
                                <!-- Allocated Leave -->
                                <div class="relative group">
                                
                                    <a href="allocated_leave.php"
                                        class="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition flex items-center justify-center">
                                    
                                        <i class="ri-calendar-check-line text-lg"></i>
                                    
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Allocated Leave
                                
                                    </div>
                                
                                </div>

                                <!-- View -->
                                <div class="relative group">
                                
                                    <a href="view_leave.php"
                                        class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                
                                        <i class="ri-eye-line"></i>
                                
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        View Leave
                                
                                    </div>
                                
                                </div>
                                
                                <!-- Delete -->
                                <div class="relative group">
                                
                                    <button
                                        onclick="deleteLeave('Neha Singh')"
                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 transition flex items-center justify-center">
                                
                                        <i class="ri-delete-bin-6-line text-lg"></i>
                                
                                    </button>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Delete Leave
                                
                                    </div>
                                
                                </div>

                            </div>

                        </td>

                    </tr>

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

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            EMP-003
                        </td>

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

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=3"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Amit Kumar
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            Paid Leave
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            25 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            28 May 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            4 Days
                        </td>

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

                            <span
                                class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">

                                Pending

                            </span>

                        </td>

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

                            <div class="flex items-center gap-2">
                                
                                <!-- Allocated Leave -->
                                <div class="relative group">
                                
                                    <a href="allocated_leave.php"
                                        class="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition flex items-center justify-center">
                                    
                                        <i class="ri-calendar-check-line text-lg"></i>
                                    
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Allocated Leave
                                
                                    </div>
                                
                                </div>

                                <!-- View -->
                                <div class="relative group">
                                
                                    <a href="view_leave.php"
                                        class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                
                                        <i class="ri-eye-line"></i>
                                
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        View Leave
                                
                                    </div>
                                
                                </div>
                                
                                <!-- Delete -->
                                <div class="relative group">
                                
                                    <button
                                        onclick="deleteLeave('Neha Singh')"
                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 transition flex items-center justify-center">
                                
                                        <i class="ri-delete-bin-6-line text-lg"></i>
                                
                                    </button>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Delete Leave
                                
                                    </div>
                                
                                </div>

                            </div>

                        </td>

                    </tr>

                    <!-- Row 4 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            EMP-004
                        </td>

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

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=4"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Neha Singh
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            Emergency Leave
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            10 Jun 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            14 Jun 2024
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            5 Days
                        </td>

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

                            <span
                                class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">

                                Rejected

                            </span>

                        </td>

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

                            <div class="flex items-center gap-2">
                                
                                <!-- Allocated Leave -->
                                <div class="relative group">
                                
                                    <a href="allocated_leave.php"
                                        class="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition flex items-center justify-center">
                                    
                                        <i class="ri-calendar-check-line text-lg"></i>
                                    
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Allocated Leave
                                
                                    </div>
                                
                                </div>

                                <!-- View -->
                                <div class="relative group">
                                
                                    <a href="view_leave.php"
                                        class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                
                                        <i class="ri-eye-line"></i>
                                
                                    </a>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        View Leave
                                
                                    </div>
                                
                                </div>
                                
                                <!-- Delete -->
                                <div class="relative group">
                                
                                    <button
                                        onclick="deleteLeave('Neha Singh')"
                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 transition flex items-center justify-center">
                                
                                        <i class="ri-delete-bin-6-line text-lg"></i>
                                
                                    </button>
                                
                                    <!-- Tooltip -->
                                    <div
                                        class="absolute bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-lg z-50">
                                
                                        Delete Leave
                                
                                    </div>
                                
                                </div>

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <!-- Footer -->
        <div
            class="px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4 bg-white">

            <p class="text-sm text-gray-500">
                Showing 1 to 4 of 62 tasks
            </p>

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

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition flex items-center justify-center">

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

                </button>

                <button
                    class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">

                    1

                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">

                    2

                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">

                    3

                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">

                    4

                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition flex items-center justify-center">

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

                </button>

            </div>

        </div>

    </div>

</div>

<script>

    function deleteLeave(employeeName) {

        Swal.fire({

            title: 'Delete?',
            text: `${employeeName}'s leave will be deleted`,
            icon: 'warning',

            width: '320px',
            padding: '1.2rem',

            showCancelButton: true,

            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel',

            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#616872',

            background: '#fff',

            customClass: {
                popup: 'rounded-2xl shadow-xl',
                title: 'text-lg font-semibold text-gray-800',
                htmlContainer: 'text-sm text-gray-500',
                confirmButton: 'rounded-lg px-4 py-2',
                cancelButton: 'rounded-lg px-4 py-2'
            }

        }).then((result) => {

            if (result.isConfirmed) {

                Swal.fire({

                    icon: 'success',
                    title: 'Deleted!',
                    text: 'Leave deleted successfully',

                    width: '300px',
                    padding: '1rem',

                    showConfirmButton: false,
                    timer: 1500,

                    customClass: {
                        popup: 'rounded-2xl shadow-xl',
                        title: 'text-base font-semibold'
                    }

                });

            }

        });

    }

</script>

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