@extends('frontend.layout.master')
@section('style')
  <!-- lightgallery cdn -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css"> 
<!-- lightgallery.js cdn -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js"></script>
  @endsection
@section('content')
    <!-- #Start Main Body  -->
    <!-- gallery title -->
    <div class="py-10 text-center bg-[#f6f6f3]">
        <h4 class=" w-52 m-auto uppercase  text-lg md:text-3xl md:tracking-widest font-bold  block ">Gallery</h4>
    </div>
    @foreach (get_setting_array('gallary') as $key=>$item )
    @php
        $data = json_decode($item->value,true);
    @endphp
    <div class="@if($key%2==0)bg-[#f6f6f3]@else bg-[#ffdfd5] @endif">
        <!--gallery 1 -->
        <div class="container mx-auto px-4  py-14">
            <h4 class=" shape bottom-underline  m-auto uppercase text-lg md:text-2xl md:tracking-widest font-bold  block ">{{ $data['name'] }}</h4>
            <div id="gallery-{{ $key }}" class="grid grid-cols md:grid-cols-2 pt-8 lg:grid-cols-4 gap-2">
                @foreach ($data['image'] as $image)
                <div  class="item p-4" data-src="{{ $image }}">
                    <img class="w-full" src="{{ $image }}" alt="">
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <script>
        lightGallery(document.getElementById("gallery-{{ $key }}"), {
            selector: ".item",
        });
    </script>
    @endforeach
@endsection
@section('script')

    
@endsection