<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Admin Panel{% endblock %} - Organic Dokan</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Inter:wght@400;500;600;700&display=swap"
        rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Inter', 'Roboto', sans-serif;
            background-color: #f4f7fe;
        }

        .mui-card {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: none;
            transition: all 0.3s ease;
        }

        .mui-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .sidebar-item {
            transition: all 0.2s ease;
            margin: 0.25rem 0.75rem;
            border-radius: 12px;
            font-weight: 500;
        }

        .sidebar-item.active {
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
            color: white !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }

        .sidebar-item:not(.active):hover {
            background-color: #f8fafc;
            color: #4f46e5;
        }

        .mui-input {
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            padding: 10px 16px;
            transition: all 0.2s;
        }

        .mui-input:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
            outline: none;
        }

        .mui-btn-primary {
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
            color: white;
            border-radius: 12px;
            padding: 10px 24px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
        }

        .mui-btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 7px 14px rgba(79, 70, 229, 0.3);
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
    {% block head %}{% endblock %}
</head>

<body class="min-h-screen flex">

    <!-- Mobile Sidebar Drawer -->
    <div id="mobile-sidebar" class="fixed inset-0 z-50 hidden transition-opacity duration-300">
        <div class="absolute inset-0 bg-gray-900/50" onclick="toggleMobileMenu()"></div>
        <aside id="sidebar-content"
            class="relative w-72 bg-white h-full shadow-2xl transform -translate-x-full transition-transform duration-300 flex flex-col">
            <div class="p-6 flex justify-between items-center border-b border-gray-50">
                <div class="flex items-center">
                    <div
                        class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center mr-3 shadow-lg shadow-indigo-200">
                        <i class="fas fa-leaf text-white text-lg"></i>
                    </div>
                    <span class="text-xl font-bold text-gray-800 tracking-tight">Admin<span
                            class="text-indigo-600">Pro</span></span>
                </div>
                <button onclick="toggleMobileMenu()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <nav class="flex-grow p-4 space-y-1 overflow-y-auto">
                {{ self.navigation() }}
            </nav>

            <div class="p-6 border-t border-gray-50">
                <a href="/admin/logout"
                    class="flex items-center p-3 text-red-500 hover:bg-red-50 rounded-xl transition font-semibold">
                    <i class="fas fa-sign-out-alt w-6"></i> <span>Logout</span>
                </a>
            </div>
        </aside>
    </div>

    <!-- Desktop Persistent Sidebar -->
    <aside class="w-72 bg-white flex-shrink-0 hidden md:flex flex-col border-r border-gray-100 shadow-sm z-40">
        <div class="p-8 pb-10">
            <div class="flex items-center">
                <div
                    class="w-12 h-12 bg-indigo-600 rounded-2xl flex items-center justify-center mr-4 shadow-xl shadow-indigo-100">
                    <i class="fas fa-leaf text-white text-xl"></i>
                </div>
                <div class="flex flex-col">
                    <span class="text-2xl font-black text-gray-800 leading-none">Admin<span
                            class="text-indigo-600">Pro</span></span>
                    <span class="text-[10px] uppercase tracking-widest font-bold text-gray-400 mt-1">Management
                        Hub</span>
                </div>
            </div>
        </div>

        <nav class="flex-grow space-y-1">
            {% block navigation %}
            <a href="{{ url_for('admin.admin_dashboard') }}"
                class="sidebar-item flex items-center p-4 text-gray-500 {% if request.endpoint == 'admin.admin_dashboard' %}active text-white{% endif %}">
                <i class="fas fa-chart-pie w-6 text-lg"></i> <span>Dashboard</span>
            </a>
            <a href="{{ url_for('admin.admin_product_settings') }}"
                class="sidebar-item flex items-center p-4 text-gray-500 {% if request.endpoint == 'admin.admin_product_settings' %}active text-white{% endif %}">
                <i class="fas fa-cube w-6 text-lg"></i> <span>Products</span>
            </a>
            <a href="{{ url_for('admin.admin_reviews') }}"
                class="sidebar-item flex items-center p-4 text-gray-500 {% if request.endpoint == 'admin.admin_reviews' %}active text-white{% endif %}">
                <i class="fas fa-comment-dots w-6 text-lg"></i> <span>Reviews</span>
            </a>
            <a href="{{ url_for('admin.admin_shop_settings') }}"
                class="sidebar-item flex items-center p-4 text-gray-500 {% if request.endpoint == 'admin.admin_shop_settings' %}active text-white{% endif %}">
                <i class="fas fa-sliders-h w-6 text-lg"></i> <span>Settings</span>
            </a>
            {% endblock %}
        </nav>

        <div class="p-6">
            <div class="bg-indigo-50 rounded-2xl p-4 mb-6">
                <p class="text-xs font-bold text-indigo-700 uppercase mb-2">Live Store</p>
                <a href="/" target="_blank"
                    class="flex items-center text-sm font-semibold text-gray-700 hover:text-indigo-600 transition">
                    <i class="fas fa-external-link-alt mr-2 text-indigo-400"></i> View Website
                </a>
            </div>
            <a href="/admin/logout"
                class="flex items-center p-4 text-gray-400 hover:text-red-500 rounded-xl transition font-bold group">
                <i class="fas fa-power-off w-6 text-lg group-hover:text-red-500"></i> <span>Sign Out</span>
            </a>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-grow flex flex-col min-w-0 min-h-screen overflow-hidden">
        <header
            class="h-20 bg-white/80 backdrop-blur-md sticky top-0 z-30 flex items-center justify-between px-6 md:px-10 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center">
                <button onclick="toggleMobileMenu()" class="md:hidden mr-4 p-2 bg-gray-50 rounded-lg text-gray-500">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="flex flex-col">
                    <h2 class="text-xl font-bold text-gray-800 tracking-tight">{% block header_title %}{% endblock %}
                    </h2>
                    <p class="text-xs text-gray-400 font-medium md:block hidden">Overview and Management Dashboard</p>
                </div>
            </div>

            <div class="relative group">
                <div class="flex items-center gap-4 cursor-pointer" onclick="toggleProfileMenu()">
                    <div class="hidden sm:flex flex-col items-end mr-2">
                        <span class="text-sm font-bold text-gray-700">Administrator</span>
                        <span class="text-[10px] text-green-500 font-bold uppercase tracking-tight">● Online</span>
                    </div>
                    <div
                        class="w-12 h-12 rounded-2xl bg-indigo-100 flex items-center justify-center text-indigo-600 font-black text-lg shadow-inner ring-4 ring-gray-50 hover:bg-indigo-200 transition">
                        A
                    </div>
                </div>

                <!-- Profile Dropdown Menu -->
                <div id="profile-dropdown"
                    class="absolute top-full right-0 mt-4 w-56 bg-white rounded-3xl shadow-2xl border border-gray-100 py-4 hidden transform origin-top-right transition-all duration-200 z-50">
                    <div class="px-6 py-2 mb-2">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Session Controls</p>
                    </div>
                    <a href="{{ url_for('admin.admin_dashboard') }}"
                        class="flex items-center gap-3 px-6 py-3 text-sm font-bold text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 transition">
                        <i class="fas fa-user-circle"></i>
                        Admin Profile
                    </a>
                    <div class="my-2 border-t border-gray-50"></div>
                    <a href="/admin/logout"
                        class="flex items-center gap-3 px-6 py-3 text-sm font-bold text-red-500 hover:bg-red-50 transition">
                        <i class="fas fa-power-off"></i>
                        Sign Out Account
                    </a>
                </div>
            </div>
        </header>

        <div class="flex-grow p-4 md:p-10 overflow-y-auto overflow-x-hidden scrollbar-hide">
            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}
            <div
                class="mb-8 p-4 rounded-2xl flex items-center {% if category == 'success' %}bg-green-100/50 text-green-800 border-l-4 border-green-500{% else %}bg-red-100/50 text-red-800 border-l-4 border-red-500{% endif %} animate-pulse">
                <i
                    class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-triangle{% endif %} mr-3 text-lg"></i>
                <span class="font-bold">{{ message }}</span>
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}

            {% block content %}{% endblock %}
        </div>
    </main>

    <script>
        function toggleMobileMenu() {
            const sidebar = document.getElementById('mobile-sidebar');
            const content = document.getElementById('sidebar-content');
            if (sidebar.classList.contains('hidden')) {
                sidebar.classList.remove('hidden');
                setTimeout(() => {
                    content.classList.remove('-translate-x-full');
                }, 10);
            } else {
                content.classList.add('-translate-x-full');
                setTimeout(() => {
                    sidebar.classList.add('hidden');
                }, 300);
            }
        }

        function toggleProfileMenu() {
            const dropdown = document.getElementById('profile-dropdown');
            dropdown.classList.toggle('hidden');
        }

        // Close dropdown when clicking outside
        window.addEventListener('click', function (e) {
            const dropdown = document.getElementById('profile-dropdown');
            const profileArea = dropdown.parentElement;
            if (!profileArea.contains(e.target)) {
                dropdown.classList.add('hidden');
            }
        });
    </script>
    {% block scripts %}{% endblock %}
</body>

</html>