<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();

use Bitrix\Main\Localization\Loc;
use Bitrix\Catalog\ProductTable;

/**
 * @global CMain $APPLICATION
 * @var array $arParams
 * @var array $arResult
 * @var CatalogSectionComponent $component
 * @var CBitrixComponentTemplate $this
 * @var string $templateName
 * @var string $componentPath
 *
 *  _________________________________________________________________________
 * |	Attention!
 * |	The following comments are for system use
 * |	and are required for the component to work correctly in ajax mode:
 * |	<!-- items-container -->
 * |	<!-- pagination-container -->
 * |	<!-- component-end -->
 */

$this->setFrameMode(true);

if (!empty($arResult['NAV_RESULT']))
{
    $navParams =  array(
        'NavPageCount' => $arResult['NAV_RESULT']->NavPageCount,
        'NavPageNomer' => $arResult['NAV_RESULT']->NavPageNomer,
        'NavNum' => $arResult['NAV_RESULT']->NavNum
    );
}
else
{
    $navParams = array(
        'NavPageCount' => 1,
        'NavPageNomer' => 1,
        'NavNum' => $this->randString()
    );
}

$showTopPager = false;
$showBottomPager = false;
$showLazyLoad = false;

if ($arParams['PAGE_ELEMENT_COUNT'] > 0 && $navParams['NavPageCount'] > 1)
{
    $showTopPager = $arParams['DISPLAY_TOP_PAGER'];
    $showBottomPager = $arParams['DISPLAY_BOTTOM_PAGER'];
    $showLazyLoad = $arParams['LAZY_LOAD'] === 'Y' && $navParams['NavPageNomer'] != $navParams['NavPageCount'];
}

$templateLibrary = array('popup', 'ajax', 'fx');
$currencyList = '';

if (!empty($arResult['CURRENCIES']))
{
    $templateLibrary[] = 'currency';
    $currencyList = CUtil::PhpToJSObject($arResult['CURRENCIES'], false, true, true);
}

$templateData = array(
    'TEMPLATE_THEME' => $arParams['TEMPLATE_THEME'],
    'TEMPLATE_LIBRARY' => $templateLibrary,
    'CURRENCIES' => $currencyList,
    'USE_PAGINATION_CONTAINER' => $showTopPager || $showBottomPager,
);
unset($currencyList, $templateLibrary);

$elementEdit = CIBlock::GetArrayByID($arParams['IBLOCK_ID'], 'ELEMENT_EDIT');
$elementDelete = CIBlock::GetArrayByID($arParams['IBLOCK_ID'], 'ELEMENT_DELETE');
$elementDeleteParams = array('CONFIRM' => GetMessage('CT_BCS_TPL_ELEMENT_DELETE_CONFIRM'));

$obName = 'ob'.preg_replace('/[^a-zA-Z0-9_]/', 'x', $this->GetEditAreaId($navParams['NavNum']));

if ($arParams['PAGE_ELEMENT_COUNT'] > 0 && $navParams['NavPageCount'] > 1)
{
    $showTopPager = $arParams['DISPLAY_TOP_PAGER'];
    $showBottomPager = $arParams['DISPLAY_BOTTOM_PAGER'];
    $showLazyLoad = $arParams['LAZY_LOAD'] === 'Y' && $navParams['NavPageNomer'] != $navParams['NavPageCount'];
}

$containerName = 'container-'.$navParams['NavNum'];

