<div class="layernavigation-module">
	<div class="panel panel-default">
		<div class="layered-heading module-title3">{{ heading_title }}</div>
		<div class="layered">
			<div class="list-group">
				<div class="filter-attribute-container filter-attribute-remove-container">
					{% set is_filter = false %}
					{% for filter_group in filter_groups %}
						{% for filter in filter_group.filter %}
							{% set filter_id = filter.filter_id %}
							{% if filter.filter_id in filter_category %}
								{% set is_filter = true %}
								<div class="list-group-item filter-act-name" data-type="{{ filter_group.type }}">
									<p>{{ filter.name }}</p>
									<a class="a-filter remove-filter" href="javascript:void(0);" name="{{ filter_id }}"><span>Remove</span></a>
								</div>
							{% endif %}
						{% endfor %}
					{% endfor %}
					{% if is_filter %}
						<div class="list-group-item filter-clear-all">
							<a class="clear-filter" href="javascript:void(0);" onclick="oclayerednavigationajax.filter('{{ clear_action }}')">Clear all</a>
						</div>
					{% endif %}
				</div>
				<div class="filter-attribute-container filter-prices">
					<label>{{ text_byprice }}</label>
					<div class="list-group-item">
						<div class="filter-price">
							<div id="slider-price"></div>
							<div class="slider-values text-center">
								<span>{{ currency_symbol_left }}</span>
								<input id="price-from" disabled="disabled" class="input-price" type="text" value="{{ min_price }}" name="price-from"/>
								<span>{{ currency_symbol_right }}</span> -
								<span>{{ currency_symbol_left }}</span>
								<input id="price-to" disabled="disabled" class="input-price" type="text" value="{{ max_price }}" name="price-to"/>
								<span>{{ currency_symbol_right }}</span>
							</div>
						</div>
					</div>
				</div>
				{% for filter_group in filter_groups %}
					<div class="filter-attribute-container">
						<label data-toggle="collapse" class="collapsed" href="#{{ loop.index }}">
							{{ filter_group.name }}
						</label>
						<div id="{{ loop.index }}" class="panel-collapse collapse" role="tabpanel">
							<div class="list-group-item">
								<div data-type="{{ filter_group.type }}">
									{% for filter in filter_group.filter %}
										<a class="a-filter add-filter" href="javascript:void(0);" name="{{ filter.filter_id }}">{{ filter.name }}</a>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
		<input type="hidden" class="filter-url" value="{{ action }}"/>
		<input type="hidden" class="price-url" value="{{ action }}"/>
	</div>
</div>
<script type="text/javascript">
	var manufaturers = [];
	var options = [];
	var min_price = parseFloat('{{ min_price }}');
	var max_price = parseFloat('{{ max_price }}');
	var current_min_price = parseFloat($('#price-from').val());
	var current_max_price = parseFloat($('#price-to').val());


	function urlFilter() {
		var url = $('.filter-url').val();
		if (manufaturers.length > 0) {
			url += '&manufacturer=' + manufaturers.join(',');
		}
		if (options.length > 0) {
			url += '&option=' + options.join(',');
		}
		return url;
	}

	$('#slider-price').slider({
		range: true,
		min: min_price,
		max: max_price,
		values: [current_min_price, current_max_price],
		slide: function (event, ui) {
			$('#price-from').val(ui.values[0]);
			$('#price-to').val(ui.values[1]);
			current_min_price = ui.values[0];
			current_max_price = ui.values[1];
		},
		stop: function (event, ui) {
			oclayerednavigationajax.filter(urlFilter() + '&price=' + current_min_price + ',' + current_max_price);
		}
	});

	$(document).on("click", ".a-filter", function () {
		var id = $(this).attr('name');
		var type = $(this).parent().data('type');
		if ($(this).hasClass('add-filter') == true) {
			if (type === "manufacturer") {
				manufaturers.push(id)
			} else {
				options.push(id)
			}
		} else if ($(this).hasClass('remove-filter') == true) {
			if (type === "manufacturer") {
				manufaturers = $.grep(manufaturers, function (value) {
					return value !== id;
				});
			} else {
				options = $.grep(options, function (value) {
					return value !== id;
				});
			}
		}
		oclayerednavigationajax.filter(urlFilter());
	});

	$(document).on("click", ".clear-filter", function () {
		manufaturers = [];
		options = [];
	});


	$(document).ajaxComplete(function () {
		var current_min_price = parseFloat($('#price-from').val());
		var current_max_price = parseFloat($('#price-to').val());
		$('#slider-price').slider({
			range: true,
			min: min_price,
			max: max_price,
			values: [current_min_price, current_max_price],
			slide: function (event, ui) {
				$('#price-from').val(ui.values[0]);
				$('#price-to').val(ui.values[1]);
				current_min_price = ui.values[0];
				current_max_price = ui.values[1];
			},
			stop: function (event, ui) {
				oclayerednavigationajax.filter(urlFilter() + '&price=' + current_min_price + ',' + current_max_price);
			}
		});
	});
</script>