@extends('layouts.app')
@section('content')
	@foreach($checkforlayout as $checkforlayout)
				<span class='details' accountid='{{$accountid}}' status='{{$layoutdetails}}' layoutid='{{$checkforlayout->layoutid}}' {{$pagetypewrap}}></span>
	@endforeach
<div class='sortable_tray2' style='display:none;'>
	<ul id="sortable" class='nostylelist sortable_tray2ul' style='padding:0px;'>
<!-- 		<li class="" style='margin-bottom:5px;'><table><tr><td>a</td><td>b</td><td>Item 1</td></tr></table></li>
		<li class="" style='margin-bottom:5px;'><table><tr><td>a</td><td>b</td><td>Item 2</td></tr></table></li> -->
	</ul>
</div>


<div class='templates-plate ggggg ui-widget-content' id='draggable'><div class='loadheadinghere'></div><div class='customscrollbar pasteall-templates'><div class='loader cssforloader_temp'></div></div></div>

<div class='secondpseudopage ui-widget-content' id='draggable' style='height:550px;width:300px;margin-left:580px;position:absolute;display:none;'><div class='loadheadinghere2'></div><div class='customscrollbar pasteall-templates2' style='background:white;height:510px;overflow-y:scroll;'><div class='loader' style='margin-left:120px;margin-top:180px;'></div></div></div>

<div class='thirdpseudopage ui-widget-content' id='draggable' style='height:550px;width:300px;margin-left:890px;position:absolute;display:none;'><div class='loadheadinghere3'></div><div class='customscrollbar pasteall-templates3' style='background:white;height:510px;overflow-y:scroll;'><div class='loader' style='margin-left:120px;margin-top:180px;'></div></div></div>

<div id='draggable' class='sortable_tray'>
	<div class='sortableheader' style='width:100%;border-bottom:1px solid rgba(128,128,128,0.4); margin-bottom:10px;padding:5px;'></div>
	<ul id="sortable" class='nostylelist customscrollbar' style='height:470px;overflow-y:scroll;'>
<!-- 		<li class="ui-state-default" style='margin-bottom:10px;'><table><tr><td>a</td><td>b</td><td>Item 1</td></tr></table></li>
		<li class="ui-state-default" style='margin-bottom:10px;'><table><tr><td>a</td><td>b</td><td>Item 2</td></tr></table></li> -->
	</ul>
	<div class='footer_details' style='padding:5px;border-top:1px solid rgba(128,128,128,0.4);'></div>
</div>



	<table width='100%'>
		<tr width='100%'>
			<td width="20%" class='templateconsole-nav'>

			</td>
			<td width='80%' class='templateconsole-body' style='background:;vertical-align:top;padding-left:10px;'>
				<table width="100%">
					<tr width="100%">
																			<style>.styling_dots{color:rgba(255,69,0,0.4);}</style>
												<span class="styling_dots" style="font-size:13px;"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg> Status</span>
						<td width="99%" class="_default_landingpage_">DOROTS</td>
						<td width="1%"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<script type="text/javascript">

function removepreloaders(){
	$(".loadheadinghere").html("");
	$(".pasteall-templates").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

    $(".templates-plate").hide();
    $(".secondpseudopage").hide();
    $(".maintemplate-preloader").remove();
}

function closeplate(){
	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

	return closeplate;
}


$( document ).ready(function() {
	theheader = "<table style='color:black;' width='100%'><tr width='100%'><td width='100%' style='vertical-align:top;padding:5px 0px 5px 5px;border-bottom:1px solid rgba(128,128,128,0.4);'>Templating</td></tr></table>";

	sydnv1 = "<table width='100%'>";
	sydnv2 = "<tr width='100%' class='linkeffect toggletemplates-plate'>";
	sydnv3 = "<td width='100%' class='appnavsli'><li>Page Templates</li></td>";
	sydnv4 = "</tr>";

	sydnv5 = "<tr width='100%' class='linkeffect'>";
	sydnv6 = "<td width='100%' class='appnavsli'><li>Table Templates</li></td>";
	sydnv7 = "</tr>";

	sydnv8 = "<tr width='100%' class='linkeffect'>";
	sydnv9 = "<td width='100%' class='appnavsli'><li>Forms</li></td>";
	sydnw1 = "</tr>";

	sydnx1 = "<tr width='100%' class='linkeffect'>";
	sydnx2 = "<td width='100%' class='appnavsli'><li>Effects and Animation</li></td>";
	sydnx3 = "</tr>";

	sydny1 = "<tr width='100%' class='linkeffect'>";
	sydny2 = "<td width='100%' class='appnavsli'><li>Chat</li></td>";
	sydny3 = "</tr>";

	sydnz1 = "<tr width='100%' class='linkeffect'>";
	sydnz2 = "<td width='100%' class='appnavsli'><li>Report Bugs</li></td>";
	sydnz3 = "</tr>";

	sydna1 = "<tr width='100%' class='linkeffect'>";
	sydna2 = "<td width='100%' class='appnavsli'><li>Update Build</li></td>";
	sydna3 = "</tr>";
	sydna4 = "</table>";

	sydnb1 = "<tr width='100%' class='linkeffect pagebuildedits'>";
	sydnb2 = "<td width='100%' class='appnavsli'><li>Page Build</li></td>";
	sydnb3 = "</tr>";

	totalnavi1 =  theheader + sydnv1 + sydnv2 + sydnv3 + sydnv4 + sydnb1 + sydnb2 + sydnb3 + sydna4;

	fullnav = totalnavi1;
	$(".templateconsole-nav").html(fullnav);
});

// toggletemplates-plate
$(document).on("click", '.toggletemplates-plate', function(event) {
    event.preventDefault();
    // check if this is already existing in the database 
	var accountid = $(".details").attr("accountid");
	var status = $(".details").attr("status");

	if(status == 'saved'){
		open_template_database_render();
		return;
	}
	
    $(".templates-plate").show();
	// remove all preloaders
	// removepreloaders();
	$(".loadheadinghere").html("");
	$(".pasteall-templates").html("<div class='loader cssforloader_temp'></div>");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='110%' style='padding:5px 0px 5px 5px;'>Page Templates</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";
    templates = temp1 + temp2 + tempz;
    something = "";

    // load templates from php
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadpagetemplates";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{something:something},
        success:function(data){
        var data = data.trim();

        $(".loadheadinghere").html(templates);
        $(".pasteall-templates").html(data);

      }
    });
});


// this is to load the content of the editing of the page build pagebuildedits
$(document).on("click", '.pagebuildedits', function(event) {
    event.preventDefault();
    $(".templates-plate").show();
	// remove all preloaders
	// removepreloaders();
	// always put preloaders
	$(".loadheadinghere").html("");
	$(".pasteall-templates").html("<div class='loader cssforloader_temp'></div>");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%' style='margin-bottom:10px;'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='padding:5px 0px 5px 5px;'>Page Build</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";
    templates = temp1 + temp2 + tempz;
    something = "";
	
    // load templates from php
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadpagebuild";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{something:something},
        success:function(data){
        var data = data.trim();

        $(".loadheadinghere").html(templates);
        $(".pasteall-templates").html(data);

      }
    });
});




// this is to remove the plate with secondary options like the different templates removetemplates-plate
$(document).on("click", '.removetemplates-plate', function(event) {
    removepreloaders();
    $(".template-render-plate").remove();
    $(".thirdpseudopage").hide();
});

// removetemplates-plate
$(document).on("click", '.removetemplates-plate2', function(event) {
	// $(".loadheadinghere").html("");
	// $(".pasteall-templates").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

 //    $(".templates-plate").hide();
    $(".secondpseudopage").hide();
    $(".thirdpseudopage").hide();
    // $(".maintemplate-preloader").remove();
});

// 
$(document).on("click", '.removetemplates-plate3', function(event) {
	// $(this).remove();
    $(".thirdpseudopage").hide();
});

$(document).on("click", '.previewtemplate', function(event) {
    previewtype = $(this).attr("previewtype");
    $(".template-render-plate").remove();
    $(".maintemplatepage-preloader").remove();

    $(".ggggg").after("<div class='template-render-plate' style='background:rgba(220,220,220,1);border:3px solid white;position:absolute;margin-left:580px;width:50%;border-radius:5px;'><div class='loader' style='margin-left:300px;margin-top:230px;'></div></div>");
    
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/rendertemplates";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{previewtype:previewtype},
        success:function(data){
        var data = data.trim();
        
        // $(".pasteall-templates").html(data);
        $(".template-render-plate").html(data);
      }
    });
});

// this loads the final render for editing finaltemplaterender
$(document).on("click", '.finaltemplaterender', function(event) {
    previewtype = $(this).attr("previewtype");
    $(".templates-plate").hide();
    $(".template-render-plate").remove();

    $(".templateconsole-body").html("<div class='loader maintemplate-preloader' style='margin-left:500px;margin-top:230px;'></div>");

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/rendertemplatesforedit";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{previewtype:previewtype},
        success:function(data){
        var data = data.trim();
        
        // $(".pasteall-templates").html(data);
        $(".templateconsole-body").html(data);

		$('table').each(function (index) {
			thewidth = $(this).width();//alert(thewidth);
			$(this).attr("width", thewidth+"px");
		    // alert('index' + index + ', text: ' + $(this).text());
		});

		$('tr').each(function (index) {
			thewidth = $(this).width();//alert(thewidth);
			$(this).attr("width", thewidth+"px");
		    // alert('index' + index + ', text: ' + $(this).text());
		});

		$('td').each(function (index) {
			thewidth = $(this).width();//alert(thewidth);
			$(this).attr("width", thewidth+"px");
		    // alert('index' + index + ', text: ' + $(this).text());
		});

      }
    });
});

// this is to adjust the columns of he pages adjustpage 
$(document).on("click", '.adjustpage', function(event) {
    if($('.pagetemplate')[0]){
        // if a page design already exists do nothing   
    }else{
    	// if the page template does not exist please put the blank template 
		// $(".universal_error_text").html("Error: Adjustments can't happen until a page template has being created.");
		// $(".universalerror_tray").show();
		// return;

	    $(".templateconsole-body").html("<div class='loader maintemplate-preloader' style='margin-left:500px;margin-top:230px;'></div>");

	    var previewtype = "blanktheme";
	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/rendertemplatesforedit";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{previewtype:previewtype, pagename:pagename, pagen_text_details:pagen_text_details},
	        success:function(data){
	        var data = data.trim();
	        
	        // $(".pasteall-templates").html(data);
	        $(".templateconsole-body").html(data);

			$('table').each(function (index) {
				thewidth = $(this).width();//alert(thewidth);
				$(this).attr("width", thewidth+"px");
			    // alert('index' + index + ', text: ' + $(this).text());
			});

			$('tr').each(function (index) {
				thewidth = $(this).width();//alert(thewidth);
				$(this).attr("width", thewidth+"px");
			    // alert('index' + index + ', text: ' + $(this).text());
			});
	      }
	    });
    }
	// load the page on here or template
    $(".ggggg").after("<div class='template-render-plate' style='background:rgba(220,220,220,1);border:3px solid white;position:absolute;margin-left:580px;width:50%;border-radius:5px;'><div class='loader' style='margin-left:300px;margin-top:230px;'></div></div>");

	// arrange columns
	var arrangement = "<table width='100%'><tr width='100%' class='cols_td_wrappers'>";
	$(".pagecols").each(function () {

		// start of icons for the td navigation
		var icon_unique_id = Math.random().toString(36).substring(7);
		var thenavleft = "<svg class='bi bi-filter-left linkeffect' id='pagebuild_togglenav' uniqueid='"+icon_unique_id+"' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/></svg>";

		var svg_nobackground_color = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

		// end of icons for the td navigation


		var thewidth = $(this).attr("widthpercent");
		var coltype = $(this).attr("coltype");



		// generate a random string
		var rand = Math.random().toString(36).substring(7);
		if(coltype == 'active'){
			var topnav = "<p style='position:absolute;margin-top:-25%;text-align:left;'><span>"+thenavleft+"</span> <span class='linkeffect change_column_background_color' status='off'>"+svg_nobackground_color+"</span></p>";
			// dynamically remove percent sign
			var theIntwidth = parseInt(thewidth, 10);
			var usestyle = "height:400px;background:red;border-radius:5px;background:rgba(255,255,255,0.9);text-align:center;";
			var formm = "<td class='activedummy nobackground' id='"+rand+"' width='"+thewidth+"' style='"+usestyle+"'>"+topnav+"<input type='text' value='"+theIntwidth+"' style='width:100%;background: transparent;border:0px;outline:none;text-align:center;'><u class='linkeffect update_col_width' oldval='"+theIntwidth+"'>update</u></td>";
		}
		if(coltype == 'empty'){

			var usestyle = "height:400px;border-radius:5px;";
			var theIntwidth = parseInt(thewidth, 10);
			var formm = "<td class='emptydummy' id='"+rand+"' width='"+thewidth+"' style='"+usestyle+"'></td>";
		}
		arrangement += formm;
	});
	arrangement += "</tr></table>";

	var expand_preview = "<svg class='bi bi-arrows-fullscreen' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.464 10.536a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3.5a.5.5 0 0 1-.5-.5v-3.5a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M5.964 10a.5.5 0 0 1 0 .707l-4.146 4.147a.5.5 0 0 1-.707-.708L5.257 10a.5.5 0 0 1 .707 0zm8.854-8.854a.5.5 0 0 1 0 .708L10.672 6a.5.5 0 0 1-.708-.707l4.147-4.147a.5.5 0 0 1 .707 0z'/><path fill-rule='evenodd' d='M10.5 1.5A.5.5 0 0 1 11 1h3.5a.5.5 0 0 1 .5.5V5a.5.5 0 0 1-1 0V2h-3a.5.5 0 0 1-.5-.5zm4 9a.5.5 0 0 0-.5.5v3h-3a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 .5-.5V11a.5.5 0 0 0-.5-.5z'/><path fill-rule='evenodd' d='M10 9.964a.5.5 0 0 0 0 .708l4.146 4.146a.5.5 0 0 0 .708-.707l-4.147-4.147a.5.5 0 0 0-.707 0zM1.182 1.146a.5.5 0 0 0 0 .708L5.328 6a.5.5 0 0 0 .708-.707L1.889 1.146a.5.5 0 0 0-.707 0z'/><path fill-rule='evenodd' d='M5.5 1.5A.5.5 0 0 0 5 1H1.5a.5.5 0 0 0-.5.5V5a.5.5 0 0 0 1 0V2h3a.5.5 0 0 0 .5-.5z'/></svg>";

	// determine ohow to render the head based on the header type headertype
	// get the type of design top_page_header
	var headertype = $(".top_page_header").attr("headertype");

	// get the pagename
	var pagename = $(".pagename").val();
	// get the page text details
	var pagen_text_details = $(".pagen_text_details").val();

	if(headertype == '_tr_header_style1'){
		var stylingheader = "<ul class='nostylelist'><li>"+pagename+"</li><li>"+pagen_text_details+"</li></ul>";
	}

	$(".template-render-plate").html("<span style='padding:3px;padding-left:10px;font-size:13px;'>Total Column Width: <span class='totalwidthholder'>100</span>%</span> <span style='font-size:6px;'>-</span> <span class='linkeffect trigger_dropdownheader_templates' style='font-size:13px;'>Header Template</span> <span style='font-size:6px;'>-</span> <span class='linkeffect trigger_expand_columns_preview' style='font-size:12px;'>"+expand_preview+"</span><div id='dummyheader' style='width:97%; margin:10px; border-radius:5px; background:rgba(255,255,255,0.9); border:1% solid rgba(220,220,220,1);'>"+stylingheader+"</div><div style='width:97%; margin:10px;'>"+arrangement+"</div>");
});


// this is the function that opens the final render of the page 
function openfinalrender() {
	// check the status of the header background
	var getstatus = $("#dummyheader > table > tbody > tr > td > ul > li > span").attr("status");
	var gege = $(".toggle_shiftingbackground").attr("status");
	// this is the svg close icon
	var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

	var positionswap_icon = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";

	var resizecolumnsicon = "<svg class='bi bi-aspect-ratio' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z'/><path fill-rule='evenodd' d='M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z'/></svg>";

	var headertemplate = $(".headertemplate").attr("headertype");

	// when closed make style equal nothing 
	$(".toggle_shiftingbackground").next().remove();
	$(".toggle_shiftingbackground").remove();
	// when closed remove font-size and make margin-bottom -10px
	$("#background_shift_1__rightTD").attr("style", "font-size:17px;");

	
	// when closed remove style background_shift_1__leftTD__details_Style
	$("#background_shift_1__leftTD__details_Style").attr("style", "font-size:15px;");

	if(headertemplate == '_tr_header_style1a' || headertemplate == '_tr_header_style2'){
		$("#page_name_tray").attr("style", "font-size:35px;margin-bottom:;"); 
		if(headertemplate == '_tr_header_style1a'){

		}else if(headertemplate == '_tr_header_style2'){
			$("#background_shift_1__rightTD__td_header_style2").attr("style", "font-size:17px;");
		}

		// get the content of the dummy header
		var dummyheader = $("#dummyheader").html();
		var windowswidth = $("body").width();
		var windowsheight = $(window).height();

		var savepage = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-cloud-upload' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path fill-rule='evenodd' d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/></svg>";

		var closeicon_tray = "<p style='text-align:right;font-size:23px;padding-right:8px;'><span class='linkeffect save_page_columns' ownerattr='primaryowner' parentid='' status='"+getstatus+"' style='font-size:23px;'>"+savepage+"</span> <span class='linkeffect swap_page_columns' status='"+getstatus+"' style='font-size:23px;'>"+positionswap_icon+"</span> <span class='linkeffect close_dummy_preview' status='"+getstatus+"'>"+closeicon+"</span></p>";
		// append a position absolute tray that covers the entire windows
		$("body").append("<div class='expanded_dummy_tray_forpreview customscrollbar' style='position:fixed;width:"+windowswidth+"px;height:"+windowsheight+"px;background:white;z-index:99999999999999999999999999999999;padding-right:20px;padding-top:20px;overflow-y:scroll;'>"+closeicon_tray+"<div class='place_actual_dummypage'> <div class='loader' style='margin-left:700px;margin-top:250px;'></div> </div></div>");


		$(".place_actual_dummypage").html("<div style='margin:10px;'>"+dummyheader+"</div>");
	}

	// to place the dummy columns 
	// loop through the columns cols_td_wrappers

	var tdcolumns = "<table width='100%'><tr width='100%'>";

	$(".cols_td_wrappers > td").each(function(){
		var tdwidth = $(this).attr("width");
		var tdclass = $(this).attr("class");
		var tdid = $(this).attr("id");
		// var tdcontent = $(this).html();

		// select only active dummy to paste forms inside 
		if (tdclass.indexOf("activedummy") >= 0){

			var style = "border:1px solid rgba(128,128,128,0.4);border-radius:3px;height:200px;vertical-align:top;";
			tdcolumns += "<td class='theactivies' width='"+tdwidth+"' id='"+tdid+"' class='insert_forms' style='"+style+"'></td>";
		}else{
			var style = "";
			tdcolumns += "<td width='"+tdwidth+"' id='"+tdid+"' style='"+style+"'></td>";
		}
	});

	tdcolumns += "</tr></table>";
	$(".place_actual_dummypage").after("<div style='margin:10px;'>"+tdcolumns+"</div>");

	// check if the old design exist. if it exists then we put all the forms in one column
    if($('.pagecols')[0]){

    	// get the first column in the expanded view of the template and paste all the forms inside it
		var find_firstcols = Array();
		$(".insert_forms").each(function(){
			find_firstcols[find_firstcols.length] = $(this).attr("id");
		});
		
		var firstcolumn_to_insert_form_into = find_firstcols[0];//alert(firstcolumn_to_insert_form_into);

		var stringof_forms = "";
    	// all the forms on the traditional 
		$(".pagecols").each(function(){
			var column_content = $(this).html();
			stringof_forms += column_content;

		});
		// alert(stringof_forms);
		$(".expanded_dummy_tray_forpreview div table tbody tr .theactivies").html(stringof_forms);


		// adjust the width of the tables, tr and td in the final template render to 100%
		$(".theactivies > form > table").each(function(){
			$(this).attr("width", "100%");
		});

		$(".theactivies > form > table > tbody > tr").each(function(){
			$(this).attr("width", "100%");
		});

		$(".theactivies > form > table > tbody > tr > td").each(function(){
			$(this).attr("width", "50%");
		});

		$(".theactivies > form").css("margin-bottom", "50px");
		
		// arranging the form mini-nav for the editing of the forms
		// delete icon
		var deleteicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

		var addtable = "<svg class='bi bi-table' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/><path fill-rule='evenodd' d='M15 4H1V3h14v1z'/><path fill-rule='evenodd' d='M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z'/><path fill-rule='evenodd' d='M15 8H1V7h14v1zm0 4H1v-1h14v1z'/><path d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z'/></svg>";

		var reordercomponent_updown = "<svg class='bi bi-arrow-down-up' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L11 3.707 8.354 6.354a.5.5 0 1 1-.708-.708l3-3zm-9 7a.5.5 0 0 1 .708 0L5 12.293l2.646-2.647a.5.5 0 1 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M5 2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V3a.5.5 0 0 1 .5-.5z'/></svg>";

		var reordercomponent_leftright = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";

		var spreadsheet = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-columns-gap' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M6 1H1v3h5V1zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12h-5v3h5v-3zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8H1v7h5V8zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6h-5v7h5V1zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z'/></svg>";

		var empty_alltd_apartfrom_first = Array();
		$(".theactivies").each(function(i, el){
			if(i !== 0){
				$(this).html("");
			}
			var formid = $(this).attr("id");
			$(this).before("<div style='background:rgba(128,128,128,0.1);padding:5px;width:100%;z-index:9999999999999;'> <span class='linkeffect deleteentire_page_component' formid='"+formid+"'>"+deleteicon+"</span> <span class='linkeffect addnewtable_pre' formid='"+formid+"'>"+addtable+"</span> <span class='linkeffect reorder_page_component_updown' formid='"+formid+"'>"+reordercomponent_updown+"</span> <span class='linkeffect reorder_page_component_leftright' formid='"+formid+"'>"+reordercomponent_leftright+"</span> <span class='linkeffect triggerspreadsheet'>"+spreadsheet+"</span></div>");
		});
    }
}

// open from the database 
function open_template_database_render() {
	var accountid = $(".details").attr("accountid");
	var status = $(".details").attr("status");
	var pagetype = $(".details").attr("pagetype");
	var layoutid = $(".details").attr("layoutid");

	// tweaking for apps page
	if(pagetype != undefined){
		var pagetype = pagetype;
	}else{
		var pagetype = "";
	}
	
	var refreshicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-arrow-clockwise' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.17 6.706a5 5 0 0 1 7.103-3.16.5.5 0 1 0 .454-.892A6 6 0 1 0 13.455 5.5a.5.5 0 0 0-.91.417 5 5 0 1 1-9.375.789z'/><path fill-rule='evenodd' d='M8.147.146a.5.5 0 0 1 .707 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 1 1-.707-.708L10.293 3 8.147.854a.5.5 0 0 1 0-.708z'/></svg>";

	var deleteicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'></path><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'></path></svg>";

	var addnewcomp = "<svg class='bi bi-table' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'></path><path fill-rule='evenodd' d='M15 4H1V3h14v1z'></path><path fill-rule='evenodd' d='M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z'></path><path fill-rule='evenodd' d='M15 8H1V7h14v1zm0 4H1v-1h14v1z'></path><path d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z'></path></svg>";

	var reorderpage_icon_updown = "<svg class='bi bi-arrow-down-up' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'></path><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L11 3.707 8.354 6.354a.5.5 0 1 1-.708-.708l3-3zm-9 7a.5.5 0 0 1 .708 0L5 12.293l2.646-2.647a.5.5 0 1 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'></path><path fill-rule='evenodd' d='M5 2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V3a.5.5 0 0 1 .5-.5z'></path></svg>";

	var reorderpage_icon_leftright = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'></path><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'></path><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'></path></svg>";

	var dummyheader = $("#dummyheader").html();
	var windowswidth = $("body").width();
	var windowsheight = $(window).height();

	var savepage = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-cloud-upload' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path fill-rule='evenodd' d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/></svg>";

	var positionswap_icon = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";

	var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";


	var spreadsheet = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-columns-gap' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M6 1H1v3h5V1zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12h-5v3h5v-3zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8H1v7h5V8zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6h-5v7h5V1zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z'/></svg>";

	$("body").append("<div class='expanded_dummy_tray_forpreview customscrollbar' style='position:fixed;width:"+windowswidth+"px;height:"+windowsheight+"px;background:white;z-index:99999999999999999999999999999999;padding-right:20px;padding-top:20px;overflow-y:scroll;vertical-align:top;'><div class='loader' style='margin-left:700px;margin-top:250px;'></div> </div></div>");


    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadsaved_template";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{accountid:accountid, pagetype:pagetype, layoutid:layoutid},
        success:function(data){
        var data = data.trim();
        // alert(data);
        if(data == ''){
			var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

			var positionswap_icon = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";
			
			var savepage = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-cloud-upload' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path fill-rule='evenodd' d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/></svg>";

			var closeicon_tray = "<p style='text-align:right;font-size:23px;padding-right:8px;'><span class='linkeffect save_page_columns' ownerattr='primaryowner' parentid='' status='on' style='font-size:23px;'>"+savepage+"</span> <span class='linkeffect swap_page_columns' status='on' style='font-size:23px;'>"+positionswap_icon+"</span> <span class='linkeffect close_dummy_preview' status='on'>"+closeicon+"</span></p>";

	    	var nav = "<span class='linkeffect fakelink_style'>link1</span> <span class='linkeffect fakelink_style'>link2</span> <span class='linkeffect fakelink_style'>link3</span> <span class='linkeffect fakelink_style'>link4</span> <span class='linkeffect fakelink_style'>link5</span> <span class='linkeffect fakelink_style'>link6</span> <span class='linkeffect fakelink_style'>link7</span>";

			var settings = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-tools' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'></path><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'></path></svg>";

			var tools = "<svg class='bi bi-tools' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'></path><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'></path></svg>";

    		var header = "<div class='place_actual_dummypage'><div style='margin:10px;'><table width='100%' class='headertemplate' id='background_shift_1' headertype='_tr_header_style1a' style='margin-bottom:5px;'><tbody><tr width='100%'><td id='background_shift_1__leftTD'><ul class='nostylelist'><li id='page_name_tray' style='font-size:35px;margin-bottom:;'><b><span class='linkeffect editing_pagename_tagname' style='font-weight:normal;font-size:13px;'>"+settings+"</span> <span class='linkeffect header_pagename'>PAGE NAME</span></b></li> <li id='background_shift_1__leftTD__details_Style' style='font-size:15px;'> <span class='pagedetails_foredit'>Some other details concerning the page</span> </li></ul></td><td id='background_shift_1__rightTD' style='font-size:17px;'><ul class='uldummypage'><li class='linkeffect navsettings_trigger' navigationtype='horizontal'>"+tools+"</li><li class='linkeffect openlink_'>Link1</li><li class='linkeffect openlink_'>Link2</li><li class='linkeffect openlink_'>Link3</li><li class='linkeffect openlink_'>Link4</li><li class='linkeffect openlink_'>Link5</li><li class='linkeffect openlink_'>link6</li><li class='linkeffect openlink_'>link7</li></ul></td></tr></tbody></table></div></div>";

			$(".expanded_dummy_tray_forpreview").prepend(closeicon_tray+header);
			$(".loader").remove();
			
			var rnd1 = Math.random().toString(36).substring(7);
			var rnd2 = Math.random().toString(36).substring(7);

			var tdd = "<td class='theactivies' width='45%' id='"+rnd1+"' style='border:1px solid rgba(128,128,128,0.4);border-radius:3px;height:200px;vertical-align:top;'></td>";
				tdd += "<td width='55%' id='"+rnd2+"' style=''></td>";
			$(".place_actual_dummypage").after("<div style='margin:10px;'><table width='100%'><tr width='100%'>"+tdd+"</tr></table></div>");
			// remove the preloader if it exists
			$(".loader").remove();
        }else{
	        $(".expanded_dummy_tray_forpreview").html(data);

	        // remove the side nav for all the td with the class theactivies
	        $(".deleteentire_page_component").parent().remove();

			// find the save page icon and insert new set of attributes open_template_database_render
			$(".expanded_dummy_tray_forpreview").find(".save_page_columns").attr("ownerattr","primaryowner");
			$(".expanded_dummy_tray_forpreview").find(".save_page_columns").attr("parentid",accountid);
			$(".expanded_dummy_tray_forpreview").find(".save_page_columns").attr("secondaryid","");
			// $(".save_page_columns").before("<span class='linkeffect'>"+refreshicon+"</span> ");

			$(".expanded_dummy_tray_forpreview").find(".sortable_tray2").remove();
			// remove the preloader if it exists
			$(".loader").remove();
        }

		$(".theactivies").each(function (index) {
			$(this).before("<div style='background:rgba(128,128,128,0.1);padding:5px;width:100%;z-index:9999999999999;'> <span class='linkeffect deleteentire_page_component' formid='3v5m2k'>"+deleteicon+"</span> <span class='linkeffect addnewtable_pre' formid='3v5m2k'>"+addnewcomp+"</span> <span class='linkeffect reorder_page_component_updown' formid='3v5m2k'>"+reorderpage_icon_updown+"</span> <span class='linkeffect reorder_page_component_leftright' formid='3v5m2k'>"+reorderpage_icon_leftright+"</span> <span class='linkeffect triggerspreadsheet' formid='3v5m2k'>"+spreadsheet+"</span></div>");
		});
      }
    });


}
// this is to show the expanded preview across the whole window of the column designs without the form 
// trigger_expand_columns_preview
$(document).on("click", '.trigger_expand_columns_preview', function(event) {
	var accountid = $(".details").attr("accountid");
	var status = $(".details").attr("status");

	openfinalrender();
});


