@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>
  <div id="tt-pageContent">
      <div class="container-indent">
          <div class="container">
              <div class="row">
                  @include('frontend.filter')
                  <div class="col-md-12 col-lg-9 col-xl-9">
                      <div class="content-indent container-fluid-custom-mobile-padding-02">
                          <div class="tt-filters-options" id="js-tt-filters-options">
                              <h1 class="tt-title">
                                  {{$cat_name}}
                                  <!-- <span class="tt-title-total">(69)</span> -->
                              </h1>
                              <div class="tt-btn-toggle">
                                  <a href="javascript:void(0);">FILTER</a>
                              </div>
                              <div class="tt-sort">
                                  <select id="sort" name="sort">
                                      <option value="price-ascending">Price, low to high</option>
                                      <option value="price-descending">Price, high to low</option>
                                      <option value="title-ascending">Alphabetically, A-Z</option>
                                      <option value="title-descending">Alphabetically, Z-A</option>
                                      <option value="created-descending">Date, new to old</option>
                                      <option value="created-ascending">Date, old to new</option>
                                  </select>
                                  <!-- <select>
                                      <option value="Show">Show</option>
                                      <option value="9">9</option>
                                      <option value="16">16</option>
                                      <option value="32">32</option>
                                  </select> -->
                              </div>
                              <div class="tt-quantity">
                                  <a href="javascript:void(0);" class="tt-col-one" data-value="tt-col-one"></a>
                                  <a href="javascript:void(0);" class="tt-col-two" data-value="tt-col-two"></a>
                                  <a href="javascript:void(0);" class="tt-col-three" data-value="tt-col-three"></a>
                                  <a href="javascript:void(0);" class="tt-col-four" data-value="tt-col-four"></a>
                                  <a href="javascript:void(0);" class="tt-col-six" data-value="tt-col-six"></a>
                              </div>
                          </div>

                          <div class="tt-product-listing row" id="product-list">
                          </div>


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

  <script type="text/javascript">
      $(document).ready(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');
          var catid = $("ul#searchByCategory > li.active").attr('id');
          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 = $("ul#searchByCategory > li.active").attr('id');
          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 = $("ul#searchByCategory > li.active").attr('id');
          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 = $("ul#searchByCategory > li.active").attr('id');
          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 = $("ul#searchByCategory > li.active").attr('id');
          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 catid = $("ul#searchByCategory > li.active").attr('id');
          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-max').click(function() {
          var subcatid = $("ul#searchBysubCategory > li.active").attr('id');
          var catid = $("ul#searchByCategory > li.active").attr('id');
          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);
      });

      function filterdata(catid, subcatid, brand, minCost, maxCost, sort) {
          event.preventDefault();
          $.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) {
                  $('#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 catid = $("ul#searchByCategory > li.active").attr('id');
          var brand = $("ul#searchByBrand > li.active").attr('id');
          var minCost = $('.input-min').val();
          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