<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

defined('_JEXEC') or die;

$input = \Joomla\CMS\Factory::getApplication()->input;
$id = $input->get('ckid', '', 'string');
$plugin = \Joomla\CMS\Plugin\PluginHelper::getPlugin('pagebuilderck', 'googlemap');
$pluginParams = new \Joomla\Registry\Registry($plugin->params);
?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_map"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_EDITION'); ?></div>
	<div class="tab menustyles ckproperty " id="tab_map">
		<div class="menustylesblocktitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP') ?></div>
		<div class="menustylesblockaccordion">
			<div class="menupanetitle">
			<?php if (! $pluginParams->get('gmapapikey', '')) { ?>
				<a href="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/administrator/index.php?option=com_plugins&view=plugins&filter_search=Page Builder CK - Google Map" target="_blank" style="color:red;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_API_KEY_EMPTY') ?></a>
			<?php } ?>
			</div>

			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_ADDRESS'); ?></div>
			<div>
				<div class="ckoption-field" style="width:auto">
					<input class="inputbox" type="text" value="" name="address" id="address" onchange="ckSetMarker()" style="width:275px;" />
				</div>
				<div style="text-align:center;">-- <?php echo \Joomla\CMS\Language\Text::_('CK_OR'); ?> --</div>
				<div style="display:flex;">
					<div style="width:50%;">
						<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_LATITUDE'); ?></div>
						<div class="ckoption-field" style="width:auto">
							<input class="inputbox" type="text" value="" name="latitude" id="latitude" onchange="$ck('#address').val('');ckSetMarker()" style="width:135px;" />
						</div>
					</div>
					<div style="width:50%;">
						<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_LONGITUDE'); ?></div>
						<div class="ckoption-field" style="width:auto">
							<input class="inputbox" type="text" value="" name="longitude" id="longitude" onchange="$ck('#address').val('');ckSetMarker()" style="width:135px;" />
						</div>
					</div>
				</div>
			</div>
			<hr />
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_SCROLL'); ?>
				</span>
				<span class="ckoption-field ckbutton-group">
					<select class="inputbox" type="list" value="" name="scroll" id="scroll" >
						<option value="false"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
						<option value="true"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
					</select>
				</span>
			</div>
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_MAPTYPE'); ?>
				</span>
				<span class="ckoption-field ckbutton-group">
					<select class="inputbox" type="list" value="" name="maptype" id="maptype" onchange="ckUpdateMapPreview()">
						<option value="google.maps.MapTypeId.ROADMAP"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_ROADMAP'); ?></option>
						<option value="google.maps.MapTypeId.SATELLITE"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_SATELLITE'); ?></option>
						<option value="google.maps.MapTypeId.HYBRID"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_HYBRID'); ?></option>
						<option value="google.maps.MapTypeId.TERRAIN"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_TERRAIN'); ?></option>
					</select>
				</span>
			</div>
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo \Joomla\CMS\Language\Text::_('CK_ZOOM'); ?>
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>magnifier.png" width="15" height="15" align="top" />
				</span>
				<span class="ckoption-field ckbutton-group">
					<input class="inputbox" type="text" name="mapzoom" id="mapzoom" value="8" onchange="ckUpdateMapPreview()" />
				</span>
			</div>

			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_DIMENSIONS'); ?></div>
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo \Joomla\CMS\Language\Text::_('CK_WIDTH'); ?>
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="15" height="15" align="top" />
				</span>
				<span class="ckoption-field ckbutton-group">
					<input class="inputbox" type="text" name="mapwidth" id="mapwidth" value="100%" onchange="ckUpdateMapPreview()" />
				</span>
			</div>
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo \Joomla\CMS\Language\Text::_('CK_HEIGHT'); ?>
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="15" height="15" align="top" />
				</span>
				<span class="ckoption-field ckbutton-group">
					<input class="inputbox" type="text" name="mapheight" id="mapheight" value="480px" onchange="ckUpdateMapPreview()" />
				</span>
			</div>
		</div>
		<div class="menustylesblocktitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_MARKER') ?></div>
		<div class="menustylesblockaccordion">
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></div>
			<div style="text-align:left;">
				<input class="inputboxfake" type="text" value="" name="markertitle" id="markertitle" size="7" style="width:90%; min-width: 200px; clear:both;" onchange="ckSetMarker()" />
			</div>
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_CONTENT'); ?></div>
			<textarea id="markercontent" data-id="markercontent" name="markercontent"></textarea>
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_SHOWON'); ?></div>
			<div style="text-align:left;">
				<select class="inputbox" type="list" value="" name="markershowon" id="markershowon" style="width:90%; min-width: 200px; clear:both;" onchange="ckSetMarker()" >
					<option value="mouseover"><?php echo \Joomla\CMS\Language\Text::_('CK_MOUSEOVER'); ?></option>
					<option value="click"><?php echo \Joomla\CMS\Language\Text::_('CK_CLICK'); ?></option>
				</select>
			</div>
			<div class="clr"></div>
		</div>
		<div class="menustylesblocktitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_SNAZZYMAPS') ?></div>
		<div class="menustylesblockaccordion">
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_SNAZZYMAPS_TITLE'); ?></div>
			<p><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GOOGLEMAP_SNAZZYMAPS_DESC'); ?></p>
			<textarea id="snazzymaps" name="snazzymaps" class="inputbox" style="width:800px;height:200px;"></textarea>
			<div class="clr"></div>
		</div>
		<div id="previewareabloc" class="tab_fullscreen" style="background:#fff;">
			<div class="ckstyle"></div>
			<div class="inner">
			<div id="<?php echo $id; ?>_preview_map" class="mapck cktype">
				<div id="mapck" style="width: 100%; height: 480px;"></div>
			</div>
			</div>
		</div>
		<div style="text-align:center;">
			<div class="ckbutton" onclick="ckUpdateMapPreview()"><?php echo \Joomla\CMS\Language\Text::_('CK_REFRESH'); ?></div>
		</div>
	</div>
	<div class="menulink" tab="tab_blocstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blocstyles">
		<?php echo $this->menustyles->createBlocStyles('bloc', 'map', '') ?>
	</div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');

	// set the marker content
	content =  focus.find('.googlemapmarkercontentck').html();
	content = ckContentToEditor(content);
	$ck('#markercontent').val(content);
	ckLoadEditorOnTheFly('markercontent');

	// set the marker title
	$ck('#markertitle').val(focus.find('.googlemapmarkertitleck').html());

	// $ck('#previewareabloc .ckstyle').html(focus.find('.ckstyle').html());
	ckFillEditionPopup(focus.attr('id'));
	ckInitializeMap();
	ckUpdateMapPreview();
	window.setTimeout(ckRefreshMap, 2000);
}

