@extends('website.layouts.app')
@section('title','Products')
@section('content')
    <!-- start inner-banner -->
   <!--  <section class="inner-banner">
        <h1 class="font-weight-bold text-center">Products</h1>
        <h4 class="text-center" style="margin-top: -10px;">Home / Products</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="pt-5">
                        <h5 class="pull-left">Sub Categories</h5>
                        <a href="" class="color-blue pull-right mt-1">Clear all</a>
                        <div class="clearfix"></div>
                        <button class="btn btn-main text-left w-100 mb-1 d-md-none" id="filter-btn2">Filter Gallery<span class="dropdown-filter fa fa-sort-desc"></span></button>
                        <div class="filter_list2">
                          
                         @if($productSubId != "")
                        <label class="product-sidelist"> {{ $subCategories_partone->name ?? '' }}
                                <input type="checkbox" id="sub_category_id[]" name="sub_category_id" onclick='onCheckSubCategory()' value="{{ $subCategories_partone->id ?? '' }}" class="sub_cat" checked>
                              <span class="checkmark"></span>
                        </label>
                        @endif
                        
                        @php $sub_count =1; @endphp
                        @foreach($subCategories_parttwo as $subCategory)
                            @if($productSubId == "")
                                  @if($sub_count == 1)
                                     <label class="product-sidelist"> {{ $subCategory->name ?? '' }}
                                            <input type="checkbox" id="sub_category_id[]" name="sub_category_id" onclick='onCheckSubCategory()' value="{{ $subCategory->id ?? '' }}" class="sub_cat" checked>
                                          <span class="checkmark"></span>
                                     </label>
                                   @else  
                                      <label class="product-sidelist"> {{ $subCategory->name ?? '' }}
                                            <input type="checkbox" id="sub_category_id[]" name="sub_category_id" onclick='onCheckSubCategory()' value="{{ $subCategory->id ?? '' }}" class="sub_cat">
                                          <span class="checkmark"></span>
                                      </label>
                                   @endif   
                             @else    
                                  <label class="product-sidelist"> {{ $subCategory->name ?? '' }}
                                          <input type="checkbox" id="sub_category_id[]" name="sub_category_id" onclick='onCheckSubCategory()' value="{{ $subCategory->id ?? '' }}" class="sub_cat">
                                        <span class="checkmark"></span>
                                  </label>
                             @endif 
                          @php $sub_count++; @endphp        
                        @endforeach
                      </div>
                    </div>
                </div> -->
                <div class="col-md-12">
                    <div class="row" id="products">
                        @foreach($products as $product)
                        <div class="col-lg-3 col-md-4 col-sm-12 mt-4">
                            <div class="Service_box">
                                    <a href="{{ action('WebsiteController\WebsiteController@productDetail', [base64_encode($product->id)]) }}">
                                    <img src="{{ asset($product->productSingleImage->image_path ?? 'admin/dist/img/placeholder/download.png') }}" style="width: 100%;" alt="">
                                    <div class="service_content">
                                        <h5 class="color-blue">{{ $product->title ?? '' }} </h5>
                                    </div>
                                    </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                  </div>
            </div>
        </div>
    </section>
    <!-- end blog -->
@endsection
@section('js')
<script type="text/javascript">

function onCheckSubCategory() {

  var subCategoryId = [];
    $('.sub_cat:checked').each(function(i){
       subCategoryId[i] = $(this).val();
  });
  if(subCategoryId) {
  
    $.ajax({
        url: '{{ action("WebsiteController\WebsiteController@jsonProduct", [$service]) }}?sub_category_id='+subCategoryId,
        type: "GET",
        data : {"_token":"{{ csrf_token() }}"},
        dataType: "json",
        success:function(data) {
          if(data){
            $('#products').empty();
            $('#products').focus;
            $.each(data, function(key, value){

            var url = '{{ url('') }}';
            var image = url+'/'+value.product_single_image.image_path;
            console.log(image);
              //console.log(value.product_single_image.image_path);
            
            $('#products').append('\
            <div class="col-lg-4 col-md-6 col-sm-12 mt-4">\
                <div class="Service_box">\
                   <a href="{{ action('WebsiteController\WebsiteController@productDetail', ['']) }}/'+ btoa(value.id) +'">\
                   <img src="'+image+'" style="width: 100%;">\
                   <div class="service_content">\
                       <h5 class="color-blue">' + value.title + '</h5>\
                   </div>\
                   </a>\
                </div>\
            </div>')
        });
      }else{
        $('#products').empty();
      }
      }
    });
  }
 }
    
</script>
@endsection