<?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>View Payroll — May 2026</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { jakarta: ['Plus Jakarta Sans', 'sans-serif'] },
                    colors: {
                        violet: {
                            50:  '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .glass-card { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
        .net-glow { box-shadow: 0 4px 24px rgba(139,92,246,0.18); }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .animate-up { animation: fadeUp .45s cubic-bezier(.22,1,.36,1) both; }
        .delay-1 { animation-delay: .07s; }
        .delay-2 { animation-delay: .14s; }
        .delay-3 { animation-delay: .21s; }
        .delay-4 { animation-delay: .28s; }
        .row-hover:hover { background: #faf5ff; }
        .print-btn:hover { background: #f3e8ff; color: #7c3aed; }
        @media print {
            .no-print { display: none !important; }
            body { background: #fff !important; }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">

<!-- ===================== TOP BAR ===================== -->
<div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 pt-6 pb-4 animate-up">

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

        <div>

            <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-1">
                Payroll Record
            </p>

            <h1 class="text-3xl font-extrabold text-gray-900 leading-tight">
                May 2026 Payroll
            </h1>

            <p class="text-sm text-gray-400 mt-1">
                Generated on 21 May 2026 · All Employees · All Departments
            </p>

        </div>

        <div class="flex flex-wrap gap-2 items-center no-print">


            <a href="javascript:history.back()"
                class="inline-flex items-center gap-2 h-9 px-4 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

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

                Back

            </a>

        </div>

    </div>

</div>

<!-- ===================== MAIN ===================== -->
<div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 pb-8 space-y-4">

    <!-- META INFO -->
    <div class="glass-card rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 animate-up delay-1">
        <p class="text-[11px] font-bold uppercase tracking-widest text-gray-400 mb-3">Payroll Period</p>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div class="bg-gray-50 rounded-xl px-3 py-2.5">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Payroll Month</p>
                <p class="text-sm font-bold text-gray-800">May 2026</p>
            </div>
            <div class="bg-gray-50 rounded-xl px-3 py-2.5">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Pay Period From</p>
                <p class="text-sm font-bold text-gray-800">01 May 2026</p>
            </div>
            <div class="bg-gray-50 rounded-xl px-3 py-2.5">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Pay Period To</p>
                <p class="text-sm font-bold text-gray-800">31 May 2026</p>
            </div>
            <div class="bg-gray-50 rounded-xl px-3 py-2.5">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Employee Type</p>
                <p class="text-sm font-bold text-gray-800">All Employees</p>
            </div>
            <div class="bg-gray-50 rounded-xl px-3 py-2.5 sm:col-span-2">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Department</p>
                <p class="text-sm font-bold text-gray-800">All Departments</p>
            </div>
            <div class="bg-gray-50 rounded-xl px-3 py-2.5 sm:col-span-2">
                <p class="text-[11px] text-gray-400 font-medium mb-0.5">Total Employees</p>
                <p class="text-sm font-bold text-gray-800">30</p>
            </div>
        </div>
    </div>

    <!-- EARNINGS + DEDUCTIONS -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

        <!-- EARNINGS -->
        <div class="glass-card rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 animate-up delay-2">
            <div class="flex items-center justify-between mb-3">
                <p class="text-[11px] font-bold uppercase tracking-widest text-gray-400">Earnings</p>
                <span class="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-green-50 text-green-700">
                    <i class="ri-arrow-up-line text-xs"></i> Income
                </span>
            </div>
            <table class="w-full">
                <tbody>
                    <tr class="row-hover transition-colors">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Basic Salary</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;50,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">House Rent Allowance (HRA)</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;20,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Conveyance Allowance</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;2,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Medical Allowance</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;1,250.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Special Allowance</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;5,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Other Allowance</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;750.00</td>
                    </tr>
                </tbody>
            </table>
            <div class="mt-3 flex items-center justify-between bg-green-50 border border-green-100 rounded-xl px-3 py-2.5">
                <span class="text-sm font-bold text-green-800">Total Earnings</span>
                <span class="text-base font-extrabold text-green-700">&#8377;79,000.00</span>
            </div>
        </div>

        <!-- DEDUCTIONS -->
        <div class="glass-card rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 animate-up delay-2">
            <div class="flex items-center justify-between mb-3">
                <p class="text-[11px] font-bold uppercase tracking-widest text-gray-400">Deductions</p>
                <span class="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-red-50 text-red-600">
                    <i class="ri-arrow-down-line text-xs"></i> Deducted
                </span>
            </div>
            <table class="w-full">
                <tbody>
                    <tr class="row-hover transition-colors">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Provident Fund (PF)</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;6,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Professional Tax</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;200.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">ESI</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;1,575.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">TDS</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;4,000.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Loan / Advance</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;0.00</td>
                    </tr>
                    <tr class="row-hover transition-colors border-t border-gray-50">
                        <td class="py-2 pr-3 text-sm text-gray-500 font-medium">Other Deductions</td>
                        <td class="py-2 text-right text-sm font-bold text-gray-800">&#8377;500.00</td>
                    </tr>
                </tbody>
            </table>
            <div class="mt-3 flex items-center justify-between bg-red-50 border border-red-100 rounded-xl px-3 py-2.5">
                <span class="text-sm font-bold text-red-800">Total Deductions</span>
                <span class="text-base font-extrabold text-red-600">&#8377;12,275.00</span>
            </div>
        </div>

    </div>

    <!-- SUMMARY -->
    <div class="glass-card rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 animate-up delay-3">
        <p class="text-[11px] font-bold uppercase tracking-widest text-gray-400 mb-3">Summary</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
            <div class="bg-gray-50 rounded-xl px-3 py-3 text-center">
                <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-1">Total Employees</p>
                <p class="text-2xl font-extrabold text-gray-800">30</p>
            </div>
            <div class="bg-green-50 rounded-xl px-3 py-3 text-center border border-green-100">
                <p class="text-[11px] text-green-600 font-semibold uppercase tracking-wide mb-1">Total Earnings</p>
                <p class="text-2xl font-extrabold text-green-700">&#8377;79,000</p>
            </div>
            <div class="bg-red-50 rounded-xl px-3 py-3 text-center border border-red-100 col-span-2 sm:col-span-1">
                <p class="text-[11px] text-red-500 font-semibold uppercase tracking-wide mb-1">Total Deductions</p>
                <p class="text-2xl font-extrabold text-red-600">&#8377;12,275</p>
            </div>
        </div>
        <!-- NET PAYABLE -->
        <div class="net-glow flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 bg-violet-500 rounded-2xl px-4 sm:px-5 py-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                    <i class="ri-wallet-3-line text-white text-xl"></i>
                </div>
                <div>
                    <p class="text-violet-100 text-xs font-semibold">Net Payable Amount</p>
                    <p class="text-white text-sm font-medium">After all deductions</p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-white text-3xl font-extrabold tracking-tight">&#8377;66,725.00</p>
                <p class="text-violet-200 text-xs mt-0.5">For 30 employees · May 2026</p>
            </div>
        </div>
    </div>

</div>

</body>
</html>

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