<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="light">
<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', config('app.name', 'ProInvoice')) - Customer Portal</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>

    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#340080",
                        "sidebar-dark": "#157fed",
                        "sidebar-active": "#E6F0FF",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101922",
                    },
                    fontFamily: {
                        "display": ["Inter", "sans-serif"]
                    },
                },
            },
        }
    </script>

    <style>
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* Collapsed sidebar styles */
        #sidebar.sidebar-collapsed .sidebar-menu-label,
        #sidebar.sidebar-collapsed .sidebar-section-label,
        #sidebar.sidebar-collapsed .sidebar-menu-chevron,
        #sidebar.sidebar-collapsed .sidebar-menu-arrow,
        #sidebar.sidebar-collapsed .sidebar-user-info,
        #sidebar.sidebar-collapsed .sidebar-submenu {
            display: none !important;
        }
        
        #sidebar.sidebar-collapsed .sidebar-logo-full {
            display: none !important;
        }
        
        #sidebar.sidebar-collapsed .sidebar-logo-collapsed {
            display: block !important;
        }
        
        /* Center items when collapsed */
        #sidebar.sidebar-collapsed nav a,
        #sidebar.sidebar-collapsed nav button {
            justify-content: center;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
        
        #sidebar.sidebar-collapsed .sidebar-logo-container {
            justify-content: center;
        }
        
        /* Sidebar transition */
        .sidebar-transition {
            transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
        }
        
        /* Mobile overlay */
        .sidebar-overlay {
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark text-[#111418] font-display antialiased" style="background-color: rgba(0, 0, 0, 1) !important;">
<div class="flex h-screen w-full overflow-hidden">
    @include('components.sidebars.customer')

    <!-- Main Content -->
    <main class="flex-1 flex flex-col h-full overflow-hidden relative md:ml-0">
        <!-- Header with Toggle Button -->
        <header class="bg-[#157fed] border-b border-white/10 px-6 py-4 flex items-center justify-between z-10">
            <div class="flex items-center gap-4">
                <button onclick="toggleSidebar()" class="text-white/70 hover:text-white transition-colors">
                    <span class="material-symbols-outlined text-2xl md:text-xl" id="toggle-icon">menu</span>
                </button>
                <div class="flex flex-col">
                    <h1 class="text-xl font-bold text-white">@yield('page-title', 'Dashboard')</h1>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <!-- Search -->
                <div class="hidden md:flex items-center relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <span class="material-symbols-outlined text-white/50 text-sm">search</span>
                    </div>
                    <input type="text" placeholder="Search..." class="bg-white/10 border-0 text-white placeholder-white/50 rounded-lg pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-white/20 focus:outline-none w-64">
                </div>
            </div>
        </header>

        <!-- Scrollable Content Area -->
        <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 scroll-smooth">
            @if(session('success'))
                <div class="mb-4 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mb-4 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                    {{ session('error') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-4 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </div>
    </main>
</div>

<script>
    // Sidebar toggle functionality
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        const toggleIcon = document.querySelector('.sidebar-toggle-icon');
        
        if (window.innerWidth < 768) {
            // Mobile: toggle visibility
            const isHidden = sidebar.classList.contains('-translate-x-full');
            if (isHidden) {
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.remove('opacity-0', 'invisible');
                overlay.classList.add('opacity-100', 'visible');
            } else {
                sidebar.classList.add('-translate-x-full');
                overlay.classList.remove('opacity-100', 'visible');
                overlay.classList.add('opacity-0', 'invisible');
            }
        } else {
            // Desktop: toggle sidebar width between collapsed (w-16) and expanded (w-64)
            const isCollapsed = sidebar.classList.contains('w-16');
            
            if (isCollapsed) {
                // Expand sidebar
                sidebar.classList.remove('w-16');
                sidebar.classList.add('w-64');
                sidebar.classList.remove('sidebar-collapsed');
                if (toggleIcon) toggleIcon.textContent = 'menu';
                
                // Show full logo, hide collapsed logo
                const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                if (fullLogo) fullLogo.classList.remove('hidden');
                if (collapsedLogo) collapsedLogo.classList.add('hidden');
            } else {
                // Collapse sidebar
                sidebar.classList.remove('w-64');
                sidebar.classList.add('w-16');
                sidebar.classList.add('sidebar-collapsed');
                if (toggleIcon) toggleIcon.textContent = 'menu_open';
                
                // Hide full logo, show collapsed logo
                const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                if (fullLogo) fullLogo.classList.add('hidden');
                if (collapsedLogo) collapsedLogo.classList.remove('hidden');
            }
        }
    }

    // Initialize sidebar state
    document.addEventListener('DOMContentLoaded', function() {
        // On mobile, sidebar starts hidden
        if (window.innerWidth < 768) {
            document.getElementById('sidebar').classList.add('-translate-x-full');
        }
    });

    // Handle window resize
    window.addEventListener('resize', function() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        const toggleIcon = document.getElementById('toggle-icon');
        
        if (window.innerWidth >= 768) {
            // Desktop: remove mobile classes
            sidebar.classList.remove('-translate-x-full');
            overlay.classList.add('opacity-0', 'invisible');
            overlay.classList.remove('opacity-100', 'visible');
            if (toggleIcon) toggleIcon.textContent = 'menu';
        } else {
            // Mobile: ensure sidebar starts hidden
            sidebar.classList.add('-translate-x-full');
            if (toggleIcon) toggleIcon.textContent = 'menu';
        }
    });
</script>
</body>
</html>



