<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin Dashboard') - Memorycloset Media</title>
    <link rel="icon" type="image/png" href="{{ asset('logos/logo1.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('logos/logo1.png') }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#f3f4f6] font-sans antialiased admin-page">
    <!-- Mobile Menu Overlay -->
    <div id="admin-mobile-overlay" class="fixed inset-0 bg-black/50 z-40 hidden lg:hidden transition-opacity duration-300" onclick="closeAdminMobileMenu()"></div>
    
    <div class="flex min-h-screen">
        @include('components.admin.sidebar')
        
        <div class="flex-1 flex flex-col lg:ml-0">
            <header class="bg-white/80 backdrop-blur-sm shadow-sm border-b border-[#d1d5db] sticky top-0 z-30">
                <div class="px-4 md:px-6 py-3 md:py-4 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <button id="admin-mobile-menu-btn" class="lg:hidden text-black hover:text-[#1a1a1a] transition-colors p-2 -ml-2" aria-label="Toggle menu">
                            <svg id="admin-menu-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                            <svg id="admin-close-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                        <h1 class="text-xl md:text-2xl lg:text-3xl font-serif font-bold text-black">@yield('page-title', 'Dashboard')</h1>
                    </div>
                    <div class="flex items-center gap-2 md:gap-4">
                        <div class="hidden sm:flex items-center gap-3">
                            <div class="w-8 h-8 md:w-10 md:h-10 bg-black rounded-full flex items-center justify-center">
                                <span class="text-white font-semibold text-sm md:text-base">{{ substr(auth()->user()->name, 0, 1) }}</span>
                            </div>
                            <span class="text-black font-medium text-sm md:text-base hidden md:inline">{{ auth()->user()->name }}</span>
                        </div>
                        <form method="POST" action="{{ route('admin.logout') }}">
                            @csrf
                            <button type="submit" class="text-black hover:text-[#1a1a1a] transition-colors font-medium flex items-center gap-1 md:gap-2 text-sm md:text-base" aria-label="Logout">
                                <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                </svg>
                                <span class="hidden sm:inline">Logout</span>
                            </button>
                        </form>
                    </div>
                </div>
            </header>
            
            <!-- Toast Notifications -->
            @if(session('success') || session('error') || ($errors ?? false) && $errors->any())
                <div id="admin-toast-container" class="fixed top-20 right-4 z-40 space-y-3 max-w-sm w-full">
                    @if(session('success'))
                        <div id="admin-toast-success" class="flex items-start gap-3 px-4 py-3 rounded-2xl bg-black/90 text-white shadow-2xl border border-[#22c55e] transform translate-x-0 opacity-100 transition-all duration-300">
                            <div class="mt-0.5">
                                <svg class="w-5 h-5 text-[#22c55e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold">Success</p>
                                <p class="text-sm text-[#e5e7eb] mt-0.5">{{ session('success') }}</p>
                            </div>
                            <button type="button" class="ml-2 text-[#9ca3af] hover:text-white transition-colors" onclick="this.closest('#admin-toast-success')?.classList.add('opacity-0','translate-x-4'); setTimeout(() => this.closest('#admin-toast-success')?.remove(), 300);">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    @endif
                    @if(session('error'))
                        <div id="admin-toast-error" class="flex items-start gap-3 px-4 py-3 rounded-2xl bg-black/90 text-white shadow-2xl border border-[#ef4444] transform translate-x-0 opacity-100 transition-all duration-300">
                            <div class="mt-0.5">
                                <svg class="w-5 h-5 text-[#ef4444]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"></path>
                                </svg>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold">Error</p>
                                <p class="text-sm text-[#e5e7eb] mt-0.5">{{ session('error') }}</p>
                            </div>
                            <button type="button" class="ml-2 text-[#9ca3af] hover:text-white transition-colors" onclick="this.closest('#admin-toast-error')?.classList.add('opacity-0','translate-x-4'); setTimeout(() => this.closest('#admin-toast-error')?.remove(), 300);">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    @endif
                    @if(($errors ?? false) && $errors->any())
                        <div id="admin-toast-validation" class="flex items-start gap-3 px-4 py-3 rounded-2xl bg-black/90 text-white shadow-2xl border border-[#f97316] transform translate-x-0 opacity-100 transition-all duration-300">
                            <div class="mt-0.5">
                                <svg class="w-5 h-5 text-[#f97316]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"></path>
                                </svg>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold">Please fix the highlighted fields</p>
                                @php
                                    $allErrors = $errors->all();
                                    $visibleErrors = array_slice($allErrors, 0, 3);
                                @endphp
                                <ul class="mt-1 space-y-0.5 text-xs text-[#e5e7eb] list-disc list-inside">
                                    @foreach($visibleErrors as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                    @if(count($allErrors) > 3)
                                        <li>and {{ count($allErrors) - 3 }} more issue(s)...</li>
                                    @endif
                                </ul>
                            </div>
                            <button type="button" class="ml-2 text-[#9ca3af] hover:text-white transition-colors" onclick="this.closest('#admin-toast-validation')?.classList.add('opacity-0','translate-x-4'); setTimeout(() => this.closest('#admin-toast-validation')?.remove(), 300);">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    @endif
                </div>
            @endif
            
            <main class="flex-1 p-4 md:p-6">
                @yield('content')
            </main>
        </div>
    </div>
    
    @stack('modals')
    @stack('scripts')
    
    <script>
    function openAdminMobileMenu() {
        const sidebar = document.getElementById('admin-sidebar');
        const overlay = document.getElementById('admin-mobile-overlay');
        const btn = document.getElementById('admin-mobile-menu-btn');
        const menuIcon = document.getElementById('admin-menu-icon');
        const closeIcon = document.getElementById('admin-close-icon');
        
        sidebar?.classList.remove('-translate-x-full');
        overlay?.classList.remove('hidden');
        btn?.setAttribute('aria-expanded', 'true');
        menuIcon?.classList.add('hidden');
        closeIcon?.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeAdminMobileMenu() {
        const sidebar = document.getElementById('admin-sidebar');
        const overlay = document.getElementById('admin-mobile-overlay');
        const btn = document.getElementById('admin-mobile-menu-btn');
        const menuIcon = document.getElementById('admin-menu-icon');
        const closeIcon = document.getElementById('admin-close-icon');
        
        sidebar?.classList.add('-translate-x-full');
        overlay?.classList.add('hidden');
        btn?.setAttribute('aria-expanded', 'false');
        menuIcon?.classList.remove('hidden');
        closeIcon?.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
    
    document.getElementById('admin-mobile-menu-btn')?.addEventListener('click', function() {
        const isOpen = this.getAttribute('aria-expanded') === 'true';
        if (isOpen) {
            closeAdminMobileMenu();
        } else {
            openAdminMobileMenu();
        }
    });
    
    // Close menu on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAdminMobileMenu();
        }
    });
    
    // Close menu when clicking on a link (mobile)
    document.querySelectorAll('#admin-sidebar a').forEach(link => {
        link.addEventListener('click', function() {
            if (window.innerWidth < 1024) {
                closeAdminMobileMenu();
            }
        });
    });
    
    // Auto-hide admin toast notifications after a delay
    window.addEventListener('DOMContentLoaded', function () {
        const successToast = document.getElementById('admin-toast-success');
        const errorToast = document.getElementById('admin-toast-error');
        const validationToast = document.getElementById('admin-toast-validation');
        
        function autoHideToast(toast, delay = 4000) {
            if (!toast) return;
            setTimeout(() => {
                toast.classList.add('opacity-0', 'translate-x-4');
                setTimeout(() => toast.remove(), 300);
            }, delay);
        }
        
        autoHideToast(successToast, 3500);
        autoHideToast(errorToast, 5000);
        autoHideToast(validationToast, 6000);
    });
    </script>
</body>
</html>


