@extends('frontend::config.master')
@section('title')

@section('style')

@endsection

@section('content')
    <main>
        @include('frontend::layouts.home.HomeCarouselBanner')
        @if (!empty($about['detail']))
            <div class=" bg-default pt-8 lg:pt-12">
                <div class="container">
                    <x-frontend::texteditor.TextEditor>
                        @slot('content')
                            <div class="flex items-center flex-wrap -mx-2 xl:-mx-4">
                                {!! !empty($about['detail']) ? $about['detail'] : '' !!}
                                <div class="w-full lg:w-1/2 p-2 xl:p-4">
                                    <div class=" flex lg:justify-end ">
                                        <x-frontend::button.ButtonIconL text="{{ __('frontend::lang.index_msg_4') }}"
                                            url="{{ $page_init['about_url'] }}" class=" mt-4 lg:mt-8">
                                            @slot('icon')
                                            <img src="{{ Module::asset('frontend:img/icon/iconbutton.png') }}">
                                            @endslot
                                            </x-frontend>
                                    </div>
                                </div>
                            </div>
                        @endslot
                        </x-frontend>
                </div>
            </div>
        @endif

        {{-- Section  Product --}}
        @if (!empty($product_content))
            <div class="bg-[#FFF1E1] lg:bg-white   py-4 mt-8 lg:py-12 lg:mt-0">
                <div class="container">
                    <div class="flex  flex-wrap items-center lg:relative ">
                        <div class="w-full lg:w-2/3 pt-4  lg:p-8  bg-[#FFF1E1] rounded-2xl lg:shadow-lg">
                            <div class="lg:w-1/2 lg:pr-4 lg:py-20">
                                <h2 class="home-title">{{ $product_content['name'] ?? '' }}</h2>
                                {!! $product_content['detail'] ?? '' !!}
                                <div class=" hidden lg:flex  mt-2">
                                    <x-frontend::button.ButtonIconL text="{{ __('frontend::lang.index_msg_4') }}"
                                        url="{{ $page_init['products_url'] }}" class=" mt-4 lg:mt-8">
                                        @slot('icon')
                                            <img src="{{ Module::asset('frontend:img/icon/iconbutton.png') }}">
                                        @endslot
                                        </x-frontend>
                                </div>
                            </div>
                        </div>
                        <div class="w-full lg:w-2/3 pt-4 lg:pt-0  lg:absolute z-2 right-0">
                            @include('frontend::layouts.home.HomeCarouselProduct')
                            <div class="flex lg:hidden pb-6 ">
                                <x-frontend::button.ButtonIconL text="{{ __('frontend::lang.index_msg_4') }}"
                                    url="{{ $page_init['products_url'] }}" class=" mt-4 lg:mt-8">
                                    @slot('icon')
                                        <img src="{{ Module::asset('frontend:img/icon/iconbutton.png') }}">
                                    @endslot
                                    </x-frontend>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- End Section  Product --}}

        {{-- Section  NEWS & EVENTS --}}
        @if (!empty($news))
            <div class="mt-8 lg:mt-0 bg-section-01-gradient">
                <div class="container">
                    <div class="w-full  sm:w-96 h-24 bg-primary flex items-center justify-center rounded-b-xl shadow-xl">
                        <h2 class="home-title text-white">@lang('frontend::lang.index_msg_1')</h2>
                    </div>
                    <div class="flex flex-col-reverse lg:flex-col lg:px-14 py-8  lg:py-12">
                        <div class="flex lg:justify-end">
                            <x-frontend::button.ButtonIconL text="{{ __('frontend::lang.index_msg_4') }}"
                                url="{{ $page_init['news_url'] }}">
                                @slot('icon')
                                    <img src="{{ Module::asset('frontend:img/icon/iconbutton.png') }}" alt="">
                                @endslot
                                </x-frontend>
                        </div>
                        <div class="pb-4 lg:pt-4 lg:pb-12">
                            {{-- co-card-02-curved-date --}}
                            @include('frontend::layouts.home.HomeCarouselNews')
                            {{-- co-card-02-curved-date --}}
                        </div>
                    </div>
                </div>
            </div>
        @endif
        {{-- End Section  NEWS & EVENTS --}}
    </main>

@endsection

@section('script')
    {{-- <script src="{{ Module::asset('frontend:js/index.min.js') }}"></script> --}}
@endsection