<?php
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../db.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../includes/Language.php';

if (!isLoggedIn() || !isAdmin()) { redirect('../login.php'); }

$lang = new Language($db);
$current_lang = $lang->getCurrentLanguage();
$user_id = $_SESSION['user_id'];

$can_users = hasPermission('manage_users');
$can_sellers = hasPermission('manage_sellers');
$can_staff = hasPermission('manage_staff_roles');
$can_services = hasPermission('manage_services');
$can_orders = hasPermission('manage_orders');
$can_transactions = hasPermission('manage_transactions');
$can_tickets = hasPermission('manage_tickets');
$can_settings = hasPermission('manage_settings');

$success_msg = '';
$error_msg = '';
if (isset($_SESSION['flash_success'])) {
    $success_msg = $_SESSION['flash_success'];
    unset($_SESSION['flash_success']);
}
if (isset($_SESSION['flash_error'])) {
    $error_msg = $_SESSION['flash_error'];
    unset($_SESSION['flash_error']);
}

$upload_dir = '../uploads/profiles/';
if (!is_dir($upload_dir)) {
    @mkdir($upload_dir, 0777, true);
}

if (isset($_POST['upload_pic']) && isset($_FILES['profile_pic']) && $_FILES['profile_pic']['error'] == 0) {
    $allowed_types = ['jpg', 'jpeg', 'png', 'gif'];
    $filename = $_FILES['profile_pic']['name'];
    $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
    
    if (in_array($ext, $allowed_types) && $_FILES['profile_pic']['size'] <= 2097152) {
        $new_name = 'admin_' . $user_id . '_' . time() . '.' . $ext;
        $destination = $upload_dir . $new_name;
        
        if (move_uploaded_file($_FILES['profile_pic']['tmp_name'], $destination)) {
            $old_pic_data = $db->select("SELECT profile_pic FROM users WHERE id = ?", [$user_id]);
            $old_pic = !empty($old_pic_data) ? $old_pic_data[0]['profile_pic'] : null;
            
            $db->insert("UPDATE users SET profile_pic = ? WHERE id = ?", [$new_name, $user_id]);
            
            if ($old_pic && file_exists($upload_dir . $old_pic)) {
                @unlink($upload_dir . $old_pic);
            }
            $_SESSION['flash_success'] = $lang->translate('pic_updated', 'Profile picture updated successfully!');
        } else {
            $_SESSION['flash_error'] = $lang->translate('pic_upload_failed', 'Failed to upload picture.');
        }
    } else {
        $_SESSION['flash_error'] = $lang->translate('invalid_pic', 'Only JPG, PNG, GIF under 2MB are allowed.');
    }
    redirect('profile.php#edit');
}

if (isset($_POST['remove_pic'])) {
    $old_pic_data = $db->select("SELECT profile_pic FROM users WHERE id = ?", [$user_id]);
    $old_pic = !empty($old_pic_data) ? $old_pic_data[0]['profile_pic'] : null;
    
    if ($old_pic && file_exists($upload_dir . $old_pic)) {
        @unlink($upload_dir . $old_pic);
    }
    
    $db->insert("UPDATE users SET profile_pic = NULL WHERE id = ?", [$user_id]);
    $_SESSION['flash_success'] = $lang->translate('pic_removed', 'Profile picture removed successfully!');
    redirect('profile.php#edit');
}

if (isset($_POST['update_profile'])) {
    $name = sanitize($_POST['name']);
    $email = sanitize($_POST['email']);
    $gender = sanitize($_POST['gender']);
    
    if (empty($name) || empty($email) || empty($gender)) {
        $_SESSION['flash_error'] = $lang->translate('fill_all_fields', 'Please fill all fields.');
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $_SESSION['flash_error'] = $lang->translate('valid_email', 'Valid email required.');
    } else {
        $db->insert("UPDATE users SET name = ?, email = ?, gender = ? WHERE id = ?", [$name, $email, $gender, $user_id]);
        $_SESSION['user_name'] = $name; 
        $_SESSION['flash_success'] = $lang->translate('profile_updated', 'Profile updated successfully!');
    }
    redirect('profile.php#edit');
}