// this is to swap the positions of the columns on the page swap_page_columns
$(document).on("click", '.swap_page_columns', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");

	// alert("swap_page_columns");
	totalwidth_columns = 0;
	totalwidth_columns = parseInt(totalwidth_columns);

	var string_width = "";
	$(".place_actual_dummypage").next().find("table > tbody > tr > .theactivies").each(function (index) {
		var theuniqueid = $(this).attr("id");

		var thewidth = $(this).attr("width");
		thewidth = parseInt(thewidth);
		totalwidth_columns = totalwidth_columns + thewidth;
		// alert(totalwidth_columns);
		string_width +="<li class='maincolumn' the_li_id='"+theuniqueid+"' style='width:100%;margin-bottom:10px;background:rgba(0,255,127,0.4);padding:5px;'><span class='linkeffect remove_li_column' the_ownerid='"+theuniqueid+"'>x</span> <span style='font-size:13px;'>Drag to reposition</span><br><input type='number' value='"+thewidth+"' id='styletop-for-inputname'></li>";
		string_width +="<li class='plain_li_divide' style='width:100%;margin-bottom:10px;background:rgba(128,128,128,0.4);padding:5px;'><span>1</span></li>";
		totalwidth_columns = totalwidth_columns + 1;
		// alert(totalwidth_columns);
	});

	var header_tray = "<div style='margin-left:5px;'><span class='linkeffect closereorder_tags'>x</span> Reorder Page Components</div>";
	var update_tray = "<div class='footer_updatetray' style='padding-left:5px;margin-top:-10px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%' style='font-size:13px;'><u class='linkeffect update_pagereorder_columns'>Update</u> <!--<u class='linkeffect cancel_pagereorder_components'>Close Reorder</u>--> <u class='linkeffect add_newpage_components'>Add Column</u></td> <td width='10%' style='text-align:right;'> </td></tr></table></div>";

	$(".sortable_tray2ul").after(update_tray);
	$(".sortable_tray2ul").html(string_width);
	$(".sortable_tray2ul").before(header_tray);

	$(".sortable_tray2").attr("style", "position:absolute; width:400px;margin-left:483px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1); font-size:13px;");
	$(".place_actual_dummypage").after($(".sortable_tray2"));
	$(".sortable_tray2ul").show();

	// this is to remove the last blank column
	$(".sortable_tray2ul > .maincolumn").last().next().remove();
	totalwidth_columns = totalwidth_columns - 1;

	// at the end of the loop we confirm if the total is equal to one hundred; if its not eqal to one hundred
	// the remaining value that should have made it one hundred we make it a blank something 
	if(totalwidth_columns < 100){
		// alert(totalwidth_columns+" ending");
		excesswidth = 100 - totalwidth_columns;
		$(".sortable_tray2ul").append("<li style='width:100%;margin-bottom:10px;background:rgba(128,128,128,0.4);padding:5px;font-size:13px;'><span class='linkeffect removeexcess_gap'>x</span> <span>"+excesswidth+"<span></li>");
	}
});

// this is to remove the li so that the column is completely eliminated remove_li_column
$(document).on("click", '.remove_li_column', function(event) {
	// remove the delete container first 
	$(".deletingcontainer").remove();
	var the_ownerid = $(this).attr("the_ownerid");
	// alert("yo yo yo");
	var allthetr = "";
	for (i = 0; i < 3; i++) {
		var rnd = Math.random().toString(36).substring(7);
		allthetr += "<tr width='100%'><td width='40%' class='quest"+i+"'>"+rnd+"</td> <td width='60%'><input type='text' id='styletop-for-inputname' class='anst"+i+"' style='width:100%;border-bottom:1px solid rgba(128,128,128,0.4);'></td></tr>";
	}

	var thetable = "<table width='100%'><tr width='100%'><td width='100%' colspan='2'>Type Security String to confirm delete action</td></tr>"+allthetr+"<tr width='100%'><td colspan='2'><u class='linkeffect confirm_column_delete' style='color:rgba(50,205,50,1);' the_ownerid='"+the_ownerid+"'>Confirm Delete</u> <u class='linkeffect cancel_column_remove_action' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr></table>";
	$(this).parent().parent().before("<div class='deletingcontainer'>"+thetable+"</div>");
});

// this is to confirm the column delete confirm_column_delete
$(document).on("click", '.confirm_column_delete', function(event) {
	// the_ownerid
	var the_ownerid = $(this).attr("the_ownerid");//alert(the_ownerid);
	var allthetr = "";
	for (i = 0; i < 3; i++) {
		var quest = $(".quest"+i).text();//alert(quest+" --quest");
		var anst = $(".anst"+i).val();//alert(anst+" --anst");

		var checker_string = "";
		if(quest != anst){
			$(".quest"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			checker_string += "dfdd";
		}else{
			$(".quest"+i).parent().attr("style", "");
		}
	}

	if(checker_string == ''){
		// delete the column
		$("[the_li_id="+the_ownerid+"]").remove();
		$(".expanded_dummy_tray_forpreview").find("#"+the_ownerid).next().remove();
		$(".expanded_dummy_tray_forpreview").find("#"+the_ownerid).prev().remove();
		$(".expanded_dummy_tray_forpreview").find("#"+the_ownerid).remove();

		// loop to remove any 
		// plain_li_divide
		$(".plain_li_divide").each(function (index) {
			$(this).remove()
			return false;
		});
	}
});

// this is to add a new page column component by adding an li column add_newpage_components
$(document).on("click", '.add_newpage_components', function(event) {
	// alert("direct kungaga duangaga");
	var rnd = Math.random().toString(36).substring(7);
		rnd += Math.random().toString(36).substring(7);

	$(".sortable_tray2ul").prepend("<li class='maincolumn' the_li_id='"+rnd+"' style='width: 100%; margin-bottom: 10px; background: rgba(0, 255, 127, 0.4); padding: 5px;'><span style='font-size:13px;'><span class='linkeffect remove_li_column' the_ownerid='"+rnd+"'>x</span> Drag to reposition</span><br><input type='number' value='50' id='styletop-for-inputname'></li><li class='plain_li_divide' style='width:100%;margin-bottom:10px;background:rgba(128,128,128,0.4);padding:5px;'>1</li>");
});

// this is to remove the last div that is excess dimgray space holder removeexcess_gap
$(document).on("click", '.removeexcess_gap', function(event) {
	var thewidth = $(this).next().text();
	thewidth = thewidth.trim();
	thewidth = parseInt(thewidth);
	// alert(thewidth);

	// the column to add the excess width to before deleting the li that holds the excess width
	var theval_nearest_col = $(this).parent().prev().find("input").val();
	if(theval_nearest_col != undefined){
		theval_nearest_col = theval_nearest_col.trim();
		theval_nearest_col = parseInt(theval_nearest_col);
	}

	// alert(theval_nearest_col);
	new_width = thewidth + theval_nearest_col;
	$(this).parent().prev().find("input").val(new_width);
	$(this).parent().prev().find("input").attr("value", new_width);
	$(this).parent().remove();
});


// this is to update the reorder position of the columns update_pagereorder_columns
$(document).on("click", '.update_pagereorder_columns', function(event) {
	////////////////////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////
	// icons for side navigation
	var deleteicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	var addtable = "<svg class='bi bi-table' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/><path fill-rule='evenodd' d='M15 4H1V3h14v1z'/><path fill-rule='evenodd' d='M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z'/><path fill-rule='evenodd' d='M15 8H1V7h14v1zm0 4H1v-1h14v1z'/><path d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z'/></svg>";

	var reordercomponent_updown = "<svg class='bi bi-arrow-down-up' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L11 3.707 8.354 6.354a.5.5 0 1 1-.708-.708l3-3zm-9 7a.5.5 0 0 1 .708 0L5 12.293l2.646-2.647a.5.5 0 1 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M5 2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V3a.5.5 0 0 1 .5-.5z'/></svg>";

	var reordercomponent_leftright = "<svg class='bi bi-arrow-left-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";

	var spreadsheet = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-columns-gap' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M6 1H1v3h5V1zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12h-5v3h5v-3zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8H1v7h5V8zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6h-5v7h5V1zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z'/></svg>";
	////////////////////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////

	$(".universalerror_tray").hide();
	$(".universal_error_text").html("");

	// ERROR NOTIFICATION:: if the last excess div is available then we remove it
    if($(".removeexcess_gap")[0]){
		$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Please remove the excess column at the bottom of the page before proceeding to update swap.</span></div>");
    	return;
    }

    // we loop to get all the details from sortable_tray2ul
    arrayofdetails = Array();

	width_forconfirm = 0;
	width_forconfirm = parseFloat(width_forconfirm, 10);

	$(".sortable_tray2ul > li").each(function (index) {
		var check_class = $(this).attr("class");
		if(check_class == 'maincolumn'){
			var theid = $(this).attr("the_li_id");
			thewidth__ = $(this).find("input").val();
			thewidth__ = parseFloat(thewidth__, 10);
			// alert(thewidth__);
			width_forconfirm = width_forconfirm + thewidth__;
			width_forconfirm = parseFloat(width_forconfirm, 10);
			arrayofdetails[arrayofdetails.length] = thewidth__+"-"+theid;
		}

		if(check_class == 'plain_li_divide'){
			thewidth__ = $(this).text();
			thewidth__ = parseFloat(thewidth__, 10);
			// alert(thewidth__);
			width_forconfirm = width_forconfirm + thewidth__;
			width_forconfirm = parseFloat(width_forconfirm, 10);
		}
		// alert(check_class);
		
	});

	// alert(width_forconfirm+"---total");
	// check to confirm that it is equal to 100
	if(width_forconfirm != 100){
		$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Please ensure that the total width is equal to 100%.</span></div>");
		return;
	}
	// alert(arrayofdetails);

	/////////////////////////////////////////////////////////////////////////////
	/////////////////////////////////////////////////////////////////////////////
	// every class that isnt the actives should be removed 
	$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > td").each(function (index) {
		var remove_every_divider_td = $(this).attr("class");
		if(remove_every_divider_td == undefined){
			$(this).remove();
		}
	});

	$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > div").each(function (index) {
		$(this).remove();
	});

	////////////////////////////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////////////

	var i;
	for (i = 0; i < arrayofdetails.length; i++) {
		// alert(arrayofdetails[i]);
		res = arrayofdetails[i].split("-");
		value_width = res[0];//alert(value_width);
		theid = res[1];
		// alert(theid);
    	// $(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+theid).attr("width", value_width+"%");
    	$(".expanded_dummy_tray_forpreview").find("#"+theid).attr("width", value_width+"%");

    	// container_to_append_new = $(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+theid);
    	container_to_append_new = $(".expanded_dummy_tray_forpreview").find("#"+theid);
    	// check if the column really exist
    	var classcheck_test = $(container_to_append_new).attr("class");

    	if(classcheck_test == undefined){
    		alert("undefined");
	    	// move the column
	    	$(".theactivies").parent().append("<td class='theactivies' width='"+value_width+"%' id='"+theid+"' style='border:1px solid rgba(128,128,128,0.4);border-radius:3px;height:200px;vertical-align:top;'></td>");
	    	$("#"+theid).after("<td width='1%'></td>");
	    	$("#"+theid).before("<div style='background:rgba(128,128,128,0.1);padding:5px;width:100%;z-index:9999999999999;'> <span class='linkeffect deleteentire_page_component' formid='"+theid+"'>"+deleteicon+"</span> <span class='linkeffect addnewtable_pre' formid='"+theid+"'>"+addtable+"</span> <span class='linkeffect reorder_page_component_updown' formid='"+theid+"'>"+reordercomponent_updown+"</span> <span class='linkeffect reorder_page_component_leftright' formid='"+theid+"'>"+reordercomponent_leftright+"</span> <span class='linkeffect triggerspreadsheet'>"+spreadsheet+"</span></div>");
    	}else{
    		// alert("sweet coco");
	    	// move the column
	    	$(".theactivies").parent().append(container_to_append_new);
	    	// alert("the ending");
	    	$(container_to_append_new).after("<td width='1%'></td>");

	    	$(container_to_append_new).before("<div style='background:rgba(128,128,128,0.1);padding:5px;width:100%;z-index:9999999999999;'> <span class='linkeffect deleteentire_page_component' formid='"+theid+"'>"+deleteicon+"</span> <span class='linkeffect addnewtable_pre' formid='"+theid+"'>"+addtable+"</span> <span class='linkeffect reorder_page_component_updown' formid='"+theid+"'>"+reordercomponent_updown+"</span> <span class='linkeffect reorder_page_component_leftright' formid='"+theid+"'>"+reordercomponent_leftright+"</span></div>");
    		// alert("it is real");
    	}
    	$(".deletingcontainer").remove();
	}


    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");
});

// move components across columns reorder_page_component_leftright
$(document).on("click", '.reorder_page_component_leftright', function(event) {
	// remove typeof_table_options_tray
	$(".typeof_table_options_tray").remove();
	$(".deleteconfirmation_tray_string").remove();

	var moveleft = "<svg class='bi bi-arrow-bar-left' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L3.207 8l2.647-2.646a.5.5 0 0 0 0-.708z'/><path fill-rule='evenodd' d='M10 8a.5.5 0 0 0-.5-.5H3a.5.5 0 0 0 0 1h6.5A.5.5 0 0 0 10 8zm2.5 6a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 1 0v11a.5.5 0 0 1-.5.5z'/></svg>";

	var moveright = "<svg class='bi bi-arrow-bar-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 8l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M6 8a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H6.5A.5.5 0 0 1 6 8zm-2.5 6a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 1 0v11a.5.5 0 0 1-.5.5z'/></svg>";


    // check how many forms exit in the column in question
    var forms_ownerof_table = "";
    $(this).parent().next().find("form").each(function (index) {
    	// alert($(this).attr("id"));
    	var formidd = $(this).attr("id");
    	var formname = $(this).prev().prev().val();
    	forms_ownerof_table += "<tr width='100%'><td formid='"+formidd+"' movetype='form' width='100%'><span class='linkeffect move_pagecomponent' direction='left'>"+moveleft+"</span> <span class='linkeffect move_pagecomponent' direction='right'>"+moveright+"</span> "+formname+"</td></tr>";
	});

// table_wrapper_
    // var forms_ownerof_table = "";
    $(this).parent().next().find(".table_wrapper_").each(function (index) {
    	var use_to_find_formname = $(this).attr("theformid");
    	var tablename = $(".tableowners_name-"+use_to_find_formname).text();

    	var theformid = $(this).attr("theformid");
    	forms_ownerof_table += "<tr width='100%'><td formid='"+theformid+"' movetype='table' width='100%'><span class='linkeffect move_pagecomponent' direction='left'>"+moveleft+"</span> <span class='linkeffect move_pagecomponent' direction='right'>"+moveright+"</span> "+tablename+"</td></tr>";
	});

    if(forms_ownerof_table == ''){
    	forms_ownerof_table += "<tr><td style='font-size:13px;'><i>Nothing to move.</i></td></tr>";
    }

    // this is to check what to remove and what to append formid
    var formid = $(this).attr("formid");

    // remove
    if($("#tray--"+formid)[0]){
    	$(".deletetray_tablecomponents").remove();
    	$("#tray--"+formid).remove();
    	return;
    }else{
    	$(".deletetray_tablecomponents").remove();
    }


	$(this).parent().after("<div id='tray--"+formid+"' class='deletetray_tablecomponents' style='position:absolute;background:white;padding:3px;border:radius;margin-left:30px;margin-top:-65px;width:200px;border-radius:5px;border:1px solid rgba(128,128,128,0.4);font-size:13px;'><table width='100%'><tr style='border-bottom:1px solid rgba(128,128,128,0.4);'><td>Move Page Components</td></tr>"+forms_ownerof_table+"</table></div>");
});

// this is to move the page component to the left column or the right column move_pagecomponent
$(document).on("click", '.move_pagecomponent', function(event) {
	var direction = $(this).attr("direction");
	var formid = $(this).parent().attr("formid");
	var movetype = $(this).parent().attr("movetype");

	if(direction == 'right'){
		var checkclass = $(this).parent().parent().parent().parent().parent().next().next().next().next().attr("class");
		// alert(checkclass);
		if(checkclass == 'theactivies'){

			if(movetype == 'form'){
				var formname = $(".theactivies > #"+formid).prev().prev();
				var brtag = $(".theactivies > #"+formid).prev();
				var theactualform = $(".theactivies > #"+formid);
				$(this).parent().parent().parent().parent().parent().next().next().next().next().prepend(theactualform);
				$(this).parent().parent().parent().parent().parent().next().next().next().next().prepend(brtag);
				$(this).parent().parent().parent().parent().parent().next().next().next().next().prepend(formname);
			}

			if(movetype == 'table'){
				$(this).parent().parent().parent().parent().parent().next().next().next().next().prepend($("[theformid="+formid+"]"));
			}
		}
	}

	if(direction == 'left'){
		var checkclass = $(this).parent().parent().parent().parent().parent().prev().prev().prev().attr("class");
		// alert(checkclass);
		if(checkclass == 'theactivies'){

			if(movetype == 'form'){
				var formname = $(".theactivies > #"+formid).prev().prev();
				var brtag = $(".theactivies > #"+formid).prev();
				var theactualform = $(".theactivies > #"+formid);
				$(this).parent().parent().parent().parent().parent().prev().prev().prev().prepend(theactualform);
				$(this).parent().parent().parent().parent().parent().prev().prev().prev().prepend(brtag);
				$(this).parent().parent().parent().parent().parent().prev().prev().prev().prepend(formname);
			}

			if(movetype == 'table'){
				$(this).parent().parent().parent().parent().parent().prev().prev().prev().prepend($("[theformid="+formid+"]"));
			}
		}
	}
	// alert(formid);
	// remove the dropdown for moving the column
	$(".deletetray_tablecomponents").remove();
});

// this is to reorder the page/column component reorder_page_component_updown
$(document).on("click", '.reorder_page_component_updown', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");

	var components_string_ = "";
	$(this).parent().next().children().each(function (index) {
		var class_check = $(this).attr("class");
		
		if(class_check == undefined || class_check == 'formname'){}else{
			console.log(class_check);
			if(class_check == 'table_wrapper_'){
				// get the name of the table
				var theformid = $(this).attr("theformid");
				var tableowners_name = $(".tableowners_name-"+theformid).text();
				var theowner = "table";
				var thename = tableowners_name;
				var ownerid = $(this).attr("theformid");
			}else{
				var thename = $(this).prev().prev().attr("value");
				var theowner="form";
				var ownerid = $(this).attr("id");
			}

			components_string_ += "<li style='width:100%;margin-bottom:10px;background:rgba(0,255,127,0.4);padding:5px;' class='"+class_check+"' theowner='"+theowner+"' ownerid='"+ownerid+"'><table width='100%'><tbody><tr width='100%'><td width='50%' style='background:;border-radius:5px;border:1px solid rgba(0,255,127,1);'>"+thename+"</td></tr></tbody></table></li>";
		}
	});

	// get the id of the column that holds the page component that you're about to reorder 
	var columnid = $(this).parent().next().attr("id");

	var header_tray = "<div style='margin-left:5px;'>Reorder Page Components</div>";
	var update_tray = "<div class='footer_updatetray' style='padding-left:5px;margin-top:-10px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%' style='font-size:13px;'><u class='linkeffect update_pagereorder_components' columnid='"+columnid+"'>Update</u> <u class='linkeffect cancel_pagereorder_components'>Close Reorder</u></td> <td width='10%' style='text-align:right;'></td></tr></table></div>";

	$(".sortable_tray2ul").after(update_tray);
	$(".sortable_tray2ul").html(components_string_);
	$(".sortable_tray2ul").before(header_tray);

	$(".sortable_tray2").attr("style", "position:absolute; width:400px;margin-left:483px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1);");
	$(".place_actual_dummypage").after($(".sortable_tray2"));
});

// this is to update the order of the table update_pagereorder_components
$(document).on("click", '.update_pagereorder_components', function(event) {
	var columnid = $(this).attr("columnid");//alert(columnid);
	$(this).parent().parent().parent().parent().parent().prev().find("li").each(function (index) {
		var theowner = $(this).attr("theowner");// alert(theowner);
		var ownerid = $(this).attr("ownerid");
		// alert(theowner);
		if(theowner == 'form'){
			$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid).append($(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid+" > #"+ownerid).prev().prev());
			$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid).append($(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid+" > #"+ownerid).prev());
			$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid).append($(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid+" > #"+ownerid));
		}
		if(theowner == 'table'){
			$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid).append($("[theformid="+ownerid+"]"));
		}
		
	});
	// $(".expanded_dummy_tray_forpreview > div > table > tbody > tr > #"+columnid).html("lll");
});


// this is how to remove the reorder page component cancel_pagereorder_components
$(document).on("click", '.cancel_pagereorder_components', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");
});


// changeinputtag
$(document).on("click", '.changeinputtag', function(event) {
	var formid = $(this).attr("formid");
	// var getborder = 
	$("#"+formid+" > input").css("border", "1px solid green");
	alert(getborder);
});

// this is to delete the entire page form deleteentire_pageform in the expanded preview
$(document).on("click", '.deleteentire_page_component', function(event) {
	// remove typeof_table_options_tray
	$(".typeof_table_options_tray").remove();
	$(".deleteconfirmation_tray_string").remove();
	// form
	var formicon = "<svg class='bi bi-calendar3' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/><path fill-rule='evenodd' d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/></svg>";

	// table icon
	var tableicon_ = "<svg class='bi bi-table' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/><path fill-rule='evenodd' d='M15 4H1V3h14v1z'/><path fill-rule='evenodd' d='M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z'/><path fill-rule='evenodd' d='M15 8H1V7h14v1zm0 4H1v-1h14v1z'/><path d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z'/></svg>";


    // check how many forms exit in the column in question
    var forms_ownerof_table = "";
    $(this).parent().next().find("form").each(function (index) {
    	// alert($(this).attr("id"));
    	var formidd = $(this).attr("id");
    	var formname = $(this).prev().prev().val();
    	forms_ownerof_table += "<tr width='100%'><td class='linkeffect delete_pagecomponent_confirmation' deletetype='form' formid='"+formidd+"' width='100%'>"+formicon+""+formname+"</td></tr>";
	});

// table_wrapper_
    // var forms_ownerof_table = "";
    $(this).parent().next().find(".table_wrapper_, .onlytable_wrapper_").each(function (index) {
    	var use_to_find_formname = $(this).attr("theformid");
    	var tablename = $(".tableowners_name-"+use_to_find_formname).text();//alert(tablename+" tablename");

    	var theformid = $(this).attr("theformid");
    	forms_ownerof_table += "<tr width='100%'><td class='linkeffect delete_pagecomponent_confirmation' deletetype='table' formid='"+theformid+"' width='100%'>"+tableicon_+" "+tablename+"</td></tr>";
	});

    if(forms_ownerof_table == ''){
    	forms_ownerof_table += "<tr><td style='font-size:13px;'><i>Nothing to delete.</i></td></tr>";
    }

    // this is to check what to remove and what to append formid
    var formid = $(this).attr("formid");

    // remove
    if($("#tray--"+formid)[0]){
    	$(".deletetray_tablecomponents").remove();
    	$("#tray--"+formid).remove();
    	return;
    }else{
    	$(".deletetray_tablecomponents").remove();
    }


	$(this).parent().after("<div id='tray--"+formid+"' class='deletetray_tablecomponents' style='position:absolute;background:white;padding:3px;border:radius;margin-left:30px;margin-top:-65px;width:200px;border-radius:5px;border:1px solid rgba(128,128,128,0.4);font-size:13px;'><table width='100%'><tr style='border-bottom:1px solid rgba(128,128,128,0.4);'><td>Delete Page Components</td></tr>"+forms_ownerof_table+"</table></div>");
});

// this is to delete the page component; the confirmation of delete string delete_pagecomponent_confirmation
$(document).on("click", '.delete_pagecomponent_confirmation', function(event) {
	$(".deleteconfirmation_tray_string").remove();
	var formid = $(this).attr("formid");
	var deletetype = $(this).attr("deletetype");

	var allthetr = "";
	for (i = 0; i < 3; i++) {
		var rnd = Math.random().toString(36).substring(7);
		allthetr += "<tr width='100%'><td width='40%' class='quest"+i+"'>"+rnd+"</td> <td width='60%'><input type='text' id='styletop-for-inputname' class='anst"+i+"' style='width:100%;border-bottom:1px solid rgba(128,128,128,0.4);'></td></tr>";
	}

	var tablestring = "<table width='100%'><tr width='100%'><td width='100%' colspan='2'>Type Security String to confirm delete action</td></tr>"+allthetr+"<tr width='100%'><td width='100%' colspan='2'><u class='linkeffect confirm_andremove_component' formid='"+formid+"' deletetype='"+deletetype+"' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect remove_deletetray_page_component' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr></table>";
	$(this).parent().parent().parent().parent().after("<div class='deleteconfirmation_tray_string' style='position:absolute; background:white;width:200px; padding:5px;border-radius:5px;border:1px solid rgba(128,128,128,0.4);margin-left:235px;margin-top:-65px;font-size:13px;'>"+tablestring+"</div>");
});


// this is to confirm and delete any page component confirm_andremove_component
$(document).on("click", '.confirm_andremove_component', function(event) {
	var deletetype = $(this).attr("deletetype");
	var formid = $(this).attr("formid");

	var checker = "";
	for (i = 0; i < 3; i++) {
		var ques = $(".quest"+i).text();
		var anst = $(".anst"+i).val();

		if(ques != anst){
			checker += "qqq";
			$(".quest"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
		}else{
			$(".quest"+i).parent().attr("style", "");
		}
	}

	// if it is empty then we 
	if(checker == ""){
		// if this is form then you're deleting both forms and table
		if(deletetype == "form"){
			$(".theactivies > #"+formid).prev().prev().remove();
			$(".theactivies > #"+formid).prev().remove();
			$(".theactivies > #"+formid).remove();

			$("[theformid="+formid+"]").remove();

			// 
			$(".deleteconfirmation_tray_string").remove();
			$(".deletetray_tablecomponents").remove();
		}else if(deletetype == "table"){
			$("[theformid="+formid+"]").remove();

			// 
			$(".deleteconfirmation_tray_string").remove();
			$(".deletetray_tablecomponents").remove();
		}
	}
});


// cancel the delete action on the page remove_deletetray_page_component
$(document).on("click", '.remove_deletetray_page_component', function(event) {
	$(".deleteconfirmation_tray_string").remove();
});

// this is to delete the entire form from the page confirmdelete_ofentireform on the expanded page view
$(document).on("click", '.confirmdelete_ofentireform', function(event) {
	var affected_formid = $(this).attr("form_id");
	// remove all background style fo the tr confirmation_linknav_tr
	$(".confirmation_linknav_tr").attr("style","");

	for (i = 0; i < 3; i++) {
		var formques = $(".formques"+i).text();
		var formans = $(".formans"+i).val();

		if(formques != formans){
			$(".formques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
		}
	}

	var frmqst0 = $(".formques0").text();
	var frmans0 = $(".formans0").val();

	var frmqst1 = $(".formques1").text();
	var frmans1 = $(".formans1").val();

	var frmqst2 = $(".formques2").text();
	var frmans2 = $(".formans2").val();

	if(frmqst0 == frmans0 && frmqst1 == frmans1 && frmqst2 == frmans2){
		var formid = $(this).attr("form_id");
		// delete the input tag that has the form name
		$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > td > #"+formid).prev().prev().prev().remove();

		// delete the break tag that's just before the form tag 
		$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > td > #"+formid).prev().prev().remove();

		// delete the incon tag that has the navigation for the tools
		$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > td > #"+formid).prev().remove();

		// remove the actual form 
		$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > td > #"+formid).remove();
	}
});


// change_column_background_color
$(document).on("click", '.change_column_background_color', function(event) {

	var status = $(this).attr("status");
	if(status == 'off'){
		var svg_yesbackground_color = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";

		$(this).html(svg_yesbackground_color);
		$(this).attr("status", "on");

		// add new background color
		$(this).parent().parent().addClass("whitebackground");
		$(this).parent().parent().removeClass("nobackground");
	}else if(status == 'on'){
		var svg_nobackground_color = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

		$(this).html(svg_nobackground_color);
		$(this).attr("status", "off");

		$(this).parent().parent().addClass("nobackground");
		$(this).parent().parent().removeClass("whitebackground");
	}
});


// this is to drop down the tray for all the header templates available trigger_dropdownheader_templates
$(document).on("click", '.trigger_dropdownheader_templates', function(event) {
    if($('._style_dropdownheader_nav')[0]){
        // confirm if the dropdown already exists
        $("._style_dropdownheader_nav").remove();
        return;
    }else{
    	$(this).after("<div class='_style_dropdownheader_nav'><div class='loader' style='margin-left:165px;margin-top:100px;'></div></div>");

    	// load the template desings from teh database
    	var something = "something";
	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadheader_templates";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{something:something},
	        success:function(data){
	        var data = data.trim();
	        $("._style_dropdownheader_nav").html(data);
	      }
	    });
    }
	
});

// this is to select header style select_header_style
$(document).on("click", '.select_header_style', function(event) {
	// headertype
	var headertype = $(this).attr("headertype");

	var pagename = $(".pagename").val();
	var pagen_text_details = $(".pagen_text_details").val();

	var nav_settings = "<svg class='bi bi-tools' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'/><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/></svg>";

	// check if this exist before doing anything uldummypage
    if($('.uldummypage')[0]){
    	var pagenav = $('.uldummypage').html();
    }else{
    	var pagenav = "<li class='linkeffect navsettings_trigger' navigationtype='horizontal'>"+nav_settings+"</li><li class='linkeffect openlink_' theattr='otherpages'>link1</li><li class='linkeffect openlink_' theattr='otherpages'>link2</li><li class='linkeffect openlink_' theattr='otherpages'>link3</li><li class='linkeffect openlink_' theattr='otherpages'>link4</li><li class='linkeffect openlink_' theattr='otherpages'>link5</li><li class='linkeffect openlink_' theattr='otherpages'>link6</li><li class='linkeffect openlink_' theattr='otherpages'>link6</li>";
    }

	var nav = "<ul class='uldummypage'>"+pagenav+"</ul>";

	var toggle_on = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";

	var toggle_off = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

	// design based on headertype
	if(headertype == '_tr_header_style1a'){
		var settingstools = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-tools' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'/><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/></svg>";

		var style1 = "<table width='100%' class='headertemplate' id='background_shift_1' headertype='_tr_header_style1a' style='margin-bottom:5px;'><tr width='100%'><td id='background_shift_1__leftTD'><ul class='nostylelist'><li id='page_name_tray' style='margin-bottom:5px;'><span class='linkeffect toggle_shiftingbackground' status='on'>"+toggle_on+"</span><br><b><span class='linkeffect editing_pagename_tagname' style='font-weight:normal;font-size:13px;'>"+settingstools+"</span> <span class='linkeffect header_pagename'>"+pagename+"</span></b></li> <li id='background_shift_1__leftTD__details_Style'> <span class='pagedetails_foredit'>"+pagen_text_details+"</span> </li></ul></td><td id='background_shift_1__rightTD'>"+nav+"</td></tr></table>";

		$("#dummyheader").html(style1);
		$("#dummyheader").attr("style", "margin:10px;");
	}

	$("._style_dropdownheader_nav").remove();
	// var dummyheader_tobe_updated $("#dummyheader").html("ssssss");
	// $("#dummyheader").attr("style", "background:red;margin:10px;");
});

// this is to edit the page name and the tag phrase editing_pagename_tagname
$(document).on("click", '.editing_pagename_tagname', function(event) {
	var pagename = $(".expanded_dummy_tray_forpreview").find(".header_pagename").text();
	var tagline = $(".expanded_dummy_tray_forpreview").find(".pagedetails_foredit").text();
	pagename = pagename.trim();
	tagline = tagline.trim();
	// alert(pagename);
	// alert(tagline);

	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 200;

	$(".place_actual_dummypage").after("<div class='reorder_tray_headerdetails' style='position:absolute; width:400px;margin-left:"+halfwidth+"px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1);'><span style='padding-left:5px;font-size:13px;'>Promote Page Header Information</span><br><input type='text' class='newlytyped_pagename' value='"+pagename+"' id='styletop-for-inputname'><br><input type='text' class='newlytyped_tagline' value='"+tagline+"' id='styletop-for-inputname'><br><u class='linkeffect update_the_header_reorder' style='font-size:13px;padding-left:5px;'>Update</u> <u class='linkeffect close_header_reorder' style='font-size:13px;padding-left:5px;'>Close</u></div>");
});

// this is to close the header reorder close_header_reorder
$(document).on("click", '.close_header_reorder', function(event) {
	$(".reorder_tray_headerdetails").remove();
});

// this is to put the new details of the updated header 
$(document).on("click", '.update_the_header_reorder', function(event) {
	var newpagename = $(".newlytyped_pagename").val();
	var newtagline = $(".newlytyped_tagline").val();

	$(".expanded_dummy_tray_forpreview").find(".header_pagename").text(newpagename);
	$(".expanded_dummy_tray_forpreview").find(".pagedetails_foredit").text(newtagline);
});



// this is to nav settings navsettings_trigger 
$(document).on("click", '.navsettings_trigger', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");

	var close_nav_Settings = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

	var off_means_horizontal = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

	var onn_means_horizontal = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";

	var navigationtype = $(".navsettings_trigger").attr("navigationtype");
	if(navigationtype == 'horizontal'){
		var construct_li = "";
		$(".place_actual_dummypage").find(".uldummypage > li").each(function(){
			var link_ = $(this).attr("link_");//alert(link_+"horizontal");
			if(link_ == undefined){
				link_ = '';
			}
			var rnd = Math.random().toString(36).substring(7);
			var li_content = $(this).text();
				li_content = li_content.trim();

			var destination = $(this).attr("destination");
			if(destination == undefined){
				destination = "";
			}

			if(li_content != ''){
				var link = "<input type='text' id='styletop-for-inputname' class='nav_link_url' placeholder='Link URL' value='"+destination+"' link_='"+link_+"'>";
				var name = "<input type='text' id='styletop-for-inputname' class='nav_link_name' value='"+li_content+"' placeholder='Link Name'><br><u class='linkeffect remove_page_link' style='font-size:12px;'>Remove Link</u>";
					construct_li += "<li class='shizisi ui-state-default ui-sortable-handle' id='"+rnd+"' style='margin-bottom:10px;padding:10px;'>"+link+"<br>"+name+"</li>";
				$("#sortable").append(construct_li);
			}
		});
	}else if(navigationtype == 'vertical'){
		var construct_li = "";

		var arrayattr = $(".place_actual_dummypage").find(".uldummypage > .navsettings_trigger").next().attr("array");
		var arrayattr = arrayattr.split(",");
		// alert(arrayattr);
		for (i = 0; i < arrayattr.length; i++) {
			var rnd = Math.random().toString(36).substring(7);
			inner_array_for_break = arrayattr[i];
			// console.log(arrayattr[i]);
			var components = inner_array_for_break.split("propsdivider");
			// console.log(components[0]+" link");
			// console.log(components[1]+" namelink");

			components[0] = components[0].trim();
			if(components[0] == 'emptylink'){
				components[0] = '';
			}

			
			if(components[2] == undefined){
				// alert(components[2]+" vertical");
				components[2] = '';
			}else{
				components[2] = components[2].trim();
			}
			// alert(components[2]+" outsidesomething");
			var link = "<input type='text' id='styletop-for-inputname' class='nav_link_url' placeholder='Link URL' value='"+components[0]+"' link_='"+components[2]+"'>";
			var name = "<input type='text' id='styletop-for-inputname' class='nav_link_name' value='"+components[1]+"' placeholder='Link Name'><br><u class='linkeffect remove_page_link' style='font-size:12px;'>Remove Link</u>";
				construct_li += "<li class='shizisi ui-state-default ui-sortable-handle' id='"+rnd+"' style='margin-bottom:10px;padding:10px;'>"+link+"<br>"+name+"</li>";
			$("#sortable").append(construct_li);
		}
		
	}


	if(navigationtype == 'horizontal'){
		var off_means_horizontal = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";
		var type_swap_icon = off_means_horizontal;
	}else if(navigationtype == 'vertical'){
		var onn_means_vertical = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";
		var type_swap_icon = onn_means_vertical;
	}
	// alltags += "<li theuniqueid='"+thuniqueclass+"'>"+theinputval+"</li>";
	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 200;

	$(".sortable_tray2").show();
	$(".place_actual_dummypage").after($(".sortable_tray2"));
	$(".sortable_tray2").attr("style", "position:absolute; width:400px;margin-left:"+halfwidth+"px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1);");
	$(".sortable_tray2ul").html(construct_li);
	$(".sortable_tray2ul").before("<table class='header_reordertags' style='width:100%;'><tr width='100%'><td width='100%' style='padding-left:5px;'>Navigation Settings</td> <td width='100%' style='text-align:right;padding-right:5px;'><span class='linkeffect swap_nav_type'>"+type_swap_icon+"</span> </td></tr></table>");
	$(".sortable_tray2ul").after("<div class='footer_reordertags' style='width:100%;padding:5px;'><u class='linkeffect addnew_pagenav_'>Add</u> <u class='linkeffect update_thepage_ul_links'>Update</u> <u class='linkeffect close_nav_settings'>Cancel</u></div>");
	// $(".templates-plate").after(navigation_settings_tray);
});

// this is to swap type of navigation between horizontal navigation or vertical navigation swap_nav_type
$(document).on("click", '.swap_nav_type', function(event) {
	var checktype = $(".swap_nav_type > svg").attr("class");
	var off_means_horizontal = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

	var onn_means_vertical = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";

	if(checktype == 'bi bi-toggle-off'){
		$(this).html(onn_means_vertical);
		$(".navsettings_trigger").attr("navigationtype", "vertical");
	}else if(checktype == 'bi bi-toggle-on'){
		$(this).html(off_means_horizontal);
		$(".navsettings_trigger").attr("navigationtype", "horizontal");
	}
	// alert(checktype);
});


// addnew_pagenav_
$(document).on("click", '.addnew_pagenav_', function(event) {
	var rnd = Math.random().toString(36).substring(7);
	var link = "<input type='text' id='styletop-for-inputname' class='nav_link_url' placeholder='Link URL'>";
	var name = "<input type='text' id='styletop-for-inputname' class='nav_link_name' placeholder='Link Name'><br><u class='linkeffect remove_page_link' style='font-size:12px;'>Remove Link</u>";
	var construct_li = "<li class='shizisi ui-state-default ui-sortable-handle' id='"+rnd+"' style='margin-bottom:10px;padding:10px;'>"+link+"<br>"+name+"</li>";
	$("#sortable").prepend(construct_li)
});

// this is to update the ul links update_thepage_ul_links
$(document).on("click", '.update_thepage_ul_links', function(event) {
	// this is to know the type of the navigation 
	var typeofnav = $(".navsettings_trigger").attr("navigationtype");
	// get the new url and construct into the nav at the top of the page
	var new_nav_construct = "";
	if(typeofnav == 'horizontal'){
		$("#sortable > li").each(function(){
			// alert("horizontal inner");
			var theid = $(this).attr("id");
			var link_url = $("#"+theid+" > .nav_link_url").val().toLowerCase();
			var link_ = $("#"+theid+" > .nav_link_url").attr("link_");
			link_ = link_.trim();
			if(link_ == ''){
				var link_ = Math.random().toString(36).substring(7);
					link_ = Math.random().toString(36).substring(7);
			}
			var link_name = $("#"+theid+" > .nav_link_name").val();

			new_nav_construct += "<li class='linkeffect openlink_' destination='"+link_url+"' theattr='otherpages' link_='"+link_+"'>"+link_name+"</li>";

			// console.log(link_name);
		});
	}else if(typeofnav == 'vertical'){
		var arrayforlinks = Array();
		$("#sortable > li").each(function(){
			var theid = $(this).attr("id");
			var link_url = $("#"+theid+" > .nav_link_url").val().toLowerCase();
			var link_ = $("#"+theid+" > .nav_link_url").attr("link_");
			if(link_url == ''){
				link_url = "emptylink";
			}
			var link_name = $("#"+theid+" > .nav_link_name").val();

			arrayforlinks[arrayforlinks.length] = link_url+"propsdivider"+link_name+"propsdivider"+link_;
			// new_nav_construct += "<li class='linkeffect' destination='"+link_url+"'>"+link_name+"</li>";

			// console.log(link_name);
		});

		var navibar = "<svg class='bi bi-view-stacked' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3 0h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3zm0 8h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z'/></svg>";
		new_nav_construct += "<li class='linkeffect dropdown_vertical_navigation' array='"+arrayforlinks+"'>"+navibar+"</li>";

	}

	// console.log(new_nav_construct);
	// return;
	$(".uldummypage").html(new_nav_construct);
	var thesettings = "<li class='linkeffect navsettings_trigger' navigationtype='"+typeofnav+"'><svg class='bi bi-tools' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'></path><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'></path></svg></li>";

	$(".uldummypage").prepend(thesettings);

    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");
});

// this is to remove the page link remove_page_link
$(document).on("click", '.remove_page_link', function(event) {

    // give custom id of li to removal validation div container 
    var theliID = $(this).parent().attr("id");

	// first confirm if it is already opened
    if($('.theli'+theliID)[0]){
    	$('.theconfirm_delete_oflink_tray').remove();
    	return;
    }else if($('.theconfirm_delete_oflink_tray')[0]){
    	$('.theconfirm_delete_oflink_tray').remove();
    }

	var i;
	var thetext = "<table width='100%'>";

	thetext += "<tr width='100%' class='tr_header_link_Removal'><td width='100%' colspan='2'>Type Security String to confirm delete action</td></tr>";
	for (i = 0; i < 3; i++) {
		var rnd = Math.random().toString(36).substring(7);
		thetext += "<tr class='confirmation_linknav_tr' width='100%'><td width='30%' class='ques"+i+"'>"+rnd+"</td> <td width='70%'><input type='text' id='styletop-for-inputname' class='ans"+i+"' style='border-bottom:1px solid rgba(128,128,128,0.4);'></td></tr>";
	}
	thetext += "<tr width='100%'><td width='100%' colspan='2'><u class='linkeffect confirmdelete_oflink' ownerid='"+theliID+"' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect remove_delete_panel_forlinks' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr>";
	thetext + "</table>";

	$(this).after("<div class='theconfirm_delete_oflink_tray theli"+theliID+"' style='background:white;width:200px; margin-left:80px; margin-top:-50px; padding:5px;font-size:13px; position:absolute;'>"+thetext+"</div>");
});

// this is to remove the links for the panel remove_delete_panel_forlinks
$(document).on("click", '.remove_delete_panel_forlinks', function(event) {
	$(this).parent().parent().parent().parent().parent().remove();
});


// this is to confirm the delete of the link confirmdelete_oflink
$(document).on("click", '.confirmdelete_oflink', function(event) {
	// this is the confirmation of the linknav confirmation_linknav_tr
	// we remove any error notifications that has being inserted
	$(".error_notification").remove();
	$(".confirmation_linknav_tr").attr("style","");
	var checkstuff = 0;

	var qesilink0 = $(".ques0").text();
	var qesilink1 = $(".ques1").text();
	var qesilink2 = $(".ques2").text();

	for (i = 0; i < 3; i++) {
		// alert($(".ques"+i).text());
		var quest = $(".ques"+i).text();
		var anst = $(".ans"+i).val();

		if(quest != anst){
			$(".ques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			checkstuff = 1;
		}
	}

	if(checkstuff > 0){
		$(".tr_header_link_Removal").after("<tr class='error_notification' width='100%'><td width='100%' style='color:rgba(255,69,0,0.8);' colspan='2'>Please ensure that the strings are equal</td></tr>")
	}else{
		var ownerid = $(this).attr("ownerid");
		$("#"+ownerid).remove();
	}
});

// this is to close the navigation settings close_nav_settings
$(document).on("click", '.close_nav_settings', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    // $(".sortable_tray2").remove();
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");
});


// this is to toggle the shifting background toggle_shiftingbackground
$(document).on("click", '.toggle_shiftingbackground', function(event) {
	var nav = "<table width='100%'><tr width='100%'><td class='linkeffect'>link1</td> <td class='linkeffect'>link2</td> <td class='linkeffect'>link3</td> <td class='linkeffect'>link4</td> <td class='linkeffect'>link5</td> <td class='linkeffect'>link6</td> <td class='linkeffect'>link7</td></tr></table>";

	var toggle_on = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/></svg>";

	var toggle_off = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

	var status = $(this).attr("status");
	if(status == 'on'){
		var getid = $(this).parent().parent().parent().parent().parent().parent().parent().parent().attr("id");
		if(getid == 'background_shift_4'){
			// alert("to turn off");if its the fourth template do this
			$(this).parent().parent().parent().parent().parent().parent().parent().parent().attr("id","plainheader");
			$(this).attr("status", "off");
			$(this).html(toggle_off);
			return;
		}else{
			$(this).attr("status", "off");
			$(this).html(toggle_off);
			$(this).parent().parent().parent().parent().parent().parent().attr("id","plainheader");
		}

	}else{
		$(this).attr("status", "on");
		$(this).html(toggle_on);
		var check_headertype = $(this).parent().parent().parent().parent().parent().parent().attr("headertype");

		// check if it is the last style
		var check_headertype_4 = $(this).parent().parent().parent().parent().parent().parent().parent().parent().attr("headertype");
		
		if(check_headertype_4 == '_tr_header_style4'){
			var getid = $(this).parent().parent().parent().parent().parent().parent().parent().parent().attr("id","background_shift_4");
		}else{
			if(check_headertype == '_tr_header_style1a'){
				$(this).parent().parent().parent().parent().parent().parent().attr("id","background_shift_1");
			}

			if(check_headertype == '_tr_header_style2'){
				$(this).parent().parent().parent().parent().parent().parent().attr("id","background_shift_2");
			}

			if(check_headertype == '_tr_header_style3'){
				$(this).parent().parent().parent().parent().parent().parent().attr("id","background_shift_3");
			}
		}
	}
	
});

// continuously get the total width of the columns of the dummy page totalwidthholder
// continuously update the totalwidthholder
$(document).ready(function(){
	setInterval(function(){ 
		totalwidth = 0;
		totalwidth = parseFloat(totalwidth, 10);

		$(".cols_td_wrappers > td").each(function(){
			tdwidth = $(this).attr("width");
			// tdwidth = tdwidth.replace("%", "");
			tdwidth = parseFloat(tdwidth, 10);
			totalwidth = totalwidth + tdwidth;
		});
		console.log(totalwidth);
		$(".totalwidthholder").text(totalwidth);

	}, 2000);

});

// this is to toggle the navigation pagebuild_togglenav
$(document).on("click", '#pagebuild_togglenav', function(event) {
    // remove the second tray
    $(".delete_action_tray").remove();

	var uniqueid = $(this).attr("uniqueid");

	// this is to determine which dropdown is currently on the dom and what action to take
	// if i click the handle of drop down that is already existing it simply removes the drop down adn does nothing again
	// if not it removes the drop down and adds a new dropdown to the new location clicked
    if($('.woo-'+uniqueid)[0]){
        // confirm if the dropdown already exists
        $(".pagebuild_dropdown").remove();
        return;
    }else{
    	$(".pagebuild_dropdown").remove();
    }
	
	var deletecols = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

	var movetoleft = "<svg class='bi bi-arrow-left' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 0 1 0 .708L3.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M2.5 8a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>";

	var movetoright = "<svg class='bi bi-arrow-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 8l-2.647-2.646a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8z'/></svg>";

	$(this).after("<p class='pagebuild_dropdown woo-"+uniqueid+"' style='margin-left:3px;border:red;'><span class='linkeffect delete_pagebuildcols'>"+deletecols+" <span style='font-size:12px;'>Delete Column</span></span><br><span class='linkeffect movedummy_column_toleft'>"+movetoleft+" <span style='font-size:12px;'>Move to Left</span></span><br><span class='linkeffect movedummy_column_toright'>"+movetoright+" <span style='font-size:12px;'>Move to right</span></span></p>");
});

// this is to move the dummy column to the left movedummy_column_toleft
$(document).on("click", '.movedummy_column_toleft', function(event) {
	var theactive_td_id = $(this).parent().parent().parent().parent().attr("id");
	var theactive_td = $(this).parent().parent().parent().parent();
	var theempty_td = $(theactive_td).next();
	var theempty_td_id = $(theactive_td).next().attr("id");

	var _check__column_to_paste_after = $(theactive_td).prev().prev().attr("width");
	var column_to_paste_after = $(theactive_td).prev().prev();

	// var column_combo = theactive_td + theempty_td;
	if(_check__column_to_paste_after != undefined){
		// console.log(_check__column_to_paste_after);
		$(column_to_paste_after).before(theactive_td);
		$("#"+theactive_td_id).after(theempty_td);
		$(".pagebuild_dropdown").remove();
	}
});

// this is to move the dummy column to the right movedummy_column_toleft
$(document).on("click", '.movedummy_column_toright', function(event) {
	// after click move to right, we get the td that is affected, and the id of the td that is affected
	// we also get the immediate next empty td and the id of the immediate next empty td
	var theactive_td_id = $(this).parent().parent().parent().parent().attr("id");
	var theactive_td = $(this).parent().parent().parent().parent();
	var theempty_td = $(theactive_td).next();
	var theempty_td_id = $(theactive_td).next().attr("id");

	var _check__column_to_paste_after = $(theactive_td).next().next().attr("width");
	var column_to_paste_after = $(theactive_td).next().next();
	// alert(_check__column_to_paste_after);
	// var column_combo = theactive_td + theempty_td;
	if(_check__column_to_paste_after != undefined){
		// console.log(_check__column_to_paste_after);
		$(column_to_paste_after).after(theactive_td);
		$("#"+theactive_td_id).after(theempty_td);
		var checkif_empty_beside_empty = $("#"+theempty_td_id).next().attr("class");

		// if checkif_empty_beside_empty == emptydummy then we 
		if(checkif_empty_beside_empty == 'emptydummy'){
			$("#"+theactive_td_id).before(theempty_td);
		}else{
			// do nothing
		}
		$(".pagebuild_dropdown").remove();
	}
});

// to delete the page build colums delete_pagebuildcols
$(document).on("click", '.delete_pagebuildcols', function(event) {
    if($('.delete_action_tray')[0]){
        // confirm if the dropdown already exists
        $(".delete_action_tray").remove();
        return;
    }

	theelement_todelete = $(this).parent().parent().parent().parent();

	var i;
	var form_string = "<tr width='100%'><td width='100%' style='padding-left:5px;' colspan='2'>Type Security String to confirm delete action</td></tr>";
	for (i = 0; i < 3; i++) {
		var rnd = Math.random().toString(36).substring(7);
		form_string += "<tr width='100%'><td width='40%' class='ques"+i+"' style='padding-left:5px;'>"+rnd+"</td><td width='60%' style='padding-right:5px;'><input type='text' id='styletop-for-inputname' class='ans"+i+"' style='border-bottom:1px solid rgba(128,128,128,0.4);'></td></tr>";
	}

	form_string += "<tr width='100%'><td width='100%' colspan='2' style='padding:5px;padding-bottom:10px;'><u class='linkeffect removecolumn_confirmaction' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect delete_pagebuildcols' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr>";

	$(this).parent().after("<table class='delete_action_tray' style='background:white; border-radius:3px; position:absolute; width:200px; margin-left:115px; margin-top:-85px;font-size:13px;'>"+form_string+"</table>");
});


