<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>
<?php $child = null ?>
<?php $settings = null ?>
<div class="edit-static-form">
	
	<div class="line">
		<div class="col-des-12 builder-title">
			<h2><?php echo __('List 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="list">
		<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);
				$accordion = $settings['accordion'];
			?>
			<input type="hidden" name="child_id" value="<?php echo $params['id'] ?>">
		<?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)
					->setDisableContent(1)
					->setBuilderChild($child)
					->setBuilderHelper($helper)
					->setTemplate('MGS_Fbuilder::panel/create/element/widgets/general_tab.phtml')->toHtml() ;
			?>
			
			<div class="data item title" aria-labeledby="tab-label-content-title" data-role="collapsible" id="tab-label-content">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#content" id="tab-label-content-title">
					<?php echo __('Content Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="content" data-role="content" style="display:none">
				<div id="new-accordion-container">
					<?php if($exist && count($accordion)>0): ?>
						<?php foreach($accordion as $key=>$_accordion): ?>
							<div id="form-group-<?php echo $key ?>">
								<div class="boxed">
									<div class="form-group line">
										<div class="col-tb-11"><textarea name="setting[accordion][<?php echo $key ?>][content]" class="required-entry"><?php echo $_accordion['content'] ?></textarea></div>
										<div class="col-tb-1"><a href="#" onclick="removeAccordion('#form-group-<?php echo $key ?>'); return false"><span class="fa fa-close"></span></a></div>
									</div>
								</div>
							</div>
						<?php endforeach ?>
					<?php endif ?>
				</div>
				<div class="line" style="margin-top:15px">
					<div class="col-tb-12"><button onclick="newAccordion()" type="button" class="action"><em class="fa fa-plus-circle"></em> <?php echo __('Add new item') ?></button></div>
				</div>
			</div>
			
			
			<div class="data item title" aria-labeledby="tab-label-view-title" data-role="collapsible" id="tab-label-view">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#view" id="tab-label-view-title">
					<?php echo __('View Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="view" data-role="content" style="display:none">
				<div class="line form-group">
					<div class="col">
						<label for="list_type" class="control-label"><?php echo __('List type') ?></label><br/>
						<select name="setting[list_type]" id="list_type" onchange="setPreview()">
							<option value="ul"<?php if($exist && ($settings['list_type']=='ul')): ?> selected="selected"<?php endif ?>><?php echo __('ul'); ?></option>
							<option value="ol"<?php if($exist && ($settings['list_type']=='ol')): ?> selected="selected"<?php endif ?>><?php echo __('ol'); ?></option>
						</select>
					</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="changeContentStyle()" placeholder="px"/>
					</div>
					
					<div class="col">
						<label for="color" class="control-label"><?php echo __('Color') ?></label><br/>
						<input type="text" class="input-text color-input" id="color" name="setting[color]"<?php if($exist && $settings['color']): ?> value="<?php echo $settings['color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
					</div>
					
					<div class="col">
						<label for="margin_bottom" class="control-label"><?php echo __('Margin bottom') ?></label><br/>
						<input type="text" class="input-text validate-number" id="margin_bottom" name="setting[margin_bottom]" onchange="changeContentStyle()" placeholder="px"<?php if($exist && $settings['margin_bottom']): ?> value="<?php echo $settings['margin_bottom'] ?>"<?php endif ?>/>
					</div>
					
					<div class="col">
						<label for="fontweight" class="control-label"><?php echo __('Font bold') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['fontweight']): ?> checked="checked"<?php endif ?> value="1" name="setting[fontweight]" id="fontweight" class="admin__actions-switch-checkbox" onclick="setPreview()">
							<label for="fontweight" 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="fontitalic" class="control-label"><?php echo __('Font italic') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['fontitalic']): ?> checked="checked"<?php endif ?> value="1" name="setting[fontitalic]" id="fontitalic" class="admin__actions-switch-checkbox" onclick="setPreview()">
							<label for="fontitalic" 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>
				
				<hr/>
				
				<div class="line form-group">
					<div class="col">
						<label for="list_style_type" class="control-label"><?php echo __('List style type') ?></label><br/>
						<select name="setting[list_style_type]" id="list_style_type" onchange="changeListStyle()">
							<option value="default"<?php if($exist && ($settings['list_style_type']=='default')): ?> selected="selected"<?php endif ?>><?php echo __('Default list style'); ?></option>
							<option value="icon"<?php if($exist && ($settings['list_style_type']=='icon')): ?> selected="selected"<?php endif ?>><?php echo __('Font icon'); ?></option>
						</select>
					</div>
					
					<div class="col default-fields">
						<label for="list_style" class="control-label"><?php echo __('List style') ?></label><br/>
						<select name="setting[list_style]" id="list_style" onchange="setPreview()">
							<option value="disc"<?php if($exist && ($settings['list_style']=='disc')): ?> selected="selected"<?php endif ?>><?php echo __('Disc'); ?></option>
							<option value="armenian"<?php if($exist && ($settings['list_style']=='armenian')): ?> selected="selected"<?php endif ?>><?php echo __('Armenian'); ?></option>
							<option value="circle"<?php if($exist && ($settings['list_style']=='circle')): ?> selected="selected"<?php endif ?>><?php echo __('Circle'); ?></option>
							<option value="cjk-ideographic"<?php if($exist && ($settings['list_style']=='cjk-ideographic')): ?> selected="selected"<?php endif ?>><?php echo __('Cjk Ideographic'); ?></option>
							<option value="decimal"<?php if($exist && ($settings['list_style']=='decimal')): ?> selected="selected"<?php endif ?>><?php echo __('Decimal'); ?></option>
							<option value="decimal-leading-zero"<?php if($exist && ($settings['list_style']=='decimal-leading-zero')): ?> selected="selected"<?php endif ?>><?php echo __('Decimal Leading Zero'); ?></option>
							<option value="georgian"<?php if($exist && ($settings['list_style']=='georgian')): ?> selected="selected"<?php endif ?>><?php echo __('Georgian'); ?></option>
							<option value="hebrew"<?php if($exist && ($settings['list_style']=='hebrew')): ?> selected="selected"<?php endif ?>><?php echo __('Hebrew'); ?></option>
							<option value="hiragana"<?php if($exist && ($settings['list_style']=='hiragana')): ?> selected="selected"<?php endif ?>><?php echo __('Hiragana'); ?></option>
							<option value="hiragana-iroha"<?php if($exist && ($settings['list_style']=='hiragana-iroha')): ?> selected="selected"<?php endif ?>><?php echo __('Hiragana Iroha'); ?></option>
							<option value="katakana"<?php if($exist && ($settings['list_style']=='katakana')): ?> selected="selected"<?php endif ?>><?php echo __('Katakana'); ?></option>
							<option value="katakana-iroha"<?php if($exist && ($settings['list_style']=='katakana-iroha')): ?> selected="selected"<?php endif ?>><?php echo __('Katakana Iroha'); ?></option>
							<option value="lower-alpha"<?php if($exist && ($settings['list_style']=='lower-alpha')): ?> selected="selected"<?php endif ?>><?php echo __('Lower Alpha'); ?></option>
							<option value="lower-greek"<?php if($exist && ($settings['list_style']=='lower-greek')): ?> selected="selected"<?php endif ?>><?php echo __('Lower Greek'); ?></option>
							<option value="lower-latin"<?php if($exist && ($settings['list_style']=='lower-latin')): ?> selected="selected"<?php endif ?>><?php echo __('Lower Latin'); ?></option>
							<option value="lower-roman"<?php if($exist && ($settings['list_style']=='lower-roman')): ?> selected="selected"<?php endif ?>><?php echo __('Lower Roman'); ?></option>
							<option value="none"<?php if($exist && ($settings['list_style']=='none')): ?> selected="selected"<?php endif ?>><?php echo __('None'); ?></option>
							<option value="square"<?php if($exist && ($settings['list_style']=='square')): ?> selected="selected"<?php endif ?>><?php echo __('Square'); ?></option>
							<option value="upper-alpha"<?php if($exist && ($settings['list_style']=='upper-alpha')): ?> selected="selected"<?php endif ?>><?php echo __('Upper Alpha'); ?></option>
							<option value="upper-greek"<?php if($exist && ($settings['list_style']=='upper-greek')): ?> selected="selected"<?php endif ?>><?php echo __('Upper Greek'); ?></option>
							<option value="upper-latin"<?php if($exist && ($settings['list_style']=='upper-latin')): ?> selected="selected"<?php endif ?>><?php echo __('Upper Latin'); ?></option>
							<option value="upper-roman"<?php if($exist && ($settings['list_style']=='upper-roman')): ?> selected="selected"<?php endif ?>><?php echo __('Upper Roman'); ?></option>
							<option value="initial"<?php if($exist && ($settings['list_style']=='initial')): ?> selected="selected"<?php endif ?>><?php echo __('Initial'); ?></option>
							<option value="inherit"<?php if($exist && ($settings['list_style']=='inherit')): ?> selected="selected"<?php endif ?>><?php echo __('Inherit'); ?></option>
						</select>
					</div>
					
					<div class="col icon-fields">
						<label class="control-label"><?php echo __('Icon font class') ?></label><br/>
						<input type="text" class="input-text input-icon-choose" id="icon" name="setting[icon]"<?php if($exist && $settings['icon']): ?> value="<?php echo $settings['icon'] ?>"<?php endif ?> onchange="setPreview()"/>
					</div>
					
					<div class="col">
						<label for="icon_color" class="control-label"><?php echo __('Color') ?></label><br/>
						<input type="text" class="input-text color-input" id="icon_color" name="setting[icon_color]"<?php if($exist && $settings['icon_color']): ?> value="<?php echo $settings['icon_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
					</div>
					
					<div class="col icon-fields">
						<label for="icon_font_size" class="control-label"><?php echo __('Icon font size') ?></label><br/>
						<input type="text" class="input-text validate-number" id="icon_font_size" name="setting[icon_font_size]"<?php if($exist && $settings['icon_font_size']): ?> value="<?php echo $settings['icon_font_size'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
					</div>
					
					<div class="col icon-fields">
						<label for="icon_margin" class="control-label"><?php echo __('Margin right') ?></label><br/>
						<input type="text" class="input-text validate-number" id="icon_margin" name="setting[icon_margin]"<?php if($exist && $settings['icon_margin']): ?> value="<?php echo $settings['icon_margin'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
					</div>
				</div>
				
				<hr/>
				
				<div class="content-block list-block">
					<div class="mgs-list-block" id="temp-list">
						<ul>
							<li><span class="list-icon" style="display:none"></span><span class="text">Aliquam tincidunt cons ectetuer mauris eu risus</span></li>
							<li><span class="list-icon" style="display:none"></span><span class="text">Aliquam tincidunt cons ectetuer mauris eu risus</span></li>
							<li><span class="list-icon" style="display:none"></span><span class="text">Aliquam tincidunt cons ectetuer mauris eu risus</span></li>
							<li><span class="list-icon" style="display:none"></span><span class="text">Aliquam tincidunt cons ectetuer mauris eu risus</span></li>
							<li><span class="list-icon" style="display:none"></span><span class="text">Aliquam tincidunt cons ectetuer mauris eu risus</span></li>
						</ul>
					</div>
				</div>
				
				<style type="text/css" id="accordion-custom-css"></style>
			</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>
