@extends('frontend::layouts.master')

@section('content')
    <div>
        <div>
            @php
                $banner = $data['banner_hero'] ?? [];
            @endphp
            <livewire:frontend::carousel.splide-carousel slideName="splide-banner" :slideData=$banner />
        </div>
        <div class="bg-[#EFEFEF] relative z-[1] ">
            <div class="container py-6 bg-skew-rt">
                @php
                    $banner_ads = $data['banner_ads_1'] ?? [];
                @endphp
                <livewire:frontend::carousel.splide-carousel slideName="splide-att" :slideData=$banner_ads />
            </div>
        </div>
        <div class="bg-primary skewing-bg-1 pt-32 pb-24 xs:pt-40 lg:pb-32 mb-12 relative z-0 -mt-24 dark-pagination">
            @php
                $category = $data['category'] ?? [];
            @endphp
            <livewire:frontend::carousel.category-carousel slideName="splide-category" :productData=$category />
        </div>
    </div>

    <livewire:frontend::carousel.product-carousel slideName="splide-product" />

    <div class="bg-promotion">
        <div class="container">
            <div class="text-center mb-10">
                <h2 class="text-36 xl:text-44 font-bold capitalize">
                    {{ __('frontend::frontend.our_brands') }}
                </h2>
            </div>
            @php
                $brand = $data['brand'] ?? [];
            @endphp
            <livewire:frontend::carousel.brand-carousel slideName="splide-brand" :productData=$brand />
        </div>
    </div>


    <div class="skew-rt bg-[#EFEFEF] pt-12 pb-6 lg:pt-28 lg:pb-20 mb-12">
        <div class="px-4 lg:px-0 lg:container">
            <div class="flex justify-center flex-wrap items-center -mx-3">
                @if (!empty($data['product_group_1']))
                    <div class="w-full sm:w-1/2 md:w-2/5 lg:w-1/3 p-3">
                        <div class="atts-bann-wrapper">
                            <img src="{{ $data['product_group_1']->image ?? '' }}" alt="{{ $data['product_group_1']->local->name ?? '' }}">
                        </div>
                    </div>
                @endif
                <div class="w-full sm:w-1/2 md:w-3/5 lg:w-2/3 p-3">
                    <livewire:frontend::carousel.recommended01-carousel class="borderless-card" slideName="splide-recommended01" />
                </div>
            </div>
        </div>
    </div>


    <div class="px-4 lg:px-0 lg:container">
        <div class="flex flex-col-reverse sm:flex-row justify-center flex-wrap items-center -mx-3">
            <div class="w-full sm:w-1/2 md:w-2/5 lg:w-2/3 p-3">
                <livewire:frontend::carousel.recommended02-carousel class="borderless-card" slideName="splide-recommended02" />
            </div>
            @if (!empty($data['product_group_2']))
                <div class="w-full sm:w-1/2 md:w-3/5 lg:w-1/3 p-3">
                    <div class="atts-bann-wrapper">
                        <img src="{{ $data['product_group_2']->image ?? '' }}" alt="{{ $data['product_group_2']->local->name ?? '' }}">
                    </div>
                </div>
            @endif
        </div>
    </div>


    <div class="lg:container pt-6 md:pt-1 lg:pt-16">
        @php
            $banner_ads_3 = $data['brand_ads_3'] ?? [];
        @endphp
        <livewire:frontend::carousel.splide-carousel slideName="splide-att2" :slideData=$banner_ads_3 />
    </div>
    <div class="bg-blog">
        <div class="container py-12">
            <div class="text-center mb-10">
                <h2 class="text-36 xl:text-44 font-bold capitalize">
                    {{ __('frontend::frontend.blogs') }}
                </h2>
                <a class="capitalize border-b-2 border-primary font-bold text-18" href="{{ !empty($data['link_blog_category']) ? $data['link_blog_category'] : mwz_route('frontend.slug', ['slug' => 'blogs']) }}">{{ __('frontend::frontend.all_post') }}</a>
            </div>
            @php
                $blog = $data['blog']['list'] ?? [];
            @endphp
            <livewire:frontend::carousel.blog-carousel slideName="splide-blog" :blogData=$blog />
        </div>
    </div>
    <div class="skewing-bg-1 bg-[#EFEFEF] pt-24 pb-32 -my-12">
        <div class="container">
            <div class="text-editor">
                <div class="mx-auto text-center max-w-[520px]">
                    <h2 class="text-20 lg:text-30 leading-6 lg:leading-9 font-bold mb-2">
                        {{ !empty($data['about_us']) ? $data['about_us']['name'] : '' }}
                    </h2>
                    <p>
                        {{ !empty($data['about_us']) ? $data['about_us']['desc'] : '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    @if (!empty($data['popup']))
        <div class="welcome-banner-wrapper">
            <x-frontend::modal.basicmodal modalName='birthGiftModal'>
                <x-slot:modalContent>
                    <a href="{{ $data['popup']['url'] ?? '#' }}">
                        <img src="{{ $data['popup']['src'] }}" alt="{{ $data['popup']['name'] }}">
                    </a>
                </x-slot>
            </x-frontend::modal.basicmodal>
        </div>
    @endif
@endsection