<script>
  document.addEventListener("DOMContentLoaded", function() {
  const filterSets = [
    
    //You can add any additional meta to filter below here
    
    {
      selectId: 'select-price',
      minInputId: 'input-price .min',
      maxInputId: 'input-price .max',
      eventName: 'filter_price_change',
      defaultMin: 1000000,
      defaultMax: 16198000000
    },
    {
      selectId: 'select-building',
      minInputId: 'input-building .min',
      maxInputId: 'input-building .max',
      eventName: 'filter_building_change',
      defaultMin: 10,
      defaultMax: 2000
    },
    {
      selectId: 'select-land',
      minInputId: 'input-land .min',
      maxInputId: 'input-land .max',
      eventName: 'filter_land_change',
      defaultMin: 10,
      defaultMax: 20000
    }
  ];
  
  const applyFilterButton = document.querySelector('.filter-btn');
  const resetFilterButton = document.querySelector('#reset-btn');

  filterSets.forEach(filterSet => {
    const selectElement = document.getElementById(filterSet.selectId);
    const minInput = document.querySelector(`#${filterSet.minInputId}`);
    const maxInput = document.querySelector(`#${filterSet.maxInputId}`);

    // Ambil nilai default dari opsi placeholder
    const placeholderOption = selectElement.querySelector('option[value=""]');
    const defaultMin = parseInt(placeholderOption.getAttribute('data-min')) || filterSet.defaultMin;
    const defaultMax = parseInt(placeholderOption.getAttribute('data-max')) || filterSet.defaultMax;

    function updateInputsAndTriggerEvent() {
      const selectedOption = selectElement.options[selectElement.selectedIndex];
      const min = parseInt(selectedOption.getAttribute('data-min')) || defaultMin;
      const max = parseInt(selectedOption.getAttribute('data-max')) || defaultMax;

      minInput.setAttribute('value', min);
      maxInput.setAttribute('value', max);
      minInput.dispatchEvent(new Event('input', { bubbles: true }));
      minInput.dispatchEvent(new Event('change', { bubbles: true }));
      maxInput.dispatchEvent(new Event('input', { bubbles: true }));
      maxInput.dispatchEvent(new Event('change', { bubbles: true }));
      window.dispatchEvent(new CustomEvent(filterSet.eventName));
    }

    selectElement.addEventListener("change", updateInputsAndTriggerEvent);
    applyFilterButton.addEventListener('click', updateInputsAndTriggerEvent);

    resetFilterButton.addEventListener('click', () => {
      selectElement.value = "";
      minInput.setAttribute('value', defaultMin);
      maxInput.setAttribute('value', defaultMax);
      minInput.dispatchEvent(new Event('input', { bubbles: true }));
      minInput.dispatchEvent(new Event('change', { bubbles: true }));
      maxInput.dispatchEvent(new Event('input', { bubbles: true }));
      maxInput.dispatchEvent(new Event('change', { bubbles: true }));
      window.dispatchEvent(new CustomEvent(filterSet.eventName));
    });
  });
});

</script>