@extends('layouts.main')
@section('title', 'Shop')
@section('style')
  <link rel="stylesheet" href="{{ asset('assets/custom/css/category.css') }}">
  <style>
    /* === Pagination === */
    .custom-pagination-wrapper .pagination {
      display: flex;
      justify-content: center;
      padding-left: 0;
      list-style: none;
      border-radius: 0.5rem;
      user-select: none;
      font-weight: 600;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .custom-pagination-wrapper .pagination .page-item {
      margin: 0 4px;
    }

    .custom-pagination-wrapper .pagination .page-link {
      position: relative;
      display: block;
      padding: 8px 14px;
      color: #2874f0;
      background-color: #fff;
      border: 2px solid #dfe3e8;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 38px;
      text-align: center;
      user-select: none;
      font-size: 0.9rem;
      box-shadow: 0 1px 3px rgba(40, 116, 240, 0.15);
    }

    .custom-pagination-wrapper .pagination .page-link:hover,
    .custom-pagination-wrapper .pagination .page-link:focus {
      background-color: #ffe500;
      border-color: #ffe500;
      color: #212121;
      text-decoration: none;
      outline: none;
      box-shadow: 0 0 8px 3px rgba(255, 229, 0, 0.5);
    }

    .custom-pagination-wrapper .pagination .page-item.active .page-link,
    .custom-pagination-wrapper .pagination .page-link.paginactive {
      background-color: #2874f0;
      border-color: #2874f0;
      color: white;
      cursor: default;
      box-shadow: 0 0 12px 3px rgba(40, 116, 240, 0.7);
    }

    .custom-pagination-wrapper .pagination .page-item.disabled .page-link {
      color: #bbb;
      cursor: not-allowed;
      background-color: #f0f0f0;
      border-color: #ddd;
      box-shadow: none;
    }

    .custom-pagination-wrapper .pagination.pagination-sm .page-link {
      padding: 6px 12px;
      font-size: 0.85rem;
      min-width: 32px;
    }

    .custom-pagination-wrapper {
      margin-top: 2rem;
      margin-bottom: 2rem;
      user-select: none;
    }

    .custom-pagination-wrapper+p {
      text-align: center;
      color: #555;
      font-size: 1rem;
      margin-top: -12px;
      margin-bottom: 20px;
    }
  </style>
  @if (isset($microsite_subdomain) && $microsite_subdomain != '')
    <link rel="stylesheet"
      href="{{ asset('assets/themes/' . config("constant.microsite_theme.$microsite_data[theme].theme") . 'filter.css') }}">
  @endif

  {{-- <link rel="stylesheet" --}}
  {{-- href="{{ asset('assets/themes/paytmfilter.css') }}"> --}}
@endsection
@section('navbar')
  @include('layouts.navbar')
@endsection
@section('content')
  @csrf
  <section class="" style="background: #f1f1f1 !important;">

    <div class="d-none">
      <label for="search">Search</label>
      <input type="text" id="search" name="search" class="form-control filters">
    </div>

    <div class="section">
      <button class="filter_btn_responsive" id="filterBtn">Filter</button>
      <div class="d-flex mt-3 mb-2">
        <div class="left_content" id="leftContent"
          style="background: white;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;">
          <p id="remove_cross"><i class='bx bx-x'></i></p>
          <div style="max-height: 100%; overflow-y:auto;" class="filter p-2">
            <div class="filter_btn form-control w-100">Filters</div>
            <hr>
            <div class="text-center mt-3">
              <button type="button" id="resetFilters" class="btn btn-secondary w-100">Reset Filters</button>
            </div>
            <hr>
            <!-- Category -->
            <div class="">
              <label>Category</label>
              <div id="category" class="checkbox-group">
                @foreach ($category as $k => $c)
                  <div>
                    <input type="checkbox" class="filters" id="cat{{ $k }}" name="category"
                      value="{{ enc($c['id']) }}">
                    <label for="cat{{ $k }}">{{ $c['name'] }}</label>
                  </div>
                @endforeach
              </div>
            </div>
            <hr>
            <!-- Sub-category -->
            <div class="">
              <label>Sub-category</label>
              <div id="sub_category" class="checkbox-group filters">
                @foreach ($sub_category as $k => $v)
                  <div>
                    <input type="checkbox" class="filters" id="sub_cat{{ $k }}" name="sub_category"
                      value="{{ enc($v['id']) }}">
                    <label for="sub_cat{{ $k }}">{{ $v['name'] }}</label>
                  </div>
                @endforeach
              </div>
            </div>
            <hr>
            <div class="">
              <label for="price">Price</label>
              <div class="">
                <div class="slider-container">
                  <div class="d-flex justify-content-between">
                    <label for="min-range">Min</label>
                    <label for="max-range">Max</label>
                  </div>
                  <input type="range" class="form-range filters" name="min_range" id="min-range"
                    min="{{ $min_price }}" max="{{ $max_price }}" step="1" value="{{ $min_price }}">
                  <input type="range" class="form-range filters" name="max_range" id="max-range"
                    min="{{ $min_price }}" max="{{ $max_price }}" step="1" value="{{ $max_price }}">
                  <div class="slider-track"></div>
                </div>
                <div class="price-values">
                  ₹<span id="min-price"></span> - ₹<span id="max-price"></span>
                </div>
              </div>
            </div>
            <hr>
          </div>
        </div>

        <div class="right_content">
          <div class="center_div">
            <div class="name_sort py-2">
              <div class="name"><a href="{{ route('home') }}">HOME</a> > <span> PRODUCTS</span></div>
              <div class="d-flex justify-content-end align-items-center">
                <div>
                  <button id='downloadPdfBtn' class="btn btn-primary mx-2 rounded-pill">Download</button>
                </div>

                <div class="d-flex sort_select align-items-center m-0" style="border: none !important;">

                  <label for="sort_by">Sort </label>:
                  <select name="sort_by" id="sort_by" class="filters sort_select m-0 p-0 border-0">
                    <option value="latest">Latest</option>
                    <option value="oldest">Oldest</option>
                    <option value="price_low_high">Low to High</option>
                    <option value="price_high_low">High to Low</option>
                  </select>
                </div>
              </div>
            </div>

            <div id="product_tabel" class="pagin_table">
              {{-- @include("product_table") --}}
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>

@endsection
@section('script')
  <script>
    const remove_cross = document.getElementById("remove_cross");
    filterBtn.addEventListener("click", function() {
      leftContent.classList.toggle("active");
    });

    remove_cross.addEventListener("click", function() {
      leftContent.classList.remove("active");
    });

    $(document).on("change click keyup", ".filters", function() {
      pagination(1, "{{ route('product_table') }}", "product_tabel");
    })
    set_input_by_url();
  </script>

  <script>
    $(document).ready(function() {
      const $minRange = $('#min-range');
      const $maxRange = $('#max-range');
      const $minPrice = $('#min-price');
      const $maxPrice = $('#max-price');
      const $sliderTrack = $('.slider-track');

      function updateSlider() {
        let minVal = parseFloat($minRange.val());
        let maxVal = parseFloat($maxRange.val());

        if (minVal > maxVal) {
          // Prevent crossover
          [minVal, maxVal] = [maxVal, minVal];
          $minRange.val(minVal);
          $maxRange.val(maxVal);
        }

        $minPrice.text(minVal.toFixed(2));
        $maxPrice.text(maxVal.toFixed(2));

        updateSliderTrack(minVal, maxVal);
      }

      function updateSliderTrack(min, max) {
        const rangeMin = parseInt($minRange.attr('min'));
        const rangeMax = parseInt($maxRange.attr('max'));

        const percentMin = ((min - rangeMin) / (rangeMax - rangeMin)) * 100;
        const percentMax = ((max - rangeMin) / (rangeMax - rangeMin)) * 100;

        $sliderTrack.css({
          left: percentMin + '%',
          width: (percentMax - percentMin) + '%'
        });
      }

      // Initial setup
      updateSlider();

      // Event listeners
      $minRange.on('input', updateSlider);
      $maxRange.on('input', updateSlider);
    });
  </script>
  <script>
    $(document).ready(function() {
      $('#resetFilters').click(function() {
        // Reset text inputs
        $('#search').val('');
        $('#weight').val('');

        // Reset checkboxes
        $('.filters[type="checkbox"]').prop('checked', false);

        // Reset select
        $('#sort_by').val('');

        // Reset range sliders and display text
        $('#min-range').val('{{ $min_price }}');
        $('#max-range').val('{{ $max_price }}');
        $('#min-price').text('{{ $min_price }}');
        $('#max-price').text('{{ $max_price }}');

        // Trigger any change handlers if required
        $('.filters').trigger('change');
        pagination(1, "{{ route('product_table') }}", "product_tabel");
      });
    });
    pagination(1, "{{ route('product_table') }}", "product_tabel");
    saveToHistory(`{{ $_GET['search'] ?? '' }}`);


    $('#downloadPdfBtn').on('click', function() {
      const query = window.location.search; // get ?category=...&min_range=... etc.

      let filters_input = $(
        `select.filters , input.filters:checked , input.filters[type=range] , input.filters[type=text]`) ?? "";
      let filters = {};
      filters_input.each(function() {
        if (filters[$(this).attr("name")] == undefined) {
          filters[$(this).attr("name")] = [];
        }
        filters[$(this).attr("name")].push($(this).val());
      });

      window.location.href = `{{ route('products.pdf') }}?filters=` + JSON.stringify(filters);

    });
  </script>

@endsection