if (isset($_POST['change_password'])) {
    $current_password = $_POST['current_password'];
    $new_password = $_POST['new_password'];
    $confirm_password = $_POST['confirm_password'];
    
    $user_pass_data = $db->select("SELECT password FROM users WHERE id = ?", [$user_id]);
    
    if (empty($current_password) || empty($new_password) || empty($confirm_password)) {
        $_SESSION['flash_error'] = $lang->translate('fill_all_fields', 'Please fill all fields.');
    } elseif ($new_password !== $confirm_password) {
        $_SESSION['flash_error'] = $lang->translate('password_mismatch', 'Passwords do not match!');
    } elseif (!password_verify($current_password, $user_pass_data[0]['password'])) {
        $_SESSION['flash_error'] = $lang->translate('wrong_current_password', 'Wrong current password!');
    } else {
        $hashed_password = password_hash($new_password, PASSWORD_DEFAULT);
        $db->insert("UPDATE users SET password = ? WHERE id = ?", [$hashed_password, $user_id]);
        $_SESSION['flash_success'] = $lang->translate('password_changed', 'Password changed successfully!');
    }
    redirect('profile.php#password');
}

$user_data = $db->select("SELECT u.*, r.name as role_name FROM users u LEFT JOIN roles r ON u.role_id = r.id WHERE u.id = ?", [$user_id]);
$user = !empty($user_data) ? $user_data[0] : null;
$role_name = !empty($user['role_name']) ? $user['role_name'] : 'SUPER ADMIN';

$unread_notifs = $db->select("SELECT * FROM notifications WHERE user_id = ? AND is_read = 0 ORDER BY created_at DESC LIMIT 5", [$user_id]);
$unread_count = count($unread_notifs);

