<?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 OVERTIME TRACKS DATASETS
|--------------------------------------------------------------------------
*/
$stmt = $conn->prepare("
    SELECT *
    FROM overtime_requests
    WHERE employee_id = ?
    ORDER BY overtime_date 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 Overtime - 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">Attendance</h1>
                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Overtime Requests Ledger</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">Overtime Ledger Log History</h2>
                        <p class="text-[11px] text-slate-500 font-medium mt-0.5">Track extra accumulated operational profiles, authorization processing status, and payroll additions updates.</p>
                    </div>
                    <div>
                        <a href="new_overtime.php" class="inline-flex items-center justify-center bg-slate-900 hover:bg-slate-800 text-white font-bold text-[10px] uppercase tracking-wider px-4 py-2.5 rounded-lg transition shadow-xs active:scale-95 w-full sm:w-auto">
                            + Log Overtime Hours
                        </a>
                    </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)): ?>
                        <!-- 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" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="10" />
                                    <polyline points="12 6 12 12 16 14" />
                                </svg>
                            </div>
                            <h3 class="text-xs font-black text-slate-950 uppercase tracking-wider">No Overtime Records</h3>
                            <p class="text-[11px] text-slate-500 font-medium mt-1 leading-relaxed">
                                You haven't logged any extra-hour items yet. When you submit extra operations cycles for tracking review, items appear inside this container view.
                            </p>
                            <a href="new_overtime.php" class="mt-4 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-2 rounded-lg text-[10px] font-black uppercase tracking-wider transition shadow-xs">
                                Log First Entry
                            </a>
                        </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): 
                                $mStatus = $row['manager_status'];
                                $mBadge = $mStatus === 'Approved' ? 'bg-stone-100 text-slate-900 border-slate-300' : ($mStatus === 'Pending' ? 'bg-stone-50 text-slate-500 border-slate-200' : 'bg-stone-100 text-slate-400 border-slate-300 line-through');
                                
                                $hStatus = $row['hr_status'];
                                $hBadge = $hStatus === 'Approved' ? 'bg-stone-100 text-slate-900 border-slate-300' : ($hStatus === 'Pending' ? 'bg-stone-50 text-slate-500 border-slate-200' : 'bg-stone-100 text-slate-400 border-slate-300 line-through');
                            ?>
                                <div class="p-4 flex flex-col gap-3.5 hover:bg-stone-50/50 transition">
                                    <div class="flex items-start justify-between gap-2">
                                        <div>
                                            <h4 class="text-xs font-black text-slate-950 uppercase tracking-tight">Overtime Log Record</h4>
                                            <p class="text-[10px] font-mono font-bold text-slate-400 mt-0.5">
                                                <?= date('M d, Y', strtotime($row['overtime_date'])) ?>
                                            </p>
                                        </div>
                                        <span class="text-[10px] bg-stone-100 text-slate-900 px-2.5 py-1 rounded border border-slate-300 font-black font-mono">
                                            <?= number_format($row['overtime_hours'], 2) ?> Hrs
                                        </span>
                                    </div>

                                    <div class="grid grid-cols-2 gap-2 pt-2 border-t border-dashed border-slate-200 bg-stone-50/50 p-2 rounded-lg">
                                        <div>
                                            <span class="block text-[9px] font-black uppercase tracking-wider text-slate-400 mb-1">Manager Signoff</span>
                                            <span class="px-2 py-0.5 block text-center text-[9px] font-black uppercase rounded border tracking-wide <?= $mBadge ?>">
                                                <?= $mStatus ?>
                                            </span>
                                        </div>
                                        <div>
                                            <span class="block text-[9px] font-black uppercase tracking-wider text-slate-400 mb-1">HR Clearance</span>
                                            <span class="px-2 py-0.5 block text-center text-[9px] font-black uppercase rounded border tracking-wide <?= $hBadge ?>">
                                                <?= $hStatus ?>
                                            </span>
                                        </div>
                                    </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">Overtime Date</th>
                                        <th class="p-3.5 text-center">Hours Worked</th>
                                        <th class="p-3.5 text-center">Manager Matrix</th>
                                        <th class="p-3.5 pr-6 text-center">HR Ledger</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-200/80 text-xs font-medium text-slate-700">
                                    <?php foreach($rows as $row): 
                                        $mStatus = $row['manager_status'];
                                        $mBadge = $mStatus === 'Approved' ? 'bg-stone-100 text-slate-900 border-slate-300' : ($mStatus === 'Pending' ? 'bg-stone-50 text-slate-500 border-slate-200' : 'bg-stone-100 text-slate-400 border-slate-200 line-through');
                                        
                                        $hStatus = $row['hr_status'];
                                        $hBadge = $hStatus === 'Approved' ? 'bg-stone-100 text-slate-900 border-slate-300' : ($hStatus === 'Pending' ? 'bg-stone-50 text-slate-500 border-slate-200' : 'bg-stone-100 text-slate-400 border-slate-200 line-through');
                                    ?>
                                        <tr class="hover:bg-stone-50/50 transition">
                                            <td class="p-3.5 pl-6 font-mono font-bold text-slate-950 whitespace-nowrap">
                                                <?= date('d M Y', strtotime($row['overtime_date'])) ?>
                                            </td>
                                            <td class="p-3.5 text-center 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['overtime_hours'], 2) ?> Hours
                                                </span>
                                            </td>
                                            <td class="p-3.5 text-center whitespace-nowrap">
                                                <span class="px-2.5 py-1 inline-flex text-[10px] font-black tracking-wide uppercase rounded border <?= $mBadge ?>">
                                                    <?= $mStatus ?>
                                                </span>
                                            </td>
                                            <td class="p-3.5 pr-6 text-center whitespace-nowrap">
                                                <span class="px-2.5 py-1 inline-flex text-[10px] font-black tracking-wide uppercase rounded border <?= $hBadge ?>">
                                                    <?= $hStatus ?>
                                                </span>
                                            </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>