<?php if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */

$this->setFrameMode(true);

// Проверяем массив фильтрации
global $arrFilter;
if(!is_array($arrFilter)) {
    $arrFilter = array();
}
?>

<form name="<?echo $arResult["FILTER_NAME"]."_form"?>" action="<?echo $arResult["FORM_ACTION"]?>" method="get" class="smartfilter">
    <?php foreach($arResult["HIDDEN"] as $arItem):?>
        <input type="hidden" name="<?echo $arItem["CONTROL_NAME"]?>" id="<?echo $arItem["CONTROL_ID"]?>" value="<?echo $arItem["HTML_VALUE"]?>" />
    <?php endforeach;?>
    
    <div class="filter">
        <div class="filter__top">
            <h3 class="filter__title">Фильтры</h3>
            <button class="filter__top-btn button button--green button--outline js-close-filter" type="button">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 6L14.4853 14.4853M6 14.4853L14.4853 6.00001" stroke="#3D3D3D" stroke-width="1.67" stroke-linecap="round"></path>
                </svg>
            </button>
        </div>

        <div class="filter__wrap filter__wrap--left">
            <?php if(!empty($arResult["ITEMS"])):?>
                <?php foreach($arResult["ITEMS"] as $key=>$arItem):?>
                    <?php if(empty($arItem["VALUES"]) || isset($arItem["PRICE"])) continue;?>

                    <div class="filter__item js-filter-group">
                        <div class="filter__item-name"><?=$arItem["NAME"]?></div>
                        <div class="filter__item-list">
                            <?php foreach($arItem["VALUES"] as $val => $ar):?>
                                <div class="filter__item-wrap">
                                    <input
                                        class="visually-hidden"
                                        type="checkbox"
                                        value="<?=$ar["HTML_VALUE"]?>"
                                        name="<?=$ar["CONTROL_NAME"]?>"
                                        id="<?=$ar["CONTROL_ID"]?>"
                                        <?=$ar["CHECKED"]? 'checked="checked"': ''?>
                                        <?=$ar["DISABLED"]? 'disabled': ''?>
                                        onclick="this.form.submit();"
                                    >
                                    <label class="checkbox" for="<?=$ar["CONTROL_ID"]?>">
                                        <?=$ar["VALUE"]?>
                                        <?php if($arParams["DISPLAY_ELEMENT_COUNT"] !== "N" && isset($ar["ELEMENT_COUNT"])):?>
                                            <span><?=$ar["ELEMENT_COUNT"]?></span>
                                        <?php endif;?>
                                    </label>
                                </div>
                            <?php endforeach;?>
                        </div>
                    </div>
                <?php endforeach;?>

                <?php foreach($arResult["ITEMS"] as $key=>$arItem):?>
                    <?php if(!isset($arItem["PRICE"])) continue;?>

                    <div class="filter__item range js-range">
                        <div class="filter__item-name"><?=$arItem["NAME"]?></div>
                        <div class="range__control">
                            <div class="range__control-item">
                                от
                                <input
                                    class="range__control-input js-input-from"
                                    type="number"
                                    name="<?=$arItem["VALUES"]["MIN"]["CONTROL_NAME"]?>"
                                    id="<?=$arItem["VALUES"]["MIN"]["CONTROL_ID"]?>"
                                    value="<?=$arItem["VALUES"]["MIN"]["HTML_VALUE"]?>"
                                    size="5"
                                    min="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>"
                                    max="<?=$arItem["VALUES"]["MAX"]["VALUE"]?>"
                                    onchange="this.form.submit();"
                                />
                            </div>
                            <div class="range__control-item">
                                &mdash; до
                                <input
                                    class="range__control-input js-input-to"
                                    type="number"
                                    name="<?=$arItem["VALUES"]["MAX"]["CONTROL_NAME"]?>"
                                    id="<?=$arItem["VALUES"]["MAX"]["CONTROL_ID"]?>"
                                    value="<?=$arItem["VALUES"]["MAX"]["HTML_VALUE"]?>"
                                    size="5"
                                    min="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>"
                                    max="<?=$arItem["VALUES"]["MAX"]["VALUE"]?>"
                                    onchange="this.form.submit();"
                                />
                            </div>
                        </div>
                        <div class="range__sliders">
                            <input
                                class="range__slider js-range-from"
                                type="range"
                                min="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>"
                                max="<?=$arItem["VALUES"]["MAX"]["VALUE"]?>"
                                value="<?=$arItem["VALUES"]["MIN"]["HTML_VALUE"] ?: $arItem["VALUES"]["MIN"]["VALUE"]?>"
                                onchange="this.form.submit();"
                            />
                            <input
                                class="range__slider js-range-to"
                                type="range"
                                min="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>"
                                max="<?=$arItem["VALUES"]["MAX"]["VALUE"]?>"
                                value="<?=$arItem["VALUES"]["MAX"]["HTML_VALUE"] ?: $arItem["VALUES"]["MAX"]["VALUE"]?>"
                                onchange="this.form.submit();"
                            />
                        </div>
                    </div>
                <?php endforeach;?>
            <?php endif;?>
        </div>

        <div class="filter__item filter__item--btns">
            <input type="hidden" name="set_filter" value="Y">
            <button class="button button--orange" type="submit">Применить</button>
            <a class="button button--outline" href="<?=$arResult["SEF_DEL_FILTER_URL"]?>">Очистить</a>
        </div>
    </div>
</form>

<script>
    BX.ready(function(){
        var rangeSliders = document.querySelectorAll('.js-range');
        rangeSliders.forEach(function(rangeSlider) {
            var inputFrom = rangeSlider.querySelector('.js-input-from');
            var inputTo = rangeSlider.querySelector('.js-input-to');
            var rangeFrom = rangeSlider.querySelector('.js-range-from');
            var rangeTo = rangeSlider.querySelector('.js-range-to');

            // Обработчики для input number
            inputFrom.addEventListener('input', function() {
                rangeFrom.value = this.value;
            });

            inputTo.addEventListener('input', function() {
                rangeTo.value = this.value;
            });

            // Обработчики для range slider
            rangeFrom.addEventListener('input', function() {
                inputFrom.value = this.value;
            });

            rangeTo.addEventListener('input', function() {
                inputTo.value = this.value;
            });
        });
    });
</script> 