@extends('layouts.app')
@section("page-style")
<link href="{{ asset('front-assets/css/pages_css/product-list.css') }}" rel="stylesheet">
@endsection
@section('content')
<style type="text/css">
   .navHeader {
   background-color: black;
   }
   .elcinaHeader{
   position: relative !important; 
   }
</style>
<!----------|| Privacy Policy Section ||---------->
<section class="w-100 clearfix privacyPolicySection pb-5 pt-lg-2 position-relative" id="elcinaPrivacyPolicy">
   <div class="privacyPolSec">
      <div class="elcinaPrivacyPolicyInner pb-md-5">
         <div class="w-100 clearfix filterToggleSection pt-2 pb-3" id="filterToggleSec">
            <div class="container">
               <div class="filterSideBarToggle">
                  <a class="toggle-menu" href="javascript:void(0);">
                     <p><span>Filter</span> <i class="fa fa-sliders" aria-hidden="true"></i><i class="fa fa-times-circle-o" aria-hidden="true"></i></p>
                  </a>
               </div>
            </div>
         </div>
         <div class="container">
            <div class="row">
               <div class="col-lg-3">
                  <div class="asideSection mt-lg-3">
                     <div class="asideOuter">
                        <!--<div class="asideHeadingSec">
                           <h4 class="mb-0">Filter By</h4>
                           </div>-->
                        <div class="filterSection">
                           <form action="javascript:void(0);" id="product_filter">
                              <div class="filterInner">
                                 <label for="product_title" class="form-label">Title</label>
                                 <input type="text" class="form-control" id="product_title" placeholder="All Products" name="product_title" value="" onkeyup="product_list();">
                               </div>
                              <div class="filterInner">
                                 <label for="category" class="form-label">Category</label>
                                 <select class="form-select single-select" id="category"  name="category" onchange="get_subcategory(this.value)">
                                    <option value="">All Category</option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>45</b><br />
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="sub_category" class="form-label">Sub Category</label>   
                                 <select class="form-control single-select" name="subcategory" id="sub_category" onchange="getcategory()">
                                    <option value="">All Sub Category</option>
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="category" class="form-label">Core Activity</label>
                                 <select class="form-select single-select" id="coreactivity"  name="coreactivity" onchange="get_activity(this.value)">
                                    <option value="">All Core Activity</option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>60</b><br />
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="sub_category" class="form-label">Activity</label>   
                                 <select class="form-control single-select" name="activity" id="activity">
                                    <option value="">All Activity</option>
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="size" class="form-label">Size</label>
                                 <input type="text" class="form-control" id="size" placeholder="Size" name="size" onkeyup="product_list();">
                              </div>
                              <div class="filterInner">
                                 <label for="color" class="form-label">Color/Finish</label>
                                 <!--<input type="text" class="form-control" id="color" placeholder="All Color" name="color">-->
                                 <select class="form-select single-select" id="color"  name="color" onchange="product_list();">
                                    <option value="">All Color/Finish</option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>80</b><br />
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="country" class="form-label">Country</label>
                                 <!--<input type="text" class="form-control" id="country" placeholder="Country" name="country">-->
                                 <select class="single-select form-control" name="country" required="" id="country"  data-placeholder="Select Country" onchange="get_state(this.value)">
                                    <option value="">Select Country</option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>90</b><br />
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="state" class="form-label">State</label>
                                 <!--<input type="text" class="form-control" id="state" placeholder="All State" name="state">-->
                                 <select class="single-select form-control" name="state" id="state"  data-placeholder="Select State" onchange="get_city(this.value)">
                                    <option value="">Select State</option>
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="city" class="form-label">City</label>
                                 <!--<input type="text" class="form-control" id="city" placeholder="City" name="city">-->
                                 <select class="form-control" name="city" required="" id="city" onchange="city_update();">
                                  <option value="">Select City</option>          
                                 </select>
                              </div>
                              <div class="filterInner">
                                 <label for="companies" class="form-label">Listed Companies</label>
                                 <!--<input type="text" class="form-control" id="companies" placeholder="All Select" name="companies">-->
                                 <select class="single-select form-control" name="company" required="" id="company"  data-placeholder="Select Company" onchange="product_list();">
                                    <option value="">Select Company</option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>114</b><br />
                                 </select>
                              </div>
                              <input type="hidden" class="form-control" id="page_id"  name="page_id" value="6">
                           </form>
                        </div>
                     </div>
                     <div class="asideOuter mt-4">
                        <div class="asideHeadingSec">
                           <h4 class="mb-0">TOP PRODUCTS</h4>
                        </div>
                        <div class="filterProductsSection">
                           <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product.blade.php</b> on line <b>129</b><br />
                        </div>
                     </div>
                                          <!--<div class="asideOuter mt-4">
                        <div class="asideHeadingSec">
                           <h4 class="mb-0">TAGS</h4>
                        </div>
                        <div class="filterTagSection">
                           <div class="filterTag">
                              <ul class="nav">
                                 <li class="nav-item">
                                    <a class="nav-link" href="#">Fashion</a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="#">Sports</a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="#">Brands</a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link active" href="#">Charity</a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="#">Fitness</a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="#">Medical</a>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>-->
                  </div>
               </div>
               <div class="col-lg-9">
                  <div class="productListSection">
                     <div class="ProductListSec"></div>
                     <div class="ProductListBtnSec text-center mt-4">
                        <a href="javascript:;" class="btn load_more_btn" onclick="load_more()">Load More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   </div>
