<?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($arParams['CITY']['PROPERTIES']['OFFICES']['RELATED'] AS $office)
	{
		$content = "";
		$content .= "<p><b>".$office['NAME']."</b></p>";

		$coords = explode(",", $office['PROPERTIES']['GEO']['VALUE']);
		array_push($placemarks, [
			"coords" => $coords, 
			"content" => $content, 
		]);
	}
?>
<h2 style="margin-bottom: 24px;">Контакты в <?= $arParams['CITY']['PROPERTIES']['CASE']['VALUE']; ?></h2>
<div class="contacts_block" style="margin-bottom: 16px;">
	<div id="map"></div>
	<script src="https://api-maps.yandex.ru/2.1/?apikey=e417e630-1f5b-4b07-8c7d-cb4d22dd1841&lang=ru_RU" type="text/javascript"></script>
	<script>
		ymaps.ready(init);
		function init() 
		{
			window.map = new ymaps.Map('map', 
			{
				center: [<?= $placemarks[0]['coords'][0]; ?>, <?= $placemarks[0]['coords'][1]; ?>],
				zoom: 9,
				controls: []
			});

			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>', {
				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));
				},
				clear: function () {
					this._$element.find('.close')
					.off('click');

					this.constructor.superclass.clear.call(this);
				},
				onSublayoutSizeChange: function () {
					MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

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

					this.applyElementOffset();

					this.events.fire('shapechange');
				},
				applyElementOffset: function () {
					this._$element.css({
					left: -(this._$element[0].offsetWidth / 2),
					top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
					});
				},
				onCloseClick: function (e) {
					e.preventDefault();

					this.events.fire('userclose');
				},
				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
					]
					]));
				},
				_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; ?>
			];
			for(let i in offices)
			{
				window.map.geoObjects.add(offices[i]);
			}
		}
	</script>
	<div class="block_info_list">
		<? foreach($arParams['CITY']['PROPERTIES']['OFFICES']['RELATED'] AS $office): ?>
			<div class="block_info">
				<p class="block_title"><?= $office['NAME']; ?></p>
				<p class="i-address"><?= $office['PROPERTIES']['ADDRESS']['VALUE']; ?></p>
				<p class="i-worktime"><?= $office['PROPERTIES']['HOURS']['VALUE']; ?></p>
				<p class="i-phone"><a href="tel:<?= str_replace(" ", "", $office['PROPERTIES']['PHONE']['VALUE']); ?>"><?= $office['PROPERTIES']['PHONE']['VALUE']; ?></a></p>
			</div>
		<? endforeach; ?>
	</div>
</div>