<?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 __('Form 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="form">
		<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['form'];
			?>
			<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 __('Fields 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 
							usort($accordion, function ($item1, $item2) {
								if ($item1['position'] == $item2['position']) return 0;
								return $item1['position'] < $item2['position'] ? -1 : 1;
							});
						?>
						<?php foreach($accordion as $key=>$_accordion): ?>
							<div id="form-group-<?php echo $key ?>" class="form-type-group">
								<div class="boxed">
									<div class="form-group line">
										<div class="col">
											<label class="control-label"><?php echo __('Label') ?></label><br/>
											<input type="text" class="input-text required-entry" name="setting[form][<?php echo $key ?>][label]" value="<?php echo $_accordion['label'] ?>" onchange="addIdentifier(this.value, <?php echo $key ?>)"/>
											<input type="hidden" name="setting[form][<?php echo $key ?>][identifier]" id="identifier_<?php echo $key ?>" value="<?php echo $_accordion['identifier'] ?>"/>
										</div>
										<div class="col">
											<label class="control-label"><?php echo __('Input type') ?></label><br/>
											<select name="setting[form][<?php echo $key ?>][type]" onchange="changeType(<?php echo $key ?>)" id="type_<?php echo $key ?>">
												<option value="text"<?php if($_accordion['type']=='text'): ?> selected="selected"<?php endif ?>><?php echo __('Text Field') ?></option>
												<option value="textarea"<?php if($_accordion['type']=='textarea'): ?> selected="selected"<?php endif ?>><?php echo __('Text Area') ?></option>
												<option value="file"<?php if($_accordion['type']=='file'): ?> selected="selected"<?php endif ?>><?php echo __('File') ?></option>
												<option value="select"<?php if($_accordion['type']=='select'): ?> selected="selected"<?php endif ?>><?php echo __('Dropdown') ?></option>
												<option value="radios"<?php if($_accordion['type']=='radios'): ?> selected="selected"<?php endif ?>><?php echo __('Radio') ?></option>
												<option value="checkboxes"<?php if($_accordion['type']=='checkboxes'): ?> selected="selected"<?php endif ?>><?php echo __('Checkbox') ?></option>
												<option value="multiselect"<?php if($_accordion['type']=='multiselect'): ?> selected="selected"<?php endif ?>><?php echo __('Multiselect') ?></option>
												<option value="date"<?php if($_accordion['type']=='date'): ?> selected="selected"<?php endif ?>><?php echo __('Date') ?></option>
											</select>
										</div>
										<div class="col-tb-2">
											<label class="control-label"><?php echo __('Is Required') ?></label><br/>
											<select name="setting[form][<?php echo $key ?>][required]" onchange="setRequired(<?php echo $key ?>)">
												<option value="0"<?php if($_accordion['required']==0): ?> selected="selected"<?php endif ?>><?php echo __('No') ?></option>
												<option value="1"<?php if($_accordion['required']==1): ?> selected="selected"<?php endif ?>><?php echo __('Yes') ?></option>
											</select>
										</div>
										<?php $additionalContent = $helper->getAdditionalInformationHtml($_accordion, $key) ?>
										<div class="col" id="additional-<?php echo $key ?>"<?php if($additionalContent==''): ?> style="display:none"<?php endif ?>>
											<?php echo $additionalContent ?>
										</div>
										<div class="col-tb-2">
											<label class="control-label"><?php echo __('Position') ?></label><br/>
											<input type="text" class="input-text validate-number" name="setting[form][<?php echo $key ?>][position]" value="<?php echo $_accordion['position'] ?>"/>
										</div>
										<a class="close" href="#" onclick="removeField('#form-group-<?php echo $key ?>'); return false"><span class="fa fa-close"></span></a>
									</div>
								</div>
							</div>
						<?php endforeach ?>
					<?php endif ?>
				</div>
				<div class="line" style="margin-top:15px">
					<div class="col-tb-12"><button onclick="newField()" type="button" class="action"><em class="fa fa-plus-circle"></em> <?php echo __('Add new field') ?></button></div>
				</div>
			</div>
			
			
			<div class="data item title" aria-labeledby="tab-label-form-title" data-role="collapsible" id="tab-label-form">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#form" id="tab-label-form-title">
					<?php echo __('Form Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="form" data-role="content">
				<div class="line form-group">
					<div class="col">
						<label for="mgs_receive_email" class="control-label"><?php echo __('Sent email to') ?></label><br/>
						<input type="text" class="input-text required-entry validate-email" id="mgs_receive_email" name="setting[mgs_receive_email]"<?php if($exist && $settings['mgs_receive_email']): ?> value="<?php echo $settings['mgs_receive_email'] ?>"<?php endif ?>/>
					</div>
					
					<div class="col">
						<label for="mgs_email_subject" class="control-label"><?php echo __('Email subject') ?></label><br/>
						<input type="text" class="input-text required-entry" id="mgs_email_subject" name="setting[mgs_email_subject]"<?php if($exist && $settings['mgs_email_subject']): ?> value="<?php echo $settings['mgs_email_subject'] ?>"<?php endif ?>/>
					</div>
					
					<div class="col-tb-3">
						<label for="use_mgs_captcha" class="control-label"><?php echo __('Use Captcha') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['use_mgs_captcha']): ?> checked="checked"<?php endif ?> value="1" name="setting[use_mgs_captcha]" id="use_mgs_captcha" class="admin__actions-switch-checkbox">
							<label for="use_mgs_captcha" 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">
					<div class="col">
						<label for="mgs_email_template_top" class="control-label"><?php echo __('Email template top content') ?></label><br/>
						<textarea name="setting[mgs_email_template_top]" id="mgs_email_template_top" rows="3"><?php if($exist && $settings['mgs_email_template_top']): ?><?php echo $settings['mgs_email_template_top'] ?><?php endif ?></textarea>
					</div>
				</div>
				<div class="line form-group">
					<div class="col">
						<label for="mgs_email_template_bottom" class="control-label"><?php echo __('Email template bottom content') ?></label><br/>
						<textarea name="setting[mgs_email_template_bottom]" id="mgs_email_template_bottom" rows="3"><?php if($exist && $settings['mgs_email_template_bottom']): ?><?php echo $settings['mgs_email_template_bottom'] ?><?php endif ?></textarea>
					</div>
				</div>
				<div class="line form-group">
					<div class="col">
						<label for="mgs_success_message" class="control-label"><?php echo __('Success message') ?></label><br/>
						<textarea name="setting[mgs_success_message]" id="mgs_success_message" rows="3" class="required-entry"><?php if($exist && $settings['mgs_success_message']): ?><?php echo $settings['mgs_success_message'] ?><?php endif ?></textarea>
					</div>
				</div>
			</div>
			
			<div class="data item title" aria-labeledby="tab-label-button-title" data-role="collapsible" id="tab-label-button">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#button" id="tab-label-button-title">
					<?php echo __('Button Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="button" data-role="content" style="display:none">
				<div class="line">
					<div class="col-tb-12">
						<div class="line form-group">
							<div class="col">
								<h4 class="no-margin" style="margin-bottom:14px !important"><?php echo __('Text') ?></h4>
								<input type="text" class="input-text required-entry" id="subtitle" name="setting[subtitle]"<?php if($exist && $settings['subtitle']): ?> value="<?php echo $settings['subtitle'] ?>"<?php endif ?> onchange="setPreview()"/>
							</div>
							
							<div class="col">
								<label for="text_font_size" class="control-label"><?php echo __('Font size') ?></label><br/>
								<input type="text" class="input-text validate-number" id="text_font_size" name="setting[text_font_size]"<?php if($exist && $settings['text_font_size']): ?> value="<?php echo $settings['text_font_size'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
							</div>
							
							<div class="col">
								<label for="text_color" class="control-label"><?php echo __('Color') ?></label><br/>
								<input type="text" class="input-text color-input" id="text_color" name="setting[text_color]"<?php if($exist && $settings['text_color']): ?> value="<?php echo $settings['text_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
							
							<div class="col">
								<label for="text_hover_color" class="control-label"><?php echo __('Hover Color') ?></label><br/>
								<input type="text" class="input-text color-input" id="text_hover_color" name="setting[text_hover_color]"<?php if($exist && $settings['text_hover_color']): ?> value="<?php echo $settings['text_hover_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
						</div>
					</div>
					<div class="col-tb-12">
						<hr/>
					</div>
				</div>
				<div class="line">
					<div class="col-tb-9" style="border-right: 1px solid #ddd;">

						<div class="line form-group">
							<div class="col-tb-4"><h4 class="no-margin"><?php echo __('Background Gradient') ?></h4></div>
							<div class="col-tb-8">
								<div class="admin__actions-switch" data-role="switcher" style="position:relative; top:-7px">
									<input type="checkbox"<?php if($exist && $settings['button_bg_gradient']): ?> checked="checked"<?php endif ?> value="1" name="setting[button_bg_gradient]" id="button_bg_gradient" class="admin__actions-switch-checkbox" onclick="backgroundGradient()">
									<label for="button_bg_gradient" 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 bg-no-gradient">
							<label for="button_bg_color" class="control-label col-tb-3"><?php echo __('Background') ?></label>
							<div class="col-tb-3">
								<input type="text" class="input-text color-input" id="button_bg_color" name="setting[button_bg_color]"<?php if($exist && $settings['button_bg_color']): ?> value="<?php echo $settings['button_bg_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
							
							<label for="button_bg_hover_color" class="control-label col-tb-3"><?php echo __('Background Hover') ?></label>
							<div class="col-tb-3">
								<input type="text" class="input-text color-input" id="button_bg_hover_color" name="setting[button_bg_hover_color]"<?php if($exist && $settings['button_bg_hover_color']): ?> value="<?php echo $settings['button_bg_hover_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
						</div>
						
						<div class="line form-group bg-gradient">
							<div class="col">
								<label for="button_bg_from" class="control-label"><?php echo __('From') ?></label><br/>
								<input type="text" class="input-text color-input" id="button_bg_from" name="setting[button_bg_from]"<?php if($exist && $settings['button_bg_from']): ?> value="<?php echo $settings['button_bg_from'] ?>"<?php endif ?> onchange="changeContentStyle()" />
							</div>
							<div class="col">
								<label for="button_bg_to" class="control-label"><?php echo __('To') ?></label><br/>
								<input type="text" class="input-text color-input" id="button_bg_to" name="setting[button_bg_to]"<?php if($exist && $settings['button_bg_to']): ?> value="<?php echo $settings['button_bg_to'] ?>"<?php endif ?> onchange="changeContentStyle()" />
							</div>
							<div class="col">
								<label for="button_bg_orientation" class="control-label"><?php echo __('Orientation') ?></label><br/>
								<select name="setting[button_bg_orientation]" id="button_bg_orientation" onchange="setPreview()">
									<option value="horizontal"<?php if($exist && ($settings['button_bg_orientation']=='horizontal')): ?> selected="selected"<?php endif ?>><?php echo __('Horizontal  →') ?></option>
									<option value="vertical"<?php if($exist && ($settings['button_bg_orientation']=='vertical')): ?> selected="selected"<?php endif ?>><?php echo __('Vertical  ↓') ?></option>
									<option value="diagonal"<?php if($exist && ($settings['button_bg_orientation']=='diagonal')): ?> selected="selected"<?php endif ?>><?php echo __('Diagonal  ↘') ?></option>
									<option value="diagonal-bottom"<?php if($exist && ($settings['button_bg_orientation']=='diagonal-bottom')): ?> selected="selected"<?php endif ?>><?php echo __('Diagonal  ↗') ?></option>
									<option value="radial"<?php if($exist && ($settings['button_bg_orientation']=='radial')): ?> selected="selected"<?php endif ?>><?php echo __('Radial  ○') ?></option>
								</select>
							</div>
						</div>
						
						<div class="line form-group bg-gradient">
							<div class="col">
								<label for="button_bg_hover_from" class="control-label"><?php echo __('From (Hover)') ?></label><br/>
								<input type="text" class="input-text color-input" id="button_bg_hover_from" name="setting[button_bg_hover_from]"<?php if($exist && $settings['button_bg_hover_from']): ?> value="<?php echo $settings['button_bg_hover_from'] ?>"<?php endif ?> onchange="changeContentStyle()" />
							</div>
							<div class="col">
								<label for="button_bg_hover_to" class="control-label"><?php echo __('To (Hover)') ?></label><br/>
								<input type="text" class="input-text color-input" id="button_bg_hover_to" name="setting[button_bg_hover_to]"<?php if($exist && $settings['button_bg_hover_to']): ?> value="<?php echo $settings['button_bg_hover_to'] ?>"<?php endif ?> onchange="changeContentStyle()" />
							</div>
							<div class="col">
								<label for="button_bg_hover_orientation" class="control-label"><?php echo __('Orientation (Hover)') ?></label><br/>
								<select name="setting[button_bg_hover_orientation]" id="button_bg_hover_orientation" onchange="setPreview()">
									<option value="horizontal"<?php if($exist && ($settings['button_bg_hover_orientation']=='horizontal')): ?> selected="selected"<?php endif ?>><?php echo __('Horizontal  →') ?></option>
									<option value="vertical"<?php if($exist && ($settings['button_bg_hover_orientation']=='vertical')): ?> selected="selected"<?php endif ?>><?php echo __('Vertical  ↓') ?></option>
									<option value="diagonal"<?php if($exist && ($settings['button_bg_hover_orientation']=='diagonal')): ?> selected="selected"<?php endif ?>><?php echo __('Diagonal  ↘') ?></option>
									<option value="diagonal-bottom"<?php if($exist && ($settings['button_bg_hover_orientation']=='diagonal-bottom')): ?> selected="selected"<?php endif ?>><?php echo __('Diagonal  ↗') ?></option>
									<option value="radial"<?php if($exist && ($settings['button_bg_hover_orientation']=='radial')): ?> selected="selected"<?php endif ?>><?php echo __('Radial  ○') ?></option>
								</select>
							</div>
						</div>
						
						<hr/>
						<div class="line form-group">
							<div class="col-tb-4">
								<div class="line margin-container2">
									<div class="col-tb-6"><h4 class="no-margin"><?php echo __('Border') ?></h4></div>
									<div class="col-tb-6">
										<div class="admin__actions-switch" data-role="switcher" style="position:relative; top:-7px">
											<input type="checkbox"<?php if($exist && $settings['use_border']): ?> checked="checked"<?php endif ?> value="1" name="setting[use_border]" id="use_border" class="admin__actions-switch-checkbox" onclick="useBorder()">
											<label for="use_border" 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>
							<div class="col-tb-8 use-border">
								<div class="line">
									<div class="col">
										<label for="border_width" class="control-label"><?php echo __('Width') ?></label><br/>
										<input type="text" class="input-text validate-number" id="border_width" name="setting[border_width]"<?php if($exist && $settings['border_width']): ?> value="<?php echo $settings['border_width'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
									</div>
									
									<div class="col">
										<label for="border_color" class="control-label"><?php echo __('Color') ?></label><br/>
										<input type="text" class="input-text color-input" id="border_color" name="setting[border_color]"<?php if($exist && $settings['border_color']): ?> value="<?php echo $settings['border_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
									</div>
									
									<div class="col">
										<label for="border_hover_color" class="control-label"><?php echo __('Hover Color') ?></label><br/>
										<input type="text" class="input-text color-input" id="border_hover_color" name="setting[border_hover_color]"<?php if($exist && $settings['border_hover_color']): ?> value="<?php echo $settings['border_hover_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
									</div>
								</div>
							</div>

						</div>
						
						<div class="line form-group use-border">
							<div class="col">
								<label for="border_top" class="control-label"><?php echo __('Border top') ?></label><br/>
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if(($exist && $settings['border_top']) || !$exist): ?> checked="checked"<?php endif ?> value="1" name="setting[border_top]" id="border_top" class="admin__actions-switch-checkbox" onclick="setPreview()">
									<label for="border_top" 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="border_right" class="control-label"><?php echo __('Border right') ?></label><br/>
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if(($exist && $settings['border_right']) || !$exist): ?> checked="checked"<?php endif ?> value="1" name="setting[border_right]" id="border_right" class="admin__actions-switch-checkbox" onclick="setPreview()">
									<label for="border_right" 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="border_bottom" class="control-label"><?php echo __('Border bottom') ?></label><br/>
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if(($exist && $settings['border_bottom']) || !$exist): ?> checked="checked"<?php endif ?> value="1" name="setting[border_bottom]" id="border_bottom" class="admin__actions-switch-checkbox" onclick="setPreview()">
									<label for="border_bottom" 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="border_left" class="control-label"><?php echo __('Border left') ?></label><br/>
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if(($exist && $settings['border_left']) || !$exist): ?> checked="checked"<?php endif ?> value="1" name="setting[border_left]" id="border_left" class="admin__actions-switch-checkbox" onclick="setPreview()">
									<label for="border_left" 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-2"><h4 class="no-margin"><?php echo __('Icon') ?></h4></div>
							<div class="col-tb-10">
								<div class="admin__actions-switch" data-role="switcher" style="position:relative; top:-7px">
									<input type="checkbox"<?php if($exist && $settings['use_icon']): ?> checked="checked"<?php endif ?> value="1" name="setting[use_icon]" id="use_icon" class="admin__actions-switch-checkbox" onclick="useIcon()">
									<label for="use_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 class="col use-icon">
								<label class="control-label"><?php echo __('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 use-icon">
								<label for="icon_font_size" class="control-label"><?php echo __('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 use-icon">
								<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 use-icon">
								<label for="icon_hover_color" class="control-label"><?php echo __('Hover Color') ?></label><br/>
								<input type="text" class="input-text color-input" id="icon_hover_color" name="setting[icon_hover_color]"<?php if($exist && $settings['icon_hover_color']): ?> value="<?php echo $settings['icon_hover_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
							</div>
							
							<div class="col use-icon">
								<label for="icon_align" class="control-label"><?php echo __('Align') ?></label><br/>
								<select name="setting[icon_align]" id="icon_align" onchange="setPreview()">
									<option value="left"<?php if($exist && ($settings['icon_align']=='left')): ?> selected="selected"<?php endif ?>><?php echo __('Left'); ?></option>
									<option value="right"<?php if($exist && ($settings['icon_align']=='right')): ?> selected="selected"<?php endif ?>><?php echo __('Right'); ?></option>
								</select>
							</div>
						</div>
						
						<div class="use-icon">
							<hr/>
							
							<div class="line form-group">
								<div class="col-tb-4">
									<div class="line margin-container">
										<div class="col-tb-6"><h4 class="no-margin"><?php echo __('Divider') ?></h4></div>
										<div class="col-tb-6">
											<div class="admin__actions-switch" data-role="switcher" style="position:relative; top:-7px">
												<input type="checkbox"<?php if($exist && $settings['use_divider']): ?> checked="checked"<?php endif ?> value="1" name="setting[use_divider]" id="use_divider" class="admin__actions-switch-checkbox" onclick="useDivider()">
												<label for="use_divider" 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>
								<div class="col-tb-8 use-divider">
									<div class="line">

										<div class="col">
											<label for="divider_width" class="control-label"><?php echo __('Width') ?></label><br/>
											<input type="text" class="input-text validate-number" id="divider_width" name="setting[divider_width]"<?php if($exist && $settings['divider_width']): ?> value="<?php echo $settings['divider_width'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
										</div>
										
										<div class="col">
											<label for="divider_color" class="control-label"><?php echo __('Color') ?></label><br/>
											<input type="text" class="input-text color-input" id="divider_color" name="setting[divider_color]"<?php if($exist && $settings['divider_color']): ?> value="<?php echo $settings['divider_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
										</div>
										
										<div class="col">
											<label for="divider_hover_color" class="control-label"><?php echo __('Hover Color') ?></label><br/>
											<input type="text" class="input-text color-input" id="divider_hover_color" name="setting[divider_hover_color]"<?php if($exist && $settings['divider_hover_color']): ?> value="<?php echo $settings['divider_hover_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
										</div>

									</div>
								</div>
								
	
							</div>
							
						</div>
						
					</div>
					
					<div class="col-tb-3">
						<div class="content-block mgs-button-block" id="button-temp">
							<button style="display:none; margin-bottom:20px; margin-top:45px; max-width:100%">
								<span class="button-icon icon-left" style="display:none"><i class=""></i></span>
								<span class="text"></span>
								<span class="button-icon icon-right"style="display:none"><i class=""></i></span>
							</button>
						</div>
						
						<style type="text/css" id="button-custom-css"></style>

						
						<div class="line form-group">
							<label for="box_shadow" class="control-label col-tb-7"><?php echo __('Box Shadow') ?></label>
							<div class="col-tb-5">
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if($exist && $settings['box_shadow']): ?> checked="checked"<?php endif ?> value="1" name="setting[box_shadow]" id="box_shadow" class="admin__actions-switch-checkbox" onclick="setPreview()">
									<label for="box_shadow" 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">
							<label for="border_radius" class="control-label col-tb-7"><?php echo __('Border Radius') ?></label>
							<div class="col-tb-5">
								<input type="text" class="input-text validate-number" id="border_radius" name="setting[border_radius]"<?php if($exist && $settings['border_radius']): ?> value="<?php echo $settings['border_radius'] ?>"<?php endif ?> onchange="setPreview()" placeholder="px" style="min-width:70px"/>
							</div>
						</div>
						
						<div class="line form-group">
							<label for="button_align" class="control-label col-tb-7"><?php echo __('Align') ?></label>
							<div class="col-tb-5">
								<select name="setting[button_align]" id="button_align" onchange="setPreview()" style="min-width:70px">
									<option value="left"<?php if($exist && ($settings['button_align']=='left')): ?> selected="selected"<?php endif ?>><?php echo __('Left'); ?></option>
									<option value="center"<?php if($exist && ($settings['button_align']=='center')): ?> selected="selected"<?php endif ?>><?php echo __('Center'); ?></option>
									<option value="right"<?php if($exist && ($settings['button_align']=='right')): ?> selected="selected"<?php endif ?>><?php echo __('Right'); ?></option>
								</select>
							</div>
						</div>
						
						<div class="line form-group">
							<label for="full_width" class="control-label col-tb-7"><?php echo __('Full width') ?></label>
							<div class="col-tb-5">
								<div class="admin__actions-switch" data-role="switcher">
									<input type="checkbox"<?php if($exist && $settings['full_width']): ?> checked="checked"<?php endif ?> value="1" name="setting[full_width]" id="full_width" class="admin__actions-switch-checkbox" onclick="fullWidth()">
									<label for="full_width" 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 no-full">
							<label for="button_width" class="control-label col-tb-7"><?php echo __('Width') ?></label>
							<div class="col-tb-5">
								<input type="text" class="input-text validate-number" id="button_width" name="setting[button_width]"<?php if($exist && $settings['button_width']): ?> value="<?php echo $settings['button_width'] ?>"<?php endif ?> onchange="setPreview()" placeholder="px" style="min-width:70px"/>
							</div>
						</div>
						
						<div class="line form-group">
							<label for="button_height" class="control-label col-tb-7"><?php echo __('Height') ?></label>
							<div class="col-tb-5">
								<input type="text" class="input-text validate-number" id="button_height" name="setting[button_height]"<?php if($exist && $settings['button_height']): ?> value="<?php echo $settings['button_height'] ?>"<?php endif ?> onchange="setPreview()" placeholder="px" style="min-width:70px"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			

		</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>
	function newField(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				randomNumber = Math.floor((Math.random() * 10000) + 1);
				html = '<div id="form-group-{{random_number}}" class="form-type-group"><div class="boxed"><div class="form-group line">';

										
				html += '<div class="col"><label class="control-label"><?php echo __('Label') ?></label><br/><input type="text" class="input-text required-entry" name="setting[form][{{random_number}}][label]" onchange="addIdentifier(this.value, {{random_number}})"/><input type="hidden" name="setting[form][{{random_number}}][identifier]" id="identifier_{{random_number}}"/></div><div class="col"><label class="control-label"><?php echo __('Input type') ?></label><br/><select name="setting[form][{{random_number}}][type]" onchange="changeType({{random_number}})" id="type_{{random_number}}"><option value="text"><?php echo __('Text Field') ?></option><option value="textarea"><?php echo __('Text Area') ?></option><option value="file"><?php echo __('File') ?></option><option value="select"><?php echo __('Dropdown') ?></option><option value="radios"><?php echo __('Radio') ?></option><option value="checkboxes"><?php echo __('Checkbox') ?></option><option value="multiselect"><?php echo __('Multiselect') ?></option><option value="date"><?php echo __('Date') ?></option></select></div><div class="col"><label class="control-label"><?php echo __('Is Required') ?></label><br/><select name="setting[form][{{random_number}}][required]" onchange="setRequired({{random_number}})"><option value="0"><?php echo __('No') ?></option><option value="1"><?php echo __('Yes') ?></option></select></div><div class="col-" id="additional-{{random_number}}"><label class="control-label"><?php echo __('Validate') ?></label><br/><select class="multiselect" name="setting[form][{{random_number}}][validate][]" multiple="multiple" style="height:85px"><option value="validate-number"><?php echo __('Number Only') ?></option><option value="validate-alpha"><?php echo __('Letter Only') ?></option><option value="validate-alphanum"><?php echo __('Number Or Letter') ?></option><option value="validate-email"><?php echo __('Email') ?></option><option value="validate-url"><?php echo __('Url') ?></option><option value="validate-identifier"><?php echo __('Identifier') ?></option><option value="validate-zero-or-greater"><?php echo __('0 Or Greater') ?></option><option value="validate-greater-than-zero"><?php echo __('Greater Than 0') ?></option></select></div><div class="col-tb-2"><label class="control-label"><?php echo __('Position') ?></label><br/><input type="text" class="input-text validate-number" name="setting[form][{{random_number}}][position]" /></div><a class="close" href="#" onclick="removeField(\'#form-group-{{random_number}}\'); return false"><span class="fa fa-close"></span></a></div>';
				
				html += '</div></div>';
				
				html = html.replace(/{{random_number}}/g, randomNumber);
									
				$('#new-accordion-container').append(html);
			})(jQuery);
		});
	}
	
	function removeField(number){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				$(number).remove();
			})(jQuery);
		});
	}
	
	function addIdentifier(val, number){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				identifierValue = val.trim().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '_').toLowerCase();
				$('#identifier_'+number).val(identifierValue);
			})(jQuery);
		});
	}
	
	function changeType(number){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				val = $('#type_'+number).val();
				setAdditionalInfo(val, number);
			})(jQuery);
		});
	}
	
	function setAdditionalInfo(val,numberEl){
		require([
			'jquery'
		], function(jQuery){
			(function($) {
				$html = '';
				switch(val) {
					case 'text':
						$html = getTextAdditionalInformation(numberEl);
						break;
					case 'textarea':
						$html = getNullAdditionalInformation(numberEl);
						break;
					case 'file':
						$html = getFileAdditionalInformation(numberEl);
						break;
					case 'date':
						$html = getNullAdditionalInformation(numberEl);
						break;
					default:
						$html = getDropdownAdditionalInformation(numberEl);
						break;
				}
				$('#additional-'+numberEl).html($html);
				if($html==''){
					$('#additional-'+numberEl).hide();
				}else{
					$('#additional-'+numberEl).show();
				}
				
			})(jQuery);
		});
	}
	
	function getTextAdditionalInformation(numberEl){
		$html = '<label class="control-label"><?php echo __('Validate') ?></label><br/><select class="multiselect" name="setting[form]['+numberEl+'][validate]" multiple="multiple" style="height:85px"><option value="validate-number">Number Only</option><option value="validate-alpha">Letter Only</option><option value="validate-alphanum">Number Or Letter</option><option value="validate-email">Email</option><option value="validate-url">Url</option><option value="validate-identifier">Identifier</option><option value="validate-zero-or-greater">0 Or Greater</option><option value="validate-greater-than-zero">Greater Than 0</option></select>';
		return $html;
	}
	
	function getFileAdditionalInformation(numberEl){
		$ex = 'doc,docx,pdf,odt,xls,xlsx,csv,png,jpg,jpeg,gif';
		$html = '<label class="control-label"><?php echo __('Allow Extensions') ?></label><br/><input type="text" class="input-text" name="setting[form]['+numberEl+'][extension]" value="'+$ex+'"/>';
		return $html;
	}
	
	function getDropdownAdditionalInformation(numberEl){

		$html = '<label class="control-label"><?php echo __('Options') ?></label><br/><input type="text" class="input-text required-entry" name="setting[form]['+numberEl+'][options]" placeholder="<?php echo __('Comma-separated.') ?>"/>';
		return $html;
	}
	
	function getNullAdditionalInformation($i){
		$html = '';
		return $html;
	}
	
	require([
		'jquery',
	], function(jQuery){
		(function($) {
			$(document).ready(function(){
				backgroundGradient();
				useBorder();
				fullWidth();
				useIcon();
			});
			
			$("#subtitle").keypress(function( event ){
				setPreview();
			});
		})(jQuery);
	});
	
	function setPreview(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				subtitle = $('#subtitle').val();
				button_align = $('#button_align').val();
				icon = $('#icon').val();
				if(subtitle.trim() != ''){
					$('#button-temp .text').html(subtitle);
					$('#button-temp button').show();
				}else{
					$('#button-temp .text').html('');
					$('#button-temp button').hide();
				}
				
				containerClass = 'content-block mgs-button-block';
				
				containerClass += ' button-'+button_align;
				
				if($('#box_shadow').prop("checked") == true){
					containerClass += ' button-shadow';
				}
				if($('#full_width').prop("checked") == true){
					containerClass += ' button-fullwidth';
				}
				
				$('#button-temp').attr('class', containerClass);
				
				if($('#use_icon').prop("checked") == true && icon!=''){
					
					icon_align = $('#icon_align').val();
					
					$('#button-temp .button-icon i').attr('class', icon);
					$('#button-temp .button-icon').hide();
					$('#button-temp .icon-'+icon_align).attr('style', 'display:inline-block');
					
					if($('#use_divider').prop("checked") == true){
						$('#button-temp .button-icon').addClass('has-divider');
					}else{
						$('#button-temp .button-icon').removeClass('has-divider');
					}
				}else{
					$('#button-temp .button-icon').hide();
				}
				
				
			})(jQuery);
		});
		
		changeContentStyle();
	}
	
	function changeContentStyle(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				$customStyle = '';
				text_font_size = $('#text_font_size').val();
				text_color = $('#text_color').val();
				text_hover_color = $('#text_hover_color').val();
				button_bg_color = $('#button_bg_color').val();
				button_bg_hover_color = $('#button_bg_hover_color').val();
				button_bg_from = $('#button_bg_from').val();
				button_bg_to = $('#button_bg_to').val();
				button_bg_orientation = $('#button_bg_orientation').val();
				button_bg_hover_from = $('#button_bg_hover_from').val();
				button_bg_hover_to = $('#button_bg_hover_to').val();
				button_bg_hover_orientation = $('#button_bg_hover_orientation').val();
				border_width = $('#border_width').val();
				border_color = $('#border_color').val();
				border_hover_color = $('#border_hover_color').val();
				icon = $('#icon').val();
				icon_font_size = $('#icon_font_size').val();
				icon_color = $('#icon_color').val();
				icon_hover_color = $('#icon_hover_color').val();
				icon_align = $('#icon_align').val();
				divider_width = $('#divider_width').val();
				divider_color = $('#divider_color').val();
				divider_hover_color = $('#divider_hover_color').val();
				border_radius = $('#border_radius').val();
				button_width = $('#button_width').val();
				button_height = $('#button_height').val();
				
				if(text_font_size!='' && !isNaN(text_font_size) && text_font_size>0){
					$customStyle += '#button-temp.mgs-button-block button{font-size:'+text_font_size+'px}';
				}
				if(text_color!=''){
					$customStyle += '#button-temp.mgs-button-block button{color:'+text_color+'}';
				}
				if(text_hover_color!=''){
					$customStyle += '#button-temp.mgs-button-block button:hover{color:'+text_hover_color+'}';
				}
				if($('#button_bg_gradient').prop("checked") == true){
					$customStyle += '#button-temp.mgs-button-block button{' + getGradientBackground(button_bg_orientation, button_bg_from, button_bg_to) +'}';
					
					if(button_bg_hover_from!='' || button_bg_hover_to!=''){
						$customStyle += '#button-temp.mgs-button-block button:hover{' + getGradientBackground(button_bg_hover_orientation, button_bg_hover_from, button_bg_hover_to) + '}';
					}
				}else{
					if(button_bg_color!=''){
						$customStyle += '#button-temp.mgs-button-block button{background:'+button_bg_color+'}';
					}
					if(button_bg_hover_color!=''){
						$customStyle += '#button-temp.mgs-button-block button:hover{background:'+button_bg_hover_color+'}';
					}
				}


				if($('#use_border').prop("checked") == true && border_color!=''){
					$customStyle += '#button-temp.mgs-button-block button{border:1px solid '+border_color+'}';
					if(border_width!='' && !isNaN(border_width) && border_width>1){
						$customStyle += '#button-temp.mgs-button-block button{border-width:'+border_width+'px}';
					}
					
					if($('#border_top').prop("checked") == false){
						$customStyle += '#button-temp.mgs-button-block button{border-top:0}';
					}
					if($('#border_right').prop("checked") == false){
						$customStyle += '#button-temp.mgs-button-block button{border-right:0}';
					}
					if($('#border_bottom').prop("checked") == false){
						$customStyle += '#button-temp.mgs-button-block button{border-bottom:0}';
					}
					if($('#border_left').prop("checked") == false){
						$customStyle += '#button-temp.mgs-button-block button{border-left:0}';
					}
				}

				if($('#use_border').prop("checked") == true && border_hover_color!=''){
					$customStyle += '#button-temp.mgs-button-block button:hover{border-color:'+border_hover_color+'}';
				}

				if(border_radius!='' && !isNaN(border_radius) && border_radius>0){
					$customStyle += '#button-temp.mgs-button-block button{border-radius:'+border_radius+'px}';
				}

				if($('#full_width').prop("checked") == false && (button_width!='' && !isNaN(button_width) && button_width>0)){
					$customStyle += '#button-temp.mgs-button-block button{width:'+button_width+'px; text-align:center; padding-left:0; padding-right:0}';
					$customStyle += '#button-temp.mgs-button-block button span.has-divider{margin:0}';
				}

				if($('#use_divider').prop("checked") == true && (button_width=='' || button_width==0)){
					
					if(icon_align=='left' && $('#use_icon').prop("checked") == true && icon!=''){
						$customStyle += '#button-temp.mgs-button-block button{padding-left:0}';
					}
					if(icon_align=='right' && $('#use_icon').prop("checked") == true && icon!=''){
						$customStyle += '#button-temp.mgs-button-block button{padding-right:0}';
					}
				}

				if(button_height!='' && !isNaN(button_height) && button_height>0){
					$height = parseFloat(button_height);
					$customStyle += '#button-temp.mgs-button-block button{height:'+$height+'px; line-height:'+$height+'px;}';
					$customStyle += '#button-temp.mgs-button-block button span.has-divider{width:'+$height+'px; padding:0}';
				}else{
					$height = 35;
				}

				if($('#use_border').prop("checked") == true && border_color!=''){
					$borderHeight = 1;
					if(border_width!='' && !isNaN(border_width) && border_width>1){
						$borderHeight = parseFloat(border_width);
					}
					
					if(border_top){
						$height -= parseFloat($borderHeight);
					}
					if(border_bottom){
						$height -= parseFloat($borderHeight);
					}
					
				}



				$customStyle += '#button-temp.mgs-button-block button{line-height:'+$height+'px;}';
				$customStyle += '#button-temp.mgs-button-block button span{height:'+$height+'px; line-height:'+$height+'px;}';


				if($('#use_icon').prop("checked") == true){
					if(icon_font_size!='' && !isNaN(icon_font_size) && icon_font_size>0){
						$customStyle += '#button-temp.mgs-button-block button i{font-size:'+icon_font_size+'px}';
					}
					if(icon_color!=''){
						$customStyle += '#button-temp.mgs-button-block button i{color:'+icon_color+'}';
					}
					if(icon_hover_color!=''){
						$customStyle += '#button-temp.mgs-button-block button:hover i{color:'+icon_hover_color+'}';
					}
					if($('#use_divider').prop("checked") == true){
						if(divider_width!='' && !isNaN(divider_width) && divider_width>1){
							$customStyle += '#button-temp.mgs-button-block button .has-divider{border-width:'+divider_width+'px}';
						}
						if(divider_color!=''){
							$customStyle += '#button-temp.mgs-button-block button .has-divider{border-color:'+divider_color+'}';
						}
						if(divider_hover_color!=''){
							$customStyle += '#button-temp.mgs-button-block button:hover .has-divider{border-color:'+divider_hover_color+'}';
						}
					}
				}
				
				$('#button-custom-css').html($customStyle);
			})(jQuery);
		});
	}
	
	function getGradientBackground($orientation, $gradientFrom, $gradientTo){
		$html = '';
		if($gradientFrom==''){
			$gradientFrom = '#ffffff';
		}
		if($gradientTo==''){
			$gradientTo = '#ffffff';
		}
		switch ($orientation) {
			case "vertical":
				$html = 'background: '+$gradientFrom+'; background: -moz-linear-gradient(top, '+$gradientFrom+' 0%, '+$gradientTo+' 100%); background: -webkit-linear-gradient(top, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); background: linear-gradient(to bottom, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='+$gradientFrom+', endColorstr='+$gradientTo+',GradientType=0 );';
				break;
			case "diagonal":
				$html = 'background: '+$gradientFrom+'; background: -moz-linear-gradient(-45deg, '+$gradientFrom+' 0%, '+$gradientTo+' 100%); background: -webkit-linear-gradient(-45deg, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); background: linear-gradient(135deg, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='+$gradientFrom+', endColorstr='+$gradientTo+',GradientType=1 );';
				break;
			case "diagonal-bottom":
				$html = 'background: '+$gradientFrom+'; background: -moz-linear-gradient(45deg, '+$gradientFrom+' 0%, '+$gradientTo+' 100%); background: -webkit-linear-gradient(45deg, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); background: linear-gradient(45deg, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='+$gradientFrom+', endColorstr='+$gradientTo+',GradientType=1 );';
				break;
			case "radial":
				$html = 'background: '+$gradientFrom+'; background: -moz-radial-gradient(center, ellipse cover, '+$gradientFrom+' 0%, '+$gradientTo+' 100%); background: -webkit-radial-gradient(center, ellipse cover, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); background: radial-gradient(ellipse at center, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='+$gradientFrom+', endColorstr='+$gradientTo+',GradientType=1 );';
				break;
			default:
				$html = 'background: '+$gradientFrom+'; background: -moz-linear-gradient(left, '+$gradientFrom+' 0%, '+$gradientTo+' 100%); background: -webkit-linear-gradient(left, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); background: linear-gradient(to right, '+$gradientFrom+' 0%,'+$gradientTo+' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='+$gradientFrom+', endColorstr='+$gradientTo+',GradientType=1 );';
				break;
		}
		return $html;
	}
	
	function useIcon(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#use_icon').prop("checked") == true){
					$('.use-icon').show();
				}else{
					$('.use-icon').hide();
				}
			})(jQuery);
		});
		useDivider();
		setPreview();
	}
	
	function useDivider(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#use_divider').prop("checked") == true){
					$('.use-divider').show();
					$('.margin-container').addClass('divider-open');
				}else{
					$('.use-divider').hide();
					$('.margin-container').removeClass('divider-open');
				}
			})(jQuery);
		});
		setPreview();
	}
	
	function useBorder(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#use_border').prop("checked") == true){
					$('.use-border').show();
					$('.margin-container2').addClass('divider-open');
				}else{
					$('.use-border').hide();
					$('.margin-container2').removeClass('divider-open');
				}
			})(jQuery);
		});
		setPreview();
	}
	
	function fullWidth(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#full_width').prop("checked") == true){
					$('.no-full').hide();
				}else{
					$('.no-full').show();
				}
			})(jQuery);
		});
		setPreview();
	}
	
	function backgroundGradient(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#button_bg_gradient').prop("checked") == true){
					$('.bg-no-gradient').hide();
					$('.bg-gradient').show();
				}else{
					$('.bg-no-gradient').show();
					$('.bg-gradient').hide();
				}
			})(jQuery);
		});
		setPreview();
	}
</script>