<?php
require '../config.php';

if (session_status() === PHP_SESSION_NONE && !headers_sent()) { session_start(); }
session_write_close();

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

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

$stmt = $conn->prepare("
    SELECT 
        e.*,
        d.name AS department
    FROM employees e
    LEFT JOIN departments d ON d.id = e.department_id
    WHERE e.user_id = ?
    LIMIT 1
");
$stmt->bind_param("i", $userId);
$stmt->execute();
$employee = $stmt->get_result()->fetch_assoc();

if (!$employee) {
    die("Profile framework record missing.");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile - Core Self Service</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../components/sidebar.css">
</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">Identity</h1>
                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">My Profile Records</p>
                    </div>
                </div>
            </header>

            <main class="flex-1 p-4 sm:p-6 max-w-4xl 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">Active Identity Credentials</h2>
                        <p class="text-[11px] text-slate-500 font-medium mt-0.5">Manage your structural placement metadata, authorized node references, and personal communication settings.</p>
                    </div>
                </div>

                <!-- Profile Information Card Matrix -->
                <div class="bg-white border border-slate-300/80 rounded-xl p-6 shadow-xs">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 w-full">

                        <div class="border-b border-slate-200 pb-3 min-w-0">
                            <label class="block text-[10px] font-black uppercase tracking-wider text-slate-400 mb-1">
                                Full Name
                            </label>
                            <div class="text-sm font-black text-slate-950 tracking-tight truncate">
                                <?= htmlspecialchars($employee['name'] ?? '—') ?>
                            </div>
                        </div>

                        <div class="border-b border-slate-200 pb-3 min-w-0">
                            <label class="block text-[10px] font-black uppercase tracking-wider text-slate-400 mb-1">
                                Operational Department
                            </label>
                            <div class="text-sm font-black text-slate-900 tracking-tight truncate">
                                <?= htmlspecialchars($employee['department'] ?? 'Unassigned Pool') ?>
                            </div>
                        </div>

                        <div class="border-b border-slate-200 pb-3 min-w-0">
                            <label class="block text-[10px] font-black uppercase tracking-wider text-slate-400 mb-1">
                                Communication Node (Phone)
                            </label>
                            <div class="text-sm font-mono font-bold text-slate-700 truncate">
                                <?= htmlspecialchars($employee['phone'] ?? '—') ?>
                            </div>
                        </div>

                        <div class="border-b border-slate-200 pb-3 min-w-0">
                            <label class="block text-[10px] font-black uppercase tracking-wider text-slate-400 mb-1">
                                Enterprise Email Address
                            </label>
                            <div class="text-sm font-mono font-bold text-slate-700 break-all">
                                <?= htmlspecialchars($employee['email'] ?? '—') ?>
                            </div>
                        </div>

                    </div>
                </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>