<?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);

function render_select($code, $title)
{
return <<<HTML
	<div class="form_field">
		<select class="filter_$code catalog_filter_select">
			<option value="" disabled selected>$title</option>
		</select>
	</div>
HTML;
}

function render_years_from()
{
return <<<HTML
	<div class="form_field">
		<select class="filter_years catalog_filter_select">
			<option value="" disabled selected>Год, от</option>
		</select>
	</div>
HTML;
}

function render_engine_volume_from()
{
return <<<HTML
	<div class="form_field">
		<select class="filter_engine_volume_from catalog_filter_select">
			<option value="" disabled selected>Объем, от</option>
			<? $i = 100; ?>
			<? while($i < 7100): ?>
				<option value="<?= $i; ?>">От <?= is_float($i / 1000) ? $i / 1000 : ($i / 1000).".0"; ?> л.</option>
				<? $i = $i + 100; ?>
			<? endwhile; ?>
		</select>
	</div>
HTML;
}

function render_engine_volume_to()
{
return <<<HTML
	<div class="form_field">
		<select class="filter_engine_volume_to catalog_filter_select">
			<option value="" disabled selected>Объем, до</option>
			<? $i = 100; ?>
			<? while($i < 7100): ?>
				<option value="<?= $i; ?>">До <?= is_float($i / 1000) ? $i / 1000 : ($i / 1000).".0"; ?> л.</option>
				<? $i = $i + 100; ?>
			<? endwhile; ?>
		</select>
	</div>
HTML;
}

?>
<script>
	$(function()
	{
		formCatalogFilter("<?= $arParams['PATH']; ?>", "<?= $arParams['PROGRAM']; ?>", <?= CUtil::PhpToJSObject($arResult['SELECTED']); ?>, <?= $arParams['USED'] ? "true" : "false"; ?>);
		<? if($arResult['SCROLL']): ?>
			$('html, body').animate({
				scrollTop: $("#catalog").offset().top - 100
			}, 200);
		<? endif; ?>
	});
</script>
<style type="text/css">
	@keyframes catalog_filter_spinner_animation {
		0% { transform: translate(-50%,-50%) rotate(0deg); }
		100% { transform: translate(-50%,-50%) rotate(360deg); }
	}
	.catalog_filter_spinner_animation div {
		position: absolute;
		width: 65px;
		height: 65px;
		border: 5px solid #ffffff;
		border-top-color: transparent;
		border-radius: 50%;
	}
	.catalog_filter_spinner_animation div {
		animation: catalog_filter_spinner_animation 1s linear infinite;
		top: 50px;
		left: 50px
	}
	.catalog_filter_spinner {
		width: 28px;
		height: 28px;
		display: inline-block;
		overflow: hidden;
		background: none;
		position: absolute;
	}
	.catalog_filter_spinner_animation {
		width: 100%;
		height: 100%;
		position: relative;
		transform: translateZ(0) scale(0.28);
		backface-visibility: hidden;
		transform-origin: 0 0; /* see note above */
	}
	.catalog_filter_spinner_animation div { box-sizing: content-box; }
</style>
<form method="GET" action="/catalog/" id="catalog_filter_form">
	<div class="catalog_filter_new" style="display: <?= !$arParams['USED'] ? "block" : "none"; ?>">
		<div class="filter_body">
			<div class="filter_column">
				<?= render_select("brands", "Марка"); ?>
				<div class="fieldgroup">
					<?= render_select("bodies", "Кузов"); ?>
					<?= render_select("gears", "Коробка"); ?>
				</div>
			</div>
			<div class="filter_column">
				<?= render_select("models", "Модель"); ?>
				<div class="fieldgroup">
					<?= render_select("engine_fuels", "Двигатель"); ?>
					<?= render_select("drives", "Привод"); ?>
				</div>
			</div>
			<div class="filter_column">
				<?= render_select("modifications", "Модификация"); ?>
				<div class="fieldgroup">
					<?= render_engine_volume_from(); ?>
					<?= render_engine_volume_to(); ?>
				</div>
			</div>
		</div>
	</div>
	<div class="catalog_filter_used" style="display: <?= !$arParams['USED'] ? "none" : "block"; ?>">
		<div class="filter_used_desktop">
			<div class="filter_body static"> 
				<div class="fieldgroup" data-desktop-order="1" data-tablet-order="1" data-sm-order="1">
					<?= render_select("vehicle_type", "Тип"); ?>
					<?= render_select("vehicle_subtype", "Уточнить тип"); ?>
				</div>
				<div data-desktop-order="2" data-tablet-order="3" data-sm-order="2">
					<?= render_select("brands_used", "Марка"); ?>
				</div>
				<div data-desktop-order="3" data-tablet-order="5" data-sm-order="3">
					<?= render_select("models_used", "Модель"); ?>
				</div>
				<div data-desktop-order="4" data-tablet-order="2" data-sm-order="4">
					<?= render_select("city", "Город"); ?>
				</div>
				<div class="fieldgroup" data-desktop-order="5" data-tablet-order="4" data-sm-order="5"> <!-- убрать отступ на мобилках класс no_space -->
					<?= render_select("year_from", "Год, от"); ?>
					<?= render_select("year_to", "Год, до"); ?>
				</div>
				<div class="fieldgroup" data-desktop-order="6" data-tablet-order="6" data-sm-order="6">
					<?= render_select("mileage_from", "Пробег, от"); ?>
					<?= render_select("mileage_to", "Пробег, до"); ?>
				</div>
			</div>
		</div> 
	</div>
	<?
		/*
			<div class="fieldgroup">
				<div class="form_field">
					<input type="number" id="engine_power_from" placeholder="Мощность л.с. от">
				</div>
				<div class="form_field">
					<input type="number" id="engine_power_to" placeholder="Мощность л.с. до">
				</div>
			</div>
		*/
	?>
	
	<div class="filter_header">
		<div class="tabs">
			<? if($arParams['SWITCH']): ?>
				<div class="tab active" data-type="new">Новые</div>
				<div class="tab" data-type="used">С пробегом</div>
				<?/*
					<div class="tab">Все</div>
				*/?>
			<? endif; ?>
		</div>
		<div class="button_group">
		<button class="button button-transparent catalog_filter_reset_button">Очистить фильтр</button>
			<button class="button button-blue catalog_filter_search_button">
				<div class="catalog_filter_spinner">
					<div class="catalog_filter_spinner_animation">
						<div></div>
					</div>
				</div>
				<span class="catalog_filter_search_button_counter" style="min-width: 200px;"></span>
			</button>
		</div>
	</div>
</form>