<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#102542">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Just Exam League">
    <title>{{ config('app.name', 'Just Exam League') }}</title>
    <link rel="icon" href="{{ asset('public/frontend/images/logo.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('public/frontend/images/apple-touch-icon.png') }}">
    <link rel="manifest" href="{{ asset('public/site.webmanifest') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <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=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/sansation" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('public/frontend/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('public/frontend/css/media-query.css') }}">
    <link rel="stylesheet" href="{{ asset('public/frontend/css/portal.css') }}">
    @stack('styles')
</head>
@php($hasBottomNav = auth()->check() && (int) (auth()->user()->usertype ?? 0) === 4)
<body class="jel-front-shell {{ $hasBottomNav ? 'jel-has-bottom-nav' : '' }}">
    <div id="wrapperinner">
        @include('include.frontheader')
        <main class="page-content">
            <div class="container jel-front-container">
                <div class="row">
                    <div class="col-12">
                        @include('include.validation-errors')
                        @yield('content')
                    </div>
                </div>
            </div>
        </main>
        @include('include.frontfooter')
    </div>

    <script src="{{ asset('public/frontend/js/jquery.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    @include('include.pwa-register')
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var slideTrigger = document.getElementById('slide');
        var sidebar = document.getElementById('menhupartsectipon');
        var overlay = document.getElementById('sidebarOverlay');
        var closeTrigger = document.getElementById('closeSidebar');
        var body = document.body;

        var closeSidebar = function () {
            if (!sidebar || !overlay) {
                return;
            }

            sidebar.classList.remove('active');
            overlay.classList.remove('active');
            body.classList.remove('sidebar-open');

            if (slideTrigger) {
                slideTrigger.setAttribute('aria-expanded', 'false');
            }
        };

        if (slideTrigger && sidebar && overlay) {
            slideTrigger.addEventListener('click', function () {
                sidebar.classList.add('active');
                overlay.classList.add('active');
                body.classList.add('sidebar-open');
                slideTrigger.setAttribute('aria-expanded', 'true');
            });

            if (closeTrigger) {
                closeTrigger.addEventListener('click', closeSidebar);
            }

            overlay.addEventListener('click', closeSidebar);

            sidebar.querySelectorAll('a').forEach(function (link) {
                link.addEventListener('click', function () {
                    closeSidebar();
                });
            });

            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeSidebar();
                }
            });
        }

        if (window.bootstrap && typeof window.bootstrap.Tooltip === 'function') {
            document.querySelectorAll('[data-bs-toggle="tooltip"], [data-toggle="tooltip"]').forEach(function (element) {
                if (!window.bootstrap.Tooltip.getInstance(element)) {
                    new window.bootstrap.Tooltip(element);
                }
            });
        }
    });
    </script>
    @stack('scripts')
</body>
</html>
