var x, i, j, l, ll, selElmnt, a, b, c;
function initializeCustomSelect() {

  x = document.getElementsByClassName("custom-select");
  l = x.length;

  for (i = 0; i < l; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];


    var onSelectFunc = x[i].getAttribute('onCustomSelect')

    ll = selElmnt.length;
    if (x[i].querySelectorAll('.select-selected').length == 0) {
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.setAttribute('onCustomSelect', onSelectFunc);
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;

        c.addEventListener("click", function (e) {
          var y, i, k, s, h, sl, yl;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          // console.log(s);
          // console.log(s);
          sl = s.length;
          h = this.parentNode.previousSibling;
          for (i = 0; i < sl; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;


              // console.log(s.options[i]);
              
              // for (var j = 0; j < s.options.length; j++) {
              //     s.options[j].removeAttribute("selected");
              // }
              // s.options[i].setAttribute("selected", "selected");
              // console.log(s.options[i]);
              // handleChange(s.selectedIndex, 'shops');
              handleChange(s.selectedIndex, s.name);



              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              yl = y.length;
              for (k = 0; k < yl; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function (e) {

        e.stopPropagation();
        if (!this.nextSibling.classList.contains('select-hide') && this.getAttribute('onCustomSelect') != 'null') {
          window[this.getAttribute('onCustomSelect')](this.parentNode.parentNode.getElementsByTagName("select")[0].value, this.parentNode);
        }
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
    }
  }

}


function closeAllSelect(elmnt) {
  /* A function that will close all select boxes in the document,
  except the current select box: */
  var x,
    y,
    i,
    xl,
    yl,
    arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i);
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");

    }
  }
}

/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener("click", closeAllSelect);
initializeCustomSelect();





// **************************************************

    // function afterUpdate1() {
    //   console.log("runned my function");
    //     var itemsPerPage = 1;
    //     var currentPage = 0;
    //     var items = document.querySelectorAll(".shops_item_data");
    //     var totalPages = Math.ceil(items.length / itemsPerPage);
    //     var nextButton = document.querySelector(".next-button");
    //     var prevButton = document.querySelector(".prev-button");
    //     var pageInput = document.querySelector(".input_page");
    //     var paginationBlock = document.querySelector("#all_pagination");

    //     // Initially hide all items except the first page
    //     for (var i = itemsPerPage; i < items.length; i++) {
    //         items[i].style.display = "none";
    //     }

    //     updatePagination();

    //     prevButton.addEventListener("click", function () {
    //         if (currentPage > 0) {
    //             currentPage--;
    //             updatePagination();
    //         }
    //     });

    //     nextButton.addEventListener("click", function () {
    //         if (currentPage < totalPages - 1) {
    //             currentPage++;
    //             updatePagination();
    //         }
    //     });

    //     function updatePagination() {
    //         var startIndex = currentPage * itemsPerPage;
    //         var endIndex = startIndex + itemsPerPage;

    //         for (var i = 0; i < items.length; i++) {
    //             if (i >= startIndex && i < endIndex) {
    //                 items[i].style.display = "block";
    //             } else {
    //                 items[i].style.display = "none";
    //             }
    //         }

    //         if(pageInput.value != null)
    //         {
    //             pageInput.value = currentPage + 1; // Update input field value
    //         }

    //     }
    // };



    // function afterUpdate2() {
    //     var itemsPerPage = 9;
    //     var currentPage = 0;
    //     var items = document.querySelectorAll("#rentals .shops_item");
    //     var totalPages = Math.ceil(items.length / itemsPerPage);
    //     var nextButton = document.querySelector("#rentals_pagination .next-button");
    //     var prevButton = document.querySelector("#rentals_pagination .prev-button");
    //     var pageInput = document.querySelector("#rentals_pagination .input_page");
    //     var paginationBlock = document.querySelector("#rentals_pagination");

    //     // Initially hide all items except the first page
    //     for (var i = itemsPerPage; i < items.length; i++) {
    //         items[i].style.display = "none";
    //     }

    //     updatePagination();

    //         prevButton.addEventListener("click", function () {
    //             if (currentPage > 0) {
    //                 currentPage--;
    //                 updatePagination();
    //             }
    //         });

    //         nextButton.addEventListener("click", function () {
    //             if (currentPage < totalPages - 1) {
    //                 currentPage++;
    //                 updatePagination();
    //             }
    //         });


    //     function updatePagination() {
    //         var startIndex = currentPage * itemsPerPage;
    //         var endIndex = startIndex + itemsPerPage;

    //         for (var i = 0; i < items.length; i++) {
    //             if (i >= startIndex && i < endIndex) {
    //                 items[i].style.display = "block";
    //             } else {
    //                 items[i].style.display = "none";
    //             }
    //         }

    //         console.log(items.length);

    //         if(pageInput.value != null)
    //         {
    //             pageInput.value = currentPage + 1; // Update input field value
    //         }

    //     }
    // };


    // function afterUpdate3() {
    //     var itemsPerPage = 9;
    //     var currentPage = 0;
    //     var items = document.querySelectorAll("#sales .shops_item");
    //     var totalPages = Math.ceil(items.length / itemsPerPage);
    //     var nextButton = document.querySelector("#sales_pagination .next-button");
    //     var prevButton = document.querySelector("#sales_pagination .prev-button");
    //     var pageInput = document.querySelector("#sales_pagination .input_page");
    //     var paginationBlock = document.querySelector("#sales_pagination");

    //     // Initially hide all items except the first page
    //     for (var i = itemsPerPage; i < items.length; i++) {
    //         items[i].style.display = "none";
    //     }

    //     updatePagination();

    //         prevButton.addEventListener("click", function () {
    //             if (currentPage > 0) {
    //                 currentPage--;
    //                 updatePagination();
    //             }
    //         });

    //         nextButton.addEventListener("click", function () {
    //             if (currentPage < totalPages - 1) {
    //                 currentPage++;
    //                 updatePagination();
    //             }
    //         });

    //     function updatePagination() {
    //         var startIndex = currentPage * itemsPerPage;
    //         var endIndex = startIndex + itemsPerPage;

    //         for (var i = 0; i < items.length; i++) {
    //             if (i >= startIndex && i < endIndex) {
    //                 items[i].style.display = "block";
    //             } else {
    //                 items[i].style.display = "none";
    //             }
    //         }

    //         if(pageInput.value != null)
    //         {
    //             pageInput.value = currentPage + 1; // Update input field value
    //         }

    //     }
    // };

    // function afterUpdate4() {
    //     // Initially hide all pagination buttons except the one for the active tab
    //     var allPagination = document.querySelector('.shops_block_all_pagination');
    //     var rentalsPagination = document.querySelector('.shops_block_rentals_pagination');
    //     var salesPagination = document.querySelector('.shops_block_sales_pagination');

    //     allPagination.style.display = "inline-flex";
    //     rentalsPagination.style.display = "none";
    //     salesPagination.style.display = "none";

    //     // Handle click events on tab links
    //     var tabLinks = document.querySelectorAll('.shops_tab-link');
    //     // console.log(tabLinks);
    //     tabLinks.forEach(function(tabLink) {
    //         tabLink.addEventListener('click', function() {
    //             // Remove 'active' class from all tab links
    //             tabLinks.forEach(function(link) {
    //                 link.classList.remove('active');
    //             });
    //             // Add 'active' class to the clicked tab link
    //             tabLink.classList.add('active');

    //             // Hide all pagination buttons
    //             allPagination.style.display = "none";
    //             rentalsPagination.style.display = "none";
    //             salesPagination.style.display = "none";

    //             // Get the data-tab attribute value of the clicked tab link
    //             var tabId = tabLink.getAttribute('data-tab');

    //             console.log(tabId + '_pagination');
    //             document.querySelector(tabId + '_pagination').style.display = "inline-flex";
    //         });
    //     });
    // };


// **********************************************************************************************


function handleChange(selectElement,type) {
  var floorID = selectElement;

  if(type == 'shops')
  {
    console.log("Selected type:", type);
    $.request('onUpdate', {
        data: { floorID: floorID },
        update: {
            'home/shop_item': '#rest-all',
            'home/pagination': '#pagination-container'
        }
    });
  }
  
  if(type == 'rentals_and_sales'){
      console.log("Selected type:", type);

      $.request('onUpdate', {
          data: { floorID: floorID },
          update: {
              'home/rentals_and_sales/rentals_and_sales': '#all',
              'home/rentals_and_sales/rentals': '#rentals',
              'home/rentals_and_sales/sales': '#sales',
              'home/rentals_and_sales/js_code': '#js_code',
          },
          complete: function(data) {
              afterPartialUpdate();
          }

      });
  }



  return false;
}

          // complete: function(data) {
          //     // console.log("hi");
          // }
          // complete: function(data) {
          //     // This code runs after the first AJAX request is completed
          //     $.request('refreshOtherPartial', {
          //         update: {
          //             'other/partial': '#otherPartial'
          //         },
          //         complete: function(data) {
          //             // This code runs after the second AJAX request is completed
          //             console.log("Other partial refreshed");
          //         }
          //     });
          // }
