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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zoological Survey of India</title>
    <link id="themeStylesheet" rel="stylesheet">
    <meta name="app-url" content="{{ asset('/') }}">
    {{-- CSS --}}
    <link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/animate.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/fancybox.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/aos.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/header.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/page.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/resources_services.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/top/css/top_bar.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/theme/css/theme.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/slick.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/sitemap.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/slick-theme.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('frontend/css/director_desk.css') }}">
    {{--
    <link href="{{ asset('css/google_translator.css') }}" rel="stylesheet"> --}}
    <link rel="stylesheet" href="{{ asset('frontend/css/regional_centre.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/important_rc.css') }}">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    {{-- JS --}}
    <script src="{{ asset('frontend/js/fancybox.umd.js') }}"></script>
    <script src="{{ asset('frontend/js/aos.js') }}"></script>
    <script src="{{ asset('frontend/js/accessibility/accessibility.js') }}"></script>
    <script src="{{ asset('frontend/js/accessibility/text-spacing.js') }}"></script>


</head>

<body class="font-sans antialiased">

    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">

        @include('frontend.bar.top_bar')
        @include('frontend.bar.header')
        @include('frontend.bar.marquee')

        <main>
            @yield('content')
            {{-- Back Top --}}
            <a href="#home" class="back-to-top">{{ fixed('Top', 'टॉप') }} </a>
        </main>

        @include('frontend.bar.footer')

    </div>
    <script src="https://cdn.ux4g.gov.in/tools/accessibility-widget.js" async></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="{{ asset('frontend/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('frontend/js/slick.min.js') }}"></script>


    <script>
        AOS.init({
            duration: 1000,
            once: true
        });

        function openExternalVideo() {
            if (confirm("You are being redirected to an external website (YouTube). Do you want to continue?")) {

                window.open(
                    "https://www.youtube.com/live/ZQsmgGFpWxM?si=I4CY0MsvBcn7-4qO",
                    "_blank"
                );

            }
        }

        const aboutDropdown = document.getElementById('aboutDropdown');

        if (aboutDropdown) {
            aboutDropdown.addEventListener('click', function () {
                setTimeout(() => {
                    document.getElementById('about-zsi')?.scrollIntoView({
                        behavior: 'smooth'
                    });
                }, 100);
            });
        }

        if ($('.logo-slider').length) {
            $('.logo-slider').slick({
                slidesToShow: 5,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 0,
                speed: 5000,
                cssEase: 'linear',
                infinite: true,
                arrows: false,
                dots: false,
                pauseOnHover: true,
                pauseOnFocus: false,
                responsive: [{
                    breakpoint: 992,
                    settings: {
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 2
                    }
                }
                ]
            });
        }
        function confirmExternalLink(url) {
            if (confirm("You are being redirected to an external website. Do you want to continue?")) {
                window.open(
                    url,
                    "_blank",
                    "noopener,noreferrer"
                );
            }
            return false;
        }
    </script>

    {{-- Top button --}}
    <script>
        const backToTopBtn = document.querySelector('.back-to-top');
        window.addEventListener('scroll', function () {
            if (window.scrollY > 200) {
                backToTopBtn.style.display = 'flex';
            } else {
                backToTopBtn.style.display = 'none';
            }
        });
    </script>


    <script>
        $(document).ready(function () {

            // Hover - Show current submenu
            $('.nav-item').on('mouseenter', function () {
                $(this).children('.custom-dropdown').stop(true, true).slideDown(200);
            });

            // Hover - Hide current submenu
            $('.nav-item').on('mouseleave', function () {
                $(this).children('.custom-dropdown').stop(true, true).slideUp(200);
            });

            // Click - Toggle current submenu
            $('.submenu-toggle').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                let parent = $(this).parent();
                let menu = parent.children('.custom-dropdown');

                // Close sibling menus only
                parent.siblings().find('> .custom-dropdown').slideUp(200);

                menu.stop(true, true).slideToggle(200);
            });

            // Prevent closing when clicking inside a dropdown
            $('.custom-dropdown').on('click', function (e) {
                e.stopPropagation();
            });

            // Click outside
            $(document).on('click', function () {
                $('.custom-dropdown').slideUp(200);
            });

        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script src="{{ asset('frontend/theme/js/theme.js') }}"></script>

    <script>

        new Swiper(".faunaSwiper", {

            effect: "coverflow",

            centeredSlides: true,

            loop: true,

            grabCursor: true,

            slidesPerView: "auto",

            speed: 900,

            autoplay: {
                delay: 3000,
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
            },

            coverflowEffect: {

                rotate: 0,

                stretch: 0,

                depth: 220,

                modifier: 2.5,

                scale: .82,

                slideShadows: true

            },

            pagination: {

                el: ".swiper-pagination",

                clickable: true

            }

        });
    </script>


    @stack('scripts')

</body>

</html>