<?php require 'employees_controller.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Management</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght=0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Mulish', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../components/sidebar.css">
</head>
<body class="bg-stone-100/60 min-h-screen text-slate-800 antialiased selection:bg-indigo-600 selection:text-white font-sans">

    <div class="flex">
        
        <?php include_once '../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 Controls Panel Context Component -->
            <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">Employee Directory</h1>
                        <p class="text-[10px] text-indigo-700 font-bold uppercase tracking-wider">Admin: <?= htmlspecialchars($username) ?></p>
                    </div>
                </div>
                
                <div class="flex items-center gap-2">
                    <button class="bg-white hover:bg-stone-50 border border-slate-300 text-slate-700 px-3 py-1 rounded-md text-[10px] font-black uppercase tracking-wider transition shadow-xs active:scale-[0.98]">Export</button>
                    <button class="bg-white hover:bg-stone-50 border border-slate-300 text-slate-700 px-3 py-1 rounded-md text-[10px] font-black uppercase tracking-wider transition shadow-xs active:scale-[0.98]">Import</button>
                    <div class="flex items-center gap-2">

    <a
        href="organogram.php"
        class="bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 text-indigo-800 px-3 py-1 rounded-md font-black text-[10px] uppercase tracking-wider transition"
    >
        Organogram
    </a>

    <a
        href="employee_add.php"
        class="bg-slate-900 hover:bg-slate-800 text-white px-3 py-1 rounded-md font-black text-[10px] uppercase tracking-wider transition shadow-xs border border-slate-950"
    >
        Add Employee
    </a>

