@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
    <section class="gasFilling-page-content p-t-0">
        <div class="container">
            <div class="row">
                <nav class="breadcrumb-container m-t-0 text-left">
                    <div class="container">
                        <ul class="breadcrumb" style="justify-content: left;">
                            <li class="breadcrumb-item">
                                <a href="{{ $link_index['url'] ?? '' }}">{{ $link_index['name'] ?? '' }}</a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ $link_gas_filling['url'] ?? '' }}">{{ $link_gas_filling['name'] ?? '' }}</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="col-xs-12 col-sm-12 col-md-12 gasDetector-item gasFilling-item">
                    <div class="inner card">
                        <h2 class="htitle border-bottom text-center">
                            {{ $article['name'] ?? '' }}
                        </h2>
                        {!! $article['detail'] ?? '' !!}

                        @if (!empty($list['list'][0]))
                            @foreach ($list['list'] as $item)
                                <div class="gasFilling-item card-item">
                                    <h4 class="htitle m-b-10">
                                        {{ $item['name'] ?? '' }}
                                    </h4>
                                    {!! $item['detail'] ?? '' !!}
                                    @if (!empty($item['gallery']))
                                        <div class="gas_filling_image" data-lightbox="gallery">
                                            <ul>
                                                @foreach ($item['gallery'] as $g)
                                                    <li>
                                                        <div class="grid-item">
                                                            <div class="grid-item-wrap">
                                                                <div class="grid-image">
                                                                    <img src="{{ $g['image'] ?? '' }}" alt="{{ $g['name'] ?? '' }}">
                                                                </div>
                                                                <div class="grid-description">
                                                                    <a class="text-sm text-light" data-lightbox="gallery-image" href="{{ $g['image'] ?? '' }}" title="{{ $g['name'] ?? '' }}">
                                                                        {{ __('frontend::lang.btn.zoom') }}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                            <div class="clear"></div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                @if (!empty($article['link']))
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center m-t-40">
                        <a class="btn" href="{{ $article['link'] }}" target="_blank">
                            <img src="{{ asset('assets/frontend/images/icon/Google-Maps-icon.png') }}" style="height: 22px; margin-right: 10px; top: -5px; position: relative;">
                            {{ __('frontend::lang.btn.google_map') }}
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection