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

@section('style')

@endsection

@section('content')

    <main>
        @includeIf('frontend::banner')
        {{-- image --}}
        <div class="relative">
            <div class="product-home-bg-setting pt-8 xl:pt-24 relative z-1"
                @if (!empty($data['about']['image'])) style="background-image:url({{ asset($data['about']['image']) }})" @endif>
                <div class="the-container py-6 xl:pb-12 xl:pt-24 text-whiten">
                    <div class="flex flex-wrap">
                        <div class="lg:w-1/3">
                            @if (!empty($data['about']['image']))
                                <img src="{{ asset($data['about']['image']) }}"  class="lg:hidden mb-3" alt="" srcset="">
                            @endif
                        </div>
                        <div class="lg:w-2/3">
                            <div class="flex items-center flex-wrap -mx-2 rounded-lg bg-opwhiten">
                                <div class=" space-y-4 lg:px-3 pb-3">
                                    {!! !empty($data['about']['detail']) ? $data['about']['detail'] : '' !!}
                                    <div class="catalog-cta-wrap pt-2">
                                        <a class="catalog-cta"
                                            href="https://online.fliphtml5.com/hdlzh/omuq/"
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <span class="catalog-cta__icon" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                                                </svg>
                                            </span>
                                            <span class="catalog-cta__label">@lang('frontend::lang.catalog_btn')</span>
                                            <span class="catalog-cta__arrow" aria-hidden="true">→</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-bb">
                    <div class="the-container 2xl:max-w-full">
                        <div class="flex-new flex-wrap-new xl:pt-8 ">
                            <div class="xl:w-1/5"></div>
                            <div class="w-full xl:w-4/5">
                                <div class="flex-new flex-wrap-new -mx-6">
                                    <div class="lg:px-6 flex-new flex-wrap-new ">
                                        @if (!empty($data['products']['list']))
                                            <div class="splide splide-product">
                                                <div class="splide__track">
                                                    <div class="splide__list">
                                                        @foreach ($data['products']['list'] as $list)
                                                            <div class="splide__slide">
                                                                <div class="w-full p-3 the-c-lessor">
                                                                    <div class="the-c anim-slide-in-bck">
                                                                        <div class="the-c-wrapper">
                                                                            <div class="the-c-img-wrapper full-url">
                                                                                @if (!empty($list['image']))
                                                                                    <div class="the-c-img">
                                                                                        <img
                                                                                            src="{{ asset($list['image']) }}" />
                                                                                    </div>
                                                                                @endif
                                                                                @if (!empty($list['url']))
                                                                                    <a class="z-20"
                                                                                        href="{{ $list['url'] }}"></a>
                                                                                @endif
                                                                            </div>
                                                                            <div class="the-c-detail full-url">
                                                                                <p class="the-c-title">
                                                                                    {{ !empty($list['name']) ? $list['name'] : '' }}
                                                                                </p>
                                                                                <p class="sub-lg-lighten line-lim lim-6">
                                                                                    {!! !empty($list['desc']) ? $list['desc'] : '' !!}</p>
                                                                                @if (!empty($list['url']))
                                                                                    <a href="{{ $list['url'] }}"></a>
                                                                                @endif
                                                                            </div>
                                                                            @if (!empty($list['start_at']))
                                                                                <p class="fln th-3 mt-3 ml-2">
                                                                                    {{ $list['start_at'] }}</p>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="w-full flex  justify-center 2xl:hidden">
                                            <div class="py-6 mx-auto">
                                                <button class="butn-loadm butn-w-2h full-url">@lang('frontend::lang.index_msg_13')
                                                    <a
                                                        href="{{ !empty($page_init['news_url']) ? $page_init['news_url'] : '' }}"></a>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="lg:w-1/5 hidden 2xl:block"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:w-4/5 2xl:w-full hidden 2xl:block">
                <div class="w-full sm:w-1/2 2xl:w-full flex items-center justify-center">
                    <div class="py-8 mx-auto">
                        <button class="butn-loadm butn-w-2h full-url">@lang('frontend::lang.index_msg_13')
                            <a href="{{ !empty($page_init['products_url']) ? $page_init['products_url'] : '' }}"></a>
                        </button>
                    </div>
                </div>
            </div>

            <div class="home-bg-setting2">
            </div>
        </div>
        @if (!empty($data['content']) || !empty($data['knowledge']))
        <div class="product-home-bg-setting2">
        @endif
        @if (!empty($data['content']))
            <div>
                <div class="the-container py-6 lg:py-12">
                    <div class="text-center pb-8">
                        <h2 class="uppercase th-6 fs-32 text-whiten">@lang('frontend::lang.index_msg_5')</h2>
                    </div>
                    <div class="flex flex-wrap">
                        <div class="lg:w-1/3"></div>
                        <div class="lg:w-2/3"> </div>
                    </div>
                    <div class="lg:px-6 flex flex-wrap">
                        @if (!empty($data['content']))
                            @foreach ($data['content'] as $content)
                                <div class="w-full sm:w-1/2 lg:w-1/3 2xl:w-1/4 py-3 px-4 2xl:mt-26">
                                    <div class="anim-slide-in-bck">
                                        <div class="hover:shadow-drop-2-center bg-whiten blg-crd full-url pb-3 rounded overflow-hidden">
                                            @if (!empty($content['image']))
                                                <div class="img-wrapper">
                                                    <img src="{{ asset($content['image']) }}" />
                                                </div>
                                            @endif

                                            <div class="space-y-2  p-[.5rem] md:px-6">
                                                @if (!empty($content['name']))
                                                    <p class="th-5 fs-20 leading-7 line-lim lim-2">
                                                        {{ $content['name'] }}</p>
                                                @endif

                                                @if (!empty($content['desc']))
                                                    <p class="th-3 line-lim lim-3">{!! $content['desc'] !!}</p>
                                                @endif

                                            </div>
                                            @if (!empty($content['start_at']))
                                                <p class="fln th-3 mt-3 ml-2">{{ $content['start_at'] }}</p>
                                                <p class="th-3 mt-3 ml-2 text-center">@lang('frontend::lang.popup_title_4') </a>
                                               
                                            @endif
                                            <a href="{{ !empty($content['url']) ? $content['url'] : '' }}"></a>
                                        </div>
                                        
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    @if (!empty($page_init['news_url']))
                        <div class="py-6">
                            <button class="butn-loadm butn-w-2h full-url mx-auto">@lang('frontend::lang.index_msg_13')
                                <a href="{{ $page_init['news_url'] }}"></a>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        @if (!empty($data['knowledge']))
            <div>
                <div class="the-container py-6 lg:py-12">
                    <div class="text-center pb-8">
                        <h2 class="uppercase th-6 fs-32 text-whiten">@lang('frontend::lang.knowledge_title')</h2>
                    </div>
                    <div class="knowledge-list knowledge-list--home">
                        @foreach ($data['knowledge'] as $item)
                            <a class="knowledge-card hover:shadow-drop-2-center bg-whiten blg-crd pb-3 rounded overflow-hidden" href="{{ !empty($item['url']) ? $item['url'] : '#' }}">
                                @if (!empty($item['image']))
                                    <div class="img-wrapper">
                                        <img src="{{ asset($item['image']) }}" alt="{{ !empty($item['name']) ? $item['name'] : '' }}" />
                                    </div>
                                @endif
                                <div class="space-y-2 p-[.5rem] md:px-6">
                                    @if (!empty($item['name']))
                                        <p class="th-5 fs-20 leading-7 line-lim lim-2">{{ $item['name'] }}</p>
                                    @endif
                                </div>
                                @if (!empty($item['start_at']))
                                    <p class="fln th-3 mt-3 ml-2">{{ $item['start_at'] }}</p>
                                @endif
                            </a>
                        @endforeach
                    </div>
                    @if (!empty($page_init['knowledge_url']))
                        <div class="py-6">
                            <button class="butn-loadm butn-w-2h full-url mx-auto">@lang('frontend::lang.index_msg_13')
                                <a href="{{ $page_init['knowledge_url'] }}"></a>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        @endif
        @if (!empty($data['content']) || !empty($data['knowledge']))
        </div>
        @endif

        {{-- FAQ Accordion --}}
        <section class="faq-section" aria-labelledby="faq-heading">
            <div class="the-container py-10 lg:py-16">
                <div class="text-center pb-8">
                    <h2 id="faq-heading" class="uppercase th-6 fs-32 text-whiten">{{ $data['faq_page']['title'] ?? '' }}</h2>
                    <p class="faq-subtitle th-3 mt-3">{{ $data['faq_page']['subtitle'] ?? '' }}</p>
                </div>
                <div class="faq-accordion mx-auto">
                    @foreach ($data['faq'] ?? [] as $faq)
                        @if (!empty($faq['name']) && !empty($faq['desc']))
                            <details class="faq-item">
                                <summary class="faq-summary">
                                    <span class="faq-question">{{ $faq['name'] }}</span>
                                    <span class="faq-icon" aria-hidden="true"></span>
                                </summary>
                                <div class="faq-answer">
                                    <p>{{ $faq['desc'] }}</p>
                                </div>
                            </details>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    </main>
@endsection

@section('script')


@endsection