</div>
                </div>
            </header>

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

                <!-- Stat Aggregations Grid Framework Component -->
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-xs">
                        <p class="text-slate-500 text-[9px] font-black uppercase tracking-wider">Total Workforce</p>
                        <h2 class="text-2xl font-black text-slate-950 tracking-tight mt-0.5"><?= $totalEmployees ?></h2>
                    </div>
                    <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-xs">
                        <p class="text-slate-500 text-[9px] font-black uppercase tracking-wider">Managers</p>
                        <h2 class="text-2xl font-black text-indigo-700 tracking-tight mt-0.5"><?= $totalManagers ?></h2>
                    </div>
                    <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-xs">
                        <p class="text-slate-500 text-[9px] font-black uppercase tracking-wider">Departments</p>
                        <h2 class="text-2xl font-black text-emerald-800 tracking-tight mt-0.5"><?= $totalDepartments ?></h2>
                    </div>
                    <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-xs">
                        <p class="text-slate-500 text-[9px] font-black uppercase tracking-wider">New Hires</p>
                        <h2 class="text-2xl font-black text-amber-900 tracking-tight mt-0.5"><?= $newHires ?></h2>
                    </div>
                </div>

                <!-- Filter Execution Console -->
                <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-xs">
                    <form method="GET" class="flex flex-col sm:flex-row items-center gap-3">
                        <input type="text" name="search" value="<?= htmlspecialchars($search) ?>" placeholder="Search directory records..." class="w-full flex-1 bg-stone-50/50 border border-slate-300/80 text-xs font-bold text-slate-950 placeholder-slate-400 focus:outline-none focus:border-indigo-600 focus:bg-white rounded-lg p-2.5 transition">
                        
                        <select name="department" class="w-full sm:w-64 bg-stone-50/50 border border-slate-300/80 text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-600 focus:bg-white rounded-lg p-2.5 transition">
                            <option value="0">All Corporate Departments</option>
                            <?php foreach ($departments as $id => $dept): ?>
                                <option value="<?= $id ?>" <?= $departmentFilter == $id ? 'selected' : '' ?>><?= htmlspecialchars($dept) ?></option>
                            <?php endforeach; ?>
                        </select>
                        
                        <div class="flex gap-2 w-full sm:w-auto shrink-0">
                            <button type="submit" class="flex-1 sm:flex-none bg-slate-900 hover:bg-slate-800 text-white font-black text-[10px] px-4 py-2.5 rounded-lg uppercase tracking-wider transition border border-slate-950 shadow-xs active:scale-[0.98]">Search</button>
                            <a href="employees.php" class="flex-1 sm:flex-none bg-white hover:bg-stone-50 border border-slate-300 text-slate-700 font-black text-[10px] px-4 py-2.5 rounded-lg uppercase tracking-wider text-center transition shadow-xs active:scale-[0.98]">Reset</a>
                        </div>
                    </form>
                </div>

                <!-- Primary Registry Interface Component -->
                <div class="bg-white border border-slate-300/80 rounded-xl shadow-xs overflow-hidden">
                    <div class="overflow-x-auto w-full">
                        <table class="w-full text-left border-collapse whitespace-nowrap">
                            <thead>
                                <tr class="bg-stone-50/80 border-b border-slate-300/80 text-slate-500 text-[9px] font-black uppercase tracking-wider">
                                    <th class="p-3 pl-6 text-center w-12">#</th>
                                    <th class="p-3">Staff Identity Name</th>
                                    <th class="p-3 w-36">Employee ID</th>
                                    <th class="p-3">Department Scope</th>
                                    <th class="p-3">Designation Title</th>
                                    <th class="p-3 text-center w-28">Status</th>
                                    <th class="p-3 w-32">Joined Date</th>
                                    <th class="p-3 text-center w-36 pr-6">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200/80 text-xs font-bold">
                                <?php 
                                $counter = $offset + 1;
                                if (!empty($employees)):
                                    foreach ($employees as $emp): 

                                        // Extract raw string from any potential key
                                        $rawPath = !empty($emp['avater']) ? trim($emp['avater']) : (!empty($emp['avatar']) ? trim($emp['avatar']) : '');
                                        $profilePhoto = null;

                                        if (!empty($rawPath)) {
                                            // Strip any leading slashes or relative dot prefixes
                                            $cleanPath = ltrim(str_replace('\\', '/', $rawPath), './');

                                            // Server root check
                                            $serverCheckPath = __DIR__ . '/../' . $cleanPath;

                                            if (file_exists($serverCheckPath)) {
                                                $profilePhoto = '../' . htmlspecialchars($cleanPath);
                                            }
                                        }
                                ?>
                                <tr class="hover:bg-stone-50/50 transition-colors text-slate-800">
                                    <td class="p-3 pl-6 text-center text-slate-400 font-mono font-semibold"><?= $counter++ ?></td>
                                    <td class="p-3">
                                        <div class="flex items-center gap-3">
                                            <!-- AVATAR RENDERER WITH INITIALS FALLBACK -->
                                            <div class="w-8 h-8 rounded-lg border border-slate-300 bg-stone-100 text-slate-800 font-black text-[11px] flex items-center justify-center uppercase select-none overflow-hidden shrink-0">
                                                <?php if ($profilePhoto): ?>
                                                    <img src="<?= $profilePhoto ?>" alt="<?= htmlspecialchars($emp['name']) ?>" class="w-full h-full object-cover">
                                                <?php else: ?>
                                                    <?= htmlspecialchars($emp['initials'] ?? 'EE') ?>
                                                <?php endif; ?>
                                            </div>
                                            <div>
                                                <div class="text-slate-950 font-black tracking-tight"><?= htmlspecialchars($emp['name']) ?></div>
                                                <div class="text-slate-500 text-[10px] font-mono font-semibold mt-0.5"><?= htmlspecialchars($emp['email']) ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-3">
                                        <span class="inline-block px-2 py-0.5 rounded-md border border-slate-300 bg-stone-100 text-slate-800 text-[10px] font-mono font-extrabold"><?= htmlspecialchars($emp['employee_no']) ?></span>
                                    </td>
                                    <td class="p-3 text-slate-900 font-black"><?= htmlspecialchars($emp['department']) ?></td>
                                    <td class="p-3 text-slate-600 font-bold"><?= htmlspecialchars($emp['designation']) ?></td>
                                    <td class="p-3 text-center">
                                        <span class="inline-block px-2 py-0.5 rounded-md border border-emerald-300 bg-emerald-50 text-emerald-900 text-[10px] font-black uppercase tracking-wider">Active</span>
                                    </td>
                                    <td class="p-3 text-slate-500 font-mono text-[11px] font-bold"><?= htmlspecialchars($emp['date_hired']) ?></td>
                                    <td class="p-3 text-center pr-6">
                                        <div class="flex items-center justify-center gap-3">
                                            <a href="employee_view.php?id=<?= $emp['id'] ?>" class="text-indigo-700 hover:text-indigo-900 font-black uppercase tracking-wider text-[10px] transition">View</a>
                                            <a href="employee_edit.php?id=<?= $emp['id'] ?>" class="text-amber-800 hover:text-amber-950 font-black uppercase tracking-wider text-[10px] transition">Edit</a>
                                            <a href="employee_security.php?id=<?= $emp['id'] ?>" class="text-emerald-800 hover:text-emerald-950 font-black uppercase tracking-wider text-[10px] transition">Keys</a>
                                            <a href="employee_delete.php?id=<?= $emp['id'] ?>" onclick="return confirm('Delete this record?');" class="text-rose-600 hover:text-rose-800 font-black uppercase tracking-wider text-[10px] transition">Delete</a>
                                        </div>
                                    </td>
                                </tr>
                                <?php 
                                    endforeach; 
                                else: 
                                ?>
                                <tr>
                                    <td colspan="8" class="text-center p-8 text-slate-400 font-semibold tracking-tight">No records matched your runtime filters.</td>
                                </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>

                    <!-- Registry Pagination Framework Components -->
                    <?php if ($totalPages > 1): ?>
                        <div class="bg-stone-50/50 border-t border-slate-200/80 px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3">
                            <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Showing entries <?= $offset + 1 ?> to <?= min($offset + $perPage, $totalRows) ?> of <?= $totalRows ?> Records</div>
                            <div class="flex items-center gap-1">
                                <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                                    <a href="?page=<?= $i ?>&search=<?= urlencode($search) ?>&department=<?= $departmentFilter ?>" class="px-2.5 py-1 rounded-md text-[10px] font-black transition uppercase tracking-wider border <?= $page == $i ? 'bg-slate-900 border-slate-950 text-white shadow-xs' : 'bg-white border-slate-300 text-slate-700 hover:bg-stone-50' ?>"><?= $i ?></a>
                                <?php endfor; ?>
                            </div>
                        </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>
    <script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        if(sidebar) sidebar.classList.toggle('-translate-x-full');
        if(overlay) overlay.classList.toggle('hidden');
    }
    </script>
</body>
</html>