<?php

session_name('super_admin_session');

if (!is_dir(dirname(__DIR__) . '/session_data/super')) {

    mkdir(dirname(__DIR__) . '/session_data/super', 0700, true);

}

session_save_path(dirname(__DIR__) . '/session_data/super');

session_set_cookie_params(['path' => '/', 'httponly' => true, 'samesite' => 'Strict']);

session_start();

error_reporting(0);

include('includes/dbconnection.php');



if (!isset($_SESSION['sid']) || strlen($_SESSION['sid']) == 0) {

    header('location:logout.php');

    exit();

}



// Ensure this is actually a Super User, not a leaked session from another portal

if (!isset($_SESSION['permission']) || $_SESSION['permission'] !== 'Super User') {

    header('location:logout.php');

    exit();

}



$id = $_SESSION['sid'];

$sql = "SELECT * FROM tblusers WHERE id = '$id'";

$result = mysqli_query($con, $sql);

$row = mysqli_fetch_assoc($result);



$status = isset($row['status']) ? (int) $row['status'] : 0;

$firstname = $row['name'] ?? '';

$lastname = $row['lastname'] ?? '';

$userimage = !empty($row['userimage']) && file_exists("staff_images/" . $row['userimage'])

    ? "staff_images/" . htmlspecialchars($row['userimage'])

    : "default.png";

?>



<!DOCTYPE html>

<html lang="en">



<head>

    <?php @include("includes/head.php"); ?>





</head>



