<?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);
?>
<?
	$placemarks = [];
	foreach($arResult['AGENCIES'] AS $agency)
	{
		$content = "";
		$content .= !empty($agency['PROPERTIES']['PHONE']['VALUE']) ? "<p><b>Горячая линия:</b> ".$agency['PROPERTIES']['PHONE']['VALUE']."</p>" : "";
		$content .= !empty($agency['PROPERTIES']['PHONE_CENTRAL']['VALUE']) ? "<p><b>Телефон центрального офиса:</b> ".$agency['PROPERTIES']['PHONE_CENTRAL']['VALUE']."</p>" : "";
		$content .= !empty($agency['PROPERTIES']['ADDRESS']['VALUE']) ? "<p><b>Адрес:</b> ".$agency['PROPERTIES']['ADDRESS']['VALUE']."</p>" : "";
		$content .= !empty($agency['PROPERTIES']['HOURS']['VALUE']) ? "<p><b>Часы работы:</b> ".$agency['PROPERTIES']['HOURS']['VALUE']."</p>" : "";

		$coords = explode(",", $agency['PROPERTIES']['GEO']['VALUE']);
		array_push($placemarks, [
			"coords" => $coords, 
			"content" => $content, 
		]);
	}
?>
<section data-page="about">
	<div class="container">
		<div id="contacts_top" class="title_wrapper mb35">
			<div class="left">
				<h1 class="section_title">Контакты</h1>
			</div>
			<div class="right sm-hidden">
				<div id="choose_region">
					
					<p>Показываем представительства, которые обслуживают выбранный регион</p>
					
					<div class="form_field">
						<? $APPLICATION->IncludeComponent(
							"evolution:regions.list",
							"select",
							Array(
								"ID" => "regions_select", 
								"CLASS" => "regions_select", 
							)
						); ?>
					</div>
				</div>
			</div>
		</div>
		<div class="aside_container about">
			<? $APPLICATION->IncludeComponent("bitrix:menu", "evolution.left.menu", Array(
				"ALLOW_MULTI_SELECT" => "N",	// Разрешить несколько активных пунктов одновременно
					"CHILD_MENU_TYPE" => "left",	// Тип меню для остальных уровней
					"DELAY" => "N",	// Откладывать выполнение шаблона меню
					"MAX_LEVEL" => "1",	// Уровень вложенности меню
					"MENU_CACHE_GET_VARS" => array(	// Значимые переменные запроса
						0 => "",
					),
					"MENU_CACHE_TIME" => "3600",	// Время кеширования (сек.)
					"MENU_CACHE_TYPE" => "N",	// Тип кеширования
					"MENU_CACHE_USE_GROUPS" => "Y",	// Учитывать права доступа
					"ROOT_MENU_TYPE" => "left",	// Тип меню для первого уровня
					"USE_EXT" => "Y",	// Подключать файлы с именами вида .тип_меню.menu_ext.php
				),
				false
			);?>
			<article>
				<div id="choose_region">
					<p>Показываем представительства, которые обслуживают выбранный регион</p>
					<div class="form_field">
						<? $APPLICATION->IncludeComponent(
							"evolution:regions.list",
							"select",
							Array(
								"ID" => "regions_select_mobile", 
								"CLASS" => "regions_select", 
							)
						); ?>
					</div>
				</div>
				<div class="tabs" id="officeViewToggle">
					<div class="tab active" data-view="map">На карте</div>
					<div class="tab" data-view="list">Списком</div>
				</div>
				<div id="map" class="visible"></div>
				<script src="https://api-maps.yandex.ru/2.1/?apikey=e417e630-1f5b-4b07-8c7d-cb4d22dd1841&lang=ru_RU" type="text/javascript"></script>
				<script>
					<?/*
					var offices = [
						<? foreach($placemarks AS $placemark): ?>
							<? if(!empty($arItem['PROPERTIES']['GEO_LAT']['VALUE']) && !empty($arItem['PROPERTIES']['GEO_LON']['VALUE'])): ?>
							["<?= $arItem['NAME']; ?>", <?= $arItem['PROPERTIES']['GEO_LAT']['VALUE']; ?>, <?= $arItem['PROPERTIES']['GEO_LON']['VALUE']; ?>, 0, "<?= $arItem['DETAIL_PAGE_URL']; ?>", "<?= addslashes(trim(str_replace(Array("\r","\n"),Array("",""),$arItem['PROPERTIES']['ADDRESS']['~VALUE']['TEXT']))); ?>", "<?= !empty($arItem['PROPERTIES']['PHOTO_ICON']['SRC']) ? $arItem['PROPERTIES']['PHOTO_ICON']['SRC'] : ""; ?>"],
							<? endif; ?>
						<? endforeach; ?>
					];
					*/?>

					ymaps.ready(init);
					function init() 
					{
						window.map = new ymaps.Map('map', 
						{
							center: [<?= $placemarks[0]['coords'][0]; ?>, <?= $placemarks[0]['coords'][1]; ?>],
							zoom: 9,
							controls: []
						});

						// Создание макета балуна на основе Twitter Bootstrap.
						MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
							'<div class="popover top">' +
							'<a class="close" href="#">&times;</a>' +
							'<div class="arrow"></div>' +
							'<div class="popover-inner">' +
							'$[[options.contentLayout observeSize minWidth=235 maxWidth=500 maxHeight=400]]' +
							'</div>' +
							'</div>', {
							/**
							* Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
							* @function
							* @name build
							*/
							build: function () {
								this.constructor.superclass.build.call(this);

								this._$element = $('.popover', this.getParentElement());

								this.applyElementOffset();

								this._$element.find('.close')
								.on('click', $.proxy(this.onCloseClick, this));
							},

							/**
							* Удаляет содержимое макета из DOM.
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear
							* @function
							* @name clear
							*/
							clear: function () {
								this._$element.find('.close')
								.off('click');

								this.constructor.superclass.clear.call(this);
							},

							/**
							* Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
							* @function
							* @name onSublayoutSizeChange
							*/
							onSublayoutSizeChange: function () {
								MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

								if (!this._isElement(this._$element)) {
								return;
								}

								this.applyElementOffset();

								this.events.fire('shapechange');
							},

							/**
							* Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
							* @function
							* @name applyElementOffset
							*/
							applyElementOffset: function () {
								this._$element.css({
								left: -(this._$element[0].offsetWidth / 2),
								top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
								});
							},

							/**
							* Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
							* @function
							* @name onCloseClick
							*/
							onCloseClick: function (e) {
								e.preventDefault();

								this.events.fire('userclose');
							},

							/**
							* Используется для автопозиционирования (balloonAutoPan).
							* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILayout.xml#getClientBounds
							* @function
							* @name getClientBounds
							* @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
							*/
							getShape: function () {
								if (!this._isElement(this._$element)) {
								return MyBalloonLayout.superclass.getShape.call(this);
								}

								var position = this._$element.position();

								return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
								[position.left, position.top], [
									position.left + this._$element[0].offsetWidth,
									position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
								]
								]));
							},

							/**
							* Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
							* @function
							* @private
							* @name _isElement
							* @param {jQuery} [element] Элемент.
							* @returns {Boolean} Флаг наличия.
							*/
							_isElement: function (element) {
								return element && element[0] && element.find('.arrow')[0];
							}
						});
						var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
							'<h3 class="popover-title">$[properties.balloonHeader]</h3>' +
							'<div class="popover-content">$[properties.balloonContent]</div>'
						);

						let offices = [
							<? foreach($placemarks AS $placemark): ?>
								new ymaps.Placemark([<?= $placemark['coords'][0]; ?>, <?= $placemark['coords'][1]; ?>], {
									balloonContent: '<?= $placemark['content']; ?>'
								}, {
									balloonShadow: false,
									balloonLayout: MyBalloonLayout,
									balloonContentLayout: MyBalloonContentLayout,
									balloonPanelMaxMapArea: 0,
									balloonOffset: [0, 29],
									iconLayout: 'default#imageWithContent',
									iconImageHref: '/images/pin.svg',
									iconImageSize: [43, 54],
									iconImageOffset: [-21, -54],
									iconContentOffset: [15, 15]
								}), 
							<? endforeach; ?>
						];
						/*
						var objectManager = new ymaps.ObjectManager({
							// Чтобы метки начали кластеризоваться, выставляем опцию.
							clusterize: false,
							// ObjectManager принимает те же опции, что и кластеризатор.
							gridSize: 32,
							clusterDisableClickZoom: true
						});
						*/
						for(let i in offices)
						{
							window.map.geoObjects.add(offices[i]);
						}

						/*
						objectManager.add({
						);
						*/
					}
				</script>
				<div id="offices" class="dropdown_blocks_list offices_list">
					<?
						$agencies_column_left = []; 
						$agencies_column_right = []; 

						foreach($arResult['AGENCIES'] AS $k => $ag)
						{
							if($k % 2 == 0)
							{
								array_push($agencies_column_left, $ag);
							}
							else
							{
								array_push($agencies_column_right, $ag);
							}
						}
					?>
					<div class="column column_desktop column_left">
						<? $c = 1; ?>
						<? foreach($agencies_column_left AS $agency): ?>
							<div class="region_block dropdown_block <?= $c === 1 ? "open" : ""; ?> <? foreach($agency['PROPERTIES']['REGION']['VALUE'] AS $r): ?>region_<?= $r; ?> <? endforeach; ?>">
								<div class="block_header">
									<p><?= $agency['NAME']; ?></p>
									<!--Центральный офис и Московский офис продаж-->
									<button class="block_toggle"></button>
								</div>
								<div class="block_body">
									<? if($agency['PROPERTIES']['PHONE']['VALUE'] != ""): ?>
										<p class="i-phone"><b>Горячая линия:</b> <?= $agency['PROPERTIES']['PHONE']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['PHONE_CENTRAL']['VALUE'] != ""): ?>
										<p class="i-phone-secondary"><b>Телефон центрального офиса:</b> <?= $agency['PROPERTIES']['PHONE_CENTRAL']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['ADDRESS']['VALUE'] != ""): ?>
										<p class="i-address"><b>Адрес:</b> <?= $agency['PROPERTIES']['ADDRESS']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['HOURS']['VALUE'] != ""): ?>
										<p class="i-worktime"><b>Часы работы:</b> <?= $agency['PROPERTIES']['HOURS']['VALUE']; ?></p>
									<? endif; ?>
									<a style="cursor:pointer" class="contacts_show_office_on_map" data-geo="<?= $agency['PROPERTIES']['GEO']["VALUE"]; ?>">Показать на карте</a>
								</div>
							</div>
							<? $c++; ?>
						<? endforeach; ?>
					</div>

					<div class="column column_desktop column_right">
						<? foreach($agencies_column_right AS $agency): ?>
							<div class="region_block dropdown_block <? foreach($agency['PROPERTIES']['REGION']['VALUE'] AS $r): ?>region_<?= $r; ?> <? endforeach; ?>">
								<div class="block_header">
									<p><?= $agency['NAME']; ?></p>
									<!--Центральный офис и Московский офис продаж-->
									<button class="block_toggle"></button>
								</div>
								<div class="block_body">
									<? if($agency['PROPERTIES']['PHONE']['VALUE'] != ""): ?>
										<p class="i-phone"><b>Горячая линия:</b> <?= $agency['PROPERTIES']['PHONE']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['PHONE_CENTRAL']['VALUE'] != ""): ?>
										<p class="i-phone-secondary"><b>Телефон центрального офиса:</b> <?= $agency['PROPERTIES']['PHONE_CENTRAL']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['ADDRESS']['VALUE'] != ""): ?>
										<p class="i-address"><b>Адрес:</b> <?= $agency['PROPERTIES']['ADDRESS']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['HOURS']['VALUE'] != ""): ?>
										<p class="i-worktime"><b>Часы работы:</b> <?= $agency['PROPERTIES']['HOURS']['VALUE']; ?></p>
									<? endif; ?>
									<a style="cursor:pointer" class="contacts_show_office_on_map" data-geo="<?= $agency['PROPERTIES']['GEO']["VALUE"]; ?>">Показать на карте</a>
								</div>
							</div>
						<? endforeach; ?>
					</div>

					<div class="column sm-list column_mobile column_all">
						<? $c = 1; ?>
						<? foreach($arResult['AGENCIES'] AS $agency): ?>
							<div class="region_block dropdown_block agency_item <?= $c === 1 ? "open" : ""; ?> <? foreach($agency['PROPERTIES']['REGION']['VALUE'] AS $r): ?>region_<?= $r; ?> <? endforeach; ?>" data-region="<?= $agency['PROPERTIES']['REGION']['VALUE'][0]; ?>" data-agency="<?= $agency['ID']; ?>">
								<div class="block_header">
									<p><?= $agency['NAME']; ?> [<?= $agency['ID']; ?>]</p>
									<!--Центральный офис и Московский офис продаж-->
									<button class="block_toggle"></button>
								</div>
								<div class="block_body">
									<? if($agency['PROPERTIES']['PHONE']['VALUE'] != ""): ?>
										<p class="i-phone"><b>Горячая линия:</b> <?= $agency['PROPERTIES']['PHONE']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['PHONE_CENTRAL']['VALUE'] != ""): ?>
										<p class="i-phone-secondary"><b>Телефон центрального офиса:</b> <?= $agency['PROPERTIES']['PHONE_CENTRAL']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['ADDRESS']['VALUE'] != ""): ?>
										<p class="i-address"><b>Адрес:</b> <?= $agency['PROPERTIES']['ADDRESS']['VALUE']; ?></p>
									<? endif; ?>
									<? if($agency['PROPERTIES']['HOURS']['VALUE'] != ""): ?>
										<p class="i-worktime"><b>Часы работы:</b> <?= $agency['PROPERTIES']['HOURS']['VALUE']; ?></p>
									<? endif; ?>
									<a style="cursor:pointer" class="contacts_show_office_on_map" data-geo="<?= $agency['PROPERTIES']['GEO']["VALUE"]; ?>">Показать на карте</a>
								</div>
							</div>
							<? $c++; ?>
						<? endforeach; ?>
					</div>
				</div>
			</article>
		</div>
	</div>
</section>