<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

    {{--    LIBRARIES STYLESHEET --}}
    <link rel="stylesheet" href="{{ asset('owlcarousel/assets/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('lightbox/lightbox.css') }}">

    {{-- TEMPLATE STYLESHEET --}}
    <link rel="stylesheet" href="{{ asset('main.css') }}">

    <link rel="stylesheet" href="{{ asset('/fonts/css/all.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <script src="{{ asset('jquery.js') }}"></script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body id="body" class="antialiased font-display">
    <section id="wrapper" class="duration-300 left-0 min-h-screen overflow-x-hidden relative z-10 bg-white">
        {{--        Message --}}
        @if (session('success'))
            <div class="bg-green-200 p-3">
                <div class="w-full flex gap-3">
                    <span class="rounded-full bg-green-500 w-6 h-6 text-white flex items-center justify-center">
                        <i class="fa fa-check text-sm"></i>
                    </span>
                    <div class="flex flex-col gap-1">
                        <h1 class="font-semibold text-sm text-green-500">Success</h1>
                        <p class="text-green-400">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif
        @include('layouts.quicklinks')
        @include('layouts.navbar')

        <main id="main" class="flex flex-col">
            @yield('main')
        </main>
        @include('layouts.footer')
    </section>
    <section id="mobile-menu" class="w-[250px] flex fixed top-0 right-0  min-h-screen bg-red-500">
        @include('layouts.mobile-navbar')
    </section>


    <script>
        const mobileMenuTrigger = document.getElementById('mobile-menu-trigger')
        const wrapper = document.getElementById('wrapper')
        const body = document.getElementById('body')
        const main = document.getElementById('main')
        mobileMenuTrigger.addEventListener('click', toggleMobileMenu)

        function toggleMobileMenu() {
            wrapper.classList.toggle('-left-[250px]')
            wrapper.classList.toggle('left-0')
            body.classList.toggle('overflow-y-hidden')
        }

        main.addEventListener('click', function() {
            if (wrapper.classList.contains('-left-[250px]')) {
                toggleMobileMenu()
            }
        })
    </script>


    {{-- SCRIPT LIBRARIES --}}
    <script src="{{ asset('jquery.js') }}"></script>
    <script src="{{ asset('owlcarousel/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('wow/wow.min.js') }}"></script>
    <script src="{{ asset('waypoints/waypoints.min.js') }}"></script>
    <script src="{{ asset('counterup/counterup.min.js') }}"></script>
    <script src="{{ asset('isotope/isotope.pkgd.min.js') }}"></script>
    <script src="{{ asset('easing/easing.min.js') }}"></script>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>


    {{-- TEMPLATE SCRIPT --}}
    <script src="{{ asset('main.js') }}"></script>



</body>

</html>
