@extends('website.layouts.app')
@section('title','Gallery')
@section('content')
    <!-- start inner-banner -->
    <section class="gallery-banner">
        <h1 class="font-weight-bold text-center">Gallery</h1>
        <!-- <h4 class="text-center" style="margin-top: -10px;">Home / Gallery</h4> -->
    </section>
    <!-- end inner-banner -->
    <!-- start blog -->
    <section class="p-md-5">
        <div class="container">
            <div class="row">
                <div class="col-md-3 cate-sidemenu">
                    <div class="">
                        <h5 class="pull-left">Services</h5>
                        <!-- <a href="" class="color-blue pull-right">Clear all</a> -->
                        <div class="clearfix"></div>
                        <button class="btn btn-main text-left w-100 mb-1 d-md-none" id="filter-btn1">Filter Gallery<span class="dropdown-filter fa fa-sort-desc"></span></button>
                        
                        <div class="filter_list1">
                        @foreach($services as $service)
                        <label class="product-sidelist">{{ $service->name ?? '' }}
                                <input type="checkbox" id="service_id[]" onclick='onCheckService()' name="service_id" value="{{ $service->id ?? '' }}" {{$service->id == $getSingleServices->id ?'checked':''}} class="service_id">
                              <span class="checkmark"></span>
                           
                        </label>
                        @endforeach

                        </div>
                    </div>
                    
                </div>
                <div class="col-md-9">
                    <div class="row" id='gallery'>
                        @foreach($galleries as $gallery)
                        <div class="col-lg-4 col-md-6 col-sm-12 mt-4">
                            <div class="gallery-img">
                                <img src="{{ asset($gallery->image_path ?? '') }}" style="width: 100%;" alt="">
                            </div>
                        </div>
                        @endforeach
                    </div>
                  </div>
            </div>
        </div>
    </section>
    <!-- end blog -->
@endsection
@section('js')
<script type="text/javascript">

function onCheckService() {

  var serviceId = [];
    $('.service_id:checked').each(function(i){
       serviceId[i] = $(this).val();
  });
  if(serviceId) {
  
    $.ajax({
        url: '{{ action("WebsiteController\WebsiteController@jsonGallery") }}?service_id='+serviceId,
        type: "GET",
        data : {"_token":"{{ csrf_token() }}"},
        dataType: "json",
        success:function(data) {
          if(data){
            $('#gallery').empty();
            $('#gallery').focus;
            $.each(data, function(key, value){
            var url = '{{ url('') }}';
            var image = url+'/'+value.image_path;
            //console.log(image);
            $('#gallery').append('\
             <div class="col-lg-4 col-md-6 col-sm-12 mt-4">\
                <div class="gallery-img">\
                    <img src="'+image+'" style="width: 100%;">\
                </div>\
            </div>')
        });
      }else{
        $('#gallery').empty();
      }
      }
    });
  }
 }
    
</script>
@endsection