<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (session_status() === PHP_SESSION_NONE && !headers_sent()) { session_start(); }
session_write_close();
require '../config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: ../login.php");
    exit;
}

$userId = intval($_SESSION['user_id']);

/*
|--------------------------------------------------------------------------
| FIND EMPLOYEE REFERENCE MATCH
|--------------------------------------------------------------------------
*/
$stmt = $conn->prepare("SELECT id FROM employees WHERE user_id = ? LIMIT 1");
$stmt->bind_param("i", $userId);
$stmt->execute();
$employee = $stmt->get_result()->fetch_assoc();

if (!$employee) {
    die("Employee record not found.");
}

$employeeId = $employee['id'];

/*
|--------------------------------------------------------------------------
| RETRIEVE DISBURSED PAYSLIPS HISTORY
|--------------------------------------------------------------------------
*/
$stmt = $conn->prepare("
    SELECT *
    FROM payroll_details
    WHERE employee_id = ?
      AND payroll_status = 'Disbursed'
    ORDER BY payroll_year DESC, payroll_month DESC
");
$stmt->bind_param("i", $employeeId);
$stmt->execute();
$res = $stmt->get_result();

$rows = [];
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}
$stmt->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Payslips Vault - Core Self Service</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../components/sidebar.css">
    <style>
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
    </style>
