@extends('frontend.layout.template')
  @section('content')
  <style>
      .tt-list-row li.active a {
          background: #2b3990;
          color: #ffffff;
          border-radius: 5px;
          padding: 6px 0px 6px 3px;
          font-weight: 600;
      }

      ::selection {
          color: #fff;
          background: #17a2b8;
      }

      .wrapper {
          width: 400px;
          background: #fff;
          border-radius: 10px;
          padding: 20px 25px 40px;
          box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
      }

      header h2 {
          font-size: 24px;
          font-weight: 600;
      }

      header p {
          margin-top: 5px;
          font-size: 16px;
      }

      .price-input {
          width: 100%;
          display: flex;
          margin: 30px 0 35px;
      }

      .price-input .field {
          display: flex;
          width: 100%;
          height: 45px;
          align-items: center;
      }

      .field input {
          width: 100%;
          height: 100%;
          outline: none;
          font-size: 14px;
          margin-left: 12px;
          border-radius: 5px;
          text-align: center;
          border: 1px solid #999;
          -moz-appearance: textfield;
      }

      input[type="number"]::-webkit-outer-spin-button,
      input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
      }

      .price-input .separator {
          width: 130px;
          display: flex;
          font-size: 19px;
          align-items: center;
          justify-content: center;
      }

      .slider {
          height: 5px;
          position: relative;
          background: #ddd;
          border-radius: 5px;
      }

      .slider .progress {
          height: 100%;
          left: 25%;
          right: 25%;
          position: absolute;
          border-radius: 5px;
          background: #17a2b8;
      }

      .range-input {
          position: relative;
      }

      .range-input input {
          position: absolute;
          width: 100%;
          height: 5px;
          top: -5px;
          background: none;
          pointer-events: none;
          -webkit-appearance: none;
          -moz-appearance: none;
      }

      input[type="range"]::-webkit-slider-thumb {
          height: 17px;
          width: 17px;
          border-radius: 50%;
          background: #17a2b8;
          pointer-events: auto;
          -webkit-appearance: none;
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
      }

      input[type="range"]::-moz-range-thumb {
          height: 17px;
          width: 17px;
          border: none;
          border-radius: 50%;
          background: #17a2b8;
          pointer-events: auto;
          -moz-appearance: none;
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
      }

      /* Support */
      .support-box {
          top: 2rem;
          position: relative;
          bottom: 0;
          text-align: center;
          display: block;
      }

      .b-btn {
          color: white;
          text-decoration: none;
          font-weight: bold;
      }

      .b-btn.paypal i {
          color: blue;
      }

      .b-btn:hover {
          text-decoration: none;
          font-weight: bold;
      }

      .b-btn i {
          font-size: 20px;
          color: yellow;
          margin-top: 2rem;
      }
  </style>
  @include('frontend.master-page')
  {{ $subcat_id}}
  <script type="text/javascript">
      //   $(document).ready(function() {
      //       $('#subsubcategory').hide();
      //       var subcatid = ;
      //       var subsubcatid = ;
      //       var catid = ;
      //       alert(catid);
      //       var brand = $("ul#searchByBrand > li.active").attr('id');
      //       var minCost = $('.input-min').val();
      //       var maxCost = $('.input-max').val();
      //       var sort = $('#sort').val();

      //       filterdata(catid, subcatid, brand, minCost, maxCost, sort);

      //   });
      $('#searchBysubCategory').find('li').click(function(event) {
          $("ul#searchBysubCategory > li.active").removeClass('active')
          // var subcatid = $("ul#searchBysubCategory > li.active").attr('id');
          var subcatid = $(this).attr('id');
          $(this).addClass('active');

          var catid = ;
          var brand = $("ul#searchByBrand > li.active").attr('id');
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();

          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });



      $('#searchByBrand').find('li').click(function(event) {

          $("ul#searchByBrand > li.active").removeClass('active')
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');
          $(this).addClass('active');

          var catid = ;
          var brand = $(this).attr('id');
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });

      $('.input-min').keyup(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');

          var catid = ;
          var brand = $("ul#searchByBrand > li.active").attr('id');
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });
      $('.input-max').keyup(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');

          var catid = ;
          var brand = $("ul#searchByBrand > li.active").attr('id');
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });
      $('.range-min').click(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');

          var brand = $("ul#searchByBrand > li.active").attr('id');
          var catid = ;
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });
      $('.range-max').click(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');

          var brand = $("ul#searchByBrand > li.active").attr('id');
          var catid = ;
          var minCost = $('.input-min').val();
          var maxCost = $('.input-max').val();
          var sort = $('#sort').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
      });

      function filterdata(catid, subcatid, brand, minCost, maxCost, sort) {
          event.preventDefault();
          alert("hi");
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });

          $.ajax({
              type: 'GET',
              data: {
                  minCost: minCost,
                  maxCost: maxCost,
                  brand: brand,
                  cat: catid,
                  subcat: subcatid,
                  sortBy: sort
              },
              url: "{{ route('filter-products') }}",
              success: function(data) {
                  alert(data);
                  $('#product-list').empty();
                  // $("#overlay").fadeOut(300);
                  $('#product-list').html(data);
              }
          });

      }

      $('select[name="sort"]').on('change', function() {
          var sort = $(this).val();
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');

          var brand = $("ul#searchByBrand > li.active").attr('id');
          var minCost = $('.input-min').val();
          var catid = ;
          var maxCost = $('.input-max').val();
          filterdata(catid, subcatid, brand, minCost, maxCost, sort);
          // if (catId) {
          // $.ajax({
          // url: "{{ route('admin.load-sub-category') }}",
          // data: {

          // 'id': catId
          // },
          // type: "GET",
          // // dataType: "json",
          // success: function(data) {
          // if (data != '') {
          // $("#subcategory").css("display", "block");
          // $("#subsubcategory").css("display", "none");
          // $('select[name="subcategory"]').empty();
          // $('select[name="subcategory"]').append('<option value=""> --select subcategory-- </option>');
          // $.each(data, function(key, value) {
          // // alert(value.name);
          // $('select[name="subcategory"]').append('<option value=" ' + value.id + '">' + value.name + '</option>');
          // })
          // } else {
          // $("#subcategory").css("display", "none");
          // $("#subsubcategory").css("display", "none");
          // }
          // }

          // })
          // } else {
          // $('select[name="subcategory"]').empty();
          // }
      });

      const rangeInput = document.querySelectorAll(".range-input input"),
          priceInput = document.querySelectorAll(".price-input input"),
          range = document.querySelector(".slider .progress");
      let priceGap = 1000;

      priceInput.forEach((input) => {
          input.addEventListener("input", (e) => {
              let minPrice = parseInt(priceInput[0].value),
                  maxPrice = parseInt(priceInput[1].value);

              if (maxPrice - minPrice >= priceGap && maxPrice <= rangeInput[1].max) {
                  if (e.target.className === "input-min") {
                      rangeInput[0].value = minPrice;
                      range.style.left = (minPrice / rangeInput[0].max) * 100 + "%";
                  } else {
                      rangeInput[1].value = maxPrice;
                      range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
                  }
              }
          });
      });
      rangeInput.forEach((input) => {
          input.addEventListener("input", (e) => {
              let minVal = parseInt(rangeInput[0].value),
                  maxVal = parseInt(rangeInput[1].value);

              if (maxVal - minVal < priceGap) {
                  if (e.target.className === "range-min") {
                      rangeInput[0].value = maxVal - priceGap;
                  } else {
                      rangeInput[1].value = minVal + priceGap;
                  }
              } else {
                  priceInput[0].value = minVal;
                  priceInput[1].value = maxVal;
                  range.style.left = (minVal / rangeInput[0].max) * 100 + "%";
                  range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
              }
          });
      });
  </script>
  @endsection