<?php
global $scc_googlefonts_var;
wp_enqueue_script('scc-bootstrap-min');
wp_enqueue_script('scc-js-js');
wp_enqueue_style('scc-bootstrap-min');
wp_enqueue_style('scc-css-mobile');
wp_enqueue_style('scc-css-mobile-theme');
wp_enqueue_style('scc-bootstrapslider-css');
wp_enqueue_script('scc-bootstrapslider-js');
wp_enqueue_script('scc-scripts-js');
wp_enqueue_style('wp-color-picker');
wp_enqueue_style('scc-font-awesome');
wp_register_style('scc-modalbox', SCC_URL  . 'styles/scc-modalbox.css', array(), STYLISH_COST_CALCULATOR_VERSION);
wp_register_script('scc-modalbox', SCC_URL . 'assets/js/scc-modalbox.js', array('jquery'), STYLISH_COST_CALCULATOR_VERSION, true);
wp_enqueue_script('scc-modalbox');
wp_enqueue_style('scc-modalbox');
wp_enqueue_script('jquery-ui-tooltip');
wp_enqueue_style('scc-jquery-ui-css');
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script('jquery-effects-core');
wp_enqueue_script('jquery-ui-resizable');

// include_once SCC_DIR . '/admin/logo-header.php';
// wp_enqueue_script('my-script-handle', plugins_url('my-script.js', __FILE__), array( 'wp-color-picker' ), false, true);
$parameters = json_decode(stripslashes($result_2->parameters));
$dictionary = json_decode(stripslashes(stripslashes($allinputstoadd->formtranslate)));
//echo "<br>hello".stripslashes(stripslashes($allinputstoadd->formstored));
//echo '<pre>';print_r($parameters);exit;
?>
<!-- SCRIPTS TO TOGGLE FONT SETTINGS AND MORE -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
-->
<style>
	.form-control.scc_total_price_style_view {
		font-size: 13px !important;
	}
	/* DELETE AFTER YOU FIXED BOOTSRAP*/
	@media (min-width: 1281px) {
		.scc_wrapper .col-lg-6 {
			width: 49%;
		}
	}
</style>
<script>
	var sortableContainers = []
	function addSortableFeatureEachElement(collapseContainers) {
		jQuery('.selslideropt_4').each(function(i, e) {
			if (jQuery(e).is(':visible') && jQuery(e).find('[data-collapse-section-type]').length && collapseContainers) {
				jQuery(e).find('[data-collapse-section-type]').click();
			}
		})
		jQuery('body').find('.subsection-area').each(function(index, ob) {
			if (!jQuery(ob).is('[class*="sortable_container"]')) {
				jQuery(ob).addClass('sortable_container_' + index)
				sortableContainers.push({
					'element': ob,
					'className': 'sortable_container_' + index
				})
			}
		})
		for(var i = 0; i < sortableContainers.length; i++) {
			//console.log(sortableContainers[0].element);
			/**WORKING HERE */
			const barra = jQuery("#wpadminbar");

			Sortable.create(sortableContainers[i].element, {
				group: 'nested',
				animation: 150,
				forceFallback: true,
				ghostClass: "scc_sortable-ghosts",  // Class name for the drop placeholder
				chosenClass: "scc_sortable-chosens",  // Class name for the chosen item
				dragClass: "scc_sortable-drags",  // Class name for the dragging item
				onStart: function (event) {
					barra.hide();  // element index within parent
					console.log(event.target)
				},
				// checking causing weird 
				// onMove: function(event, /**Event*/originalEvent){
				// 	if(evt.draggedRect){
				// 		console.log("fuera")
				// 	}
				// },
				onEnd: function(){ 
					barra.show();
				},
			});
			if(collapseContainers) {
				jQuery(sortableContainers[i].element).find('#close-btn').each(function(index, ob){
					if(jQuery(ob).attr('onclick') == 'colla(this)') {
						jQuery(ob).click()
					}
				})
			}

		}
		
		
		sortableContainers = []
	}
	function goToGlobalSettings() {
		window.open("admin.php?page=stylish_cost_calculator_settings")
	}
	function spacing_bug() {
		var free_ver = document.getElementsByClassName("free_version");
		var i;
		for (i = 0; i < free_ver.length; i++) {
			free_ver[i].style.marginTop = "";
		}
	}
	function myFunction() {
		var free_ver = document.getElementsByClassName("free_version");
		var i;
		for (i = 0; i < free_ver.length; i++) {
			free_ver[i].style.marginTop = "300px";
		}
		var calcSettingsElement = document.getElementById("myDIV3");
		let embedCodeElement = document.getElementById("shortcode-view");
		let trans = document.getElementById("trans");
		if (calcSettingsElement.style.display === "block") calcSettingsElement.style.display = "none";
		if (embedCodeElement.style.display === "block") embedCodeElement.style.display = "none";
		if (trans.style.display === "block") trans.style.display = "none";
		var x = document.getElementById("myDIV");
		if (x.style.display === "none") {
			x.style.display = "block";
			var licensed = "<?php echo get_option('scc_licensed') ?>";
			if (licensed == "" || licensed == "0") {
				jQuery('.button, .wp-color-result').each(function(index, ob) {
					jQuery(ob).attr('disabled', true)
					jQuery(ob).addClass('tooltipadmin-top')
					jQuery(ob).attr('data-tooltip', 'You need purchase Stylish Cost Calculator Premium')
				})
			}
		} else {
			//x.style.display = "none";
			/*var i;
			for (i = 0; i < free_ver.length; i++) {
				free_ver[i].style.marginTop = "";
			}*/
		}
	}
	/*function myFunction2() {
		var x = document.getElementById("myDIV2");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}*/
	function myFunction3() {
		spacing_bug();
		var fontSettingsElement = document.getElementById("myDIV");
		let embedCodeElement = document.getElementById("shortcode-view");
		let trans = document.getElementById("trans");
		if (fontSettingsElement.style.display === "block") fontSettingsElement.style.display = "none";
		if (embedCodeElement.style.display === "block") embedCodeElement.style.display = "none";
		if (trans.style.display === "block") trans.style.display = "none";
		var x = document.getElementById("myDIV3");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}
	function myFunction4() {
		spacing_bug();
		var cols = document.getElementById("myDIV");
		let embedCode = document.getElementById("shortcode-view");
		let calculator = document.getElementById("myDIV3");
		if (cols.style.display === "block") cols.style.display = "none";
		if (embedCode.style.display === "block") embedCode.style.display = "none";
		if (calculator.style.display === "block") calculator.style.display = "none";
		var x = document.getElementById("trans");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}
	function showEmbedShortCode() {
		spacing_bug();
		var calcSettingsElement = document.getElementById("myDIV3");
		var fontSettingsElement = document.getElementById("myDIV");
		let trans = document.getElementById("trans");
		if (calcSettingsElement.style.display === "block") calcSettingsElement.style.display = "none";
		if (fontSettingsElement.style.display === "block") fontSettingsElement.style.display = "none";
		if (trans.style.display === "block") trans.style.display = "none";
		var x = document.getElementById("shortcode-view");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}
	// function myFunction4() {
	//   var x = document.getElementById("myDIV4");
	//   if (x.style.display === "none") {
	//     x.style.display = "block";
	//   } else {
	//     x.style.display = "none";
	//   }
	// }
</script>
<!-- END OF SCRIPTS TO TOGGLE FONT SETTINGS AND MORE -->
<!-- CAL NAME INPUT-->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="scc-editing-area-loading">
	<div class="center">
		<div class="sk-chase">
			<div class="sk-chase-dot"></div>
			<div class="sk-chase-dot"></div>
			<div class="sk-chase-dot"></div>
			<div class="sk-chase-dot"></div>
			<div class="sk-chase-dot"></div>
			<div class="sk-chase-dot"></div>
		</div>
	</div>
