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

// Redirect to login if not logged in or NOT an admin
if (!isLoggedIn() || !isAdmin()) { redirect('../login.php'); }

// RBAC Protection (Using manage_settings permission as it's a core financial setting)
if (!hasPermission('manage_settings')) { die("Access Denied: You do not have permission to manage commissions."); }

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

// UI Permissions map for Sidebar
$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');

// PRG Flash Messages Setup
if (isset($_SESSION['flash_success'])) {
    $success_msg = $_SESSION['flash_success'];
    unset($_SESSION['flash_success']);
}

// ---------------------------------------------------------
// 1. UPDATE SUPER ADMIN COMMISSION
// ---------------------------------------------------------
if (isset($_POST['update_admin_commission'])) {
    $admin_pct = sanitize($_POST['admin_commission_pct']);
    
    $exists = $db->select("SELECT id FROM settings WHERE setting_key = 'admin_commission_pct'");
    if ($exists) {
        $db->insert("UPDATE settings SET setting_value = ? WHERE setting_key = 'admin_commission_pct'", [$admin_pct]);
    } else {
        $db->insert("INSERT INTO settings (setting_key, setting_value) VALUES ('admin_commission_pct', ?)", [$admin_pct]);
    }
    
    $_SESSION['flash_success'] = "Super Admin Commission updated successfully!";
    redirect('commissions.php#admin');
}

// Fetch Current Admin Commission
$admin_comm_data = $db->select("SELECT setting_value FROM settings WHERE setting_key = 'admin_commission_pct'");
$admin_commission_pct = !empty($admin_comm_data) ? $admin_comm_data[0]['setting_value'] : '10';

