@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 py-5" id="elcinaPrivacyPolicy">
  <div class="elcinaPrivacyPolicyInner py-md-5">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="asideSection">
            <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="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>Notice</b>:  Undefined variable: categories in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>34</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>34</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>Notice</b>:  Undefined variable: coreActivities in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>50</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>50</b><br />
                        
                     </select>
                </div>
                <div class="filterInner">
                  <label for="sub_category" class="form-label">Sub Category</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">
                </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">
                </div>
                <div class="filterInner">
                  <label for="country" class="form-label">Country</label>
                  <input type="text" class="form-control" id="country" placeholder="Country" name="country">
                </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">
                </div>
                <div class="filterInner">
                  <label for="city" class="form-label">City</label>
                  <input type="text" class="form-control" id="city" placeholder="City" name="city">
                </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">
                </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>Notice</b>:  Undefined variable: top_products in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>96</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product.blade.php</b> on line <b>96</b><br />
         
              </div>
            </div>
            <div class="asideOuter mt-4">
              <div class="asideHeadingSec">
                <h4 class="mb-0">RECOMMENDED</h4>
              </div>
              <div class="filterRecommendedSection">
                <div class="filterRecommended mt-3">
                  <div class="filtRecommended text-center">
                    <div class="filtRecommendedImage p-4">
                      <img src="{{ asset('front-assets/images/products/product5.png') }}" alt="product" class="img-fluid">
                    </div>
                    <div class="filtRecommendedContant">
                      <h5>Pro Gaming Mouse</h5>
                    </div>
                  </div>
                </div>
              </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-md-9">
          <div class="productListSection">
            <div class="ProductListSec"></div>
            <div class="ProductListBtnSec text-center">
              <a href="javascript:;" class="btn" onclick="load_more()">View All</a>
            </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>
   $(document).ready(function(){
     faq_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){ 
      faq_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){ 
      // faq_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(){
    faq_list();
   }

   function faq_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 page_no = $('#page_id').val();
    var sum = parseInt($('#page_id').val()) + parseInt(page_no);
    var total_no = $('#page_id').val(sum);
    faq_list();
    
  }
</script>
@endsection