<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Admin Panel'); ?> - <?php echo e(setting('site_name', '360Monica')); ?></title>
    <?php
        $favicon = setting('favicon');
    ?>
    <?php if($favicon): ?>
        <link rel="icon" type="image/png" href="<?php echo e(public_asset_url($favicon)); ?>">
    <?php endif; ?>
    <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">
    <script>
        tailwind.config = {
            darkMode: 'class',
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        * { font-family: 'Inter', sans-serif; }
        
        /* Smooth transitions */
        * {
            transition-property: background-color, border-color, color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #475569;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        .dark ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @media (max-width: 768px) {
            .sidebar-mobile-hidden { transform: translateX(-100%); }
            .sidebar-mobile-visible { transform: translateX(0); }
        }
        
        /* Primary Button Style */
        .btn-primary {
            background-color: #111827; /* gray-900 */
        }
        .dark .btn-primary {
            background-color: #ffffff; /* white */
        }
        .btn-primary:hover {
            background-color: #1f2937; /* gray-800 */
        }
        .dark .btn-primary:hover {
            background-color: #f3f4f6; /* gray-100 */
        }
    </style>
</head>
<body class="h-full bg-white dark:bg-gray-900">
    <!-- Mobile Sidebar Overlay -->
    <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 transition-opacity" onclick="toggleSidebar()"></div>
    
    <div class="min-h-screen flex">
        <!-- Sidebar -->
        <aside id="sidebar" class="w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 min-h-screen fixed left-0 top-0 z-40 transition-transform duration-300 ease-in-out md:translate-x-0 sidebar-mobile-hidden md:sidebar-mobile-visible">
            <!-- Logo Section -->
            <div class="p-6 border-b border-gray-200 dark:border-gray-800">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <?php
                            $siteLogo = setting('site_logo');
                            $siteName = setting('site_name', '360Monica');
                        ?>
                        <?php if($siteLogo): ?>
                            <img src="<?php echo e(asset('storage/' . $siteLogo)); ?>" alt="<?php echo e($siteName); ?>" 
                                 class="w-8 h-8 object-contain rounded" 
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <div class="w-8 h-8 bg-gray-900 dark:bg-white rounded flex items-center justify-center" style="display: none;">
                                <span class="text-white dark:text-gray-900 font-bold text-sm"><?php echo e(substr($siteName, 0, 3)); ?></span>
                            </div>
                        <?php else: ?>
                            <div class="w-8 h-8 bg-gray-900 dark:bg-white rounded flex items-center justify-center">
                                <span class="text-white dark:text-gray-900 font-bold text-sm"><?php echo e(substr($siteName, 0, 3)); ?></span>
                            </div>
                        <?php endif; ?>
                        <div>
                            <h1 class="text-lg font-semibold text-gray-900 dark:text-white"><?php echo e(setting('site_name', '360Monica')); ?></h1>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Admin Panel</p>
                        </div>
                    </div>
                    <button id="sidebar-toggle" onclick="toggleSidebar()" class="md:hidden p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                </div>
            </div>
            
            <!-- Search Bar -->
            <div class="p-4 border-b border-gray-200 dark:border-gray-800">
                <div class="relative">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 text-sm"></i>
                    <input type="text" placeholder="Search..." 
                           class="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                </div>
            </div>
            
            <!-- Navigation -->
            <nav class="mt-2 px-3 py-2">
                <a href="<?php echo e(route('admin.dashboard')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.dashboard') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-home w-5 mr-3 text-center"></i>
                    <span>Home</span>
                </a>
                <a href="<?php echo e(route('admin.page-content.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.page-content.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-file-alt w-5 mr-3 text-center"></i>
                    <span>Page-Content</span>
                </a>
                <a href="<?php echo e(route('admin.products.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.products.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-box w-5 mr-3 text-center"></i>
                    <span>Products</span>
                </a>
                <a href="<?php echo e(route('admin.categories.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.categories.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-tags w-5 mr-3 text-center"></i>
                    <span>Categories</span>
                </a>
                <a href="<?php echo e(route('admin.subcategories.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.subcategories.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-sitemap w-5 mr-3 text-center"></i>
                    <span>Subcategories</span>
                </a>
                <a href="<?php echo e(route('admin.slides.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.slides.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-images w-5 mr-3 text-center"></i>
                    <span>Slides</span>
                </a>
                <a href="<?php echo e(route('admin.faqs.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.faqs.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-question-circle w-5 mr-3 text-center"></i>
                    <span>FAQs</span>
                </a>
                <a href="<?php echo e(route('admin.orders.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.orders.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-receipt w-5 mr-3 text-center"></i>
                    <span>Orders</span>
                </a>
                <a href="<?php echo e(route('admin.settings.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.settings.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-cog w-5 mr-3 text-center"></i>
                    <span>Settings</span>
                </a>
                <a href="<?php echo e(route('admin.users.index')); ?>" 
                   class="flex items-center px-3 py-2 mb-1 text-sm font-medium rounded-lg transition-colors <?php echo e(request()->routeIs('admin.users.*') ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900'); ?>">
                    <i class="fas fa-user w-5 mr-3 text-center"></i>
                    <span>Users</span>
                </a>
            </nav>
            
            <!-- User Section -->
            <div class="absolute bottom-0 w-64 p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
                <form method="POST" action="<?php echo e(route('admin.logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900 rounded-lg transition-colors">
                        <i class="fas fa-sign-out-alt w-5 mr-3"></i>
                        <span>Logout</span>
                    </button>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 md:ml-64 bg-gray-50 dark:bg-gray-900 min-h-screen">
            <!-- Top Bar -->
            <header class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-30">
                <div class="px-4 md:px-6 lg:px-8 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <!-- Mobile Menu Button -->
                            <button id="mobile-menu-btn" onclick="toggleSidebar()" class="md:hidden p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
                                <i class="fas fa-bars text-lg"></i>
                            </button>
                            <div>
                                <h2 class="text-xl font-semibold text-gray-900 dark:text-white"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></h2>
                                <nav class="hidden md:flex mt-1" aria-label="Breadcrumb">
                                    <ol class="flex items-center space-x-2 text-sm">
                                        <li><a href="<?php echo e(route('admin.dashboard')); ?>" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
                                        <li><i class="fas fa-chevron-right text-xs text-gray-400 dark:text-gray-600"></i></li>
                                        <li class="text-gray-700 dark:text-gray-300"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <!-- Dark Mode Toggle -->
                            <button id="dark-mode-toggle" onclick="toggleDarkMode()" 
                                    class="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
                                    title="Toggle dark mode">
                                <i id="dark-mode-icon" class="fas fa-moon text-lg"></i>
                            </button>
                            
                            <!-- User Dropdown -->
                            <div class="relative">
                                <button onclick="toggleUserDropdown()" 
                                        class="w-8 h-8 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
                                        title="User menu">
                                    <span class="text-gray-700 dark:text-gray-300 font-semibold text-xs"><?php echo e(substr(Auth::user()->name, 0, 1)); ?></span>
                                </button>
                                
                                <!-- Dropdown Menu -->
                                <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-950 rounded-lg shadow-lg border border-gray-200 dark:border-gray-800 z-50 overflow-hidden">
                                    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white"><?php echo e(Auth::user()->name); ?></p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400"><?php echo e(Auth::user()->email); ?></p>
                                    </div>
                                    <div class="py-1">
                                        <a href="<?php echo e(route('admin.profile.show')); ?>" 
                                           class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                            <i class="fas fa-user w-4 mr-3 text-gray-400"></i>
                                            View Profile
                                        </a>
                                        <a href="<?php echo e(route('admin.profile.edit')); ?>" 
                                           class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                            <i class="fas fa-edit w-4 mr-3 text-gray-400"></i>
                                            Edit Profile
                                        </a>
                                        <hr class="my-1 border-gray-200 dark:border-gray-800">
                                        <form method="POST" action="<?php echo e(route('admin.logout')); ?>" class="block">
                                            <?php echo csrf_field(); ?>
                                            <button type="submit" class="w-full flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                                                <i class="fas fa-sign-out-alt w-4 mr-3"></i>
                                                Logout
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Content Area -->
            <div class="p-4 md:p-6 lg:p-8">
                <?php if(session('success')): ?>
                    <div id="success-alert" class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-300 px-4 py-3 rounded-lg relative fade-in" role="alert">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-3"></i>
                            <span class="font-medium text-sm"><?php echo e(session('success')); ?></span>
                        </div>
                        <button type="button" onclick="hideAlert('success-alert')" class="absolute top-3 right-3 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200 transition-colors">
                            <i class="fas fa-times text-sm"></i>
                        </button>
                    </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                    <div id="error-alert" class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-300 px-4 py-3 rounded-lg relative fade-in" role="alert">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3"></i>
                            <span class="font-medium text-sm"><?php echo e(session('error')); ?></span>
                        </div>
                        <button type="button" onclick="hideAlert('error-alert')" class="absolute top-3 right-3 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors">
                            <i class="fas fa-times text-sm"></i>
                        </button>
                    </div>
                <?php endif; ?>

                <?php if($errors->any()): ?>
                    <div id="validation-alert" class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-300 px-4 py-3 rounded-lg relative fade-in" role="alert">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
                            <div class="flex-1">
                                <p class="font-medium text-sm mb-2">Please fix the following errors:</p>
                                <ul class="list-disc list-inside space-y-1 text-sm">
                                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <li><?php echo e($error); ?></li>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </ul>
                            </div>
                        </div>
                        <button type="button" onclick="hideAlert('validation-alert')" class="absolute top-3 right-3 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors">
                            <i class="fas fa-times text-sm"></i>
                        </button>
                    </div>
                <?php endif; ?>

                <div class="fade-in">
                    <?php echo $__env->yieldContent('content'); ?>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Dark Mode Toggle
        function toggleDarkMode() {
            const html = document.documentElement;
            const icon = document.getElementById('dark-mode-icon');
            
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('darkMode', 'false');
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
            } else {
                html.classList.add('dark');
                localStorage.setItem('darkMode', 'true');
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
            }
        }

        // User Dropdown Toggle
        function toggleUserDropdown() {
            const dropdown = document.getElementById('userDropdown');
            dropdown.classList.toggle('hidden');
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            const userDropdown = document.getElementById('userDropdown');
            const userButton = event.target.closest('button[onclick="toggleUserDropdown()"]');
            
            if (!userButton && !event.target.closest('#userDropdown')) {
                userDropdown?.classList.add('hidden');
            }
        });

        // Initialize dark mode from localStorage
        document.addEventListener('DOMContentLoaded', function() {
            const darkMode = localStorage.getItem('darkMode');
            const html = document.documentElement;
            const icon = document.getElementById('dark-mode-icon');
            
            if (darkMode === 'true' || (!darkMode && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                html.classList.add('dark');
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
            }
        });

        // Auto-hide alerts after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = ['success-alert', 'error-alert', 'validation-alert'];
            
            alerts.forEach(function(alertId) {
                const alert = document.getElementById(alertId);
                if (alert) {
                    setTimeout(function() {
                        hideAlert(alertId);
                    }, 5000);
                }
            });
        });

        function hideAlert(alertId) {
            const alert = document.getElementById(alertId);
            if (alert) {
                alert.style.opacity = '0';
                setTimeout(function() {
                    alert.style.display = 'none';
                }, 300);
            }
        }

        // Mobile sidebar toggle
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            
            if (sidebar.classList.contains('sidebar-mobile-hidden')) {
                sidebar.classList.remove('sidebar-mobile-hidden');
                sidebar.classList.add('sidebar-mobile-visible');
                overlay.classList.remove('hidden');
            } else {
                sidebar.classList.remove('sidebar-mobile-visible');
                sidebar.classList.add('sidebar-mobile-hidden');
                overlay.classList.add('hidden');
            }
        }

        // Close sidebar when clicking outside on mobile
        document.getElementById('sidebar-overlay')?.addEventListener('click', toggleSidebar);
    </script>
</body>
</html>
<?php /**PATH /Users/mac/Documents/360monicaAPI/resources/views/admin/layouts/app.blade.php ENDPATH**/ ?>