// this is to confirm the action of removing the column from the mock design removecolumn_confirmaction
$(document).on("click", '.removecolumn_confirmaction', function(event) {
	// it is with this value we decide if to go ahead with the 
	// deleting row or suspend actiondue to failed validation
	var action_decider = "";
	for (i = 0; i < 3; i++) {
		var original_val = $(".ques"+i).text();
		var ans_val = $(".ans"+i).val();

		if(original_val != ans_val){
			$(".ques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			action_decider += "sds";
		}else{
			$(".ques"+i).parent().attr("style", "background:;");
		}
	}
	if(action_decider == ''){
		// this removes the affected column
		// the variable fo the clumn was created in the delete_pagebuildcols function above
		var width_of_affectedcolumn = $(theelement_todelete).attr("width");
		var widthof_emptycolumn = $(theelement_todelete).next().attr("width");

		// get the unique id of the affected empty column and check if its the same as the last empty column of the page
		// if it's the same then don't remove the empty coulmn but remove the affected coulmn and add the width to the empty coulmn
		var uniqueid_empty_cols = $(theelement_todelete).next().attr("id");//alert(uniqueid_empty_cols);
		// array of all empty column and get the last empty column for comparism
		var emptydummy = Array();
		$(".emptydummy").each(function(){
			emptydummy[emptydummy.length] = $(this).attr("id");
		});
		
		var lastempty_col = emptydummy[emptydummy.length - 1];
		// alert(lastempty_col);

		// if the affected empty column is not the same as the empty column of the page then we remove the empty column and the 
		// affected column add the widths of the two removed and add to the width of the last empty column
		if(lastempty_col != uniqueid_empty_cols){
			alert("1");
			var width_of_affectedcolumn = parseInt(width_of_affectedcolumn, 10);
			var widthof_emptycolumn = parseInt(widthof_emptycolumn, 10);

			var totalwidth = width_of_affectedcolumn + widthof_emptycolumn;
			// we get the width of the last column and add the total width of the affected to it
			var lstcol_width = $("#"+lastempty_col).attr("width");
			var lstcol_width = parseInt(lstcol_width, 10);
			var lstcol_width = lstcol_width + totalwidth;

			$("#"+lastempty_col).attr("width", lstcol_width+"%");
			// return;
			$(theelement_todelete).next().remove();
			$(theelement_todelete).remove();
		}else{
			// we check if there is only one empty column and only one active column
			// if above comment is true...delete the active column and make the empty column equal to one hundred 
			var emptycount = Array();
			$(".emptydummy").each(function(){
				emptycount[emptycount.length] = $(this).attr("id");
			});

			var activecount = Array();
			$(".activedummy").each(function(){
				activecount[activecount.length] = $(this).attr("id");
			});
			var countempty = emptycount.length;
			var countactive = activecount.length;

			if(countempty == 1 && countactive == 1){
				$(".activedummy").remove();
				$(".emptydummy").attr("width", "100%");
			}else{
				var width_of_affectedcolumn = parseInt(width_of_affectedcolumn, 10);
				// we get the width of the last column and add the total width of the affected to it
				var lstcol_width = $("#"+lastempty_col).attr("width");
				var lstcol_width = parseInt(lstcol_width, 10);

				// add width to the last column width
				
				var lstcol_width = lstcol_width + width_of_affectedcolumn;
				$("#"+lastempty_col).attr("width", lstcol_width+"%");

				$(theelement_todelete).remove();
				// after removing we realise the last empty column is exactly next to anothe empty column.
				// we try to remove th eempty column next to the last column and add the width of the empty column being removed to the
				// last empty column
				var widthof_prev = $("#"+lastempty_col).prev().attr("width");
				var widthof_prev = parseInt(widthof_prev, 10);

				var widthoflst = $("#"+lastempty_col).attr("width");
				var widthoflst = parseInt(widthoflst, 10);
				var widthoflst = widthoflst + widthof_prev;

				$("#"+lastempty_col).attr("width", widthoflst+"%");
				$("#"+lastempty_col).prev().remove();
			}
		}
	}else{}
	
});


// this is to update the width of the column of the page update_col_width
$(document).on("click", '.update_col_width', function(event) {
	var newval = $(this).prev().val();
	var oldval = $(this).attr("oldval");
	var tdUpdated = $(this).parent();

	// getting the difference between the old value and the new value
	if(newval > oldval){
		var valdiffernece = newval - oldval;
	}else if(oldval > newval){
		var valdiffernece = oldval - newval;
	}else if(oldval == newval){
		var valdiffernece = oldval;
	}

	// this is for the empty columns array
	var emptarr = Array();
	$(".emptydummy").each(function(){
		var dummywidth = $(this).attr("width");
		var dummyID = $(this).attr("id");
		emptarr[emptarr.length] = {"customid":dummyID, "width":dummywidth};
	});

	var highestNum = {customid: "aaaaa", width: "0%"};
	emptarr.forEach(elem => {
	  if (parseInt(elem.width, 10) > parseInt(highestNum.width, 10)) {
	    highestNum = elem;
	  }
	});


	// this is for the active columns array 
	var actarr = Array();
	$(".activedummy").each(function(){
		var dummywidth = $(this).attr("width");
		var dummyID = $(this).attr("id");
		actarr[actarr.length] = {"customid":dummyID, "width":dummywidth};
	});

	var act_highestNum = {customid: "aaaaa", width: "0%"};
	actarr.forEach(elem => {
	  if (parseInt(elem.width, 10) > parseInt(act_highestNum.width, 10)) {
	    act_highestNum = elem;
	  }
	});
	// console.log(act_highestNum);

	// console.log(highestNum["customid"]);
	var affectedempty = highestNum["customid"];
	// getting the affected width of the highest empty column
	var affectedwidth = $("#"+affectedempty).attr("width");
	var affectedwidth = parseInt(affectedwidth, 10);
	// console.log(affectedwidth);

	// console.log(act_highestNum["customid"]);
	var affectedactive = act_highestNum["customid"];

	// getting the affected width of the highest empty column
	var affectedwidth_active = $("#"+affectedactive).attr("width");
	var affectedwidth_active = parseInt(affectedwidth_active, 10);
	// console.log(affectedwidth_active);


	if(newval > oldval){
		// subtracting valdiffernece from the empty column
		var newemptyval = anotherempty = affectedwidth - valdiffernece;
		// alert("one");
	}else if(oldval > newval){
		// adding valdiffernece from the empty column
		var newemptyval = anotherempty = affectedwidth + valdiffernece;
		// alert("two");
	}else if(oldval == newval){
		valdiffernece = newemptyval = oldval;
	}

	// alert(valdiffernece+" valdifference");
	// alert(affectedwidth+" affected width");
	// alert(newemptyval + " L439");
	if(oldval == newval){
		// do nothing since no change
	}else{
		// if the difference is greater than the highest empty split into two and 
		// put one half in the highest active and the other in the highest empty
		if(valdiffernece > affectedwidth){
			// alert("val difference greater than affected width");
			halfwidths = valdiffernece/2;

			if(newval > oldval){
				// subtracting valdiffernece from the empty column
				var newemptyval = affectedwidth - halfwidths;
				var newactiveval = affectedwidth_active - halfwidths;
			}else if(oldval > newval){
				// adding valdiffernece from the empty column
				var newemptyval = affectedwidth + halfwidths;
				var newactiveval = affectedwidth_active + halfwidths;
			}
			// alert(newemptyval+" --inside else");
			// check if td to be increased is same as the highest active td
			// if its the same you will be increase what you're supposed to be reducing by half of the initial value of what you want to reduce
			var id_updated = $(tdUpdated).attr("id");
			var idofaffected = $("#"+affectedactive).attr("id");

			// if the td to be increased is the same as the td to be deducted or added to; 
			if(id_updated == idofaffected){
				// alert("check if both are equal");
				// we first check the next
				// if it is undefined we check previous
				var fornext_avail = $("#"+id_updated).next().next().attr("id");
				var fornext_avail_width = $("#"+fornext_avail).attr("width");
				var fornext_avail_width = parseInt(fornext_avail_width, 10);
				if(fornext_avail == undefined){
					var fornext_avail = $("#"+id_updated).prev().prev().attr("id");
					var fornext_avail_width = $("#"+fornext_avail).attr("width");
					var fornext_avail_width = parseInt(fornext_avail_width, 10);
				}

				var oldval_attr_submit = $("#"+fornext_avail+" > .update_col_width").attr("oldval");
				var oldval_inputtag = $("#"+fornext_avail+" > input").val();

				if(newval > oldval){
					// subtracting valdiffernece from the empty column
					var newemptyval = affectedwidth - halfwidths;
					var newactiveval = fornext_avail_width - halfwidths;
				}else if(oldval > newval){
					// adding valdiffernece from the empty column
					var newemptyval = affectedwidth + halfwidths;
					var newactiveval = fornext_avail_width + halfwidths;
				}
				// alert(fornext_avail+" id of new td");alert(newactiveval+" new active val");alert(fornext_avail_width+" width");

				// we check if the empty cols are of the same width value. if they are, we select the last empty col for adding or deducting width value
				// create an array of empty cols
				var emptycolsArray = [];
				$(".emptydummy").each(function(){
					tdwidth = $(this).attr("width");
					emptycolsArray[emptycolsArray.length] = tdwidth;
				});
				checkequality = emptycolsArray.every( (val, i, arr) => val === arr[0] )   // true or false
				if(checkequality == true){ 
					// if all the widths are the same, we create an array carrying all the id of the empty cols and 
					// select the last id in the array and use it
					// alert(checkequality);
					var emptycolsArrayID = [];
					$(".emptydummy").each(function(){
						tdid = $(this).attr("id");
						emptycolsArrayID[emptycolsArrayID.length] = tdid;
					});
					
					// to select the last member of the array
					var lastmember = emptycolsArrayID[emptycolsArrayID.length - 1];
					var lastmem_width = $("#"+lastmember).attr("width");
					// same width of the last empty column without the percentage sign 
					actiewidthINT = parseInt(lastmem_width, 10);

					// we add five to the old width
					actiewidthINT = actiewidthINT + 5;
					// alert(actiewidthINT);
					// $("#"+lastmember).attr("width", );
					// console.log(act_highestNum["width"]);
					actiewidth = parseInt(act_highestNum["width"], 10);
					// create a new width for the largest active col
					var actiewidth = actiewidth - 5;
					$("#"+act_highestNum["customid"]).attr("width", actiewidth+"%");
					$("#"+lastmember).attr("width", actiewidthINT+"%");
					// alert(oldval);
					// the input tag that you tried to increase or reduce, take it back to the old value
					$(this).prev().val(actiewidth);
					$(this).prev().attr("value", actiewidth);

					// change the old value of the changed biggest active colunm
					var theactive = $("#"+act_highestNum["customid"]).attr("id");//console.log(theactive+" last");
					$("#"+theactive+" > .update_col_width").attr("oldval", actiewidth);
					// change the value of the input tag biggest active colunm that is affected/changed 
					// $("#"+theactive+" > input").attr("value", actiewidth);
				}else{
					// change the width of the active column
					$("#"+fornext_avail).attr("width", newactiveval+"%");
					// change the value of the input tag of the affected active column
					$("#"+fornext_avail+" > input").val(newactiveval);
					$("#"+fornext_avail+" > input").attr("value", newactiveval);
					// this is the new value put in the oldval attribute fo the submit button of the col
					$("#"+fornext_avail+" > .update_col_width").attr("oldval", newactiveval);
					$("#"+affectedempty).attr("width", newemptyval+"%");

					$(tdUpdated).attr("width", newval+"%");
					$(this).attr("oldval", newval);
					$(oldval_active).attr("oldval", newactiveval);
				}
			}else{
				// create an array of empty cols
				var emptycolsArray = [];
				$(".emptydummy").each(function(){
					tdwidth = $(this).attr("width");
					emptycolsArray[emptycolsArray.length] = tdwidth;
				});
				// this is to check if all the members of the array (all the widths fo the empty columns) are the same
				// checkequality
				checkequality = emptycolsArray.every( (val, i, arr) => val === arr[0] )   // true or false
				if(checkequality == true){ 
					// if all the widths are the same, we create an array carrying all the id of the empty cols and 
					// select the last id in the array and use it
					// alert(checkequality);
					var emptycolsArrayID = [];
					$(".emptydummy").each(function(){
						tdid = $(this).attr("id");
						emptycolsArrayID[emptycolsArrayID.length] = tdid;
					});
					
					// to select the last member of the array
					var lastmember = emptycolsArrayID[emptycolsArrayID.length - 1];
					var lastmem_width = $("#"+lastmember).attr("width");
					// same width of the last empty column without the percentage sign 
					actiewidthINT = parseInt(lastmem_width, 10);

					// we add five to the old width
					actiewidthINT = actiewidthINT + 5;
					// alert(actiewidthINT);
					// $("#"+lastmember).attr("width", );
					// console.log(act_highestNum["width"]);
					actiewidth = parseInt(act_highestNum["width"], 10);
					// create a new width for the largest active col
					var actiewidth = actiewidth - 5;
					$("#"+act_highestNum["customid"]).attr("width", actiewidth+"%");
					$("#"+lastmember).attr("width", actiewidthINT+"%");
					// alert(oldval);
					// the input tag that you tried to increase or reduce, take it back to the old value
					$(this).prev().val(oldval);
					$(this).prev().attr("value", oldval);

					// change the old value of the changed biggest active colunm
					var theactive = $("#"+act_highestNum["customid"]).attr("id");//console.log(theactive+" last");
					$("#"+theactive+" > .update_col_width").attr("oldval", actiewidth);
					// change the value of the input tag biggest active colunm that is affected/changed 
					$("#"+theactive+" > input").val(actiewidth);
					$("#"+theactive+" > input").attr("value", actiewidth);
				}else{
					// this is if the empty cols are not equal or of the same width
					var oldval_active = $("#"+affectedactive+" > .update_col_width");
					var input_active = $("#"+affectedactive+" > input");
					$(tdUpdated).attr("width", newval+"%");
					$("#"+affectedactive).attr("width", newactiveval+"%");

					$(input_active).val(newactiveval);
					$(input_active).attr("value", newactiveval);
					
					$("#"+affectedempty).attr("width", newemptyval+"%");

					$(this).attr("oldval", newval);
					$(oldval_active).attr("oldval", newactiveval);
				}
			}
		}else{
			// if the half is greater than any of the highest change the width of the highest to the new half
			// console.log(affectedwidth);
			// console.log(newemptyval);
			// alert("not greater than affected width");
			$(tdUpdated).attr("width", newval+"%");
			$(this).attr("oldval", newval);
			$("#"+affectedempty).attr("width", newemptyval+"%");
		}
	}

	// CHECK IF ALL THE WIDTHS OF THE TD IS EQUAL TO 100% and if it isnt convert it to 100%
	// $(".cols_td_wrappers > td");

	// convert all negative empty width to 2%
	$(".emptydummy").each(function(){
		empty_width = $(this).attr("width");
		empty_width = parseInt(empty_width, 10);

		if(empty_width < 0){
			$(this).attr("width", "2%");
			alert("negative just changed to 2%");
		}
	});

	totalwidth = 0;
	totalwidth = parseInt(totalwidth, 10);
	$(".cols_td_wrappers > td").each(function(){
		colwidth = $(this).attr("width");
		colwidth = parseInt(colwidth, 10);

		totalwidth = totalwidth + colwidth;
	});

	// if totalwidth is equal to 100% do nothing
	if(totalwidth == 100){
		// return; do nothing
	}else if(totalwidth > 100){
		// if it is greater than 100% calculate the remaining and deduct it from the last empty or the last active or divide 
		// into two and divide half from the last empty and half from the last active 
		width_difference = totalwidth - 100;
		// alert("greater than 100");
		console.log(width_difference+" width difference");
		// alert(totalwidth+ " total width");

		// we loop through activedummy and check from the last to the first if any of the width is greater 
		// than the difference of the width and hundred
		var checkactive = Array();
		$(".activedummy").each(function(){
			var actv_id = $(this).attr("id");
			checkactive[checkactive.length] = actv_id;
		});
		// alert(checkactive);
		activearray_length = checkactive.length - 1;
		var i;
		for (i = activearray_length; i >= 0; i--) {
			// alert(i);
			var actwidth = $("#"+checkactive[i]).attr("width");
			var actwidth = parseInt(actwidth, 10);
			console.log(actwidth+" width of active");
			if(actwidth > width_difference){
				// alert(actwidth+ " width is greater than difference");
				actwidth = actwidth - width_difference;
				$("#"+checkactive[i]).attr("width", actwidth+"%");
				$("#"+checkactive[i]+" > input").val(actwidth);
				return;
			}
		}
	}else if(totalwidth < 100){
		// 
	}
	// alert(totalwidth);
	
});

// this is to add new column to the dummy page addpagecolums
$(document).on("click", '.addpagecolums', function(event) {
	var get_emptylength = $(".emptydummy").length;
	var get_activelength = $(".activedummy").length;
	// alert(get_emptylength+" empty");alert(get_activelength+" active");

	// if there's no active column
	if(get_emptylength == 1 && get_activelength == 0){
		// alert("there is no active column");
		var uniqueid = Math.random().toString(36).substring(7);
		var theid = Math.random().toString(36).substring(7);

		var svg = "<svg class='bi bi-filter-left linkeffect' id='pagebuild_togglenav' uniqueid='"+uniqueid+"' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'></path></svg>";

		var svg_nobackground_color = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

		var something = "<td class='activedummy nobackground' id='"+theid+"' width='50%' style='height:280px; border-radius:5px; background:rgba(255,255,255,0.9); text-align:center;'><p style='position:absolute; margin-top:-25%; text-align:left;'><span>"+svg+"</span> <span class='linkeffect change_column_background_color' status='off'>"+svg_nobackground_color+"</span></p><input type='text' value='50' style='width:100%;background: transparent;border:0px;outline:none;text-align:center;'><u class='linkeffect update_col_width' oldval='50'>update</u></td>";

		$(".emptydummy").before(something);
		$(".emptydummy").attr("width", "50%");
	}else if(get_emptylength == 1 && get_activelength == 1){
		// if there is one active column and one empty column we divide the width of the empty column into two
		// 
		var widthof_empty = $(".emptydummy").attr("width");
		var widthof_empty = parseInt(widthof_empty, 10);

		var halfwidth = widthof_empty/2;
		$(".emptydummy").attr("width", halfwidth+"%");

		var widthof_active = halfwidth - 2;
		var rnd1 = Math.random().toString(36).substring(7);
		var sml_empty = "<td class='emptydummy' id='"+rnd1+"' width='2%' style='height:280px;border-radius:5px;'></td>";

		var uniqueid = Math.random().toString(36).substring(7);
		var theid = Math.random().toString(36).substring(7);

		var svg = "<svg class='bi bi-filter-left linkeffect' id='pagebuild_togglenav' uniqueid='"+uniqueid+"' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'></path></svg>";

		var svg_nobackground_color = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

		var activedummy = "<td class='activedummy nobackground' id='"+theid+"' width='"+widthof_active+"%' style='height:280px; border-radius:5px; background:rgba(255,255,255,0.9); text-align:center;'><p style='position:absolute; margin-top:-25%; text-align:left;'><span>"+svg+"</span> <span class='linkeffect change_column_background_color' status='off'>"+svg_nobackground_color+"</span></p><input type='text' value='"+widthof_active+"' style='width:100%;background: transparent;border:0px;outline:none;text-align:center;'><u class='linkeffect update_col_width' oldval='50'>update</u></td>";

		var fynal = sml_empty + activedummy;
		$(".activedummy").after(fynal);
	}else if(get_activelength > 1){
		// if the number of active columns is greater then 4 pls do nothing, don't add any more columns 
		if(get_activelength >= 3){
			return;
		}
		// alert(get_activelength);
		// we select the last emptydummy and split the width of the last dummy into two
		var emptycolsarray = [];
		$(".emptydummy").each(function(){
			var get_empty_id = $(this).attr("id");
			// add each id to the array
			emptycolsarray[emptycolsarray.length] = get_empty_id;
		});

		var lstempty = emptycolsarray[emptycolsarray.length - 1];
		// alert(lstempty);
		var width_of_lastcolumn = $("#"+lstempty).attr("width");
		var width_of_lastcolumn = parseInt(width_of_lastcolumn, 10);
		// if width of last column is lesser than 5% do nothing
		if(width_of_lastcolumn < 5){
			// do nothing but send warning
		}else{
			var halfwidth = width_of_lastcolumn/2;
			// var activewidth = halfwidth - 2;

			var widthof_active = halfwidth - 2;
			var rnd1 = Math.random().toString(36).substring(7);
			var sml_empty = "<td class='emptydummy' id='"+rnd1+"' width='2%' style='height:280px;border-radius:5px;'></td>";

			var uniqueid = Math.random().toString(36).substring(7);
			var theid = Math.random().toString(36).substring(7);

			var svg = "<svg class='bi bi-filter-left linkeffect' id='pagebuild_togglenav' uniqueid='"+uniqueid+"' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'></path></svg>";

			var svg_nobackground_color = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";

			var activedummy = "<td class='activedummy nobackground' id='"+theid+"' width='"+widthof_active+"%' style='height:280px; border-radius:5px; background:rgba(255,255,255,0.9); text-align:center;'><p style='position:absolute; margin-top:-25%; text-align:left;'><span>"+svg+"</span> <span class='linkeffect change_column_background_color' status='off'>"+svg_nobackground_color+"</span></p><input type='text' value='"+widthof_active+"' style='width:100%;background: transparent;border:0px;outline:none;text-align:center;'><u class='linkeffect update_col_width' oldval='50'>update</u></td>";

			var fynal = sml_empty + activedummy;
			$("#"+lstempty).before(fynal);

			// add the new widht to the last column
			$("#"+lstempty).attr("width", halfwidth+"%");
		}
	}
});


// this is to restore the empty middle space between the column emptydummy
$(document).on("dblclick", '.emptydummy', function(event) {
	// we get the width of the current pressed
	var width_of_clicked_col = $(this).attr("width");
	// convert to intiger and remove % sign
	var width_of_clicked_col = parseInt(width_of_clicked_col, 10);

	if(width_of_clicked_col == 2){
		// do nothing
	}else{
		// alert(width_of_clicked_col);
		// we look for the last empty column in the page and add 
		var emptycolsarray = [];
		$(".emptydummy").each(function(){
			var get_empty_id = $(this).attr("id");
			// add each id to the array
			emptycolsarray[emptycolsarray.length] = get_empty_id;
		});
		// alert(emptycolsarray);
		var id_of_last_empty_column = emptycolsarray[emptycolsarray.length - 1];
		// alert(id_of_last_empty_column);

		// we convert current cols to two
		$(this).attr("width", "2%");
		// we add the width of current cols to llast empty cols
		var width_of_last_empty_cols = $("#"+id_of_last_empty_column).attr("width");
		// convert to integer
		var width_of_last_empty_cols = parseInt(width_of_last_empty_cols, 10);
		// alert(width_of_last_empty_cols);
		// alert(width_of_clicked_col+" width of clicked col");
		// we remove the initial 2% that was on the last column
		var newwidth = width_of_clicked_col + width_of_last_empty_cols - 2;
		$("#"+id_of_last_empty_column).attr("width", newwidth+"%");
	}
});



$(document).on("click", '.editcheckboxes', function(event) {
	inputtype = $(this).attr("type");
	inputname = $(this).attr("name"); // alert(inputname);
	theclass = $(this).attr("theclass");
	inputtopname = theclass;
	
	// this is as a result of loop through all the checkboxes within 
	valstring = $(this).attr("valstring");
	randstring = $(this).attr("randstring");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%'>";
    temp2 = "<tr width='100%' style=''><td width='90%' style='color:white;padding:5px 0px 5px 5px;'>Forms</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere").html(templates);
    $(".pasteall-templates").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

	$(".templates-plate").show();

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadformconsole";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{theclass:theclass, inputid:inputid, inputtopname:inputtopname, inputname:inputname, inputtype:inputtype,valstring:valstring, randstring:randstring},
        success:function(data){
        var data = data.trim();
        
        // $(".pasteall-templates").html(data);
        $(".pasteall-templates").html(data);
      }
    });
});

// this is to load editing pane for the button
$(document).on("click", '#toeditbutton', function(event) {
	inputtype = $(this).attr("type");
	// hide all the symbols of the input on the main page 
    theclass = $(this).attr("theclass");
	inputname = $(this).attr("name");
    // the inputname at the top of all input tag
    inputtopname = $(".inputname-"+inputname).val();
    // the input id
    inputid = $(this).attr("theid");
    
    $(".templates-plate").show();

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='color:black;padding:5px 0px 5px 5px;'>Forms</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere").html(templates);
    $(".pasteall-templates").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadformconsole";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{theclass:theclass, inputid:inputid, inputtopname:inputtopname, inputname:inputname, inputtype:inputtype},
        success:function(data){
        var data = data.trim();
        
        // $(".pasteall-templates").html(data);
        $(".pasteall-templates").html(data);
      }
    });
});

// this is to load components or edits for toggle
$(document).on("click", '.loadcomponents', function(event) {
	$(".edits_toggle").hide();
	$(".components_toggle").show();
});

// load edits loadedits
$(document).on("click", '.loadedits', function(event) {
	$(".edits_toggle").show();
	$(".components_toggle").hide();
});


// editnumboptions
$(document).on("click", '.editnumboptions', function(event) {
	thetype = $(this).attr("thetype");//alert(thetype);
	// decide what happens when thetype == textarea
	
	usenameToCheckAttr = $(".testinggrounds").attr("name");
	$("."+usenameToCheckAttr).removeAttr("datetheme");
	if(thetype == 'number'){
		numbersymbol = "<svg class='bi bi-type-h3 input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.625-4.272h1.018c1.142 0 1.935.67 1.949 1.674.013 1.005-.78 1.737-2.01 1.73-1.08-.007-1.853-.588-1.935-1.32H9.108c.069 1.327 1.224 2.386 3.083 2.386 1.935 0 3.343-1.155 3.309-2.789-.027-1.51-1.251-2.16-2.037-2.249v-.068c.704-.123 1.764-.91 1.723-2.229-.035-1.353-1.176-2.4-2.954-2.385-1.873.006-2.857 1.162-2.898 2.358h1.196c.062-.69.711-1.299 1.696-1.299.998 0 1.695.622 1.695 1.525.007.922-.718 1.592-1.695 1.592h-.964v1.074z'/></svg>";

		inputsymbol = numbersymbol;
		$(".testinggrounds").attr("type", "number");
	}else if(thetype == 'text'){
		textsymbol = "<svg class='bi bi-type input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2.244 13.081l.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081h1.244zm2.7-7.923L6.34 9.314H3.51l1.4-4.156h.034zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525z'/></svg>";

		inputsymbol = textsymbol;
		$(".testinggrounds").attr("type", "text");
	}else if(thetype == 'date'){
		datesymbol = "<svg class='bi bi-calendar input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/></svg>";

		inputsymbol = datesymbol;
		$(".testinggrounds").attr("type", "text");
	}else if(thetype == 'select'){
		selectsymbol = "<svg class='bi bi-arrow-up-down input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L11 3.707 8.354 6.354a.5.5 0 11-.708-.708l3-3zm-9 7a.5.5 0 01.708 0L5 12.293l2.646-2.647a.5.5 0 11.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M5 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z' clip-rule='evenodd'/></svg>";

		inputsymbol = selectsymbol;
		$(".testinggrounds").attr("type", "text");
	}else if(thetype == 'time'){
		timesymbol = "<svg class='bi bi-alarm input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A6 6 0 108 3a6 6 0 000 12zm0 1A7 7 0 108 2a7 7 0 000 14z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M8 4.5a.5.5 0 01.5.5v4a.5.5 0 01-.053.224l-1.5 3a.5.5 0 11-.894-.448L7.5 8.882V5a.5.5 0 01.5-.5z' clip-rule='evenodd'/><path d='M.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z'/><path fill-rule='evenodd' d='M11.646 14.146a.5.5 0 01.708 0l1 1a.5.5 0 01-.708.708l-1-1a.5.5 0 010-.708zm-7.292 0a.5.5 0 00-.708 0l-1 1a.5.5 0 00.708.708l1-1a.5.5 0 000-.708zM5.5.5A.5.5 0 016 0h4a.5.5 0 010 1H6a.5.5 0 01-.5-.5z' clip-rule='evenodd'/><path d='M7 1h2v2H7V1z'/></svg>";

		inputsymbol = timesymbol;
		$(".testinggrounds").attr("type", "text");
	}else if(thetype == 'textarea'){
		textareasymbol = "<svg class='bi bi-textarea-t input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 9a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 9a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M1.5 2.5A1.5 1.5 0 013 1h10a1.5 1.5 0 011.5 1.5v4h-1v-4A.5.5 0 0013 2H3a.5.5 0 00-.5.5v4h-1v-4zm1 7v4a.5.5 0 00.5.5h10a.5.5 0 00.5-.5v-4h1v4A1.5 1.5 0 0113 15H3a1.5 1.5 0 01-1.5-1.5v-4h1z' clip-rule='evenodd'/><path d='M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z'/></svg>";

		inputsymbol = textareasymbol;
		$(".testinggrounds").attr("type", "textarea");
	}else if(thetype == 'email'){
		emailsymbol = "<svg class='bi bi-at input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z' clip-rule='evenodd'/></svg>";

		inputsymbol = emailsymbol;
		$(".testinggrounds").attr("type", "email");
	}else if(thetype == 'button'){
		inputsymbol = "";
		$(".testinggrounds").attr("type", "button");
	}else if(thetype == 'checkbox'){
		inputsymbol = "";
		// alert("this is checkbox");
	}else{
		textsymbol = "<svg class='bi bi-type input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2.244 13.081l.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081h1.244zm2.7-7.923L6.34 9.314H3.51l1.4-4.156h.034zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525z'/></svg>";

		inputsymbol = timesymbol;
		$(".testinggrounds").attr("type", "text");
	}

	// this is the third cols 
	$(".thirdpseudopage").hide();
	
	// get the class or id of the input
	theclass = $(this).parent().parent().parent().parent();
	actionowner = $(theclass).attr("theid");
	

	inputid = $(this).attr("inputid");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate2' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%' style='margin-bottom:10px;'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='color:black;padding:5px 0px 5px 10px;'>Input Options - "+thetype+"</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere2").html(templates);
    $(".pasteall-templates2").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

	$(".secondpseudopage").show();


	if(thetype == 'textarea'){
		$("#mockbutton_wrapper").hide();
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").hide();
		$("#mock_textareawrapper").show();
	}else if(thetype == 'number'){
		$("#mockbutton_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mock_textareawrapper").hide();
		$("#mockdate_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mocknumber_wrapper").show();
	}else if(thetype == 'text'){
		$("#mockbutton_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mock_textareawrapper").hide();
		$("#mockdate_wrapper").hide();
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").show();
	}else if(thetype == 'button'){
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").hide();
		$("#mockbutton_wrapper").show();
	}else if(thetype == 'checkbox'){
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mockbutton_wrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").hide();
		$("#mock_checkboxwrapper").show();
	}else if(thetype == 'email'){
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mockbutton_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").hide();
		$("#mockemail_wrapper").show();
	}else if(thetype == 'select'){
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mockbutton_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockdate_wrapper").hide();
		$("#mockselect_wrapper").show();
		$(".removeWhenOtherIDclicked").show();
	}else if(thetype == 'date'){
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mockbutton_wrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").show();
	}else{
		$("#mocknumber_wrapper").hide();
		$("#mocktext_wrapper").hide();
		$("#mock_textareawrapper").hide();
		$("#mock_checkboxwrapper").hide();
		$("#mockbutton_wrapper").hide();
		$("#mockemail_wrapper").hide();
		$("#mockselect_wrapper").hide();
		$(".removeWhenOtherIDclicked").hide();
		$("#mockdate_wrapper").hide();
	}
// $("#mockdate_wrapper").hide();


    if(thetype == 'checkbox'){
    	count = $("#mock_checkboxwrapper").attr("count");
    	valstring = $("#mock_checkboxwrapper").attr("valstring");
    	randstring = $("#mock_checkboxwrapper").attr("randstring");

	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadinputoptions";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{actionowner:actionowner, thetype:thetype, inputid:inputid, count:count, valstring:valstring, randstring:randstring},
	        success:function(data){
	        var data = data.trim();
	        
	        // $(".pasteall-templates").html(data);
	        $(".pasteall-templates2").html(data);
	        $(".inputsymbol_wrapper").html(inputsymbol);
	      }
	    });
    }else{
	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadinputoptions";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{actionowner:actionowner, thetype:thetype, inputid:inputid},
	        success:function(data){
	        var data = data.trim();
	        
	        // $(".pasteall-templates").html(data);
	        $(".pasteall-templates2").html(data);
	        $(".inputsymbol_wrapper").html(inputsymbol);
	      }
	    });
    }
});

// editnumboptions
$(document).on("click", '.edittextoptions', function(event) {
	theclass = $(this).parent().parent().parent().parent();
	actionowner = $(theclass).attr("theid");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%'>";
    temp2 = "<tr width='100%' style='background:rgba(128,0,128,0.6);'><td width='90%' style='color:white;padding:5px 0px 5px 5px;'>Input Options - Text</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere2").html(templates);
    $(".pasteall-templates2").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

	$(".secondpseudopage").show();

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadinputoptions";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{actionowner:actionowner},
        success:function(data){
        var data = data.trim();
        
        // $(".pasteall-templates").html(data);
        $(".pasteall-templates2").html(data);
      }
    });
});

// to do nothing when typing in form input tags of form creating console typing-donothing
$(document).ready(function(){
  $("input").keydown(function(){
    vall = $(this).val();
    // console.log(vall);
  });
  $("input").keyup(function(){
    $(this).css("background-color", "pink");
  });
});


// to insert and edit current options popselectoptions
$(document).on("click", '.popselectoptions', function(event) {

	valstring = $("#mockselect_wrapper").attr("valstring");
	randstring = $("#mockselect_wrapper").attr("randstring");
	
	$(".thirdpseudopage").show();
	$(".pasteall-templates3").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate3' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%' style='margin-bottom:10px;'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='color:;padding:5px 0px 5px 5px;'>Select Options</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere3").html(templates);

    something = "something";

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadselectoptions";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{something:something, valstring:valstring, randstring:randstring},
        success:function(data){
        var data = data.trim();
        
        holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:10px;'>"+data+"</td></tr></table>";
        $(".pasteall-templates3").html(holder);
      }
    });
});



// this is to pop date options popdateoptions
$(document).on("click", '.popdateoptions', function(event) {
	$(".thirdpseudopage").show();
	$(".pasteall-templates3").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

	datetheme = $(this).attr("datetheme");
    month = $(this).attr("month");
    year = $(this).attr("year");
    // return;
	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate3' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%' style=''>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='color:black;padding:5px 0px 5px 5px;'>Date Options</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere3").html(templates);

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loaddatestyles";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{month:month, year:year, datetheme:datetheme},
        success:function(data){
        var data = data.trim();
        
        holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:5px 0px 5px 10px;'>"+data+"</td></tr></table>";
        $(".pasteall-templates3").html(holder);
      }
    });
});

