<?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
if (!isLoggedIn()) {
    redirect('login.php');
}

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

// Get Current User Data
$user_data = $db->select("SELECT * FROM users WHERE id = ?", [$user_id]);
$user = !empty($user_data) ? $user_data[0] : null;

// Fetch Unread Notifications for Header
$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);

// Fetch All Service Categories
$categories = $db->select("SELECT * FROM service_categories WHERE status = 1 ORDER BY display_order ASC");

$wallet_balance = isset($user['wallet_balance']) ? $user['wallet_balance'] : '0.00';
$company_logo = getSetting('company_logo', 'assets/images/logo.png');
$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('all_services', 'All Services'); ?> - <?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; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } </style>
</head>
<body class="bg-gray-50" x-data="{ sidebarOpen: false, profileOpen: false, notifOpen: false, searchFocused: false }">

    <div class="flex h-screen overflow-hidden">
        
        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-gradient-to-b from-indigo-800 via-purple-800 to-purple-900 text-white transition-transform duration-300 ease-in-out md:relative md:translate-x-0 flex flex-col shadow-2xl">
            <div class="flex items-center justify-between h-20 px-6 border-b border-white/10">
                <a href="index.php" class="flex items-center space-x-3">
                    <img src="<?php echo $company_logo; ?>" alt="Logo" class="h-10 w-auto bg-white rounded p-1">
                    <span class="text-xl font-bold tracking-wider hidden md:block"><?php echo $company_name; ?></span>
                </a>
                <button @click="sidebarOpen = false" class="md:hidden text-white/70 hover:text-white focus:outline-none">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <nav class="flex-1 px-3 py-6 space-y-2 overflow-y-auto hide-scrollbar">
                <a href="<?php echo $dashboard_link; ?>" class="flex items-center px-3 py-3 bg-white/20 text-white rounded-xl transition-all border border-white/10 shadow-inner relative group" :class="sidebarOpen ? '' : 'justify-center'">
                    <i class="fas fa-th-large flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center text-base' : 'text-xl'"></i>
                    <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap"><?php echo $lang->translate('dashboard', 'Dashboard'); ?></span>
                </a>

                <div x-data="{ servicesMenuOpen: false }">
                    <button @click="servicesMenuOpen = !servicesMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative 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-base' : 'text-xl'"></i>
                            <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap">Services</span>
                        </div>
                        <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="servicesMenuOpen ? 'rotate-180' : ''"></i>
                    </button>
                    <div x-show="servicesMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
                        <?php foreach($all_categories as $acat): 
                            if (!in_array($acat['id'], [1, 5])) continue;
                        ?>
                            <a href="category.php?id=<?php echo $acat['id']; ?>" class="block py-2 text-sm text-indigo-200 hover:text-white transition-colors">
                                <i class="fas <?php echo htmlspecialchars($acat['icon_class']); ?> w-5"></i> <?php echo $lang->translate($acat['category_key'], $acat['title']); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div x-data="{ profileMenuOpen: false }">
                    <button @click="profileMenuOpen = !profileMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative 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-base' : 'text-xl'"></i>
                            <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap"><?php echo $lang->translate('profile', 'My 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-indigo-200 hover:text-white"><i class="fas fa-id-badge w-5"></i> My Profile</a>
                        <a href="profile.php#edit" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-user-edit w-5"></i> Edit Profile</a>
                        <a href="profile.php#kyc" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-id-card w-5"></i> KYC</a>
                        <a href="profile.php#password" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-lock w-5"></i> Change Password</a>
                        <a href="profile.php#certificate" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-certificate w-5"></i> Certificate</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-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative 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-base' : 'text-xl'"></i>
                            <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap"><?php echo $lang->translate('wallet', 'My Wallet'); ?></span>
                        </div>
                        <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="walletMenuOpen ? 'rotate-180' : ''"></i>
                        <div x-show="!sidebarOpen" class="absolute left-14 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">My Wallet</div>
                    </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-indigo-200 hover:text-white transition-colors"><i class="fas fa-plus-circle w-5"></i> Add Money</a>
                        <a href="wallet.php#move_bank" class="block py-2 text-sm text-indigo-200 hover:text-white transition-colors"><i class="fas fa-university w-5"></i> Move to Bank</a>
                        <a href="wallet.php#history" class="block py-2 text-sm text-indigo-200 hover:text-white transition-colors"><i class="fas fa-history w-5"></i> Transaction History</a>
                    </div>
                </div>
                
                <div x-data="{ ordersMenuOpen: false }">
                    <button @click="ordersMenuOpen = !ordersMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative group" :class="sidebarOpen ? '' : 'justify-center'">
                        <div class="flex items-center">
                            <i class="fas fa-shopping-cart flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center text-base' : 'text-xl'"></i>
                            <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap">Order History</span>
                        </div>
                        <i x-show="sidebarOpen" class="fas fa-chevron-down text-xs transition-transform" :class="ordersMenuOpen ? 'rotate-180' : ''"></i>
                    </button>
                    <div x-show="ordersMenuOpen && sidebarOpen" x-transition class="pl-10 pr-3 py-2 space-y-1" style="display:none;">
                        <a href="orders.php" class="block py-2 text-sm text-indigo-200 hover:text-white transition-colors">
                            <i class="fas fa-list w-5"></i> All Orders
                        </a>
                        <?php foreach($all_categories as $acat): 
                            if (!in_array($acat['id'], [1, 5])) continue;
                        ?>
                            <a href="orders.php?cat_id=<?php echo $acat['id']; ?>" class="block py-2 text-sm text-indigo-200 hover:text-white transition-colors">
                                <i class="fas <?php echo htmlspecialchars($acat['icon_class']); ?> w-5"></i> <?php echo $lang->translate($acat['category_key'], $acat['title']); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div x-data="{ helpdeskMenuOpen: false }">
                    <button @click="helpdeskMenuOpen = !helpdeskMenuOpen" class="w-full flex items-center justify-between px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative 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-base' : 'text-xl'"></i>
                            <span x-show="sidebarOpen" class="ml-3 font-semibold text-sm whitespace-nowrap">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="helpdesk.php#create" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-plus-circle w-5"></i> Create Ticket</a>
                        <a href="helpdesk.php#all" class="block py-2 text-sm text-indigo-200 hover:text-white"><i class="fas fa-list w-5"></i> All Tickets</a>
                    </div>
                </div>

                <a href="subscription.php" class="flex items-center px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative group" :class="sidebarOpen ? '' : 'justify-center'">
                    <i class="fas fa-crown flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center text-base' : 'text-xl'"></i>
                    <span x-show="sidebarOpen" class="ml-3 font-medium text-sm whitespace-nowrap">My Subscription</span>
                </a>

                <a href="refer.php" class="flex items-center px-3 py-3 text-white/70 hover:bg-white/10 hover:text-white rounded-xl transition-all relative group" :class="sidebarOpen ? '' : 'justify-center'">
                    <i class="fas fa-gift flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center text-base' : 'text-xl'"></i>
                    <span x-show="sidebarOpen" class="ml-3 font-medium text-sm whitespace-nowrap"><?php echo $lang->translate('refer_earn', 'Refer & Earn'); ?></span>
                </a>
                
                <div class="pt-6 mt-6 border-t border-white/10">
                    <a href="logout.php" onclick="return confirm('<?php echo $lang->translate('confirm_logout', 'Are you sure you want to logout?'); ?>');" class="flex items-center px-3 py-3 text-rose-300 hover:bg-rose-500/20 hover:text-rose-100 rounded-xl transition-all relative group" :class="sidebarOpen ? '' : 'justify-center'">
                        <i class="fas fa-sign-out-alt flex-shrink-0" :class="sidebarOpen ? 'w-6 text-center text-base' : 'text-xl'"></i>
                        <span x-show="sidebarOpen" class="ml-3 font-medium text-sm whitespace-nowrap"><?php echo $lang->translate('logout', '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-gradient-to-r from-indigo-700 to-purple-800 text-white flex items-center justify-between px-4 lg:px-8 shadow-lg z-40 relative">
                <div class="flex items-center">
                    <button @click="sidebarOpen = true" class="md:hidden p-2 mr-3 text-white/80 hover:text-white focus:outline-none rounded-lg hover:bg-white/10 transition-colors">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <a href="index.php" class="md:hidden flex items-center">
                        <img src="<?php echo $company_logo; ?>" alt="Logo" class="h-9 w-auto bg-white rounded p-1">
                    </a>
                </div>

                <div class="hidden md:flex flex-1 max-w-xl mx-8 relative" :class="{'z-50': searchFocused}">
                    <div class="relative w-full">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400"><i class="fas fa-search"></i></span>
                        <input type="text" placeholder="<?php echo $lang->translate('search_placeholder', 'Search services...'); ?>" 
                               @focus="searchFocused = true" @blur="searchFocused = false"
                               class="w-full py-2.5 pl-12 pr-4 bg-white/10 border border-white/20 rounded-full text-white placeholder-white/60 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all shadow-inner">
                    </div>
                </div>

                <div class="flex items-center space-x-3 sm:space-x-5">
                    <div class="flex items-center bg-white/10 border border-white/20 rounded-full pl-4 pr-1 py-1 shadow-inner">
                        <div class="hidden sm:flex flex-col mr-3 text-right">
                            <span class="text-[10px] uppercase tracking-wider text-white/70 font-semibold leading-none"><?php echo $lang->translate('wallet', 'Wallet'); ?></span>
                            <span class="text-sm font-bold leading-tight">₹<?php echo number_format($wallet_balance, 2); ?></span>
                        </div>
                        <a href="add_money.php" class="w-8 h-8 flex items-center justify-center bg-green-500 hover:bg-green-400 text-white rounded-full transition-transform transform hover:scale-105 shadow-md">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>

                    <div class="relative">
                        <button @click="notifOpen = !notifOpen" @click.away="notifOpen = false" class="relative p-2 text-white/80 hover:text-white 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-red-500 border-2 border-purple-800 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" style="display: none;">
                            <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                                <h3 class="font-bold text-gray-800 text-sm"><?php echo $lang->translate('notification', 'Notifications'); ?></h3>
                                <?php if($unread_count > 0): ?>
                                    <form method="POST" action="notifications.php" class="m-0">
                                        <button type="submit" name="mark_all_read" class="text-xs text-indigo-600 hover:text-indigo-800 font-semibold bg-transparent border-none p-0"><?php echo $lang->translate('mark_all_read', 'Mark all read'); ?></button>
                                    </form>
                                <?php endif; ?>
                            </div>
                            <div class="max-h-72 overflow-y-auto">
                                <?php if($unread_count > 0): ?>
                                    <?php foreach($unread_notifs as $notif): ?>
                                        <a href="notifications.php" class="block px-4 py-3 border-b border-gray-50 hover:bg-indigo-50 transition-colors">
                                            <p class="text-sm font-bold text-gray-800 mb-1"><?php echo htmlspecialchars($notif['title']); ?></p>
                                            <p class="text-xs text-gray-600 line-clamp-2"><?php echo htmlspecialchars($notif['message']); ?></p>
                                            <p class="text-[10px] text-gray-400 mt-2"><i class="far fa-clock mr-1"></i><?php echo date('d M, h:i A', strtotime($notif['created_at'])); ?></p>
                                        </a>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <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>
                                        <?php echo $lang->translate('no_notifications', 'No new notifications'); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div class="border-t border-gray-100 bg-gray-50">
                                <a href="notifications.php" class="block px-4 py-3 text-center text-sm text-indigo-600 hover:text-indigo-800 transition-colors font-bold"><?php echo $lang->translate('view_all', 'View All'); ?></a>
                            </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-white/30 shadow-md hover:border-white transition-colors object-cover">
                            <?php else: ?>
                                <div class="w-10 h-10 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center text-lg font-bold shadow-md hover:border-white transition-colors">
                                    <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                                </div>
                            <?php endif; ?>
                            <i class="fas fa-chevron-down text-xs ml-2 text-white/70 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" style="display: none;">
                            <div class="px-4 py-3 border-b border-gray-100">
                                <p class="text-sm text-gray-500"><?php echo $lang->translate('signed_in_as', 'Signed in as'); ?></p>
                                <p class="text-sm font-bold text-gray-900 truncate"><?php echo $user['name']; ?></p>
                                <p class="text-xs text-gray-500 mt-1"><?php echo $user['mobile']; ?></p>
                            </div>
                            <a href="profile.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"><i class="fas fa-user mr-2 w-4"></i> <?php echo $lang->translate('my_profile', 'My Profile'); ?></a>
                            <a href="settings.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"><i class="fas fa-cog mr-2 w-4"></i> <?php echo $lang->translate('settings', 'Settings'); ?></a>
                            <div class="border-t border-gray-100 mt-2 pt-2">
                                <a href="logout.php" onclick="return confirm('<?php echo $lang->translate('confirm_logout', 'Are you sure?'); ?>');" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"><i class="fas fa-sign-out-alt mr-2 w-4"></i> <?php echo $lang->translate('logout', 'Logout'); ?></a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 relative">
                
                <div class="mb-8">
                    <h2 class="text-3xl font-bold text-gray-800 mb-2"><?php echo $lang->translate('all_services', 'All Services'); ?></h2>
                    <p class="text-gray-500"><?php echo $lang->translate('services_page_desc', 'Browse all available digital services and categories.'); ?></p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6 pb-20">
                    <?php if (!empty($categories)): ?>
                        <?php foreach ($categories as $cat): ?>
                        <a href="#" onclick="alert('<?php echo $lang->translate('coming_soon', 'Coming Soon!'); ?>'); return false;" class="block group">
                            <div class="h-full bg-gradient-to-br <?php echo $cat['gradient_class']; ?> rounded-2xl p-6 text-white text-center shadow-lg hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2 flex flex-col items-center justify-center border border-white/10 relative overflow-hidden">
                                <div class="absolute -top-10 -right-10 w-24 h-24 bg-white/10 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                                <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mb-4 backdrop-blur-sm border border-white/20 group-hover:scale-110 transition-transform duration-300 shadow-inner">
                                    <i class="fas <?php echo $cat['icon_class']; ?> text-3xl"></i>
                                </div>
                                <h3 class="font-bold text-sm md:text-base leading-tight drop-shadow-md">
                                    <?php echo $lang->translate($cat['category_key'], $cat['title']); ?>
                                </h3>
                            </div>
                        </a>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="col-span-full p-8 text-center text-gray-500 bg-white rounded-xl border border-gray-200">
                            <?php echo $lang->translate('no_categories_found', 'No categories found.'); ?>
                        </div>
                    <?php endif; ?>
                </div>

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

</body>
</html>
