@extends('frontend::layouts.master')
@section('content')
<x-frontend::slidebanner type="index" />

@if (!empty($about['dt']))
<section class="sect-about">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-4 cleft text-center">
                <img src="{{ asset($about['dt']['image'] ?? '') }}" class="logo-about">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-8 cright">
                <h3 class="text-color" data-animate="fadeInUp" data-animate-delay="400">{!! $about['dt']['name'] ?? ''!!}</h3>
                {!! $about['dt']['detail'] ?? '' !!}
                <a href="{{ $about['url'] }}" class="btn btn-border btn-rounded" data-animate="fadeInUp" data-animate-delay="600">{{ __('frontend::text.read_more') }} <i class="icon-chevron-right"><span style="display: none;">.</span></i></a>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($partner))
<section class="sect-partner">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 cleft">
                <div class="partner-marquee" aria-label="Partner logos">
                    <div class="partner-track">
                        @foreach ($partner as $item)
                        <a href="{{ $item['url'] ?? '' }}" class="partner-item"><img
                                src="{{ asset($item['image'] ?? '') }}" class="clients-logo"></a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($products['list']))
<section class="sect-banner">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="header-bar">
                    <h2 class="htitle">@lang('frontend::text.all_products')</h2>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 content-banner">
                <ul class="list list-bnr col-wrap no-row">
                    @foreach ($products['list'] as $list)
                    <li class="bnr-item" data-animation="fadeInUp" data-animation-delay="100">
                        <div class="inner">
                            <a href="{{ $list['url'] ?? '' }}">
                                <img src="{{ $list['image'] ?? '' }}" alt="{{ $list['name'] ?? '' }}" class="w-100"
                                    onerror="this.onerror=null;this.src='{{ asset($list['image']) }}';">
                                <!-- <span>{!! $list['name'] ?? ''!!}</span> -->
                            </a>
                            <div class="bnr-desc p-t-10">
                                <h4 class="m-b-0"><a href="{{ $list['url'] ?? '' }}">{!! $list['name'] ?? ''!!}</a></h4>
                                <a href="{{ $list['url'] ?? '' }}" class="text-link">@lang('frontend::text.view_more_details') <i class="icon-chevron-right"></i></a>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 bttm-bar text-center">
                <a href="{{ $products['url'] ?? '' }}"
                    class="btn btn-border btn-rounded">@lang('frontend::text.view_all') <i
                        class="icon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($products['recommended_list']))
<section class="sect-recommended">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="header-bar">
                    <h2 class="htitle">@lang('frontend::text.recommended_products')</h2>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 content-banner">
                <div class="carousel recommended-carousel" data-items="4" data-autoplay="true" data-margin="30"
                    data-dots="false" data-loop="true">
                    @foreach ($products['recommended_list'] as $product)
                    <div class="bnr-item recommended-item">
                        <div class="inner">
                            <a href="{{ $product['url'] ?? '' }}">
                                <img src="{{ $product['image'] ?? '' }}" alt="{{ $product['name'] ?? '' }}"
                                    class="w-100"
                                    onerror="this.onerror=null;this.src='{{ asset($product['image']) }}';">
                            </a>
                            <div class="bnr-desc">
                                <h4><a href="{{ $product['url'] ?? '' }}">{{ $product['name'] ?? '' }}</a>
                                </h4>
                                <p>{{ $product['desc'] }}</p>
                                <a href="{{ $product['url'] ?? '' }}"
                                    class="text-link">@lang('frontend::text.view_more_details') <i
                                        class="icon-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 bttm-bar text-center">
                <a href="{{ $products['url'] ?? '' }}"
                    class="btn btn-border btn-rounded">@lang('frontend::text.view_all')
                    <i class="icon-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($faq))
<section class="sect-faqs">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 cleft">
                <div class="faq-home">
                    <header class="faq-home__intro text-center">
                        <p class="faq-home__kicker">@lang('frontend::text.trusted_by')</p>
                        <h2 class="faq-home__heading">@lang('frontend::text.frequently_asked_questions')</h2>
                    </header>
                    <div class="faq-home__list" data-faq-accordion>
                        @foreach ($faq as $n => $item)
                        <article class="faq-home__item {{ $loop->index == 0 ? 'is-open' : '' }}">
                            <div class="faq-home__bar">
                                <h3 class="faq-home__question">{!! $item['name'] ?? '' !!}</h3>
                                <button type="button" class="faq-home__toggle" aria-expanded="true"
                                    aria-controls="faq-home-panel-{{ $n + 1 }}" id="faq-home-btn-{{ $n + 1 }}">
                                    <span class="faq-home__toggle-inner" aria-hidden="true">
                                        <span class="faq-home__icon faq-home__icon--plus"></span>
                                        <span class="faq-home__icon faq-home__icon--close"></span>
                                    </span>
                                </button>
                            </div>
                            <div class="faq-home__panel" id="faq-home-panel-{{ $n + 1 }}" role="region"
                                aria-labelledby="faq-home-btn-{{ $n + 1 }}">
                                <div class="faq-home__answer">
                                    <p>{!! $item['desc'] ?? '' !!}</p>
                                </div>
                            </div>
                        </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($service['list']))
