@extends('LandingPage.Layouts.master')

@section('content')

    {{-- --main site Slider --}}

    <div
        class="slider-block style-two bg-linear 2xl:h-[800px] xl:h-[740px] lg:h-[680px] md:h-[580px] sm:h-[500px] h-[420px] w-full">
        <div class="slider-main h-full w-full">
            <div class="swiper swiper-slider h-full relative">
                <div class="swiper-wrapper">
                    @if (get_setting('home_slider_images') != null)
                        @foreach (json_decode(get_setting('home_slider_images'), true) as $key => $value)

                            <div class="swiper-slide">
                                <div class="slider-item h-full w-full relative overflow-hidden">
                                    <div
                                        class="container w-full h-full flex flex-col text-center items-center justify-center">
                                        <div class="text-content sm:w-[55%] w-2/3">
                                            <div
                                                class="text-sub-display text-center text-white"> {{ json_decode(get_setting('home_slider_title'), true)[$key] }}
                                            </div>
                                            <div class="text-display text-center text-white md:mt-5 mt-2">
                                                {{ json_decode(get_setting('home_slider_sub_title'), true)[$key] }}
                                            </div>
                                            <a href='{{ json_decode(get_setting('home_slider_links'), true)[$key] }}'
                                               class="button-main text-black md:mt-8 mt-3"
                                               style="background-color:{{ json_decode(get_setting('home_slider_color'), true)[$key] }} ">
                                                {{ json_decode(get_setting('home_slider_btn'), true)[$key] }}</a>
                                        </div>
                                        <div class="sub-img absolute left-0 top-0 w-full h-full z-[-1]">
                                            <img
                                                src="{{ uploaded_asset(json_decode(get_setting('home_slider_images'), true)[$key]) }}"
                                                alt='bg-cos3-1' class='w-full h-full object-cover'/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>
    </div>


    {{-- --nav site Slider --}}

    <div class='banner-top bg-[#F4C6A5] md:py-8 py-4    '>
        <div class="marquee-block swiper-container flex items-center whitespace-nowrap">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Get Glowing Skin</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-leaves md:text-[32px] text-[24px]'></div>
                </div>
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Learn Skincare Tips</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-double-leaves md:text-[32px] text-[24px]'></div>
                </div>
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Subscribe for Exclusive Offers</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-leaves md:text-[32px] text-[24px]'></div>
                </div>
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Get Glowing Skin</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-double-leaves md:text-[32px] text-[24px]'></div>
                </div>
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Learn Skincare Tips</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-leaves md:text-[32px] text-[24px]'></div>
                </div>
                <div class="swiper-slide">
                    <div class='heading5 md:px-[110px] px-12'>Subscribe for Exclusive Offers</div>
                </div>
                <div class="swiper-slide">
                    <div class='icon-double-leaves md:text-[32px] text-[24px]'></div>
                </div>
            </div>
        </div>
    </div>


    {{-- end--}}



    {{-- top category--}}

    @if (get_setting('top10_categories') !== null)
        <div class="collection-block cosmetic md:pt-20 pt-10">
            <div class="container">
                <div class="grid md:grid-cols-2 grid-cols-1 md:gap-[30px] gap-[16px]">

                    @php $categories = json_decode(get_setting('top10_categories')); @endphp

                    {{-- Left Side (First Category) --}}
                    @if(isset($categories[0]))
                        <div class="left">
                            <a href="{{route('landing.products.index',['category'=>category($categories[0])?->slug])}}"
                               class="collection-item block h-full relative md:rounded-[20px] rounded-xl overflow-hidden cursor-pointer">
                                <div class="bg-img h-full w-full aspect-square">
                                    <img src="{{ uploaded_asset(category($categories[0])?->banner) }}"
                                         alt="{{ category($categories[0])?->getTranslation('name') }}"
                                         class="h-full w-full object-cover"/>
                                </div>
                                <div
                                    class="collection-name heading5 text-center sm:bottom-[30px] bottom-4 lg:w-[200px] md:w-auto max-lg:px-5 lg:py-3 py-1.5 bg-white rounded-xl duration-500">
                                    {{ category($categories[0])?->getTranslation('name') }}
                                </div>
                            </a>
                        </div>
                    @endif

                    {{-- Right Side (Next Three Categories) --}}
                    <div class="right grid grid-rows-2 md:gap-[30px] gap-[16px]">
                        <div class="top grid grid-cols-2 md:gap-[30px] gap-[16px]">
                            @if(isset($categories[1]))
                                <a href="{{route('landing.products.index',['category'=>category($categories[1])?->slug])}}"
                                   class="collection-item block relative md:rounded-[20px] rounded-xl overflow-hidden cursor-pointer">
                                    <div class="bg-img h-full">
                                        <img src="{{ uploaded_asset(category($categories[1])?->banner) }}"
                                             alt="{{ category($categories[1])?->getTranslation('name') }}"
                                             class="h-full w-full object-cover"/>
                                    </div>
                                    <div
                                        class="collection-name heading5 text-center sm:bottom-[30px] bottom-4 lg:w-[200px] md:w-auto max-lg:px-5 lg:py-3 py-1.5 bg-white rounded-xl duration-500">
                                        {{ category($categories[1])?->getTranslation('name') }}
                                    </div>
                                </a>
                            @endif
                            @if(isset($categories[2]))
                                <a href="{{route('landing.products.index',['category'=>category($categories[2])?->slug])}}"
                                   class="collection-item block relative md:rounded-[20px] rounded-xl overflow-hidden cursor-pointer">
                                    <div class="bg-img h-full">
                                        <img src="{{ uploaded_asset(category($categories[2])?->banner) }}"
                                             alt="{{ category($categories[2])?->getTranslation('name') }}"
                                             class="h-full w-full object-cover"/>
                                    </div>
                                    <div
                                        class="collection-name heading5 text-center sm:bottom-[30px] bottom-4 lg:w-[200px] md:w-auto max-lg:px-5 lg:py-3 py-1.5 bg-white rounded-xl duration-500">
                                        {{ category($categories[2])?->getTranslation('name') }}
                                    </div>
                                </a>
                            @endif
                        </div>

                        <div class="bottom">
                            @if(isset($categories[3]))
                                <a href="{{route('landing.products.index',['category'=>category($categories[3])?->slug])}}"
                                   class="collection-item block relative md:rounded-[20px] rounded-xl overflow-hidden cursor-pointer">
                                    <div class="bg-img h-full">
                                        <img src="{{ uploaded_asset(category($categories[3])?->banner) }}"
                                             alt="{{ category($categories[3])?->getTranslation('name') }}"
                                             class="h-full w-full object-cover"/>
                                    </div>
                                    <div
                                        class="collection-name heading5 text-center sm:bottom-[30px] bottom-4 lg:w-[200px] md:w-auto max-lg:px-5 lg:py-3 py-1.5 bg-white rounded-xl duration-500">
                                        {{ category($categories[3])?->getTranslation('name') }}
                                    </div>
                                </a>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
        </div>
    @endif


    {{-- end  top categores

    <div class="banner-block md:pt-20 pt-10">
        <div class="container">
            <div class="list-banner grid md:grid-cols-3 gap-[20px]">
                @php
                    use App\Models\Category;
                    $featuredCategories = Category::where('featured', 0)->take(5)->get();
                @endphp

                @foreach($featuredCategories as $category)
                    <a href="{{ route('landing.category.show', $category->slug) }}"
                       class="banner-item relative bg-surface block rounded-[20px] overflow-hidden duration-500">
                        <div class="banner-img w-full">
                            @if($category->banner)
                                <img src="{{ uploaded_asset($category->banner) }}"
                                     alt="{{ $category->getTranslation('name') }}" class="w-full duration-500"/>

                            @else
                                <img src="{{ asset('landing/assets/images/default-banner.png') }}" alt="default banner"
                                     class="w-full duration-500"/>
                            @endif
                        </div>
                        <div
                            class="heading4 absolute top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">{{ $category->getTranslation('name') }}</div>
                        <div
                            class="button-main absolute bottom-8 left-1/2 -translate-x-1/2">{{translate('Shop Now')}}</div>
                    </a>
                @endforeach


            </div>
        </div>
    </div>
    --}}

    {{-- end categorey list --}}



    {{--      stories  --}}

    @if(!empty($productsWithVideo))
        <div class="community-story-block md:mt-20 mt-10">
            <div class="container">
                <div class="heading3 text-center">{{translate('Community Stories')}}</div>
                <div
                    class='list-product grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 md:gap-[30px] gap-[16px] md:mt-10 mt-6'>

                    @foreach($productsWithVideo as $productWithVideo)


                        <div
                            class="product-item block h-full relative aspect-[3/4] md:rounded-2xl rounded-xl overflow-hidden cursor-pointer"
                            data-item="53">
                            <div class="bg-img w-full h-full">
                                <iframe class="w-full h-full"
                                        src="{{ convertUrl($productWithVideo->video_link) }}"
                                        title="{{$productWithVideo->getTranslation('name')}}"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                            </div>
                            <div
                                class="product-infor flex items-center sm:gap-4 gap-2 absolute sm:left-5 left-3 sm:bottom-5 bottom-3 w-full">
                                <div
                                    class="product-img sm:w-[52px] w-10 sm:h-[52px] h-10 rounded-full overflow-hidden flex-shrink-0">
                                    <img src='{{uploaded_asset($productWithVideo->thumbnail_img)}}'
                                         alt='{{$productWithVideo->getTranslation('name')}}'
                                         class='w-full h-full object-cover'/>
                                </div>
                                <div class="product-name w-full">
                                    <div
                                        class="text-white capitalize">{{$productWithVideo->getTranslation('name')}}</div>
                                    <div class="flex items-center gap-2 mt-1">
                                        <div class="product-price text-white"></div>
                                        <div class="product-origin-price caption1 text-white">
                                            <del>$25.00</del>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    {{--     end stories  --}}


    {{--  Start after before  --}}


    @if (get_setting('home_before_after') != null)
        @php
            $images = json_decode(get_setting('home_before_after'), true);
        @endphp
        @if (count($images) == 2)

            <section class="image-comparison md:pt-[60px] pt-8 ltr" data-component="image-comparison-slider">
                <div class="image-comparison__slider-wrapper xl:h-[440px] md:h-[260px] overflow-hidden">
                    <label for="image-compare-range" class="image-comparison__label">Move image comparison
                        slider</label>
                    <input type="range" min="0" max="100" value="50" class="image-comparison__range"
                           id="image-compare-range"
                           data-image-comparison-range="">

                    <div class="image-comparison__image-wrapper  image-comparison__image-wrapper--overlay"
                         data-image-comparison-overlay="">
                        <figure class="image-comparison__figure image-comparison__figure--overlay">
                            <picture class="image-comparison__picture">
                                <source media="(max-width: 40em)"
                                        srcset="{{uploaded_asset($images[0]) }}">
                                <source media="(min-width: 40.0625em) and (max-width: 48em)"
                                        srcset="{{uploaded_asset($images[0]) }}">
                                <img src="{{uploaded_asset($images[0]) }}"
                                     alt="Mojave desert in the sun"
                                     class="image-comparison__image">
                            </picture>

                            <figcaption
                                class="image-comparison__caption image-comparison__caption--before absolute top-5 left-5 heading5 px-6 py-3 rounded-[30px] bg-surface2 text-white">
                                <span class="image-comparison__caption-body">Before</span>
                            </figcaption>
                        </figure>
                    </div>

                    <div class="image-comparison__slider" data-image-comparison-slider="">
            <span class="image-comparison__thumb" data-image-comparison-thumb="">
                <svg class="image-comparison__thumb-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="10"
                     viewBox="0 0 18 10" fill="currentColor">
                    <path class="image-comparison__thumb-icon--left"
                          d="M12.121 4.703V.488c0-.302.384-.454.609-.24l4.42 4.214a.33.33 0 0 1 0 .481l-4.42 4.214c-.225.215-.609.063-.609-.24V4.703z">
                    </path>
                    <path class="image-comparison__thumb-icon--right"
                          d="M5.879 4.703V.488c0-.302-.384-.454-.609-.24L.85 4.462a.33.33 0 0 0 0 .481l4.42 4.214c.225.215.609.063.609-.24V4.703z">
                    </path>
                </svg>
            </span>
                    </div>

                    <div class="image-comparison__image-wrapper">
                        <figure class="image-comparison__figure">
                            <picture class="image-comparison__picture">
                                <source media="(max-width: 40em)"
                                        srcset="{{uploaded_asset($images[1]) }}">
                                <source media="(min-width: 40.0625em) and (max-width: 48em)"
                                        srcset="{{uploaded_asset($images[1])}}">
                                <img src="{{uploaded_asset($images[1])}}"
                                     alt="Mojave desert in the dark"
                                     class="image-comparison__image">
                            </picture>

                            <figcaption
                                class="image-comparison__caption image-comparison__caption--after absolute top-5 right-5 heading5 px-6 py-3 rounded-[30px] bg-surface2 text-white">
                                <span class="image-comparison__caption-body">After</span>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </section>
        @endif
    @endif

    {{--end after before --}}


    {{--start new arrival  --}}


    <div class="what-new-block filter-product-block md:pt-20 pt-10">
        <div class="container">
            <div class="heading flex flex-col items-center text-center">
                <div class="heading3">What's new</div>
                    <div class="menu-tab bg-surface rounded-2xl mt-6">
                    <div class="menu flex items-center gap-2 p-1">
                        <div class="indicator absolute top-1 bottom-1 bg-white rounded-full shadow-md duration-300">
                        </div>
                        <div class="tab-item relative text-secondary text-button-uppercase py-2 px-5 cursor-pointer duration-300 hover:text-black "
                             data-item="new">
                            new</div>

                        <div class="tab-item relative text-secondary text-button-uppercase py-2 px-5 cursor-pointer duration-300 hover:text-black active"
                             data-item="top">
                            top</div>
                        <div class="tab-item relative text-secondary text-button-uppercase py-2 px-5 cursor-pointer duration-300 hover:text-black "
                             data-item="todays_deal">
                            today deal</div>
                        <div class="tab-item relative text-secondary text-button-uppercase py-2 px-5 cursor-pointer duration-300 hover:text-black"
                             data-item="featured">
                            featured</div>

                    </div>
                </div>
            </div>
            <div
                class="list-product four-product hide-product-sold grid xl:grid-cols-4 sm:grid-cols-3 grid-cols-2 md:gap-[30px] gap-4 md:mt-10 mt-6">
                <!-- List four product -->
            </div>
        </div>
    </div>

    <div class="container">
        <div class='benefit-block md:py-20 py-10'>
            <div class="list-benefit grid items-start md:grid-cols-4 grid-cols-2 gap-[30px]">
                <div class="benefit-item flex flex-col items-center justify-center">
                    <i class="icon-double-leaves lg:text-7xl text-5xl"></i>
                    <div class="body1 font-semibold uppercase text-center mt-5">Clean skincare</div>
                    <div class="caption1 text-secondary text-center mt-2">Clean and natural skincare with safe and
                        transparent ingredients
                    </div>
                </div>
                <div class="benefit-item flex flex-col items-center justify-center">
                    <i class="icon-earth lg:text-7xl text-5xl"></i>
                    <div class="body1 font-semibold uppercase text-center mt-5">european delivery</div>
                    <div class="caption1 text-secondary text-center mt-3">Fast delivery options with tracking No EU
                        import duties
                    </div>
                </div>
                <div class="benefit-item flex flex-col items-center justify-center">
                    <i class="icon-update lg:text-7xl text-5xl"></i>
                    <div class="body1 font-semibold uppercase text-center mt-5">Sustainability</div>
                    <div class="caption1 text-secondary text-center mt-3">Our signature shipping boxes are fully
                        recyclable and biodegradable
                    </div>
                </div>
                <div class="benefit-item flex flex-col items-center justify-center">
                    <i class="icon-user-shield lg:text-7xl text-5xl"></i>
                    <div class="body1 font-semibold uppercase text-center mt-5">authorized retailer</div>
                    <div class="caption1 text-secondary text-center mt-3">We are an authorized retailer for all the
                        brands we carry
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="video-tutorial-block relative max-sm:h-[240px]">
        <div class="bg-img w-full h-full">
            <img src="{{asset('landing/assets/images/banner/video-cos3.png')}}" alt='bg-img'
                 class='w-full h-full object-cover'/>
        </div>
        <div class="container w-full h-full">
            <div class="text-content absolute top-1/2 -translate-y-1/2">
                <div class="heading3">Night routines Skincare tutorials</div>
                <div class="mt-3">Experience the Power of Nighttime Skincare Rituals</div>
                <div class="button-main btn-play inline-flex items-center gap-3 mt-8">
                    View Now
                    <span class="play-btn ph-fill ph-play text-lg text-white duration-500">
                </span>
                </div>
            </div>
        </div>
    </div>

    <div class="testimonial-block cosmetic3 lg:-mt-[100px] md:-mt-8 -mt-6 relative z-[1]">
        <div class="container">
            <div
                class="content bg-white lg:py-20 md:py-16 py-8 md:rounded-[20px] rounded-xl box-shadow-small flex items-center justify-center">
                <div class="main xl:w-5/6 max-xl:px-10 max-lg:px-8 max-sm:px-4 w-full">
                    <div class="list-testi w-full section-swiper-navigation style-center style-small-border relative">
                        <div class="swiper-button-prev"></div>
                        <div class="swiper swiper-testimonial-four">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="testi-item flex items-center justify-center">
                                        <div class="main w-4/5">
                                            <div class="desc heading6 font-semibold text-center">"I'm absolutely in love
                                                with the skincare products from Onita. They have revolutionized my
                                                skincare
                                                routine and given me incredible
                                                results."
                                            </div>
                                            <div class="text-button-uppercase mt-5 text-center">Maverick Nguyen</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="testi-item flex items-center justify-center">
                                        <div class="main w-4/5">
                                            <div class="desc heading6 font-semibold text-center">"I'm absolutely in love
                                                with the skincare products from Onita. They have revolutionized my
                                                skincare
                                                routine and given me incredible
                                                results."
                                            </div>
                                            <div class="text-button-uppercase mt-5 text-center">Maverick Nguyen</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="testi-item flex items-center justify-center">
                                        <div class="main w-4/5">
                                            <div class="desc heading6 font-semibold text-center">"I'm absolutely in love
                                                with the skincare products from Onita. They have revolutionized my
                                                skincare
                                                routine and given me incredible
                                                results."
                                            </div>
                                            <div class="text-button-uppercase mt-5 text-center">Maverick Nguyen</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                    </div>

                    <div class="list-brand flex items-center justify-between md:mt-[60px] mt-10">
                        <div class="swiper swiper-list-five-brand">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/1.png')}}" alt='1'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/2.png')}}" alt='2'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/3.png')}}" alt='3'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/4.png')}}" alt='4'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/5.png')}}" alt='5'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/6.png')}}" alt='6'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="brand-item relative flex items-center justify-center h-[32px]">
                                        <img src="{{asset('landing/assets/images/brand/7.png')}}" alt='7'
                                             class='h-full w-auto duration-500 relative object-cover'/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='modal-video-block'>
            <div class='modal-video-main'>
                <iframe src="https://www.youtube.com/embed/CxZI6R1VKJY?si=VB9g1QxpuTyoYFls" title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
            </div>
        </div>
    </div>

    <div class="container md:py-20 sm:py-14 py-10">
        <div
            class='newsletter-block bg-transparent sm:px-8 px-6 sm:rounded-[32px] rounded-3xl flex flex-col items-center'>
            <div class="heading3 text-white text-center">Sign up and get 20% off <br/>your first order</div>
            <div class='text-white text-center mt-3'>Sign up for early sale access, new in, promotions and more</div>
            <div class="input-block lg:w-1/2 sm:w-3/5 w-full h-[52px] sm:mt-10 mt-7">
                <form class='w-full h-full relative'>
                    <input type="text" placeholder='Enter your e-mail'
                           class='caption1 w-full h-full pl-4 pr-14 rounded-xl border border-line'/>
                    <button
                        class='button-main bg-green text-black absolute top-1 bottom-1 right-1 flex items-center justify-center'>
                        Subscribe
                    </button>
                </form>
            </div>
        </div>
        <div
            class="help flex items-center justify-between gap-6 gap-y-3 max-sm:grid max-sm:grid-cols-1 mt-10 py-4 border-t border-b border-line w-full">
            <div>Need help?</div>
            <div class="line bg-line w-px h-[26px] max-sm:hidden"></div>
            <div>Working hours : 8:00am - 6:00pm, Mon to Sun</div>
            <div class="line bg-line w-px h-[26px] max-sm:hidden"></div>
            <div>Email: hi.avitex@gmail.com</div>
            <div class="line bg-line w-px h-[26px] max-sm:hidden"></div>
            <div>Phone: +84-123-234-3456</div>
        </div>
    </div>



    {{-- end new arrivel --}}

@endsection