@extends('layouts.frontend.app')
@section('content')
<style>
   .loader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255,255,255,0.7);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .loader .spinner {
   border: 5px solid #f3f3f3;
   border-top: 5px solid #E65425;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
   }
   @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
   }
   
</style>
<section class="container mb-5">
   <div class="row">
   <div class="col-md-4 col-lg-3 mt-lg-5">
      <!-- Sidebar -->
       
        <div id="filter-sidebar" class="filter-sidebar">
         <div class="d-flex justify-content-between">
              <h1 class="filter-title">Filters</h1>
          <button class="close-btn" id="closeBtn"><i class="fa-solid fa-xmark"></i></button>
         </div>
       
         @if ($type=="bestseller" || $type=="todaysdeals" || $type=="shop" || $type=="new-arrival" || $type == "now-trending")
       
         @else

         <div class="mb-3 category-list">
            <strong class="d-block mb-2">Categories</strong>
            <ul>
               @foreach($subcategories as $sub)
               <li>
                  <a href="{{ route('products.load', ['type' => $sub->slug]) }}">
                  {{ ucwords($sub->name) }}
                  </a>
               </li>
               @endforeach
            </ul>
         </div>
         @endif
         <div class="price-box">
            <strong class="d-block mb-2">Price</strong>
            <div class="range-slider">
               <span class="track"></span>
               <span class="range" id="range"></span>
               <input type="range" min="0" max="10000" value="0" id="input-left">
               <input type="range" min="0" max="10000" value="1000000" id="input-right">
            </div>
            <div class="d-flex justify-content-between price-inputs mt-2">
               <input type="number" class="form-control form-control-sm res_minPrice" id="minPrice" value="{{$minPrice ?? ''}}">
               <input type="number" class="form-control form-control-sm res_maxPrice" id="maxPrice" value="{{$maxPrice ?? ''}}">
            </div>
         </div>
         <!-- Accordion Filters -->
         <div class="accordion" id="filterAccordion">

         


            <!-- Customer Ratings -->
            <div class="main-le-filter">
               <h2 class="btn-rating">
                  <button>
                  Customer Ratings
                  </button>
               </h2>
               <div id="ratingCollapse" >
                  <div class="accordion-body">
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="rating[]" value="5" type="checkbox" id="rating5">
                        <label class="form-check-label" for="rating5">5★ & above</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="rating[]" value="4" type="checkbox" id="rating4">
                        <label class="form-check-label" for="rating4">4★ & above</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="rating[]" value="3" type="checkbox" id="rating3">
                        <label class="form-check-label" for="rating3">3★ & above</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="rating[]" value="2" type="checkbox" id="rating2">
                        <label class="form-check-label" for="rating2">2★ & above</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="rating[]" value="1" type="checkbox" id="rating1">
                        <label class="form-check-label" for="rating1">1★ & above</label>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Discount -->
            <div class="main-le-filter">
               <h2 class="btn-rating">
                  <button>
                  Discount
                  </button>
               </h2>
               <div id="discountCollapse" >
                  <div class="accordion-body">
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="10" type="checkbox" id="discount1">
                        <label class="form-check-label" for="discount1">5 % - 10% </label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="20" type="checkbox" id="discount2">
                        <label class="form-check-label" for="discount2">11% - 20%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="30" type="checkbox" id="discount3">
                        <label class="form-check-label" for="discount3">21% - 30%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="40" type="checkbox" id="discount4">
                        <label class="form-check-label" for="discount4">31% - 40%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="50" type="checkbox" id="discount5">
                        <label class="form-check-label" for="discount5">41% - 50%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="60" type="checkbox" id="discount6">
                        <label class="form-check-label" for="discount6">51% - 60%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="70" type="checkbox" id="discount7">
                        <label class="form-check-label" for="discount7">61% - 70%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="80" type="checkbox" id="discount8">
                        <label class="form-check-label" for="discount8">71% - 80%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="90" type="checkbox" id="discount9">
                        <label class="form-check-label" for="discount9">81% - 90%</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="discount[]" value="100" type="checkbox" id="discount10">
                        <label class="form-check-label" for="discount10">91% - 100%</label>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Offers -->
            {{-- 
            <div class="main-le-filter">
               <h2 class="btn-rating" >
                  <button >
                  Offers
                  </button>
               </h2>
               <div id="offersCollapse" >
                  <div class="accordion-body">
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox"  name="offer[]" value="special" type="checkbox" id="offer1">
                        <label class="form-check-label" for="offer1">Special Price</label>
                     </div>
                     <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="offer2">
                        <input class="form-check-input filter-checkbox"  name="offer[]" value="special" type="checkbox" id="offer2">
                        <label class="form-check-label" for="offer2">Buy More, Save More</label>
                     </div>
                  </div>
               </div>
            </div>
            --}}
            <!-- languages -->
            <div class="main-le-filter">
               <h2 class="btn-rating" >
                  <button >
                  Language
                  </button>
               </h2>
               <div id="offersCollapse" >
                  <div class="accordion-body">
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="all_language[]" value="1" type="checkbox" id="offer1">
                        <label class="form-check-label" for="offer1">
                        All <span id="all-language-count">({{ $product_count }})</span>
                        </label>
                     </div>
                     @foreach($languageCounts ?? [] as $lang => $count)
                     @php $langSlug = \Illuminate\Support\Str::slug($lang); @endphp
                     <div class="form-check">
                        <input class="form-check-input filter-checkbox" name="languages[]" value="{{ $lang }}" type="checkbox" id="lang-{{ $langSlug }}">
                        <label class="form-check-label" for="lang-{{ $langSlug }}">
                        {{ $lang }} <span id="lang-{{ $langSlug }}-count">({{ $count }})</span>
                        </label>
                     </div>
                     @endforeach
                  </div>
               </div>
            </div>
         </div>
         <!-- accordion end -->
      </div>
      <!-- sidebar end -->
   </div>
   <div class="col-md-8 col-lg-9 card-section mt-lg-5">
      {{-- <ul class='tt-nav'>
         <li><a href="{{ route('index') }}" style="color: #E65425;">Home</a></li>
         @if (count($breadcrumbs) > 0)
         @foreach ($breadcrumbs as $bc)
         <li> >
            @if($loop->last)
            <span>{{ $bc->name }}</span>
            @else
            <a href="{{ route('products.load', ['type',$bc->slug]) }}" style="color: #E65425;">{{ $bc->name }}</a>
            @endif
         </li>
         @endforeach
         @else
         <span>>{{ ucwords($type ) }}</span>
         @endif
      </ul> --}}
   



     
