000

@extends('front.layout_alt')

@section('page_title', 'Category')

@section('content')
<style>.aa-slider-btn {
    margin-top: 10px;
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Adjust the appearance of the range slider if needed */
#skipstep {
    width: 100%;
    height: 8px;
}
</style>

<section id="aa-product-category">
   <div class="container">
      <div class="row">
         <div class="col-lg-9 col-md-9 col-sm-8 col-md-push-3">
            <div class="aa-product-catg-content">
               <div class="aa-product-catg-head">
                  <div class="aa-product-catg-head-left">
                     <form action="" class="aa-sort-form">
                        <label for="">Sort by</label>
                        <select name="" onchange="sort_by()" id="sort_by_value">
                           <option value="" selected="Default">Default</option>
                           <option value="name">Name</option>
                           <option value="price_desc">Price - HIGH </option>
                           <option value="price_asc">Price - LOW</option>
                           <option value="date">Date</option>
                        </select>
                     </form>
                     {{$sort_txt}}
                  </div>
                  <div class="aa-product-catg-head-right">
                     <a id="grid-catg" href="#"><span class="fa fa-th"></span></a>
                     <a id="list-catg" href="#"><span class="fa fa-list"></span></a>
                  </div>
               </div>

<div class=" aa-product-catg-body">
                  <ul class="aa-product-catg">
                     
                     @forelse($product as $productArr)
                        <li>
                          <figure>
                            <a href="{{ url('single_product/show', ['id' => $productArr->id]) }}">
                              <img src="{{ asset('storage/media/'.$productArr->image) }}" alt="{{ $productArr->name }}" width="200" height="200">
                            </a>
                            <a class="aa-add-card-btn" href="javascript:void(0)" onclick="home_add_to_cart('{{$productArr->id}}','{{$product_attr[$productArr->id][0]->size}}','{{$product_attr[$productArr->id][0]->color}}')"><span class="fa fa-shopping-cart"></span>Add To Cart</a>
                            <figcaption>
                              <h4 class="aa-product-title"><a href="{{url('product/'.$productArr->slug)}}">{{$productArr->name}}</a></h4>
                              <span class="aa-product-price">Rs {{$product_attr[$productArr->id][0]->price}}</span><span class="aa-product-price"><del>Rs {{$product_attr[$productArr->id][0]->mrp}}</del></span>
                            </figcaption>
                          </figure>                          
                        </li>  
                     @empty
                        <li>No data found</li>
                     @endforelse
                  </ul>
                                    
               </div>
            </div>
         </div>
         <div class="col-lg-3 col-md-3 col-sm-4 col-md-pull-9">
            <aside class="aa-sidebar">
               
               <div class="aa-sidebar-widget">
                  <h3>Category</h3>
                  <ul class="aa-catg-nav">
                     @foreach($categories_left as $cat_left)
                        @if($slug == $cat_left->CategoryName)
                           <li><a href="{{ url('category/'.$cat_left->CategoryName) }}" class="left_cat_active">{{ $cat_left->CategoryName }}</a></li>
                        @else
                           
                        @endif
                     @endforeach
                  </ul>
               </div>
               
               <!-- <div class="aa-sidebar-widget">

<h3>Shop By Price</h3>            
                  <div class="aa-sidebar-price-range">
                     <form action="">
                        <div id="skipstep" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
                        <span id="skip-value-lower" class="example-val">30.00</span>
                        <span id="skip-value-upper" class="example-val">100.00</span>
                        <button class="aa-filter-btn" type="button" onclick="sort_price_filter()">Filter</button>
                     </form>
                  </div>
               </div> -->
               
               <div class="aa-sidebar-widget">
                  <h3>Shop By Color</h3>
                  <div class="aa-color-tag">
                     @foreach($colors as $color)
                        @if(in_array($color->id,$colorFilterArr))
                           <a class="aa-color-{{strtolower($color->color)}} active_color" href="javascript:void(0)" onclick="setColor('{{$color->id}}','1')"></a>
                        @else
                           <a class="aa-color-{{strtolower($color->color)}}" href="javascript:void(0)" onclick="setColor('{{$color->id}}','0')"></a>
                        @endif
                     @endforeach
                  </div>
               </div>
            </aside>
         </div>
      </div>
   </div>
</section>

function sort_by() {
    var sort_by_value = $('#sort_by_value').val();
    $('#sort').val(sort_by_value);
    $('#categoryFilter').submit();
}

function sort_price_filter() {
    $('#filter_price_start').val($('#skip-value-lower').html());
    $('#filter_price_end').val($('#skip-value-upper').html());
    $('#categoryFilter').submit(); 
}

// Initialize the range slider
    var rangeSlider = document.getElementById('skipstep');
    noUiSlider.create(rangeSlider, {
        start: [30, 100],
        connect: true,
        range: {
            'min': 0,
            'max': 200
        }
    });

// Get the span elements for displaying lower and upper values
    var lowerValueSpan = document.getElementById('skip-value-lower');
    var upperValueSpan = document.getElementById('skip-value-upper');

// Listen for slider change event
    rangeSlider.noUiSlider.on('update', function(values, handle) {
        var lowerValue = parseFloat(values[0]);
        var upperValue = parseFloat(values[1]);

// Update the displayed price values
        lowerValueSpan.textContent = lowerValue.toFixed(2);
        upperValueSpan.textContent = upperValue.toFixed(2);
    });

// Function to handle filter button click
    function sort_price_filter() {
        var lowerValue = parseFloat(lowerValueSpan.textContent);
        var upperValue = parseFloat(upperValueSpan.textContent);
        
        // Here you can perform actions like sending an AJAX request to fetch products within the selected price range
        // For now, let's just log the values
        console.log("Lower Price: " + lowerValue);
        console.log("Upper Price: " + upperValue);
    }
</script>

@endsection