?>
<section class="catalog-page container section">
    <h2 class="catalog-page__title">Каталог товаров</h2>
    <div class="catalog-page__wrap">
        <aside class="catalog-page__filter">
            <div class="catalog-page__filter-wrap">
                <form action="#">
                    <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">
                            <div class="filter__item filter__item--list">
                                <a class="filter__category is-active filter__category--base" href="category.html">
                                    Все товары <span>48</span>
                                </a>
                                <a class="filter__category" href="category.html">
                                    Септики<span>30</span>
                                </a>
                                <a class="filter__category" href="category.html">
                                    Канализации<span>4</span>
                                </a>
                                <a class="filter__category" href="category.html">
                                    Станции очистки<span>4</span>
                                </a>
                                <a class="filter__category" href="category.html">
                                    ЛОС<span>10</span>
                                </a>
                            </div>

                            <div class="filter__item range js-range">
                                <div class="filter__item-name">Цена (руб.)</div>
                                <div class="range__control">
                                    <div class="range__control-item">
                                        от
                                        <input class="range__control-input js-input-from" type="number" value="1299" min="1299" max="14590">
                                    </div>
                                    <div class="range__control-item">
                                        &mdash; до
                                        <input class="range__control-input js-input-to" type="number" value="14590" min="1299" max="14590">
                                    </div>
                                </div>
                                <div class="range__sliders">
                                    <input class="range__slider js-range-from" type="range" value="1299" min="1299" max="14590">
                                    <input class="range__slider js-range-to" type="range" value="14590" min="1299" max="14590">
                                </div>
                                <div class="filter__item-list">
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="price" value="less_40000" id="less_40000">
                                        <label class="checkbox" for="less_40000">до 40 0000<span>2</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="price" value="less_100000" id="less_100000">
                                        <label class="checkbox" for="less_100000">до 100 0000<span>2</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="price" value="less_150000" id="less_150000">
                                        <label class="checkbox" for="less_150000">до 150 0000<span>12</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="price" value="discount" id="discount">
                                        <label class="checkbox" for="discount">со скидкой<span>125</span></label>
                                    </div>
                                </div>
                            </div>

                            <div class="filter__item js-filter-group">
                                <div class="filter__item-name">Почва</div>
                                <div class="filter__item-list">
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="ground" value="sand" id="ground_sand">
                                        <label class="checkbox" for="ground_sand">Песчаная<span>6</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="ground" value="silty" id="ground_silty">
                                        <label class="checkbox" for="ground_silty">Илистая<span>11</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="ground" value="stone" id="ground_stone">
                                        <label class="checkbox" for="ground_stone">Каменистая<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="ground" value="black" id="ground_black">
                                        <label class="checkbox" for="ground_black">Чернозем<span>14</span></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter__wrap filter__wrap--right">
                            <div class="filter__item js-filter-group">
                                <div class="filter__item-name">Производительность</div>
                                <div class="filter__item-list">
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand">
                                        <label class="checkbox" for="capacity_sand">Песчаная<span>6</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty">
                                        <label class="checkbox" for="capacity_silty">Илистая<span>11</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone">
                                        <label class="checkbox" for="capacity_stone">Каменистая<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black">
                                        <label class="checkbox" for="capacity_black">Чернозем<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand-1">
                                        <label class="checkbox" for="capacity_sand-1">Песчаная<span>6</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty-1">
                                        <label class="checkbox" for="capacity_silty-1">Илистая<span>11</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone-1">
                                        <label class="checkbox" for="capacity_stone-1">Каменистая<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black-1">
                                        <label class="checkbox" for="capacity_black-1">Чернозем<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand-2">
                                        <label class="checkbox" for="capacity_sand-2">Песчаная<span>6</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty-2">
                                        <label class="checkbox" for="capacity_silty-2">Илистая<span>11</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone-2">
                                        <label class="checkbox" for="capacity_stone-2">Каменистая<span>14</span></label>
                                    </div>
                                    <div class="filter__item-wrap">
                                        <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black-2">
                                        <label class="checkbox" for="capacity_black-2">Чернозем<span>14</span></label>
                                    </div>
                                    <button class="filter__more js-filter-more" type="button">Показать еще</button>
                                    <button class="filter__less js-filter-less" type="button">Скрыть часть</button>
                                </div>
                            </div>

                            <div class="filter__item">
                                <input class="visually-hidden" type="checkbox" name="with_ground_water" id="ground_water">
                                <label class="switcher" for="ground_water">Высокие грунтовые воды</label>
                            </div>
                        </div>

                        <div class="filter__item filter__item--btns">
                            <button class="button button--orange" type="button">Применить</button>
                            <button class="button button--outline" type="button">Очистить</button>
                        </div>
                    </div>
                </form>
            </div>
        </aside>
        <div class="catalog-page__sale sale js-display-list">
            <?php if (!empty($arResult['ITEMS'])) : ?>
                <div class="catalog-page__top">
                    <div class="select">
                        <div class="select__name">Сортировать</div>
                        <select name="sorting" id="sorting">
                            <option value="default">По популярности</option>
                            <option value="price_up">По возрастанию цены</option>
                            <option value="price_down">По убыванию цены</option>
                        </select>
                        <svg width="12" height="13" viewbox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2803 4.46967C10.5732 4.76256 10.5732 5.23744 10.2803 5.53033L6.53033 9.28033C6.23744 9.57322 5.76256 9.57322 5.46967 9.28033L1.71967 5.53033C1.42678 5.23744 1.42678 4.76256 1.71967 4.46967C2.01256 4.17678 2.48744 4.17678 2.78033 4.46967L6 7.68934L9.21967 4.46967C9.51256 4.17678 9.98744 4.17678 10.2803 4.46967Z" fill="#939393"></path>
                        </svg>
                    </div>

                    <button class="catalog-page__filters-btn js-show-filter" type="button">
                        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.875 16.125H3.75M20.25 16.125h-2.625M15.75 18a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75ZM7.875 7.875H3.75M20.25 7.875h-8.625M9.75 9.75a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z" stroke="#3D3D3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    </button>

                    <div class="display-method">
                        <button class="display-method__item is-active js-tile" type="button">
                            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="5.333" height="5.333" rx="1" fill="currentColor"></rect><rect y="6.667" width="5.333" height="5.333" rx="1" fill="currentColor"></rect><rect x="6.667" width="5.333" height="5.333" rx="1" fill="currentColor"></rect><rect x="6.667" y="6.667" width="5.333" height="5.333" rx="1" fill="currentColor"></rect></svg>
                        </button>
                        <button class="display-method__item js-list" type="button">
                            <svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="2.667" rx="1" fill="currentColor"></rect><rect y="4.667" width="14" height="2.667" rx="1" fill="currentColor"></rect><rect y="9.333" width="14" height="2.667" rx="1" fill="currentColor"></rect></svg>
                        </button>
                    </div>
                </div>
                <div class="sale__products" data-entity="<?= $containerName ?>" data-entity="items-row">
                <!-- items-container -->
                <?php foreach ($arResult['ITEMS'] as $item): ?>
                    <?php
                    $APPLICATION->IncludeComponent(
                        'bitrix:catalog.item',
                        '',
                        array(
                            'RESULT' => array(
                                'ITEM' => $item,
                                'AREA_ID' => $this->GetEditAreaId($item['ID']),
                                'TYPE' => 'CARD',
                            ),
                            'PARAMS' => $arParams
                        ),
                        $component,
                        array('HIDE_ICONS' => 'Y')
                    );
                    ?>
                <?php endforeach; ?>
                <!-- items-container -->
                </div>
                <div class="pagination">
                    <?php if ($showLazyLoad): ?>
                        <button class="more__btn button button--outline"
                             data-use="show-more-<?=$navParams['NavNum']?>">
                            <?=$arParams['MESS_BTN_LAZY_LOAD']?>
                        </button>
                    <?php endif; ?>
                    <?php if ($showBottomPager): ?>
                        <div class="pagination-list" data-pagination-num="<?=$navParams['NavNum']?>">
                            <!-- pagination-container -->
                            <?=$arResult['NAV_STRING']?>
                            <!-- pagination-container -->
                        </div>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                Товаров не найдено
            <?php endif; ?>
        </div>
    </div>