function ckBeforeSaveEditionPopup() {
	var focus = $ck('.editfocus');

	// save the marker content
	var textID = 'markercontent';
	ckSaveEditorOnTheFly(textID);
	var content = $ck('[data-id="' + textID + '"]').val();
	content = ckEditorToContent(content);
	focus.find('.googlemapmarkercontentck').html(content);

	// save the marker title
	focus.find('.googlemapmarkertitleck').html($ck('#markertitle').val());

	// focus.find('.ckstyle').html($ck('#previewareabloc .ckstyle').html());
	ckSaveEditionPopup(focus.attr('id'));
	ckCloseEditionPopup();
}

/*
 * Method automatically called in ckCloseEditionPopup() if exists (needed if you are using an editor !!)
 */
function ckBeforeCloseEditionPopup() {
	var textID = 'markercontent';
	ckRemoveEditorOnTheFly(textID);
}

// setup the map instance
var geocoder, map, marker;
var markers = [];

function ckInitializeMap() {
	geocoder = new google.maps.Geocoder();
	// var latlng = new google.maps.LatLng(48.856, 2.352);
	var latlng = {lat: 48.856, lng: 2.352};
	// var latlng = {lat: -25.363, lng: 131.044};
	var mapOptions = {
	  zoom: 8,
	  center: latlng,
	}
	map = new google.maps.Map(document.getElementById("mapck"), mapOptions);
	ckSetMarker();
}

// translate the address to the LatLong values
function ckSetMarker() {
	var address = document.getElementById("address").value;
	if (!address && !$ck('#latitude').val() && !$ck('#longitude').val() ) return;
	if ($ck('#latitude').val() && $ck('#longitude').val()) {
		var latlng = new google.maps.LatLng($ck('#latitude').val(), $ck('#longitude').val());
	}
	geoOpts = (latlng && !address) ? { 'location': latlng} : { 'address': address};
	geocoder.geocode( geoOpts, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			$ck('#latitude').val(results[0].geometry.location.lat());
			$ck('#longitude').val(results[0].geometry.location.lng());
			map.setCenter(results[0].geometry.location);
			deleteMarkers();
			var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location,
				title: $ck('#markertitle').val()
			});
			var textID = 'markercontent';
			ckSaveEditorOnTheFly(textID);
			var content = $ck('#markercontent').val();
			content = ckEditorToContent(content);

			var infowindow = new google.maps.InfoWindow({
				content: content
			  });
			  
			marker.addListener($ck('#markershowon').val(), function() {
				infowindow.open(map, marker);
			});

			markers.push(marker);
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
}

// Sets the map on all markers in the array.
function ckSetMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function ckClearMarkers() {
  ckSetMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  ckSetMapOnAll(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  ckClearMarkers();
  markers = [];
}
  
function ckUpdateMapPreview() {
	var mapzoom = $ck('#mapzoom').val() ? $ck('#mapzoom').val() : '8';
	map.setZoom(parseInt(mapzoom));
	// map.setMapTypeId($ck('#maptype').val());
	switch ($ck('#maptype').val()) {
		case 'google.maps.MapTypeId.ROADMAP' :
		default :
			map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
			break;
		case 'google.maps.MapTypeId.SATELLITE' :
			map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
			break;
		case 'google.maps.MapTypeId.HYBRID' :
			map.setMapTypeId(google.maps.MapTypeId.HYBRID);
			break;
		case 'google.maps.MapTypeId.TERRAIN' :
			map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
			break;
	}
	map.setOptions({styles: $ck('#snazzymaps').val()});
	var mapw = $ck('#mapwidth').val() ? $ck('#mapwidth').val() : '';
	var maph = $ck('#mapheight').val() ? $ck('#mapheight').val() : '';
	$ck('#previewareabloc #mapck').css('width', mapw).css('padding-bottom', maph).height('0');
	$ck('.editfocus #mapck').css('width', mapw).css('padding-bottom', maph).height('0');
	ckRefreshMap();
}

function ckRefreshMap() {
	google.maps.event.trigger(map,'resize');
}
</script>