</head>
<body class="bg-stone-100 min-h-screen text-slate-800 antialiased font-sans">

    <div class="flex">
        
        <?php include '../components/sidebar.php'; ?>

        <div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/40 hidden z-40 transition-opacity duration-300" onclick="toggleSidebar()"></div>

        <div id="main-content" class="flex-1 min-w-0 md:pl-60 transition-all duration-300 min-h-screen flex flex-col">
            
            <header class="sticky top-0 bg-white/90 backdrop-blur-md border-b border-slate-300/80 h-14 flex items-center justify-between px-4 sm:px-6 z-30 shadow-xs">
                <div class="flex items-center gap-3">
                    <button onclick="toggleSidebar()" class="p-1.5 rounded-lg text-slate-600 hover:bg-slate-200/80 transition active:scale-95" aria-label="Toggle Side Area Menu">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                    <div>
                        <h1 class="text-sm font-black tracking-tight text-slate-950 uppercase">Compensation</h1>
                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Payslips Ledger Vault</p>
                    </div>
                </div>
            </header>

            <main class="flex-1 p-4 sm:p-6 max-w-7xl w-full mx-auto space-y-6">

                <div class="bg-white border border-slate-300/80 p-5 rounded-xl shadow-xs flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h2 class="text-sm font-black text-slate-950 uppercase tracking-tight">Compensation Records History</h2>
                        <p class="text-[11px] text-slate-500 font-medium mt-0.5">Historical statement monitoring summaries, auditing verification certificates, and disbursed ledger profiles.</p>
                    </div>
                    <div>
                        <span class="inline-block text-[9px] bg-stone-100 text-slate-700 border border-slate-300/80 px-2.5 py-1 rounded font-black font-mono uppercase tracking-wider">VAULT SECURE</span>
                    </div>
                </div>

                <!-- Master Workspace Datatable Grid Area Container -->
                <div class="bg-white rounded-xl shadow-xs border border-slate-300/80 overflow-hidden">
                    
                    <?php if (empty($rows)): ?>
                        <!-- Native Naira Vector Blank Empty State Canvas Screen Block -->
                        <div class="p-8 sm:p-16 flex flex-col items-center justify-center text-center max-w-md mx-auto">
                            <div class="w-14 h-14 bg-stone-100 text-slate-700 border border-slate-300 rounded-xl flex items-center justify-center shadow-inner mb-4 relative">
                                <span class="absolute inline-flex h-full w-full rounded-xl bg-slate-400 opacity-10 animate-pulse"></span>
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <path d="M6 19V5l12 14V5" />
                                    <path d="M4 10h16" />
                                    <path d="M4 14h16" />
                                </svg>
                            </div>
                            <h3 class="text-xs font-black text-slate-950 uppercase tracking-wider">No Released Statements</h3>
                            <p class="text-[11px] text-slate-500 font-medium mt-1 leading-relaxed">
                                Your contemporary active lifecycle allocation hasn't generated distributed statements or payroll parameters remain pending execution inside backend management modules.
                            </p>
                        </div>

                    <?php else: ?>
                        <!-- Mobile Responsive Fragment Panel Blocks (< md) -->
                        <div class="block md:hidden divide-y divide-slate-200/80 overflow-y-auto max-h-[600px] custom-scrollbar">
                            <?php foreach($rows as $row): 
                                $monthName = date('F', mktime(0, 0, 0, $row['payroll_month'], 1));
                            ?>
                                <div class="p-4 flex items-center justify-between gap-4 hover:bg-stone-50/50 transition">
                                    <div class="min-w-0">
                                        <h4 class="text-xs font-black text-slate-950 uppercase tracking-tight">
                                            <?= $monthName ?>
                                        </h4>
                                        <p class="text-[10px] font-mono font-bold text-slate-400 mt-0.5">
                                            Framework Cycle: <?= $row['payroll_year'] ?>
                                        </p>
                                        <h3 class="text-sm font-black text-slate-900 tracking-tight font-mono mt-1">
                                            ₦<?= number_format($row['net_salary'], 2) ?>
                                        </h3>
                                    </div>
                                    
                                    <div class="shrink-0">
                                        <a href="../payslip.php?id=<?= $row['id'] ?>" 
                                           target="_blank" 
                                           class="inline-flex items-center justify-center bg-slate-900 hover:bg-slate-800 text-white font-bold text-[10px] uppercase tracking-wider px-3 py-2 rounded-lg transition shadow-xs">
                                            View
                                        </a>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Full Enterprise Grid Matrix Container Viewport (>= md) -->
                        <div class="hidden md:block overflow-x-auto w-full custom-scrollbar">
                            <table class="w-full border-collapse text-left">
                                <thead>
                                    <tr class="bg-stone-50 border-b border-slate-300/80 text-[10px] font-black uppercase tracking-wider text-slate-400">
                                        <th class="p-3.5 pl-6">Statement Month</th>
                                        <th class="p-3.5 text-center">Calendar Year</th>
                                        <th class="p-3.5 text-right">Net Salary Disbursed</th>
                                        <th class="p-3.5 pr-6 text-center">Document Link</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-200/80 text-xs font-medium text-slate-700">
                                    <?php foreach($rows as $row): 
                                        $monthName = date('F', mktime(0, 0, 0, $row['payroll_month'], 1));
                                    ?>
                                        <tr class="hover:bg-stone-50/50 transition">
                                            <td class="p-3.5 pl-6 font-black text-slate-950 uppercase tracking-tight whitespace-nowrap">
                                                <?= $monthName ?>
                                            </td>
                                            <td class="p-3.5 text-center font-mono font-bold text-slate-500 whitespace-nowrap">
                                                <?= $row['payroll_year'] ?>
                                            </td>
                                            <td class="p-3.5 text-right whitespace-nowrap">
                                                <span class="bg-stone-100 text-slate-900 px-2.5 py-1 border border-slate-300 rounded font-black font-mono">
                                                    ₦<?= number_format($row['net_salary'], 2) ?>
                                                </span>
                                            </td>
                                            <td class="p-3.5 pr-6 text-center whitespace-nowrap">
                                                <a href="../payslip.php?id=<?= $row['id'] ?>" 
                                                   target="_blank" 
                                                   class="inline-flex items-center justify-center bg-white hover:bg-stone-50 text-slate-900 border border-slate-300 hover:border-slate-400 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider transition shadow-xs">
                                                    Open Ledger
                                                </a>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    <?php endif; ?>
                </div>

            </main>

            <footer class="mt-auto border-t border-slate-300 bg-white px-6 py-4 text-center">
                <p class="text-[9px] text-slate-500 font-mono tracking-wider">&copy; 2026 Core HR Engine System Platform • Dynamic Secure Architecture Protocol.</p>
            </footer>

        </div>
    </div>

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