@extends('website.includes.master')

@section('title')
    Home
@endsection

@section('content')

    <style>
        .owl-nav {
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            pointer-events: none; /* Prevent interfering with carousel items */
        }

        .owl-prev, .owl-next {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 50%;
            pointer-events: all; /* Enable click events */
            cursor: pointer;
        }

        .owl-prev:hover, .owl-next:hover {
            background-color: #444;
        }


    </style>

    <style>
        .carousel-container {
            position: relative; /* Anchor custom-nav to the container */
            overflow: hidden; /* Prevent arrows from moving outside */
        }

        .custom-nav {
            display: none; /* Hidden by default */
            position: absolute;
            top: 50%;
            width: 100%;
            z-index: 10;
            transform: translateY(-50%);
            pointer-events: none; /* Prevent interference with carousel items */
        }

        .custom-prev, .custom-next {
            pointer-events: all; /* Enable interaction */
            background: white;
            border: none;
            color: black;
            font-size: 20px;
            padding: 5px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            /*border-radius: 50%; !* Optional for rounded buttons *!*/
        }

        .custom-prev {
            left: 0px; /* Adjust distance from the left edge */
        }

        .custom-next {
            right: 0px; /* Adjust distance from the right edge */
        }

        @media (max-width: 768px) {
            .custom-nav {
                display: block; /* Show arrows only on mobile */
            }
        }


    </style>

    <!-- Start Slider Area -->
    <div class="slider__container slider--one bg__cat--3">
        <div class="slide__container slider__activation__wrap owl-carousel">
            <div class="single__slide animation__style01 slider__fixed--height">
                <div class="container">
                    <div class="row align-items__center">
                        <div class="col-md-7 col-sm-7 col-xs-12 col-lg-6">
                            <div class="slide">
                                <div class="slider__inner">
                                    <h2>collection 2022</h2>
                                    <h1 style="font-family: MyLihamFont;font-size: 40px">NICE CHAIR</h1>
                                    <div class="cr__btn">
                                        <a href="{{ route('shop') }}" class="MyHover My30Radius">Shop Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-5 col-xs-12 col-md-5">
                            <div class="slide__thumb">
                                <img src="{{ URL::asset('website/images/slider/fornt-img/1.png') }}"
                                     alt="slider images">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single__slide animation__style01 slider__fixed--height">
                <div class="container">
                    <div class="row align-items__center">
                        <div class="col-md-7 col-sm-7 col-xs-12 col-lg-6">
                            <div class="slide">
                                <div class="slider__inner">
                                    <h2>collection 2022</h2>
                                    <h1 style="font-family: MyLihamFont;font-size: 40px">NICE CHAIR</h1>
                                    <div class="cr__btn">
                                        <a href="{{ route('shop') }}" class="MyHover My30Radius">Shop Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-5 col-xs-12 col-md-5">
                            <div class="slide__thumb">
                                <img src="{{ URL::asset('website/images/slider/fornt-img/2.png') }}"
                                     alt="slider images">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Start Slider Area -->

    <!-- Start Top Rated Area -->
    <section class="top__rated__area bg__white">
        <div class="container-fluid">
            <div class="row mt--20">
                <div class="col-md-3">
                    <div class="row mt-5">
                        <div class="col-lg-12 mt-5">
                            <div class="section__title--2 text-center mt-3">
                                <h2 class="title__line" style="text-transform: capitalize !important;font-family: MyLihamFont">NEW IN</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 p-0" style="padding:0px !important;margin:0px !important;">
                    <div class="carousel-container">
                        <div class="custom-nav">
                            <button class="custom-prev">&#x276E;</button>
                            <button class="custom-next">&#x276F;</button>
                        </div>
                        <div class="row owl-carousel" id="MyNewinCarasoul"
                             style="padding:0px !important;margin:0px !important;">
                            @forelse($newins as $newin)
                                <div class="item">
                                    <div class="col-xl-4 col-lg-6 col-md-6 col-xs-12">
                                        <div class="htc__best__product">
                                            <div class="htc__best__pro__thumb">
                                                <a href="{{ route('product_detail',[$newin->slug]) }}">
                                                    <img
                                                            src="{{ URL::asset('admin/assets/uploads/'.$newin->image) }}"
                                                            style="width:100%;height:auto;border-radius: 50% !important"
                                                            alt="product images">
                                                    <center>
                                                        <h3 class="mt-2"><b>{{ $newin->name }}</b></h3>
                                                    </center>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Top Rated Area -->

    <!-- Start Category Area -->
    <section class="htc__category__area ptb--100">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="section__title--2 text-center">
                        <h2 class="title__line" style="font-family: MyLihamFont">Products</h2>
                        <p>But I must explain to you how all this mistaken idea</p>
                    </div>
                </div>
            </div>
            <div class="htc__product__container">
                <div class="product__list clearfix h-auto mt--30">
                    <div class="row">
                        @forelse($allproducts as $allproduct)
                            <div class="col-md-3 col-6">
                                <div class="category">
                                    <div class="ht__cat__thumb">
                                        @if(!empty($allproduct->discount))
                                            <div class="sale-tag MyHover">{{ $allproduct->discount }}%</div>
                                        @endif
                                        <a href="{{ route('product_detail',[$allproduct->slug]) }}">
                                            <img src="{{ URL::asset('admin/assets/uploads/'.$allproduct->image) }}"
                                                 style="width:100%;height:auto;min-height:300px;max-height:300px"
                                                 alt="product images">
                                        </a>
                                    </div>
                                    <div class="fr__hover__info">
                                        <ul class="product__action">
                                            @if($allproduct->stock=="in stock")
                                                {{--                                                <li><a onclick="ShowLoader()" href="{{ route('user.add_to_cart_single',[$allproduct->id]) }}" class="ShowLoader"><i class="icon-handbag icons" style="color:#000000"></i></a></li>--}}
                                                <li><a onclick="ShowLoader()"
                                                       href="{{ route('user.add_to_cart_single',[$allproduct->id]) }}"
                                                       class="ShowLoader"><i
                                                                class="icon-handbag icons"></i></a></li>
                                            @endif

                                            @if(isset(Auth::guard('websiteuser')->user()->id) && $allproduct->wishlist)
                                                <li><a onclick="ShowLoader()"
                                                       href="{{ route('user.add_to_wishlist',[$allproduct->id]) }}"
                                                       style="background-color: black !important;"><i
                                                                class="icon-heart icons"
                                                                style="color:white !important;"></i></a></li>
                                            @else
                                                <li><a onclick="ShowLoader()"
                                                       href="{{ route('user.add_to_wishlist',[$allproduct->id]) }}"><i
                                                                class="icon-heart icons"></i></a></li>
                                            @endif
                                        </ul>
                                    </div>
                                    <div class="fr__product__inner">
                                        <h4><a href="">{{ $allproduct->name }}</a></h4>
                                        <ul class="fr__pro__prize">
                                            @if(!empty($allproduct->cut_price))
                                                <li class="old__prize">
                                                    <del>{{ $setting->currency_symbol }}{{ $allproduct->cut_price }}</del>
                                                </li>
                                            @endif
                                            <li>{{ $setting->currency_symbol }}{{ $allproduct->price }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <center>
                                <h2>No products available</h2>
                            </center>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Category Area -->

    <!-- Start Prize Good Area -->
    <section class="htc__good__sale bg__cat--3">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="fr__prize__inner">
                        <h2>Contrary to popular belief is simply rand.</h2>
                        <h3>Professor at Hamp deny dney College.</h3>
                        <a class="fr__btn MyHover My30Radius" href="#">Read More</a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="prize__inner">
                        <div class="prize__thumb">
                            <img src="{{ URL::asset('website/images/banner/big-img/1.png') }}" alt="banner images">
                        </div>
                        <div class="banner__info">
                            <div class="pointer__tooltip pointer--3 align-left">
                                <div class="tooltip__box">
                                    <h4>Tooltip Left</h4>
                                    <p>Lorem ipsum pisaci volupt atem accusa saes ntisdumtiu loperm asaerks.</p>
                                </div>
                            </div>
                            <div class="pointer__tooltip pointer--4 align-top">
                                <div class="tooltip__box">
                                    <h4>Tooltip Top</h4>
                                    <p>Lorem ipsum pisaci volupt atem accusa saes ntisdumtiu loperm asaerks.</p>
                                </div>
                            </div>
                            <div class="pointer__tooltip pointer--5 align-bottom">
                                <div class="tooltip__box">
                                    <h4>Tooltip Bottom</h4>
                                    <p>Lorem ipsum pisaci volupt atem accusa saes ntisdumtiu loperm asaerks.</p>
                                </div>
                            </div>
                            <div class="pointer__tooltip pointer--6 align-top">
                                <div class="tooltip__box">
                                    <h4>Tooltip Bottom</h4>
                                    <p>Lorem ipsum pisaci volupt atem accusa saes ntisdumtiu loperm asaerks.</p>
                                </div>
                            </div>
                            <div class="pointer__tooltip pointer--7 align-top">
                                <div class="tooltip__box">
                                    <h4>Tooltip Bottom</h4>
                                    <p>Lorem ipsum pisaci volupt atem accusa saes ntisdumtiu loperm asaerks.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Prize Good Area -->

    <!-- Start Product Area -->
    <section class="ftr__product__area ptb--100">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="section__title--2 text-center">
                        <h2 class="title__line" style="font-family: MyLihamFont">Feature Products</h2>
                        <p>But I must explain to you how all this mistaken idea</p>
                    </div>
                </div>
            </div>
            <div class="product__wrap clearfix">
                <div class="row">
                    @forelse($featureproducts as $featureproduct)
                        <div class="col-md-3 col-6">
                            <div class="category">
                                <div class="ht__cat__thumb">
                                    @if(!empty($featureproduct->discount))
                                        <div class="sale-tag MyHover">{{ $featureproduct->discount }}%</div>
                                    @endif
                                    <a href="{{ route('product_detail',[$featureproduct->slug]) }}">
                                        <img src="{{ URL::asset('admin/assets/uploads/'.$featureproduct->image) }}"
                                             style="width:100%;height:auto;min-height:300px;max-height:300px"
                                             alt="product images">
                                    </a>
                                </div>
                                <div class="fr__hover__info">
                                    <ul class="product__action">
                                        @if($featureproduct->stock=="in stock")
                                            <li><a onclick="ShowLoader()"
                                                   href="{{ route('user.add_to_cart_single',[$featureproduct->id]) }}"><i
                                                            class="icon-handbag icons"></i></a>
                                            </li>
                                        @endif
                                        @if(isset(Auth::guard('websiteuser')->user()->id) && $featureproduct->wishlist)
                                            <li><a onclick="ShowLoader()"
                                                   href="{{ route('user.add_to_wishlist',[$featureproduct->id]) }}"
                                                   style="background-color: black !important;"><i
                                                            class="icon-heart icons"
                                                            style="color:white !important;"></i></a></li>
                                        @else
                                            <li><a onclick="ShowLoader()"
                                                   href="{{ route('user.add_to_wishlist',[$featureproduct->id]) }}"><i
                                                            class="icon-heart icons"></i></a></li>
                                        @endif
                                    </ul>
                                </div>
                                <div class="fr__product__inner">
                                    <h4>
                                        <a href="{{ route('product_detail',[$featureproduct->slug]) }}">{{ $featureproduct->name }}</a>
                                    </h4>
                                    <ul class="fr__pro__prize">
                                        @if(!empty($featureproduct->cut_price))
                                            <li class="old__prize">
                                                <del>{{ $setting->currency_symbol }}{{ $featureproduct->cut_price }}</del>
                                            </li>
                                        @endif
                                        <li>{{ $setting->currency_symbol }}{{ $featureproduct->price }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @empty
                        <center>
                            <h2>No products available</h2>
                        </center>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Area -->

    <!-- Start Blog Area -->
    <section class="htc__blog__area bg__white pb--100">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="section__title--2 text-center">
                        <h2 class="title__line" style="font-family: MyLihamFont">Our Blog</h2>
                        <p>But I must explain to you how all this mistaken idea</p>
                    </div>
                </div>
            </div>
            <div class="ht__blog__wrap clearfix">
                <div class="row">
                    @forelse($blogs as $b=>$blog)
                        <div class="col-md-6 col-lg-4 col-sm-12 col-xs-12">
                            <div class="blog">
                                <div class="blog__thumb">
                                    <a href="{{ route('blog_detail',[$blog->slug]) }}">
                                        <img src="{{ URL::asset('admin/assets/uploads/'.$blog->image) }}"
                                             style="width:100%;min-height:270px;max-height:270px"
                                             alt="blog images">
                                    </a>
                                </div>
                                <div class="blog__details">
                                    <div class="bl__date">
                                        <span>{{ Carbon\Carbon::parse($blog->created_at)->format("M d , Y") }}</span>
                                    </div>
                                    <h2>
                                        <a href="{{ route('blog_detail',[$blog->slug]) }}">{!! Str::limit(strip_tags($blog->heading), 100) !!}</a>
                                    </h2>
                                    {!! Str::limit(strip_tags($blog->description), 150) !!}

                                    <div class="blog__btn mt-3">
                                        <a href="{{ route('blog_detail',[$blog->slug]) }}">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- End Blog Area -->

@endsection

@section('script')

    <script>

        function DesktopCarousel() {
            var owl = $('.owl-carousel');
            owl.owlCarousel({
                items: 4,
                loop: true,
                autoplay: true,
                autoplayTimeout: 3000,
                smartSpeed: 1000,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 4
                    }
                }
            });
        }

        function MobileCarousel() {
            $('#MyNewinCarasoul').owlCarousel({
                stagePadding: 70,
                loop: true,
                margin: 5,
                nav: true,
                center: true,
                autoplay: true,
                autoplayTimeout: 3000,
                smartSpeed: 1000,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 4
                    }
                }
            });

            // Custom navigation
            $('.custom-prev').click(function () {
                $('#MyNewinCarasoul').trigger('prev.owl.carousel');
            });

            $('.custom-next').click(function () {
                $('#MyNewinCarasoul').trigger('next.owl.carousel');
            });

        }

        // function MobileCarousel() {
        //     $('#MyNewinCarasoul').owlCarousel({
        //         stagePadding: 70,
        //         loop: true,
        //         margin: 5,
        //         nav: true,
        //         center: true,
        //         autoplay: true,
        //         autoplayTimeout: 3000,
        //         smartSpeed: 1000,
        //         responsive: {
        //             0: {
        //                 items: 1
        //             },
        //             600: {
        //                 items: 2
        //             },
        //             1000: {
        //                 items: 4
        //             }
        //         }
        //     });
        // }

        $(document).ready(function () {
            // Function to check viewport width and initialize the correct carousel
            function initializeCarousel() {
                if ($(window).width() < 768) { // Mobile viewport
                    // alert("mobile");
                    MobileCarousel();
                } else { // Desktop viewport
                    // alert("desktop");
                    DesktopCarousel();
                }
            }

            // Call the function on page load
            initializeCarousel();

            // Optional: Reinitialize on window resize
            $(window).resize(function () {
                // Clear any previously initialized carousels
                $('#MyNewinCarasoul').trigger('destroy.owl.carousel');
                $('#MyNewinCarasoul').trigger('destroy.owl.carousel');

                // Reinitialize based on new width
                initializeCarousel();
            });
        });


    </script>

@endsection