<ul class='tt-nav'>
    <li><a href="{{ route('index') }}" style="color: #E65425;">Home</a></li>
  
    @if (count($breadcrumbs) > 0)
        @foreach ($breadcrumbs as $bc)
            <li> >
                @if($loop->last)
                    <span>{{ $bc->name }}</span>
                @else
                    <a href="{{ route('products.load', ['type' => $bc->slug]) }}" style="color: #E65425;">{{ $bc->name }}</a>
                @endif
            </li>
        @endforeach
    @else
        <li> > <span> <span>{{ucwords($type)}}</span></span></li>
    @endif
</ul>
    <div class="sort-div mb-3">
       <button class="expand-btn" id="expandBtn"><i class="fa-solid fa-filter"></i> Filter</button>
    <select id="sortBy" class="form-select" style="width:180px;">
        <option value="">Sort By</option>
        <option value="low_high">Price: Low to High</option>
        <option value="high_low">Price: High to Low</option>
    </select>
</div>


      {{-- <div class="search-item d-flex justify-content-between">
         <h1 class="card-title"></h1>
       
      </div> --}}
      {{-- ---------------------Load More page -----------------------------------------------------------}}
      <div class="loader" style="display:none;">
         <div class="spinner"></div>
      </div>
      <div class="row" id="product-list">
         @forelse ($products as $pro)
         @include('frontend.product.loadMore', ['pro' => $pro])
         @empty
         <div class="col-12 text-center p-3">No products found2</div>
         @endforelse
      </div>
      @if(count($products) == $limit)
      <a id="load-more" 
         class="btn btn-primary" 
         data-page="1" 
         onclick="loadMore()">Load More</a>
      @endif
   </div>
</section>

 <script>
  const expandBtn = document.getElementById('expandBtn');
    const expandContent = document.getElementById('filter-sidebar');
    const closeBtn = document.getElementById('closeBtn');

    // Show content and hide button
 expandBtn.addEventListener('click', () => {
  expandContent.style.transition = "max-height 0.5s ease, padding 0.5s ease"; // smooth open
  expandContent.classList.add('active');
  expandContent.style.maxHeight = expandContent.scrollHeight + "px";
  expandBtn.style.display = 'none';
});

closeBtn.addEventListener('click', () => {
  expandContent.style.transition = "none"; // instant close
  expandContent.style.maxHeight = 0;
  expandContent.classList.remove('active');
  expandBtn.style.display = 'inline-block';
});

  </script>

@endsection