</section>
<?php
CUtil::InitJSCore(['fx']);
$signer = new \Bitrix\Main\Security\Sign\Signer;
$signedTemplate = $signer->sign($templateName, 'catalog.section');
$signedParams = $signer->sign(base64_encode(serialize($arResult['ORIGINAL_PARAMETERS'])), 'catalog.section');
?>
<script>
    BX.message({
        BTN_MESSAGE_BASKET_REDIRECT: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_BASKET_REDIRECT')?>',
        BASKET_URL: '<?=$arParams['BASKET_URL']?>',
        ADD_TO_BASKET_OK: '<?=GetMessageJS('ADD_TO_BASKET_OK')?>',
        TITLE_ERROR: '<?=GetMessageJS('CT_BCS_CATALOG_TITLE_ERROR')?>',
        TITLE_BASKET_PROPS: '<?=GetMessageJS('CT_BCS_CATALOG_TITLE_BASKET_PROPS')?>',
        TITLE_SUCCESSFUL: '<?=GetMessageJS('ADD_TO_BASKET_OK')?>',
        BASKET_UNKNOWN_ERROR: '<?=GetMessageJS('CT_BCS_CATALOG_BASKET_UNKNOWN_ERROR')?>',
        BTN_MESSAGE_SEND_PROPS: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_SEND_PROPS')?>',
        BTN_MESSAGE_CLOSE: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_CLOSE')?>',
        BTN_MESSAGE_CLOSE_POPUP: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_CLOSE_POPUP')?>',
        COMPARE_MESSAGE_OK: '<?=GetMessageJS('CT_BCS_CATALOG_MESS_COMPARE_OK')?>',
        COMPARE_UNKNOWN_ERROR: '<?=GetMessageJS('CT_BCS_CATALOG_MESS_COMPARE_UNKNOWN_ERROR')?>',
        COMPARE_TITLE: '<?=GetMessageJS('CT_BCS_CATALOG_MESS_COMPARE_TITLE')?>',
        PRICE_TOTAL_PREFIX: '<?=GetMessageJS('CT_BCS_CATALOG_PRICE_TOTAL_PREFIX')?>',
        RELATIVE_QUANTITY_MANY: '<?=CUtil::JSEscape($arParams['MESS_RELATIVE_QUANTITY_MANY'])?>',
        RELATIVE_QUANTITY_FEW: '<?=CUtil::JSEscape($arParams['MESS_RELATIVE_QUANTITY_FEW'])?>',
        BTN_MESSAGE_COMPARE_REDIRECT: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_COMPARE_REDIRECT')?>',
        BTN_MESSAGE_LAZY_LOAD: '<?=CUtil::JSEscape($arParams['MESS_BTN_LAZY_LOAD'])?>',
        BTN_MESSAGE_LAZY_LOAD_WAITER: '<?=GetMessageJS('CT_BCS_CATALOG_BTN_MESSAGE_LAZY_LOAD_WAITER')?>',
        SITE_ID: '<?=CUtil::JSEscape($component->getSiteId())?>'
    });
    var <?=$obName?> = new JCCatalogSectionComponent({
        siteId: '<?=CUtil::JSEscape($component->getSiteId())?>',
        componentPath: '<?=CUtil::JSEscape($componentPath)?>',
        navParams: <?=CUtil::PhpToJSObject($navParams)?>,
        deferredLoad: false,
        initiallyShowHeader: '<?=!empty($arResult['ITEM_ROWS'])?>',
        bigData: <?=CUtil::PhpToJSObject($arResult['BIG_DATA'])?>,
        lazyLoad: !!'<?=$showLazyLoad?>',
        loadOnScroll: !!'<?=($arParams['LOAD_ON_SCROLL'] === 'Y')?>',
        template: '<?=CUtil::JSEscape($signedTemplate)?>',
        ajaxId: '<?=CUtil::JSEscape($arParams['AJAX_ID'] ?? '')?>',
        parameters: '<?=CUtil::JSEscape($signedParams)?>',
        container: '<?=$containerName?>'
    });
</script>
<!-- component-end -->