// changedatetheme
$(document).on("click", '.changedatetheme', function(event) {
	// obtain attributes from the changing theme link
	datetheme = $(this).attr("datetheme");
	direction = $(this).attr("direction");

	// the array of all the themes
	var themearray = ["greentheme", "orangetheme", "bluetheme", "graytheme", "browntheme", "blacktheme"];

	// the length of the theme array
	themearray_length = themearray.length;

	// the position of the current theme in the array
	theposition = themearray.indexOf(datetheme);

	// manipulations of the new postion of theme in the array
	if(direction == 'next'){
		if(theposition == themearray_length-1){
			theposition = 0;
		}else{
			theposition = theposition + 1;
		}
	}else if(direction == 'prev'){
		if(theposition == 0){
			theposition = themearray_length - 1;
		}else{
			theposition = theposition - 1;
		}
	}

	// the new theme
	datetheme = themearray[theposition];

    month = $(this).attr("month");
    year = $(this).attr("year");
    // return;
	closeplate = "<svg class='bi bi-arrow-bar-left linkeffect removetemplates-plate' width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.854 4.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L3.207 8l2.647-2.646a.5.5 0 000-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10 8a.5.5 0 00-.5-.5H3a.5.5 0 000 1h6.5A.5.5 0 0010 8zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>";

    temp1 = "<table width='100%'>";
    temp2 = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='90%' style='color:black;padding:5px 0px 5px 5px;'>Date Options</td><td width='10%' style='text-align:right;padding-right:5px;'>"+closeplate+"</td></tr>";
    tempz = "</table>";

    templates = temp1 + temp2 + tempz;
    $(".loadheadinghere3").html(templates);

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loaddatestyles";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{month:month, year:year, datetheme:datetheme},
        success:function(data){
        var data = data.trim();
        
        holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:5px 0px 5px 10px;'>"+data+"</td></tr></table>";
        $(".pasteall-templates3").html(holder);
      }
    });
});

// this is to implement the border color style of the input tag or the textarea tag
$(document).on("click", '.select_input_option', function(event) {
	theid = $(this).attr("id");
	theinputid = $(this).attr("inputid");
	newclasses = theinputid.replace("inputstyle", "");
	$(".testinggrounds").attr("class", theid + " testinggrounds "+newclasses);
});

// select_button_option
$(document).on("click", '.select_button_option', function(event) {
	theid = $(this).attr("theid");
	// checktype = $(".testinggrounds").attr("type");alert(checktype);
	// if(checktype == 'button'){
		$(".testbutton").attr("id", theid);
	// }
});

$(document).on("click", '.remove_input_option', function(event) {
	theinputid = $(this).attr("inputid");
	$(".testinggrounds").attr("class", "testinggrounds "+theinputid);
});

$( document ).ready(function() {
	// setInterval(function(){
	// 	$(".universalerror_tray").hide();
	// 	$(".universal_error_text").html(""); 
	// }, 7000);
});

// all input tags: number, text, date and time 
// updatenumberinput
$(document).on("click", '.updatenumberinput, .updatetextarea', function(event) {
	// this is from the update button clicked 
	updatetype = $(this).attr("thetype");
	$(".testinggrounds").each(function(){
		checkvisible = $(this).is(":visible");
		if(checkvisible == true){
			// to determine if they are the same types
			// this type is form the sample/mock input tag
			mocktype = $(this).attr("thetype");
			
			alert(mocktype+" sss");
			alert(updatetype);
		}
	});

	// return;
	if(mocktype != updatetype){
		$(".universal_error_text").html("Error: You're updating the wrong input build");
		$(".universalerror_tray").show();
		return;
	}else{
		// alert("since here and then");
	}

// return;
	if(thetype == 'number' || mocktype == 'number'){
		numbersymbol = "<svg class='bi bi-type-h3 input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.625-4.272h1.018c1.142 0 1.935.67 1.949 1.674.013 1.005-.78 1.737-2.01 1.73-1.08-.007-1.853-.588-1.935-1.32H9.108c.069 1.327 1.224 2.386 3.083 2.386 1.935 0 3.343-1.155 3.309-2.789-.027-1.51-1.251-2.16-2.037-2.249v-.068c.704-.123 1.764-.91 1.723-2.229-.035-1.353-1.176-2.4-2.954-2.385-1.873.006-2.857 1.162-2.898 2.358h1.196c.062-.69.711-1.299 1.696-1.299.998 0 1.695.622 1.695 1.525.007.922-.718 1.592-1.695 1.592h-.964v1.074z'/></svg>";

		inputsymbol = numbersymbol;
		formtype = "type='number'";
	}else if(thetype == 'text' || mocktype == 'text'){
		textsymbol = "<svg class='bi bi-type input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2.244 13.081l.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081h1.244zm2.7-7.923L6.34 9.314H3.51l1.4-4.156h.034zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525z'/></svg>";

		inputsymbol = textsymbol;
		formtype = "type='text'";
	}else if(thetype == 'select' || mocktype == 'select'){
		selectsymbol = "<svg class='bi bi-arrow-up-down' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L11 3.707 8.354 6.354a.5.5 0 11-.708-.708l3-3zm-9 7a.5.5 0 01.708 0L5 12.293l2.646-2.647a.5.5 0 11.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M5 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z' clip-rule='evenodd'/></svg>";

		inputsymbol = selectsymbol;
		formtype = "type='select'";
	}else if(thetype == 'date' || mocktype == 'date'){
		datesymbol = "<svg class='bi bi-calendar input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/></svg>";

		inputsymbol = datesymbol;
		formtype = "type='text'";
	}else if(thetype == 'time' || mocktype == 'time'){
		timesymbol = "<svg class='bi bi-alarm input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A6 6 0 108 3a6 6 0 000 12zm0 1A7 7 0 108 2a7 7 0 000 14z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M8 4.5a.5.5 0 01.5.5v4a.5.5 0 01-.053.224l-1.5 3a.5.5 0 11-.894-.448L7.5 8.882V5a.5.5 0 01.5-.5z' clip-rule='evenodd'/><path d='M.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z'/><path fill-rule='evenodd' d='M11.646 14.146a.5.5 0 01.708 0l1 1a.5.5 0 01-.708.708l-1-1a.5.5 0 010-.708zm-7.292 0a.5.5 0 00-.708 0l-1 1a.5.5 0 00.708.708l1-1a.5.5 0 000-.708zM5.5.5A.5.5 0 016 0h4a.5.5 0 010 1H6a.5.5 0 01-.5-.5z' clip-rule='evenodd'/><path d='M7 1h2v2H7V1z'/></svg>";

		inputsymbol = timesymbol;
		formtype = "type='text'";
	}else if(thetype == 'email' || mocktype == 'email'){
		emailsymbol = "<svg class='bi bi-at input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z' clip-rule='evenodd'/></svg>";

		inputsymbol = emailsymbol;
		formtype = "type='email'";
	}else if(thetype == 'textarea' || mocktype == 'textarea'){
		textareasymbol = "<svg class='bi bi-textarea-t input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14 9a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 9a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M1.5 2.5A1.5 1.5 0 013 1h10a1.5 1.5 0 011.5 1.5v4h-1v-4A.5.5 0 0013 2H3a.5.5 0 00-.5.5v4h-1v-4zm1 7v4a.5.5 0 00.5.5h10a.5.5 0 00.5-.5v-4h1v4A1.5 1.5 0 0113 15H3a1.5 1.5 0 01-1.5-1.5v-4h1z' clip-rule='evenodd'/><path d='M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z'/></svg>";

		inputsymbol = textareasymbol;
		formtype = "type='textarea'";
	}else if(thetype == 'button' || mocktype == 'button'){
		inputsymbol = "<svg class='bi bi-gear' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path id='updatenumberinput' fill-rule='evenodd' d='M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 014.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 018.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M8 5.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM4.754 8a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z' clip-rule='evenodd'/></svg>";
		formtype = "type='button'";
	}else{
		textsymbol = "<svg class='bi bi-type input_svgicon input_svgicon2' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2.244 13.081l.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081h1.244zm2.7-7.923L6.34 9.314H3.51l1.4-4.156h.034zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525z'/></svg>";

		inputsymbol = textsymbol;
		formtype = "type='text'";
	}
	
	// to check if this is date or not
	checkk = $(".testinggrounds").attr("datetheme");
	if(checkk == null){
		// console.log("it is null oooo");	
		extra_attri = "";
	}else{
		// console.log(checkk);
		extra_attri = "datetheme='"+checkk+"'";
	}
	// return;
	getclass = $(".testinggrounds").attr("class");alert(getclass+" <-getclass")
	getname = $(".testinggrounds").attr("name");alert(getname+" <-getname")
	// this is the name of the input tag at the top
	inputtopname = $(".testinggrounds").attr("inputtopname");alert(inputtopname+" <-inputtopname")

	newclasses = getclass.replace("testinggrounds", "");
	ttt = getclass.trim().split(" ");

	var i;
	var text = "";
	for (i = 0; i < ttt.length; i++) {
		if(ttt[i] == 'testinggrounds' || ttt[i].length == 1){}else{text += ttt[i] + " ";}
	}
	// console.log(text);
	// alert(formtype+" ggg");

	if(thetype == 'textarea'){
		newupdate = "<input type='text' class='"+getname+" inputname-"+getname+"' id='styletop-for-inputname' value='"+inputtopname+"'><br><span class=''>"+inputsymbol+"</span><textarea "+formtype+" id='openformconsole' class='"+text+"' thetype='textarea' value='' name='"+getname+"' "+extra_attri+" style='padding-left:25px;width:100%;resize:none;'></textarea>";
	}else if(thetype == 'button'){
		theid = $(".testbutton").attr("id");alert("text- "+text);
		newupdate = "<input type='button' class='btn btn-sm' id='"+theid+"' value='Submit' name='"+getname+"'> <span class='linkeffect' id='toeditbutton' theid='"+theid+"' type='button' name='"+getname+"' theclass='"+text+"'> "+inputsymbol+"</span> ";
	}else if(thetype == 'select'){
		newupdate = "build select";
	}else{
		newupdate = "<input type='text' class='"+getname+" inputname-"+getname+"' id='styletop-for-inputname' value='"+inputtopname+"'><br><span class=''>"+inputsymbol+"</span><input "+formtype+" id='openformconsole' class='"+text+"' thetype='"+mocktype+"' value='' name='"+getname+"' "+extra_attri+" style='padding-left:25px;width:100%;'>";
	}

	$(".openformconsole").removeClass("testinggrounds");
	$(".td-"+getname).html(newupdate);
	$(".templates-plate").hide();
	$(".secondpseudopage").hide();
	$(".thirdpseudopage").hide();
	// console.log(newupdate);

	// show the symbol sof the input tag
	// $(".input_svgicon2").show();
});



// selectdatetheme
$(document).on("click", '.selectdatetheme', function(event) {
	$(this).after(" <span class='processingtext'>Processing</span>");
	theme = $(this).attr("themename");
	$(".testinggrounds").attr("datetheme", theme);
	$(".testinggrounds").addClass("datetag");
	setInterval(function(){ $(".processingtext").remove(); }, 7000);
	
});

// this is to load the items/checkboxes for editing loadcheckboxes
$(document).on("click", '.loadcheckboxes', function(event) {
	numb = $(".numbercheckbox").val();
	$(".pasteall-templates3").html("");
	$(".pasteall-templates2").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadcheckboxes";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{numb:numb},
        success:function(data){
        var data = data.trim();
        holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:10px;'>"+data+"</td></tr></table>";
        $(".pasteall-templates2").html(holder);
        // setInterval(function(){ $(".remove_error").remove(); }, 7000);
      }
    });
});

// to remove any rowid of the chekboxes row
$(document).on("click", '.removecheckbox_row', function(event) {
	rowid = $(this).attr("rowid");
	$(".tr-"+rowid).fadeOut(1000, function(){ $(".tr-"+rowid).remove();});
	totalnumb = $(".checkboxnumber_count").text();
	totalnumb = totalnumb - 1;
	
	$(".checkboxnumber_count").text(totalnumb);
});


// this is to add new set of checkboxes to the 
$(document).on("click", '.prependselect', function(event) {
	numb = $(".numbercheckbox").val();
	if(numb != ''){
		totalnumb = $(".checkboxnumber_count").text();
		totalnumb = parseInt(totalnumb, 10);
		numb = parseInt(numb, 10);
		totalnumb = totalnumb + numb;
	}

	$(".checkboxnumber_count").text(totalnumb);
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/prependselect";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{numb:numb},
        success:function(data){
        var data = data.trim();
        // holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:10px;'>"+data+"</td></tr></table>";
        $(".checkboxes_table").append(data);
        // setInterval(function(){ $(".remove_error").remove(); }, 7000);
      }
    });
});

// updateoptions
$(document).on("click", '.updateoptions', function(event) {
	checkboxes_string = "";
	// get the name of the input tag
	inputvalue = $(".inputvalue").html();alert(inputvalue);
	// the unique id of the td as obtained from the input tag under the compontent and template navigation
	tdid = $(".testinggrounds").attr("name");
	theclass = $(".testinggrounds").attr("class");
	// alert(theclass);
	newclasses = theclass.replace("testinggrounds", "");
	ttt = theclass.trim().split(" ");

	var i;
	var text = "";
	for (i = 0; i < ttt.length; i++) {
		if(ttt[i] == 'testinggrounds' || ttt[i].length == 1){}else{text += ttt[i] + " ";}
	}

	// 'text' is the new combination of classes
	// alert(text);
	// return;
    valstring = "";
    randstring = "";
  $(".checboxvalue").each(function(){
    // alert() rowid
    theval = $(this).val();
    therand = $(this).attr("rowid");
    if(theval == ''){}else{
    	// checkboxes_string += "<span class='rowswrap-"+tdid+"'><input type='checkbox' class='checkbox-"+therand+"' rowid='"+therand+"'> <span class='val-"+therand+"'>"+theval+"</span></span> ";

    	valstring +=theval+"-";
    	randstring +=therand+"-";
    }
  });

// <td width="50%" class="td-xFu5AL4wzF">
// <input type='text' class='xFu5AL4wzF inputname-xFu5AL4wzF' id='styletop-for-inputname' value='xFu5AL4wzF'>
// <br>
// <input type='text' id='openformconsole' class='xFu5AL4wzF' value='' name='xFu5AL4wzF'>
// </td>

	settings_svg = "<svg class='bi bi-arrow-up-down input_svgicon' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M10.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L11 3.707 8.354 6.354a.5.5 0 11-.708-.708l3-3zm-9 7a.5.5 0 01.708 0L5 12.293l2.646-2.647a.5.5 0 11.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M5 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z' clip-rule='evenodd'/></svg>";

	// if there is values available then we can carry out action
	if(valstring != ''){
		checkboxes_string += "<input type='text' class='"+tdid+" inputname-"+tdid+"' id='styletop-for-inputname' value='"+inputvalue+"'><br><span>"+settings_svg+"</span><input type='text' thetype='select' id='openformconsole' class='"+text+"' valstring='"+valstring+"' randstring='"+randstring+"' name='"+tdid+"' style='padding-left:25px;width:100%;'>";

		$(".openformconsole").removeClass("testinggrounds");
		$(".td-"+tdid).html(checkboxes_string);
		$(".templates-plate").hide();
		$(".secondpseudopage").hide();
		$(".thirdpseudopage").hide();
	}else{
		$(".universalerror_tray").show();
		$(".universal_error_text").html("Error: Action cannot be completed. Ensure atleast one select option has being created.");
	}
});
// this is to add new set of checkboxes to the 
$(document).on("click", '.prependcheckboxes', function(event) {
	numb = $(".numbercheckbox").val();

	totalnumb = $(".checkboxnumber_count").text();
	totalnumb = parseInt(totalnumb, 10);
	numb = parseInt(numb, 10);
	totalnumb = totalnumb + numb;

	$(".checkboxnumber_count").text(totalnumb);
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/prependcheckboxes";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{numb:numb},
        success:function(data){
        var data = data.trim();
        // holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:10px;'>"+data+"</td></tr></table>";
        $(".checkboxes_table").append(data);
        // setInterval(function(){ $(".remove_error").remove(); }, 7000);
      }
    });
});

// updat the checkboxes 
$(document).on("click", '.updatecheckboxes', function(event) {
	checkboxes_string = "";
	// the unique id of the td as obtained from the input tag under the compontent and template navigation
	tdid = $(".testinggrounds").attr("name");
    valstring = "";
    randstring = "";
  $(".checboxvalue").each(function(){
    // alert() rowid
    theval = $(this).val();
    therand = $(this).attr("rowid");
    if(theval == ''){}else{
    	checkboxes_string += "<span class='rowswrap-"+tdid+"'><input type='checkbox' class='checkbox-"+therand+"' rowid='"+therand+"'> <span class='val-"+therand+"'>"+theval+"</span></span> ";

    	valstring +=theval+"-";
    	randstring +=therand+"-";
    }
  });

	settings_svg = "<svg class='bi bi-gear' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 014.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 018.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M8 5.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM4.754 8a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z' clip-rule='evenodd'/></svg>";


  checkboxes_string += " <span class='linkeffect editcheckboxes' type='checkbox' name='"+tdid+"' theclass='"+tdid+"' valstring='"+valstring+"' randstring='"+randstring+"' >" + settings_svg+"</span>";

	$(".openformconsole").removeClass("testinggrounds");
	$(".td-"+tdid).html(checkboxes_string);
	$(".templates-plate").hide();
	$(".secondpseudopage").hide();
	$(".thirdpseudopage").hide();
	
});


// this is to load the select options of the select tag load_set_selectoptions
$(document).on("click", '.load_set_selectoptions', function(event) {
	numb = $(".numbercheckbox").val();
	$(".pasteall-templates3").html("<div class='loader' style='margin-left:120px;margin-top:180px;'></div>");

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/load_set_selectoptions";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{numb:numb},
        success:function(data){
        var data = data.trim();
        holder = "<table width='100%'><tr width='100%'><td width='100%' style='padding:10px;'>"+data+"</td></tr></table>";
        $(".pasteall-templates3").html(holder);
        // setInterval(function(){ $(".remove_error").remove(); }, 7000);
      }
    });
});


// this is to create dropdown for types of input tag
$(document).on("dblclick", '.expanded_dummy_tray_forpreview > div > table > tbody > tr > .theactivies > .pageform > table > tbody > tr > td > #openformconsole', function(event) {

	// remove typeof_table_options_tray
	$(".typeof_table_options_tray").remove();
	$(".deleteconfirmation_tray_string").remove();
	$(".deletetray_tablecomponents").remove();


	// remove the delete tray of the delete tag deletetag_row
	$(".deletetag_row").remove();

    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
	// if the dropdown of the button styling is available then remove
	$(".button_style_tray_dropdwn").remove();

	// get the name of the input tag
	var tagname = $(this).attr("name");

	// the type of the input tag
	var tagtype = $(this).attr("type");
    if($('.inputtype_dropdowns')[0]){
        // check if it is the current input tag that is the owner of the dropdown
        var theid = $(".inputtype_dropdowns").attr("tagid");
        $(".inputtype_dropdowns").remove();
        // if they are equal then stop the function from loading a new dropdown 
        if(theid == tagname){
        	return;
        }
    }

    // if select dropdown exist then remove it
    $(".selectdropdown").remove();
    // also remove the options dropdown trigger
    // $(".editdropdown").remove();

	var input_types = "<li class='linkeffect changeinput_type' inputtype='text'>Text</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='number'>Number</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='email'>Email</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='select'>Select</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='checkbox'>Checkbox</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='textarea'>Textarea</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='button'>Button</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='date'>Date</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='time'>Time</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='file'>File</li>";

		input_types += "<li class='linkeffect delete_current_tag'>Delete Tag</li>";
		input_types += "<li class='linkeffect delete_current_row'>Delete Row</li>";
		input_types += "<li class='linkeffect createformtag'>Create Tag</li>";
		input_types += "<li class='linkeffect createformrow'>Create Row</li>";
		input_types += "<li class='linkeffect reorderformtags'>Reorder Tags</li>";
		input_types += "<li class='linkeffect reorderformrows'>Reorder Rows</li>";

	$(this).after("<div class='inputtype_dropdowns' tagid='"+tagname+"' style='margin-top:5px;background:white;border-radius:5px;border:1px solid rgba(128,128,128,0.4);position:absolute;'><ul class='nostylelist'>"+input_types+"</ul></div>");

	// loop through to get what li is the same as the type fo the input tag
	$('.changeinput_type').each(function (index) {
		var inputtype = $(this).attr("inputtype");
		if(tagtype == inputtype){
			$(this).attr("style", "background:rgba(128,128,128,0.1);");
		}
	});

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
});

// this is to create drop down for types of input tag, link from SELECT
$(document).on("click", '.changetag_select', function(event) {

	// get the name of the input tag
	var tagname = $(this).parent().parent().parent().parent().parent().parent().prev().attr("name");

	var input_types = "<li class='linkeffect changeinput_type' inputtype='text'>Text</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='number'>Number</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='email'>Email</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='select' style='background:rgba(128,128,128,0.1);'> Select</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='checkbox'>Checkbox</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='textarea'>Textarea</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='button'>Button</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='date'>Date</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='time'>Time</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='file'>File</li>";

		input_types += "<li class='linkeffect delete_current_tag'>Delete Tag</li>";
		input_types += "<li class='linkeffect delete_current_row'>Delete Row</li>";
		input_types += "<li class='linkeffect createformtag'>Create Tag</li>";
		input_types += "<li class='linkeffect createformrow'>Create Row</li>";
		input_types += "<li class='linkeffect reorderformtags'>Reorder Tags</li>";
		input_types += "<li class='linkeffect reorderformrows'>Reorder Rows</li>";

	$(this).parent().parent().parent().parent().parent().parent().prev().after("<div class='inputtype_dropdowns' tagid='"+tagname+"' style='margin-top:5px;background:white;border-radius:5px;border:1px solid rgba(128,128,128,0.4);position:absolute;'><ul class='nostylelist'>"+input_types+"</ul></div>");

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
    $(".sortable_tray2").attr("ownerid","");
});



// change the type of the input tag
$(document).on("click", '.changeinput_type', function(event) {
	// delete handle of file dropdown
	$(".editfile_").remove();

	// check if the dropdown trigger for the select tag exist...that is, if the one thaat exists belong to the dropdown that is
	// about to be changed 
	var class_check_to_remove_select_trigger = $(this).parent().parent().prev().prev().attr("class");
	
	// this checks if it is undefined. if it is undefined then it does not exist, else it exists and we proceed
	if(class_check_to_remove_select_trigger != undefined){
		class_check_to_remove_select_trigger = class_check_to_remove_select_trigger.replace('linkeffect','');
		class_check_to_remove_select_trigger = class_check_to_remove_select_trigger.trim();
		if(class_check_to_remove_select_trigger == 'editdropdown'){
			// alert("it is equal, thus remove");
			$(this).parent().parent().prev().prev().remove();
		}
	}

	// $(".editdropdown").remove();
	var inputtype = $(this).attr("inputtype");
	var tagid = $(".inputtype_dropdowns").attr("tagid");

	// settings icon
	var settingsicon = "<svg class='bi bi-gear' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z'/><path fill-rule='evenodd' d='M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z'/></svg>";

	$(".expanded_dummy_tray_forpreview > div > table > tbody > tr > .theactivies > .pageform > table > tbody > tr > td > ."+tagid).each(function (index) {
		var thename = $(this).attr("name");
		var theclass= $(this).attr("class");

		if(thename == theclass){
			if(inputtype == 'select'){
				var rand = Math.random().toString(36).substring(7);
				// this is used to know which select dropdown is being dropped and wether to leave it or remove and stop action initiatorid
				var initiatorid = Math.random().toString(36).substring(7);

				var updateoptions_list = "<svg class='bi bi-bookmark-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.5 2a.5.5 0 0 0-.5.5v11.066l4-2.667 4 2.667V8.5a.5.5 0 0 1 1 0v6.934l-5-3.333-5 3.333V2.5A1.5 1.5 0 0 1 4.5 1h4a.5.5 0 0 1 0 1h-4zm9-1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V1.5a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M13 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0v-2z'/></svg>";

				var from = $(this).attr("from");

				if(from == 'button'){
					// if it is from button that we are trying to change the input tag
					parentwidth = $(this).parent().width();
					var margin_left_editicon = 90/100*parentwidth;
				}else{
					width_inputname_holder = $(this).prev().prev().width();
					var margin_left_editicon = 90/100*width_inputname_holder;
				}
				
				var edit_select = "<p class='linkeffect editdropdown' id='"+initiatorid+"' style='position:absolute;margin-left:"+margin_left_editicon+"px;margin-top:-25px;'>"+updateoptions_list+"</p>";
				var newtag = edit_select+"<select type='"+inputtype+"' id='openformconsole "+rand+"' class='"+thename+"' name='"+thename+"' style='width:100%;'><option>Sample 1</option> <option>Sample 2</option></select>";
			}else if(inputtype == 'file'){
				var rand = Math.random().toString(36).substring(7);
				// this is used to know which select dropdown is being dropped and wether to leave it or remove and stop action initiatorid
				var initiatorid = Math.random().toString(36).substring(7);

				var from = $(this).attr("from");

				if(from == 'button'){
					// if it is from button that we are trying to change the input tag
					parentwidth = $(this).parent().width();
					var margin_left_editicon = 90/100*parentwidth;
				}else{
					width_inputname_holder = $(this).prev().prev().width();
					var margin_left_editicon = 90/100*width_inputname_holder;
				}

				var updateoptions_list = "<svg class='bi bi-bookmark-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.5 2a.5.5 0 0 0-.5.5v11.066l4-2.667 4 2.667V8.5a.5.5 0 0 1 1 0v6.934l-5-3.333-5 3.333V2.5A1.5 1.5 0 0 1 4.5 1h4a.5.5 0 0 1 0 1h-4zm9-1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V1.5a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M13 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0v-2z'/></svg>";

				var edit_select = "<p class='linkeffect editfile_' id='"+initiatorid+"' class='"+thename+"' style='position:absolute;margin-left:"+margin_left_editicon+"px;margin-top:-25px;'>"+updateoptions_list+"</p>";
				var newtag = edit_select+"<input type='"+inputtype+"' id='openformconsole' class='"+thename+"' name='"+thename+"' style='width:100%;'>";
			}else if(inputtype == 'checkbox'){
				var rand = Math.random().toString(36).substring(7);
				var newtag = "<span id='checkboxwrapper' class='"+thename+"' name='"+thename+"' checkbox_wrapper_id='"+rand+"'><span class='chkbx'>First <input type='checkbox' id='vehicle1' name='vehicle1' value='Bike'></span> ";
					newtag += "<span class='chkbx'>Second <input type='checkbox' id='vehicle1' name='vehicle1' value='Bike'></span> ";
					newtag += "<span class='chkbx'>Third <input type='checkbox' id='vehicle1' name='vehicle1' value='Bike'></span> ";
					newtag += "<span class='chkbx'>Forth <input type='checkbox' id='vehicle1' name='vehicle1' value='Bike'></span> ";
					newtag += "<span class='dropdownediting_checkbox linkeffect' ownerid='"+thename+"'>"+settingsicon+"</span></span> ";
			}else if(inputtype == 'textarea'){
				var newtag = "<textarea type='"+inputtype+"' id='openformconsole' class='"+thename+"' name='"+thename+"' style='width:100%;'></textarea>";
			}else if(inputtype == 'button'){
				var newtag = "<input type='submit' id='sbmt1' class='"+thename+"' from='button' name='"+thename+"' value='Submit' onclick='return false;'>";
					newtag += " <span class='linkeffect editbuttonstuffs'>"+settingsicon+"</span>";
			}else{
				var newtag = "<input type='"+inputtype+"' id='openformconsole' class='"+thename+"' name='"+thename+"' style='width:100%;'>";
			}
			

			var from = $(this).attr("from");
			// alert(from+" from");

			if(from == 'button'){
				if(inputtype == 'button'){
					$(this).before(newtag);					
				}else{
					$(this).before("<input type='text' class='"+thename+" inputname-"+thename+"' id='styletop-for-inputname' value='"+thename+"'><br>"+newtag);
				}

				$(this).next().remove();
				$(this).remove();
			}else if(from == undefined){
				if(inputtype == 'button'){
					$(this).prev().prev().remove();
					$(this).prev().remove();
				}

				$(this).after(newtag);
				$(this).remove();
				console.log($(this));
			}


		}

	});

	$(".inputtype_dropdowns").remove();
});

// this is to trigger the drop down for options editfile_
$(document).on("click", '.editfile_', function(event) {
	// alert("soweto");
	// $(this).next().after("<div></div>");
	ownerid_ofsortable = $(this).next().attr("name");
	var input_types = "<li class='linkeffect changeinput_type' inputtype='text'>Text</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='number'>Number</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='email'>Email</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='select'> Select</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='checkbox' style='background:rgba(128,128,128,0.1);'>Checkbox</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='textarea'>Textarea</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='button'>Button</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='date'>Date</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='time'>Time</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='file'>File</li>";

		input_types += "<li class='linkeffect delete_current_tag'>Delete Tag</li>";
		input_types += "<li class='linkeffect delete_current_row'>Delete Row</li>";
		input_types += "<li class='linkeffect createformtag'>Create Tag</li>";
		input_types += "<li class='linkeffect createformrow'>Create Row</li>";
		input_types += "<li class='linkeffect reorderformtags'>Reorder Tags</li>";
		input_types += "<li class='linkeffect reorderformrows'>Reorder Rows</li>";

	$(this).next().after("<div class='inputtype_dropdowns' tagid='"+ownerid_ofsortable+"' style='margin-top:5px;background:white;border-radius:5px;border:1px solid rgba(128,128,128,0.4);position:absolute;'><ul class='nostylelist'>"+input_types+"</ul></div>");
});

