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

@section('content')
    @if (!empty($banner['image']))
        <div class="carousel" id="slider" data-items="1" data-autoplay="2000" data-dots="false" data-arrows="false">
            <div class="slide">
                <img src="{{ $banner['image'] ?? '' }}" alt="{{ $banner['name'] ?? '' }}">
            </div>
        </div>
    @endif

    <section class="gasDetectorFixed-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'] ?? 'javascript:void(0)' }}">{{ $link_index['name'] ?? '' }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a
                                    href="{{ $link_gas_detector['url'] ?? 'javascript:void(0)' }}">{{ $link_gas_detector['name'] ?? '' }}</a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="#">{{ $banner['name'] ?? '' }}</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                @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 text-center">{{ $category['name'] ?? '' }}</h2>

                                @if (!empty($list_detail[$category['id']][0]))
                                    @foreach ($list_detail[$category['id']] as $item)
                                        <div class="gasDetectorFixed-item">
                                            <h4 class="htitle">{{ $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>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
@endsection