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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Employee Dashboard</title>

    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>

        body{
            font-family:Inter,sans-serif;
            background:#f4f7fb;
        }

        .dashboard-card{
            background:#fff;
            border:1px solid #edf2f7;
            border-radius:24px;
            box-shadow:0 2px 10px rgba(15,23,42,.04);
        }

        .dashboard-card:hover{
            box-shadow:0 10px 30px rgba(15,23,42,.06);
        }

        .icon-box{
            width:50px;
            height:50px;
            border-radius:16px;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
        }

        .quick-btn{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:10px;
            width:100%;
            min-height:110px;
            border-radius:20px;
            border:1px solid #edf2f7;
            background:#f8fafc;
            transition:.3s;
            padding:14px;
            text-align:center;
        }

        .quick-btn:hover{
            transform:translateY(-2px);
            background:#fff;
            box-shadow:0 10px 25px rgba(15,23,42,.06);
        }

        .summary-box{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:18px;
            border-radius:20px;
            border:1px solid #edf2f7;
            background:#f8fafc;
        }

        @media(max-width:640px){

            .quick-btn{
                min-height:95px;
                padding:12px;
            }

            .quick-btn p{
                font-size:11px;
                line-height:16px;
            }

        }

    </style>

</head>

<body>

<div class="max-w-[1800px] mx-auto px-3 md:px-6 py-5">

    <!-- PAGE TITLE -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">

        <div>

            <h1 class="text-2xl md:text-3xl font-bold text-slate-800">
                Employee Dashboard
            </h1>

            <p class="text-sm text-slate-500 mt-1">
                HRMS overview and employee management
            </p>

        </div>

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

            <button class="h-11 px-5 rounded-2xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition">
                Export Report
            </button>

            <button class="h-11 px-5 rounded-2xl border border-slate-200 bg-white text-sm font-semibold text-slate-700">
                This Month
            </button>

        </div>

    </div>

    <!-- TOP STATS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-5">

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Total Employees
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        128
                    </h2>

                    <p class="text-sm text-blue-600 font-semibold mt-3">
                        Active Workforce
                    </p>

                </div>

                <div class="icon-box bg-blue-50">
                    <i class="ri-team-fill text-2xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Present Today
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        96
                    </h2>

                    <p class="text-sm text-emerald-600 font-semibold mt-3">
                        75% Attendance
                    </p>

                </div>

                <div class="icon-box bg-emerald-50">
                    <i class="ri-calendar-check-fill text-2xl text-emerald-600"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        On Leaves
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        12
                    </h2>

                    <p class="text-sm text-amber-500 font-semibold mt-3">
                        Approved Leaves
                    </p>

                </div>

                <div class="icon-box bg-amber-50">
                    <i class="ri-flight-takeoff-fill text-2xl text-amber-500"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Pending Leaves
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        5
                    </h2>

                    <p class="text-sm text-purple-600 font-semibold mt-3">
                        Waiting Approval
                    </p>

                </div>

                <div class="icon-box bg-purple-50">
                    <i class="ri-hourglass-fill text-2xl text-purple-600"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Monthly Payroll
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        ₹18.4L
                    </h2>

                    <p class="text-sm text-red-500 font-semibold mt-3">
                        Processed
                    </p>

                </div>

                <div class="icon-box bg-red-50">
                    <i class="ri-money-dollar-circle-fill text-2xl text-red-500"></i>
                </div>

            </div>

        </div>

    </div>

    <!-- MAIN GRID -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-6">

        <!-- LEFT -->
        <div class="xl:col-span-8 space-y-5">

            <!-- ATTENDANCE CHART -->
            <div class="dashboard-card p-5 md:p-6">

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

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            Attendance Overview
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Weekly employee attendance
                        </p>

                    </div>

                    <div class="flex items-center gap-2 text-sm font-semibold text-emerald-600">
                        <i class="ri-arrow-up-line"></i>
                        8%
                    </div>

                </div>

                <div id="attendanceChart"></div>

            </div>

            <!-- PENDING LEAVE APPROVALS -->
            <div class="dashboard-card overflow-hidden">

                <!-- HEADER -->
                <div class="px-6 py-5 border-b border-slate-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                    <h2 class="text-xl font-bold text-slate-800">
                        Pending Leave Approvals
                    </h2>

                    <div class="flex flex-wrap gap-3">

                        <input type="text"
                            placeholder="Search Employee..."
                            class="h-11 px-4 rounded-2xl border border-slate-200 outline-none text-sm w-[220px]">

                        <select class="h-11 px-4 rounded-2xl border border-slate-200 outline-none text-sm">
                            <option>All Leave Types</option>
                            <option>Casual Leave</option>
                            <option>Annual Leave</option>
                            <option>Personal Leave</option>
                        </select>

                    </div>

                </div>

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

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

                        <thead class="bg-slate-50 border-b border-slate-100">

                            <tr>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                    Employee
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                    Leave Type
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                    From Date
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                    To Date
                                </th>

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

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                    Applied On
                                </th>

                                <th class="px-6 py-4 text-center text-xs font-semibold text-slate-400 uppercase">
                                    Action
                                </th>

                            </tr>

                        </thead>

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

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

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

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

                                        <img src="https://i.pravatar.cc/100?img=12"
                                            class="w-11 h-11 rounded-full object-cover">

                                        <div>

                                            <h4 class="text-sm font-semibold text-slate-800">
                                                Aayal Verma
                                            </h4>

                                            <p class="text-xs text-slate-400">
                                                UI/UX Designer
                                            </p>

                                        </div>

                                    </div>

                                </td>

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

                                <td class="px-6 py-4 text-sm text-slate-700">
                                    20 May 2025
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-700">
                                    20 May 2025
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-700">
                                    1
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-700">
                                    19 May 2025
                                </td>

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

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

                                        <button class="w-9 h-9 rounded-full border border-green-200 text-green-600 hover:bg-green-50 flex items-center justify-center">
                                            <i class="ri-check-line"></i>
                                        </button>

                                        <button class="w-9 h-9 rounded-full border border-red-200 text-red-500 hover:bg-red-50 flex items-center justify-center">
                                            <i class="ri-close-line"></i>
                                        </button>

                                    </div>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

        <!-- RIGHT -->
        <div class="xl:col-span-4 space-y-5">

            <!-- QUICK ACTIONS -->
            <div class="dashboard-card p-5">

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

                    <h2 class="text-xl font-bold text-slate-800">
                        Quick Actions
                    </h2>

                </div>

                <!-- FIXED GRID -->
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

                    <a href="add_employee.php">

                        <button class="quick-btn">

                            <div class="icon-box bg-blue-50">
                                <i class="ri-user-add-line text-2xl text-blue-600"></i>
                            </div>

                            <p class="text-xs font-semibold text-slate-700">
                                Add Employee
                            </p>

                        </button>

                    </a>

                    <a href="add_leave.php">

                        <button class="quick-btn">

                            <div class="icon-box bg-green-50">
                                <i class="ri-calendar-check-line text-2xl text-green-600"></i>
                            </div>

                            <p class="text-xs font-semibold text-slate-700">
                                Apply Leave
                            </p>

                        </button>

                    </a>

                    <a href="leave_list.php">

                        <button class="quick-btn">

                            <div class="icon-box bg-purple-50">
                                <i class="ri-file-list-3-line text-2xl text-purple-600"></i>
                            </div>

                            <p class="text-xs font-semibold text-slate-700">
                                Approval
                            </p>

                        </button>

                    </a>

                    <a href="payroll_list.php">

                    <button class="quick-btn">

                        <div class="icon-box bg-red-50">
                            <i class="ri-money-dollar-circle-line text-2xl text-red-500"></i>
                        </div>

                        <p class="text-xs font-semibold text-slate-700">
                            Payroll
                        </p>

                    </button>
                    
                    </a>

                    <a href="letters.php">
                        
                    <button class="quick-btn">

                        <div class="icon-box bg-yellow-50">
                            <i class="ri-file-paper-2-line text-2xl text-yellow-500"></i>
                        </div>

                        <p class="text-xs font-semibold text-slate-700">
                            Letters
                        </p>

                    </button>
                    
                    </a>


                </div>

            </div>

            <!-- LEAVE SUMMARY -->
            <div class="dashboard-card p-5">

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

                    <h2 class="text-xl font-bold text-slate-800">
                        Leave Summary
                    </h2>

                    <button class="text-sm text-slate-500 flex items-center gap-1">
                        This Month
                        <i class="ri-arrow-down-s-line"></i>
                    </button>

                </div>

                <div class="space-y-4">

                    <!-- BOX -->
                    <div class="summary-box">

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

                            <div class="icon-box bg-blue-50">
                                <i class="ri-calendar-line text-blue-600"></i>
                            </div>

                            <div>

                                <p class="text-sm font-medium text-slate-700">
                                    Total Leaves
                                </p>

                            </div>

                        </div>

                        <span class="text-2xl font-bold text-slate-800">
                            32
                        </span>

                    </div>

                    <!-- BOX -->
                    <div class="summary-box">

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

                            <div class="icon-box bg-green-50">
                                <i class="ri-check-line text-green-600"></i>
                            </div>

                            <div>

                                <p class="text-sm font-medium text-slate-700">
                                    Approved Leaves
                                </p>

                            </div>

                        </div>

                        <span class="text-2xl font-bold text-slate-800">
                            27
                        </span>

                    </div>

                    <!-- BOX -->
                    <div class="summary-box">

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

                            <div class="icon-box bg-yellow-50">
                                <i class="ri-time-line text-yellow-500"></i>
                            </div>

                            <div>

                                <p class="text-sm font-medium text-slate-700">
                                    Pending Leaves
                                </p>

                            </div>

                        </div>

                        <span class="text-2xl font-bold text-slate-800">
                            5
                        </span>

                    </div>

                    <!-- BOX -->
                    <div class="summary-box">

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

                            <div class="icon-box bg-red-50">
                                <i class="ri-close-line text-red-500"></i>
                            </div>

                            <div>

                                <p class="text-sm font-medium text-slate-700">
                                    Rejected Leaves
                                </p>

                            </div>

                        </div>

                        <span class="text-2xl font-bold text-slate-800">
                            0
                        </span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- CHART -->
<script>

    const attendanceChart = new ApexCharts(document.querySelector("#attendanceChart"), {

        chart:{
            type:'area',
            height:320,
            toolbar:{
                show:false
            }
        },

        series:[{
            name:'Attendance',
            data:[88,92,90,96,94,98,96]
        }],

        colors:['#2563eb'],

        stroke:{
            curve:'smooth',
            width:4
        },

        fill:{
            type:'gradient',
            gradient:{
                shadeIntensity:1,
                opacityFrom:0.35,
                opacityTo:0.04,
                stops:[0,90,100]
            }
        },

        dataLabels:{
            enabled:false
        },

        grid:{
            borderColor:'#e2e8f0',
            strokeDashArray:5
        },

        xaxis:{
            categories:[
                'Mon',
                'Tue',
                'Wed',
                'Thu',
                'Fri',
                'Sat',
                'Sun'
            ]
        }

    });

    attendanceChart.render();

</script>

</body>
</html>

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