// this is to edit the button stuffs editbuttonstuffs
$(document).on("click", '.editbuttonstuffs', function(event) {
	var theval = $(this).prev().val();
	var navtable = "<table width='100%'><tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding-left:5px;'><input type='text' id='styletop-for-inputname' value='"+theval+"'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_value'>Update</span></td> </tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt1' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style' bttype='sbmt1'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt2' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style' bttype='sbmt2'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt3' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt3'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt4' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt4'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt5' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt5'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt6' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt6'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt7' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt7'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt8' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt8'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt9' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style'bttype='sbmt9'>Update</span></td></tr>";

		navtable += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='70%' style='padding:5px;'><input type='submit' id='sbmt10' class='btn btn-sm'></td> <td width='30%' style='text-align:right;font-size:13px;'><span class='linkeffect change_button_style' bttype='sbmt10'>Update</span></td></tr>";

		navtable += "</table>";
	$(this).after("<div class='customscrollbar button_style_tray_dropdwn' style='position:absolute;border:1px solid rgba(128,128,128,0.4); border-radius:3px; width:200px;background:white;padding:1px;margin-top:5px;height:300px;overflow-y:scroll;'><div class='closebuttondrpdwn'><table width='100%'><tr width='100%'><td width='50%' style='text-align:left;'><span class='linkeffect remove_button_styletray'>x</span></td> <td width='50%' style='text-align:right;'><u class='linkeffect drpdwn_trayof_changetag_button' style='font-size:13px;'>Change Tag</u></td></tr></table></div>"+navtable+"</div>");

	// remove the normal dropdown of input tag options 
	$(".inputtype_dropdowns").remove();
});

// this is to change the button value in the form construct change_button_Value
$(document).on("click", '.change_button_value', function(event) {
	var theidtouse = $(this).parent().prev().find("input").val();
	var btnstyle = $(this).parent().parent().parent().parent().parent().prev().prev().val(theidtouse);
	// alert("here is this");
});


// this is to remove the button drop down tray remove_button_styletray
$(document).on("click", '.remove_button_styletray', function(event) {
	$(".button_style_tray_dropdwn").remove();
});

// this is to change the button style change_button_style
$(document).on("click", '.change_button_style', function(event) {
	var bttype = $(this).attr("bttype");
	$(this).parent().parent().parent().parent().parent().prev().prev().attr("id", bttype);
});

////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// this is start for editing and everything that has to do with the checkbox input tag

// this is to select to add more options in the select tag editdropdown
$(document).on("click", '.dropdownediting_checkbox', function(event) {
	var togetIDcheckbox = $(this).parent().attr("class");
	// remove the checkbox somthing 
	$(".inputtype_dropdowns").remove();
	// this is the id of the input tag that owns the checkbox
	var ownerid = $(this).attr("ownerid");

	// check if it already exists and know what to do about it checkboxwrapper
	var checker_string = "";
	$(".sortable_tray2 > ul > li > table > tbody > tr > td > input").each(function (index) {
		var check_li = $(this).val();
		checker_string += check_li;
	});
	
	// if there is content inside then its not undefined, else it is undefined 
	if(checker_string != ''){
		var ownerid_ofsortable = $(".sortable_tray2").attr("ownerid");
	    /////////////////////////////////////////////////////////////
	    /////////////////////////////////////////////////////////////
	    // if a page design already exists do nothing   
	    // remove the div that has the add new options addnew_option
	    $(".addnew_option").remove();
	    // remove the div that has the footer for the updating of all the options
	    $(".footer_updatetray").remove();
	    // remove all the li and html content in it
	    $(".sortable_tray2ul").html("");
	    $(".sortable_tray2ul").attr("style","");
	    $(".sortable_tray2").hide();

	    if(ownerid_ofsortable == ownerid){
	    	return;
	    }
	}

	$(this).parent().after($(".sortable_tray2"));
	$(".sortable_tray2").attr("style", "position:absolute; width:200px;background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px;");
	// to get all the checkboxes
	var allthecheckboxes = $(this).parent().html();
	
	// addition icon
	var addicon = "<svg class='bi bi-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z'/></svg>";

	// the string of options to put in the dropdown
	var addnew_option = "<div class='addnew_option' style='padding-left:13px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%'><input id='styletop-for-inputname' type='text' placeholder='Add new select option'></td> <td width='10%' style='text-align:right;'><span class='linkeffect addnew_select_options'>"+addicon+"</span></td></tr></table></div>";
	
	$(".sortable_tray2ul").before(addnew_option);

	var stringof_options = "";
	$("."+togetIDcheckbox+" > .chkbx").each(function (index) {
		// $(".chk-"+ownerid+" > .chkbx > input").remove();
		var thechck = $(this).text();
		thechck = thechck.trim();

		var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

		stringof_options += "<li style='padding-left:5px;'><table width='100%'><tr width='100%'><td width='90%'><input id='styletop-for-inputname' type='text' value='"+thechck+"'></td> <td width='10%' style='text-align:right;'><span class='linkeffect remove_select_options'>"+closeicon+"</span></td></tr></table></li>";
		// alert(thechck);
	});

	$(".sortable_tray2ul").html(stringof_options);

	var update_tray = "<div class='footer_updatetray' style='padding-left:13px;margin-top:-10px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%' style='font-size:13px;'><u class='linkeffect update_checkbox_options'>Update</u> <u class='linkeffect changetag_checkbox'>Change Tag</u></td> <td width='10%' style='text-align:right;'></td></tr></table></div>";
	$(".sortable_tray2ul").after(update_tray);

	$(".sortable_tray2").attr("ownerid", ownerid);
	// $(".sortable_tray2ul").html(allthecheckboxes);

});


// this is to update the checkbox options update_checkbox_options
$(document).on("click", '.update_checkbox_options', function(event) {
	var thechck = "";
	$(this).parent().parent().parent().parent().parent().prev().find('input').each(function (index) {
		var theval = $(this).val();
		thechck += "<span class='chkbx'>"+theval+" <input type='checkbox' name='"+theval+"'></span> ";
	});
	// get the destination 
	var rand = Math.random().toString(36).substring(7);
	var theclass = $(this).parent().parent().parent().parent().parent().parent().prev().attr("class");
	
	var thesettings = " <span class='dropdownediting_checkbox linkeffect' ownerid='rpe0PoA611'><svg class='bi bi-gear' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z'></path><path fill-rule='evenodd' d='M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z'></path></svg></span>";

	
	$(this).parent().parent().parent().parent().parent().parent().prev().before("<span id='checkboxwrapper' class='"+theclass+"' name='"+theclass+"' checkbox_wrapper_id='"+rand+"'>"+thechck+thesettings+"</span>");
	
	$(this).parent().parent().parent().parent().parent().parent().prev().remove();

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2").attr("style","");
    $(".sortable_tray2").attr("ownerid","");
    $(".sortable_tray2").attr("initiatorid","");
    $(".sortable_tray2").hide();
});


// this is to trigger the changing of the select tag
$(document).on("click", '.changetag_checkbox', function(event) {
	var ownerid_ofsortable = $(".sortable_tray2").attr("ownerid");
	// $(this).parent().parent().parent().parent().parent().parent().after("<div style='position:absolute;background:red;width:100px;padding:5px;'>and the lord said to me</div>");

	var input_types = "<li class='linkeffect changeinput_type' inputtype='text'>Text</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='number'>Number</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='email'>Email</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='select'> Select</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='checkbox' style='background:rgba(128,128,128,0.1);'>Checkbox</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='textarea'>Textarea</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='button'>Button</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='date'>Date</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='time'>Time</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='file'>File</li>";

		input_types += "<li class='linkeffect delete_current_tag'>Delete Tag</li>";
		input_types += "<li class='linkeffect delete_current_row'>Delete Row</li>";
		input_types += "<li class='linkeffect createformtag'>Create Tag</li>";
		input_types += "<li class='linkeffect createformrow'>Create Row</li>";
		input_types += "<li class='linkeffect reorderformtags'>Reorder Tags</li>";
		input_types += "<li class='linkeffect reorderformrows'>Reorder Rows</li>";

	$(this).parent().parent().parent().parent().parent().parent().after("<div class='inputtype_dropdowns' tagid='"+ownerid_ofsortable+"' style='margin-top:5px;background:white;border-radius:5px;border:1px solid rgba(128,128,128,0.4);position:absolute;'><ul class='nostylelist'>"+input_types+"</ul></div>");

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2").attr("style","");
    $(".sortable_tray2").attr("ownerid","");
    $(".sortable_tray2").hide();

});


// change_type button
// this is to trigger the changing of the select tag drpdwn_trayof_changetag_button
$(document).on("click", '.drpdwn_trayof_changetag_button', function(event) {

	var ownerid_ofsortable = $(this).parent().parent().parent().parent().parent().parent().prev().prev().attr("name");
	
	// $(this).parent().parent().parent().parent().parent().parent().after("<div style='position:absolute;background:red;width:100px;padding:5px;'>and the lord said to me</div>");

	var input_types = "<li class='linkeffect changeinput_type' inputtype='text' from='button'>Text</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='number' from='button'>Number</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='email' from='button'>Email</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='select' from='button'> Select</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='checkbox' from='button'>Checkbox</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='textarea' from='button'>Textarea</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='button' from='button' style='background:rgba(128,128,128,0.1);'> Button</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='date'>Date</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='time'>Time</li>";
		input_types += "<li class='linkeffect changeinput_type' inputtype='file'>File</li>";

		input_types += "<li class='linkeffect delete_current_tag'>Delete Tag</li>";
		input_types += "<li class='linkeffect delete_current_row'>Delete Row</li>";
		input_types += "<li class='linkeffect createformtag'>Create Tag</li>";
		input_types += "<li class='linkeffect createformrow'>Create Row</li>";
		input_types += "<li class='linkeffect reorderformtags'>Reorder Tags</li>";
		input_types += "<li class='linkeffect reorderformrows'>Reorder Rows</li>";

	$(this).parent().parent().parent().parent().parent().parent().after("<div class='inputtype_dropdowns' tagid='"+ownerid_ofsortable+"' style='margin-top:5px;background:white;border-radius:5px;border:1px solid rgba(128,128,128,0.4);position:absolute;'><ul class='nostylelist'>"+input_types+"</ul></div>");

	// remove the tray for styles
	$(".button_style_tray_dropdwn").remove();

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2").attr("style","");
    $(".sortable_tray2").attr("ownerid","");
    $(".sortable_tray2").hide();

});




// this is start for editing and everything that has to do with the checkbox input tag
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////

// this is to select to add more options in the select tag editdropdown
$(document).on("click", '.editdropdown', function(event) {
	// remove the drop down that has all the input type tags inputtype_dropdowns
	$(".inputtype_dropdowns").remove();

	var selectag = $(this).next();

	$(selectag).after($(".sortable_tray2"));
	$(".sortable_tray2").attr("style", "position:absolute; width:200px;background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px;");

	// return;

    // get the initiator id
    var insideintitiator_id = $(this).attr("id");

	// if it is already dropped down then we remove it selectdropdown

    var alreadyexistingid = $(".sortable_tray2").attr("initiatorid");

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();

    // if alreadyexistingid is undefined then it does not exist 
    if(alreadyexistingid == undefined){}else{
    	// if alreadyexistingid is equal to insideintitiator_id remove and do nothing
		if(insideintitiator_id == alreadyexistingid){
			$(".sortable_tray2").attr("initiatorid", "");
			return;
		}
    }
	//////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////

	$(".sortable_tray2").show();
	var theoptionslist = $(this).next().html();
	
	// past new editing dropdown after the select
	var pasteafterselect = $(this).next();

	var select_id = $(this).next().attr("id");
	select_id = select_id.replace('openformconsole','');
	select_id = select_id.trim();

	// convert the select options to an array so we can list in dropdown for editing and deleting
	theoptionslist = theoptionslist.split("</option>");

	// addition icon
	var addicon = "<svg class='bi bi-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z'/></svg>";

	// the string of options to put in the dropdown
	var addnew_option = "<div class='addnew_option' style='padding-left:13px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%'><input id='styletop-for-inputname' type='text' placeholder='Add new select option'></td> <td width='10%' style='text-align:right;'><span class='linkeffect addnew_select_options'>"+addicon+"</span></td></tr></table></div>";
	
	$(".sortable_tray2ul").before(addnew_option);

	stringof_options = "";

	for (i = 0; i < theoptionslist.length - 1; i++) {
		var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";
		option = theoptionslist[i].replace('<option>','');
		option = option.trim();
		stringof_options += "<li style='padding-left:5px;'><table width='100%'><tr width='100%'><td width='90%'><input id='styletop-for-inputname' type='text' value='"+option+"'></td> <td width='10%' style='text-align:right;'><span class='linkeffect remove_select_options'>"+closeicon+"</span></td></tr></table></li>";
	}
	
	var update_tray = "<div class='footer_updatetray' style='padding-left:13px;margin-top:-10px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%' style='font-size:13px;'><u class='linkeffect update_select_options'>Update</u> <u class='linkeffect changetag_select'>Change Tag</u></td> <td width='10%' style='text-align:right;'></td></tr></table></div>";
	$(".sortable_tray2ul").after(update_tray);

	$(".sortable_tray2ul").append(stringof_options);
	// change the initiator id
	$(".sortable_tray2").attr("initiatorid", insideintitiator_id)
	// return;
	// $(pasteafterselect).after("<div class='selectdropdown' initiatorid='"+insideintitiator_id+"' style='position:absolute; background:white; border:1px solid rgba(128,128,128,0.3); border-radius:3px; padding:5px; width:200px;'>"+stringof_options+"</div>");
});

// this is to add a new select option addnew_select_options
$(document).on("click", '.addnew_select_options', function(event) {
	var closeicon = "<svg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg>";

	var valuetobe_created = $(this).parent().prev().find("input").val();
	$(this).parent().parent().parent().parent().parent().next().prepend("<li style='padding-left:5px;'><table width='100%'><tr width='100%'><td width='90%'><input id='styletop-for-inputname' type='text' value='"+valuetobe_created+"'></td> <td width='10%' style='text-align:right;'><span class='linkeffect remove_select_options'>"+closeicon+"</span></td></tr></table></li>");

	// delete the content of the input tag
	$(this).parent().prev().find("input").val("");
});

// save all the update_select_options
$(document).on("click", '.update_select_options', function(event) {

	// this is the string of the options to be in the select tag
	var stringof_options = "";
	$('.sortable_tray2 > ul > li > table > tbody > tr > td #styletop-for-inputname').each(function (index) {
		theli_al = $(this).val();
		// alert(theli_al);
		stringof_options += "<option>"+theli_al+"</option>";
	});
	// alert(stringof_options);
	$(this).parent().parent().parent().parent().parent().parent().prev().html(stringof_options);
	// $(".selectdropdown").remove();

    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
});

// what happens to the editing select dropdown whenever i once-click the select
$(document).on("click", 'select', function(event) {
    /////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////
    // if a page design already exists do nothing   
    // remove the div that has the add new options addnew_option
    $(".sortable_tray2").hide();

    $(".addnew_option").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_updatetray").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").attr("initiatorid", "");
});

// this is to remove the select options remove_select_options
$(document).on("click", '.remove_select_options', function(event) {
	$(this).parent().parent().parent().parent().parent().remove();
});

// this is to drop the sample dropdown sampledropdown
$(document).on("dblclick", '.sampledropdown', function(event) {
	$(this).remove();
});


// remove errors by clicking them remove_error
$(document).on("click", '.remove_error', function(event) {
	// $(this).remove();
	$(this).fadeOut(1000, function(){ $(this).remove();});
});

////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// start of reordering of tags reorderformtags
$(document).on("click", '.reorderformtags', function(event) {
	// to get the tr class
	var trclass = $(this).parent().parent().parent().parent().attr("class");
	var alltags = "";
	$(this).parent().parent().parent().parent().find("td").each(function (index) {
		var thuniqueclass = $(this).attr("class");
		var theinputval = $(this).find("input").val();
		alltags += "<li theuniqueid='"+thuniqueclass+"'>"+theinputval+"</li>";
	});
	// $(this).parent().parent().parent().parent().after("<div style='background:red;padding:10px;position:absolute;'>rrrrr</div>");

	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 100;

	$(".sortable_tray2").show();
	$(".place_actual_dummypage").after($(".sortable_tray2"));
	$(".sortable_tray2").attr("style", "position:absolute; width:200px;margin-left:"+halfwidth+"px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1);");
	$(".sortable_tray2ul").html(alltags);
	$(".sortable_tray2ul").before("<div class='header_reordertags' style='width:100%;padding:5px;'>Reorder Input Tag</div>");
	$(".sortable_tray2ul").after("<div class='footer_reordertags' style='width:100%;padding:5px;'><u class='linkeffect update_tagreorder' thetrclass='"+trclass+"' style='font-size:13px;'>Update</u> <u class='linkeffect closereorder_tags' style='font-size:13px;'>Close</u></div>");
});

// this is to close the reordering of tags closereorder_tags
// end of reordering of tags
$(document).on("click", '.closereorder_tags', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
});


// this is to update the tag reorder update_tagreorder
$(document).on("click", '.update_tagreorder', function(event) {
	// to get the class of the tr 
	var thetrclass = $(this).attr("thetrclass");
	
	// remove the drop downs inputtype_dropdowns
	$(".inputtype_dropdowns").remove();
	var stringof_li = "";
	$(this).parent().prev().find("li").each(function (index) {
		var theclass = $(this).attr("theuniqueid");
		// alert(thetrclass);
		// $("."+thetrclass).append($("."+theclass));
		// stringof_li += $(".theactivies .pageform table tbody ."+thetrclass+" ."+theclass);
		$(".theactivies .pageform table tbody ."+thetrclass).append($(".theactivies .pageform table tbody ."+thetrclass+" ."+theclass));
	});

	// alert(stringof_li);
	// $(".theactivies .pageform table tbody ."+thetrclass).html(stringof_li);

    $(".header_reordertags").remove();
    // remove the div that has the footer for the updating of all the options
    $(".footer_reordertags").remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
});

// end of tag reorder stuffs
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
// this is start of row reorder reorderformrows
$(document).on("click", '.reorderformrows', function(event) {

	var sortablestatus = $(".sortable_tray2").is(":visible");
	// if it is visible then hide and remove things 
	if(sortablestatus == true){
	    $(".sortable_tray2ul").prev().remove();
	    // remove the div that has the footer for the updating of all the options
	    $(".sortable_tray2ul").next().remove();
	    // remove all the li and html content in it
	    $(".sortable_tray2ul").html("");
	    $(".sortable_tray2").attr("style","");
	    $(".sortable_tray2").hide();
	    $(".sortable_tray2").attr("initiatorid", "");
		return;
	}

	var theform = $(this).parent().parent().parent().parent().parent().parent().parent().html();
	var theformid = $(this).parent().parent().parent().parent().parent().parent().parent().attr("id");
	var tableli = "";
	$(this).parent().parent().parent().parent().parent().parent().parent().find("table").each(function (index) {
		var tabid = $(this).attr("class");
		var entiretable = "";
		var tablewraptr = "";
		$(this).find("tr").each(function (index) {
			var insidetr = "";
			$(this).find("td").each(function (index) {
				tdwidth = $(this).attr("width");
				tdclass = $(this).attr("class");
				tdclass = tdclass.replace('td-', '');
				
				var pasteval = $(".theactivies .pageform table tbody tr td .inputname-"+tdclass).attr("value");
				// alert(pasteval);
				insidetd = "<td width='"+tdwidth+"' style='background:;border-radius:5px;border:1px solid rgba(0,255,127,1);'>"+pasteval+"</td>";
				insidetr +=insidetd;
			});
			// alert(insidetr)
			tablewraptr +="<tr width='100%'>"+insidetr+"</tr>";
			entiretable += "<table width='100%'>"+tablewraptr+"</table>";
		});
		// insidetable2 += "<table width='100%'>"+insidetable+"</table>";
		tableli += "<li tabid='"+tabid+"' style='width:100%;margin-bottom:10px;background:rgba(0,255,127,0.4);padding:5px;'>"+entiretable+"</li>";
	});

	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 200;

	$(".sortable_tray2").show();
	$(".place_actual_dummypage").after($(".sortable_tray2"));
	$(".sortable_tray2").attr("style", "position:absolute; width:400px;margin-left:"+halfwidth+"px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1);");
	$(".sortable_tray2ul").html(tableli);
	$(".sortable_tray2ul").before("<div style='margin-left:5px;'>Reorder Form Rows</div>");
	$(".sortable_tray2ul").after("<div style='margin-left:5px;font-size:13px;'><u class='linkeffect update_rowreorder' theformid='"+theformid+"'>Update</u> <u class='linkeffect closereorder_rows'>Close</u></div>");

	$(".inputtype_dropdowns").remove();
});


// end of reordering of tags
$(document).on("click", '.closereorder_rows', function(event) {
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2").attr("style","");
    $(".sortable_tray2").hide();
    $(".sortable_tray2").attr("initiatorid", "");
});

// this is to reorder update_rowreorder
$(document).on("click", '.update_rowreorder', function(event) {
	var theformid = $(this).attr("theformid");
	$(this).parent().prev().find("li").each(function (index) {
		var thetable_id = $(this).attr("tabid");//alert(thetable_id);
		$(".theactivies #"+theformid).append($(".theactivies #"+theformid+" ."+thetable_id));
	});

});


// this is end of row reorder reorderformrows
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

// to create new form tag to the form createformtag
$(document).on("click", '.createformtag', function(event) {
	var rand1 = Math.random().toString(36).substring(7);
	var rand2 = Math.random().toString(36).substring(7);
	// we first get the width of the current td 
	width_current_td = $(this).parent().parent().parent().attr("width");
	width_current_td = parseFloat(width_current_td);

	// we divide that width into two and use the half for the new width 
	halfwidth = width_current_td/2;
	$(this).parent().parent().parent().attr("width", halfwidth+"%");
	// alert(width_current_td);

	var newtd = "<td width='"+halfwidth+"%' class='td-"+rand1+"' id='"+rand2+"-td'><input type='text' class='"+rand1+" inputname-"+rand1+"' id='styletop-for-inputname' value='"+rand1+"'><br>";
	newtd += "<input type='text' id='openformconsole' class='"+rand1+"' name='"+rand1+"' style='width:100%;'></td>";

	$(this).parent().parent().parent().after(newtd);
	$(".inputtype_dropdowns").remove();
});

// this is to create form row for the form createformrow
$(document).on("click", '.createformrow', function(event) {
	var rand1 = Math.random().toString(36).substring(7);
	var rand2 = Math.random().toString(36).substring(7);
	var rand3 = Math.random().toString(36).substring(7);
	var rand4 = Math.random().toString(36).substring(7);

	var newtable = "<table width='100%' class='"+rand1+"'><tr width='100%' class='"+rand2+"-tr' customtr='"+rand3+"'>";
		newtable += "<td width='100%' class='td-"+rand4+"' id='"+rand3+"-td'><input type='text' class='"+rand4+" inputname-"+rand4+"' id='styletop-for-inputname' inputname='inputname-"+rand4+"' value='"+rand4+"'><br><input type='text' id='openformconsole' class='"+rand4+"' name='"+rand4+"' style='width:100%;'></td></tr></table>";

	$(this).parent().parent().parent().parent().parent().parent().before(newtable);
	$(".inputtype_dropdowns").remove();
});


// this is to delete the current tag delete_current_tag
$(document).on("click", '.delete_current_tag', function(event) {
    if($('.deletetag_row')[0]){
        // if a page design already exists do nothing  \
        $(".deletetag_row") .remove();
        return;
    }
	var rand1 = Math.random().toString(36).substring(7);
	var rand2 = Math.random().toString(36).substring(7);
	var rand3 = Math.random().toString(36).substring(7);

	var trr =  "<tr><td colspan='2'>Type Security String to confirm delete action</td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques1'>"+rand1+"</td><td><input class='deltag_ans1' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques2'>"+rand2+"</td><td><input class='deltag_ans2' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques3'>"+rand3+"</td><td><input class='deltag_ans3' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td colspan='2'><u class='linkeffect confirm_tagdelete_console' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect remove_tagdelete_console' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr>";

	var tablewrap = "<div class='deletetag_row'><table width='100%'>"+trr+"</table></div>";
	$(".inputtype_dropdowns").after(tablewrap);
});

