@extends('frontend::layouts.master')
    @section('content')
        @include('components.hero-slider', ['banners' => $banners])
        @if (!empty($index_section_1['detail']))
            <section class="sect-empathy"
                style="background: url({{ asset('assets/frontend/images/bg-01.jpg') }}) no-repeat center top;">
                <div class="container">
                    <div class="row">
                        {!! $index_section_1['detail'] ?? '' !!}
                    </div>
                </div>
            </section>
        @endif
        @if (!empty($index_section_2['name']) and !empty($index_section_2['detail']))
            <section class="sect-solutions">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 headbar m-b-40 text-center">
                            <h5 data-animate="fadeInUp" data-animate-delay="100">{!! $index_section_2['name'] ?? '' !!}</h5>
                        </div>
                        {!! $index_section_2['detail'] ?? '' !!}
                        <div class="col-xs-12 col-sm-12 col-md-12 bottom-bar m-t-40 text-center" data-animate="fadeInUp"
                            data-animate-delay="800">
                            <a href="{{ $url['contact'] ?? '' }}" class="btn btn-left">@lang('frontend::frontend.index.index_proposal')</a>
                            <a href="{{ $url['service'] ?? '' }}" class="btn btn-right">@lang('frontend::frontend.index.index_learn_more')</a>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if (!empty($index_section_3['name']) and !empty($index_section_3['detail']))
            <section class="sect-benefits sect-benefits-ctrl"
                style="background: url({{ Module::asset('frontend:images/bg-benefits-edit-01.jpg') }}) no-repeat center center; background-size: cover">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 text-light pl-0">
                            <h5 data-animate="fadeInUp" data-animate-delay="100">{!! $index_section_3['name'] ?? '' !!}</h5>
                        </div>
                        {!! $index_section_3['detail'] ?? '' !!}
                        <div class="sect-benefits-cta bottom-bar">
                            <div class="container">
                                <a class="btn btn-left mb-2" href="{{ $url['contact'] ?? '' }}">@lang('frontend::frontend.index.index_simulation')</a>
                                <a class="btn btn-right mb-2" href="{{ $url['service'] ?? '' }}">@lang('frontend::frontend.index.index_learn_more')</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if (!empty($use_case['list']))
            <section class="sect-usecase">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 headbar m-b-20">
                            <div class="w50">
                                <h2 class="h-title" data-animate="fadeInUp" data-animate-delay="100">{!! $index_use_cases['name'] ?? '' !!}
                                </h2>
                            </div>
                            <div class="w50">
                                <div class="inner-box">
                                    {!! $index_use_cases['detail'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12" data-animate="fadeInUp" data-animate-delay="100">
                            <div class="carousel use-case-carousel arrows-show" data-items="4" data-autoplay="0"
                                data-margin="20" data-dots="false">
                                @foreach ($use_case['list'] as $list)
                                    <div class="use-case-card caption-inside">
                                        <div class="card-image">
                                            <a href="{{ $list['url'] ?? '' }}">
                                                <img src="{{ asset($list['image']) }}" alt="Healthcare">
                                            </a>
                                        </div>
                                        <div class="card-content">
                                            <h4><a href="{{ $list['url'] ?? '' }}">{!! $list['name'] ?? '' !!}</a></h4>
                                            <p>{!! $list['des'] ?? '' !!}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="bottom-bar fix-use-case-bottom-bar" data-animate="fadeInUp"
                            data-animate-delay="900">
                            <a href="{{ $url['request_document'] ?? '' }}" class="btn btn-left">@lang('frontend::frontend.btn.get_the_brochure')</a>
                            <a href="{{ $url['use_case'] ?? '' }}" class="btn btn-right">@lang('frontend::frontend.index.index_learn_more')</a>
                        </div>

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

        @if (!empty($news['list']))
            <section class="sect-news-update"
                style="background: url({{ Module::asset('frontend:images/bg-ab.png') }}) no-repeat center bottom;">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 headbar m-b-40 text-center">
                            <h5 class="text-color" data-animate="fadeInUp" data-animate-delay="100">{!! $index_news['name'] ?? '' !!}
                            </h5>
                            {!! $index_news['detail'] ?? '' !!}
                        </div>
                        @foreach ($news['list'] as $key => $news_item)
                            @if ($key == 0)
                                <div class="col-lg-6 cleft" data-animate="fadeInUp" data-animate-delay="300">
                                    <div class="post-thumbnail">
                                        <div class="post-thumbnail-entry">
                                            @if (!empty($news_item['image']))
                                                <div class="news-image-box">
                                                    <img alt="" src="{{ asset($news_item['image'] ?? '') }}">
                                                </div>
                                            @endif
                                            <div class="post-thumbnail-content">
                                                <h4><a href="{{ $news_item['url'] ?? '' }}">{!! $news_item['name'] ?? '' !!}</a>
                                                </h4>
                                                <p>
                                                    {!! $news_item['desc'] ?? '' !!}
                                                </p>
                                                <span class="post-date"><i class="far fa-clock"></i>
                                                    {{ $news_item['publish_at'] ?? '' }} </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        <div class="col-lg-6 cright">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="post-thumbnail-list">
                                        @foreach ($news['list'] as $k => $news_tab_1)
                                            @if ($k > 0 and $k < 5)
                                                <div class="post-thumbnail-entry" data-animate="fadeInUp"
                                                    data-animate-delay="100">
                                                    @if (!empty($news_tab_1['image']))
                                                        <img alt="" src="{{ asset($news_tab_1['image'] ?? '') }}">
                                                    @endif
                                                    <div class="post-thumbnail-content">
                                                        <a
                                                            href="{{ $news_tab_1['url'] ?? '' }}">{!! $news_tab_1['name'] ?? '' !!}</a>
                                                        <span class="post-date"><i class="far fa-clock"></i>
                                                            {{ $news_tab_1['publish_at'] ?? '' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="post-thumbnail-list">
                                        @foreach ($news['list'] as $k => $news_tab_2)
                                            @if ($k > 4 and $k < 9)
                                                <div class="post-thumbnail-entry" data-animate="fadeInUp"
                                                    data-animate-delay="100">
                                                    @if (!empty($news_tab_2['image']))
                                                        <img alt="" src="{{ asset($news_tab_2['image'] ?? '') }}">
                                                    @endif
                                                    <div class="post-thumbnail-content">
                                                        <a
                                                            href="{{ $news_tab_2['url'] ?? '' }}">{!! $news_tab_2['name'] ?? '' !!}</a>
                                                        <span class="post-date"><i class="far fa-clock"></i>
                                                            {{ $news_tab_2['publish_at'] ?? '' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12 bottom-bar text-center m-t-20" data-animate="fadeInUp"
                            data-animate-delay="1000">
                            <a href="{{ $url['contact'] ?? '' }}" class="btn btn-left">@lang('frontend::frontend.btn.contact_us')</a>
                            <a href="{{ $url['request_document'] ?? '' }}" class="btn btn-right">@lang('frontend::frontend.btn.download_materials')</a>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        {{ module_vite('build-frontend', 'resources/assets/js/app.js') }}

        <!-- Youtube Slider Control: Stop autoplay when YouTube video is playing -->
        <script src="{{ Module::asset('frontend:js/youtube-slider-control.js') }}"></script>
    @endsection