<!DOCTYPE html>
<html>
<head>
    <title><?php echo e($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="<?php echo e(asset('assets/css/style.css')); ?>" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::styles(); ?>

    <script src="<?php echo e(asset('assets/scripts/jquery-3.6.0.min.js')); ?>"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Add this to your layout head section -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>

<body data-theme="light">
    <!-- Sidebar Overlay (Mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
    
    <!-- Sidebar -->
    <nav class="sidebar d-flex flex-column" id="mainSidebar">
        <!-- Sidebar Header -->
        <div class="sidebar-header">
            <a href="#" class="logo">
               
                    <img src="<?php echo e(asset('assets/images/ocpd-logo.png')); ?>" alt="Logo" width="80">
                    
                
                <div>
                    <div class="logo-text">Miswaada</div>
                    
                </div>
            </a>
            <button class="sidebar-close-btn" id="closeSidebarBtn" title="Close sidebar">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        
        <!-- Navigation Component -->
        <div class="sidebar-nav flex-grow-1">
            <?php if (isset($component)) { $__componentOriginalcd6dfa97cd4704d24f53bf5968f88fee = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalcd6dfa97cd4704d24f53bf5968f88fee = $attributes; } ?>
<?php $component = App\View\Components\Navigation::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('navigation'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\Navigation::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalcd6dfa97cd4704d24f53bf5968f88fee)): ?>
<?php $attributes = $__attributesOriginalcd6dfa97cd4704d24f53bf5968f88fee; ?>
<?php unset($__attributesOriginalcd6dfa97cd4704d24f53bf5968f88fee); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalcd6dfa97cd4704d24f53bf5968f88fee)): ?>
<?php $component = $__componentOriginalcd6dfa97cd4704d24f53bf5968f88fee; ?>
<?php unset($__componentOriginalcd6dfa97cd4704d24f53bf5968f88fee); ?>
<?php endif; ?>
        </div>
        
        <!-- User Profile Component -->
        <div class="sidebar-footer">
            <?php if (isset($component)) { $__componentOriginal957d9cd62bf58de71c3f1973e71b24a4 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal957d9cd62bf58de71c3f1973e71b24a4 = $attributes; } ?>
<?php $component = App\View\Components\UserProfile::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('user-profile'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\UserProfile::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal957d9cd62bf58de71c3f1973e71b24a4)): ?>
<?php $attributes = $__attributesOriginal957d9cd62bf58de71c3f1973e71b24a4; ?>
<?php unset($__attributesOriginal957d9cd62bf58de71c3f1973e71b24a4); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal957d9cd62bf58de71c3f1973e71b24a4)): ?>
<?php $component = $__componentOriginal957d9cd62bf58de71c3f1973e71b24a4; ?>
<?php unset($__componentOriginal957d9cd62bf58de71c3f1973e71b24a4); ?>
<?php endif; ?>
        </div>
    </nav>

    <!-- Top Navigation -->
    <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 Section -->
                <div class="d-flex align-items-center">
                    <button class="btn mobile-menu-btn me-3" id="toggleSidebarBtn" title="Toggle sidebar">
                        <i class="bi bi-list"></i>
                    </button>
                    <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 Section -->
                <div class="d-flex align-items-center gap-2">
                    <!-- Search -->
                    <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>
                    
                    <!-- Theme Toggle -->
                    <button class="theme-toggle" id="themeToggle" title="Toggle Theme">
                        <i class="bi bi-moon"></i>
                    </button>
                    
                    <!-- Notifications -->
                    <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>
                    
                    <!-- User Dropdown -->
                    <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=<?php echo e(urlencode(Auth::user()->name ?? 'Admin User')); ?>&background=4361ee&color=fff" 
                                 class="rounded-circle" width="35" alt="Profile">
                            <span class="d-none d-md-inline"><?php echo e(Auth::user()->name ?? '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="<?php echo e(route('profile')); ?>"><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" onclick="event.preventDefault(); confirmLogout();"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <form method="POST" action="<?php echo e(route('logout')); ?>" id="logout-form" style="display: none;">
            <?php echo csrf_field(); ?>
        </form>
    </div>

    <!-- Main Content -->
    
        <?php echo e($slot); ?>

    

    <!-- Scripts -->
    <?php echo $__env->yieldPushContent('modals'); ?>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    
    <script>
        // Theme Toggle
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        const body = document.body;
        
        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';
            } else {
                themeIcon.classList.remove('bi-sun');
                themeIcon.classList.add('bi-moon');
                themeToggle.title = 'Switch to Dark Mode';
            }
        }
        
        applyTheme(getPreferredTheme());
        
        themeToggle.addEventListener('click', () => {
            const currentTheme = body.getAttribute('data-theme');
            applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
            themeIcon.style.transform = 'rotate(360deg)';
            setTimeout(() => {
                themeIcon.style.transition = 'transform 0.5s ease';
                themeIcon.style.transform = 'rotate(0deg)';
            }, 10);
        });

        // Sidebar functionality
        const sidebar = document.getElementById('mainSidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const toggleBtn = document.getElementById('toggleSidebarBtn');
        const closeBtn = document.getElementById('closeSidebarBtn');

        function toggleSidebar() {
            if (window.innerWidth >= 992) {
                sidebar.classList.toggle('collapsed');
                if (sidebar.classList.contains('collapsed')) {
                    body.classList.add('sidebar-collapsed-global');
                } else {
                    body.classList.remove('sidebar-collapsed-global');
                }
            } else {
                sidebar.classList.toggle('show');
                overlay.classList.toggle('show');
            }
        }

        toggleBtn.addEventListener('click', toggleSidebar);
        closeBtn.addEventListener('click', toggleSidebar);
        overlay.addEventListener('click', toggleSidebar);

        // Logout confirmation
        window.confirmLogout = function() {
            Swal.fire({
                title: 'Ready to Leave?',
                text: "You will be logged out of your session",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#4361ee',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, logout',
                cancelButtonText: 'Stay logged in',
                background: 'var(--card-bg)',
                color: 'var(--text-primary)',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('logout-form').submit();
                }
            });
        };
    </script>
    <!-- Add this at the end of your layout, before closing body tag -->
    <script>
        // Global modal backdrop handler
        document.addEventListener('livewire:init', function() {
            // Remove any lingering modal backdrops
            Livewire.on('close-modal', () => {
                setTimeout(() => {
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                    $('body').css('overflow', 'auto');
                }, 100);
            });
        });
    </script>
    <?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::scripts(); ?>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html><?php /**PATH /Users/malando/Downloads/laravelApps/mswaada/resources/views/layouts/app.blade.php ENDPATH**/ ?>