@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('site_title', env('APP_NAME')),
        'description' => nova_get_setting_translate('site_description', env('APP_NAME')),
        'keywords' => nova_get_setting_translate('site_keywords', env('APP_NAME')),
        'image' => Storage::url(nova_get_setting('logo')),
        'schema' => nova_get_setting('site_schema'),
    ])
@endsection

@section('extraStyles')
    <link rel="stylesheet" href="{{ asset('/assets/css/slider.css') }} " />
@endsection
@section('content')
    @include('home.partials.slider')
    @include('home.partials.first_subcategory')
    @include('home.partials.secound_subcategory')
    @include('home.partials.tours')
    @include('home.partials.tailor_banner')
    @include('home.partials.why_choose_us')
    @include('home.partials.customer_review')
    @include('home.partials.subscription')

@endsection

@section('extraScripts')
    <script src="https://kit.fontawesome.com/80c631cd02.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script src="{{ asset('assets/lib/owlcarousel/owl.carousel.min.js') }}"></script>

    <script src="{{ asset('/assets/lib/lightbox/js/lightbox.min.js') }}"></script>

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

    <script src="{{ asset('assets/js/custom.js') }}"></script>

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

            var sliding = false,
                curSlide = 1,
                numOfSlides = $(".slider--el").length;

            function changeSlide(next = true) {
                if (sliding) return;
                sliding = true;
                $(".slider--el").show();
                $(".slider--el").css("top");
                $(".slider--el.active").addClass("removed");
                next ? curSlide++ : curSlide--;
                if (curSlide < 1) curSlide = numOfSlides;
                if (curSlide > numOfSlides) curSlide = 1;
                $(".slider--el-" + curSlide).addClass("next");

                setTimeout(function() {
                    $(".slider--el.removed").hide();
                    $(".slider--el").removeClass("active next removed");
                    $(".slider--el-" + curSlide).addClass("active");
                    sliding = false;
                }, 2000);
            }

            // Event listener for manual control
            $(document).on("click", ".slider--control", function() {
                changeSlide($(this).hasClass("right"));
            });

            // Auto slide every 2 seconds
            setInterval(function() {
                changeSlide(true);
            }, 3000);

        });
    </script>
    <script>
        
        // setTimeout(function() {
        //     $('#customers-testimonials').owlCarousel({
        //         loop: false,
        //         dots: false,
        //         autoplayHoverPause: true,
        //         autoplay: true,
        //         smartSpeed: 1000,
        //         margin: 10,
        //         nav: false,
        //         responsive: {
        //             0: {
        //                 items: 1,
        //             },
        //             768: {
        //                 items: 1,
        //             },
        //             992: {
        //                 items: 1,
        //             },
        //             1200: {
        //                 items: 1
        //             }
        //         }
        //     });
        // }, 6000)
    

        jQuery(document).ready(function ($) {
    "use strict";
    //  TESTIMONIALS CAROUSEL HOOK
    $("#customers-testimonials").owlCarousel({
        loop: true,
        center: true,
        items: 3,
        margin: 0,
        autoplay: true,
        dots: false,
        autoplayTimeout: 8500,
        smartSpeed: 450,
        nav: true,
        navText: [
            '<i class="fa-solid fa-arrow-left"></i>',
            '<i class="fa-solid fa-arrow-right"></i>',
        ],
        responsive: {
            0: {
                items: 1,
            },
            768: {
                items: 2,
            },
            1170: {
                items: 3,
            },
        },
    });
});
    
    
    </script>
    
@endsection