<?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 __('Progress Circle 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="progress_circle">
		<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);
			?>
			<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 class="line form-group">
					<div class="col-tb-12"><h4 class="no-margin"><?php echo __('Title') ?></h4></div>
					<div class="col">
						<label class="control-label" for="subtitle">&nbsp;</label><br/>
						<input type="text" class="input-text" id="subtitle" name="setting[subtitle]"<?php if($exist && $settings['subtitle']): ?> value="<?php echo $settings['subtitle'] ?>"<?php endif ?> onchange="setPreview()"/>
					</div>
					
					<div class="col">
						<label class="control-label" for="title_font_size"><?php echo __('Font size') ?></label><br/>
						<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 ?> onchange="changeContentStyle()" placeholder="px"/>
					</div>
					
					<div class="col">
						<label class="control-label" for="title_color"><?php echo __('Color') ?></label><br/>
						<input type="text" class="input-text color-input" id="title_color" name="setting[title_color]"<?php if($exist && $settings['title_color']): ?> value="<?php echo $settings['title_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
					</div>
					
					<div class="col">
						<label for="title_fontweight" class="control-label"><?php echo __('Font weight') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['title_fontweight']): ?> checked="checked"<?php endif ?> value="1" name="setting[title_fontweight]" id="title_fontweight" class="admin__actions-switch-checkbox" onclick="changeContentStyle()">
							<label for="title_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>
				
				<hr/>
				
				<div class="line form-group">
					<div class="col-tb-12"><h4 class="no-margin"><?php echo __('Percent') ?></h4></div>
					<div class="col">
						<label class="control-label" for="percent"><?php echo __('Percent value') ?></label><br/>
						<input type="text" class="input-text validate-number required-entry" id="percent" name="setting[percent]"<?php if($exist && $settings['percent']): ?> value="<?php echo $settings['percent'] ?>"<?php endif ?> onchange="setPreview()"/>
					</div>
					
					<div class="col">
						<label class="control-label" for="percent_font_size"><?php echo __('Font size') ?></label><br/>
						<input type="text" class="input-text validate-number" id="percent_font_size" name="setting[percent_font_size]"<?php if($exist && $settings['percent_font_size']): ?> value="<?php echo $settings['percent_font_size'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
					</div>
					
					<div class="col">
						<label class="control-label" for="percent_color"><?php echo __('Color') ?></label><br/>
						<input type="text" class="input-text color-input" id="percent_color" name="setting[percent_color]"<?php if($exist && $settings['percent_color']): ?> value="<?php echo $settings['percent_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
					</div>
					
					<div class="col">
						<label for="percent_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['percent_fontweight']): ?> checked="checked"<?php endif ?> value="1" name="setting[percent_fontweight]" id="percent_fontweight" class="admin__actions-switch-checkbox" onclick="changeContentStyle()">
							<label for="percent_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>
				<hr/>
				
				
				
				<div class="line form-group">
					<div class="col-tb-6" style="border-right: 1px solid #ccc;">

						
						<div class="line form-group fields">
							<h4 class="no-margin-top col-tb-12"><?php echo __('Progress') ?></h4>
							
							<div class="col">
								<label for="circle_type" class="control-label"><?php echo __('Type') ?></label><br/>
								<select name="setting[circle_type]" id="circle_type" onchange="changeProgressType()">
									<option value="circle"<?php if($exist && ($settings['circle_type']=='circle')): ?> selected="selected"<?php endif ?>><?php echo __('Circle'); ?></option>
									<option value="pie"<?php if($exist && ($settings['circle_type']=='pie')): ?> selected="selected"<?php endif ?>><?php echo __('Pie'); ?></option>
								</select>
							</div>
							
							<div class="col">
								<label for="circle_width" class="control-label"><?php echo __('Width') ?></label><br/>
								<input type="text" class="input-text validate-number" id="circle_width" name="setting[circle_width]"<?php if($exist && $settings['circle_width']): ?> value="<?php echo $settings['circle_width'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
							</div>
							
							<div class="col type-circle">
								<label for="show_icon" class="control-label"><?php echo __('Show Icon') ?></label><br/>
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if($exist && $settings['show_icon']): ?> checked="checked"<?php endif ?> value="1" name="setting[show_icon]" id="show_icon" class="admin__actions-switch-checkbox" onclick="setIconFields()">
									<label for="show_icon" 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="line form-group icon-fields">
							<div class="col">
								<label class="control-label"><?php echo __('Icon font class') ?></label><br/>
								<input type="text" class="input-text input-icon-choose required-entry" id="icon" name="setting[icon]"<?php if($exist && $settings['icon']): ?> value="<?php echo $settings['icon'] ?>"<?php endif ?> onchange="setPreview()"/>
							</div>
							
							<div class="col">
								<label class="control-label" for="icon_color"><?php echo __('Icon 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">
								<label class="control-label" for="icon_font_size"><?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>
						
						<div class="line form-group type-circle">
							<div class="col">
								<label for="progress_width" class="control-label"><?php echo __('Progress width') ?></label><br/>
								<input type="text" class="input-text validate-number" id="progress_width" name="setting[progress_width]"<?php if($exist && $settings['progress_width']): ?> value="<?php echo $settings['progress_width'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
							</div>
							
							<div class="col">
								<label for="middle_background" class="control-label"><?php echo __('Middle background') ?></label><br/>
								<input type="text" class="input-text color-input" id="middle_background" name="setting[middle_background]"<?php if($exist && $settings['middle_background']): ?> value="<?php echo $settings['middle_background'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
						</div>
						
						<div class="line form-group fields">
							<div class="col">
								<label for="bar_background" class="control-label"><?php echo __('Default background') ?></label><br/>
								<input type="text" class="input-text color-input" id="bar_background" name="setting[bar_background]"<?php if($exist && $settings['bar_background']): ?> value="<?php echo $settings['bar_background'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
							
							<div class="col">
								<label for="progress_background" class="control-label"><?php echo __('Progress background') ?></label><br/>
								<input type="text" class="input-text color-input" id="progress_background" name="setting[progress_background]"<?php if($exist && $settings['progress_background']): ?> value="<?php echo $settings['progress_background'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
						</div>
						
						
					</div>
					<div class="col-tb-6">
						<div class="mgs-circle-pie-progress" id="circle_progress_sample" style="display:none">
							<div class="mgs-progress-circle" data-progress="0">
								<div class="mgs-circle">
									<div class="full mgs-progress-circle__slice">
										<div class="mgs-progress-circle__fill"></div>
									</div>
									<div class="mgs-progress-circle__slice">
										<div class="mgs-progress-circle__fill"></div>
										<div class="mgs-progress-circle__fill mgs-progress-circle__bar"></div>
									</div>
								</div>
								<div class="mgs-progress-circle__overlay">
									<span class="fa fa-heart"></span>
								</div>
							</div>
							<div class="progress-info"><h4>Curabitur ipsum</h4></div>
						</div>
						
						<style type="text/css" id="progress-custom-css"></style>
					</div>
				</div>
				
			</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 type="text/javascript">
	require([
		'jquery',
	], function(jQuery){
		(function($) {
			$(document).ready(function(){
				setPreview();
				changeProgressType();
			});
			
			$("#subtitle, #percent").keypress(function( event ){
				setPreview();
			});
		})(jQuery);
	});
	
	function changeProgressType(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				type = $('#circle_type').val();
				if(type=='pie'){
					$('.type-circle').hide();
				}
				else{
					$('.type-circle').show();
				}
				setIconFields();
			})(jQuery);
		});
		setPreview();
	}
	
	function setIconFields(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				type = $('#circle_type').val();
				if(($('#show_icon').prop("checked") == true) && (type=='circle')){
					$('.icon-fields').show();
				}else{
					$('.icon-fields').hide();
				}
			})(jQuery);
		});
		setPreview();
	}
	
	function setPreview(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				percent = parseFloat($('#percent').val());
				subtitle = $('#subtitle').val();
				circle_type = $('#circle_type').val();
				icon = $('#icon').val();
				$('#circle_progress_sample h4').html(subtitle);
				
				if(percent!='' && percent>0){
					$('#circle_progress_sample').show();
					
					$('.mgs-progress-circle').attr('data-progress', percent);
				}else{
					$('#circle_progress_sample').hide();
				}
				
				if(circle_type=='pie'){
					$('.mgs-progress-circle__overlay').html('<span>'+percent+'%</span>');
				}else{
					if($('#show_icon').prop("checked") == true){
						if(icon!=''){
							$('.mgs-progress-circle__overlay').html('<span class="font-container"><span class="'+icon+'"></span></span>');
						}else{
							$('.mgs-progress-circle__overlay').html('');
						}
					}else{
						$('.mgs-progress-circle__overlay').html('<span>'+percent+'%</span>');
					}
				}
				
			})(jQuery);
		});
		
		changeContentStyle();
	}
	
	function changeContentStyle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				percent_font_size = $('#percent_font_size').val();
				percent_color = $('#percent_color').val();
				
				title_font_size = $('#title_font_size').val();
				title_color = $('#title_color').val();
				
				icon_color = $('#icon_color').val();
				icon_font_size = $('#icon_font_size').val();
				
				bar_background = $('#bar_background').val();
				progress_background = $('#progress_background').val();
				circle_type = $('#circle_type').val();
				circle_width = parseFloat($('#circle_width').val());
				progress_width = parseFloat($('#progress_width').val());
				middle_background = $('#middle_background').val();
				icon = $('#icon').val();
				
				if(circle_width!='' && !isNaN(circle_width) && circle_width>300){
					circle_width = 300;
				}
				
				$overlayWidth = 0;
				if(circle_width!='' && circle_width>0){
					$halfWidth = circle_width/2;
					$clip = 'clip: rect(0px, '+circle_width+'px, '+circle_width+'px, '+$halfWidth+'px)';
					$clip2 = 'clip: rect(0px, '+$halfWidth+'px, '+circle_width+'px, 0px)';
					if(progress_width!='' && progress_width>0){
						$overlayWidth = parseFloat(circle_width) - progress_width - progress_width;
					}else{
						$overlayWidth = parseFloat(circle_width) - 20;
					}
				}else{
					if(progress_width!='' && progress_width>0){
						$overlayWidth = 120 - progress_width - progress_width;
					}
				}
				
				customStyle = '*{}';
				
				if(percent_font_size!='' && !isNaN(percent_font_size) && $('#show_icon').prop("checked") == false){
					customStyle += '.mgs-progress-circle__overlay span{font-size:'+percent_font_size+'px}';
				}
				
				if(percent_color!=''){
					if(circle_type=='pie' || $('#show_icon').prop("checked") == false){
						customStyle += '.mgs-progress-circle__overlay span{color:'+percent_color+'}';
					}
				}
				
				if(icon_font_size!='' && !isNaN(icon_font_size) && $('#show_icon').prop("checked") == true){
					customStyle += '.mgs-progress-circle__overlay span.fa{font-size:'+icon_font_size+'px}';
				}
				
				if(icon_color!='' && $('#show_icon').prop("checked") == true){
					customStyle += '.mgs-progress-circle__overlay span.fa{color:'+icon_color+'}';
				}
				
				if($('#percent_fontweight').prop("checked") == true && $('#show_icon').prop("checked") == false){
					customStyle += '.mgs-progress-circle__overlay span{font-weight:bold}';
				}
				
				if(title_font_size!='' && !isNaN(title_font_size)){
					customStyle += '#circle_progress_sample.mgs-circle-pie-progress .progress-info h4{font-size:'+title_font_size+'px}';
				}
				if(title_color!=''){
					customStyle += '.progress-info h4{color:'+title_color+'}';
				}
				if($('#title_fontweight').prop("checked") == true){
					customStyle += '#circle_progress_sample.mgs-circle-pie-progress .progress-info h4{font-weight:bold}';
				}
				
				if(middle_background!='' && circle_type=='circle'){
					if(middle_background=='transparent'){
						middle_background = '#ffffff';
					}
					customStyle += '#circle_progress_sample.mgs-circle-pie-progress .mgs-progress-circle .mgs-progress-circle__overlay{background-color:'+middle_background+'}';
				}
				
				if(bar_background!=''){
					customStyle += '#circle_progress_sample.mgs-circle-pie-progress .mgs-progress-circle{background-color:'+bar_background+'}';
				}
				
				if(progress_background!=''){
					customStyle += '#circle_progress_sample.mgs-circle-pie-progress .mgs-progress-circle__fill{background-color:'+progress_background+'}';
				}
				
				if(($('#circle_width').val() != '') && !isNaN($('#circle_width').val()) && ($('#circle_width').val()>0)){
					customStyle += '#circle_progress_sample .mgs-progress-circle,#circle_progress_sample .mgs-progress-circle .mgs-progress-circle__slice, .mgs-progress-circle .mgs-progress-circle__slice .mgs-progress-circle__fill{width:'+circle_width+'px; height:'+circle_width+'px}';
					customStyle += '.mgs-progress-circle .mgs-progress-circle__slice{'+$clip+'}';
					customStyle += '.mgs-progress-circle .mgs-progress-circle__slice .mgs-progress-circle__fill{'+$clip2+'}';
				}
				
				if($overlayWidth>0){
					customStyle += '.mgs-progress-circle .mgs-progress-circle__overlay{width:'+$overlayWidth+'px; height:'+$overlayWidth+'px; line-height:'+$overlayWidth+'px}';
					
					if($('#show_icon').prop("checked") == false){
						customStyle += '.mgs-progress-circle .mgs-progress-circle__overlay{line-height:'+$overlayWidth+'px}';
					}
					if(progress_width!='' && !isNaN(progress_width) && progress_width>0){
						customStyle += '.mgs-progress-circle .mgs-progress-circle__overlay{margin-left:'+progress_width+'px; margin-top:'+progress_width+'px}';
					}
				}
				
				if($('#show_icon').prop("checked") == true && icon!=''){
					iconFontSize = parseFloat($('#icon_font_size').val());
					iconMargin = 15;
					if(iconFontSize!='' && !isNaN(iconFontSize) && iconFontSize>0){
						iconMargin = iconFontSize/2;
						customStyle += '.mgs-progress-circle__overlay span.fa{margin-top:-'+iconMargin+'px}';
					}
				}
				
				$('#progress-custom-css').html(customStyle);
			})(jQuery);
		});
	}
</script>