<?php
include '../db.php';

// Start the session if it's not already started
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Use strict comparison (===) to check for integer 1
if (!isset($_SESSION['mpid']) || $_SESSION['mpid'] !== 1) {
    header("Location: http://localhost/LoanApprovalPredction/admin.php");
    exit();
}

$mpid = $_SESSION['mpid'];
date_default_timezone_set("Asia/Kathmandu");
$date = date("Y-m-d H:i:s");

// Sample statistics (replace with actual database queries if needed)
$totalMembersQuery = "SELECT COUNT(*) AS total FROM members WHERE Email <> 'agyat@gmail.com' AND MembersName <> 'Agyat Manchhe'";
$totalMembersResult = mysqli_query($conn, $totalMembersQuery);
$totalMembersRow = mysqli_fetch_assoc($totalMembersResult);
$totalMembers = $totalMembersRow['total'];

$pendingTasks = 5; // Placeholder, replace with actual query
$recentEvents = 3; // Placeholder, replace with actual query
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="icon" href="../images/Icon.png">
    <script src="../CSS/tailwindcss.css"></script>
    <style>
        .clock {
            width: 200px;
            height: 200px;
            border: 8px solid #2d3748;
            border-radius: 50%;
            position: relative;
            margin: 0 auto;
            background: radial-gradient(circle, #e2e8f0 0%, #cbd5e1 100%);
            box-shadow: 
                0 0 20px rgba(0, 0, 0, 0.2),
                inset 0 0 10px rgba(0, 0, 0, 0.3),
                0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .tick {
            position: absolute;
            width: 2px;
            background: #4b5563;
            top: 10px;
            left: 50%;
            transform-origin: 50% 90px;
        }
        .tick.hour {
            height: 10px;
            background: #1f2937;
            width: 3px;
        }
        .tick.minute {
            height: 6px;
            background: #6b7280;
        }
        .hand {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 50% 100%;
            background: #1f2937;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        .hour-hand {
            width: 4px;
            height: 60px;
            transform: translateY(-60px);
            background: linear-gradient(to top, #1f2937, #4b5563);
        }
        .minute-hand {
            width: 3px;
            height: 80px;
            transform: translateY(-80px);
            background: linear-gradient(to top, #1f2937, #4b5563);
        }
        .second-hand {
            width: 2px;
            height: 90px;
            transform: translateY(-90px);
            background: linear-gradient(to top, #dc2626, #f87171);
        }
        .clock-center {
            width: 12px;
            height: 12px;
            background: #1f2937;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        .glass {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-green-50 min-h-screen">
    <header class="sticky top-0 z-50">
        <?php include '../includes/newnavbar.php'; ?>
    </header>

    <main class="p-6">
        <div class="max-w-4xl mx-auto bg-white shadow rounded-xl p-6">
            <h1 class="text-3xl font-bold text-gray-800 mb-6">Admin Dashboard</h1>

            <h2 class="text-2xl font-semibold text-gray-800 mt-8 mb-4">Overview</h2>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                <div class="bg-gray-100 p-4 rounded-xl text-center flex items-center justify-center gap-2">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Total Members</h3>
                        <p class="text-2xl text-gray-600"><?php echo htmlspecialchars($totalMembers); ?></p>
                    </div>
                </div>
                <div class="bg-gray-100 p-4 rounded-xl text-center flex items-center justify-center gap-2">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Pending Tasks</h3>
                        <p class="text-2xl text-gray-600"><?php echo htmlspecialchars($pendingTasks); ?></p>
                    </div>
                </div>
                <div class="bg-gray-100 p-4 rounded-xl text-center flex items-center justify-center gap-2">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Recent Events</h3>
                        <p class="text-2xl text-gray-600"><?php echo htmlspecialchars($recentEvents); ?></p>
                    </div>
                </div>
            </div>

            <h2 class="text-2xl font-semibold text-gray-800 mt-8 mb-4">Current Time</h2>
            <div class="clock">
                <div class="clock-face">
                    <?php for ($i = 0; $i < 60; $i++): ?>
                        <div class="tick <?php echo ($i % 5 === 0) ? 'hour' : 'minute'; ?>" style="transform: rotate(<?php echo $i * 6; ?>deg);"></div>
                    <?php endfor; ?>
                    <div class="hand hour-hand"></div>
                    <div class="hand minute-hand"></div>
                    <div class="hand second-hand"></div>
                    <div class="clock-center"></div>
                    <div class="glass"></div>
                </div>
            </div>

            <p class="text-gray-600 text-sm mt-6">Current Date and Time: <?php echo htmlspecialchars($date); ?></p>
        </div>
    </main>

    <footer class="mt-8 text-center text-gray-600 p-6">
        <p>© <?php echo date("Y"); ?> Loan Approval Prediction. All rights reserved.</p>
    </footer>

    <script>
        function updateClock() {
            const now = new Date();
            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours() % 12 || 12; // Convert 0 to 12 for midnight/noon

            const secondsDegrees = (seconds / 60) * 360;
            const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;
            const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30;

            document.querySelector('.second-hand').style.transform = `translateY(-90px) rotate(${secondsDegrees}deg)`;
            document.querySelector('.minute-hand').style.transform = `translateY(-80px) rotate(${minutesDegrees}deg)`;
            document.querySelector('.hour-hand').style.transform = `translateY(-60px) rotate(${hoursDegrees}deg)`;
        }

        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>