<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>
<?php $child = null ?>
<div class="edit-static-form">
	<div class="line">
		<div class="col-des-12 builder-title">
			<h2><?php echo __('Google Map Block') ?></h2>
		</div>
	</div>
	<form id="section-form" enctype="multipart/form-data" method="POST" action="<?php echo $this->getUrl('fbuilder/element/save') ?>" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}'>
		<input type="hidden" name="page_id" value="<?php echo $this->getRequest()->getParam('page_id') ?>">
		<input id="block_type" type="hidden" name="type" value="map">
		<input id="block_block_name" type="hidden" name="block_name" value="<?php echo $params['block'] ?>">
		<?php if(isset($params['id'])): ?>
			<?php 
				$child =  $this->getModel('MGS\Fbuilder\Model\Child')->load($params['id']);
				$exist = true;
				$settings = json_decode($child->getSetting(), true);
				$address = $settings['address'];
				$addressTitle = $settings['address_title'];
			?>
			<input type="hidden" name="child_id" value="<?php echo $params['id'] ?>">
		<?php else: ?>
			<?php $address = $helper->getStoreConfig('general/store_information/street_line1').' '.$helper->getStoreConfig('general/store_information/region_id').' '.$helper->getStoreConfig('general/store_information/postcode').' '.$helper->getStoreConfig('general/store_information/city').' '.$helper->getStoreConfig('general/store_information/country_id'); ?>
			<?php $address = trim($address); ?>
			<?php $addressTitle = __('Our Office') ?>
		<?php endif ?>
		
		<div class="mgs-tab data items product" data-mage-init='{"tabs":{"openedState":"active"}}'>
			<?php 
				echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
					->setExist($exist)
					->setBuilderChild($child)
					->setDisableContent(1)
					->setBuilderHelper($helper)
					->setTemplate('MGS_Fbuilder::panel/create/element/widgets/general_tab.phtml')->toHtml() ;
			?>
			
			<div class="data item title" aria-labeledby="tab-label-video-title" data-role="collapsible" id="tab-label-video">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#video" id="tab-label-video-title">
					<?php echo __('Map Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="video" data-role="content" style="display:none">

				<?php if($helper->getStoreConfig('fbuilder/social/google_api_key')==''): ?>
					<div class="form-group line">
						<div role="alert" class="alert alert-danger col-tb-12"><?php echo __('Please go to admin panel > MGS > Social [Configuration] and add <b>Google API Key</b> first.') ?></div>
					</div>
				<?php else: ?>
				

					<div class="form-group line">
						<label for="location_address" class="col-tb-3 control-label"><?php echo __('By address') ?></label>
						<div class="col-tb-2">
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['location_address']): ?> checked="checked"<?php endif ?> value="1" name="setting[location_address]" id="location_address" class="admin__actions-switch-checkbox" onclick="byAddress()">
								<label for="location_address" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						<div class="col-tb-7 address-field">
							<div class="fbuilder-search-product">
								<input type="text" data-validate="{required:true}" data-mage-init='{"fbuilderSearch":{"formSelector":"#section-form", "url":"<?php echo $this->getUrl('fbuilder/index/address') ?>", "destinationSelector":"#address_autocomplete", "destinationText":"#address_temp", "destinationId":"#address"}}' autocomplete="off" aria-autocomplete="both" aria-haspopup="false" role="combobox" class="input-text" id="address_temp" name="setting[address_temp]" value="<?php echo $address ?>"/>
								<input type="hidden" name="setting[address]" value="<?php echo $address ?>" id="address">
								<div id="address_autocomplete" class="search-autocomplete"></div>
							</div>
						</div>
					</div>
					
					<div class="form-group line">
						<label for="location" class="col-tb-3 control-label"><?php echo __('By Location (Priority)') ?></label>
						<div class="col-tb-2">
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['location']): ?> checked="checked"<?php endif ?> value="1" name="setting[location]" id="location" class="admin__actions-switch-checkbox" onclick="byLocation()">
								<label for="location" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						<div class="col-tb-7 location-field">
							<div class="line">
								<div class="col-tb-6">
									<input type="text" class="input-text" id="lat" name="setting[lat]"<?php if($exist && $settings['lat']): ?> value="<?php echo $settings['lat'] ?>"<?php endif ?> placeholder="<?php echo __('Latitude') ?>"/>
								</div>
								
								<div class="col-tb-6">
									<input type="text" class="input-text" id="long" name="setting[long]"<?php if($exist && $settings['long']): ?> value="<?php echo $settings['long'] ?>"<?php endif ?> placeholder="<?php echo __('Longitude') ?>"/>
								</div>
							</div>
						</div>
					</div>
					
					<div class="form-group line">
						<label for="location" class="col-tb-3 control-label"><?php echo __('Pin image') ?></label>
						<?php if(isset($settings['map_icon']) && ($settings['map_icon']!='')): ?>
							<div class="col-tb-2">
								<div class="image-temp" style="line-height:32px">
									<img src="<?php echo $helper->getMediaUrl() ?>mgs/fbuilder/map/<?php echo $settings['map_icon'] ?>" class="background-preview" alt="" style="width:20px; margin-right:10px; position:relative; top:3px"/>
									<label for="remove_background">
										<input type="checkbox" name="remove_pin_image" value="1" id="remove_pin_image"/> <?php echo __('Remove') ?>
									</label>
								</div>
							</div>
						<?php endif ?>
						<div class="col-tb-7">
							<input type="file" id="pin_icon" name="pin_icon">
							<input type="hidden" name="setting[map_icon]" <?php if($exist && isset($settings['map_icon'])): ?> value="<?php echo $settings['map_icon'] ?>"<?php endif ?>>
						</div>
					</div>
					
					<hr/>
					

					<div class="form-group line">
						<div class="col-tb-2">
							<label for="address_box" class="control-label"><?php echo __('Address Box') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['address_box']): ?> checked="checked"<?php endif ?> value="1" name="setting[address_box]" id="address_box" class="admin__actions-switch-checkbox" onclick="addressBox()">
								<label for="address_box" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						<div class="col-tb-10 fieldss box-field">
							<div class="line">
								<div class="col">
									<label for="box_background" class="control-label"><?php echo __('Background') ?></label><br/>
									<input type="text" class="input-text color-input" id="box_background" name="setting[box_background]"<?php if($exist && $settings['box_background']): ?> value="<?php echo $settings['box_background'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
								</div>
								<div class="col">
									<label for="box_color" class="control-label"><?php echo __('Color') ?></label><br/>
									<input type="text" class="input-text color-input" id="box_color" name="setting[box_color]"<?php if($exist && $settings['box_color']): ?> value="<?php echo $settings['box_color'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
								</div>
								
								<div class="col">
									<label for="box_width" class="control-label"><?php echo __('Width') ?></label><br/>
									<input type="text" class="input-text" id="box_width" name="setting[box_width]"<?php if($exist && $settings['box_width']): ?> value="<?php echo $settings['box_width'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
								</div>
								
								<div class="col">
									<label for="font_size" class="control-label"><?php echo __('Font size') ?></label><br/>
									<input type="text" class="input-text validate-number" id="font_size" name="setting[font_size]"<?php if($exist && $settings['font_size']): ?> value="<?php echo $settings['font_size'] ?>"<?php endif ?> onchange="changeBoxStyle()" />
								</div>
							</div>
						</div>
					</div>
					
					<div class="form-group line box-field">
						<label for="address_title" class="col-tb-1 control-label"><h4 class="no-margin" style="line-height:32px"><?php echo __('Title') ?></h4></label>
						<div class="col-tb-5">
							<input type="text" class="input-text" id="address_title" name="setting[address_title]" value="<?php echo $addressTitle ?>" onchange="changeBoxTitle()"/>
						</div>
						
						<label for="title_font_size" class="col-tb-2 control-label"><?php echo __('Font size') ?></label>
						<div class="col-tb-4">
							<input type="text" class="input-text validate-number" id="title_font_size" name="setting[title_font_size]"<?php if($exist && $settings['title_font_size']): ?> value="<?php echo $settings['title_font_size'] ?>"<?php endif ?> placeholder="<?php echo __('px') ?>" onchange="changeBoxStyle()"/>
						</div>
					</div>
					
					<div class="form-group line">
						<div class="col-tb-6">
							
							<div class="form-group line box-field">
								<label for="line_one" class="col-tb-2 control-label"><?php echo __('Line 1') ?></label>
								<div class="col-tb-10">
									<input type="text" class="input-text" id="line_one" name="setting[line_one]"<?php if($exist && $settings['line_one']): ?> value="<?php echo $settings['line_one'] ?>"<?php endif ?> onchange="addMapInfo()"/>
								</div>
							</div>
							
							<div class="form-group line box-field">
								<label for="line_two" class="col-tb-2 control-label"><?php echo __('Line 2') ?></label>
								<div class="col-tb-10">
									<input type="text" class="input-text" id="line_two" name="setting[line_two]"<?php if($exist && $settings['line_two']): ?> value="<?php echo $settings['line_two'] ?>"<?php endif ?> onchange="addMapInfo()"/>
								</div>
							</div>
							
							<div class="form-group line box-field">
								<label for="line_three" class="col-tb-2 control-label"><?php echo __('Line 3') ?></label>
								<div class="col-tb-10">
									<input type="text" class="input-text" id="line_three" name="setting[line_three]"<?php if($exist && $settings['line_three']): ?> value="<?php echo $settings['line_three'] ?>"<?php endif ?> onchange="addMapInfo()" />
								</div>
							</div>
							
							<div class="form-group line box-field">
								<label for="line_four" class="col-tb-2 control-label"><?php echo __('Line 4') ?></label>
								<div class="col-tb-10">
									<input type="text" class="input-text" id="line_four" name="setting[line_four]"<?php if($exist && $settings['line_four']): ?> value="<?php echo $settings['line_four'] ?>"<?php endif ?> onchange="addMapInfo()" />
								</div>
							</div>
							
							<div class="form-group line box-field">
								<label for="line_five" class="col-tb-2 control-label"><?php echo __('Line 5') ?></label>
								<div class="col-tb-10">
									<input type="text" class="input-text" id="line_five" name="setting[line_five]"<?php if($exist && $settings['line_five']): ?> value="<?php echo $settings['line_five'] ?>"<?php endif ?> onchange="addMapInfo()" />
								</div>
							</div>
						</div>
						<div class="col-tb-6 box-field">
							<div id="map-information-temp" class="mgs-map">
								<div class="map-info">
									<h3 class="no-margin-top" id="map-title-temp"><?php echo $addressTitle ?></h3>
									<div class="map-detail-info">
										<ul id="list-info"></ul>
									</div>
								</div>
							</div>
						</div>
						<style type="text/css" id="map-custom-css"></style>
					</div>
					
					<hr/>
					
					<div class="form-group line">
						<div class="col-tb-12"><h4 class="no-margin"><?php echo __('Map Setting') ?></h4></div>
					</div>
					
					<div class="form-group line">
						<div class="col">
							<label for="map_height" class="control-label"><?php echo __('Height') ?></label><br/>
							<input type="text" class="input-text validate-number" id="map_height" name="setting[map_height]"<?php if($exist && $settings['map_height']): ?> value="<?php echo $settings['map_height'] ?>"<?php endif ?> placeholder="px"/>
						</div>
						
						<div class="col">
							<label for="map_zoom" class="control-label"><?php echo __('Zoom level') ?></label><br/>
							<input type="text" class="input-text validate-number" id="map_zoom" name="setting[map_zoom]"<?php if($exist && $settings['map_zoom']): ?> value="<?php echo $settings['map_zoom'] ?>"<?php endif ?>/>
						</div>
						
						<div class="col">
							<label for="wheel" class="control-label"><?php echo __('Scroll wheel') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['wheel']): ?> checked="checked"<?php endif ?> value="1" name="setting[wheel]" id="wheel" class="admin__actions-switch-checkbox">
								<label for="wheel" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						<div class="col">
							<label for="navigation" class="control-label"><?php echo __('Navigation') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['navigation']): ?> checked="checked"<?php endif ?> value="1" name="setting[navigation]" id="navigation" class="admin__actions-switch-checkbox">
								<label for="navigation" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						
					</div>
					
					<div class="form-group line">
						<div class="col">
							<label for="type_control" class="control-label"><?php echo __('Type control') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['type_control']): ?> checked="checked"<?php endif ?> value="1" name="setting[type_control]" id="type_control" class="admin__actions-switch-checkbox">
								<label for="type_control" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						<div class="col">
							<label for="scale" class="control-label"><?php echo __('Scale control') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['scale']): ?> checked="checked"<?php endif ?> value="1" name="setting[scale]" id="scale" class="admin__actions-switch-checkbox">
								<label for="scale" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						<div class="col">
							<label for="draggable" class="control-label"><?php echo __('Draggable') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['draggable']): ?> checked="checked"<?php endif ?> value="1" name="setting[draggable]" id="draggable" class="admin__actions-switch-checkbox">
								<label for="draggable" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>
						
						<div class="col">
							<label for="grayscale" class="control-label"><?php echo __('Grayscale color') ?></label><br/>
							<div class="admin__actions-switch" data-role="switcher">
								<input type="checkbox"<?php if($exist && $settings['grayscale']): ?> checked="checked"<?php endif ?> value="1" name="setting[grayscale]" id="grayscale" class="admin__actions-switch-checkbox">
								<label for="grayscale" class="admin__actions-switch-label">
									<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
								</label>
							</div>
						</div>

					</div>
					
					
				<?php endif ?>
			</div>
		
			<?php if($exist): ?>
				<?php 
					echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
						->setExist($exist)
						->setBuilderChild($child)
						->setBuilderHelper($helper)
						->setTemplate('MGS_Fbuilder::panel/create/element/widgets/code_tab.phtml')->toHtml() ;
				?>
				
			<?php endif ?>
		</div>
		
		<div class="line">
			<div class="form-group">
				<div class="col-des-12 builder-action">
					<div class="buttons">
						<?php if(!$exist): ?>
							<button type="button" class="action" onclick="history.go(-1)"><span><?php echo __('Back') ?></span></button>
						<?php endif ?>
						<button type="submit" class="action primary"><span><?php echo __('Submit') ?></span></button>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

