<?php
require '../config.php';
session_start();
session_write_close();

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

// Optional username pull to match your header style
$username = $_SESSION['username'] ?? 'Executive';

$totalPeriods = $conn->query("
SELECT COUNT(*) total
FROM appraisal_periods
")->fetch_assoc()['total'];

$totalOpen = $conn->query("
SELECT COUNT(*) total
FROM appraisal_periods
WHERE status='Open'
")->fetch_assoc()['total'];

$totalAppraisals = $conn->query("
SELECT COUNT(*) total
FROM employee_appraisals
")->fetch_assoc()['total'];

$totalCompleted = $conn->query("
SELECT COUNT(*) total
FROM employee_appraisals
WHERE status='Completed'
")->fetch_assoc()['total'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Dashboard - Executive HR Boardroom</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../components/sidebar.css">
</head>
<body class="bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100 min-h-screen flex flex-col md:flex-row overflow-x-hidden font-sans">

<?php include '../components/sidebar.php'; ?>

<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 hidden z-40" onclick="toggleSidebar()"></div>

<div class="mobile-trigger-bar w-full bg-slate-900 text-white flex items-center justify-between p-4 md:hidden sticky top-0 z-30 shadow-md">
    <span class="font-bold tracking-wide">HR System</span>
    <button onclick="toggleSidebar()" class="bg-white/10 hover:bg-white/20 px-3 py-2 rounded-lg text-xl transition">
        ☰
    </button>
</div>

<div id="main-content" class="flex-1 content-expanded transition-all duration-300 w-full p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">

    <div class="bg-white/70 backdrop-blur-xl border border-white/40 p-5 rounded-3xl shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl sm:text-3xl font-black text-gray-800">Performance Management</h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-1">
                Welcome back, <span class="font-extrabold text-blue-600"><?= htmlspecialchars($username); ?></span>
            </p>
        </div>
        <div class="bg-blue-100 text-blue-700 px-4 py-2 rounded-xl font-bold text-xs sm:text-sm shadow-sm text-center">
            Review Status: <span class="font-black">Active Cycles</span>
        </div>
    </div>

    <div class="space-y-3">
        <h2 class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1">1. KPI & Evaluation Cycle Volume</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">

            <div class="bg-white rounded-3xl p-5 sm:p-6 shadow-md border border-white/60 hover:shadow-xl transition-all duration-300">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-400 text-xs sm:text-sm font-semibold uppercase tracking-wider">Appraisal Periods</p>
                        <h2 class="text-3xl sm:text-4xl font-black text-blue-600 mt-2"><?= $totalPeriods ?></h2>
                        <p class="text-[11px] text-slate-400 mt-1">Total operational cycles configured.</p>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl flex items-center justify-center text-xl sm:text-2xl bg-gradient-to-br from-blue-50 to-blue-100 shadow-sm shrink-0">
                        📅
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-3xl p-5 sm:p-6 shadow-md border border-white/60 hover:shadow-xl transition-all duration-300">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-400 text-xs sm:text-sm font-semibold uppercase tracking-wider">Open Periods</p>
                        <h2 class="text-3xl sm:text-4xl font-black text-green-600 mt-2"><?= $totalOpen ?></h2>
                        <p class="text-[11px] text-slate-400 mt-1">Active windows accepting submissions.</p>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl flex items-center justify-center text-xl sm:text-2xl bg-gradient-to-br from-green-50 to-green-100 shadow-sm shrink-0">
                        🔓
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-3xl p-5 sm:p-6 shadow-md border border-white/60 hover:shadow-xl transition-all duration-300">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-400 text-xs sm:text-sm font-semibold uppercase tracking-wider">Appraisals</p>
                        <h2 class="text-3xl sm:text-4xl font-black text-purple-600 mt-2"><?= $totalAppraisals ?></h2>
                        <p class="text-[11px] text-slate-400 mt-1">Individual staff reviews triggered.</p>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl flex items-center justify-center text-xl sm:text-2xl bg-gradient-to-br from-purple-50 to-purple-100 shadow-sm shrink-0">
                        📑
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-3xl p-5 sm:p-6 shadow-md border border-white/60 hover:shadow-xl transition-all duration-300">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-400 text-xs sm:text-sm font-semibold uppercase tracking-wider">Completed</p>
                        <h2 class="text-3xl sm:text-4xl font-black text-orange-600 mt-2"><?= $totalCompleted ?></h2>
                        <p class="text-[11px] text-slate-400 mt-1">Fully signed and archived reports.</p>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl flex items-center justify-center text-xl sm:text-2xl bg-gradient-to-br from-orange-50 to-orange-100 shadow-sm shrink-0">
                        ✅
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="space-y-3">
        <h2 class="text-xs font-bold text-slate-500 uppercase tracking-widest px-1">2. Core Evaluation Utilities</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">

            <a href="appraisal_periods.php" class="group bg-white p-5 sm:p-6 rounded-3xl shadow-md border border-white/60 hover:shadow-xl transition-all duration-300 flex items-start gap-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-lg shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-300">
                    ⏱️
                </div>
                <div>
                    <h2 class="font-extrabold text-gray-800 text-base sm:text-lg group-hover:text-blue-600 transition-colors">Appraisal Periods</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">Manage yearly and quarterly appraisal cycles</p>
                </div>
            </a>

            <a href="kpi_setup.php" class="group bg-white p-5 sm:p-6 rounded-3xl shadow-md border border-white/60 hover:shadow-xl transition-all duration-300 flex items-start gap-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-lg shrink-0 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-300">
                    🎯
                </div>
                <div>
                    <h2 class="font-extrabold text-gray-800 text-base sm:text-lg group-hover:text-emerald-600 transition-colors">KPI Setup</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">Create departmental performance indicators</p>
                </div>
            </a>

            <a href="manager_review.php" class="group bg-white p-5 sm:p-6 rounded-3xl shadow-md border border-white/60 hover:shadow-xl transition-all duration-300 flex items-start gap-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center text-lg shrink-0 group-hover:bg-purple-600 group-hover:text-white transition-colors duration-300">
                    🔍
                </div>
                <div>
                    <h2 class="font-extrabold text-gray-800 text-base sm:text-lg group-hover:text-purple-600 transition-colors">Manager Reviews</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">Review employee performance submissions</p>
                </div>
            </a>

            <a href="appraisal_reports.php" class="group bg-white p-5 sm:p-6 rounded-3xl shadow-md border border-white/60 hover:shadow-xl transition-all duration-300 flex items-start gap-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center text-lg shrink-0 group-hover:bg-orange-600 group-hover:text-white transition-colors duration-300">
                    📈
                </div>
                <div>
                    <h2 class="font-extrabold text-gray-800 text-base sm:text-lg group-hover:text-orange-600 transition-colors">Performance Reports</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">View completed appraisal statistics</p>
                </div>
            </a>

        </div>
    </div>

</div>

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