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

@section('content')
    <main>
        <livewire:frontend::carousel.splide-carousel slideName="splide-banner" index='0' />
        <div class="product-home-bg-setting mt-8 xl:mt-24" style="background-image:url({{ asset($about_us['image'] ?? '') }}); background-size: 28%;">
            @if (!empty($about_us['detail']))
                <div class="container py-6 xl:pb-12 xl:pt-24">
                    <div class="flex flex-wrap">
                        @if (!empty($about_us['image']))
                            <div class="lg:w-1/3"></div>
                            <div class="lg:w-2/3">
                                {!! $about_us['detail'] ?? '' !!}
                            </div>
                        @else
                            {!! $about_us['detail'] ?? '' !!}
                        @endif
                    </div>
                </div>
            @endif
            @if (!empty($newses['list']))
                <div class="bg-bb">
                    <div class="container">
                        <div class="flex flex-wrap xl:pt-8">
                            <div class="w-full lg:px-6 grid grid-cols-1 xs:grid-cols-2 xl:grid-cols-4 gap-4">
                                @foreach ($newses['list'] as $index => $news)
                                    <div class="w-full {{ $index % 2 == 0 ? 'mt-0 xl:mt-20' : '' }}">
                                        <div class="anim-slide-in-bck">
                                            <div class="hover:shadow-drop-2-center bg-white blg-crd full-url pb-3 rounded overflow-hidden">
                                                <div class="img-wrapper">
                                                    <img src="{{ asset($news['image'] ?? '') }}" alt="image news">
                                                </div>
                                                <div class="space-y-2  p-[.5rem] md:px-6">
                                                    <p class="th-5 fs-20 leading-7 line-lim lim-2">{{ $news['name'] ?? '' }}</p>
                                                    <p class="th-3 line-lim lim-3">{{ $news['desc'] ?? '' }}</p>
                                                </div>
                                                <p class="fln th-3 mt-3 ml-2">{{ str_date($news['publish_at'], 'd m Y') }}</p>
                                                <a href="{{ $news['url'] ?? 'javascript:void(0)' }}"></a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @if (!empty($news_link['url']))
                        <div class="py-6">
                            <a href="{{ $news_link['url'] }}">
                                <button class="butn-loadm butn-w-2h mx-auto">{{ __('frontend::lang.btn.see_more') }}</button>
                            </a>
                        </div>
                    @endif
                </div>
            @else
                <div class="container py-6 xl:pb-12 xl:pt-24"></div>
            @endif
            @if (!empty($products['list']))
                <div class="px-4 py-8 2xl:p-16 text-center">
                    <h1 class="uppercase th-6 fs-28 lg:fs-32">{{ __('frontend::lang.index.all_products') }}</h1>
                </div>
                <div class="container pb-8">
                    <div class="content-brand"></div>
                    <div class="flex flex-wrap -mx-6">
                        <div class="w-full lg:px-6 grid grid-cols-1 xs:grid-cols-2 xl:grid-cols-4 gap-4 ">
                            @foreach ($products['list'] as $index => $product)
                                <div class="w-full lg:w-full py-3 px-4">
                                    <div class="the-c anim-slide-in-bck fade-in-right" id="product-{{ $index }}" style="display: block;">
                                        <div class="the-c-wrapper">
                                            <div class="the-c-img-wrapper full-url">
                                                <div class="the-c-img">
                                                    <img src="{{ asset($product['gallery'][0]['image'] ?? '') }}" alt="image product">
                                                </div>
                                                <a class="z-20" href="{{ $product['url'] ?? 'javascript:void(0)' }}"></a>
                                            </div>
                                            <div class="the-c-detail full-url">
                                                <p class="the-c-title line-lim lim-1">{{ $product['name'] ?? '' }}</p>
                                                <div class="sub-lg-lighten line-lim lim-3 lim-height-3">{{ $product['desc'] ?? '' }}</div>
                                                <a href="{{ $product['url'] ?? 'javascript:void(0)' }}"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="w-full flex  justify-center">
                        @if (!empty($product_link['url']))
                            <div class="py-6">
                                <a href="{{ $product_link['url'] }}">
                                    <button class="butn-loadm butn-w-2h mx-auto">{{ __('frontend::lang.btn.see_more') }}</button>
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </main>
@endsection