<!DOCTYPE html>
<html>
    <head>

        <title>{{ $title ?? config('app.name') }}</title>
        <!-- Bootstrap 5 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
        <link rel="stylesheet" href="{{asset('assets/css/style-home.css')}}" />
        @livewireStyles

    </head>

<body data-theme="light">
    <!-- Sidebar Overlay (Mobile) -->
    {{-- <div class="sidebar-overlay" id="sidebarOverlay"></div> --}}
    
    <!-- Clean Minimal Sidebar with built-in close button -->
    {{-- <nav class="sidebar d-flex flex-column" id="mainSidebar">
        <!-- Sidebar Header with close button (always visible) -->
        <div class="sidebar-header">
            <a href="#" class="logo">
                <div class="logo-icon">
                    <i class="bi bi-speedometer2"></i>
                </div>
                <div>
                    <div class="logo-text">Miswaada</div>
                    <div class="logo-subtext">Clean Dashboard</div>
                </div>
            </a>
            <!-- new close button (visible both mobile & desktop) -->
            <button class="sidebar-close-btn" id="closeSidebarBtn" title="Close sidebar">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        
        <!-- Navigation -->
        <div class="sidebar-nav flex-grow-1">
            <!-- Main Section -->
            <div class="nav-section">
                <div class="nav-section-title">Main</div>
                <div class="nav-item">
                    <a href="#dashboard" class="nav-link active">
                        <div class="nav-icon">
                            <i class="bi bi-speedometer2"></i>
                        </div>
                        <div class="nav-text">Dashboard</div>
                        <span class="nav-badge">3</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#analytics" class="nav-link">
                        <div class="nav-icon">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <div class="nav-text">Analytics</div>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#reports" class="nav-link">
                        <div class="nav-icon">
                            <i class="bi bi-file-earmark-text"></i>
                        </div>
                        <div class="nav-text">Reports</div>
                    </a>
                </div>
            </div>
            
            <!-- Management Section -->
            <div class="nav-section">
                <div class="nav-section-title">Management</div>
                <div class="nav-item">
                    <a href="#users" class="nav-link">
                        <div class="nav-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="nav-text">Users</div>
                        <span class="nav-badge">24</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#products" class="nav-link">
                        <div class="nav-icon">
                            <i class="bi bi-box"></i>
                        </div>
                        <div class="nav-text">Products</div>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#orders" class="nav-link">
                        <div class="nav-icon">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="nav-text">Orders</div>
                        <span class="nav-badge">12</span>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- User Profile -->
        <div class="sidebar-footer">
            <div class="user-profile">
                <img src="https://ui-avatars.com/api/?name=Admin+User&background=4361ee&color=fff&size=200" 
                     class="user-avatar" alt="Admin User">
                <div class="user-info">
                    <div class="user-name">Admin User</div>
                    <div class="user-role">Administrator</div>
                </div>
                <button class="logout-btn" title="Logout">
                    <i class="bi bi-box-arrow-right"></i>
                </button>
            </div>
        </div>
    </nav> --}}

    <!-- Top Navigation -->
 <!-- Top Navigation - now without menu button -->
    <div class="top-nav" id="topNav">
        <div class="container-fluid h-100">
            <div class="d-flex align-items-center justify-content-between h-100">
                <!-- Left: Page Title -->
                <div class="d-flex align-items-center">
                    <h4 class="mb-0 fw-semibold d-none d-md-block">Dashboard Overview</h4>
                    <h5 class="mb-0 fw-semibold d-md-none">Dashboard</h5>
                </div>
                
                <!-- Right: Essential Actions -->
                <div class="d-flex align-items-center gap-2">
                    <div class="d-none d-md-block me-3">
                        <div class="input-group" style="width: 250px;">
                            <input type="text" class="form-control border border-end-0" placeholder="Search...">
                            <button class="btn btn-outline-primary border border-start-0" type="button">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <button class="theme-toggle" id="themeToggle" title="Toggle Theme">
                        <i class="bi bi-moon"></i>
                    </button>
                    
                    <div class="dropdown">
                        <button class="btn btn-light position-relative rounded-circle" type="button" 
                                data-bs-toggle="dropdown" style="width: 40px; height: 40px;">
                            <i class="bi bi-bell"></i>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                                  style="font-size: 0.6rem; padding: 2px 5px;">3</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end p-3" style="width: 300px;">
                            <h6 class="dropdown-header fw-semibold">Notifications</h6>
                            <a class="dropdown-item py-3" href="#">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="bg-primary bg-opacity-10 p-2 rounded">
                                            <i class="bi bi-check-circle text-primary"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 fw-semibold">Order Completed</h6>
                                        <small class="text-muted">Order #1234 has been shipped</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <div class="dropdown">
                        <button class="btn btn-light d-flex align-items-center gap-2 border-0" 
                                type="button" data-bs-toggle="dropdown">
                            <img src="https://ui-avatars.com/api/?name=Admin+User&background=4361ee&color=fff" 
                                 class="rounded-circle" width="35" alt="Profile">
                            <span class="d-none d-md-inline">Admin User</span>
                            <i class="bi bi-chevron-down d-none d-md-inline"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end border shadow-sm">
                            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
                            <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- CONTENT -->


    {{ $slot }}


            <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // ---------- THEME TOGGLE ----------
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        const body = document.body;
        const themeHint = document.getElementById('themeHint');
        
        function getPreferredTheme() {
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme) return savedTheme;
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        
        function applyTheme(theme) {
            body.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            if (theme === 'dark') {
                themeIcon.classList.remove('bi-moon');
                themeIcon.classList.add('bi-sun');
                themeToggle.title = 'Switch to Light Mode';
                if (themeHint) themeHint.textContent = 'Dark mode activated! Click the sun icon for light mode.';
            } else {
                themeIcon.classList.remove('bi-sun');
                themeIcon.classList.add('bi-moon');
                themeToggle.title = 'Switch to Dark Mode';
                if (themeHint) themeHint.textContent = 'Click the moon icon to try dark mode!';
            }
        }
        
        applyTheme(getPreferredTheme());
        
        themeToggle.addEventListener('click', () => {
            const currentTheme = body.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            applyTheme(newTheme);
            themeIcon.style.transform = 'rotate(360deg)';
            setTimeout(() => {
                themeIcon.style.transition = 'transform 0.5s ease';
                themeIcon.style.transform = 'rotate(0deg)';
            }, 10);
        });
        
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            if (!localStorage.getItem('theme')) {
                applyTheme(e.matches ? 'dark' : 'light');
            }
        });

        // Remove active states from any leftover nav links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
            });
        });

        // Entrance animations
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.dashboard-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
            const icons = document.querySelectorAll('.icon-wrapper');
            icons.forEach((icon, index) => {
                setTimeout(() => {
                    icon.style.transform = 'scale(0)';
                    setTimeout(() => {
                        icon.style.transition = 'transform 0.5s ease';
                        icon.style.transform = 'scale(1)';
                    }, 50);
                }, index * 100);
            });
        });
    </script>

        @livewireScripts

    </body>
</html>