$raw_logo = getSetting('company_logo', 'assets/images/logo.png');
$company_logo = (strpos($raw_logo, 'http') === 0) ? $raw_logo : '../' . ltrim($raw_logo, '/');
$company_name = getSetting('company_name', 'WBMCZ');
$profile_image_url = !empty($user['profile_pic']) ? '../uploads/profiles/' . $user['profile_pic'] : null;
?>
<!DOCTYPE html>
<html lang="<?php echo $current_lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $lang->translate('profile', 'Admin Profile'); ?> - <?php echo $company_name; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style> body { font-family: 'Inter', sans-serif; scroll-behavior: smooth;} .hide-scrollbar::-webkit-scrollbar { display: none; } </style>
</head>
<body class="bg-gray-50" x-data="{ 
    sidebarOpen: window.innerWidth >= 768, 
    profileOpen: false, 
    notifOpen: false,
    currentTab: window.location.hash ? window.location.hash.substring(1) : 'profile'
}" @hashchange.window="currentTab = window.location.hash.substring(1) || 'profile'">

    <div class="flex h-screen overflow-hidden">
        
        <aside :class="sidebarOpen ? 'w-64' : 'w-20'" class="flex-shrink-0 bg-gradient-to-b from-slate-800 to-slate-900 text-white transition-all duration-300 flex flex-col shadow-2xl z-50 overflow-x-hidden relative">
            <div class="flex items-center h-20 px-4 border-b border-white/10" :class="sidebarOpen ? 'justify-between' : 'justify-center'">
                <a href="../index.php" class="flex items-center">
                    <img src="<?php echo $company_logo; ?>" alt="Logo" class="h-10 w-10 bg-white rounded p-1 flex-shrink-0 object-contain">
                    <span x-show="sidebarOpen" class="ml-3 text-xl font-bold tracking-wider whitespace-nowrap text-emerald-400">ADMIN</span>
                </a>
            </div>

            <nav class="flex-1 px-3 py-6 space-y-1.5 overflow-y-auto hide-scrollbar text-sm font-medium">
    
    <a href="index.php" class="flex items-center px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all" :class="sidebarOpen ? '' : 'justify-center'">
        <i class="fas fa-chart-line flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
        <span x-show="sidebarOpen" class="ml-3 font-semibold">Dashboard</span>
    </a>
    
    <div x-data="{ profileMenuOpen: false }">
        <button @click="profileMenuOpen = !profileMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-user-tie flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Profile</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="profileMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="profileMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="profile.php#profile" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">My Profile</a>
            <a href="profile.php#edit" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Edit Profile</a>
            <a href="profile.php#kyc" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">KYC</a>
            <a href="profile.php#password" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Change Password</a>
            <a href="profile.php#id_card" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">ID Card</a>
        </div>
    </div>

    <div x-data="{ walletMenuOpen: false }">
        <button @click="walletMenuOpen = !walletMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-wallet flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Wallet Management</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="walletMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="walletMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="wallet.php#add_money" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Add Money</a>
            <a href="wallet.php#my_history" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">My wallet history</a>
            <a href="wallet.php#move_bank" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Move to Bank</a>
            <a href="wallet.php#all_history" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">All Wallet History</a>
            <a href="wallet.php#customer_history" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Customer Wallet History</a>
            <a href="wallet.php#seller_history" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller Wallet History</a>
            <a href="wallet.php#staff_history" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Staff Wallet History</a>
            <a href="wallet_history.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Wallet History</a>
            <a href="withdrawals.php#bank_requests" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Bank Request Pending</a>
            <a href="withdrawals.php#transactions" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Transaction Update</a>
        </div>
    </div>

    <div x-data="{ userMenuOpen: false }">
        <button @click="userMenuOpen = !userMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-users-cog flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">User Management</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="userMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="userMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="users.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Customer</a>
            <a href="notifications.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Notifications</a>
            <a href="sellers.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller</a>
            <a href="staff.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Staff</a>
            <a href="roles.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Custom Role</a>
        </div>
    </div>

    <div x-data="{ serviceMenuOpen: false }">
        <button @click="serviceMenuOpen = !serviceMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-layer-group flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Services Management</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="serviceMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="serviceMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="product_management.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Product Management</a>
            <a href="services.php#main_cats" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Main Services</a>
            <a href="services.php#sub_cats" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Sub Categories</a>
            <a href="pending_services.php" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Services List</a>
        </div>
    </div>

    <div x-data="{ settingMenuOpen: false }">
        <button @click="settingMenuOpen = !settingMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-cogs flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Website Settings</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="settingMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="settingMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="settings.php#home_settings" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Home Page All Settings</a>
            <a href="settings.php#customer_settings" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Customer Panel Settings</a>
            <a href="settings.php#seller_settings" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller Panel Settings</a>
            <a href="settings.php#staff_settings" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Staff Panel Settings</a>
        </div>
    </div>

    <div x-data="{ commMenuOpen: false }">
        <button @click="commMenuOpen = !commMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-percentage flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Commission Mgt</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="commMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="commMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="commissions.php#customer" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Customer</a>
            <a href="commissions.php#seller" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller</a>
            <a href="commissions.php#staff" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Staff</a>
            <a href="commissions.php#admin" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Super Admin</a>
        </div>
    </div>

    <div x-data="{ reportMenuOpen: false }">
        <button @click="reportMenuOpen = !reportMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-chart-pie flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Report Management</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="reportMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="reportMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="reports.php#all" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">All Report</a>
            <a href="reports.php#customer" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Customer</a>
            <a href="reports.php#seller" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller</a>
            <a href="reports.php#staff" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Staff</a>
            <a href="reports.php#admin" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Super Admin</a>
        </div>
    </div>

    <div x-data="{ helpdeskMenuOpen: false }">
        <button @click="helpdeskMenuOpen = !helpdeskMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all group" :class="sidebarOpen ? '' : 'justify-center'">
            <div class="flex items-center">
                <i class="fas fa-headset flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
                <span x-show="sidebarOpen" class="ml-3 font-semibold">Helpdesk</span>
            </div>
            <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="helpdeskMenuOpen ? 'rotate-180' : ''"></i>
        </button>
        <div x-show="helpdeskMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
            <a href="tickets.php#customer" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">User</a>
            <a href="tickets.php#seller" class="block py-2 text-sm text-gray-400 hover:text-emerald-400 transition-colors">Seller</a>
        </div>
    </div>

    <a href="refer.php" class="flex items-center px-3 py-3 text-gray-300 hover:bg-white/5 hover:text-white rounded-xl transition-all" :class="sidebarOpen ? '' : 'justify-center'">
        <i class="fas fa-gift flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
        <span x-show="sidebarOpen" class="ml-3 font-semibold">Refer & Earn</span>
    </a>

    <div class="pt-6 mt-6 border-t border-white/10">
        <a href="../logout.php" onclick="return confirm('Are you sure you want to logout?');" class="flex items-center px-3 py-3 text-rose-400 hover:bg-rose-500/20 hover:text-rose-300 rounded-xl transition-all" :class="sidebarOpen ? '' : 'justify-center'">
            <i class="fas fa-sign-out-alt flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center' : 'text-xl'"></i>
            <span x-show="sidebarOpen" class="ml-3">Logout</span>
        </a>
    </div>
