<?php
// Ensure session handling is correct.
include('inc/session.php');
 
// Fetch current verification status
$email = $_SESSION['email']; 
$query = "SELECT verification_status FROM users WHERE email = '$email'";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);

// Default to Unverified if database is empty or error
$verification_status = isset($row['verification_status']) ? $row['verification_status'] : 'Unverified';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - Profile</title>
    <!-- IonIcons CDN -->
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css"> 
    <link rel="shortcut icon" href="logo1.png" />

   <style>
    /* --- COPIED FROM DASHBOARD FOR CONSISTENCY --- */
    
    /* --- Basic Reset & Defaults --- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; height: 100%; }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #000; color: #333; line-height: 1.6;
        overflow-x: hidden; min-height: 100%; position: relative;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* --- Sidebar Variables --- */
    :root {
        --primary-color: #3d85c6;
        --card-bg: linear-gradient(145deg, #1e2334, #161925);
        --card-shadow: 0 4px 15px rgba(0,0,0,0.3);
        --text-muted: #8e9aaf;
    }

    /* --- Layout & Sidebar CSS --- */
    .dashboard-container { display: flex; min-height: 100vh; position: relative; }
    
    .sidebar {
        width: 250px; background-color: #2c3e50; color: #ecf0f1;
        display: flex; flex-direction: column; transition: transform 0.3s ease;
        position: sticky; top: 0; height: 100vh; z-index: 1000; flex-shrink: 0;
    }
    
    .sidebar-header { 
        padding: 20px 10px; text-align: center; border-bottom: 1px solid #34495e; 
        flex-shrink: 0; position: relative; 
    }
    
    /* Gold Logo Style */
    .brand-logo {
        width: 50px; height: 50px;
        background: linear-gradient(135deg, #f1c40f, #f39c12);
        color: #fff; font-size: 24px; line-height: 50px; text-align: center;
        border-radius: 50%; margin: 0 auto 10px auto;
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.5); display: block;
    }

    .sidebar-header h2 { 
        font-size: 1.1em; font-weight: 600; white-space: nowrap; 
        overflow: hidden; opacity: 1; margin: 0; color: #ecf0f1;
    }
    
    .mobile-close-btn {
        display: none; position: absolute; right: 15px; top: 15px; font-size: 1.5em; cursor: pointer; color: #fff;
    }

    .sidebar-nav { flex-grow: 1; overflow-y: auto; overflow-x: hidden; }
    .sidebar-nav ul { padding-top: 20px; }
    .sidebar-nav li { margin-bottom: 5px; position: relative; }
    .sidebar-nav a { display: flex; align-items: center; padding: 12px 20px; color: #bdc3c7; transition: 0.3s; white-space: nowrap; overflow: hidden; position: relative; }
    .sidebar-nav a i:first-child { margin-right: 15px; font-size: 1.3em; width: 20px; text-align: center; flex-shrink: 0; }
    .sidebar-nav a:hover, .sidebar-nav a.active { background-color: #34495e; color: #ffffff; }
    
    /* --- DROPDOWN / SUBMENU CSS --- */
    .has-submenu > a .submenu-indicator {
        margin-left: auto; font-size: 0.8em; transition: transform 0.3s ease;
    }
    .submenu {
        background-color: #233040; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    }
    .submenu a { padding-left: 55px; font-size: 0.9em; }
    
    .has-submenu.open > .submenu { max-height: 300px; }
    .has-submenu.open > a .submenu-indicator { transform: rotate(180deg); }

    /* --- Main Content --- */
    .main-content {
        flex-grow: 1; display: flex; flex-direction: column; position: relative;
        height: 100vh; overflow-y: auto; background-color: #02101c; width: 100%;
    }
    .main-header {
        background-color: #02101c; padding: 15px 30px; display: flex; justify-content: space-between;
        align-items: center; border-bottom: 1px solid #1f293a; position: sticky; top: 0; z-index: 900;
    }
    .header-left h1 { font-size: 1.5em; margin-left: 15px; color: #fff; font-weight: 600; }
    
    .menu-toggle { 
        color: #fff; font-size: 2em; display: none; cursor: pointer; 
        background: none; border: none; padding: 0; line-height: 1;
    }

    /* --- PROFILE PAGE SPECIFIC CSS --- */
    .page-content { padding: 30px; color: #fff; }

    .card {
        background-color: #161925; border: 1px solid #2c3e50; border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3); margin-bottom: 1.5rem; padding: 25px;
        height: 100%; color: #e0e0e0;
    }
    .card h4 { font-size: 1.1em; font-weight: 600; color: #fff; margin-bottom: 1rem; border-bottom: 1px solid #2c3e50; padding-bottom: 0.5rem; }
    .card h4 i { margin-right: 8px; color: #3d85c6; }

    .profile-details-minimal p { margin-bottom: 12px; color: #a0a0a0; font-size: 0.95em; }
    .profile-details-minimal p strong { color: #fff; min-width: 110px; display: inline-block; }
    hr { border: 0; border-top: 1px solid #2c3e50; margin: 20px 0; }

    /* Forms & Layout */
    .container-fluid { width: 100%; padding: 0 15px; }
    .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
    .col-lg-4, .col-lg-8, .col-md-5, .col-md-7 { position: relative; width: 100%; padding: 0 15px; }
    
    @media (min-width: 768px) {
        .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
        .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    }
    @media (min-width: 992px) {
        .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
        .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    }

    .form-group { margin-bottom: 1.2rem; }
    .form-group label { display: block; margin-bottom: 8px; color: #ccc; font-weight: 500; font-size: 0.9em; }
    .form-control { width: 100%; padding: 10px; background-color: #0b0e14; border: 1px solid #2c3e50; color: #fff; border-radius: 4px; font-size: 0.9em; }
    .form-control:focus { outline: none; border-color: #3d85c6; }

    .btn { padding: 10px 20px; border: none; border-radius: 4px; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: 0.3s; }
    .btn-warning { background-color: #f6b605; color: #000; }
    .btn-warning:hover { background-color: #d49c04; }

    /* Badges */
    .badge { display: inline-block; padding: 5px 10px; border-radius: 4px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; vertical-align: middle; margin-left: 5px; }
    .badge-verified { background-color: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745; }
    .badge-unverified { background-color: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; }
    .badge-pending { background-color: rgba(255, 193, 7, 0.2); color: #ffc107; border: 1px solid #ffc107; }
    .text-muted { color: #777; font-size: 0.8em; display: block; margin-top: 5px; }

    /* --- RESPONSIVE MOBILE MENU --- */
    @media (max-width: 768px) {
        .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 250px; transform: translateX(-100%); transition: transform 0.3s ease-in-out; box-shadow: 5px 0 15px rgba(0,0,0,0.5); z-index: 2000; }
        .sidebar.active { transform: translateX(0); }
        .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1500; }
        .sidebar-overlay.active { display: block; }
        .menu-toggle { display: block; }
        .mobile-close-btn { display: block; } 
        .mobile-hide { display: none; }
        .card { padding: 15px; height: auto; }
    }
   </style>
</head>
<body>
    <!-- Dark Overlay for Mobile -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>

    <div class="dashboard-container">
        <!-- Sidebar -->
       <?php 
include('inc/sidebar.php');
?>

        <!-- Main Content -->
        <main class="main-content" id="main-content">
            <!-- Header -->
            <header class="main-header">
                <div class="header-left">
                    <label for="sidebar-toggle" class="menu-toggle" id="menu-toggle">
                        <i class="ion-navicon"></i>
                    </label>
                    <h1>Profile</h1>
                </div>
            </header>

            <div class="page-content">
                <div class="container-fluid">
                    <div class="row">

                        <!-- Left Column: Account Summary -->
                        <div class="col-lg-4 col-md-5 mb-4">
                            <div class="card profile-summary-card">  
                                <div>
                                    <h4><i class="ion-person"></i> Account Summary</h4>
                                    <div class="profile-details-minimal">
                                        <p><strong>Name:</strong> <?php echo $full_name; ?></p>
                                        <hr>
                                        
                                        <!-- VERIFICATION STATUS SIGN -->
                                        <p><strong>Status:</strong>
                                            <?php if($verification_status == 'Verified'): ?>
                                                <span class="badge badge-verified"><i class="ion-checkmark-circled"></i> Verified</span>
                                            <?php elseif($verification_status == 'Pending'): ?>
                                                <span class="badge badge-pending"><i class="ion-clock"></i> Pending</span>
                                            <?php else: ?>
                                                <span class="badge badge-unverified"><i class="ion-close-circled"></i> Unverified</span>
                                            <?php endif; ?>
                                        </p>
                                        <hr>

                                        <p><strong>Email:</strong> <?php echo $email; ?></p>
                                        <hr>
                                        <p><strong>Role:</strong> <?php echo $role; ?></p>
                                        <hr>
                                        <p><strong>IP Address:</strong> <?php echo htmlspecialchars($user_ip); ?></p>
                                        <hr>
                                        <p><strong>Member Since:</strong> <?php echo $date; ?></p>
                                    </div>
                                </div>
                            </div> 
                        </div>

                        <!-- Right Column: Verification Form -->
                        <div class="col-lg-8 col-md-7 mb-4">
                            <div class="card profile-forms-card">

                                <div>
                                    <h4><i class="ion-card"></i> Identity Verification</h4>
                                    
                                    <?php if($verification_status == 'Verified'): ?>
                                        <!-- Verified State -->
                                        <div style="background-color: rgba(40,167,69,0.1); border: 1px solid #28a745; padding: 15px; border-radius: 5px; text-align: center;">
                                            <i class="ion-checkmark-circled" style="font-size: 3em; color: #28a745;"></i>
                                            <h3 style="color: #28a745; margin-top: 10px;">Account Verified</h3>
                                            <p style="color: #ccc;">Your identity has been confirmed. No further action is required.</p>
                                        </div>

                                    <?php elseif($verification_status == 'Pending'): ?>
                                        <!-- Pending State -->
                                        <div style="background-color: rgba(255,193,7,0.1); border: 1px solid #ffc107; padding: 15px; border-radius: 5px; text-align: center;">
                                            <i class="ion-clock" style="font-size: 3em; color: #ffc107;"></i>
                                            <h3 style="color: #ffc107; margin-top: 10px;">Verification Pending</h3>
                                            <p style="color: #ccc;">We are currently reviewing your documents. This typically takes 24-48 hours.</p>
                                        </div>

                                    <?php else: ?>
                                        <!-- Unverified State: Show Form -->
                                        <p style="color: #ccc; margin-bottom: 20px;">Please upload a clear photo of your Government ID, Driver's License, or Passport to verify your account.</p>
                                        
                                        <form action="update_profile.php" method="POST" enctype="multipart/form-data">
                                            <input type="hidden" name="action" value="upload_verification">
                                            
                                            <!-- ID FRONT -->
                                            <div class="form-group">
                                                <label for="id_front">ID Card (Front) <span style="color: #ffc107;">*</span>:</label>
                                                <input type="file" id="id_front" name="id_front" class="form-control" accept="image/*" required>
                                            </div>

                                            <!-- ID BACK -->
                                            <div class="form-group">
                                                <label for="id_back">ID Card (Back) <small class="text-muted" style="display:inline;">(Optional)</small>:</label>
                                                <input type="file" id="id_back" name="id_back" class="form-control" accept="image/*">
                                                <small class="text-muted">Supported formats: JPG, PNG, PDF. Max size: 5MB.</small>
                                            </div>

                                            <div class="form-actions" style="margin-top: 20px;">
                                                <button type="submit" class="btn btn-warning">
                                                    <i class="ion-upload"></i> Submit Documents
                                                </button>
                                            </div>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </div> 
                        </div> 

                    </div>
                </div>
            </div>

        </main>
    </div>

    <!-- JavaScript for Mobile Menu & Dropdowns -->
    <script>
        // --- 1. Submenu Toggle Function ---
        function toggleSubmenu(linkElement) {
            const parentLi = linkElement.parentElement;
            parentLi.classList.toggle('open');
        }

        document.addEventListener('DOMContentLoaded', () => {
            // --- 2. Mobile Menu Logic ---
            const menuToggle = document.getElementById('menu-toggle');
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            const closeBtn = document.getElementById('mobile-close-btn');
            
            function openMenu() {
                sidebar.classList.add('active');
                overlay.classList.add('active');
            }

            function closeMenu() {
                sidebar.classList.remove('active');
                overlay.classList.remove('active');
            }

            if(menuToggle) menuToggle.addEventListener('click', (e) => { e.stopPropagation(); openMenu(); });
            if(overlay) overlay.addEventListener('click', closeMenu);
            if(closeBtn) closeBtn.addEventListener('click', closeMenu);

            // Close mobile menu when clicking a normal link
            const navLinks = document.querySelectorAll('.sidebar-nav a:not([onclick])');
            navLinks.forEach(link => {
                link.addEventListener('click', closeMenu);
            });
        });
    </script>
    
   
</body>
</html>