<body class="hold-transition sidebar-mini layout-fixed">

    <div class="wrapper">

        <?php @include("includes/header.php"); ?>

        <?php @include("includes/sidebar.php"); ?>



        <div class="content-wrapper">



            <!-- Admin Header -->

            <div id="pageHeader" class="content-header py-4 rounded shadow-sm mb-4 sticky-top"

                style="background: linear-gradient(135deg, var(--dark), var(--primary)); color: #fff; z-index: 1020; transition: all 0.3s ease;">

                <div class="container-fluid">

                    <div class="d-flex justify-content-between align-items-center flex-wrap">



                        <!-- Profile & Welcome -->

                        <div class="d-flex align-items-center mb-2 mb-md-0">

                            <div

                                style="width:60px; height:60px; border-radius:50%; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; margin-right:15px; transition: all 0.3s ease;">

                                <?php if ($userimage !== "default.png"): ?>

                                    <img src="<?php echo $userimage; ?>" alt="Admin Picture"

                                        style="width:100%; height:100%; object-fit:cover;" class="img-circle img-fluid">

                                <?php else: ?>

                                    <i class="fas fa-user-circle" style="font-size:60px; color:var(--primary);"></i>

                                <?php endif; ?>

                            </div>

                            <div>

                                <h4 class="mb-1 fw-bold" style="transition: all 0.3s ease;">

                                    <?php echo htmlspecialchars($firstname . ' ' . $lastname); ?>,

                                </h4>

                                <h6 class="mb-0">Welcome to your dashboard</h6>

                                <small style="opacity:0.9;">Manage payments, results, attendance, students and

                                    more.</small>

                            </div>

                        </div>



                        <!-- Admin Status -->

                        <div>

                            <h6 class="fw-bold mb-2 student-status-heading">Admin Status</h6>

                            <?php

                            $admissionStatusOptions = [

                                2 => ['text' => 'Active', 'class' => 'bg-success'],

                                1 => ['text' => 'Active', 'class' => 'bg-success'],

                            ];

                            $admissionStatus = $admissionStatusOptions[$status] ?? ['text' => 'Unknown', 'class' => 'bg-secondary'];

                            ?>

                            <div>

                                <span class="badge <?= $admissionStatus['class']; ?> d-block p-2"

                                    style="font-size:1rem;">

                                    <?= htmlspecialchars($admissionStatus['text']); ?>

                                </span>

                            </div>

                        </div>



                    </div>

                </div>

            </div>



            <style>

                .student-status-heading {

                    position: relative;

                    display: inline-block;

                    color: #fff;

                    padding-bottom: 4px;

                }



                .student-status-heading::after {

                    content: "";

                    position: absolute;

                    left: 0;

                    bottom: 0;

                    height: 2px;

                    width: 0;

                    background-color: rgba(255, 255, 255, 0.3);

                    transition: width 0.6s ease-in-out;

                }



                body.loaded .student-status-heading::after {

                    width: 100%;

                }

            </style>



            <script>

                window.addEventListener("load", function () {

                    document.body.classList.add("loaded");

                });



                // Shrink header on scroll

                window.addEventListener('scroll', function () {

                    let header = document.getElementById('pageHeader');

                    let profilePic = header.querySelector("div[style*='width:60px']");

                    let nameTag = header.querySelector("h4");



                    if (window.scrollY > 50) {

                        header.style.padding = "0.5rem 0";

                        profilePic.style.width = "40px";

                        profilePic.style.height = "40px";

                        nameTag.style.fontSize = "1rem";

                    } else {

                        header.style.padding = "1rem 0";

                        profilePic.style.width = "60px";

                        profilePic.style.height = "60px";

                        nameTag.style.fontSize = "1.25rem";

                    }

                });

            </script>



            <section class="content px-6">

                <div class="container-fluid">



                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-10">

                        <?php

                        $dashboard_items = [

                            ["query" => "SELECT * FROM students WHERE status = 4", "label" => "Applicant", "icon" => "fas fa-user-check", "bg" => "bg-primary", "link" => "studentlist.php"],

                            ["query" => "SELECT * FROM students WHERE status = 2", "label" => "Provisional Students", "icon" => "fas fa-users", "bg" => "bg-primary", "link" => "studentlist_1.php"],

                            ["query" => "SELECT * FROM students WHERE status = 1", "label" => "Fully Enrolled", "icon" => "fas fa-user-tie", "bg" => "bg-primary", "link" => "student_list.php"],

                            ["query" => "SELECT * FROM payment WHERE DATE(payment_date) = CURDATE()", "label" => "Approved Payment(s) Today", "icon" => "fas fa-calendar-check", "bg" => "bg-success", "link" => "viewpaymenttoday.php"],

                            ["query" => "SELECT * FROM message WHERE status=0", "label" => "Pending Payments", "icon" => "fas fa-hourglass-half", "bg" => "bg-warning", "link" => "request.php"],

                            ["query" => "SELECT * FROM payment", "label" => "Approved Payments", "icon" => "fas fa-check-circle", "bg" => "bg-success", "link" => "viewpayment.php"],

                            ["query" => "SELECT SUM(balance) as total_wallet FROM wallets", "label" => "Total in Wallet", "icon" => "fas fa-wallet", "bg" => "bg-info", "link" => "manage_wallet.php"],

                            ["query" => "SELECT * FROM feedback WHERE status='pending'", "label" => "Feedback", "icon" => "fas fa-comments", "bg" => "bg-info", "link" => "feedback1.php"],

                            ["query" => "SELECT * FROM message WHERE status=3", "label" => "Unresolved Payments", "icon" => "fas fa-exclamation-triangle", "bg" => "bg-warning", "link" => "requestun.php"],

                            ["query" => "SELECT * FROM message WHERE status = 5", "label" => "Unrelated Payments", "icon" => "fas fa-exclamation-circle", "bg" => "bg-danger", "link" => "unrelated.php"],

                            ["query" => "SELECT * FROM students WHERE status = 3", "label" => "Graduated Students", "icon" => "fas fa-user-graduate", "bg" => "bg-secondary", "link" => "graduated_students.php"],

                            ["query" => "SELECT * FROM students WHERE demote_status = 1", "label" => "Demoted Students", "icon" => "fas fa-user-minus", "bg" => "bg-warning", "link" => "demote_students.php"],

                            ["query" => "SELECT * FROM message WHERE status = 2", "label" => "Disapproved Payments", "icon" => "fas fa-ban", "bg" => "bg-danger", "link" => "disapprove.php"],
                            ["label" => "Daily Reconciliation", "icon" => "fas fa-balance-scale", "bg" => "bg-teal", "link" => "daily_reconciliation.php", "static" => true],

                        ];



                        $styleMap = [

                            "bg-primary" => ["bg" => "bg-blue-50", "text" => "text-blue-600"],

                            "bg-success" => ["bg" => "bg-emerald-50", "text" => "text-emerald-600"],

                            "bg-warning" => ["bg" => "bg-orange-50", "text" => "text-orange-600"],

                            "bg-info" => ["bg" => "bg-cyan-50", "text" => "text-cyan-600"],

                            "bg-danger" => ["bg" => "bg-rose-50", "text" => "text-rose-600"],

                            "bg-secondary" => ["bg" => "bg-slate-50", "text" => "text-slate-600"],
                            "bg-teal" => ["bg" => "bg-teal-50", "text" => "text-teal-600"],

                        ];



                        foreach ($dashboard_items as $item) {

                            $is_static = !empty($item['static']);

                            if ($is_static) {

                                $display_value = 0;

                                $is_money = false;

                            } else {

                                $res = mysqli_query($con, $item["query"]);



                                // Check if the query is a SUM query

                                if (strpos(strtoupper($item["query"]), 'SUM') !== false) {

                                    $row = mysqli_fetch_assoc($res);

                                    // We use the first column of the result (the sum)

                                    $display_value = $row[array_key_first($row)] ?? 0;

                                    $is_money = true;

                                } else {

                                    // Otherwise, just count the rows

                                    $display_value = mysqli_num_rows($res);

                                    $is_money = false;

                                }

                            }



                            $st = $styleMap[$item['bg']] ?? $styleMap["bg-secondary"];

                            ?>

                            <div class="bento-card group">

                                <div class="flex justify-between items-start mb-3">

                                    <div

                                        class="w-10 h-10 <?php echo $st['bg']; ?> <?php echo $st['text']; ?> rounded-xl flex items-center justify-center text-base transition-transform group-hover:scale-110">

                                        <i class="<?php echo $item['icon']; ?>"></i>

                                    </div>

                                    <a href="<?php echo $item['link']; ?>"

                                        class="text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter">

                                        <i class="fas fa-arrow-right"></i> CLICK HERE

                                    </a>

                                </div>



                                <?php if ($is_static): ?>

                                <h2 class="text-2xl font-black text-slate-800 tracking-tight">

                                    <i class="<?php echo $item['icon']; ?> text-teal-600"></i>

                                </h2>

                                <?php else: ?>

                                <h2 class="text-2xl font-black text-slate-800 tracking-tight">

                                    <?php

                                    echo ($is_money) ? "₦" . number_format($display_value, 2) : number_format($display_value);

                                    ?>

                                </h2>

                                <?php endif; ?>

                                <p class="text-[12px] font-bold text-slate-500 uppercase tracking-tight truncate">

                                    <?php echo $item['label']; ?></p>



                                <div class="mt-4 w-full h-1 bg-slate-200/50 rounded-full overflow-hidden">

                                    <div

                                        class="h-full <?php echo str_replace('text-', 'bg-', $st['text']); ?> opacity-40 w-full transform -translate-x-1/2 group-hover:translate-x-0 transition-transform duration-1000">

                                    </div>

                                </div>

                            </div>

                        <?php } ?>

                    </div>

                    <div class="mt-8 space-y-8">



                        <!-- Calendar Section -->

                        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden">

                            <div class="px-6 py-3 border-b border-slate-100 flex items-center gap-3">

                                <span

                                    class="w-8 h-8 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center text-sm shadow-sm">📅</span>

                                <div>

                                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Overview

                                    </p>

                                    <h5 class="text-sm font-black text-slate-700 leading-tight">School Calendar</h5>

                                </div>

                            </div>

                            <div class="px-6 pt-3 pb-4">

                                <div id="calendar"></div>

                            </div>

                        </div>



                        <!-- Analytics Section -->

                        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden">

                            <div class="px-6 py-3 border-b border-slate-100 flex items-center gap-3">

                                <span

                                    class="w-8 h-8 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center text-sm shadow-sm">📊</span>

                                <div>

                                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Analytics

                                    </p>

                                    <h5 class="text-sm font-black text-slate-700 leading-tight">Analytics Overview</h5>

                                </div>

                            </div>

                            <div class="px-6 pt-3 pb-4">

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">



                                    <!-- Payments Doughnut -->

                                    <div

                                        class="relative bg-white rounded-2xl border border-slate-100 shadow-sm p-5 overflow-hidden group hover:shadow-md transition-shadow duration-300">

                                        <div

                                            class="absolute inset-0 bg-gradient-to-br from-emerald-50/60 via-white to-white pointer-events-none rounded-2xl">

                                        </div>

                                        <div class="relative z-10 flex flex-col h-full">

                                            <div class="flex items-center justify-between mb-4">

                                                <div>

                                                    <p

                                                        class="text-[11px] font-bold uppercase tracking-widest text-slate-400">

                                                        Payments</p>

                                                    <h6 class="text-sm font-black text-slate-700 leading-tight">Status

                                                        Breakdown</h6>

                                                </div>

                                                <span

                                                    class="w-9 h-9 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-base flex-shrink-0">💳</span>

                                            </div>

                                            <div class="relative h-48 w-full">

                                                <canvas id="paymentsPieChart"></canvas>

                                            </div>

                                        </div>

                                    </div>



                                    <!-- Students Bar -->

                                    <div

                                        class="relative bg-white rounded-2xl border border-slate-100 shadow-sm p-5 overflow-hidden group hover:shadow-md transition-shadow duration-300">

                                        <div

                                            class="absolute inset-0 bg-gradient-to-br from-indigo-50/60 via-white to-white pointer-events-none rounded-2xl">

                                        </div>

                                        <div class="relative z-10 flex flex-col h-full">

                                            <div class="flex items-center justify-between mb-4">

                                                <div>

                                                    <p

                                                        class="text-[11px] font-bold uppercase tracking-widest text-slate-400">

                                                        Students</p>

                                                    <h6 class="text-sm font-black text-slate-700 leading-tight">

                                                        Registrations</h6>

                                                </div>

                                                <span

                                                    class="w-9 h-9 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center text-base flex-shrink-0">🎓</span>

                                            </div>

                                            <div class="relative h-48 w-full">

                                                <canvas id="studentsBarChart"></canvas>

                                            </div>

                                        </div>

                                    </div>



                                    <!-- Monthly Revenue Line -->

                                    <div

                                        class="relative bg-white rounded-2xl border border-slate-100 shadow-sm p-5 overflow-hidden group hover:shadow-md transition-shadow duration-300">

                                        <div

                                            class="absolute inset-0 bg-gradient-to-br from-blue-50/60 via-white to-white pointer-events-none rounded-2xl">

                                        </div>

                                        <div class="relative z-10 flex flex-col h-full">

                                            <div class="flex items-center justify-between mb-4">

                                                <div>

                                                    <p

                                                        class="text-[11px] font-bold uppercase tracking-widest text-slate-400">

                                                        Revenue</p>

                                                    <h6 class="text-sm font-black text-slate-700 leading-tight">Monthly

                                                        Trend</h6>

                                                </div>

                                                <span

                                                    class="w-9 h-9 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center text-base flex-shrink-0">📈</span>

                                            </div>

                                            <div class="relative h-48 w-full">

                                                <canvas id="monthlyPaymentsChart"></canvas>

                                            </div>

                                        </div>

                                    </div>



                                </div>

                            </div>

                        </div>



                    </div>

            </section>

        </div>



        <?php @include("includes/footer.php"); ?>

    </div>



    <?php @include("includes/foot.php"); ?>



    <script>

        // Scroll Effect for Header

        window.addEventListener('scroll', function () {

            const header = document.getElementById('pageHeader');

            const profile = document.getElementById('profileContainer');

            if (window.scrollY > 50) {

                header.classList.add('py-3', 'shadow-2xl');

                header.classList.remove('py-6');

                profile.classList.add('scale-75', 'w-12', 'h-12');

            } else {

                header.classList.remove('py-3', 'shadow-2xl');

                header.classList.add('py-6');

                profile.classList.remove('scale-75', 'w-12', 'h-12');

            }

        });

    </script>

</body>



</html>