<?php 
	echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
		->setExist($exist)
		->setBuilderChild($child)
		->setBuilderHelper($helper)
		->setTemplate('MGS_Fbuilder::panel/create/element/widgets/font_list.phtml')->toHtml() ;
?>
<script>
	require([
		'jquery',
	], function(jQuery){
		(function($) {
			$(document).ready(function(){
				changeListStyle();
			});
		})(jQuery);
	});
	
	function newAccordion(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				randomNumber = Math.floor((Math.random() * 10000) + 1);
				html = '<div id="form-group-{{random_number}}"><div class="boxed">';
				
				html += '<div class="form-group line"><div class="col-tb-11"><textarea name="setting[accordion][{{random_number}}][content]" class="required-entry" placeholder="<?php echo __('List item content') ?>>"></textarea></div><div class="col-tb-1"><a href="#" onclick="removeAccordion(\'#form-group-{{random_number}}\'); return false"><span class="fa fa-close"></span></a></div></div>';
				html += '</div></div>';
				
				html = html.replace(/{{random_number}}/g, randomNumber);
									
				$('#new-accordion-container').append(html);
			})(jQuery);
		});
	}
	
	function removeAccordion(number){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				$(number).remove();
			})(jQuery);
		});
	}
	
	function setPreview(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				list_style_type = $('#list_style_type').val();
				list_style = $('#list_style').val();
				icon = $('#icon').val();
				textClass = 'text';
				if($('#fontweight').prop("checked") == true){
					textClass += ' font-bold';
				}
				if($('#fontitalic').prop("checked") == true){
					textClass += ' font-italic';
				}
				
				$('#temp-list .text').attr('class', textClass);
				
				$('#temp-list').attr('class', 'mgs-list-block list-style-'+list_style_type);
				
				if(list_style_type=='default'){
					$('#temp-list .list-icon').hide();
					$('#temp-list ul').attr('class', 'list-'+list_style);
				}else{
					$('#temp-list .list-icon').attr('class', 'list-icon '+icon).show();
					$('#temp-list ul').attr('class', '');
				}
			})(jQuery);
		});
		
		changeContentStyle();
	}
	
	function changeContentStyle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				
				font_size = $('#font_size').val();
				color = $('#color').val();
				margin_bottom = $('#margin_bottom').val();
				list_style_type = $('#list_style_type').val();
				icon_color = $('#icon_color').val();
				icon_font_size = $('#icon_font_size').val();
				icon_margin = $('#icon_margin').val();
				
				customStyle = '';
				
				if(font_size!=''){
					customStyle += '#temp-list.mgs-list-block li{font-size:'+font_size+'px}';
				}
				if(color!=''){
					customStyle += '#temp-list.mgs-list-block li{color:'+color+'}';
				}
				if(margin_bottom!=''){
					customStyle += '#temp-list.mgs-list-block li{margin-bottom:'+margin_bottom+'px}';
				}
				if(list_style_type=='default'){
					if(icon_color!=''){
						customStyle += '#temp-list.mgs-list-block li{color:'+icon_color+'}';
						
						if(color!=''){
							customStyle += '#temp-list.mgs-list-block li .text{color:'+color+'}';
						}else{
							customStyle += '#temp-list.mgs-list-block li .text{color:#575757}';
						}
					}
				}else{
					if(icon_color!=''){
						customStyle += '#temp-list.mgs-list-block li .list-icon{color:'+icon_color+'}';
					}
					
					if(icon_font_size!=''){
						customStyle += '#temp-list.mgs-list-block li .list-icon{font-size:'+icon_font_size+'px}';
					}
					
					if(icon_margin!=''){
						customStyle += '#temp-list.mgs-list-block li .list-icon{margin-right:'+icon_margin+'px}';
					}
				}
				
				$('#accordion-custom-css').html(customStyle);
			})(jQuery);
		});
	}
	
	function changeListStyle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				listStyleType = $('#list_style_type').val();
				if(listStyleType=='default'){
					$('.icon-fields').hide();
					$('.default-fields').show();
				}else{
					$('.icon-fields').show();
					$('.default-fields').hide();
				}
			})(jQuery);
		});
		setPreview();
	}
	
</script>