<!DOCTYPE html>
<html lang="en" class="h-full bg-[#0f0f10] text-slate-100 dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Centipid ISP Billing CRM')</title>
    
    <!-- Google Fonts: Plus Jakarta Sans -->
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        dark: {
                            bg: '#0f0f10',
                            card: '#161618',
                            panel: '#1c1c1f',
                            border: '#2a2a2e',
                            hover: '#26262a',
                        },
                        orange: {
                            500: '#f97316',
                            600: '#ff8800',
                            700: '#ea580c',
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Leaflet CSS & JS for Fiber GIS Mapping -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        .custom-card {
            background-color: #161618;
            border: 1px solid #2a2a2e;
        }
        .custom-panel {
            background-color: #1c1c1f;
            border: 1px solid #2a2a2e;
        }
        .btn-orange {
            background-color: #ff8800;
            color: #ffffff;
            font-weight: 700;
            transition: all 0.2s ease;
        }
        .btn-orange:hover {
            background-color: #ea580c;
        }
        /* Leaflet Z-Index Constraint Fix */
        .leaflet-container {
            z-index: 1 !important;
        }
        .leaflet-pane, .leaflet-top, .leaflet-bottom {
            z-index: 10 !important;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        ::-webkit-scrollbar-track {
            background: #0f0f10;
        }
        ::-webkit-scrollbar-thumb {
            background: #2a2a2e;
            border-radius: 9999px;
        }

        /* Light Mode CSS Overrides */
        html:not(.dark) body {
            background-color: #f8fafc !important;
            color: #0f172a !important;
        }
        html:not(.dark) main, html:not(.dark) .flex-1 {
            background-color: #f8fafc !important;
        }
        html:not(.dark) aside {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html:not(.dark) header {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html:not(.dark) .custom-card, html:not(.dark) .custom-panel {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            color: #0f172a !important;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05) !important;
        }
        html:not(.dark) .text-white {
            color: #0f172a !important;
        }
        html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-300 {
            color: #475569 !important;
        }
        html:not(.dark) .bg-\[\#121214\], html:not(.dark) .bg-\[\#161618\], html:not(.dark) .bg-\[\#1c1c1f\], html:not(.dark) .bg-\[\#111113\] {
            background-color: #ffffff !important;
        }
        html:not(.dark) .bg-\[\#18181b\], html:not(.dark) .bg-\[\#0f0f10\] {
            background-color: #f1f5f9 !important;
        }
        html:not(.dark) .border-\[\#222226\], html:not(.dark) .border-\[\#2a2a2e\], html:not(.dark) .border-\[\#27272a\] {
            border-color: #e2e8f0 !important;
        }
        html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }
    </style>
    <script>
        // Persistent Theme Initialization
        if (localStorage.getItem('theme') === 'light') {
            document.documentElement.classList.remove('dark');
        } else {
            document.documentElement.classList.add('dark');
        }
    </script>
</head>
<body class="h-full bg-[#0f0f10] font-sans text-slate-200 antialiased overflow-hidden">
    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar Navigation (Fixed Left) -->
        <aside class="w-64 bg-[#121214] border-r border-[#222226] flex flex-col justify-between z-30 shrink-0 select-none">
            <div class="overflow-y-auto">
                <!-- Brand Header -->
                <div class="h-16 px-6 flex items-center justify-between border-b border-[#222226]">
                    <div class="flex items-center gap-2">
                        <span class="font-extrabold text-xl tracking-tight text-white">DATABRAIN</span>
                    </div>
                    <button class="text-slate-500 hover:text-slate-300 text-xs">
                        <i data-lucide="chevron-left" class="w-4 h-4"></i>
                    </button>
                </div>

                <!-- Navigation List -->
                <div class="p-3 space-y-5 text-xs font-semibold">
                    
                    <!-- Top Link: Overview -->
                    <div class="space-y-1">
                        <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {{ request()->routeIs('admin.dashboard') || request()->routeIs('admin.overview') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="layout-grid" class="w-4 h-4 text-slate-400"></i>
                            <span>Overview</span>
                        </a>
                    </div>

                    <!-- CUSTOMERS Section -->
                    <div class="space-y-1">
                        <p class="px-3 text-[10px] font-extrabold uppercase tracking-widest text-slate-500 mb-1">Customers</p>
                        
                        <a href="{{ route('admin.subscribers.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.subscribers.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="users" class="w-4 h-4"></i>
                            <span>Subscribers</span>
                        </a>

                        <a href="{{ route('admin.leads.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.leads.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="check-square" class="w-4 h-4"></i>
                            <span>Leads</span>
                        </a>

                        <a href="{{ route('admin.tickets.index') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.tickets.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="message-square" class="w-4 h-4"></i>
                                <span>Tickets</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>
                    </div>

                    <!-- NETWORK Section -->
                    <div class="space-y-1">
                        <p class="px-3 text-[10px] font-extrabold uppercase tracking-widest text-slate-500 mb-1">Network</p>
                        
                        <a href="{{ route('admin.network.sessions') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.network.sessions') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="wifi" class="w-4 h-4"></i>
                            <span>Live sessions</span>
                        </a>

                        <a href="{{ route('admin.plans.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.plans.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="box" class="w-4 h-4"></i>
                            <span>Plans</span>
                        </a>

                        <a href="{{ route('admin.network.routers') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.network.routers') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="hard-drive" class="w-4 h-4"></i>
                                <span>Devices</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>

                        <a href="{{ route('admin.network.fiber') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.network.fiber') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="activity" class="w-4 h-4"></i>
                                <span>Fiber</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>

                        <a href="{{ route('admin.network.routers') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]">
                            <i data-lucide="sliders" class="w-4 h-4"></i>
                            <span>TR-069</span>
                        </a>
                    </div>

                    <!-- FINANCE Section -->
                    <div class="space-y-1">
                        <p class="px-3 text-[10px] font-extrabold uppercase tracking-widest text-slate-500 mb-1">Finance</p>
                        
                        <a href="{{ route('admin.finance.invoices') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.finance.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="receipt" class="w-4 h-4"></i>
                                <span>Billing</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>

                        <a href="{{ route('admin.finance.vouchers') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.finance.vouchers') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="ticket" class="w-4 h-4"></i>
                                <span>Vouchers</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>
                    </div>

                    <!-- OUTREACH Section -->
                    <div class="space-y-1">
                        <p class="px-3 text-[10px] font-extrabold uppercase tracking-widest text-slate-500 mb-1">Outreach</p>
                        
                        <a href="{{ route('admin.communications.sms') }}" class="flex items-center justify-between px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.communications.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <div class="flex items-center gap-3">
                                <i data-lucide="send" class="w-4 h-4"></i>
                                <span>Communications</span>
                            </div>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-500"></i>
                        </a>
                    </div>

                    <!-- INSIGHTS Section -->
                    <div class="space-y-1">
                        <p class="px-3 text-[10px] font-extrabold uppercase tracking-widest text-slate-500 mb-1">Insights</p>
                        
                        <a href="{{ route('admin.insights.analytics') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl transition-all {{ request()->routeIs('admin.insights.*') ? 'bg-[#222226] text-orange-500 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-[#1a1a1d]' }}">
                            <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
                            <span>Analytics</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- User Footer Profile -->
            <div class="p-3 border-t border-[#222226]">
                <div class="flex items-center justify-between bg-[#161618] p-2.5 rounded-xl border border-[#2a2a2e]">
                    <div class="flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-full bg-[#ff8800] text-black font-extrabold flex items-center justify-center text-xs">
                            CB
                        </div>
                        <div class="overflow-hidden">
                            <p class="text-xs font-bold text-white truncate">{{ Auth::user()->name ?? 'Chandra' }}</p>
                            <p class="text-[10px] text-slate-400 truncate">ISP Admin</p>
                        </div>
                    </div>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="text-slate-500 hover:text-rose-400 p-1.5 rounded-lg hover:bg-rose-500/10">
                            <i data-lucide="log-out" class="w-4 h-4"></i>
                        </button>
                    </form>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-[#0f0f10]">
            
            <!-- Global Top Header Bar -->
            <header class="h-16 bg-[#0f0f10] border-b border-[#222226] px-8 flex items-center justify-between shrink-0">
                <!-- Breadcrumbs -->
                <div class="flex items-center gap-2 text-xs font-semibold text-slate-400">
                    <span>@yield('breadcrumb_parent', 'Dashboard')</span>
                    <span>/</span>
                    <span class="text-white font-bold">@yield('breadcrumb_current', 'Users')</span>
                </div>

                <!-- Global Search & AI Assistant -->
                <div class="flex items-center gap-3">
                    <div class="relative w-96">
                        <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500"></i>
                        <input type="text" placeholder="Search subscribers, routers, payments..." class="w-full bg-[#18181b] border border-[#27272a] text-slate-200 text-xs rounded-xl pl-10 pr-16 py-2 focus:outline-none focus:border-orange-500 transition-all placeholder-slate-500">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-mono bg-[#27272a] text-slate-400 px-1.5 py-0.5 rounded border border-[#3f3f46]">Ctrl+K</span>
                    </div>

                    <!-- AI Sparkle Assistant Button -->
                    <button title="AI Assistant" class="w-8 h-8 rounded-xl bg-[#18181b] border border-[#27272a] text-orange-500 hover:border-orange-500 flex items-center justify-center transition-colors">
                        <i data-lucide="sparkles" class="w-4 h-4"></i>
                    </button>

                    <!-- Dark / Light Theme Toggle Button -->
                    <button onclick="toggleTheme()" id="themeToggleBtn" title="Toggle Light / Dark Mode" class="w-8 h-8 rounded-xl bg-[#18181b] border border-[#27272a] text-amber-400 hover:border-orange-500 flex items-center justify-center transition-colors">
                        <i id="themeToggleIcon" data-lucide="sun" class="w-4 h-4"></i>
                    </button>

                    <!-- User Profile Avatar Pill -->
                    <div class="w-8 h-8 rounded-full bg-[#ff8800] text-black font-extrabold flex items-center justify-center text-xs shadow-md">
                        CB
                    </div>
                </div>
            </header>

            <!-- Flash Success Message -->
            @if(session('success'))
                <div class="bg-emerald-950/80 border-b border-emerald-500/30 px-8 py-2.5 flex items-center gap-2 text-emerald-400 text-xs">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    <span>{{ session('success') }}</span>
                </div>
            @endif

            <!-- Main Page Scrollable Body -->
            <main class="flex-1 overflow-y-auto p-8">
                @yield('content')
            </main>
        </div>
    </div>

    <!-- Theme Switcher & Lucide Initialization -->
    <script>
        function toggleTheme() {
            const isDark = document.documentElement.classList.contains('dark');
            if (isDark) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
            updateThemeIcon();
        }

        function updateThemeIcon() {
            const isDark = document.documentElement.classList.contains('dark');
            const btn = document.getElementById('themeToggleBtn');
            if (!btn) return;
            if (isDark) {
                btn.innerHTML = '<i data-lucide="sun" class="w-4 h-4 text-amber-400"></i>';
            } else {
                btn.innerHTML = '<i data-lucide="moon" class="w-4 h-4 text-indigo-600"></i>';
            }
            if (window.lucide) lucide.createIcons();
        }

        document.addEventListener('DOMContentLoaded', function() {
            updateThemeIcon();
            if (window.lucide) lucide.createIcons();
        });
    </script>
    @stack('scripts')
</body>
</html>