</section>
<!----------|| Privacy Policy Section ||---------->
@endsection
@section("page-js-script")
<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>

  $('#singleProductSlider').owlCarousel({
  loop: true,
  nav: false,
  autoplay:true,
    autoplayTimeout:2000,
  autoplayHoverPause:true,
  responsive: {
    0: {
      items: 1
    }
    }
  })

   $(document).ready(function(){
     product_list();
      $(".single-select").select2({
         theme: 'bootstrap4',
         width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
         placeholder: $(this).data('placeholder'),
         allowClear: Boolean($(this).data('allow-clear')),
      });
   });
    function get_subcategory(id){ 
      product_list();
   $.ajax({  
      'headers': {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url :"{{ route('front.subcategories.get') }}",  
      method:"POST",  
      data:{'id':id,sub_cat:$('#sub_category').data('selected-subcat')},
      success: function(data){ 
         $('#sub_category').html(data);   
      },
   }); 
   }
   function get_activity(id){ 
      // product_list();
   $.ajax({  
      'headers': {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url :"{{ route('activity.get') }}",  
      method:"POST",  
      data:{'id':id,activi_id:$('#activity').data('selected-subcat')},
      success: function(data){ 
         $('#activity').html(data);   
      },
   }); 
   }
   function getcategory(){
    product_list();
   }
   
   function product_list() {
     $.ajax({     
          url :"{{ route('product_list') }}", 
           'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },  
          method:"POST",  
          data:$('#product_filter').serialize(),
          success: function(res){
             $('.ProductListSec').html(res);
          }
              
      });      
   
   }
   
   function load_more(){
    var total_products = "";
    var page_no = $('#page_id').val();
    var sum = 6 + parseInt(page_no);
    if (sum >= total_products) {
      sum = total_products;
      $('.load_more_btn').addClass('d-none');
    }    
    var total_no = $('#page_id').val(sum);
    product_list();   
   }

   function get_state(id, user = 'seller'){ 
   
    $.ajax({  
          'headers': {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url :"{{ route('register.state') }}",  
          method:"POST",  
          data:{'id':id},
          success: function(res){ 
              $('#state').html(res.all_states);   
              $('#state').trigger("change");
              product_list();   
          },
       }); 
    } 

    function get_city(id, user = 'seller'){ 
   
    $.ajax({  
          'headers': {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url :"{{ route('register.city') }}",  
          method:"POST",  
          data:{'id':id},
          success: function(res){ 
              $('#city').html(res.all_city);   
              product_list();   
          },
       }); 
    }

    function city_update() {
      product_list(); 
    }

</script>
@endsection