<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Institution Axis ERP')</title>
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <!-- Google Font: Inter -->
    <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=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
    
    <!-- Your Custom CSS -->
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    
    @stack('styles')
</head>
<body>
    <div class="wrapper">
        <!-- Sidebar -->
        <aside id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <div class="logo-area">
                    <img src="{{ asset('assets/images/ialogo.png') }}" alt="Logo" style="height: 60px;">
                    <span class="logo-text">Institution Axis</span>
                </div>
                <button class="close-sidebar-btn" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <ul class="sidebar-nav">
                @yield('sidebar-menu')
            </ul>
            
            <div class="sidebar-footer">
                @yield('sidebar-footer')
            </div>
        </aside>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Top Navbar -->
            <nav class="top-navbar">
                <div class="nav-left">
                    <button id="toggleSidebar" class="toggle-btn">
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="breadcrumb-custom">
                        @yield('breadcrumb')
                    </div>
                </div>
                
                <div class="nav-right">
                    @yield('navbar-right')
                </div>
            </nav>

            <!-- Page Content -->
            <div class="container-fluid dashboard-content">
                @yield('content')
            </div>

            <!-- Footer -->
            <footer class="footer-minimal">
                <p>© 2026 Institution Axis ERP — School Management Simplified</p>
            </footer>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Chart.js (used in multiple dashboards) -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    
    <!-- Your Custom JS -->
    <script src="{{ asset('js/script.js') }}"></script>
    
    @stack('scripts')
    
    @yield('custom-scripts')
</body>
</html>