$company_logo = getSetting('company_logo', '../assets/images/logo.png');
?>
<!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>Commission Management - Admin Panel</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; } .hide-scrollbar::-webkit-scrollbar { display: none; } </style>
</head>
<body class="bg-gray-50" x-data="{ 
    sidebarOpen: window.innerWidth >= 768,
    currentTab: window.location.hash ? window.location.hash.substring(1) : 'admin'
}" @hashchange.window="currentTab = window.location.hash.substring(1) || 'admin'">

    <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 htmlspecialchars($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 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-100 overflow-hidden">
            <header class="h-20 bg-white text-slate-800 flex items-center justify-between px-4 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 rounded-lg"><i class="fas fa-bars text-xl"></i></button><h2 class="text-xl font-bold hidden md:block text-slate-800">Commission Management</h2></div>
            </header>

            <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
                
                <?php if (isset($success_msg)): ?>
                <div class="mb-6 bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-xl flex items-center shadow-sm">
                    <i class="fas fa-check-circle mr-2"></i><span class="font-medium"><?php echo $success_msg; ?></span>
                </div>
                <?php endif; ?>

                <div x-show="currentTab === 'customer'" style="display:none;">
                    <div class="mb-6">
                        <h2 class="text-2xl font-extrabold text-gray-800">Customer Rewards & Commissions</h2>
                        <p class="text-gray-500 text-sm mt-1">Manage standard user cashback and tier percentages.</p>
                    </div>
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
                        <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-500 text-3xl"><i class="fas fa-users"></i></div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Customer Commission Setup</h3>
                        <p class="text-gray-500 max-w-md mx-auto mb-6">Configuration for direct user cashback and service rebates is currently locked for future updates.</p>
                        <button disabled class="bg-gray-200 text-gray-500 font-bold py-3 px-8 rounded-xl cursor-not-allowed inline-flex items-center">
                            <i class="fas fa-lock mr-2"></i> Under Development
                        </button>
                    </div>
                </div>

                <div x-show="currentTab === 'seller'" style="display:none;">
                    <div class="mb-6">
                        <h2 class="text-2xl font-extrabold text-gray-800">Seller Network Commissions</h2>
                        <p class="text-gray-500 text-sm mt-1">Manage the multi-tier B2B commission distribution network.</p>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div class="bg-gray-50 rounded-2xl shadow-sm border border-gray-200 overflow-hidden relative opacity-70 cursor-not-allowed">
                            <div class="absolute top-0 right-0 bg-gray-600 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg uppercase tracking-wider shadow-sm">Coming Soon</div>
                            <div class="p-6 border-b border-gray-100 flex flex-col items-center text-center">
                                <div class="w-16 h-16 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-4 border border-gray-300">
                                    <i class="fas fa-store text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-600">Retailer Commission</h3>
                                <p class="text-xs text-gray-500 mt-1">Tier 1 base seller profit margin</p>
                            </div>
                            <div class="p-6 bg-white">
                                <div class="relative mb-4">
                                    <input type="text" disabled value="Feature Locked" class="w-full text-center py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-400 italic">
                                </div>
                                <button type="button" disabled class="w-full bg-gray-100 text-gray-400 font-bold py-3 rounded-xl cursor-not-allowed border border-gray-200"><i class="fas fa-tools mr-1"></i> Locked</button>
                            </div>
                        </div>

                        <div class="bg-gray-50 rounded-2xl shadow-sm border border-gray-200 overflow-hidden relative opacity-70 cursor-not-allowed">
                            <div class="absolute top-0 right-0 bg-gray-600 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg uppercase tracking-wider shadow-sm">Coming Soon</div>
                            <div class="p-6 border-b border-gray-100 flex flex-col items-center text-center">
                                <div class="w-16 h-16 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-4 border border-gray-300">
                                    <i class="fas fa-network-wired text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-600">Distributor Commission</h3>
                                <p class="text-xs text-gray-500 mt-1">Tier 2 network partner override</p>
                            </div>
                            <div class="p-6 bg-white">
                                <div class="relative mb-4">
                                    <input type="text" disabled value="Feature Locked" class="w-full text-center py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-400 italic">
                                </div>
                                <button type="button" disabled class="w-full bg-gray-100 text-gray-400 font-bold py-3 rounded-xl cursor-not-allowed border border-gray-200"><i class="fas fa-tools mr-1"></i> Locked</button>
                            </div>
                        </div>

                        <div class="bg-gray-50 rounded-2xl shadow-sm border border-gray-200 overflow-hidden relative opacity-70 cursor-not-allowed">
                            <div class="absolute top-0 right-0 bg-gray-600 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg uppercase tracking-wider shadow-sm">Coming Soon</div>
                            <div class="p-6 border-b border-gray-100 flex flex-col items-center text-center">
                                <div class="w-16 h-16 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-4 border border-gray-300">
                                    <i class="fas fa-building text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-600">Franchise Commission</h3>
                                <p class="text-xs text-gray-500 mt-1">Tier 3 master partner margin</p>
                            </div>
                            <div class="p-6 bg-white">
                                <div class="relative mb-4">
                                    <input type="text" disabled value="Feature Locked" class="w-full text-center py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-400 italic">
                                </div>
                                <button type="button" disabled class="w-full bg-gray-100 text-gray-400 font-bold py-3 rounded-xl cursor-not-allowed border border-gray-200"><i class="fas fa-tools mr-1"></i> Locked</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div x-show="currentTab === 'staff'" style="display:none;">
                    <div class="mb-6">
                        <h2 class="text-2xl font-extrabold text-gray-800">Staff Target Commissions</h2>
                        <p class="text-gray-500 text-sm mt-1">Manage performance-based commissions and bonuses for internal team members.</p>
                    </div>
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
                        <div class="w-20 h-20 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-4 text-indigo-500 text-3xl"><i class="fas fa-user-tie"></i></div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Staff Target Settings</h3>
                        <p class="text-gray-500 max-w-md mx-auto mb-6">Performance and KPI-based staff commission structures are locked and will be rolled out in an upcoming update.</p>
                        <button disabled class="bg-gray-200 text-gray-500 font-bold py-3 px-8 rounded-xl cursor-not-allowed inline-flex items-center">
                            <i class="fas fa-lock mr-2"></i> Under Development
                        </button>
                    </div>
                </div>

                <div x-show="currentTab === 'admin'" style="display:none;">
                    <div class="mb-6">
                        <h2 class="text-2xl font-extrabold text-gray-800">Super Admin Commission</h2>
                        <p class="text-gray-500 text-sm mt-1">Manage the global platform fee deducted from transactions.</p>
                    </div>

                    <div class="bg-white rounded-2xl shadow-sm border border-emerald-200 overflow-hidden relative max-w-2xl">
                        <div class="absolute top-0 right-0 bg-emerald-500 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg uppercase tracking-wider">Active Status</div>
                        <div class="p-6 border-b border-gray-100 bg-emerald-50 flex items-center">
                            <div class="w-16 h-16 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center mr-5 border border-emerald-200">
                                <i class="fas fa-crown text-3xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-800">Platform Revenue Cut</h3>
                                <p class="text-sm text-gray-500">Default global percentage applied across the system.</p>
                            </div>
                        </div>
                        <div class="p-8">
                            <form method="POST">
                                <div class="mb-6">
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Admin Commission Percentage (%)</label>
                                    <div class="relative">
                                        <input type="number" step="0.01" name="admin_commission_pct" value="<?php echo htmlspecialchars($admin_commission_pct); ?>" required class="w-full pl-5 pr-12 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-emerald-500 outline-none text-2xl font-black text-emerald-700 transition-all">
                                        <span class="absolute inset-y-0 right-0 flex items-center pr-5 text-gray-400 font-bold text-xl">%</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-3 flex items-start">
                                        <i class="fas fa-info-circle mt-0.5 mr-2"></i> 
                                        This percentage is automatically deducted from seller earnings (or added to transaction fees) and credited to the master admin revenue ledger.
                                    </p>
                                </div>
                                <button type="submit" name="update_admin_commission" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-xl shadow-md transition-colors flex items-center justify-center text-lg">
                                    <i class="fas fa-save mr-2"></i> Save Platform Commission
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

            </main>
        </div>
    </div>
</body>
</html>