<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Admin Dashboard'); ?> | Dwaraka Collection</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo e(asset('favicon.png')); ?>">
    <link rel="shortcut icon" href="<?php echo e(asset('favicon.ico')); ?>">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: {
                            400: '#E6C659',
                            500: '#D4AF37',
                            600: '#C9A227',
                            700: '#A68218',
                            50: '#FDFBF7',
                            100: '#F5EEDC',
                        },
                        obsidian: {
                            900: '#0F0F11',
                            800: '#18181C',
                            700: '#23232A',
                            600: '#2E2E38',
                        },
                        ivory: '#FAF8F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    }
                }
            }
        }
    </script>

    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .gold-gradient-text {
            background: linear-gradient(135deg, #FFE89C 0%, #D4AF37 50%, #997510 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .gold-gradient-bg {
            background: linear-gradient(135deg, #D4AF37 0%, #C9A227 50%, #A68218 100%);
        }
        .sidebar-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: rgba(212, 175, 55, 0.2);
            border-radius: 4px;
        }
    </style>
</head>
<body class="bg-ivory text-slate-800 font-sans antialiased min-h-screen flex flex-col">

    <!-- Mobile Overlay -->
    <div id="mobile-overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black/60 z-40 hidden md:hidden transition-opacity duration-300"></div>

    <div class="flex flex-1 min-h-screen">
        
        <!-- SIDEBAR -->
        <aside id="sidebar" class="fixed top-0 bottom-0 left-0 z-50 w-72 bg-obsidian-900 text-slate-300 flex flex-col transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out border-r border-obsidian-700 shadow-2xl">
            
            <!-- Brand Logo Header -->
            <div class="h-20 flex items-center justify-between px-6 border-b border-obsidian-700 bg-obsidian-900/90 backdrop-blur-md">
                <a href="<?php echo e(route('admin.dashboard')); ?>" class="flex items-center space-x-3 group">
                    <img src="<?php echo e(asset('favicon.png')); ?>" 
                         alt="Dwaraka Logo" 
                         class="w-10 h-10 object-contain group-hover:scale-105 transition-transform drop-shadow-md"
                    >
                    <div>
                        <span class="font-serif font-bold text-lg tracking-wider gold-gradient-text block leading-tight">DWARAKA</span>
                        <span class="text-[10px] tracking-[0.2em] text-gold-400 uppercase block font-bold -mt-0.5">JEWELLERY ADMIN</span>
                    </div>
                </a>
                <button onclick="toggleSidebar()" class="md:hidden text-slate-400 hover:text-white">
                    <i class="fa-solid fa-xmark text-xl"></i>
                </button>
            </div>

            <!-- Navigation Links -->
            <nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1.5 sidebar-scroll">
                
                <!-- Main Label -->
                <div class="px-3 pb-2 text-[11px] font-semibold tracking-wider text-amber-500/60 uppercase">Main Navigation</div>

                <!-- Dashboard -->
                <a href="<?php echo e(route('admin.dashboard')); ?>" class="flex items-center px-3.5 py-3 rounded-xl font-medium text-sm transition-all duration-200 <?php echo e(request()->routeIs('admin.dashboard') ? 'bg-gold-500/15 text-gold-400 border border-gold-500/30 font-semibold shadow-inner' : 'hover:bg-obsidian-800 hover:text-white text-slate-400'); ?>">
                    <i class="fa-solid fa-chart-pie w-6 text-center text-base <?php echo e(request()->routeIs('admin.dashboard') ? 'text-gold-400' : 'text-slate-400'); ?>"></i>
                    <span class="ml-3">Dashboard</span>
                </a>

                <!-- Products Dropdown / Section -->
                <div class="pt-2">
                    <div class="px-3 pb-2 text-[11px] font-semibold tracking-wider text-amber-500/60 uppercase">Catalog Management</div>
                    
                    <a href="<?php echo e(route('admin.products.index')); ?>" class="flex items-center px-3.5 py-3 rounded-xl font-medium text-sm transition-all duration-200 <?php echo e(request()->routeIs('admin.products.index') ? 'bg-gold-500/15 text-gold-400 border border-gold-500/30 font-semibold' : 'hover:bg-obsidian-800 hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-gem w-6 text-center text-base <?php echo e(request()->routeIs('admin.products.index') ? 'text-gold-400' : 'text-slate-400'); ?>"></i>
                        <span class="ml-3 flex-1">All Products</span>
                    </a>

                    <a href="<?php echo e(route('admin.products.create')); ?>" class="flex items-center px-3.5 py-2.5 rounded-xl font-medium text-xs ml-4 transition-all duration-200 <?php echo e(request()->routeIs('admin.products.create') ? 'text-gold-400 font-semibold' : 'hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-plus-circle w-5 text-center"></i>
                        <span class="ml-2">Add New Product</span>
                    </a>

                    <a href="<?php echo e(route('admin.products.import')); ?>" class="flex items-center px-3.5 py-2.5 rounded-xl font-medium text-xs ml-4 transition-all duration-200 <?php echo e(request()->routeIs('admin.products.import') ? 'text-gold-400 font-semibold' : 'hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-file-excel w-5 text-center text-emerald-400"></i>
                        <span class="ml-2">Import Products</span>
                    </a>

                    <a href="<?php echo e(route('admin.categories.index')); ?>" class="flex items-center px-3.5 py-2.5 rounded-xl font-medium text-xs ml-4 transition-all duration-200 <?php echo e(request()->routeIs('admin.categories.index') ? 'text-gold-400 font-semibold' : 'hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-layer-group w-5 text-center"></i>
                        <span class="ml-2">Categories</span>
                    </a>
                </div>

                <!-- Sales & Customers -->
                <div class="pt-4">
                    <div class="px-3 pb-2 text-[11px] font-semibold tracking-wider text-amber-500/60 uppercase">E-Commerce</div>

                    <a href="<?php echo e(route('admin.orders.index')); ?>" class="flex items-center px-3.5 py-3 rounded-xl font-medium text-sm transition-all duration-200 <?php echo e(request()->routeIs('admin.orders.*') ? 'bg-gold-500/15 text-gold-400 border border-gold-500/30 font-semibold' : 'hover:bg-obsidian-800 hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-bag-shopping w-6 text-center text-base"></i>
                        <span class="ml-3 flex-1">All Orders</span>
                        <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-amber-500/20 text-gold-400 border border-amber-500/30">
                            <?php echo e(\Illuminate\Support\Facades\Schema::hasTable('orders') ? \App\Models\Order::count() : 0); ?>

                        </span>
                    </a>

                    <a href="<?php echo e(route('admin.customers.index')); ?>" class="flex items-center px-3.5 py-3 rounded-xl font-medium text-sm transition-all duration-200 <?php echo e(request()->routeIs('admin.customers.index') ? 'bg-gold-500/15 text-gold-400 border border-gold-500/30 font-semibold' : 'hover:bg-obsidian-800 hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-users w-6 text-center text-base"></i>
                        <span class="ml-3">Customers</span>
                    </a>
                </div>

                <!-- System Settings -->
                <div class="pt-4">
                    <div class="px-3 pb-2 text-[11px] font-semibold tracking-wider text-amber-500/60 uppercase">System</div>

                    <a href="<?php echo e(route('admin.settings.index')); ?>" class="flex items-center px-3.5 py-3 rounded-xl font-medium text-sm transition-all duration-200 <?php echo e(request()->routeIs('admin.settings.index') ? 'bg-gold-500/15 text-gold-400 border border-gold-500/30 font-semibold' : 'hover:bg-obsidian-800 hover:text-white text-slate-400'); ?>">
                        <i class="fa-solid fa-sliders w-6 text-center text-base"></i>
                        <span class="ml-3">Settings</span>
                    </a>
                </div>
            </nav>

            <!-- Sidebar Footer User Profile -->
            <div class="p-4 border-t border-obsidian-700 bg-obsidian-800/60">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3 overflow-hidden">
                        <div class="w-9 h-9 rounded-full bg-gold-500/20 border border-gold-500/40 flex items-center justify-center text-gold-400 font-bold text-sm">
                            <?php echo e(strtoupper(substr(Auth::user()->name ?? 'A', 0, 1))); ?>

                        </div>
                        <div class="truncate">
                            <p class="text-xs font-semibold text-slate-200 truncate"><?php echo e(Auth::user()->name ?? 'Admin'); ?></p>
                            <p class="text-[10px] text-gold-400/80 font-medium">Administrator</p>
                        </div>
                    </div>
                    <button onclick="confirmLogout()" title="Logout" class="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-colors">
                        <i class="fa-solid fa-right-from-bracket text-base"></i>
                    </button>
                </div>
            </div>

        </aside>

        <!-- MAIN CONTENT CONTAINER -->
        <div class="flex-1 flex flex-col md:pl-72 min-w-0">
            
            <!-- TOP STICKY HEADER -->
            <header class="sticky top-0 z-30 h-20 bg-white/90 backdrop-blur-md border-b border-amber-900/10 px-4 md:px-8 flex items-center justify-between shadow-xs">
                
                <!-- Left Section: Hamburger & Breadcrumb -->
                <div class="flex items-center space-x-4">
                    <button onclick="toggleSidebar()" class="md:hidden text-slate-600 hover:text-gold-600 p-2 rounded-lg bg-slate-100">
                        <i class="fa-solid fa-bars text-lg"></i>
                    </button>
                    <div>
                        <h1 class="text-lg md:text-xl font-serif font-bold text-slate-900">
                            <?php echo $__env->yieldContent('header_title', 'Dashboard'); ?>
                        </h1>
                        <p class="text-xs text-slate-500">Dwaraka Luxury E-Commerce Portal</p>
                    </div>
                </div>

                <!-- Right Section: Search, Notifications, Profile -->
                <div class="flex items-center space-x-3 md:space-x-5">
                    
                    <!-- Search Input -->
                    <div class="hidden sm:flex items-center relative">
                        <i class="fa-solid fa-magnifying-glass absolute left-3.5 text-xs text-slate-400"></i>
                        <input type="text" placeholder="Search catalog, orders..." class="w-48 lg:w-64 pl-9 pr-4 py-2 text-xs bg-slate-100/80 border border-slate-200 rounded-full focus:outline-none focus:border-gold-500 focus:bg-white transition-all">
                    </div>

                    <!-- Notification Bell -->
                    <button class="relative p-2.5 text-slate-500 hover:text-gold-600 hover:bg-gold-50 rounded-full transition-colors">
                        <i class="fa-regular fa-bell text-lg"></i>
                        <span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-gold-500 ring-2 ring-white"></span>
                    </button>

                    <!-- Quick Gold Badge -->
                    <div class="hidden lg:flex items-center space-x-2 px-3 py-1.5 bg-gold-50 border border-gold-200 rounded-full">
                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        <span class="text-[11px] font-semibold text-gold-700">Live ERP Sync</span>
                    </div>

                </div>
            </header>

            <!-- FLASH NOTIFICATIONS -->
            <main class="flex-1 p-4 md:p-8 max-w-7xl w-full mx-auto">
                <?php if(session('success')): ?>
                    <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 flex items-start justify-between shadow-sm animate-fade-in">
                        <div class="flex items-center space-x-3">
                            <i class="fa-solid fa-circle-check text-emerald-500 text-xl"></i>
                            <span class="text-sm font-medium"><?php echo e(session('success')); ?></span>
                        </div>
                        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                    <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800 flex items-start justify-between shadow-sm animate-fade-in">
                        <div class="flex items-center space-x-3">
                            <i class="fa-solid fa-triangle-exclamation text-red-500 text-xl"></i>
                            <span class="text-sm font-medium"><?php echo e(session('error')); ?></span>
                        </div>
                        <button onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                <?php endif; ?>

                <?php echo $__env->yieldContent('content'); ?>
            </main>

            <!-- FOOTER -->
            <footer class="py-4 px-8 border-t border-slate-200/80 bg-white text-center md:text-left text-xs text-slate-500 flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
                <p>&copy; <?php echo e(date('Y')); ?> <span class="font-serif font-semibold text-gold-700">Dwaraka Collection</span>. All Rights Reserved.</p>
                <p class="text-[11px] text-slate-400">Handcrafted E-Commerce Management System</p>
            </footer>

        </div>
    </div>

    <!-- LOGOUT CONFIRMATION MODAL -->
    <div id="logout-modal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center hidden transition-all duration-300">
        <div class="bg-white rounded-2xl p-6 md:p-8 max-w-sm w-full mx-4 shadow-2xl border border-amber-900/10 text-center transform scale-95 transition-transform duration-200">
            <div class="w-14 h-14 rounded-full bg-amber-50 text-gold-600 flex items-center justify-center mx-auto mb-4 text-2xl border border-amber-200">
                <i class="fa-solid fa-right-from-bracket"></i>
            </div>
            <h3 class="font-serif text-xl font-bold text-slate-900 mb-2">Logout Confirmation</h3>
            <p class="text-xs text-slate-500 mb-6">Are you sure you want to end your admin session?</p>
            
            <div class="flex items-center justify-center space-x-3">
                <button onclick="closeLogoutModal()" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 hover:bg-slate-50 font-medium text-xs transition-colors">
                    CANCEL
                </button>
                <form action="<?php echo e(route('admin.logout')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="px-5 py-2.5 rounded-xl gold-gradient-bg text-obsidian-900 font-bold text-xs shadow-md hover:brightness-105 transition-all">
                        YES, LOGOUT
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('mobile-overlay');
            sidebar.classList.toggle('-translate-x-full');
            overlay.classList.toggle('hidden');
        }

        function confirmLogout() {
            document.getElementById('logout-modal').classList.remove('hidden');
        }

        function closeLogoutModal() {
            document.getElementById('logout-modal').classList.add('hidden');
        }
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH F:\dwaraka_backend\resources\views/admin/layouts/app.blade.php ENDPATH**/ ?>