@extends('frontEnd.layouts.master') @section('title', 'Home') @push('seo')
    <meta name="app-url" content="" />
    <meta name="robots" content="index, follow" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <!-- Open Graph data -->
    <meta property="og:title" content="emonhasan" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{ asset($generalsetting->white_logo) }}" />
    <meta property="og:description" content="" />
@endpush @push('css')
    <link rel="stylesheet" href="{{ asset('public/frontEnd/css/owl.carousel.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('public/frontEnd/css/owl.theme.default.min.css') }}" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
@endpush @section('content')
    <section class="slider-section">
       
        <div class="container">
            <div class="row">

                <div class="col-sm-12">
                    <div class="home-slider-container">
                        <div class="main_slider owl-carousel">
                            @foreach ($sliders as $key => $value)
                                <div class="slider-item">
                                    <img src="{{ asset($value->image) }}" alt="" />
                                </div>
                                <!-- slider item -->
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- slider end -->

    <section class="homeproduct">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="sec_title">
                        <h3 class="section-title-header">
                            <div class="timer_inner">
                                <div class="">
                                    <span class="section-title-name"> Top Categories </span>
                                </div>
                            </div>
                        </h3>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="">
                        <div class="category-slider w-full owl-carousel">
                            @foreach ($menucategories as $key => $value)
                                <div class="cat_item">
                                    <div class="cat_img">
                                                                <a href="{{ route('category', $value->slug) }}">
                                                                    <img src="{{ asset($value->image) }}" alt="" />
                                                                </a>
                                                            </div>
                                    <div class="cat_name">
                                        <a href="{{ route('category', $value->slug) }}" style="white-space: nowrap;">
                                            {{ $value->name }}
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="homeproduct">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="sec_title">
                        <h3 class="section-title-header">
                            <div class="timer_inner">
                                <div class="">
                                    <span class="section-title-name"> Hot Deal </span>
                                </div>

                                <div class="">
                                    <div class="offer_timer" id="simple_timer"></div>
                                </div>
                            </div>
                        </h3>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="product_slider owl-carousel">
                        @foreach ($hotdeal_top as $key => $value)
                            <x-frontend-product-card :product="$value" />
                        @endforeach
                    </div>
                </div>
                <!-- <div class="col-sm-12">
                               <a href="{{ route('hotdeals') }}" class="view_more_btn" style="float:left">View More</a> 
                            </div> -->
            </div>
        </div>
    </section>

    <section class="homeproductslist">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h3 class="section-title-header">
                        <span class="section-title-name d-block">Home Products</span>
                    </h3>
                </div>
            </div>


            <div class="row">
                <div class="product_sliders">
                    @foreach($pageproducts as $product)
                        <x-frontend-product-card :product="$product" />
                    @endforeach
                </div>
            </div>

            <!-- Pagination Controls -->
            <div class="homepage pagination">
                @if($currentPage > 1)
                    <a href="{{ url()->current() }}?page={{ $currentPage - 1 }}" class="btn btn-secondary"> « Previous</a>
                @else
                <div class="btn btn-secondary">« Previous</div>
                @endif

                @if($currentPage < $lastPage)                   
                    <a href="{{ url()->current() }}?page={{ $currentPage + 1 }}" class="btn btn-secondary">Next »</a>
                @else
                    <div class="btn btn-secondary">Next »</div>
                @endif
            </div>
        </div>
    </section>

@endsection @push('script')
    <script src="{{ asset('public/frontEnd/js/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('public/frontEnd/js/jquery.syotimer.min.js') }}"></script>
    
    <script>
        $(document).ready(function () {
            let cleanURL = window.location.href.replace(/\/+$/, '');
            function getFbp() {
                return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
            }
            @if($settings['fb_pageview_event'] == 1)
                fbq('track', 'PageView',{}, {
                    eventID: '{{ $eventID }}',
                    fbp: getFbp(),
                    pageType: 'Homepage',
                    pageName: document.title,
                    url: cleanURL,
                    path: window.location.pathname,
                    referrer: document.referrer || 'direct',
                });
            @endif

            setTimeout(function() {
                @if($settings['fb_pageview_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}',
                    fbp: getFbp(),
                    event_name: "PageView",
                    page_title: document.title,
                    page_url: cleanURL,
                    
                });
                @endif
            }, 3000);

            $(".main_slider").owlCarousel({
                items: 1,
                loop: true,
                dots: false,
                autoplay: true,
                nav: true,
                autoplayHoverPause: false,
                margin: 0,
                mouseDrag: true,
                // smartSpeed: 8000,
                autoplayTimeout: 3000,
                // animateOut: "fadeOutDown",
                // animateIn: "slideInDown",

                navText: ["<i class='fa-solid fa-angle-left'></i>",
                    "<i class='fa-solid fa-angle-right'></i>"
                ],
            });

            $(".hotdeals-slider").owlCarousel({
                margin: 15,
                loop: true,
                dots: false,
                autoplayTimeout: 2000,
                autoplay: true,
                slideTransition: 'linear',
                autoplayHoverPause: true,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2,
                        nav: false,
                    },
                    600: {
                        items: 3,
                        nav: false,
                    },
                    1000: {
                        items: 6,
                        nav: true,
                        loop: false,
                    },
                },
            });
            
           
        });

        $(".category-slider").owlCarousel({
                margin: 15,
                loop: true,
                dots: false,
                arrow: false,
                autoplay: true,
                autoplayTimeout: 2000,
                // smartSpeed: 1000,
                autoplayHoverPause: true,
                slideTransition: 'linear',
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2,
                        nav: false,
                    },
                    600: {
                        items: 3,
                        nav: false,
                    },
                    1000: {
                        items: 6,
                        nav: true,
                        loop: true,
                    },
                },
            });

            $(".product_slider").owlCarousel({
                margin: 15,
                items: 6,
                loop: true,
                dots: false,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2,
                        nav: false,
                    },
                    600: {
                        items: 5,
                        nav: false,
                    },
                    1000: {
                        items: 5,
                        nav: false,
                        autoplayTimeout: 6000,
                    },
                },
            });
       
        $("#simple_timer").syotimer({
            date: new Date(2015, 0, 1),
            layout: "hms",
            doubleNumbers: false,
            effectType: "opacity",

            periodUnit: "d",
            periodic: true,
            periodInterval: 1,
        });

    </script>


@endpush