<section class="cta1 section-spacing-120 rr-ov-hidden">
    <div class="container rr-container-1350">
        @if (!empty($service['dt']))
        <div class="col-md-12 headbar m-b-20 text-center">
            <h2 class="h-title m-b-0 text-light animated fadeInUp visible" data-animate="fadeInUp"
                data-animate-delay="100">{!! $service['dt']['name'] ?? '' !!}</h2>
            <div data-animate="fadeInUp" data-animate-delay="200" class="animated fadeInUp visible text-light">
                {!! $service['dt']['detail'] ?? '' !!}</div>
        </div>
        @endif
        <div class="row gy-5 d-flex justify-content-center justify-content-between">
            <ul class="list list-service no-padding m-t-0">
                @foreach ($service['list'] as $item)
                <li>
                    <div class="cta1-card">
                        <div class="cta1-card__icon">
                            <img src="{{ asset($item['image'] ?? '') }}" alt="">
                        </div>
                        <h3 class="cta1-card__title">{!! $item['name'] ?? '' !!}</h3>
                        <p class="cta1-card__subtitle">{!! $item['desc'] ?? '' !!}</p>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>
@endif

@if (!empty($showcase['list']))
<section class="sect-gallery">
    <div class="container">
        <div class="row">
            <div class="content--wrap">
                <div class="col-md-3 no-padding cleft">
                    <div class="inner title-box">
                        <h4 class="text-light">@lang('frontend::text.showcase_title')</h4>
                        <a href="{{ $showcase['url'] ?? '' }}" class="text-link">@lang('frontend::text.view_all') <i
                                class="icon-chevron-right"></i></a>
                    </div>
                </div>
                <div class="col-md-9 no-padding cright">
                    <div class="carousel dots-creative" data-items-xs="1" data-items-sm="1" data-items="3"
                        data-arrows="false" data-autoplay="true" data-autoplay-timeout="1000" data-animation-delay=".1s"
                        data-loop="true" data-margin="0" data-cell-align="center" data-adaptive-height="true">

                        @foreach ($showcase['list'] ?? [] as $item)
                        <div class="banner-item banner-item--portfolio">
                            <div class="inner">
                                @include('frontend::partials.portfolio-card', [
                                'item' => $item,
                                'showDetailBtn' => false,
                                'carouselSlot' => true,
                                ])
                            </div>
                        </div>
                        @endforeach

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

@if (!empty($news['list']))
<section class="sect-news">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                <h4 class="h-title text-color">@lang('frontend::text.news_title')</h4>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 cright text-right">
                <a href="{{ $news['url'] ?? '' }}" class="btn btn-primary">@lang('frontend::text.view_all') <i
                        class="icon-chevron-right"></i></a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 news-content">
                <div class="carousel sect-news-carousel dots-creative" data-items-xs="1" data-items-sm="2"
                    data-items="4" data-margin="24" data-loop="true" data-arrows="true" data-dots="true"
                    data-autoplay="false">
                    @foreach ($news['list'] as $article)
                    <article class="news-feed-card">
                        <a href="{{ $article['url'] ?? '' }}" class="news-feed-card__link">
                            <div class="news-feed-card__media">
                                <img src="{{ $article['image'] ?? '' }}" alt="{{ $article['name'] ?? '' }}"
                                    class="w-100"
                                    onerror="this.onerror=null;this.src='{{ asset($article['image']) }}';">
                                <div class="news-feed-card__overlay">
                                    <span class="news-feed-card__tag">{{ $article['category'] ?? '' }}</span>
                                </div>
                            </div>
                            <div class="news-feed-card__body">
                                <h3 class="news-feed-card__title">{!! $article['name'] ?? '' !!}</h3>
                                <p class="news-feed-card__meta">{{ $article['publish_at'] ?? '' }}</p>
                            </div>
                        </a>
                    </article>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@if (!empty($promotion))
<section class="sect-promotion">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel" data-items="1" data-autoplay="true" data-margin="20" data-dots="false"
                    data-loop="true">
                    @foreach ($promotion as $item)
                    @if (!empty($item['type'] and $item['type'] == 'image'))
                    <div class="image-box"><a target="_blank" href="{{ $item['url'] ?? '' }}">
                            <img src="{{ $item['src'] ?? '' }}" alt="{{ $item['name'] ?? '' }}"></a>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var faqAccordion = document.querySelector('[data-faq-accordion]');
        if (!faqAccordion) {
            return;
        }
        faqAccordion.addEventListener('click', function(e) {
            var bar = e.target.closest('.faq-home__bar');
            var toggle = e.target.closest('.faq-home__toggle');
            if (bar && !toggle) {
                toggle = bar.querySelector('.faq-home__toggle');
            }
            if (!toggle || !faqAccordion.contains(toggle)) {
                return;
            }
            e.preventDefault();
            var item = toggle.closest('.faq-home__item');
            if (!item) {
                return;
            }
            var panelId = toggle.getAttribute('aria-controls');
            var panel = panelId ? document.getElementById(panelId) : null;
            var willOpen = !item.classList.contains('is-open');
            faqAccordion.querySelectorAll('.faq-home__item.is-open').forEach(function(openEl) {
                if (openEl !== item) {
                    openEl.classList.remove('is-open');
                    var otherToggle = openEl.querySelector('.faq-home__toggle');
                    var otherPanel = openEl.querySelector('.faq-home__panel');
                    if (otherToggle) {
                        otherToggle.setAttribute('aria-expanded', 'false');
                    }
                    if (otherPanel) {
                        otherPanel.setAttribute('hidden', '');
                    }
                }
            });
            if (willOpen) {
                item.classList.add('is-open');
                toggle.setAttribute('aria-expanded', 'true');
                if (panel) {
                    panel.removeAttribute('hidden');
                }
            } else {
                item.classList.remove('is-open');
                toggle.setAttribute('aria-expanded', 'false');
                if (panel) {
                    panel.setAttribute('hidden', '');
                }
            }
        });
    });
</script>
@endsection