@extends('web.layout.app')
<style>
    div#headingone12 {
    margin-top: 4px !important;
}
</style>
@section('content')

<script>
$(document).ready(function(){
  $("#bu1234").click(function(){
    $("#bod1234").show(500);
     $("#dus1234").show();
      $("#bu1234").hide();

  });

   $("#dus1234").click(function(){
    $("#bod1234").hide(500);
     $("#dus1234").hide();
      $("#bu1234").show();

  });
 
});
</script>

<div class="container-fluid canreq_cont">
  <div class="row">
  <div class="col-sm-3">
    <div class="bs-example card filter_pro_duct12">

<h5 class="side_filter">Categories</h5>


<span style="float: right;display: none;padding-right: 22px;" id="dus1234"><i class="fas fa-angle-up"></i></span></h5>

 <div class="accordion" id="bod1234" style="display: none;">
     
      @if(count($category)>0)
        @foreach($category as $cat)
       <div>
            @if($cat->parent == 0)
         <div class="scard-header" id="headingOne" style="margin-bottom: -7px;margin-top: 14px;">
           
            <a data-toggle="collapse" class="collapsed main_side_head"  href="#collapse{{$cat->cat_id}}" style="text-decoration: none;color: black;font-weight: 500">{{$cat->title}}(P)
             
            <span style="float: right;margin-right:13px;">
                <i class="fa fa-plus" ></i></span>
               
               
         </a>
         </div>
          @foreach($category_sub as $cat_sub)
          @if($cat_sub->parent==$cat->cat_id)
            <div id="collapse{{$cat_sub->parent}}" style="margin-top: 3px;" class="collapse sec_para_side show" aria-labelledby="headingOne">
                <div class="card-body" style="margin-bottom: -35px;">
                     <div class="" style="min-width: 235px !important;margin-left: -27px;padding-bottom: 20px;margin-top: -22px;">
                          <div>
                              
                              
                               <div class="scard-header" id="headingone12" style="margin-bottom: -7px;margin-top: 14px;">
                                   <a href="" data-toggle="collapse" class="collapsed main_side_head"></a>
                                   <a   style="text-decoration: none;color:#ea4444;font-size:13px !important" href="{{route('catee', [$cat_sub->cat_id])}}" >{{$cat_sub->title}}
                                 
                              <span style="float: right;margin-right:13px;">
                                  <i class="fa fa-plus" ></i></span>
                                
                                  </a> 
                               </div>
                                @if(count($category_child)>0)
                                 @foreach($category_child as $cat_child)
                               @if($cat_sub->cat_id==$cat_child->parent) 
                              <div id="collapseone{{$cat_child->parent}}" style="margin-top: 3px;" class="collapse sec_para_side" aria-labelledby="headingone12" >
                                <div class="card-body"  style="margin-bottom: -35px;">
                                    <p class="main_side_para">{{$cat_child->title}}(child-cat)</p>
                                   
                    
                                </div>
                            </div>
                                @endif
                              @endforeach
                              @endif
                          </div>
                     </div>
                </div>
            
            </div>
            
              @endif
               @endforeach
             @endif
       </div>
        @endforeach
         @endif
        
    
 </div>
    <br>
</div>

<div class="card filter_pro_duct1212">
  <h5 class="side_filter" style="background-color: white;z-index: 999">Price (&#8377;) </h5>

      <div class="card-body side_price_scroll">
       <form>
  <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
  <label for="fruit1">0 &#8377; - 500 &#8377;</label>
  
  

    <input type="checkbox" id="fruit2" name="fruit-2" value="afef">
  <label for="fruit2">500 &#8377; - 1000 &#8377;</label>
  
  <input type="checkbox" id="fruit3" name="fruit-3" value="dfwefw">
  <label for="fruit3">1000 &#8377; - 2000 &#8377;</label>

  <input type="checkbox" id="fruit4" name="fruit-4" value="sdfsd">
  <label for="fruit4">2000 &#8377; - 5000 &#8377;</label>

   <input type="checkbox" id="fruit5" name="fruit-5" value="sdfsd">
  <label for="fruit5">5000 &#8377; - 10000 &#8377;</label>

  <input type="checkbox" id="fruit3" name="fruit-3" value="dfwefw">
  <label for="fruit3">Strawberry</label>

  <input type="checkbox" id="fruit4" name="fruit-4" value="sdfsd">
  <label for="fruit4">Strawberry</label>

   <input type="checkbox" id="fruit5" name="fruit-5" value="sdfsd">
  <label for="fruit5">Dabur</label>


</form>
      </div>
    </div>

<div class="card filter_pro_duct1212">
  <h5 class="side_filter" style="background-color: white;z-index: 999">Brands </h5>

      <div class="card-body side_price_scroll">
       <form>
  <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
  <label for="fruit1">Apple</label>
  
  

    <input type="checkbox" id="fruit2" name="fruit-2" value="afef">
  <label for="fruit2">Apple</label>
  
  <input type="checkbox" id="fruit3" name="fruit-3" value="dfwefw">
  <label for="fruit3">Strawberry</label>

  <input type="checkbox" id="fruit4" name="fruit-4" value="sdfsd">
  <label for="fruit4">Strawberry</label>

   <input type="checkbox" id="fruit5" name="fruit-5" value="sdfsd">
  <label for="fruit5">Dabur</label>

  <input type="checkbox" id="fruit3" name="fruit-3" value="dfwefw">
  <label for="fruit3">Strawberry</label>

  <input type="checkbox" id="fruit4" name="fruit-4" value="sdfsd">
  <label for="fruit4">Strawberry</label>

   <input type="checkbox" id="fruit5" name="fruit-5" value="sdfsd">
  <label for="fruit5">Dabur</label>


</form>
      </div>
    </div>

  </div>



    <div class="col-sm-9" style="margin-left: -45px;">

      <div class="card shadow-sm top_price_menu">
  <div class="card-body">
   <button class="sort_by_but">Sort By Popularity</button>

     <button class="sort_by_but2">Price (Low To High)</button>

     <button class="sort_by_but2">Price (High To Low)</button>
    
  </div>
</div>

<div class="card shadow-sm main_card12_width">
  <div class="card-body">
  @if(count($products)>0)
   @php $i=1; @endphp
        @foreach($products as $product)
         
<!--<a href="product_preview.php" style="color: black;">-->
  <div class="product_div">