// the actual remove/delete action confirm_tagdelete_console
$(document).on("click", '.confirm_tagdelete_console', function(event) {
	var checkerror = "";
	for (i = 1; i < 4; i++) {
		var ans = $(".deltag_ans"+i).val();
		var ques = $(".deltag_ques"+i).text();

		if(ques != ans){
			$(".deltag_ques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			checkerror += "dsgyh";
		}else{
			$(".deltag_ques"+i).parent().attr("style", "");
		}
	}

	if(checkerror == ''){
		alert("proceed to delete");
		// check the total number of input tag(td)
		var childrennumb = $(this).parent().parent().parent().parent().parent().parent().parent().children().length;

		if(childrennumb > 1){
			// if it is greater than 1 td then we remove this td and add the width to the next td
			var widthoftd = $(this).parent().parent().parent().parent().parent().parent().attr("width");

			// in looking for where to add the excess width we check the next td; if it exist then we add to it
			// if it diest not exist we check the previous td and add to it 
			var wheretoaddto = $(this).parent().parent().parent().parent().parent().parent().next().attr("width");
			if(wheretoaddto == undefined){
				wheretoaddto = $(this).parent().parent().parent().parent().parent().parent().prev().attr("width");
				widthoftd = parseFloat(widthoftd);//alert(widthoftd);
				wheretoaddto = parseFloat(wheretoaddto);
				fynalwidth = widthoftd + wheretoaddto;alert(fynalwidth+" -final width");
				$(this).parent().parent().parent().parent().parent().parent().prev().attr("width", fynalwidth+"%");
			}else{
				widthoftd = parseFloat(widthoftd);//alert(widthoftd);
				wheretoaddto = parseFloat(wheretoaddto);
				fynalwidth = widthoftd + wheretoaddto;alert(fynalwidth+" -final width");
				$(this).parent().parent().parent().parent().parent().parent().next().attr("width", fynalwidth+"%");
			}

			// alert(wheretoaddto);
			$(this).parent().parent().parent().parent().parent().parent().remove();

			// we get the first element and try to add excess width to it

			// alert(widthoftd);
		}else if(childrennumb == 1){
			// if there's only one td then we move straight to remove the entire row 
			$(this).parent().parent().parent().parent().parent().parent().parent().parent().parent().remove();
		}
		
		// alert(numberof_tags.length);
		// if number of input tag is greater than 1 then remove the present input tag

		// if number of input tag is equal to 1 then remove whole row 
	}
});


// this is to delete the entire row delete_current_row
$(document).on("click", '.delete_current_row', function(event) {
    if($('.delete_row_row')[0]){
        // if a page design already exists do nothing  \
        $(".delete_row_row") .remove();
        return;
    }
	var rand1 = Math.random().toString(36).substring(7);
	var rand2 = Math.random().toString(36).substring(7);
	var rand3 = Math.random().toString(36).substring(7);

	var trr =  "<tr><td colspan='2'>Type Security String to confirm delete action</td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques1'>"+rand1+"</td><td><input class='deltag_ans1' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques2'>"+rand2+"</td><td><input class='deltag_ans2' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td class='deltag_ques3'>"+rand3+"</td><td><input class='deltag_ans3' id='styletop-for-inputname' style='border-bottom:1px solid rgba(128,128,128,0.4);border-radius:0px;' type='text'></td></tr>";
		trr += "<tr width='100%'><td colspan='2'><u class='linkeffect confirm_rowdelete_console' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect remove_tagdelete_console' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr>";

	var tablewrap = "<div class='deletetag_row'><table width='100%'>"+trr+"</table></div>";
	$(".inputtype_dropdowns").after(tablewrap);
});

// this is to confirm the delete of the form row confirm_rowdelete_console
$(document).on("click", '.confirm_rowdelete_console', function(event) {
	var checkerror = "";
	for (i = 1; i < 4; i++) {
		var ans = $(".deltag_ans"+i).val();
		var ques = $(".deltag_ques"+i).text();

		if(ques != ans){
			$(".deltag_ques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			checkerror += "dsgyh";
		}else{
			$(".deltag_ques"+i).parent().attr("style", "");
		}
	}

	if(checkerror == ''){
		$(this).parent().parent().parent().parent().parent().parent().parent().parent().parent().remove();
	}
});


// this is to remove the tag remove_tagdelete_console
$(document).on("click", '.remove_tagdelete_console', function(event) {
	$(".deletetag_row").remove();
});


///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
// updating the form owner value styletop-for-inputname
$(document).on("change", '#styletop-for-inputname', function(event) {
	var thisval = $(this).val();
	$(this).attr("value", thisval);

	// get form id
	var formid = $(this).next().next().attr("id");
	// check if the tablename is already existing
    if($(".tableowners_name-"+formid)[0]){
    	$(".tableowners_name-"+formid).html(thisval+"'s Table");
    }else{
		$("[theformid="+formid+"]").prepend("<p class='tableowners_name-"+formid+"' style='margin-bottom:-2px;font-size:13px;'>"+thisval+"'s Table</p>");
    }

    // get the class of the something about to be changed
    var fortable = $(this).next().next().attr("class");
    $("[input_unique_name="+fortable+"]").val(thisval);
});
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// this is for adding new table to the dom 

// add new table to dom addnewtable_pre
$(document).on("click", '.addnewtable_pre', function(event) {
	// remove the tray of delete entire stuff
	$(".deletetray_tablecomponents").remove();
	$(".deleteconfirmation_tray_string").remove();

	// use the formid on the icon as the id of the div
	var divid = $(this).attr("formid");
	var divid_forcheck = "tray--"+divid;
	// if it exist already remove
    if($('.typeof_table_options_tray')[0]){
    	// this is the existing id of the display tray
    	var existingid = $(".typeof_table_options_tray").attr("id");
        $(".typeof_table_options_tray").remove();

        // if it is the same table create that is clicked then we remove and don't proceed
        if(divid_forcheck == existingid){
			return;
        }
    }

    // check how many forms exit in the column in question
    var forms_ownerof_table = "";
    $(this).parent().next().find("form").each(function (index) {
    	// alert($(this).attr("id"));
    	var formidd = $(this).attr("id");
    	var formname = $(this).prev().prev().val();
    	forms_ownerof_table += "<tr width='100%'><td class='linkeffect create_table_ofexisting_form' formid='"+formidd+"' width='100%'>"+formname+" Table</td></tr>";
	});

    // if there is no form in the page then we insert option to create new form and attach a table to the form
    if(forms_ownerof_table == ''){
    	forms_ownerof_table += "<tr width='100%'><td class='linkeffect create_form_table' width='100%'>Create New Form/Table</td></tr>";
    }


	// we first paste options for 
	var row_list = "<table width='100%'><tr width='100%'><td width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'>Create Page Components</td></tr><tr width='100%'><td class='linkeffect create_onlyform_new'>New Form</td></tr><tr width='100%'><td class='linkeffect createonlytable'>Create Table</td></tr>"+forms_ownerof_table+"</table>";
	$(this).parent().after("<div id='tray--"+divid+"' class='typeof_table_options_tray' style='position:absolute;background:white;padding:3px;border:radius;margin-left:30px;margin-top:-65px;width:200px;border-radius:5px;border:1px solid rgba(128,128,128,0.4);font-size:13px;'>"+row_list+"</div>");
});


// this is to create a new form create_onlyform_new
$(document).on("click", '.create_onlyform_new', function(event) {
	var tab1 = Math.random().toString(36).substring(7);
		tab1 += Math.random().toString(36).substring(7);

	var tab2 = Math.random().toString(36).substring(7);
		tab2 += Math.random().toString(36).substring(7);

	var tab3 = Math.random().toString(36).substring(7);
		tab3 += Math.random().toString(36).substring(7);

	var tab4 = Math.random().toString(36).substring(7);
		tab4 += Math.random().toString(36).substring(7);

	var tab5 = Math.random().toString(36).substring(7);
		tab5 += Math.random().toString(36).substring(7);

	var tab6 = Math.random().toString(36).substring(7);
		tab6 += Math.random().toString(36).substring(7);

	var form_arrange = "<input type='text' class='formname' id='styletop-for-inputname' value='FORM NAME'>";
		form_arrange+= "<br>";
		form_arrange+= "<form class='pageform formplainstyle' id='"+tab1+"' style='margin-bottom: 50px;'><style>.openformconsole{width:100%;height:;}</style>";
		form_arrange+= "<table width='100%' class='"+tab2+"'><tbody><tr width='100%' class='"+tab3+"-tr' customtr='"+tab4+"'>";
		form_arrange+= "<td width='50%' class='td-"+tab5+"' id='"+tab4+"-td'><input type='text' class='"+tab5+" inputname-"+tab5+"' id='styletop-for-inputname' value='"+tab5+"'><br><input type='text' id='openformconsole' class='"+tab5+"' name='"+tab5+"' style='width:100%;'></td>";
		form_arrange+= "<td width='50%' class='td-"+tab6+"' id='"+tab4+"-td'><input type='text' class='"+tab6+" inputname-"+tab6+"' id='styletop-for-inputname' value='"+tab6+"'><br><input type='text' id='openformconsole' class='"+tab6+"' name='"+tab6+"' style='width:100%;'></td>";
		form_arrange+= "</tr></tbody></table></form>";

	$(this).parent().parent().parent().parent().next().prepend(form_arrange);
	$(".typeof_table_options_tray").remove();
});


$(document).on("click", '.createonlytable', function(event) {
	var tab1 = Math.random().toString(36).substring(7);
		tab1 += Math.random().toString(36).substring(7);

	var tab2 = Math.random().toString(36).substring(7);
		tab2 += Math.random().toString(36).substring(7);

	var tab3 = Math.random().toString(36).substring(7);
		tab3 += Math.random().toString(36).substring(7);

	var tab4 = Math.random().toString(36).substring(7);
		tab4 += Math.random().toString(36).substring(7);

	var tab5 = Math.random().toString(36).substring(7);
		tab5 += Math.random().toString(36).substring(7);

	var tab6 = Math.random().toString(36).substring(7);
		tab6 += Math.random().toString(36).substring(7);

	var samptd = Math.random().toString(36).substring(7);
		samptd += Math.random().toString(36).substring(7);

	var settings = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-tools' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'></path><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'></path></svg>";

	var edit_rowicon = "<svg class='bi bi-pen' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

	var delete_rowicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	var addnew_attribute = "<svg class='bi bi-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z'/></svg>";

	var table_tr_main = "<table width='100%'><tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='100%' class='tdtop_nav_table'><ul class='tableul'><li class='linkeffect addnew_table_attribute' formid='"+tab1+"'>"+addnew_attribute+" Add Attribute</li> <li class='linkeffect updatewidths_table_td'>Update Widths</li> <li class='linkeffect reorder_table_td'>Reorder Attributes</li></ul></td></tr></table>";

	var table_tr_ = "<tr width='100%' class='table_header_tr_numb' style='border-bottom:1px solid rgba(128,128,128,0.4);text-align:center;'><td class='tdwidthholder "+samptd+"' width='90%'><input type='number' class='table_width_number' id='styletop-for-inputname' value='90' style='text-align:center;font-size:13px;'></td><td class='tdwidthholder settings_table_td1' width='10%'><input type='number' id='styletop-for-inputname' value='10' style='text-align:right;font-size:13px;' disabled></span></td></tr>";

		table_tr_ += "<tr width='100%' class='table_header_tr'><td class='tdclassholder "+samptd+"' width='90%'><input type='text' class='table_text' id='styletop-for-inputname' value='Sample Heading' style='text-align:center;font-size:13px;' disabled input_unique_name=''><br><p style='text-align:center;font-size:13px;'><span class='linkeffect edittable_tdval' formid='"+tab1+"' td_table_owner='"+samptd+"' input_unique_name=''>"+edit_rowicon+"</span> <span class='linkeffect delete_table_tdattr' samptd='"+samptd+"'>"+delete_rowicon+"</span> </p></td><td class='tdclassholder settings_table_td2' width='10%' style='text-align:right;'></td></tr>";


	var thetable = "<table width='100%'>"+table_tr_+"</table>";

	// to get the form name
	var form_name = "<p class='tableowners_name' style='margin-bottom:-2px;font-size:13px;'>FORM NAME's Table <span class='linkeffect change_onlytable_name' style='color:rgba(128,128,128,0.9);'>"+settings+"</span></p>";
	$(this).parent().parent().parent().parent().next().prepend("<div class='onlytable_wrapper_' theformid=''>"+form_name+table_tr_main+thetable+"</div>");
	$(".typeof_table_options_tray").remove();
});


// this is to change the table name change_onlytable_name
$(document).on("click", '.change_onlytable_name', function(event) {
	// check if the formid is already formed in the table
	var theformid = $(this).parent().parent().attr("theformid");

	if(theformid == ''){
		alert("Table name can't be changed until atleast one table attribute is formed.")
		return;
	}
	var thetext = $(this).parent().text();//alert(thetext);

	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 100;

	// alert(halfwidth);
	var table_ = "<table width='100%'><tr width='100%'><td colspan='2'><u>Update Table Name</u></td></tr><tr width='100%'><td colspan='2'><input type='text' class='tablename_forupdate_input' value='"+thetext+"' style='outline:none;width:100%;border:1px solid rgba(128,128,128,0.4);'></td></tr><tr width='100%'><td colspan='2'><u class='linkeffect updatetable_name' theformid='"+theformid+"'>Update</u> <u class='linkeffect remove_update_container__'>Cancel</u></td></tr></table>";
	$(".expanded_dummy_tray_forpreview").prepend("<div class='updatingname_ofthe_onlytabletable_table' style='position:absolute;background:white;width:200px;border:1px solid rgba(128,128,128,0.4);margin-top:200px;margin-left:"+halfwidth+"px;border-radius:3px;padding:5px;font-size:13px;'>"+table_+"</div>");
});


// this is to update the table name updatetable_name
$(document).on("click", '.updatetable_name', function(event) {
	var settings = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-tools' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z'></path><path fill-rule='evenodd' d='M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'></path></svg>";

	var theformid = $(this).attr("theformid");
	var tablename = $(this).parent().parent().prev().find(".tablename_forupdate_input").val();
	// alert(theformid);
	$(".tableowners_name-"+theformid).html(tablename+" <span class='linkeffect change_onlytable_name' style='color:rgba(128,128,128,0.9);'>"+settings+"</span>");
});


// this is to remove the update container of the updating of the table name remove_update_container__
$(document).on("click", '.remove_update_container__', function(event) {
	$(".updatingname_ofthe_onlytabletable_table").remove();
});


// this is to create table for an already existing form create_table_ofexisting_form
$(document).on("click", '.create_table_ofexisting_form', function(event) {
	var edit_rowicon = "<svg class='bi bi-pen' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

	var delete_rowicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	var addnew_attribute = "<svg class='bi bi-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z'/></svg>";

	// we get the form id of the form that needs a new table
	var formid = $(this).attr("formid");

	// we check if the table already exist. if it does we do nothing; if it does not exist we create the table just after the form 

	var checkiftableexist = $(".table_wrapper_").attr("theformid");//alert(checkiftableexist);
	if(checkiftableexist != formid){
		var samptd = Math.random().toString(36).substring(7);
			samptd += Math.random().toString(36).substring(7);


		var table_tr_main = "<table width='100%'><tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='100%' class='tdtop_nav_table'><ul class='tableul'><li class='linkeffect addnew_table_attribute' formid='"+formid+"'>"+addnew_attribute+" Add Attribute</li> <li class='linkeffect updatewidths_table_td'>Update Widths</li>  <li class='linkeffect reorder_table_td'>Reorder Attributes</li></ul></td></tr></table>";

		var table_tr_ = "<tr width='100%' class='table_header_tr_numb' style='border-bottom:1px solid rgba(128,128,128,0.4);text-align:center;'><td class='tdwidthholder "+samptd+"' width='90%'><input type='number' class='table_width_number' id='styletop-for-inputname' value='90' style='text-align:center;font-size:13px;'></td><td class='tdwidthholder settings_table_td1' width='10%'><input type='number' id='styletop-for-inputname' value='10' style='text-align:right;font-size:13px;' disabled></span></td></tr>";

			table_tr_ += "<tr width='100%' class='table_header_tr'><td class='tdclassholder "+samptd+"' width='90%'><input type='text' class='table_text' id='styletop-for-inputname' value='Sample Heading' style='text-align:center;font-size:13px;' disabled input_unique_name=''><br><p style='text-align:center;font-size:13px;'><span class='linkeffect edittable_tdval' formid='"+formid+"' td_table_owner='"+samptd+"' input_unique_name=''>"+edit_rowicon+"</span> <span class='linkeffect delete_table_tdattr' samptd='"+samptd+"'>"+delete_rowicon+"</span> </p></td><td class='tdclassholder settings_table_td2' width='10%' style='text-align:right;'></td></tr>";

		var thetable = "<table width='100%'>"+table_tr_+"</table>";
		// to get the form name
		var theformnam = $(".theactivies > #"+formid).prev().prev().attr("value");
		var form_name__ = "<p class='tableowners_name-"+formid+"' style='margin-bottom:-2px;font-size:13px;'>"+theformnam+"'s Table</p>";
		$(".theactivies").find("#"+formid).after("<div class='table_wrapper_' theformid='"+formid+"'>"+form_name__+table_tr_main+thetable+"</div>");
		$(".typeof_table_options_tray").remove();
	}
});

// this is to reorder the table td reorder_table_td
$(document).on("click", '.reorder_table_td', function(event) {
	$(".typeof_table_options_tray").remove();
	$(".inputtype_dropdowns").remove();

   	$(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");

    var string_width = "";
	$(this).parent().parent().parent().parent().parent().next().find(".tdclassholder").each(function (index) {
		var checkclass = $(this).attr("class");
		var checkclass_status = checkclass.includes("settings_table_td2");

		if(checkclass_status == false){
			checkclass = checkclass.replace("tdclassholder", "");
			checkclass = checkclass.trim();
			theval = $(this).find("input").val();
			// alert(theval);
			string_width += "<li thelitdclass='"+checkclass+"'>"+theval+"</li>";
		}
		
	});

	var theformid = $(this).parent().parent().parent().parent().parent().parent().attr("theformid");

	var header_tray = "<div style='margin-left:5px;'>Reorder Table Attributes</div>";
	var update_tray = "<div class='footer_updatetray' style='padding-left:5px;margin-top:-10px;'><table width='100%'><tr width='100%' class='dntcount_this'><td width='90%' style='font-size:13px;'><u class='linkeffect update_td_arrangement' theformid='"+theformid+"'>Update</u> <u class='linkeffect closereorder_rows'>Close</u></td> <td width='10%' style='text-align:right;'> </td></tr></table></div>";

	$(".sortable_tray2ul").after(update_tray);
	$(".sortable_tray2ul").html(string_width);
	$(".sortable_tray2ul").before(header_tray);

	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 100;

	$(".sortable_tray2").attr("style", "position:absolute; width:200px;margin-left:"+halfwidth+"px;margin-top:-30px; background:white;border:1px solid rgba(128,128,128,0.4); border-radius:5px; box-shadow: 1px 0px 5px 0px rgba(173,173,173,1); font-size:13px;");
	$(".place_actual_dummypage").after($(".sortable_tray2"));
});

// this is to update the arrangement of the order update_td_arrangement
$(document).on("click", '.update_td_arrangement', function(event) {
	var theformid = $(this).attr("theformid");
	$(this).parent().parent().parent().parent().parent().prev().find("li").each(function (index) {
		var thelitdclass = $(this).attr("thelitdclass");
		$("[theformid="+theformid+"]").find(".table_header_tr > .settings_table_td2").before($(".table_header_tr > ."+thelitdclass));
		$("[theformid="+theformid+"]").find(".table_header_tr_numb > .settings_table_td1").before($(".table_header_tr_numb > ."+thelitdclass));
	});

});

// this is to create form/table where there is no form before create_form_table
// form is created first 
$(document).on("click", '.create_form_table', function(event) {
	var tab1 = Math.random().toString(36).substring(7);
		tab1 += Math.random().toString(36).substring(7);

	var tab2 = Math.random().toString(36).substring(7);
		tab2 += Math.random().toString(36).substring(7);

	var tab3 = Math.random().toString(36).substring(7);
		tab3 += Math.random().toString(36).substring(7);

	var tab4 = Math.random().toString(36).substring(7);
		tab4 += Math.random().toString(36).substring(7);

	var tab5 = Math.random().toString(36).substring(7);
		tab5 += Math.random().toString(36).substring(7);

	var tab6 = Math.random().toString(36).substring(7);
		tab6 += Math.random().toString(36).substring(7);

	var samptd = Math.random().toString(36).substring(7);
		samptd += Math.random().toString(36).substring(7);

	var edit_rowicon = "<svg class='bi bi-pen' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

	var delete_rowicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	var addnew_attribute = "<svg class='bi bi-plus' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z'/></svg>";

	var form_arrange = "<input type='text' class='formname' id='styletop-for-inputname' value='FORM NAME'>";
		form_arrange+= "<br>";
		form_arrange+= "<form class='pageform formplainstyle' id='"+tab1+"' style='margin-bottom: 50px;'><style>.openformconsole{width:100%;height:;}</style>";
		form_arrange+= "<table width='100%' class='"+tab2+"'><tbody><tr width='100%' class='"+tab3+"-tr' customtr='"+tab4+"'>";
		form_arrange+= "<td width='50%' class='td-"+tab5+"' id='"+tab4+"-td'><input type='text' class='"+tab5+" inputname-"+tab5+"' id='styletop-for-inputname' value='"+tab5+"'><br><input type='text' id='openformconsole' class='"+tab5+"' name='"+tab5+"' style='width:100%;'></td>";
		form_arrange+= "<td width='50%' class='td-"+tab6+"' id='"+tab4+"-td'><input type='text' class='"+tab6+" inputname-"+tab6+"' id='styletop-for-inputname' value='"+tab6+"'><br><input type='text' id='openformconsole' class='"+tab6+"' name='"+tab6+"' style='width:100%;'></td>";
		form_arrange+= "</tr></tbody></table></form>";

	var table_tr_main = "<table width='100%'><tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='100%' class='tdtop_nav_table'><ul class='tableul'><li class='linkeffect addnew_table_attribute' formid='"+tab1+"'>"+addnew_attribute+" Add Attribute</li> <li class='linkeffect updatewidths_table_td'>Update Widths</li> <li class='linkeffect reorder_table_td'>Reorder Attributes</li></ul></td></tr></table>";

	var table_tr_ = "<tr width='100%' class='table_header_tr_numb' style='border-bottom:1px solid rgba(128,128,128,0.4);text-align:center;'><td class='tdwidthholder "+samptd+"' width='90%'><input type='number' class='table_width_number' id='styletop-for-inputname' value='90' style='text-align:center;font-size:13px;'></td><td class='tdwidthholder settings_table_td1' width='10%'><input type='number' id='styletop-for-inputname' value='10' style='text-align:right;font-size:13px;' disabled></span></td></tr>";

		table_tr_ += "<tr width='100%' class='table_header_tr'><td class='tdclassholder "+samptd+"' width='90%'><input type='text' class='table_text' id='styletop-for-inputname' value='Sample Heading' style='text-align:center;font-size:13px;' disabled input_unique_name=''><br><p style='text-align:center;font-size:13px;'><span class='linkeffect edittable_tdval' formid='"+tab1+"' td_table_owner='"+samptd+"' input_unique_name=''>"+edit_rowicon+"</span> <span class='linkeffect delete_table_tdattr' samptd='"+samptd+"'>"+delete_rowicon+"</span> </p></td><td class='tdclassholder settings_table_td2' width='10%' style='text-align:right;'></td></tr>";


	var thetable = "<table width='100%'>"+table_tr_+"</table>";

	// to get the form name
	var form_name = "<p class='tableowners_name-"+tab1+"' style='margin-bottom:-2px;font-size:13px;'>FORM NAME's Table</p>";
	$(this).parent().parent().parent().parent().next().html(form_arrange+"<div class='table_wrapper_' theformid='"+tab1+"'>"+form_name+table_tr_main+thetable+"</div>");
	$(".typeof_table_options_tray").remove();
});

// this is to add a new table td to the table of forms addnew_table_attribute
$(document).on("click", '.addnew_table_attribute', function(event) {
	//  get the formid of the table or td formid
	var formid = $(this).attr("formid");

	// remove error if it exists
	$(".universalerror_tray").hide();
	$(".universal_error_text").html("");

	// if deletetray_table_confirmation, the error tray is in the dom remove it
	$(".deletetray_table_confirmation").remove();

	var edit_rowicon = "<svg class='bi bi-pen' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1ajax.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

	var delete_rowicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	// loop through the TDs to get the highest width so we know what to deduct
	var arrayhighest = Array();
	$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder").each(function (index) {
		tdwidth = $(this).attr("width");
		tdwidth = parseInt(tdwidth);
		arrayhighest[arrayhighest.length] = tdwidth;
	});

	// this is the highest number from the array
	thehighestwidth_from_array = Math.max.apply(Math,arrayhighest);
	// alert(thehighestwidth_from_array);

	// we now loop to find the element that corresponds with the highest width and manipulate
	$(this).parent().parent().parent().parent().parent().next().find(".tdclassholder").each(function (index) {
		tdwidth = $(this).attr("width");
		tdwidth = parseInt(tdwidth);

		if(thehighestwidth_from_array == tdwidth){
			half_new_td = tdwidth/2;
			half_new_td = parseInt(half_new_td);

			half_old_td = tdwidth - half_new_td;
			half_old_td = parseInt(half_old_td);
			$(this).attr("width", half_old_td+"%");
			return false;
		}
	});

	$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder").each(function (index) {
		tdwidth = $(this).attr("width");
		tdwidth = parseInt(tdwidth);

		if(thehighestwidth_from_array == tdwidth){
			half_new_td = tdwidth/2;
			half_new_td = parseInt(half_new_td);

			half_old_td = tdwidth - half_new_td;
			half_old_td = parseInt(half_old_td);
			$(this).attr("width", half_old_td+"%");
			$(this).find("#styletop-for-inputname").attr("value", half_old_td);
			$(this).find("#styletop-for-inputname").val(half_old_td);
			return false;
		}
	});

	// this is the sample code for the delete icon
	var samptd = Math.random().toString(36).substring(7);
		samptd += Math.random().toString(36).substring(7);

	// 
	$(this).parent().parent().parent().parent().parent().next().find(".settings_table_td1").before("<td class='tdwidthholder "+samptd+"' width='"+half_new_td+"%' style='text-align:center;'><input type='number' class='table_width_number' id='styletop-for-inputname' value='"+half_new_td+"' style='text-align:center;font-size:13px;'></td>");
	$(this).parent().parent().parent().parent().parent().next().find(".settings_table_td2").before("<td class='tdclassholder "+samptd+"' width='"+half_new_td+"%' style='text-align:center;'><input type='text' class='table_text' id='styletop-for-inputname' value='Sample Heading' style='text-align:center;font-size:13px;' disabled input_unique_name=''><br><p style='text-align:center;font-size:13px;'><span class='linkeffect edittable_tdval' formid='"+formid+"' td_table_owner='"+samptd+"' input_unique_name=''>"+edit_rowicon+"</span> <span class='linkeffect delete_table_tdattr' samptd='"+samptd+"'>"+delete_rowicon+"</span> </p></td>");
	// alert(widthofsettings);
});

// to delete the table td attribute delete_table_tdattr
$(document).on("click", '.delete_table_tdattr', function(event) {
	// if deletetray_table_confirmation, the error tray is in the dom remove it
	$(".deletetray_table_confirmation").remove();

	// remove error tray if it exists
	$(".universalerror_tray").hide();
	$(".universal_error_text").html("");

	// to determine the margin left of the delete tray of the attribute
	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 100;

	// to get the name of the table td
	var tabletd_value = $(this).parent().prev().prev().prev().prev().val();

	// the id of the tdcolumn to be deleted
	var tabletd_idd = $(this).parent().parent().attr("class");
	// tdclassholder
	tabletd_idd = tabletd_idd.replace('tdclassholder','');
	tabletd_idd = tabletd_idd.trim();
	

	var i;
	var form_string = "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='100%' style='padding-left:5px;' colspan='2'>Deleting "+tabletd_value+"</td></tr>";

		form_string += "<tr width='100%'><td width='100%' style='padding-left:5px;' colspan='2'>Type Security String to confirm delete action</td></tr>";
	for (i = 0; i < 3; i++) {
		var rnd = Math.random().toString(36).substring(7);
		form_string += "<tr width='100%'><td width='40%' class='ques"+i+"' style='padding-left:5px;'>"+rnd+"</td><td width='60%' style='padding-right:5px;'><input type='text' id='styletop-for-inputname' class='ans"+i+"' style='border-bottom:1px solid rgba(128,128,128,0.4);'></td></tr>";
	}

	form_string += "<tr width='100%'><td width='100%' colspan='2' style='padding:5px;padding-bottom:10px;'><u class='linkeffect removetable_td_confirmation' td_tobe_deleted='"+tabletd_idd+"' style='color:rgba(50,205,50,1);'>Confirm Delete</u> <u class='linkeffect cancel_deleteoftabletd' style='color:rgba(255,69,0,1);'>Cancel Delete</u></td></tr>";

	$(".place_actual_dummypage").after("<div class='deletetray_table_confirmation' style='position:absolute;z-index:99999; background:white;border:1px solid rgba(128,128,128,0.4);padding:5px;border-radius:5px;width:200px;margin-left:"+halfwidth+"px;margin-top:-50px;font-size:13px;box-shadow: 1px 1px 5px 0px rgba(99,99,99,1);'><table>"+form_string+"</table>");
});


// this is to cancel delete action cancel_deleteoftabletd
$(document).on("click", '.cancel_deleteoftabletd', function(event) {
	$(".deletetray_table_confirmation").remove();
});

// this is to remove the table td removetable_td_confirmation
$(document).on("click", '.removetable_td_confirmation', function(event) {
	var td_tobe_deleted = $(this).attr("td_tobe_deleted");

	// this is the width of the td to be deleted
	width_from_tdto_be_deleted = $("."+td_tobe_deleted).attr("width");
	width_from_tdto_be_deleted = parseInt(width_from_tdto_be_deleted);

	var validate_strings = "";
	for (i = 0; i < 3; i++) {
		quest = $(".ques"+i).text();
		anst = $(".ans"+i).val();

		if(quest != anst){
			$(".ques"+i).parent().attr("style", "background:rgba(255,69,0,0.1);");
			validate_strings += "sddf";

			// if the warning tray is opened please remve from dom
			$(".universalerror_tray").hide();
			$(".universal_error_text").html("");
		}else{
			$(".ques"+i).parent().attr("style", "");
		}
	}

	if(validate_strings == ''){
		var arraycounter = Array();
		$("."+td_tobe_deleted).parent().find(".tdwidthholder").each(function (index) {
			arraycounter[arraycounter.length] = $(this);
		});

		// if the length of the arry is equal to two then do nothing; do not remove, instead show error alert(arraycounter.length);
		if(arraycounter.length == 2){
			// $(".universal_error_text").html("Error: Action can't be carried out. Table cannot be empty.");
			// $(".universalerror_tray").show();
			$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Action can't be carried out. Table cannot be empty.</span></div>");
		}else if(arraycounter.length > 2){
			widthtobe_deleted = $("."+td_tobe_deleted).attr("width");
			widthtobe_deleted = parseInt(widthtobe_deleted, 10);
			// alert(widthtobe_deleted);

			// loop through the TDs to get the highest width so we know what to deduct
			var arrayhighest = Array();
			$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder").each(function (index) {
				tdwidth = $(this).attr("width");
				tdwidth = parseInt(tdwidth);
				arrayhighest[arrayhighest.length] = tdwidth;
			});

			// this is the highest number from the array
			thehighestwidth_from_array = Math.max.apply(Math,arrayhighest);

			// if the width of the td to be deleted is equal to the highest width
			if(width_from_tdto_be_deleted == thehighestwidth_from_array){
			$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Action can't be carried out. Ensure the column to be deleted isn't the highest width.</span></div>");
				return;
			}

			$(this).parent().parent().parent().parent().parent().next().find(".tdclassholder").each(function (index) {
				tdwidth = $(this).attr("width");
				tdwidth = parseInt(tdwidth);

				if(thehighestwidth_from_array == tdwidth){
					new_width = width_from_tdto_be_deleted + tdwidth;
					$(this).attr("width", new_width+"%");
					return false;
				}
			});

			$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder").each(function (index) {
				tdwidth = $(this).attr("width");
				tdwidth = parseInt(tdwidth);

				if(thehighestwidth_from_array == tdwidth){
					new_width = width_from_tdto_be_deleted + tdwidth;
					$(this).attr("width", new_width+"%");
					$(this).find("#styletop-for-inputname").attr("value", new_width);
					$(this).find("#styletop-for-inputname").val(new_width);
					return false;
				}
			});


			// alert(thehighestwidth_from_array);
			$("."+td_tobe_deleted).remove();

		}

		// remove the delete confirmaiton tray deletetray_table_confirmation
		$(".deletetray_table_confirmation").remove();
	}
});

// this is to adjust the widths of table td updatewidths_table_td
$(document).on("click", '.updatewidths_table_td', function(event) {
	// remove error tray if it exists
	$(".universalerror_tray").hide();
	$(".universal_error_text").html("");

	// we first try to get the totalof all the cols and ensure that the total is equal to one hundred (percent)
	var sumtotal = 0;
	sumtotal = parseInt(sumtotal);
	$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder input").each(function (index) {
		var new_width_val = $(this).val();
		new_width_val = parseInt(new_width_val);
		sumtotal = sumtotal + new_width_val;
	});

	// if it's equal to 100
	if(sumtotal == 100){
		$(this).parent().parent().parent().parent().parent().next().find(".tdwidthholder input").each(function (index) {
			var new_width_val = $(this).val();
			new_width_val = parseInt(new_width_val);

			// getting the class of the td about to change width
			var ownerid = $(this).parent().attr("class");
			ownerid = ownerid.replace("tdwidthholder", "");
			ownerid = ownerid.trim();
			
			// this is to refuse editing of the settings column
			if(ownerid != 'settings_table_td1'){
				$("."+ownerid).attr("width", new_width_val+"%");
			}
		});
		resizeTablerows("updatewidth");
	}else if(sumtotal > 100 || sumtotal < 100){
		$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Action can't be carried out. Ensure that the total widths of columns must be equl to 100.</span></div>");
	}
	
});


