<?php
declare(strict_types=1);
require_once __DIR__ . '/../../api/lib.php';

hw_require_auth(['admin']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog - Herbal Wellness Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="flex h-screen bg-gray-100">
        <aside class="w-64 bg-gradient-to-b from-emerald-900 to-emerald-800 text-white shadow-lg overflow-y-auto">
            <div class="p-6 border-b border-emerald-700">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-emerald-300 rounded-lg flex items-center justify-center">
                        <i class="fas fa-leaf text-emerald-900 text-lg"></i>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg">Herbal Admin</h1>
                        <p class="text-emerald-200 text-xs">Management Portal</p>
                    </div>
                </div>
            </div>
            <nav class="p-4 space-y-1">
                <a href="/atasteofafricanmarketplace/dashboard/admin/" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-chart-line w-5"></i><span>Dashboard</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/bookings.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-calendar-check w-5"></i><span>Booking Calendar</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/coaches.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-user-md w-5"></i><span>Coaches</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/sales.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-chart-bar w-5"></i><span>Sales</span>
                </a>
                <div>
                    <button onclick="toggleCatalog(event)" class="w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors bg-emerald-700 text-white">
                        <div class="flex items-center gap-3">
                            <i class="fas fa-boxes w-5"></i><span>Catalog</span>
                        </div>
                        <i id="catalog-chevron" class="fas fa-chevron-up text-xs"></i>
                    </button>
                    <div id="catalog-submenu">
                        <a href="/atasteofafricanmarketplace/dashboard/admin/products.php" class="flex items-center gap-3 px-4 py-2 pl-12 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                            <i class="fas fa-plus-circle w-5 text-sm"></i>
                            <span class="text-sm">Products</span>
                        </a>
                    </div>
                </div>
                <div class="my-4 border-t border-emerald-700"></div>
                <a href="/atasteofafricanmarketplace/dashboard/admin/customers.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-users w-5"></i><span>Customers & Leads</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/contacts.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-address-book w-5"></i><span>Contacts</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/loyalty.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-gift w-5"></i><span>Loyalty Program</span>
                </a>
                <div class="my-4 border-t border-emerald-700"></div>
                <a href="/atasteofafricanmarketplace/dashboard/admin/analytics.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-chart-pie w-5"></i><span>Analytics</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/automations.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-robot w-5"></i><span>Automations</span>
                </a>
                <div class="my-4 border-t border-emerald-700"></div>
                <a href="/atasteofafricanmarketplace/dashboard/admin/settings.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-cog w-5"></i><span>Settings</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/cms.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-file-alt w-5"></i><span>CMS</span>
                </a>
                <a href="/atasteofafricanmarketplace/dashboard/admin/developers.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-emerald-100 hover:bg-emerald-700/50">
                    <i class="fas fa-code w-5"></i><span>Developers</span>
                </a>
            </nav>
        </aside>

        <div class="flex-1 flex flex-col overflow-hidden">
            <header class="bg-white border-b border-gray-200 px-8 py-4 shadow-sm">
                <h1 class="text-2xl font-bold text-gray-900">Catalog</h1>
            </header>
            <main class="flex-1 overflow-auto p-8">
                <div class="bg-white rounded-lg shadow p-8 text-center">
                    <i class="fas fa-boxes text-6xl text-yellow-500 mb-4"></i>
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Product Catalog</h2>
                    <p class="text-gray-600 mb-6">Browse and manage all products in your store</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
                        <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                            <p class="text-sm text-yellow-700 font-semibold">Total Products</p>
                            <p class="text-3xl font-bold text-yellow-900">125</p>
                        </div>
                        <div class="p-4 bg-green-50 rounded-lg border border-green-200">
                            <p class="text-sm text-green-700 font-semibold">In Stock</p>
                            <p class="text-3xl font-bold text-green-900">98</p>
                        </div>
                        <div class="p-4 bg-red-50 rounded-lg border border-red-200">
                            <p class="text-sm text-red-700 font-semibold">Low Stock</p>
                            <p class="text-3xl font-bold text-red-900">12</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script>
    function toggleCatalog(event) {
        event.preventDefault();
        const submenu = document.getElementById('catalog-submenu');
        const chevron = document.getElementById('catalog-chevron');
        
        if (submenu.classList.contains('hidden')) {
            submenu.classList.remove('hidden');
            chevron.classList.remove('fa-chevron-down');
            chevron.classList.add('fa-chevron-up');
        } else {
            submenu.classList.add('hidden');
            chevron.classList.remove('fa-chevron-up');
            chevron.classList.add('fa-chevron-down');
        }
    }
    </script>
</body>
</html>