<script type="text/javascript">
	var currentAnimate = '';
	<?php if($exist): ?>
		currentAnimate = '<?php echo $settings['animation'] ?>';
	<?php endif ?>
	
	function changeAnimationClass(animate){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if(currentAnimate!=''){
					$('#animation-test').removeClass(currentAnimate);
				}
				$('#animation-test').addClass(animate);
				currentAnimate = animate;
			})(jQuery);
		});
	}
	
	require([
		'jquery',
	], function(jQuery){
		(function($) {
			$(document).ready(function(){
				byAddress();
				byLocation();
				addressBox();
				addMapInfo();
				changeBoxTitle();
				changeBoxStyle();
			});
			
			$("#address_title").keypress(function( event ){
				changeBoxTitle();
			});
			
			$("#line_one, #line_two, #line_three, #line_four, #line_five").keypress(function( event ){
				addMapInfo();
			});
		})(jQuery);
	});
	
	function byAddress(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#location_address').length){
					if($('#location_address').prop("checked") == true){
						$('.address-field').show();
					}else{
						$('.address-field').hide();
					}
				}
			})(jQuery);
		});
	}
	
	function byLocation(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#location').length){
					if($('#location').prop("checked") == true){
						$('.location-field').show();
					}else{
						$('.location-field').hide();
					}
				}
			})(jQuery);
		});
	}
	
	function addressBox(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#address_box').length){
					if($('#address_box').prop("checked") == true){
						$('.box-field').show();
					}else{
						$('.box-field').hide();
					}
				}
			})(jQuery);
		});
	}
	
	function changeBoxTitle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				title = $('#address_title').val();
				$('#map-title-temp').html(title);
			})(jQuery);
		});
	}
	
	function addMapInfo(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				infoHtml = '';
				line1 = $('#line_one').val();
				line2 = $('#line_two').val();
				line3 = $('#line_three').val();
				line4 = $('#line_four').val();
				line5 = $('#line_five').val();
				if(line1!=''){
					infoHtml += '<li>'+line1+'</li>';
				}
				if(line2!=''){
					infoHtml += '<li>'+line2+'</li>';
				}
				if(line3!=''){
					infoHtml += '<li>'+line3+'</li>';
				}
				if(line4!=''){
					infoHtml += '<li>'+line4+'</li>';
				}
				if(line5!=''){
					infoHtml += '<li>'+line5+'</li>';
				}
				
				$('#list-info').html(infoHtml);
			})(jQuery);
		});
	}
	
	function changeBoxStyle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				
				background = $('#box_background').val();
				color = $('#box_color').val();
				width = $('#box_width').val();
				size = $('#font_size').val();
				titleSize = $('#title_font_size').val();

				
				customStyle = '*{}';
				
				if(background!=''){
					customStyle += '#map-information-temp.mgs-map .map-info{background-color:'+background+'}';
				}
				
				if(color!=''){
					customStyle += '#map-information-temp.mgs-map .map-info h3, #map-information-temp.mgs-map .map-info .map-detail-info ul li{color:'+color+'}';
				}
				
				if(width!=''){
					customStyle += '#map-information-temp.mgs-map .map-info{width:'+width+'px}';
				}
				
				if(size!=''){
					customStyle += '#map-information-temp.mgs-map .map-info .map-detail-info ul li{font-size:'+size+'px}';
				}
				
				if(titleSize!=''){
					customStyle += '#map-information-temp.mgs-map .map-info h3{font-size:'+titleSize+'px}';
				}
				
				$('#map-custom-css').html(customStyle);
			})(jQuery);
		});
	}
</script>