</nav>
        </aside>

        <div class="flex-1 flex flex-col min-w-0 bg-gray-50 overflow-hidden">
            
            <header class="h-20 bg-white text-slate-800 flex items-center justify-between px-4 lg:px-8 shadow-sm border-b border-gray-200 z-40 relative">
                <div class="flex items-center">
                    <button @click="sidebarOpen = !sidebarOpen" class="p-2 mr-3 text-slate-500 hover:text-emerald-600 focus:outline-none rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <a href="../index.php" class="md:hidden flex items-center" x-show="!sidebarOpen">
                        <img src="<?php echo $company_logo; ?>" alt="Logo" class="h-9 w-9 object-contain">
                    </a>
                    <h2 class="text-xl font-bold hidden md:block text-slate-800"><?php echo $lang->translate('profile', 'Admin Profile'); ?></h2>
                </div>

                <div class="flex items-center space-x-3 sm:space-x-5 ml-auto">
                    <a href="../index.php" target="_blank" class="hidden sm:flex items-center text-sm font-semibold text-gray-500 hover:text-emerald-600 transition-colors">
                        <i class="fas fa-external-link-alt mr-2"></i> Visit Site
                    </a>

                    <div class="relative">
                        <button @click="notifOpen = !notifOpen" @click.away="notifOpen = false" class="relative p-2 text-gray-400 hover:text-emerald-600 transition-colors focus:outline-none">
                            <i class="fas fa-bell text-xl"></i>
                            <?php if($unread_count > 0): ?>
                                <span class="absolute top-1 right-1 w-4 h-4 bg-rose-500 border-2 border-white rounded-full flex items-center justify-center text-[9px] font-bold text-white"><?php echo $unread_count; ?></span>
                            <?php endif; ?>
                        </button>
                        <div x-show="notifOpen" x-transition class="absolute right-[-60px] sm:right-0 mt-3 w-[300px] sm:w-80 bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden z-50 text-gray-800" style="display: none;">
                            <div class="px-4 py-8 text-center text-gray-500 text-sm">
                                <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 text-gray-400"><i class="fas fa-bell-slash text-xl"></i></div>
                                No new alerts
                            </div>
                        </div>
                    </div>

                    <div class="relative">
                        <button @click="profileOpen = !profileOpen" @click.away="profileOpen = false" class="flex items-center focus:outline-none">
                            <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                <img src="<?php echo $profile_image_url; ?>" class="w-10 h-10 rounded-full border-2 border-emerald-100 shadow-sm object-cover">
                            <?php else: ?>
                                <div class="w-10 h-10 rounded-full bg-emerald-100 border-2 border-emerald-200 text-emerald-600 flex items-center justify-center text-lg font-bold shadow-sm">
                                    <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                                </div>
                            <?php endif; ?>
                            <i class="fas fa-chevron-down text-xs ml-2 text-slate-400 hidden sm:block"></i>
                        </button>
                        
                        <div x-show="profileOpen" x-transition class="absolute right-0 mt-3 w-56 bg-white rounded-xl shadow-2xl py-2 border border-gray-100 z-50 text-gray-800" style="display: none;">
                            <div class="px-4 py-3 border-b border-gray-100">
                                <p class="text-sm text-gray-500">Signed in as Admin</p>
                                <p class="text-sm font-bold text-gray-900 truncate"><?php echo htmlspecialchars($user['name']); ?></p>
                            </div>
                            <div class="py-2">
                                <a href="#profile" @click="profileOpen = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-colors"><i class="fas fa-id-badge w-5 text-center mr-2"></i> My Profile</a>
                                <a href="#edit" @click="profileOpen = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-colors"><i class="fas fa-user-edit w-5 text-center mr-2"></i> Edit Profile</a>
                                <a href="#password" @click="profileOpen = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-colors"><i class="fas fa-lock w-5 text-center mr-2"></i> Change Password</a>
                            </div>
                            <div class="border-t border-gray-100 pt-2">
                                <a href="../logout.php" onclick="return confirm('<?php echo $lang->translate('confirm_logout', 'Are you sure you want to logout?'); ?>');" class="block px-4 py-2 text-sm text-rose-600 hover:bg-rose-50 transition-colors"><i class="fas fa-sign-out-alt mr-2 w-5 text-center"></i> Logout</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 relative">

                <?php if ($success_msg): ?>
                <div class="mb-6 bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-xl relative flex items-center shadow-sm" role="alert">
                    <i class="fas fa-check-circle text-xl mr-3"></i>
                    <span class="block sm:inline font-medium"><?php echo $success_msg; ?></span>
                </div>
                <?php endif; ?>

                <?php if ($error_msg): ?>
                <div class="mb-6 bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl relative flex items-center shadow-sm" role="alert">
                    <i class="fas fa-exclamation-circle text-xl mr-3"></i>
                    <span class="block sm:inline font-medium"><?php echo $error_msg; ?></span>
                </div>
                <?php endif; ?>

                <div class="max-w-4xl mx-auto pb-20">

                    <div x-show="currentTab === 'profile'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="h-32 bg-gradient-to-r from-slate-700 to-emerald-700"></div>
                            <div class="px-6 py-6 sm:px-10 pb-10 relative">
                                <div class="absolute -top-16 left-6 sm:left-10">
                                    <div class="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden bg-white">
                                        <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                            <img src="<?php echo $profile_image_url; ?>" class="w-full h-full object-cover">
                                        <?php else: ?>
                                            <div class="w-full h-full bg-emerald-100 text-emerald-700 flex items-center justify-center text-4xl font-bold">
                                                <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="flex justify-end mb-6">
                                    <a href="#edit" class="bg-emerald-50 text-emerald-600 border border-emerald-200 hover:bg-emerald-100 font-bold py-2 px-4 rounded-lg transition-colors text-sm"><i class="fas fa-edit mr-1"></i> Edit Profile</a>
                                </div>
                                
                                <h2 class="text-3xl font-extrabold text-gray-900"><?php echo htmlspecialchars($user['name']); ?></h2>
                                <p class="text-emerald-600 font-bold uppercase tracking-wider text-sm mt-1 mb-6"><i class="fas fa-shield-alt mr-1"></i> <?php echo htmlspecialchars($role_name); ?></p>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-10 border-t border-gray-100 pt-6">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Mobile Number</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-phone-alt text-gray-400 mr-2"></i> <?php echo htmlspecialchars($user['mobile']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Email Address</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-envelope text-gray-400 mr-2"></i> <?php echo htmlspecialchars($user['email']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Gender</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-venus-mars text-gray-400 mr-2"></i> <?php echo ucfirst($user['gender']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">System Join Date</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-calendar-alt text-gray-400 mr-2"></i> <?php echo date('F d, Y', strtotime($user['created_at'])); ?></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'edit'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-user-edit text-emerald-600 mr-2"></i> Edit Admin Profile</h3>
                            </div>
                            <div class="p-6 md:p-8 flex flex-col md:flex-row gap-8">
                                
                                <div class="w-full md:w-1/3 flex flex-col items-center">
                                    <div class="relative w-32 h-32 mb-4" id="profileImageContainer">
                                        <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                            <img src="<?php echo $profile_image_url; ?>" alt="Profile" class="w-full h-full rounded-full object-cover border-4 border-emerald-50 shadow-md">
                                        <?php else: ?>
                                            <div class="w-full h-full rounded-full bg-gradient-to-tr from-emerald-500 to-teal-600 flex items-center justify-center text-4xl font-bold text-white shadow-md border-4 border-emerald-50">
                                                <i class="fas fa-user-shield"></i>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <form method="POST" enctype="multipart/form-data" class="flex flex-col w-full space-y-2">
                                        <label class="w-full cursor-pointer bg-gray-50 hover:bg-gray-100 text-gray-700 font-medium py-2 px-4 rounded-lg text-sm text-center transition-colors border border-gray-200">
                                            <i class="fas fa-camera mr-1"></i> Choose File
                                            <input type="file" name="profile_pic" class="hidden" accept="image/jpeg, image/png, image/gif" onchange="previewImage(event)">
                                        </label>
                                        <button type="submit" name="upload_pic" id="uploadBtn" class="hidden w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-sm text-sm">
                                            Save Picture
                                        </button>
                                    </form>
                                    <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                    <form method="POST" class="w-full mt-2">
                                        <button type="submit" name="remove_pic" onclick="return confirm('<?php echo $lang->translate('confirm_remove_pic', 'Are you sure you want to remove the picture?'); ?>');" class="w-full bg-white hover:bg-rose-50 text-rose-500 font-medium py-2 px-4 rounded-lg text-sm transition-colors border border-rose-100">
                                            <i class="fas fa-trash-alt mr-1"></i> Remove
                                        </button>
                                    </form>
                                    <?php endif; ?>
                                </div>

                                <div class="w-full md:w-2/3">
                                    <form method="POST" class="space-y-5">
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Full Name <span class="text-rose-500">*</span></label>
                                            <input type="text" name="name" value="<?php echo htmlspecialchars($user['name']); ?>" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Mobile Number <span class="text-xs text-rose-500 font-normal">(Cannot be changed here)</span></label>
                                            <input type="text" value="<?php echo htmlspecialchars($user['mobile']); ?>" disabled class="w-full px-4 py-2.5 bg-gray-100 border border-gray-200 rounded-xl text-gray-500 cursor-not-allowed">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Email Address <span class="text-rose-500">*</span></label>
                                            <input type="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Gender <span class="text-rose-500">*</span></label>
                                            <select name="gender" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                                <option value="male" <?php echo ($user['gender'] == 'male') ? 'selected' : ''; ?>>Male</option>
                                                <option value="female" <?php echo ($user['gender'] == 'female') ? 'selected' : ''; ?>>Female</option>
                                                <option value="other" <?php echo ($user['gender'] == 'other') ? 'selected' : ''; ?>>Other</option>
                                            </select>
                                        </div>
                                        <div class="pt-4">
                                            <button type="submit" name="update_profile" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors w-full sm:w-auto">
                                                <i class="fas fa-save mr-2"></i> Save Profile
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'kyc'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-id-card text-blue-600 mr-2"></i> KYC Verification</h3>
                            </div>
                            <div class="p-16 text-center text-gray-500">
                                <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-5 text-blue-500 text-3xl border border-blue-100">
                                    <i class="fas fa-file-signature"></i>
                                </div>
                                <h3 class="text-2xl font-extrabold text-gray-800 mb-2">Coming Soon</h3>
                                <p class="text-gray-500 max-w-sm mx-auto">The secure KYC document upload and verification portal is currently under development.</p>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'password'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-lock text-rose-500 mr-2"></i> <?php echo $lang->translate('change_password', 'Change Password'); ?></h3>
                            </div>
                            <div class="p-6 md:p-8">
                                <form method="POST">
                                    <div class="space-y-6 max-w-md">
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('current_password', 'Current Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="current_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('new_password', 'New Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="new_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('confirm_new_password', 'Confirm New Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="confirm_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
                                        </div>
                                    </div>
                                    <div class="mt-8 pt-6 border-t border-gray-100">
                                        <button type="submit" name="change_password" class="bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors w-full sm:w-auto">
                                            <i class="fas fa-key mr-2"></i> <?php echo $lang->translate('update_password', 'Update Password'); ?>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'id_card'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-id-badge text-indigo-500 mr-2"></i> Staff ID Card</h3>
                            </div>
                            <div class="p-16 text-center text-gray-500">
                                <div class="w-20 h-20 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-5 text-indigo-600 text-3xl border border-indigo-100">
                                    <i class="fas fa-id-badge"></i>
                                </div>
                                <h3 class="text-2xl font-extrabold text-gray-800 mb-2">Coming Soon</h3>
                                <p class="text-gray-500 max-w-sm mx-auto">Soon you will be able to view and download your official system admin ID card.</p>
                            </div>
                        </div>
                    </div>

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

    <script>
    function previewImage(event) {
        if(event.target.files.length > 0) {
            var src = URL.createObjectURL(event.target.files[0]);
            var container = document.getElementById('profileImageContainer');
            container.innerHTML = '<img src="' + src + '" class="w-full h-full rounded-full object-cover border-4 border-emerald-50 shadow-md">';
            document.getElementById('uploadBtn').classList.remove('hidden');
        }
    }
    </script>
</body>
</html>