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

@section('content')
    @if (!empty($banners[0]))
        <div class="carousel" id="slider" data-items="1" data-autoplay="2000">
            @foreach ($banners as $b)
                @if ($b['type'] == 'image')
                    <div class="slide">
                        @if (!empty($b['url']))
                            <a href="{{ $b['url'] }}" target="_blank">
                        @endif
                        <img src="{{ $b['src'] ?? '' }}" alt="{{ $b['name'] ?? '' }}">
                        @if (!empty($b['url']))
                            </a>
                        @endif
                    </div>
                @elseif ($b['type'] == 'youtube')
                    <div class="slide">
                        <iframe src="https://www.youtube.com/embed/{{ $b['src'] }}?si=YvQC-mg50KChYMEP" title="{{ $b['name'] ?? '' }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                @endif
            @endforeach
        </div>
    @endif
    @if (!empty($article['detail']))
        <section class="section about-titlepage gasDetector-page">
            {!! $article['detail'] !!}
        </section>
    @endif
    <section class="gasDetector-page-content">
        <div class="container">
            <div class="row">
                @if (!empty($list_category[0]))
                    @foreach ($list_category as $category)
                        <div class="col-xs-12 col-sm-12 col-md-12 gasDetector-item">
                            <div class="inner card">
                                <h2 class="htitle border-bottom">
                                    {{ $category['name'] ?? '' }}
                                    <a class="btn" href="{{ $category['url'] ?? 'javascript:void(0)' }}">
                                        {{ __('frontend::lang.btn.detail_more') }}
                                    </a>
                                </h2>
                                @if (!empty($list_product[$category['id']][0]))
                                    <ul class="list list-gasDetector p-l-0">
                                        @foreach ($list_product[$category['id']] as $product)
                                            <li>
                                                <div class="product-item">
                                                    <a class="product-link" href="{{ !empty($product['link']) ? $product['link'] : 'javascript:void(0)' }}">
                                                        <img src="{{ $product['image'] ?? '' }}" alt="{{ $product['name'] ?? '' }}" loading="lazy">
                                                    </a>
                                                    <div class="product-name">{{ $product['name'] ?? '' }}</div>
                                                    @if (!empty($product['file']))
                                                        <a class="btn link-download-pdf" href="{{ $product['file'] ?? 'javascript:void(0)' }}" target="_blank">
                                                            {{ __('frontend::lang.btn.catalog') }}
                                                        </a>
                                                    @endif
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @endif
                <div class="col-xs-12 col-sm-12 col-md-12 text-center m-t-40">
                    <a class="btn" href="{{ $link_calibration_request['url'][app()->getLocale()] ?? 'javascript:void(0)' }}">
                        {{ __('frontend::lang.btn.calibration_request') }}
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection