<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'Dashboard')</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('toaster/toaster.min.css') }}">

    @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body class="bg-gray-50">

    {{-- Header --}}
    @include('site.layouts.header')

    {{-- Page Content --}}
    <main class="min-h-screen">
        @yield('content')
    </main>
    <div class="loader-overlay" id="loader" >
        <div class="main-loader">
            <span class="loader"></span>
        </div>
    </div>

    {{-- Footer --}}
    @include('site.layouts.footer')

    {{-- Mobile Menu Script --}}
    <script>
        function toggleMenu() {
            document.getElementById('mobileMenu').classList.toggle('hidden');
        }
    </script>
    <script src="{{ asset('jquery/jquery.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <script src="{{ asset('toaster/toaster.min.js') }}"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    @stack('script')
    <script>

        @if(session()->has('success'))
            toastr.success('{{session('success')}}')
        @endif

        @if(session()->has('error'))
            toastr.error('{{session('error')}}')
        @endif
        
        $(document).ready(function() {
            $('.select2').select2();
            
        });
        $(document).ready(function() {
            // Initialize when modal opens
            $('#dialog').on('dialogopen', function() { // If using native events
                $('#courseApplyModal').select2({
                    dropdownParent: $('#dialog')
                });
            });

            // Or just initialize directly if modal is already in DOM
            $('#courseApplyModal').select2({
                dropdownParent: $('#dialog'), // if inside modal
                width: '100%', // make it full width
                placeholder: "Select subjects",
                allowClear: true
            });

        });


        // Show loader immediately
        document.getElementById('loader').style.display = 'flex';

        // Hide loader when page fully loads
        window.addEventListener('load', function() {
            document.getElementById('loader').style.display = 'none';
        });


        $(document).ajaxStart(function() {
            $('#loader').fadeIn(200);
        });

        $(document).ajaxStop(function() {
            $('#loader').fadeOut(200);
        });
    </script>

</body>

</html>
