<div id="buscar">
  <div class="ui header">
    Buscar
  </div>
  <hr class="ui divider" />
  <form class="ui form">
    <div class="ui field">
      <label>Estado:</label>
      <input type="text" name="estado" />
    </div>
    <div class="ui field">
      <label>Tipo:</label>
      <input type="text" name="tipo" />
    </div>
    <div class="ui field">
      <label>Ubicaci&oacute;n:</label>
      <input type="text" name="ubicacion" />
    </div>
    <div class="ui field">
      <label>Precio:</label>
      <div class="ui range slider" id="precio"></div>
      <input type="hidden" name="precio" value="1.000 - 30.000" />
      <div class="price_label">
        1.000 - 30.000 UF
      </div>
    </div>
    <button class="ui fluid button">Buscar</button>
  </form>
</div>

@push('scripts')
  <script type="text/javascript">
    function changePrice(min, max) {
      $("input[name='precio']").val(min + '-' + max)
      formatter = new Intl.NumberFormat('de-DE')
      $('.price_label').html(formatter.format(min) + ' - ' + formatter.format(max) + ' UF')
    }
    var gMin = 1000
    var gMax = 30000
    $(document).ready(() => {
      changePrice(gMin, gMax)
      $('#precio').slider({
        min: gMin,
        max: gMax,
        start: gMin,
        end: gMax,
        step: 500,
        onChange: (range, min, max) => {
          changePrice(min, max)
        }
      })
    })
  </script>
@endpush
