<?php
session_start(); // MUST be first!

// Redirect if not logged in
if (!isset($_SESSION['email'])) {
    header("Location: login.html");
    exit();
}

require_once 'auth/db.php';

ini_set('display_errors', 1);
error_reporting(E_ALL);

$email = $_SESSION['email'];
$kycStatus = 'Not Submitted';

// Fetch the user's current KYC status from the database
if ($stmt = $conn->prepare("SELECT kyc_status FROM users WHERE email = ?")) {
    $stmt->bind_param("s", $email);
    $stmt->execute();
    
    // Use bind_result instead of get_result (works without mysqlnd)
    $stmt->bind_result($db_kyc_status);
    
    if ($stmt->fetch()) {
        $kycStatus = $db_kyc_status ?? 'Not Submitted';
    }
    $stmt->close();
}

$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Dashboard - Gobolcoin</title>
    <link rel="icon" type="image/png" href="/favicon.png">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
    <style>
        :root {
            --maroon: #8B0000;
            --white: #ffffff;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, html {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(to top right, #ffffff 70%, #8B0000 130%);
            color: #333;
            min-height: 100vh;
        }

        .logo-box {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(139, 0, 0, 0.9);
            color: white;
            padding: 8px 14px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            z-index: 999;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        }

        .logo-box img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            margin-right: 10px;
        }

        .logo-box span {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .top-bar {
            margin-top: 100px;
            text-align: center;
            position: relative;
        }

        .top-bar h1 {
            font-size: 2rem;
            color: var(--maroon);
        }

       .menu-wrapper {
            position: absolute;
            top: 0;
            right: 1em;
            display: flex;
            align-items: center;
        }

        .menu-button {
            background: none;
            border: none;
            font-size: 1.8em;
            cursor: pointer;
            color: var(--maroon);
        }

        .miningdashboard-btn { /* Changed from .home-icon-btn */
            font-size: 1.1em; /* Reduced font size for better fit */
            text-decoration: none;
            background: var(--maroon);
            color: white;
            padding: 8px 14px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 0.5em; /* Added gap for spacing between icon and text */
        }

        .miningdashboard-btn .icon {
            font-size: 1.8em;
            line-height: 1; /* Aligns the icon better */
        }

        .whitepaper-btn {
            background-color: var(--maroon);
            color: white;
            padding: 0.4em 0.8em;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: bold;
            text-decoration: none;
            margin-right: 0.5em;
            vertical-align: middle;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 3em;
            gap: 1em;
        }

        .button {
            background-color: var(--white);
            color: var(--maroon);
            border: 1px solid #ccc;
            border-radius: 15px;
            font-size: 1.1em;
            padding: 1em;
            width: 90%;
            max-width: 350px;
            display: flex;
            align-items: center;
            gap: 1em;
            justify-content: flex-start;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #f7f7f7;
        }
        
        .button.disabled {
            background-color: #e9e9e9;
            color: #999;
            cursor: not-allowed;
            pointer-events: none;
        }

        .icon {
            font-size: 1.3em;
        }

        .row {
            display: flex;
            justify-content: center;
            gap: 1em;
            flex-wrap: nowrap;
            margin: 1em auto;
            max-width: 700px;
        }

        .row .button {
            flex: 1;
            max-width: 300px;
        }
        
        .kyc-message {
            margin-top: 5px;
            font-size: 0.9em;
            color: #666;
            text-align: center;
        }

        footer {
            text-align: center;
            padding: 2em 1em;
            background-color: #1a1a1a;
            color: #ccc;
            font-size: 0.9em;
            margin-top: auto;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1em;
            margin-bottom: 1em;
        }

        .footer-links a {
            color: #ccc;
            text-decoration: none;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .socials {
            margin-top: 1em;
        }

        .socials a {
            margin: 0 8px;
        }

        .socials img {
            width: 24px;
            height: 24px;
        }

        .footer-bottom {
            margin-top: 1em;
            color: #888;
        }
        
        .footer-bottom p {
            margin: 0;
        }

        @media (max-width: 480px) {
            .logo-box {
                top: 10px;
                left: 10px;
                padding: 6px 10px;
            }

            .logo-box img {
                width: 26px;
                height: 26px;
            }

            .logo-box span {
                font-size: 1rem;
            }

            .whitepaper-btn {
                position: static;
                transform: none;
                margin-top: 1em;
            }
        }
    </style>
</head>
<body>

    <!-- Logo Box -->
    <div class="logo-box">
        <img src="images/gobolcoin-logo.png" alt="Gobolcoin Logo">
        <span>Gobolchain Network</span>
    </div>

    <!-- Top Bar -->
   <div class="top-bar">
       <h1>DASHBOARD</h1>
        <div class="menu-wrapper">
            <a href="docs/gobolcoin-whitepaper.pdf" class="whitepaper-btn" target="_blank">White Paper ↑</a>
            <a href="mining.php" class="miningdashboard-btn" title="Go to Mining Dashboard">
                <span class="icon">🏠</span> Mining Dashboard
            </a>
        </div>
    </div>

    <!-- Dashboard Buttons -->
    <div class="container">
        <a class="button" href="profile.php"><span class="icon">👤</span> Profile</a>
        
        <!-- KYC Verification Button Logic -->
        <?php if ($kycStatus === 'Rejected' || $kycStatus === 'Not Submitted'): ?>
            <a class="button" href="kyc.php"><span class="icon">💳</span> KYC Verification</a>
        <?php else: ?>
            <a class="button disabled" href="#"><span class="icon">💳</span> KYC Verification</a>
            <p class="kyc-message">
                <?php if ($kycStatus === 'Approved'): ?>
                    Fantastic! Your KYC documents have been approved. You're all set!
                <?php else: ?>
                    Your KYC documents are currently pending review. Thank you for your patience!
                <?php endif; ?>
            </p>
        <?php endif; ?>
        
        <a class="button" href="wallet.html"><span class="icon">👛</span> Submit Wallet</a>
        
        <div class="row">
            <a class="button" href="about.html"><span class="icon">📄</span> About Us</a>
            <a class="button" href="tasks.html"><span class="icon">📝</span> Task</a>
        </div>

        <div class="row">
            <a class="button" href="mining.php#tokenomics"><span class="icon">📊</span> Tokenomics</a>
            <a class="button" href="mining.php#roadmap"><span class="icon">🗺️</span> Roadmap</a>
        </div>

        <a class="button" href="mining.php#utility"><span class="icon">🔌</span> Utility</a>

        <a class="button" href="settings.html"><span class="icon">⚙️</span> Settings</a>
        <a class="button" href="logout.html"><span class="icon">🚪</span> Logout</a>
    </div>

    <!-- Footer -->
    <footer>
        <div class="footer-links">
            <a href="terms.html">Policy & Terms</a>
            <a href="meet-our-team.html">Meet Our Team</a>
            <a href="support.html">Support</a>
            <a href="faq.html">FAQ</a>
            <a href="announcement.html">Announcement</a>
        </div>

        <div class="socials">
            <a href="https://x.com/gobolcoin?s=08" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter"></a>
            <a href="https://youtube.com/@gobolcoin?si=ByrsmImTnkALKIzX" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube"></a>
            <a href="https://t.me/+DvAqx1PFYAE2MDE0" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"></a>
        </div>

        <div class="footer-bottom">
            <p>All right reserve &copy; Gobolchain Network 2025</p>
        </div>
    </footer>

    <!-- Script -->
    <script>
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        }

        window.addEventListener('click', function (e) {
            const menu = document.getElementById('menu');
            const button = e.target.closest('.menu-button');
            const insideMenu = e.target.closest('.menu-dropdown');
            if (!button && !insideMenu) {
                menu.style.display = 'none';
            }
        });
    </script>
    

</body>
</html>