// this is to edit the value of the td table edittable_tdval
$(document).on("click", '.edittable_tdval', function(event) {
	// remove file dropdown icon
	$(".editfile_").remove();
	var tdowner = $(this).attr("td_table_owner");
	// var formid = $(this).parent().prev().prev().attr("formid");alert(formid);
	// var inputid = $(this).parent().prev().prev().attr("inputid");alert(inputid);


	// get the unique name of the input tag that is already from the form to the table input_unique_name
	var input_unique_name = $(this).attr("input_unique_name");alert(input_unique_name);

	// remove the tray first deletetray_table_confirmation first
	$(".deletetray_table_confirmation").remove();

	$(".inputtype_dropdowns").remove();

	// the formid of the form that owns all this actions 
	var formid = $(this).attr("formid");
	var samptd = $(this).attr("td_table_owner");

	var input_val = $(this).parent().prev().prev().val();

	var form_string = "<table width='100%'>";
	form_string += "<tr width='100%' style='border-bottom:1px solid rgba(128,128,128,0.4);'><td width='100%' colspan='2'>Select Form Value for Column</td></tr>";
	$("#"+formid).find("#styletop-for-inputname").each(function (index) {
		var formval = $(this).val();
		// this is the unique name of the inpute
		var formname = $(this).next().next().attr("class");//alert(formname+" form name for select beside formnames");
		// if the unique name got from the table td is the same as the one that is on the form then we put the mark infront of it
		var approvalmark = "";
		if(input_unique_name == formname){
			var approvalmark = "<svg class='bi bi-check2-circle' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>";
			var approvalmark = "<span class='marksign' style='padding-left:5px;color:rgba(34,139,34,1);'>"+approvalmark+"</span>";
		}
		form_string += "<tr width='80%'><td width='100%'><span class='input_value_fortd__text'>"+formval+"</span> "+approvalmark+"</td><td width='20%' style='text-align:right;'><span class='linkeffect pickinput_fortable' input_unique_name='"+formname+"'>Select<span></td></tr>";
	});
	form_string += "<tr width='100%'><td width='100%' colspan='2'><u class='linkeffect updating_table_td_input' destination='"+samptd+"' input_unique_name='"+input_unique_name+"' input_unique_value='"+input_val+"'>Update</u> <u class='linkeffect cancel_deleteoftabletd'>Close</u><br><u class='linkeffect loadformoptions' tdowner='"+tdowner+"'>Load from database</u></td></tr>";
	form_string += "</table>";

	// to determine the margin left of the delete tray of the attribute
	widthbody = $("body").width();
	halfwidth = widthbody/2
	halfwidth = halfwidth - 100;

	$(".place_actual_dummypage").after("<div class='deletetray_table_confirmation customscrollbar' style='position:fixed;z-index:99999; background:white;border:1px solid rgba(128,128,128,0.4);padding:5px;border-radius:5px;width:200px;height:500px;margin-left:"+halfwidth+"px;margin-top:-50px;font-size:13px;box-shadow: 1px 1px 5px 0px rgba(0,128,0,1);overflow-y:scroll;'><table>"+form_string+"</table>");
});

// this is to load the form options to the page loadformoptions
$(document).on("click", '.loadformoptions', function(event) {
	var tdowner = $(this).attr("tdowner");
	var existingformid = "";
	var existinginputid = "";

	var approvalicon = "<svg class='bi bi-check2-circle' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>";

	$("[td_table_owner="+tdowner+"]").parent().parent().parent().find("td > input").each(function(){
		var formid = $(this).attr("formid");
		var inputid = $(this).attr("inputid");
		// existingformid
		if(formid != undefined){
			// alert(formid);
			existingformid = formid;
			existinginputid = inputid;
		}
	});

	if(existingformid != ''){
		// alert(existingformid+" the external not empty");
	}
	
	$(".expanded_dummy_tray_forpreview").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");

	var clickedlink = $(this);
	var formsarray_="";
	var accountid = $(".details").attr("accountid");
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadformoptions";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{accountid:accountid},
        success:function(data){
        var data = data.trim();
        var countlength = data;
		string_ = "";
		var data=$.parseJSON(data);
		console.log("all layoutids---"+data);
		jQuery.each(data, function(index, value){
			var layoutid = value;
			var layoutindex = index;
			var datalength = data.length-1;
			// alert(layoutindex+" array index");
			// alert(data.length-1+" length");
			// if(data.length-1 == layoutindex){
			// 	$(".loader").remove();
			// }
		    var baseURL = $(".baseURL").attr("baseURL");
		    var baseURL = baseURL+"/pulltemplates_for_form";
		    $.ajaxSetup({
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        }
		    });
		    $.ajax({
		        type:'POST',
		        url:baseURL,
		        data:{layoutid:layoutid},
		        success:function(data){
		        var data = data.trim();
		        // alert(layoutid+"--layoutid layoutcode--"+data)
		        formsarray_ += data;
		        if(data != ''){
		        	$(data).find("form").each(function (index) {
		        		var formname = $(this).prev().prev().val();
		        		var theformid = $(this).attr("id");//alert(layoutid+"<-layoutid formid->"+theformid);
		        		
		        		var random = Math.random().toString(36).substring(7);
		        			random = Math.random().toString(36).substring(7);

		        		// this is to ensure that forms on same page do not appear on the 
						if ($("#"+theformid)[0]){
						    // Do something if class exists
						    // alert("this exists ooo");
						    return false;
						}

		        		// this is the existing form from the table
		        		if(existingformid != ''){
		        			if(existingformid == theformid){
				        		$(clickedlink).parent().parent().before("<tr id='"+random+"' width='100%' class='trformclass-"+theformid+"'><td colspan='2' theformclass='"+theformid+"'>"+formname+"</td></tr>");

				        		$(this).find("#openformconsole").each(function (index) {
				        			var theval = $(this).prev().prev().val();
				        			var thename = $(this).attr("name");
				        			if(existinginputid == thename){
				        				// alert(existinginputid+"existinginputid");
				        				// alert(thename+" thename");
				        				// alert(existinginputid+" they are equal "+thename+" ooo-"+theval);
				        				var icon_ = approvalicon;
					        			$("#"+random).after("<tr width='100%' class='trformclass-"+theformid+"'><td><span class='inputname_span'>"+theval+"</span> <span class='marksign' style='padding-left:5px;color:rgba(34,139,34,1);'>"+icon_+"</span></td> <td theformclass='"+theformid+"' inputclass='"+thename+"' style='text-align:right;'><u class='linkeffect selectforminput_'>Update</u></td></tr>");
										// manipulate update button updating_table_td_input updating_table_td_input
										$(".updating_table_td_input").attr("id", 'updating_input');
										$(".updating_table_td_input").removeClass("updating_table_td_input");
										$("#updating_input").attr("formid", existingformid);
										$("#updating_input").attr("inputid", existinginputid);
										$("#updating_input").attr("input_text", theval);
										$("#updating_input").attr("input_update_actiontype", 'updatingfromdatabase');

				        			}else{
				        				// alert(theval+" for non equal");
				        				var icon_ = '';
					        			$("#"+random).after("<tr width='100%' class='trformclass-"+theformid+"'><td><span class='inputname_span'>"+theval+"</span> <span class='marksign' style='padding-left:5px;color:rgba(34,139,34,1);'>"+icon_+"</span></td> <td theformclass='"+theformid+"' inputclass='"+thename+"' style='text-align:right;'><u class='linkeffect selectforminput_'>Update</u></td></tr>");
				        			}

				        			// console.log(theval+" thevalue");
				        		});
		        			}
		        		}else{
			        		$(clickedlink).parent().parent().before("<tr id='"+random+"' width='100%' class='trformclass-"+theformid+"'><td colspan='2' theformclass='"+theformid+"'>"+formname+"</td></tr>");

			        		$(this).find("#openformconsole").each(function (index) {
			        			var theval = $(this).prev().prev().val();
			        			var thename = $(this).attr("name");
			        			// console.log(theval+" thevalue");
			        			$("#"+random).after("<tr width='100%' class='trformclass-"+theformid+"'><td><span class='inputname_span'>"+theval+"</span></td> <td theformclass='"+theformid+"' inputclass='"+thename+"' style='text-align:right;'><u class='linkeffect selectforminput_'>Update</u></td></tr>");
			        		});
		        		}

			        	if(datalength == layoutindex){
			        		$(".loader").remove();
			        	}
					});
		        }
		      }
		    });
			
			// 
		});

      }
    });
});

// this is to select input selectforminput_
$(document).on("click", '.selectforminput_', function(event) {

	$(".marksign").remove();
	var approvalicon = "<svg class='bi bi-check2-circle' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>";

	var theformclass = $(this).parent().attr("theformclass");
	var inputclass = $(this).parent().attr("inputclass");

	$(this).parent().parent().parent().find("tr").each(function (index) {
		var checkclass = $(this).attr("class");
		if(checkclass != undefined){
			if(checkclass != "trformclass-"+theformclass){
				$(this).remove();
			}
			// alert(checkclass);
		}
	});

	// put mark in the selected td tr 
	var input_text = $(this).parent().prev().find(".inputname_span").text();
	$(this).parent().prev().find(".inputname_span").after("<span class='marksign' style='padding-left:5px;color:rgba(34,139,34,1);'>"+approvalicon+"</span>");

	// manipulate update button updating_table_td_input updating_table_td_input
	$(".updating_table_td_input").attr("id", 'updating_input');
	$(".updating_table_td_input").removeClass("updating_table_td_input");
	$("#updating_input").attr("formid", theformclass);
	$("#updating_input").attr("inputid", inputclass);
	$("#updating_input").attr("input_text", input_text);
	$("#updating_input").attr("input_update_actiontype", 'updatingfromdatabase');


});


// this is to update the $("[theformid="+theformid+"]")
$(document).on("click", "[input_update_actiontype=updatingfromdatabase]", function(event) {
	var formid = $(this).attr("formid");//alert(formid+" formid");
	var inputid = $(this).attr("inputid");//alert(inputid+" inputid");
	var input_text = $(this).attr("input_text");

	// the td in the table reciving the action destination
	var destination = $(this).attr("destination");
	var checkcount = "";

	$("."+destination).parent().find("input").each(function (index) {
		var check_formid = $(this).attr("formid");
		var check_inputid = $(this).attr("inputid");

		if(check_formid == undefined || check_inputid == undefined){
			// alert(check_formid+" check_formid");
			// alert(check_inputid+" check_inputid");
			// alert("dddddd");
			checkcount = "no_exist";
		}else{
			// alert(check_formid+" check_formid");
			// alert(check_inputid+" check_inputid");
			// alert("shibiri");
			if(check_formid == formid && check_inputid == inputid){
				// alert("This input already exists on the table.");
				
				// checkcount = "yes_exist";
			}else{
				if(checkcount == 'yes_exist'){
					// return;
				}else{
					// checkcount = "no_exist";
				}
			}
		}
	});

	// change the id of the container that holds the name
	// $(this).find(".tableowners_name").attr("class", "tableowners_name-"+formid);
	// $("."+destination).parent().parent().parent().parent().find(".tableowners_name").attr("class", "tableowners_name-"+formid);

	// alert(checkcount+" outer realm");
	// if(checkcount == 'no_exist'){
	$(".onlytable_wrapper_").find("."+destination).each(function (index) {
		// $(this).parent().parent().parent().parent().find(".tableowners_name").attr("class", "tableowners_name-"+formid);
		// var theval = $(this).find(".table_text").val();
		// alert(theval+" the value class->"+destination);

		$(this).find(".table_text").val(input_text);
		$(this).find(".table_text").attr("value", input_text);

		$(this).find(".table_text").attr("formid", formid);
		$(this).find(".table_text").attr("inputid", inputid);

		$(this).parent().parent().parent().parent().attr("theformid", formid);
	});

	// // remove the everything
	$(".deletetray_table_confirmation").remove();
});

// this is to select pickinput_fortable
$(document).on("click", '.pickinput_fortable', function(event) {
	var samptd = $(this).attr("samptd");
	var input_unique_name = $(this).attr("input_unique_name");
	var input_unique_value = $(this).parent().prev().find(".input_value_fortd__text").text();
	// first remove the mark sign if it exists before doing anything 
	$(".marksign").remove();
	var approvalicon = "<svg class='bi bi-check2-circle' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>";

	$(this).parent().prev().append("<span class='marksign' style='padding-left:5px;color:rgba(34,139,34,1);'>"+approvalicon+"</span>");

	// update the id of the updating_table_td_input
	$(".updating_table_td_input").attr("input_unique_name", input_unique_name);
	// update the value of the input_unique_value
	$(".updating_table_td_input").attr("input_unique_value", input_unique_value);
});

// this is to update the table td with the new input value updating_table_td_input 
$(document).on("click", '.updating_table_td_input', function(event) {
	// if error already exists remove it 
	$(".universal_error_text").html("");
	$(".universalerror_tray").hide();

	var destination = $(this).attr("destination");
	var input_unique_name = $(this).attr("input_unique_name");
	var input_unique_value = $(this).attr("input_unique_value");
	
	thestatus = "";

	$("."+destination).parent().find(".tdclassholder > input").each(function (index) {
		// alert("inside");
		var check_uniquename = $(this).attr("input_unique_name");
		// if this is equal then stop because the thing is already in use 
		if(input_unique_name == check_uniquename){
			thestatus = "inuse";
		}
		// alert(check_uniquename);
	});

	if(thestatus == "inuse"){
		$(".expanded_dummy_tray_forpreview").after("<div class='universalerror_tray' style='position:absolute;display:block;'><span class='universal_error_text linkeffect'>Error: Action can't be carried out. This input tag is already in use by another table property.</span></div>");
	}else{
		// this is to change the value
		var theinput_forupdating = $("."+destination).find(".table_text").val(input_unique_value);
		$("."+destination).find(".table_text").attr("value", input_unique_value);
		$("."+destination).find(".table_text").attr("input_unique_name", input_unique_name);

		$("."+destination).find(".edittable_tdval").attr("input_unique_name", input_unique_name);
	}

	// after updating the new td value we now rearrange the td of the table
});

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
// always updating the table attribute or td
$(document).ready(function(){
	setInterval(function(){ 
	    if($(".input_unique_name")[0]){
			$(".table_text").each(function (index) {
				// input_unique_name 
				var theinputval = $(this).val();
				var input_unique_name = $(this).attr("input_unique_name");
				// console.log(input_unique_name+" ooo");
				var get_new_value = $(".expanded_dummy_tray_forpreview").find($("."+input_unique_name)).val();
				// console.log(get_new_value+" vvv");
				$(this).val(get_new_value);
			});
	    }
	}, 2000);
});

/////////////////////////////////////////////////////////////////
// once page loads this is to populate each table with three rows 
$(document).ready(function(){
	setInterval(function(){ 
		resizeTablerows("endlessloop");
	}, 2000);
});

function resizeTablerows(a) {
	// console.log(a+" ---dddddd");
	var edit_rowicon = "<svg class='bi bi-pen' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

	var delete_rowicon = "<svg class='bi bi-trash' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

	$(".table_wrapper_").each(function (index) {
		var gettotal = Array();
		var theformid_attr = $(this).attr("theformid");
		$("[theformid="+theformid_attr+"] > table > tbody > tr > .tdwidthholder").each(function (index) {
			var thewidth = $(this).attr("width");//alert(thewidth);
			gettotal[gettotal.length] = thewidth;
		});

		var newtr = "<tr width='100%'>";
		// console.log(gettotal.length);
		for (i = 0; i < gettotal.length; i++) {
			if(i == gettotal.length - 1){
				newtr += "<td width='"+gettotal[i]+"' style='text-align:right;'><span class='linkeffect'>"+edit_rowicon+"</span> <span class='linkeffect'>"+delete_rowicon+"</span></td>";
			}else{
				var random = Math.random().toString(36).substring(7);
					random += Math.random().toString(36).substring(7);
				newtr += "<td width='"+gettotal[i]+"' style='text-align:center;font-size:13px;'>"+random+"</td>";
			}
		}
		newtr += "</tr>";

		newtr += "<tr width='100%'>";
		// console.log(gettotal.length);
		for (i = 0; i < gettotal.length; i++) {
			if(i == gettotal.length - 1){
				newtr += "<td width='"+gettotal[i]+"' style='text-align:right;'><span class='linkeffect'>"+edit_rowicon+"</span> <span class='linkeffect'>"+delete_rowicon+"</span></td>";
			}else{
				var random = Math.random().toString(36).substring(7);
					random += Math.random().toString(36).substring(7);
				newtr += "<td width='"+gettotal[i]+"' style='text-align:center;font-size:13px;'>"+random+"</td>";
			}
		}
		newtr += "</tr>";
		// check if the table of the values exist. if it exist simply change whats inside else create a new 
	    if($(".bodytable-"+theformid_attr)[0]){
	    	var tdlength = $(".bodytable-"+theformid_attr).attr("tdlength");
	    	if(tdlength != gettotal.length || a == "updatewidth"){
		        // if a page design already exists do nothing   
		        $(".bodytable-"+theformid_attr).html(newtr);
		        $(".bodytable-"+theformid_attr).attr("tdlength", gettotal.length);
	    	}
	    }else{
			$("[theformid="+theformid_attr+"]").append("<table class='bodytable-"+theformid_attr+"' tdlength='"+gettotal.length+"' width='100%'>"+newtr+"</table>");
	    }
	});
	
}

/////////////////////////////////////////////////////////////////
// once page loads this is to populate each table with three rows 
$(document).ready(function(){
	setInterval(function(){ 
		// resizeTablerows("endlessloop");
		$(".table_wrapper_").each(function (index) {
			var formid = $(this).attr("theformid");//alert(thewidth);
			var theformname = $("#"+formid).prev().prev().attr("value");
			console.log(theformname);
		});
	}, 2000);
});

		$(".table_wrapper_ > table > tbody > tr > .tdwidthholder").each(function (index) {
			var thewidth = $(this).width();//alert(thewidth);
			gettotal[gettotal.length] = thewidth;
		});

////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

// this is to save the page columns save_page_columns
$(document).on("click", '.save_page_columns', function(event) {
	$(".expanded_dummy_tray_forpreview").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");

	var base_url = window.location.href;
	// this is to check if the stuff about to be saved is a profile page 
	var check = base_url.includes("profile");
	if(check == true){
		layouttype = "registration_admin";
	}else{
		layouttype = "apps";
	}
	var url = $(location).attr('href'),
	    parts = url.split("/"),
	    accountid = parts[parts.length-1];


	var ownerattr = $(".save_page_columns").attr("ownerattr");
	var secondaryid = $(".save_page_columns").attr("secondaryid");

	var bodyforsaving = $(".expanded_dummy_tray_forpreview").html();
	if(secondaryid == '' || secondaryid == undefined){
		// alert("stuvs"); this is to save the new index page of the app/registration
	}else{
		// alert(secondaryid);
		var bodyforsaving = $(".theactivies").parent().parent().parent().parent().html();
		// console.log(bodyforsaving);
		// return;
	}
	
	// alert(layouttype);
	// return;
    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/savepagetemplates";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{accountid:accountid, bodyforsaving:bodyforsaving, layouttype:layouttype, ownerattr:ownerattr, secondaryid:secondaryid},
        success:function(data){
        var data = data.trim();

        $(".loader").remove();
      }
    });
});

// this is to open the new link to begin to update the pages openlink_
$(document).on("click", '.openlink_', function(event) {
	$(".expanded_dummy_tray_forpreview").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");
    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");


	var thetextofLink = $(this).text();
	var theownerlink = $(this);
	var destination = $(this).attr("destination");
	var theattr = $(this).attr("theattr");
	var accountid = $(".details").attr("accountid");
	var layoutid = $(".details").attr("layoutid");

	var link_ = $(this).attr("link_");

	if(destination == ''){
		alert("custom link absent");
		$(".loader").remove();
		return;
	}

	if(destination == undefined){
		alert("custom link absent");
		$(".loader").remove();
		return;
	}

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadnew_alternatepage";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{accountid:accountid, layoutid:layoutid, destination:destination, theattr:theattr, link_:link_},
        success:function(data){
        var data = data.trim();
        var res = data.split("-/-");
        if(res[0] == 'nothere'){
		    var rand1 = Math.random().toString(36).substring(7);
		    var rand2 = Math.random().toString(36).substring(7);
		    var rand3 = Math.random().toString(36).substring(7);

			var newdiv = "<td class='theactivies' width='30%' id='"+rand1+"' style='border:1px solid rgba(128,128,128,0.4); border-radius:3px;height:200px;vertical-align:top;'></td><td width='1%' id='"+rand3+"' style=''></td>";
				newdiv += "<td class='theactivies' width='30%' id='"+rand2+"' style='border:1px solid rgba(128,128,128,0.4); border-radius:3px;height:200px;vertical-align:top;'></td><td width='39%' id='"+rand3+"' style=''></td>";

		        // alert(data);
		        var icon_unique_id = Math.random().toString(36).substring(7);
		        	icon_unique_id += Math.random().toString(36).substring(7);
		        $(".theactivies").parent().html(newdiv);

		        // we save the page before we change it
		        $(".save_page_columns").attr("ownerattr", "secondaryowner");
		        $(".save_page_columns").attr("secondaryid", res[1]);

		        // secondary id in the link
		        $(theownerlink).attr("link_", res[1]);
		        // remove the loader as an indication that the processing has ended
		        $(".loader").remove();
        }else{
        	if(data == ''){
        		// alert("empty");
			    var rand1 = Math.random().toString(36).substring(7);
			    var rand2 = Math.random().toString(36).substring(7);
				var rand3 = Math.random().toString(36).substring(7);

				var newdiv = "<td class='theactivies' width='30%' id='"+rand1+"' style='border:1px solid rgba(128,128,128,0.4); border-radius:3px;height:200px;vertical-align:top;'></td><td width='1%' id='"+rand3+"' style=''></td>";
					newdiv += "<td class='theactivies' width='30%' id='"+rand2+"' style='border:1px solid rgba(128,128,128,0.4); border-radius:3px;height:200px;vertical-align:top;'></td><td width='39%' id='"+rand3+"' style=''></td>";
				
				$(".theactivies").parent().html(newdiv);
			    $(".save_page_columns").attr("ownerattr", "secondaryowner");
			    $(".save_page_columns").attr("secondaryid", link_);
			    // remove the loader as an indication that the processing has ended
			    $(".loader").remove();
        	}else{
        		// alert("occupied");
        		$(".expanded_dummy_tray_forpreview > div > table").remove();
        		$(".place_actual_dummypage").next().html("<table width='100%'><tr width='100%'>"+data+"</tr></table>");
			    $(".save_page_columns").attr("ownerattr", "secondaryowner");
			    $(".save_page_columns").attr("secondaryid", link_);
			    // remove the loader as an indication that the processing has ended
			    $(".loader").remove();
        	}

        	// this is to remove the divs and reinsert it
        	$(".deleteentire_page_component").parent().remove();
        }
    	// $(".theactivies").parent().html("");
		$(".nameof_altpage").remove();
		$(".header_pagename").after("<span class='nameof_altpage' style='font-size:19px;vertical-align:center;'>/"+thetextofLink+"</span>");

      }
    });


});

// to return to the index page of the app or registration header_pagename
function display_index_page_layout() {
	$(".expanded_dummy_tray_forpreview").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");
	var base_url = window.location.href;
	var check = base_url.includes("profile");
	
	if(check == true){
		layouttype = "registration_admin";
	}else{
		layouttype = "apps";
	}

	var url = $(location).attr('href'),
	    parts = url.split("/"),
	    layoutid = parts[parts.length-1];

	var companyid = $(".save_page_columns").attr("parentid");
	// get the original header something from the page and insert into the page layout that is got from the database 
	$(".nameof_altpage").remove();
	var headersomething = $(".place_actual_dummypage").html();

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/loadindextemplate_for_editing";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{companyid:companyid, layouttype:layouttype,layoutid:layoutid},
        success:function(data){
        var data = data.trim();
        // $(data).filter('.place_actual_dummypage').remove();

        $(".expanded_dummy_tray_forpreview").html(data);
        
        $(".place_actual_dummypage").html(headersomething);

        // this is to remove the side navigation of every
        $(".deleteentire_page_component").parent().remove();

        $(".save_page_columns").attr("parentid", companyid);
        // alert(data);
        $(".loader").remove();
      }
    });  
}

// this is to save the primary index layout 
function save_index_page_layout() {
	var bodyforsaving = $(".expanded_dummy_tray_forpreview").html();
	var companyid = $(".save_page_columns").attr("parentid");

    var baseURL = $(".baseURL").attr("baseURL");
    var baseURL = baseURL+"/saveindextemplate_beforeclosing";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:'POST',
        url:baseURL,
        data:{companyid:companyid, bodyforsaving:bodyforsaving},
        success:function(data){
        var data = data.trim();

        // alert("updated");
        if(data == "updated"){

			var base_url = window.location.href;
			var check = base_url.includes("profile");

			if(check == true){
			    var profileid = $(this).attr("profileid");
				var base_url = window.location.origin;
	    		// alert(APP_URL);
			    window.location.replace(base_url+"/profile/"+companyid);
			}else{
				var url = $(location).attr('href'),
		    		parts = url.split("/"),
					appid = parts[parts.length-1];

				var base_url = window.location.origin;
	    		// alert(APP_URL);
			    window.location.replace(base_url+"/"+companyid+"/app/"+appid);
			}
        }
      }
    });
}


$(document).on("click", '.header_pagename', function(event) {
	display_index_page_layout();
});

// this is to close the preview of the web page designs close_preview
$(document).on("click", '.close_dummy_preview', function(event) {
	// analysis for if this is app or profile pages
	var url_forchecking = window.location.href;
	var checkforapp = url_forchecking.includes("app");
	// alert(checkforapp);
	if(checkforapp == true){
		// url original
		var origin = window.location.origin;
		// app header page
		var url = $(location).attr('href'),
		    parts = url.split("/"),
		    appid = parts[parts.length-1];
		    companyid = parts[parts.length-4];
		// alert(origin);
		// return;
		window.location.replace(origin+"/"+companyid+"/app/"+appid);
		return;
	}else{
		// url original
		var origin = window.location.origin;
		// app header page
		var url = $(location).attr('href'),
		    parts = url.split("/"),
		    companyid = parts[parts.length-1];

		window.location.replace(origin+"/profile/"+companyid);
		return;
	}
	// return;
	var accountid = $(".details").attr("accountid");
	var ownerattr = $(".save_page_columns").attr("ownerattr");

	// if it is secondary something we redirect away to the new page after saving both the secondary page and the 
	var secondaryid = $(this).prev().prev().attr("secondaryid");
	if(secondaryid != ''){
	
		$.ajax({
		   url:display_index_page_layout(),
		   success:function(){
		   save_index_page_layout();
		}
		})
		return;
	}
	if(ownerattr == 'primaryowner'){
		var base_url = window.location.href;
		var check = base_url.includes("profile");

		if(check == true){
		    var profileid = $(this).attr("profileid");
			var base_url = window.location.origin;
    		// alert(APP_URL);
		    window.location.replace(base_url+"/profile/"+accountid);
		}else{
			var url = $(location).attr('href'),
	    		parts = url.split("/"),
				appid = parts[parts.length-1];

			var base_url = window.location.origin;
    		// alert(APP_URL);
		    window.location.replace(base_url+"/"+accountid+"/app/"+appid);
		}
	}

    $(".sortable_tray2ul").prev().remove();
    // remove the div that has the footer for the updating of all the options
    $(".sortable_tray2ul").next().remove();
    // remove all the li and html content in it
    $(".sortable_tray2ul").html("");
    $(".sortable_tray2ul").attr("style","");
    $(".sortable_tray2").hide();
    $("body").prepend($(".sortable_tray2"));
    $(".sortable_tray2").attr("initiatorid", "");



	// this is to get the status to determine what toggle to display 
	var getstatus = $(this).attr("status");
	if(getstatus == 'on'){
		var svg_ = "<svg class='bi bi-toggle-on' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'></path></svg>";
	}else if(getstatus == 'off'){
		var svg_ = "<svg class='bi bi-toggle-off' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>";
	}

	var headertemplate = $(".headertemplate").attr("headertype");
	if(headertemplate == '_tr_header_style1a'){
		$("#page_name_tray").attr("style", "margin-bottom:5px;"); 

	}else if(headertemplate == '_tr_header_style2'){
		$("#page_name_tray").attr("style", ""); 
		$("#background_shift_1__rightTD__td_header_style2").attr("style", "");
	}else if(headertemplate == '_tr_header_style3'){
		$("#_tr_header_style3__nav").attr("style", "font-size:12px;");
		$("#page_name_tray").attr("style", ""); 
	}else if(headertemplate == '_tr_header_style4'){
		$("#header_style4__nav").attr("style", "font-size:12px;text-align:center;");
		$("#page_name_tray").attr("style", "margin-bottom:-15px;text-align:center;");
		$("#about_page_excerpt").attr("style", "font-size:12px;");
	}

	// when closed remove font-size and make margin-bottom -10px
	$("#background_shift_1__rightTD").attr("style", "margin-bottom:-10px;");

	// $("#page_name_tray").attr("style", "margin-bottom:-15px;"); 
	// when closed remove style background_shift_1__leftTD__details_Style
	$("#background_shift_1__leftTD__details_Style").attr("style", "");

	if(headertemplate == '_tr_header_style1a' || headertemplate == '_tr_header_style2' || headertemplate == '_tr_header_style3'){
		// to insert the toggle back
		var togglepage_background = "<span class='linkeffect toggle_shiftingbackground' status='"+getstatus+"'>"+svg_+"</span><br>";
		$("#page_name_tray").prepend(togglepage_background);
	}else if(headertemplate == '_tr_header_style4'){
		var togglepage_background = "<span class='linkeffect toggle_shiftingbackground' status='"+getstatus+"'>"+svg_+"</span><br>";
		$("#page_name_tray").prepend(togglepage_background);
	}

	$(".expanded_dummy_tray_forpreview").remove();
});


	</script>
@endsection