<?php if (isset($this->ranges) && !empty($this->ranges)): ?>
  <?php $params = $this->searchParams($this->searchClassId); $params->activateAllFacets(); ?>
  <?php foreach ($this->ranges as $current): $escField = $this->escapeHtmlAttr($current['field']); ?>
    <?php $extraInputAttribs = ($current['type'] == 'date') ? 'maxlength="4" ' : ''; ?>
    <fieldset class="range">
      <legend><?=$this->transEsc($params->getFacetLabel($current['field']))?></legend>
      <input type="hidden" name="<?=$this->escapeHtmlAttr($current['type'])?>range[]" value="<?=$escField?>"/>
      <div class="date-fields">
        <div class="date-from">
          <input type="text" name="<?=$escField?>from" id="<?=$escField?>from" value="<?=$this->transEsc('date_from')?>" class="form-control" <?=$extraInputAttribs?>/>
        </div>
        <div class="date-to">
          <input type="text" name="<?=$escField?>to" id="<?=$escField?>to" value="<?=$this->transEsc('date_to')?>" class="form-control" <?=$extraInputAttribs?>/>
        </div>
      </div>
      <?php if ($current['type'] == 'date'): ?>
        <div class="slider-container">
          <input type="text" id="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider">
        </div>
        <?
          $this->headScript()->appendFile('vendor/bootstrap-slider.min.js');
          $this->headLink()->appendStylesheet('vendor/bootstrap-slider.min.css');
          $min = !empty($current['values'][0]) ? min($current['values'][0], 1950) : 1950;
          $future = date('Y', time()+31536000);
          $max = !empty($current['values'][1]) ? max($future, $current['values'][1]) : $future;
          $low  = !empty($current['values'][0]) ? $current['values'][0] : $min;
          $high = !empty($current['values'][1]) ? $current['values'][1] : $max;
          $min = intval($min);
          $max = intval($max);
          $low = intval($low);
          $high = intval($high);
          $init = !empty($current['values'][0]) ? 'fillTexts()' : '';
          $script = <<<JS
$(document).ready(function() {
  var fillTexts = function() {
    var v = {$escField}dateSlider.getValue();
    $('#${escField}from').val(v[0]);
    $('#${escField}to').val(v[1]);
  };
  var {$escField}dateSlider = $('#{$escField}dateSlider')
    .slider({
       'min':{$min},
       'max':{$max},
       'handle':"square",
       'tooltip':"hide",
       'value':[{$low},{$high}]
    })
    .on('change', fillTexts)
    .data('slider');
  {$init}
});

$('#{$escField}from, #{$escField}to').change(function () {
  var fromValue = Number($('#{$escField}from').val());
  var toValue = Number($('#{$escField}to').val());
  $('#{$escField}dateSlider').slider(
    'setValue',
    [
      isNaN(fromValue) || fromValue <= 0 ? {$min} : fromValue,
      isNaN(toValue) || toValue <= 0 ? {$max} : toValue
    ],
    true
  );
});
JS;
        ?>
        <?=$this->inlineScript(\Laminas\View\Helper\HeadScript::SCRIPT, $script, 'SET'); ?>
      <?php endif; ?>
    </fieldset>
  <?php endforeach; ?>
<?php endif; ?>