</div>
<div class="scc-edit">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding:0;">
		<div class="col-xs-12 col-md-6 col-lg-6" style="padding:0;">
			<div class="scc-custom-version-info">
				<a href="https://stylishcostcalculator.com/" class="scc-header">
					<img src="<?php echo SCC_URL . 'assets/images/scc-logo.png';
								if (!defined('ABSPATH')) exit; // Exit if accessed directly
								?>" class="img-responsive1" style="margin-left:-7px;padding-bottom:10px;margin-top:20px;max-width:160px;" alt="Price Estimation Form Logo">
							</a>
							<span class="scc_plug_ver" style="top:23px;font-weight:600;">
								<?php
								$opt = get_option('scclk_opt');
								if (empty($opt)) {
									echo 'Demo';
								} else {
									echo 'Premium';
								}
								?>
							</span>
						</div>
					</div>
					<div class="col-xs-12 col-md-6 col-lg-6 scc-navbar">
						<div class="scc-top-nav-container">
							<ul class="scc-edit-nav-items">
								<li><a href="<?php echo admin_url('admin.php?page=scc-tabs'); ?>">Add New</a></li>
								<li><a href="<?php echo admin_url('admin.php?page=Stylish_Cost_Calculator_EditItems'); ?>">Edit Existing</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="javascript:void(0)" onclick="myFunction3()">Calculator Settings</a></li>
										<li><a href="javascript:void(0)" onclick="myFunction4()">Translation Settings</a></li>
										<li><a href="javascript:void(0)" onclick="myFunction()">Font Settings</a></li>
										<li><a href="javascript:void(0)" onclick="goToGlobalSettings()">Global Settings</a></li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feedback <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a target="_blank" href="https://stylishcostcalculator.com/how-can-we-be-better/">Send Feedback</a></li>
										<li><a target="_blank" href="https://stylishcostcalculator.com/poll/new-features/">Suggest Feature</a></li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a target="_blank" href="https://designful.freshdesk.com/support/solutions/48000446985">User Guides</a></li>
										<li><a target="_blank" href="https://designful.freshdesk.com/support/solutions/folders/48000657938">Video Guides</a></li>
										<li><a target="_blank" href="<?php echo admin_url('admin.php?page=stylish_cost_calculator_Diagnostic'); ?>">Diagnostic</a></li>
										<li><a target="_blank" href="https://designful.freshdesk.com/support/solutions/folders/48000670797">Troubleshooting</a></li>
										<li><a target="_blank" href="https://stylishcostcalculator.com/support/">Contact Support</a></li>
										<li><a target="_blank" href="https://members.stylishcostcalculator.com/">Member's Portal</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-12 col-lg-12" style="height:100px;width:110%;background-color:#314af3;margin: 40px 0px 10px -20px;">
					<!-- Calculator Title User Input-->
					<div class="col-lg-4 col-md-4 col-xs-5" style="padding:0;top:25px;">
						<input type="text" style="border-radius:8px!important;padding:11px;width:100%;" class="input_pad" id="costcalculatorname" placeholder="Enter the name of this calculator" value="<?php echo isset($allinputstoadd->formname) ? stripslashes($allinputstoadd->formname) : ''; ?>" />
					</div>
					<!--END-->
					<!---SAVE BUTTON-->
					<div class="col-lg-2 col-md-2 col-xs-2" style="display:inline-block;text-align:center;top:40px;">
						<div style="display:inline-block;text-align:center;">
							<?php $license_enable = get_option('scc_licensed');
							global $wpdb;
							$results = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}scc_forms");
							if ($license_enable == 1) {
								?>
								<label class="scc_label" style="padding:0px;margin-top:0px;margin-left:-20px;"><a style="padding:13px;pointer-events: none;border: 2px solid white;padding-left:30px;padding-right:30px;" class="scc_button save_button " href="javascript:void(0)" onClick="saveFields(true, <?php echo count($results) ?>,true )">SAVE</a></label>
								<?php
							}
							if ($license_enable == 0 || !isset($license_enable)) {
								?>
								<label class="scc_label" style="padding:0px;margin-left:-20px;"><a style="padding:13px;pointer-events: none;border: 2px solid white;padding-left:30px;padding-right:30px;" class="scc_button save_button " href="javascript:void(0)" onClick="saveFields(false, <?php echo count($results) ?>,true )">SAVE</a></label>
								<?php
							}
							?>
						</div>
					</div>
					<!--END-->
					<!---EMBED BUTTON-->
					<div class="col-lg-4 col-md-4 col-xs-5" style="display:inline-block;text-align:center;top:30px;">
					</div>
		<!---END EMBED->
			</div>
			<!-- END -->
		</div>
	</div>
	<!--MIKES NEW FONT BUTTONS-->
	<div>
		<div class="col-xs-12 col-md-12 col-lg-12" style="padding:0">
			<button class="btn btn-settings-bar" onclick="myFunction()">Font Settings</button>
			<button class="btn btn-settings-bar" onclick="myFunction3()">Calculator Settings</button>
			<button class="btn btn-settings-bar" onclick="myFunction4()">Translate</button>
			<button class="btn btn-settings-bar" onclick="showEmbedShortCode()">Embed To Page</button>
			<span style="margin-top:5px;"><a style="padding: 11px 30px;font-weight: 500;text-transform: uppercase;font-size: 15px;letter-spacing: 0.5px;background-color: #20319f;color:white;border-radius: 4px;vertical-align: middle;" href="admin.php?page=df-scc-view-quotes">View Quotes</a><span>
			</div>
		</div>
		<!--END OF MIKES FONT BUTTONS-->
		<br>
		<style type="text/css">
			.scc-header {
				display: inline-block;
			}
			.scc-header.logo {
				position: relative;
				top: -20px;
			}
		</style>
		<!-- END OF CAL NAME INPUT-->
		<div class="wrap scc_wrapper">
			<!-- Start of SAVE BUTTONS -->
			<div class="custom-btn-scc-top" style="margin-left:-20px;max-width:780px;">
			</div>
			<!-- End of SAVE BUTTONS -->
			<!-- The Modal Videos Tutorials-->
			<div id="myModalVideosSCC" class="modalvideosSCC" style="display:none;z-index: 1600;">
				<div class="scc-modal-content-2020-videosSCC">
					<span class="closevideoSCC">&times;</span>
					<p>
						<div style="padding-top:15px;text-align:center;font-size:40px;font-weight:bold;color:#314af3!important;">Video Tutorial</div>
						<div style="padding-top:20px;text-align:center;font-size:20px;color:#484848;">How to use Stylish Cost Calculator</div>
					</p>
					<hr>
					<p>
						<div style="text-align: center;">
							<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="85%" max-width="1120" height="630" type="text/html" src="https://www.youtube.com/embed/crIHB7Acxgs?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&vq=hd1080"></iframe>
						</div>
					</p>
				</div>
			</div>
			<!-- End of Modal Video Tutorials -->
			<!-- The Modal Contact Support-->
			<div id="myModalSupportSCC" class="modalsupportSCC">
				<div class="scc-modal-content-2020-supportSCC" style="min-height: 412px;">
					<span class="closesupportSCC">&times;</span>
					<div style="padding-top:20px;text-align:center;font-size:40px;font-weight:bold;color:#314af3!important;">Contact Support</div>
					<div style="padding-top:10px;text-align:center;font-size:20px;color:#484848;">We're here to help!</div>
					<br>
					<p>
						<div style="text-align: center;">
							<div class="col-md-12 col-xs-12" style="margin-top:10px;min-height:800px;">
								<label class="scc_label" style="text-align: left;margin:20px">
									<a class="scc_button" style="padding:10px" href="https://designful.freshdesk.com/support/solutions/48000446985" target="_blank">User Guides & FAQs</a>
								</label>
								<label class="scc_label" style="text-align: left;margin:20px">
									<a class="scc_button" style="padding:10px" href="https://stylishcostcalculator.com/support/" target="_blank">Submit A Ticket</a>
								</label>
								<label class="scc_label" style="text-align: left;margin:20px">
									<a class="scc_button" style="padding:10px" href="https://designful.freshdesk.com/support/solutions/folders/48000657938" target="_blank">Video Tutorials</a>
								</label>
								<label class="scc_label" style="text-align: left;margin:20px">
									<a class="scc_button" style="padding:10px" href="https://stylishcostcalculator.com/blog/" target="_blank">Latest Features</a>
								</label>
							</div>
						</div>
						<br>
						<!--  <iframe src="https://designful.ca/spl-support/#splsupportid" scrolling="no" width="90%" height="400px" align="center" ></iframe>-->
					</p>
				</div>
			</div>
			<!-- End of Modal Video Tutorials -->
			<script>
				var availableTags = [
					"Elements Style Skin",
					//"Add container",
					"Add to cart redirection",
					"Button Style",
					"Turn off Hover for Pay Btns",
					"Turn off Email Quote button",
					"Turn off View Detailed List button",
					"Turn off Coupon button",
					"Bar Style",
					"Turn On Floating for Total Bar",
					"Remove the Total Price",
					"Minimum Calculator Total",
					"Show Total price if total value is greater than",
					"Remove Title",
					"Turn off Unit Price Column",
					"Turn off Save Icon",
					"Turn off Tax Display",
					"Footer Notes",
					"Tax",
					"Vat",
					"Symbol Placement Style",
					"Remove Currency label",
					"Currency Selector",
					"Auto Currency Conversion",
					"Currency Format",
					"PDF Font Style",
					"PDF Date Format",
					"Email Subject",
					"Email Body",
					"Email Quote Form",
					"User clicks the Detailed List"
				];
				jQuery( document ).ready(function( $a ) {
					if (jQuery.ui) {
						$a("#ssc-search-term").autocomplete({
							source: availableTags,
							select: function (e, ui) {
								go2SeettingSection(ui.item.value);
								ui.item.value="";
							},
						});
					}else{
					alert("no cargo jquery-ui no cargado");
					}
				});
				function scc_deplacement_script(labelId){
					jQuery([document.documentElement, document.body]).animate({
								scrollTop: jQuery("#"+ labelId).offset().top-50
							}, 2000);
						var originalColor = jQuery('#'+labelId).css("color");
						var originalBackground = jQuery('#'+labelId).parent().css("background-color")
						var $el = jQuery("#"+labelId);
						var $div = jQuery('#'+labelId).parent();
						$el.css("color", "white");
						$el.css("font-weight","bold")
						$div.css("padding","5px");
						$div.css("border-radius","5px");
						$div.css("background-color","#FF9A00");
						
						setTimeout(function(){
							$el.css("color", originalColor);
							$div.css("padding","")
							$el.css("font-weight","normal");
							$div.css("background-color",originalBackground);
						}, 4000);
						//console.log(document.getElementById(labelId));
					};

				function go2SeettingSection(mensaje){
					switch (mensaje){
						case "Elements Style Skin":
						scc_deplacement_script("label_element_style");
						break;
						case "Add container":
						scc_deplacement_script("label_add_container");
						break;
						case "Add to cart redirection":
						scc_deplacement_script("label_addtocart");
						break;
						case "Button Style":
						scc_deplacement_script("label_buton_style");
						break;
						case "Turn off Hover for Pay Btns":
						scc_deplacement_script("label_turnoffhover");
						break;
						case "Turn off Email Quote button":
						scc_deplacement_script("label_turnoffemai");
						break;
						case "Turn off View Detailed List button":
						scc_deplacement_script("label_turnoffview");
						break;
						case "Turn off Coupon button":
						scc_deplacement_script("label_turnoffcupon");
						break;
						case "Bar Style":
						scc_deplacement_script("label_barstyle");
						break;
						case "Turn On Floating for Total Bar":
						scc_deplacement_script("label_turnofffloating");
						break;
						case "Remove the Total Price":
						scc_deplacement_script("label_removetotalprice");
						break;
						case "Minimum Calculator Total":
						scc_deplacement_script("label_showtotalpricev");
						case "Show Total price if total value is greater than":
						scc_deplacement_script("label_showtotalpricev");
						break;
						case "Remove Title":
						scc_deplacement_script("labe_removetitle");
						break;
						case "Turn off Unit Price Column":
						scc_deplacement_script("label_turnoffprice");
						break;
						case "Turn off Save Icon":
						scc_deplacement_script("label_turnoffsave");
						break;
						case "Turn off Tax Display":
						scc_deplacement_script("label_turnofftax");
						break;
						case "Footer Notes":
						scc_deplacement_script("label_footern");
						break;
						case "Tax":
						scc_deplacement_script("label_taxvat");
						break;
						case "Vat":
						scc_deplacement_script("label_taxvat");
						break;
						case "Symbol Placement Style":
						scc_deplacement_script("label_symbolpl");
						break;
						case "Remove Currency label":
						scc_deplacement_script("label_removecurla");
						break;
						case "Currency Selector":
						scc_deplacement_script("label_curselec");
						break;
						case "Auto Currency Conversion":
						scc_deplacement_script("label_autocurr");
						break;
						case "Currency Format":
						scc_deplacement_script("label_currform");
						break;
						case "PDF Font Style":
						scc_deplacement_script("label_pdffont");
						break;
						case "PDF Date Format":
						scc_deplacement_script("label_pdfdate");
						break;
						case "Email Subject":
						scc_deplacement_script("label_emailsub");
						break;
						case "Email Body":
						scc_deplacement_script("label_emailbody");
						break;
						case "Email Quote Form":
						scc_deplacement_script("label_usercompl");
						break;
						case "User clicks the Detailed List":
						scc_deplacement_script("label_userclicks");
						break;
					}
				};
			</script>
			<!-- START MORE SETTINGS -->
			<div style="display:none;clear:both;" id="myDIV3" class="scc_wrapper">
				<div class="row" >
					<div class="col-md-6" >
						<div class="content-search-settings py-5 form-group">
							
						</div>
					</div>
				</div>
				<div class="ssc-free-search">
					<div style="font-size:180%;margin-bottom: 5px;" class="sccsubtitle scc_email_quote_label">
							<span style="font-weight:800;">SEARCH</span> Settings
						</div>
						<input class="form-control" id="ssc-search-term" type="text" placeholder="type a term to search in settings"></input>
					</div>
				<div class="col-md-12" style="padding-bottom:20px; margin-top:30px">
					
					<div class="row">
						<!-- End of Button styles -->
						<div class="col-md-6" style="margin-right:1em;background-color:#f8f9ff;padding-bottom:1em;">
							<div class="more-settings-section">
								<div class="sccsubtitle sccsubtitle_backend">
									<span class="title-sec">FRONTEND</span> OPTIONS
								</div>
								<span class="scc-calc-settings-title">Form Fields & Elements Style</span>
								<hr class="scc-calc-settings-hr">
								<?php
								$form_field_style = isset($parameters->form_field_style) ? $parameters->form_field_style : 'style_1';
								$scc_cart_btn_action = 'open_checkout';
								?>
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_element_style" class="scc-calc-settings-lbl">Elements Style
											<i class="material-icons-outlined more-settings-info" title="Change the skin for the frontend form fields (elements)." style="margin-right:5px">info</i>
											<i class="material-icons-outlined more-settings-info" title="Change the skin for the frontend form fields (elements)." style="margin-right:5px" data-image-preview="<?php echo esc_url(SCC_URL . 'assets/images/tooltip-images/elements-styles.png'); ?>">visibility</i>
										</label>
									</div>
									<div class="col-md-6">
										<select onChange="onChangeFieldStyle(this)" name="form_field_style" class="form-control scc_select_" >
											<option class="form-control" value="style_1" <?php selected($form_field_style, 'style_1'); ?>>Style 1 - Inline</option>
											<option class="form-control" value="style_2" <?php selected($form_field_style, 'style_2'); ?>>Style 2 - Block</option>
										</select>
									</div>
								</div>
								<div class="row col-md-12" id="toggle_boxshadow_style2" style="display: <?php echo $form_field_style == 'style_1' ? 'none' : 'block' ?>;padding-top:1px;">
									<div class="col-md-6 switch-label">
										<label for="scc_label">Add <b>Background Color & Container</b> for Each Element</label>
									</div>
									<div class="col-md-6 switch-container" <?php echo get_option('scc_licensed') == 0 ? ' class="tooltipadmin-right" data-tooltip="You need to have a premium license to use this feature."' : "" ?>>
										<label class="scc-switch">
											<div class="scc-switch">
												<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="toggle_boxshadow_style2" placeholder="" value="toggle_boxshadow_style2" id="toggle_boxshadow_style2" <?php if (isset($parameters->toggle_boxshadow_style2) && $parameters->toggle_boxshadow_style2 != '') {
													echo ' checked="checked"';
												} ?> class="form-control">
												<span class="slider round"></span>
											</div>
										</label>
									</div>
								</div>
								<span class="scc-calc-settings-title">WooCommerce</span>
								<hr class="scc-calc-settings-hr">
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_addtocart" class="scc-calc-settings-lbl">Add-To-Cart - Redirect to where?
											<i class="material-icons-outlined more-settings-info" title="Define where WooCommerce Add To Cart button should redirect to.">info</i>
										</label>
									</div>
									<div class="col-md-6" class="tooltipadmin-right" data-tooltip="You need to have a premium license to use this feature.">
										<select disabled name="scc_wc_cart_btn_action" class="form-control scc_select_">
											<option class="form-control" value="open_checkout" <?php selected($scc_cart_btn_action, 'open_checkout'); ?>>Open Checkout Page</option>
											<option class="form-control" value="open_cart" <?php selected($scc_cart_btn_action, 'open_cart'); ?>>Open Cart Page</option>
										</select>
									</div>
								</div>
								<span class="scc-calc-settings-title">User Action Buttons</span>
								<hr class="scc-calc-settings-hr">
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_buton_style" class="scc-calc-settings-lbl">Button Style
											<i class="material-icons-outlined more-settings-info" data-image-preview="<?php echo esc_url(SCC_URL . '/assets/images/tooltip-images/button-styles.png'); ?>">visibility</i>
										</label>
										<?php
										$scc_user_action_btn_style = isset($parameters->userActionButtonStyle) ? $parameters->userActionButtonStyle : 1;
										?>
									</div>
									<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
										<select disabled name="scc_user_action_btn_style" class="form-control scc_select_">
											<option class="form-control" value="1" <?php selected($scc_user_action_btn_style, 1); ?>>Button Style 1</option>
											<option class="form-control" value="2" <?php selected($scc_user_action_btn_style, 2); ?>>Button Style 2</option>
										</select>
									</div>
									<!--parece que falta algo -->
								</div>
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_turnoffhover" class="scc-calc-settings-lbl" for="paybuttonhovereffect">Turn off <b>Hover Effect</b> for Payment Buttons
											<i class="material-icons-outlined more-settings-info" data-image-preview="<?php echo esc_url(SCC_URL . '/assets/images/tooltip-images/payment-btn-hover-effect.png'); ?>">visibility</i>
										</label>
									</div>
									<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
										<div class="scc-switch" >
											<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="paybuttonhovereffect" id="paybuttonhovereffect"
											<?php if (isset($parameters->isPayBtnHoverEffectEnabled) && $parameters->isPayBtnHoverEffectEnabled == false) {echo ' checked="checked"';} ?> class="form-control">
											<span class="slider round"></span>
										</div>
									</div>
								</div>
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_turnoffemai" class="scc-calc-settings-lbl" for="scc_send_quote">Turn off <b>Email Quote</b> button
											<i class="material-icons-outlined more-settings-info" title="Enabling this will remove the quote button.">info</i>
										</label>
									</div>
									<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
										<div class="scc-switch">
											<input <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> type="checkbox" name="scc_send_quote" placeholder="" value="turn_off_send_quote" id="scc_send_quote"
											<?php if (isset($parameters->objectsendquote) && $parameters->objectsendquote != '') {echo ' checked="checked"';} ?> class="form-control scc_send_quote">
											<span class="slider round"></span>
										</div>
									</div>
								</div>
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_turnoffview" class="scc-calc-settings-lbl" for="scc_detailed_list">Turn off <b>View Detailed List</b> button
											<i class="material-icons-outlined more-settings-info" title="Enabling this will remove the detailed list.">info</i>
										</label>
									</div>
									<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
										<div class="scc-switch">
											<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="scc_detailed_list" placeholder="" value="turn_off_viewed_detailed_list" id="scc_detailed_list"
											<?php if (isset($parameters->objectdetailedlist) && $parameters->objectdetailedlist != '') { echo ' checked="checked"';} ?> class="form-control scc_detailed_list">
											<span class="slider round"></span>
										</div>
									</div>
								</div>
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_turnoffcupon" class="scc-calc-settings-lbl" for="turn_off_coupon">Turn off <b>Coupon</b> button
											<i class="material-icons-outlined more-settings-info" title="Enabling this will remove the coupon button">info</i>
										</label>
									</div>
									<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
										<div class="scc-switch">
											<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled checked' : '' ?> name="turn_off_coupon" placeholder="" value="turn_off_coupon" id="turn_off_coupon"
											<?php if (isset($parameters->objectscccoupon) && $parameters->objectscccoupon != '') {echo ' checked="checked"';} ?> class="form-control">
											<span class="slider round"></span>
										</div>
									</div>
								</div>
								<span class="scc-calc-settings-title">Total Price</span>
								<hr class="scc-calc-settings-hr">
								<div class="row col-md-12">
									<div class="col-md-6">
										<label id="label_barstyle" class="scc-calc-settings-lbl">Bar Style
											<i class="material-icons-outlined more-settings-info" data-image-preview="<?php echo esc_url(SCC_URL . '/assets/images/scc-total-price-styles.jpg'); ?>">visibility</i>
										</label>
									</div>
									<div class="col-md-6">
										<select name="scc_total_price_style_view" class="form-control scc_total_price_style_view scc_select_" >
									<?php //echo '<pre>'; print_r($parameters);
									?>
									<option class="form-control">Style for Total Price Bar </option>
									<option class="form-control" value="scc_tp_style1" <?php if (isset($parameters->objecttotalpricestyle) && $parameters->objecttotalpricestyle == 'scc_tp_style1') {echo ' selected="selected"';} ?>>Style 1 | Total Price</option>
									<option class="form-control" value="scc_tp_style2" <?php if (isset($parameters->objecttotalpricestyle) && $parameters->objecttotalpricestyle == 'scc_tp_style2') {echo ' selected="selected"';} ?>>Style 2 | Total Price</option>
									<option class="form-control" value="scc_tp_style3" <?php if (isset($parameters->objecttotalpricestyle) && $parameters->objecttotalpricestyle == 'scc_tp_style3') {echo ' selected="selected"';} ?>>Style 3 | Total Price</option>
									<option class="form-control" value="scc_tp_style4" <?php if (isset($parameters->objecttotalpricestyle) && $parameters->objecttotalpricestyle == 'scc_tp_style4') {echo ' selected="selected"';} ?>>Style 4 | Total Price</option>
								</select>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_turnofffloating" class="scc-calc-settings-lbl" for="turn_on_total_price_float">Turn On Floating for Total Bar (Style 1 only)
									<i class="material-icons-outlined more-settings-info" title="Enable this to have the total price float at the bottom of the page.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="turn_on_total_price_float" placeholder="" value="turn_on_total_price_float" id="turn_on_total_price_float" <?php if (isset($parameters->objectscctotalpricefloat) && $parameters->objectscctotalpricefloat != '') {echo ' checked="checked"';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12" style="display: block;">
							<!-- Start Total Price Conditional Revelation -->
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<label id="label_showtotalpricev" class="scc-calc-settings-lbl">Minimum Total Price <i class="material-icons-outlined more-settings-info" title="Specify the minimum total price at the calculator level.">info</i></label>
							</div>
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" <?php echo get_option('scc_licensed') == 0 ? ' class="tooltipadmin-right" data-tooltip="You need to have a premium license to use this feature."' : "" ?>>
								<div style="padding:0" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
									<input
										type="number"
										min="1"
										disabled
										id="scc_minimum-total"
										oninput="javascript:(jQuery(this).val() > 0) ? jQuery('#scc_minimum-total-action').show() : jQuery('#scc_minimum-total-action').hide()"
										class="form-control has-related-field"
										style="max-width:70px;min-height: 40px;padding-right: 5px;">
								</div>
							</div>
						</div><!-- End Total Price Conditional Revelation -->
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_removetotalprice" class="scc-calc-settings-lbl" for="scc_remove_total_price_frntd">Remove the <b>Total Price </b>
									<i class="material-icons-outlined more-settings-info" title="Enable this to hide the total price at the bottom of the calculator.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="scc_remove_total_price_frntd" placeholder="" value="scc_turn_off_total_price_view" id="scc_remove_total_price_frntd" <?php if (isset($parameters->objectscctotalprice) && $parameters->objectscctotalprice != '') {echo ' checked="checked"';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<span class="scc-calc-settings-title">Detailed list settings</span>
						<hr class="scc-calc-settings-hr">
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="labe_removetitle" class="scc-calc-settings-lbl" for="scc_remove_detailed_list_title">Remove <b>Title</b>
									<i class="material-icons-outlined more-settings-info" title="If enabled, detailed list will not show title at the top of the view.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="scc_remove_detailed_list_title" placeholder="" value="scc_remove_detailed_list_title" id="scc_remove_detailed_list_title"
									<?php if (isset($parameters->objectscctitlelabel) && $parameters->objectscctitlelabel != '') {echo ' checked="checked"';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_turnoffprice" class="scc-calc-settings-lbl" for="scc_no_unit_col">Turn off <b>Unit Price</b> Column <i class="material-icons-outlined more-settings-info" title="If enabled, the unit price column of the detailed list view will not be shown.">info</i></label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> value="turn_off_save_icon" name="scc_no_unit_col" id="scc_no_unit_col"
									<?php if (isset($parameters->objectDisableUnitCol) && $parameters->objectDisableUnitCol != '') {echo ' checked';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_turnoffsave" class="scc-calc-settings-lbl" for="scc_save_icon">Turn off <b>Save</b> Icon
									<i class="material-icons-outlined more-settings-info" title="If enabled, the save button at the top of the detailed list view will not be shown.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="scc_save_icon" placeholder="" value="turn_off_save_icon" id="scc_save_icon"
									<?php if (isset($parameters->objectsaveicon) && $parameters->objectsaveicon != '') {echo ' checked="checked"';} ?> class="form-control scc_save_icon">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_turnofftax" class="scc-calc-settings-lbl" for="turn_off_tax">Turn off <b>Tax</b> Display <i class="material-icons-outlined more-settings-info" title="If enabled, the calculated TAX amount will not show in Detailed List/PDF">info</i></label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="turn_off_tax" placeholder="" value="turn_off_tax" id="turn_off_tax"
									<?php if (isset($parameters->objectscctax) && $parameters->objectscctax != '') {echo ' checked="checked"';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5 " style=" background-color:#f8f9ff;padding-bottom:1em;" >
					<div class="more-settings-section">
						<div class="sccsubtitle sccsubtitle_backend">
							<span class="title-sec">CURRENCY & TAX</span> SETTINGS
						</div>
						<span class="scc-calc-settings-title">Tax / Vat</span>
						<hr class="scc-calc-settings-hr">
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_taxvat" class="scc-calc-settings-lbl" for="turn_off_tax">Tax/Vat
									<i class="material-icons-outlined more-settings-info" title="Applies TAX on total value returned by the calculator">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<input <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> type="number" min="1" max="99" name="scc_tax_amount" value="<?php if (isset($parameters->objecttaxrate) && $parameters->objecttaxrate != '') {echo esc_html($parameters->objecttaxrate);} ?>" id="scc_tax_amount" class="form-control" style="max-width:55px;min-height: 40px;padding-right: 5px;">
							</div>
						</div>
						<span class="scc-calc-settings-title">Currency</span>
						<hr class="scc-calc-settings-hr">
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_symbolpl" class="scc-calc-settings-lbl"> Symbol Placement Style
									<i class="material-icons-outlined more-settings-info" title="Helps define the currency symbol placement. You can have the currency symbol show at the left or the right side.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<select name="scc_currency_style" class="form-control scc_currency_style scc_select_">
									<option class="form-control" value="0" <?php echo isset($parameters->currency_style) && $parameters->currency_style == 0 ? 'selected' : '' ?>>Currency Symbol (Example: $53)</option>
									<option class="form-control" value="1" <?php echo isset($parameters->currency_style) && $parameters->currency_style == 1 ? 'selected' : '' ?>>Currency Letters (Example: 53 CAD)</option>
								</select>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_removecurla" class="scc-calc-settings-lbl" for="scc_remove_currency_label">Remove <b>Currency</b> label
									<i class="material-icons-outlined more-settings-info" title="Removes the currency symbol.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> name="scc_remove_currency_label" placeholder="" value="scc_remove_currency_label" id="scc_remove_currency_label"
									<?php if (isset($parameters->objectscccurrencylabel) && $parameters->objectscccurrencylabel != '') {echo ' checked="checked"';} ?> class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_curselec" class="scc-calc-settings-lbl">Currency Selector ($,€,£)
									<i class="material-icons-outlined more-settings-info" title="Helps define the currency symbol placement. You can have the currency symbol show at the left or the right side.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_autocurr" class="scc-calc-settings-lbl">Auto Currency Conversion
									<i class="material-icons-outlined more-settings-info" title="Automatically convert the currency into the users locale currency.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_currform" class="scc-calc-settings-lbl">Currency Format (dot/comma)
									<i class="material-icons-outlined more-settings-info" title="Choose whether to use a period or comma to separate the price. Example: 14,00.00 vs 15,000,00">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5" style="margin-top: 1em; background-color:#f8f9ff;padding-bottom:1em;">
					<div class="more-settings-section">
						<div class="sccsubtitle sccsubtitle_backend">
							<span class="title-sec">PDF</span> OPTIONS
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_pdffont" class="scc-calc-settings-lbl">PDF Font Style
									<i class="material-icons-outlined more-settings-info" title="Helps define the currency symbol placement. You can have the currency symbol show at the left or the right side.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings#scc_pdf_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_pdfdate" class="scc-calc-settings-lbl">PDF Date Format
									<i class="material-icons-outlined more-settings-info" title="Helps define the currency symbol placement. You can have the currency symbol show at the left or the right side.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings#scc_pdf_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5" style="margin-top: 1em; background-color:#f8f9ff;padding-bottom:1em;">
					<div class="more-settings-section">
						<div class="sccsubtitle sccsubtitle_backend">
							<span class="title-sec">EMAIL</span> SETTINGS
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_emailsub" class="scc-calc-settings-lbl">Email Subject
									<i class="material-icons-outlined more-settings-info" title="Change your email subject for outgoing quotes sent via email to the user and a copy to yourself.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings#scc_email_quote_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_emailbody" class="scc-calc-settings-lbl">Email Body
									<i class="material-icons-outlined more-settings-info" title="Change the email body.">info</i>
								</label>
							</div>
							<div class="col-md-6">
								<a href="/wp-admin/admin.php?page=stylish_cost_calculator_settings#scc_email_quote_settings" target="_blank" class="scc-calc-settings-btn">In Global Settings</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5" style="margin-top: 1em; background-color:#f8f9ff;padding-bottom:1em;">
					<div class="more-settings-section">
						<div class="sccsubtitle sccsubtitle_backend">
							<span class="title-sec">WEBHOOK EVENT</span> OPTIONS
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_usercompl" class="scc-calc-settings-lbl">User completes an<br> <b>Email Quote Form</b>
									<i class="material-icons-outlined more-settings-info" title="Enable this to set an webhook endpoint when a user completes an email quote form.">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> data-target="quote-fillup" id="scc_set_webhook_quote" class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
						<div class="row col-md-12">
							<div class="col-md-6">
								<label id="label_userclicks" class="scc-calc-settings-lbl">User clicks the <b>Detailed List</b> button
									<i class="material-icons-outlined more-settings-info" title="Enable this to setup an webhook endpoint when a user clicks the 'detailed view' button">info</i>
								</label>
							</div>
							<div class="col-md-6" data-tooltip="You need to have a premium license to use this feature.">
								<div class="scc-switch">
									<input type="checkbox" <?php echo get_option('scc_licensed') == 0 ? 'disabled' : '' ?> data-target="detail-btn" id="scc_set_webhook_detail_view" class="form-control">
									<span class="slider round"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END OF EXTRA SETTINGS -->
		<!--<div class="row" style="display: block;">-->
			<!--    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">-->
				<!--            <label for="scc_label"><b>Change the "Total" word</b></label>-->
				<!--        </div>-->
				<!--        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">-->
					<!--            <input type="text" name="scc_change_total_word" placeholder="" value="<?php echo isset($parameters->objecttotalword) ? stripslashes($parameters->objecttotalword) : ''; ?>" id="scc_change_total_word" class="form-control scc_change_total_word">-->
					<!--        </div>-->
					<!--    </div>-->
					<!--<div class="row" style="display: block;">-->
						<!--<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">-->
							<!--        <label for="scc_label"><b>Change the "view detailed list" word</b></label>-->
							<!--    </div>-->
							<!--    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">-->
								<!--        <input type="text" name="scc_change_detailed_list_word" placeholder="" value="<?php echo isset($parameters->objectdetailedlistword) ? stripslashes($parameters->objectdetailedlistword) : ''; ?>" id="scc_change_detailed_list_word" class="form-control scc_change_detailed_list_word">-->
								<!--    </div>-->
								<!--</div>-->
								<!--<div class="row" style="display: block;">-->
									<!--<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">-->
										<!--        <label for="scc_label"><b>Change the "send quote by email" word</b></label>-->
										<!--    </div>-->
										<!--    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">-->
											<!--        <input type="text" name="scc_change_send_quote_word" placeholder="" value="<?php echo isset($parameters->objectsendquoteword) ? stripslashes($parameters->objectsendquoteword) : ''; ?>" id="scc_change_send_quote_word" class="form-control scc_change_send_quote_word">-->
											<!--    </div>-->
											<!--</div>-->
										</div>
										<div style="display: none;clear:both" id="trans" class="scc_wrapper">
											<div class="col-md-5 addedFieldsStyle" style="display: block;">
												<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
													<br><br>
													<div style="font-size:180%;" class="sccsubtitle sccsubtitle_backend scc_email_quote_label"><span style="font-weight:800;">LANGUAGE TRANSLATION</span> & WORD CHANGES</div><br>
												</div>
												<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 scroll">
													<!-- Start Local Translate style="display:none;" id="myDIV4"-->
													<table class="translate_table blueTable" id="translate_table">
														<thead>
															<tr>
																<th><b>Frontend Word</b></th>
																<th><b>Lang</b></th>
																<th><b>New Word / Translation</b></th>
															</tr>
														</thead>
														<tbody id="translate_table-tbody">
															<?php
															if (!($dictionary)) {
																echo '<tr><td><input type="text" disabled value="Total"></td><td><input type="text" value="en"></td><td><input type="text" value="Total"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size:15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Description"></td><td><input type="text" value="en"></td><td><input type="text" value="Description"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Unit Price"></td><td><input type="text" value="en"></td><td><input type="text" value="Unit Price"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Quantity"></td><td><input type="text" value="en"></td><td><input type="text" value="Quantity"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Price"></td><td><input type="text" value="en"></td><td><input type="text" value="Price"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="SEND"></td><td><input type="text" value="en"></td><td><input type="text" value="SEND"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Total Price"></td><td><input type="text" value="en"></td><td><input type="text" value="Total Price"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Summary"></td><td><input type="text" value="en"></td><td><input type="text" value="Summary"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Email Quote"></td><td><input type="text" value="en"></td><td><input type="text" value="Email Quote"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Detailed List"></td><td><input type="text" value="en"></td><td><input type="text" value="Detailed List"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Choose an option..."></td><td><input type="text" value="en"></td><td><input type="text" value="Choose an option..."></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Please choose an option !"></td><td><input type="text" value="en"></td><td><input type="text" value="Please choose an option !"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Your Name"></td><td><input type="text" value="en"></td><td><input type="text" value="Your Name"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Your Email"></td><td><input type="text" value="en"></td><td><input type="text" value="Your Email"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Your Phone"></td><td><input type="text" value="en"></td><td><input type="text" value="Your Phone"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Your Phone (Optional)"></td><td><input type="text" value="en"></td><td><input type="text" value="Your Phone (Optional)"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Coupon Code"></td><td><input type="text" value="en"></td><td><input type="text" value="Coupon Code"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>';
																echo '<tr><td><input type="text" disabled value="Please choose an option"></td><td><input type="text" value="en"></td><td><input type="text" value="Please choose an option"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
																echo '	<tr><td><input type="text" disabled value="Enter your coupon code"></td><td><input type="text" value="en"></td><td><input type="text" value="Enter your coupon code"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
																echo '	<tr><td><input type="text" disabled value="This code is not valid"></td><td><input type="text" value="en"></td><td><input type="text" value="This code is not valid"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
																echo '	<tr><td><input type="text" disabled value="Discount percentage"></td><td><input type="text" value="en"></td><td><input type="text" value="Discount percentage"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
																echo '	<tr><td><input type="text" disabled value="Your discount has been applied correctly"></td><td><input type="text" value="en"></td><td><input type="text" value="Your discount has been applied correctly"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
																echo '	<tr><td><input type="text" disabled value="Your discount has not been applied because the total price has to be between"></td><td><input type="text" value="en"></td><td><input type="text" value="Your discount has not been applied because the total price has to be between"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">cancel</a></td></tr>';
															} else {
																foreach ($dictionary as $dic) {
																	echo "<tr><td><input type='text' value='" . $dic->key . "' disabled></td><td><input type='text' value='" . $dic->lang . "'></td><td><input type='text' value='" . $dic->translation . "'></td><td><a href='javascript:void(0)'' class='fa material-icons' onClick='remove_rowTran(this)' style='font-size: 15px;'>cancel</a></td></tr>";
																}
															}
															?>
														</tbody>
													</table>
													<div class="col-lg-12 col-md-12 col-xs-12" style="text-align:center;padding-top:10px;padding-bottom:30px;min-width: 200px; background: antiquewhite;height: 20px; margin-bottom:30px;">
														<a href="javascript:void(0)" onClick="addNewTran(this)" class="crossnadd" style="font-size: 13px;">+ Add New Translate</a>
													</div>
													<!-- End Local Translate -->
												</div>
											</div>
										</div>
										<div id="shortcode-view" style="display: none;">
											<div class="col-md-7" style="max-width: 1000px;padding: 20px;background-color:#f8f9ff;border: 2px solid #8997f1; border-radius:8px;margin-top:20px;">
												<input disabled value="[scc_calculator type='text' idvalue='<?php echo esc_html($_GET['id']); ?>']" style="font-weight:bold;font-size:20px;margin-top:0px;margin-bottom:10px;width: 100%;color: #314af3;border: 0px; box-shadow: none;"></input>
												<span>Copy and paste this shortcode <a href="https://designful.freshdesk.com/support/solutions/articles/48000945180-adding-the-shortcode-calculator-to-your-webpage" target="_blank"><b><i><u>properly</u></i></b></a> into a code, text, shortcode, or shortblock widget within your page builder.<br>Do not use the visual text box.</span>
											</div>
										</div>
										<!-- END MORE SETTINGS -->
										<div style="clear: both;"></div><br />
										<?php if (array_key_exists('error', $_GET)) : ?>
											<div class="notice notice-error">
												<p><?php echo esc_html($_GET['error']); ?></p>
											</div>
										<?php endif;
										if (array_key_exists('success', $_GET)) : ?>
											<div class="notice notice-success">
												<p><?php echo esc_html($_GET['success']); ?></p>
											</div>
										<?php endif;
										$opt = get_option('scclk_opt');
										?>
										<form method="post">
											<input type="hidden" name="page" value="ttest_list_table">
											<?php
		/*$list_table = new Stylish_Cost_Calculator_Tabs_List();
	$list_table->prepare_items();
	$list_table->search_box( 'search', 's' );
	$list_table->disccay();*/
	?>
</form>
<?php if (!isset($_GET['id'])) {
	echo "<div style='color: #a00;'>ERROR - ID is not available</div>";
	exit;
} else {
	$form_id = $_GET['id'];
	if (!is_numeric($form_id)) {
		echo "<div style='color: #a00;'>ERROR - ID is not numeric</div>";
		exit;
	}
}
	// print_r($parameters->fontType);   exit;
?>
<div id="adminsettingsid" data-calculator_id="<?php echo $form_id; ?>" style="display: none;"></div>
<div class="col-xs-12 col-md-12 col-lg-12" id="myDIV" style="display:none;">
	<!-- START OF FONT SETTINGS AND COLORS -->
	<div class="col-xs-12 col-md-3 col-lg-3 addedFieldsStyle">
		<div class="col-xs-12 col-md-12 ">
			<div class="font-settings-title-head">Title Font Settings</div>
		</div><br>
		<div style="margin-top:20px;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-12 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-12"' ?> style="margin-top:20px;">
			<label class="scc_label col-md-4">Font Size</label>
			<select name="titlepricefontsize" id="titlepricefontsize" style="box-shadow: 1px 1px 1px #999; border: 0 none;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-4 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-4"' ?>>
				<option class="form-control servicepricefontsize" value="">Size</option>
				<?php
				for ($n = 10; $n <= 70; $n++) {
					if ($n . 'px' == $parameters->titleServicepricefontsize) {
						$select_ser = "selected";
					} else {
						$select_ser = "";
					} ?>
					<option class="form-control servicepricefontsize" value="<?php echo $n; ?>px" <?php echo $select_ser; ?>><?php echo $n; ?>px</option>
					<?php
				}
				?>
			</select>
		</div>
		<div <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-12 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-12"' ?> style="margin-top:20px;">
			<label class="scc_label col-xs-12 col-md-4">Title Font Type</label>
			<?php
			$allfonts = json_decode($scc_googlefonts_var->gf_get_local_fonts());
			?>
			<select id='titlescc_fonttype' style="box-shadow: 1px 1px 1px #999; border: 0 none;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-4 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-4"' ?>>
				<?php
				$fontIndex = 0;
				foreach ($allfonts->items as $allfont) {
					$selected = ($parameters->titleFontType == $fontIndex) ? "selected=selected" : "";
					echo "<option " . $selected . " value='" . $fontIndex . "'>" . $allfont->family . "</option>";
					$fontIndex++;
				}
					//  $fontIndex++;
					// }
				?>
			</select>
		</div>
		<div class="col-md-12" style="margin-top:20px;margin-bottom:20px;">
			<label class="scc_label col-xs-12 col-md-4" style="margin-bottom:5px;margin-bottom:5px;">Font Color</label>
			<input type="text" class="color-picker col-md-4" id="titlecolorPicker" value="<?php echo $parameters->titleColorPicker; ?>" />
		</div>
	</div>
	<!--- END OF TITLE FONT STTINGS --->
	<!-- OLD SERVICE FONT --->
	<div class="col-xs-12 col-md-3 col-lg-3 addedFieldsStyle">
		<div class="col-xs-12 col-md-12">
			<div class="font-settings-title-head">Service Font Settings</div>
		</div><br>
		<div <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-12 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-12"' ?> style="margin-top:20px;">
			<label class="scc_label col-md-6">Font Size</label>
			<select name="servicepricefontsize" id="servicepricefontsize" style="box-shadow: 1px 1px 1px #999; border: 0 none;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-6 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-6"' ?>>
				<option class="form-control servicepricefontsize" value="">Size</option>
				<?php
				for ($n = 8; $n <= 40; $n++) {
					if ($n . 'px' == $parameters->servicepricefontsize) {
						$select_ser = "selected=selected";
					} else {
						$select_ser = "";
					} ?>
					<option class="form-control servicepricefontsize" value="<?php echo $n; ?>px" <?php echo $select_ser; ?>><?php echo $n; ?>px</option>
					<?php
				}
				?>
			</select>
		</div>
		<div <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-12 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-12"' ?> style="margin-top:20px;">
			<label class="scc_label col-md-6">Font Type</label> </td>
			<?php
			$allfonts = json_decode($scc_googlefonts_var->gf_get_local_fonts());
			?>
			<select id='scc_fonttype' class="col-md-6" style="box-shadow: 1px 1px 1px #999; border: 0 none;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-6 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-6"' ?>>
				<?php
				$fontIndex = 0;
				foreach ($allfonts->items as $allfont) {
					$selected = ($fontIndex == $parameters->fontType) ? "selected=selected" : ""; ?>
					<option <?php echo $selected; ?> value="<?php echo $fontIndex; ?>"><?php echo $allfont->family; ?></option>
					<?php $fontIndex++;
				} ?>
			</select>
		</div>
		<div class="col-md-12" style="margin-top:20px;margin-bottom:20px;">
			<label class="scc_label col-md-6">Font Color</label>
			<input type="text" class="color-picker col-md-6" id="colorPicker" value="<?php echo $parameters->colorPicker; ?>" />
		</div>
	</div>
	<!-- END OF SERVICE FONT SETTING -->
	<div class="col-xs-12 col-md-3 col-lg-3 addedFieldsStyle">
		<table cellpadding="5px" cellspacing="5px" style="margin-top: 60px;">
			<div class="col-xs-12 col-md-12">
				<div class="font-settings-title-head">Object Settings</div>
			</div><br>
			<tr>
					<!--<td class="col-xs-12 col-md-1"><label class="scc_label">Admin Email</label></td>
						<td class="col-xs-12 col-md-2"><input type="text" /></td> -->
						<td class="col-xs-12 col-md-3"><label class="scc_label">Object Size</label>
						</td>
						<td>
							<div <?php echo get_option('scc_licensed') == 0 ? 'disabled class="col-md-4 tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="col-md-4"' ?>>
								<select name="servicepricefontsize" id="objectservicepricefontsize" style="box-shadow: 1px 1px 1px #999; border: 0 none;" <?php echo get_option('scc_licensed') == 0 ? 'disabled class="tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : '' ?>>
									<option class="form-control servicepricefontsize" value="">Size</option>
									<?php
									for ($n = 1; $n <= 100; $n++) {
										if ($n . 'px' == $parameters->objectServicepricefontsize) {
											$select_ser = "selected";
										} else {
											$select_ser = "";
										} ?>
										<option class="form-control servicepricefontsize" value="<?php echo $n; ?>px" <?php echo $select_ser; ?>><?php echo $n; ?>px</option>
										<?php
									}
									?>
								</select>
							</div>
						</td>
					</tr>
					<tr>
					<!--<td class="col-xs-12 col-md-1"><label class="scc_label">Email Subject</label></td>
						<td class="col-xs-12 col-md-2"><input type="text" /></td>-->
						<td class="col-xs-12 col-md-3"><label class="scc_label">Object Color</label> </td>
						<td>
							<input <?php echo get_option('scc_licensed') == 0 ? 'disabled class="color-picker tooltipadmin-right" data-tooltip="You need purchase Stylish Cost Calculator Premium"' : 'class="color-picker"' ?> type="text" id="objectcolorPicker" value="<?php echo $parameters->objectColorPicker ?>" />
						</td>
					</tr>
					<tr>
					<!--<td class="col-xs-12 col-md-1"> <label class="scc_label">Admin Email:</label></td>
						<td class="col-xs-12 col-md-2"><input type="text" /></td> -->
						<td class="col-xs-12 col-md-3 SCC_td"></td>
						<td> </td>
					</tr>
				</table>
			</div>
		</div>
		<!-- END OF ALL FONT SETTINGS AND COLORS -->
		<script type="text/javascript">
			jQuery(function($) {
				$('.color-picker').wpColorPicker();
			});
		</script>
		<!-- **************************************************************************************************** -->
		<?php include_once SCC_DIR . '/admin/edit-calculator-main-body.php'; ?>
		<?php include_once SCC_DIR . '/admin/logo-footer.php'; ?>
		<script>
			function germanCharactersInverse(text) {
				if (typeof text == "string") {
					text = text.replace(/\[a\]/g, 'ä')
					text = text.replace(/\[o\]/g, 'ö')
					text = text.replace(/\[u\]/g, 'ü')
					text = text.replace(/\[b\]/g, 'ß')
					text = text.replace(/\[A\]/g, 'Ä')
					text = text.replace(/\[O\]/g, 'Ö')
					text = text.replace(/\[U\]/g, 'Ü')
					text = text.replace(/\[B\]/g, 'ẞ')
				}
				return text
			}
			function addNewTranslationsToDictionary() {
				var couponCodeAdded = false
				jQuery('#translate_table').find('tr').each(function(index, ob) {
					jQuery(ob).find('input').each(function(index, child) {
						if (jQuery(child) && jQuery(child).val() && jQuery(child).val() === "Coupon Code") {
							couponCodeAdded = true
						}
					})
				})
				if (!couponCodeAdded) {
					jQuery('#translate_table-tbody').append('<tr><td><input type="text" disabled value="Coupon Code"></td><td><input type="text" value="en"></td><td><input type="text" value="Coupon Code"></td><td><a href="javascript:void(0)" class="fa material-icons" onclick="remove_rowTran(this)" style="font-size: 15px;">Cancel</a></td></tr>')
				}
			}
			jQuery(document).ready(function() {
				addNewTranslationsToDictionary()
				jQuery('.material-icons-outlined.more-settings-info:not([data-image-preview])').tooltip();
				jQuery('.material-icons-outlined.more-settings-info[data-image-preview]').each((i, e) => {
					jQuery(e).tooltip({
						position: {
							at: "left+25 bottom-55"
						},
						items: "[data-image-preview]",
						content: (a, b, c) => {
							return `<img src="${jQuery(e).data('imagePreview')}" />`;
						}
					});
				})
				jQuery('.splitter').click(function() {
					jQuery('#calcPreview').slideToggle('slow');
				})
				setTimeout(function() {
					addSortableFeatureEachElement(true)
				}, 1000);
				jQuery(document).keypress(function(event) {
					var showAlert = false
					if (event.key == "'" || event.key == "\"") {
						if (jQuery(event.target).hasClass('input_pad')) {
							showAlert = true
						}
					}
					if (showAlert) {
						alert('Adding Quotes to this element could break the calculator. Please try to remove quotes. Thank you')
					}
				//alert('Handler for .keypress() called. - ' + event.charCode);
			});
				<?php
				$dat = json_decode(stripslashes(stripslashes($allinputstoadd->formstored)));
			//stripslashes may cause issues
				$i = 0;
			//$dat = is_array($dat) ? $dat : array($dat);
				$ii = count($dat);
				foreach ($dat as $fild) {
					?>
					var ele = 0;
					var theOpt = jQuery('#inputtoadd').html();
					jQuery('#allinputstoadd').append(theOpt);
					var ths = '#allinputstoadd .addedFieldsStyle:eq(<?php echo $i; ?>)';
					var xelement = parseInt(<?php echo $i; ?>);
					jQuery(ths).find('.sectiontitle').val(germanCharactersInverse("<?php echo $fild->name; ?>"));
					jQuery(ths).find('.title_section_no_edit').text(germanCharactersInverse("<?php echo $fild->name; ?>"));
					if (jQuery(ths).find('.title_section_no_edit').text() === '') {
						jQuery(ths).find('.title_section_no_edit').text('Section Name')
					}
					jQuery(ths).find('.sectionDescription').val(germanCharactersInverse('<?php echo str_replace("///accordion:yes///", "", (str_replace("[{accordion:yes}]", "", str_replace('"', '\"', str_replace("'", "\'", $fild->desc))))) ?>'));
					jQuery(ths).find('.description_section_no_edit').text(germanCharactersInverse('<?php echo str_replace("///accordion:yes///", "", (str_replace("[{accordion:yes}]", "", str_replace('"', '\"', str_replace("'", "\'", $fild->desc))))) ?>'));
					if (jQuery(ths).find('.description_section_no_edit').text().length === 0 || jQuery(ths).find('.description_section_no_edit').text() == ' ') {
						jQuery(ths).find('.description_section_no_edit').text('Description')
					}
					var showSectionTotal = <?php echo isset($fild->showSectionTotal) && $fild->showSectionTotal ? "true" : "false"; ?>;
					jQuery(ths).find('input[name="scc-section-total"]').prop("checked", showSectionTotal);
					/* checking accordion START */
					<?php
					if (strpos(str_replace('"', '\"', str_replace("'", "\'", $fild->desc)), '///accordion:yes///') !== false) {
						?>
						jQuery(ths).find('.scc_accordion_section').prop("checked", true)
						<?php
					}
					if (strpos(str_replace('"', '\"', str_replace("'", "\'", $fild->desc)), '[{accordion:yes}]') !== false) {
						?>
						jQuery(ths).find('.scc_accordion_section').prop("checked", true)
						<?php
					}
					?>
					/* checking accordion END */
					jQuery(ths).attr('id', 'Sccvo_<?php echo $i; ?>');
					<?php
					if (!empty($fild->value)) {
						foreach ($fild->value as $field) {
							?>
							addAnotherElement1(ths);
							ele++;
							<?php
						//          $sval = $field->Nooptions;
							if (empty($field->minmax)) {
							//$slval = $sval->min_max;
								?>
								jQuery(ths).find('.inputoption_slidchk:last').prop('checked', false);
								<?php
							} else {
								?>
								console.log(<?php echo json_encode($field->minmax); ?>);
								jQuery(ths).find('.inputoption_slidchk:last').prop('checked', true);
								jQuery(ths).find('.selslideropt_3:eq(<?php echo $field->subsection ?>)').slideToggle();
								jQuery(ths).find('.has-tooltip').tooltip();
								<?php foreach ($field->minmax as $slval) {
									?>
									var No = <?php echo $slval->No; ?>;
									if (No != 0) {
										console.log(<?php echo json_encode($slval->value1); ?>);
										jQuery(ths).find('.selslideropt_3:last').find('.price_table:last').last().append('<tr><th ><input type="number" value="" class="input_pad sliderinputoption scc_input"  style="width: 90px; margin-top:5px; height: 40px; padding:4px;margin-left:12px;" align="center" disabled/></th><th ><input type="number" value="" class="input_pad sliderinputoption_2 scc_input"  style="margin-top:10px; height: 40px; width: 90px; margin-top:5px;padding:4px;margin-left:12px;" align="center"/></th><th ><input type="number" min=0 class="input_pad sliderinputoption_5 scc_input" value=""  style="width: 90px; margin-top:5px; height: 40px; padding:4px;margin-left:12px;" align="center"/></th><th><a href="javascript:void(0)" class="fa material-icons" onClick="remove_row(this)" style="font-size: 15px;"> X</a></th></tr>');
									}
									jQuery(ths).find('.selslideropt_3:last').find('.sliderinputoption_T:last').val(germanCharactersInverse(<?php echo json_encode($slval->title); ?>));
									jQuery(ths).find('.selslideropt_3:last').find('.sliderinputoption:eq(' + No + ')').val(germanCharactersInverse(<?php echo json_encode($slval->name); ?>));
									jQuery(ths).find('.selslideropt_3:last').find('.sliderinputoption_2:eq(' + No + ')').val(germanCharactersInverse(<?php echo json_encode($slval->value1); ?>));
									jQuery(ths).find('.selslideropt_3:last').find('.sliderinputoption_5:eq(' + No + ')').val(germanCharactersInverse(<?php echo json_encode($slval->value2); ?>));
									jQuery(ths).find('.selslideropt_3:last').find('.scc_title_column_dskp_slider:eq(' + No + ')').val(germanCharactersInverse(<?php echo isset($slval->column_dskp) ? json_encode($slval->column_dskp) : null; ?>));
									jQuery(ths).find('.selslideropt_3:last').find('.scc_title_column_mobl_slider:eq(' + No + ')').val(germanCharactersInverse(<?php echo isset($slval->column_mobl) ? json_encode($slval->column_mobl) : null; ?>));
								<?php } ?>
								jQuery(ths).find('.selslideropt_3:last').find('.styled-accordion').sccAccordion();
								jQuery(ths).find('.fieldDatatoAdd').find('.slidoption_3:eq(<?php echo $field->subsection ?>)').val(<?php echo $field->step; ?>);
								jQuery(ths).find('.fieldDatatoAdd').find('.slidoption_4:eq(<?php echo $field->subsection ?>)').val(<?php echo $field->defaultValue; ?>);
								jQuery(ths).find('.fieldDatatoAdd').find('.slider-discount-type:eq(<?php echo $field->subsection ?>)').val("<?php echo isset($field->isSlidingScale) && $field->isSlidingScale ? 'sliding-scale' : 'bulk-pricing'; ?>");
								<?php
							}
							foreach ($field->Nooptions as $x) {
								?>
								if (jQuery(ths).find('.getfieldoptionx').get() == "") {
									var theOpt = jQuery('#form-line').html();
									jQuery(ths).find('.form-line').append(theOpt);
									ele++;
								}
								<?php
								if ($x->type == "'scc_custom_math'") {
									?>
									var tmpp = "scc_custom_math";
									<?php
								} else {
									?>
									var tmpp = jQuery(<?php echo $x->type; ?>).attr('id');
									<?php
								}
								?>
								AddSection(ths, <?php echo $x->element; ?>, tmpp)
								<?php foreach ($x->value as $val) {
									?>
									UpdateSection(ths, tmpp, <?php echo isset($val) && isset($val->title) ? json_encode($val->title) :  '""'; ?>, <?php echo isset($val->name) ? json_encode($val->name) : '""'; ?>, <?php echo isset($val) && isset($val->value1) ? $val->value1 : '""'; ?>, <?php echo isset($val->value2) ? json_encode($val->value2) : '""'; ?>, <?php echo $x->length; ?>, <?php echo $val->No; ?>, ele, <?php echo isset($val->mandatory) ?  json_encode($val->mandatory) : '""'; ?>, <?php echo isset($val->column_dskp) ?  json_encode($val->column_dskp) : '""'; ?>, <?php echo isset($val->column_mobl) ?  json_encode($val->column_mobl) : '""'; ?>, <?php echo isset($val) && isset($val->opt_default) ? json_encode($val->opt_default) :  '""'; ?>, <?php echo isset($val) && isset($val->inputBoxVariant) ? json_encode($val->inputBoxVariant) :  '""'; ?>, <?php echo isset($x->mandatory) && (bool) $x->mandatory ? 'true' : 'false'; ?>)
									<?php
								}
							}
						}
					}
					$i++;
				}
				?>
				jQuery('#allinputstoadd .down:last').css("display", "none");
				jQuery('#allinputstoadd .up:first').css("display", "none");
				jQuery('#allinputstoadd .down').not(':last').css("display", "block");
				jQuery('#allinputstoadd .up').not(':first').css("display", "block");
			});
function AddSection($this, section, tpe) {
	switch (tpe) {
		case "titledescdiv":
					// fieldOpt2 = jQuery('#titledescdiv').html();
					// break;
					// case "AsliderOption":
					// fieldOpt2 = jQuery('#AsliderOption').html().replace(/XXYYXX/g, 1);
					// break;
					case "switchoption":
					fieldOpt2 = jQuery('#switchoption').html().replace(/XXYYXX/g, 1);
					break;
					case "buttonoption":
					fieldOpt2 = jQuery('#buttonoption').html().replace(/XXYYXX/g, 1);
					break;
					case "selectoption":
					fieldOpt2 = jQuery('#selectoption').html().replace(/XXYYXX/g, 1);
					break;
					case "comment_option":
					fieldOpt2 = jQuery('#comment_option').html().replace(/XXYYXX/g, 1);
					break;
					case "number_option":
					fieldOpt2 = jQuery('#number_option').html().replace(/XXYYXX/g, 1);
					break;
					case "scc_custom_math":
					fieldOpt2 = "";
					break;
					default:
					fieldOpt2 = "";
				}
				fieldOpt2 = '<div class="elements_added">' + fieldOpt2 + '</div>'
				jQuery($this).find('.BodyOption:last').append(fieldOpt2);
			}
			function UpdateSection($this, tpe, title, name, value1, value2, length, No, ele, mandatory, column_dskp, column_mobl, opt_default, inputBoxVariant, elementMandatory) {
				name = germanCharactersInverse(name)
				title = germanCharactersInverse(title)
				value1 = germanCharactersInverse(value1)
				value2 = germanCharactersInverse(value2)
				switch (tpe) {
					case "titledescdiv":
					jQuery($this).find('.BodyOption:last').find('.titleinputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.descinputoption').val(value1);
					break;
					case "AsliderOption":
					jQuery($this).find('.BodyOption:last').find('.sliderinputoption_T:eq(' + No + ')').val(title);
					jQuery($this).find('.BodyOption:last').find('.sliderinputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.sliderinputoption_2:eq(' + No + ')').val(value1);
					jQuery($this).find('.BodyOption:last').find('.sliderinputoption_5:eq(' + No + ')').val(value2);
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.price_table:last').last().append('<tr><th ><input type="number" value="" class="input_pad sliderinputoption"  style="width: 100%;"align="center" disabled/></th><th ><input type="number" value="" class="input_pad sliderinputoption_2"  style="width: 100%;"align="center"/></th><th ><input type="number" min=0 class="input_pad sliderinputoption_5" value=""  style="width: 100%;"align="center"/></th><th><a href="javascript:void(0)" class="fa material-icons" onClick="remove_row(this)" style="font-size: 15px;">cancel</a></th></tr>');
					}
					break;
					case "switchoption":
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.switchinputoption:eq(' + (No) + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.switchinputoption_2:eq(' + (No) + ')').val(value1);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.fieldFormat:eq(' + (No) + ')').val(value2);
					if (opt_default) {
						console.log(true);
						// jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_accordion_section:eq('+No+')').prop('checked', true).closest('.scc-col-xs-2.scc-col-md-2.tooltipadmin-left').removeAttr('data-tooltip')
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.col-xs-2.col-md-2.tooltipadmin-left:eq(' + No + ')').css('background-color', '#56b665').removeAttr('data-tooltip').attr('data-selected', true);
					}
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.switchoption_2:last').append(jQuery('#switchoption .switchoption_2').html().replace(/XXYYXX/g, ((No + 2))));
					}
					scc_jQuery($this).find('[name="chkbx-mandatory"]:last').prop('checked', elementMandatory);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_title_column_dskp_chkbx:eq(' + No + ')').val(column_dskp);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_title_column_mobl_chkbx:eq(' + No + ')').val(column_mobl);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion').sccAccordion();
					break;
					case "buttonoption":
					jQuery($this).find('.BodyOption:last').find('.inputbuttonservice_title:eq(' + No + ')').val(title);
					jQuery($this).find('.BodyOption:last').find('.buttoninputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.buttoninputoption_2:eq(' + No + ')').val(value1);
					//  jQuery($this).find('.BodyOption:last').find('.fieldFormat:eq('+No+')').val(value2);
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.buttonoption_2:last').append(jQuery('#buttonoption .buttonoption_2').html().replace(/XXYYXX/g, ((No + 2) + 1)));
					}
					break;
					case "selectoption":
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_title:eq(' + No + ')').val(title);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').val(mandatory);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').val();
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').val() == 'yes') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').prop('checked', true);
					}
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').val() == 'no') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_dropdown:eq(' + No + ')').prop('checked', false);
					}
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_title_column_dskp:eq(' + No + ')').val(column_dskp);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_title_column_mobl:eq(' + No + ')').val(column_mobl);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_2:eq(' + No + ')').val(value1);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_desc:eq(' + No + ')').val(value2);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion').sccAccordion();
					if (opt_default) {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.col-xs-2.col-md-2.tooltipadmin-left:eq(' + No + ')').css('background-color', '#56b665').removeAttr('data-tooltip').attr('data-selected', true)
					};
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.selectoption_2:last').append(jQuery('#selectoption .selectoption_2').html().replace(/XXYYXX/g, (No + 2)));
					}
					break;
					case "comment_option":
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_title:eq(' + No + ')').val(title);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').val(mandatory);
					console.log(jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').val());
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').val() == 'yes') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').prop('checked', true);
					}
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').val() == 'no') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_comment:eq(' + No + ')').prop('checked', false);
					}
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_2:eq(' + No + ')').val(value1);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_desc:eq(' + No + ')').val(value2);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion:eq(0)').find('.scc_title_column_dskp_cmntbx').val(column_dskp);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion:eq(0)').find('.scc_title_column_mobl_cmntbx').val(column_mobl);
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.selectoption_2:last').append(jQuery('#selectoption .selectoption_2').html().replace(/XXYYXX/g, (No + 2)));
					}
					jQuery($this).find('.BodyOption:last').find('.styled-accordion').sccAccordion();
					break;
					case "number_option":
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_title:eq(' + No + ')').val(title);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').val(mandatory);
					console.log(jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').val());
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').val() == 'yes') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').prop('checked', true);
					}
					if (jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').val() == 'no') {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.scc_mandatory_number:eq(' + No + ')').prop('checked', false);
					}
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption:eq(' + No + ')').val(name);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_2:eq(' + No + ')').val(value1);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('.inputoption_desc:eq(' + No + ')').val(value2);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion').find('.scc_title_column_dskp_numbx').val(column_dskp);
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion').find('.scc_title_column_mobl_numbx').val(column_mobl);
					jQuery($this).find('.BodyOption:last').find('.content:last').find('[name="quantity-input--style-selection"]:eq(' + No + ')').val(inputBoxVariant);
					if ((length - No) > 1) {
						jQuery($this).find('.BodyOption:last').find('.content:last').find('.selectoption_2:last').append(jQuery('#selectoption .selectoption_2').html().replace(/XXYYXX/g, (No + 2)));
					}
					jQuery($this).find('.BodyOption:last').find('.content:last .styled-accordion').sccAccordion();
					break;
					case "scc_custom_math":
					jQuery($this).find('.scc_custom_math:last').slideToggle();
					jQuery($this).parent().find('.scc_custom_math_checkbox').attr('checked', true);
					jQuery($this).find('.scc_custom_math:last').find('.scc_custom_math_name').val(title);
					jQuery($this).find('.scc_custom_math:last').find('.scc_custom_math_type').val(name);
					jQuery($this).find('.scc_custom_math:last').find('.scc_custom_math_value').val(value2);
					jQuery($this).find('.scc_custom_math:last').find('.scc_custom_math_display_front_end').prop('checked', column_dskp);
					jQuery($this).find('.scc_custom_math:last').find('.scc_custom_math_display_detailed_list').prop('checked', column_mobl);
					jQuery($this).find('.scc_custom_math:last').find('.content:last .styled-accordion').sccAccordion();
					fieldOpt2 = "";
					break;
					fieldOpt2 = "";
					break;
					default:
					fieldOpt2 = jQuery('#titledescdiv:eq(' + No + ')').html();
					break;
				}
			}
			function renderSliderInputs($this, val, no) {
				jQuery($this).find('.fieldDatatoAdd').find('.slidoption_3:eq(' + no + ')').val(step);
				jQuery($this).find('.fieldDatatoAdd').find('.slidoption_4:eq(' + no + ')').val(sliderdefault);
			}
		</script>
		<!-- JS for Video Tutorials BTN --->
		<script>
		// Get the modal
		var modalvideoSCC = document.getElementById('myModalVideosSCC');
		// Get the button that opens the modal
		var btnvideoSCC = document.getElementById("myBtnVideosSCC");
		// Get the <span> element that closes the modal
		var spanvideoSCC = document.getElementsByClassName("closevideoSCC")[0];
		// When the user clicks the button, open the modal
		if (btnvideoSCC) {
			btnvideoSCC.onclick = function() {
				modalvideoSCC.style.display = "block";
			}
		}
		// When the user clicks on <span> (x), close the modal
		spanvideoSCC.onclick = function() {
			modalvideoSCC.style.display = "none";
		}
		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
			if (event.target == modalvideoSCC) {
				modalvideoSCC.style.display = "none";
			}
		}
	</script>
	<script>
		// Get the modal
		var modalsupportSCC = document.getElementById('myModalSupportSCC');
		// Get the button that opens the modal
		var btnsupportSCC = document.getElementById("myBtnSupportSCC");
		// Get the preview box
		var calcPreview = document.getElementById("calcPreview");
		// Get the <span> element that closes the modal
		var spansupportSCC = document.getElementsByClassName("closesupportSCC")[0];
		// When the user clicks the button, open the modal
		// btnsupportSCC.onclick = function() {
		// 	modalsupportSCC.style.display = "block";
		// 	calcPreview.style.display = "none";
		// }
		// When the user clicks on <span> (x), close the modal
		spansupportSCC.onclick = function() {
			modalsupportSCC.style.display = "none";
			calcPreview.style.display = "block";
		}
		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
			if (event.target == modalsupportSCC) {
				modalsupportSCC.style.display = "none";
			}
		}
	</script>