@extends('layouts.app')

@section('content')
	@foreach($accountid as $accountid)
		<p style="font-size:13px;"><span class='linkeffect {{$class_link}}' accountid='{{$accountid}}' {{$pagetype_wraps}}>Update {{$appsname}}</span></p>
	@endforeach

	@foreach($getlayout as $getlayout)
		<span style='display:;' class='formaddons' companyid='{{$getlayout->companyid}}' layoutid='{{$getlayout->layoutid}}'></span>
				<div style="">{!!$getlayout->layoutcode!!}</div>
	@endforeach
<script type="text/javascript">
	$( document ).ready(function() {
	// remove all side navs of the columns
	$(".deleteentire_page_component").parent().remove();

	// this is to remove update icons of file element editfile_
	$(".editfile_").remove();

	var editicon = "<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><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><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'></path></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>";

		// to remove the tools icon of the universal table's name
		$(".change_onlytable_name").remove();

		$(".sortable_tray2").remove();
		$(".editing_pagename_tagname").remove();
		$(".navsettings_trigger").remove();
		$(".place_actual_dummypage > div").attr("style", "");
		$(".place_actual_dummypage").next().attr("style", "");

		$(".place_actual_dummypage").prev().remove();
		$(".place_actual_dummypage").next().find("div").each(function (index) {
			theclass = $(this).attr("class");

			if(theclass == undefined){
				$(this).remove();
			}
		});

		// styletop-for-inputname
		$(".pageform").find("#styletop-for-inputname").each(function (index) {
			// $(this).remove();
			var theval = $(this).attr("value");
			$(this).after("<span>"+theval+"</span>");
			$(this).remove();
		});

		// formname
		$(".formname").each(function (index) {
			// $(this).remove();
			var theval = $(this).attr("value");
			$(this).after("<span>"+theval+"</span>");
			$(this).remove();
		});

		// remove backend functionalities of table
		$(".addnew_table_attribute").each(function (index) {
			$(this).parent().parent().parent().parent().parent().remove();
		});
		$(".tdwidthholder").remove();
		$(".table_header_tr_numb").remove();

		// remove the edit and delete tools of the table
		$(".tdclassholder > p").remove();

		// styling the columns that holds the forms 
		$(".theactivies").attr("style", "vertical-align:top;");
		// styling the tables 
		$(".table_wrapper_").attr("style", "background:white;padding:5px;border-radius:5px;margin-bottom:30px;");
		$(".onlytable_wrapper_").attr("style", "background:white;padding:5px;border-radius:5px;margin-bottom:30px;");

		// adjust bottom margin for the forms
		$("form").attr("style", "margin-bottom:10px;");

		// adjusting the button tag
		$("[type=submit]").removeAttr("class");
		$("[type=submit]").removeAttr("from");
		$("[type=submit]").removeAttr("onclick");

		$(".editdropdown").remove();

		// adjust the top input
		$(".tdclassholder > input").attr("style", "text-align:left;font-size:13px;");

		$(".tdclassholder").attr("style", "text-align:left;");

		// remove the sample rows on each form
		$(".table_header_tr").parent().parent().next().remove();
		// add the settings link to the navigation
		var accountid = $(".edit_account_profile_layout").attr("accountid"); // accountid
		// check the status of the account, if it is admin or regular user
	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/checkaccount_type_for_profilepage";
	    $.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 base_url = window.location.href;
			var check = base_url.includes("profile");

			if(check == true){
		        if(data == "user"){
				    if($('.dropdown_vertical_navigation')[0]){

				    }else{
						$(".uldummypage").append("<li class='linkeffect popsettings_registrationpage'>Settings</li>");
				    }
		        }else{
				    if($('.dropdown_vertical_navigation')[0]){

				    }else{
						$(".uldummypage").append("<li class='linkeffect redirect_userslist_page' profileid='"+accountid+"'>Users</li><li class='linkeffect popsettings_registrationpage'>Settings</li>");
				    }
		        }
			}else{
				// do nothing
			}
	      }
	    });

		// remove preloaders
		$(".loader").remove();

		// remove button settings icon
		$(".editbuttonstuffs").remove();
		$("[type=submit]").attr("style", "margin-top:10px;");

		$("form").attr("method", "post");
		$("form").attr("enctype", "multipart/form-data");

		// this is to create a tag that carries the formid
		$("form").each(function(){
			var theformid = $(this).attr("id");

			var companyid = $(".formaddons").attr("companyid");
			var layoutid = $(".formaddons").attr("layoutid");
			$(this).prepend("<input type='hidden' name='ownerformid' value='"+theformid+"'>");
			$(this).prepend("<input type='hidden' name='companyid' value='"+companyid+"'>");
			$(this).prepend("<input type='hidden' name='layoutid' value='"+layoutid+"'>");

		});

		$("[type=text]").each(function (index) {
			$(this).removeAttr("class");
			$(this).attr("_romans", "98765");
			$(this).removeAttr("id");
		});

		$(".tdclassholder > input").each(function (index) {
			var theinput = $(this);
			var input_unique_name = $(this).attr("input_unique_name");
			var theval = $(this).attr("value");

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

			// this is for the onlytable  && inputid == undefined  inputid='"+inputid+"'
			var extra_attr = "";
			if(formid != undefined){
				extra_attr += "formid='"+formid+"'";
			}

			if(inputid != undefined){
				extra_attr += "inputid='"+inputid+"'";
			}

			if(extra_attr == ''){
				$(this).after("<span class='"+input_unique_name+"'>"+theval+"</span>");
			}else{ //alert("karamo");
				$(this).after("<span class='"+input_unique_name+"' "+extra_attr+">"+theval+"</span>");
			}
			$(this).remove();
		});

		// remove preloaders
		$(".loader").remove();

		// loop through all the only onlytable components
		$(".onlytable_wrapper_").each(function (index) {
			var theformid = $(this).attr("theformid");

            var baseURL = $(".baseURL").attr("baseURL");
            var baseURL = baseURL+"/loadinfo_onlytable";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type:'POST',
                url:baseURL,
                data:{theformid:theformid},
                success:function(data){
                var data = data.trim();
                var data=$.parseJSON(data);
                // alert(data);
                if(data != ''){
                	// alert(data.length);
					for (i = 0; i < data.length; i++) {
						// alert(data[i]); remove each row
						var rowid = data[i];
					    var baseURL = $(".baseURL").attr("baseURL");
					    var baseURL = baseURL+"/loadonlytable_details";
					    $.ajaxSetup({
					        headers: {
					            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					        }
					    });
					    $.ajax({
					        type:'POST',
					        url:baseURL,
					        data:{rowid:rowid},
					        success:function(data){
					        var data = data.trim();
							var obtained_rowid = "";
								// alert(theformid);
								string_ = "";
								var data=$.parseJSON(data);
								jQuery.each(data, function(index, value){
									var i = 0;
									arrayofclasses = [];
									$("[theformid="+theformid+"]").find(".table_header_tr > td").each(function (index) {
										i++;
										var obtainedclass = $(this).attr("class");
										obtainedclass = obtainedclass.replace("tdclassholder", "");
										obtainedclass = obtainedclass.trim();

										if(obtainedclass != 'settings_table_td2'){
											var inputid = $("."+obtainedclass+" > span").attr("inputid");
											// var inputid = $("."+obtainedclass+" > span").text();
											arrayofclasses[arrayofclasses.length] = inputid;
										}
									});
									// alert(i);
									// alert(arrayofclasses);

									for (x = 0; x < arrayofclasses.length; x++) { 
										if(arrayofclasses[x] == index){
											// alert(index+" index "+value);
											// alert(arrayofclasses[x]+" arrayofclasses");
											string_ += "<td class='"+index+"'>"+value+"</td>";
										}
									}
								});

								// return;
								string_ += "<td class='update_tray' style='text-align:right;'><span class='linkeffect'>"+editicon+"</span> <span class='linkeffect'>"+deleteicon+"</span></td>";
								// alert("newrow "+string_);
								var unique = Math.random().toString(36).substring(7);
								$("[theformid="+theformid+"]").find(".table_header_tr").after("<tr class='"+unique+"' width='100%'>"+string_+"</tr>");

								// alert(arrayofclasses);
					      }
					    });
					}
                }
              }
            });
		});

		// this is if other pages is loaded
		if ($(".ororo")[0]){
			var url = $(location).attr('href'),
	    		parts = url.split("/"),
				link_ = parts[parts.length-1];

			var pagename = $("[link_="+link_+"]").text();
		    $(".ororo").find('.place_actual_dummypage').next().remove();
		    $(".header_pagename").after("<span style='font-size:19px;'>/"+pagename+"</span>")
		}
	});


	$(document).on("click", '.edit_account_profile_layout', function(event) {
        var APP_URL = {!! json_encode(url('/')) !!};
        var id = $(this).attr("accountid");
        // alert(APP_URL);
        window.location.replace(APP_URL+"/profile/edit/"+id);
	});

	// this is for the pop settings on the registration page popsettings
	$(document).on("click", '.popsettings_registrationpage', function(event) {
		var accountid = $(".edit_account_profile_layout").attr("accountid");
		widthbody = $("body").width();
		halfwidth = widthbody - 200;

		var innerhtml = "<table width='100%'><tr width='100%'><td width='20%' style='height:549px;border-right:1px solid rgba(128,128,128,0.4);vertical-align:top;'><div style='border-bottom:1px solid rgba(128,128,128,0.4);padding-left:10px;'>Settings</div><span class='linkeffect loadprimarydetails' accountid='"+accountid+"' style='padding-left:10px;'>Edit Primary Details</span><br><span class='linkeffect removesettings_tray' style='padding-left:10px;'>Exit</span></td> <td width='80%' class='tray_for_pasting' style='vertical-align:top;'><div class='tray_wallpaper' style='font-weight:bold;font-size:60px;color:white;text-align:center;text-shadow: 0px 0px 2px rgba(150, 150, 150, 1); text-shadow: 0px 0px 11px rgba(150, 150, 150, 1);width:100%;height:549px;'></div></td></tr></table>";

		$("body").prepend("<div class='settingstray' style='position:fixed;z-index:9;margin-top:70px;margin-left:100px;width:"+halfwidth+"px;height:550px;background:white;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);overflow-y:scroll;'>"+innerhtml+"</div>");
	});

	// this is 
	$(document).on("click", '.loadprimarydetails', function(event) {
		var accountid = $(this).attr("accountid");
		// alert(accountid);
		$(".tray_for_pasting").html("<div class='loader' style='margin-left:45%;margin-top:180px;'></div>");

	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadprimaryformdetails";
	    $.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();
	        $(".tray_for_pasting").html(data);
	        // $(".tray_for_pasting").attr("style", "vertical-align:top;padding:10px;text-align:center;");
	      }
	    });
	});

	// this is to remove the settings tray removesettings_tray
	$(document).on("click", '.removesettings_tray', function(event) {
		$(".settingstray").remove();
	});

	// this is the date of birth that should trigger the calendar dropdown_calendar
	$(document).on("click", '.dropdown_calendar', function(event) {
		$(".calendarwraps_").html("<div class='loader maintemplate-preloader' style='margin-left:100px; margin-right:100px; margin-top:30px;'></div>");
		var theval = $(this).val();
		var afterhis = $(this);
		var month = 3;
		var year = 2020;

	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadcalendartheme";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{month:month, year:year},
	        success:function(data){
	        var data = data.trim();
	        // alert(data);
	        $(afterhis).after("<div class='calendarwraps_' style='position:absolute;margin-top:10px;padding:5px;border-radius:5px;border:1px solid rgba(128,128,128,0.4);background:white;'>"+data+"</div>");
	      }
	    });
	});


	$(document).on("click", '.changedate', function(event) {
		$(".calendarwraps_").html("<div class='loader maintemplate-preloader' style='margin-left:100px; margin-right:100px; margin-top:30px;'></div>");
		var afterhis = $(this);
		var month = $(this).attr("month");
		var year = $(this).attr("year");

	    var baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/loadcalendartheme";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{month:month, year:year},
	        success:function(data){
	        var data = data.trim();
	        // alert(data);
	        $(".calendarwraps_").html(data);
	      }
	    });
	});

	// this is to select a particular date on the calendar selectday_date
	$(document).on("click", '.selectday_date', function(event) {
		var date = $(this).attr("date");
		var month = $(this).attr("month");
		var year = $(this).attr("year");

		if(date == 1 || date == 21 || date == 31){
			fulldate = date+"st "+month+", "+year;
		}else if(date == 2 || date == 22 || date == 32){
			fulldate = date+"nd "+month+", "+year;
		}else if(date == 3 || date == 23){
			fulldate = date+"rd "+month+", "+year;
		}else if(date == 4 || date == 5 || date == 6 || date == 7 || date == 8 || date == 9 || date == 10 || date == 11 || date == 12 || date == 13 || date == 14 || date == 15 || date == 16 || date == 17 || date == 18 || date == 19 || date == 20 || date == 24 || date == 25 || date == 26 || date == 27 || date == 28 || date == 29 || date == 30){
			fulldate = date+"th "+month+", "+year;
		}
		

		$(this).parent().parent().parent().parent().parent().parent().prev().val(fulldate);
		$(".calendarwraps_").remove();
	});

	// this is to open the links of each page 
	$(document).on("click", '.openlink_', function(event) {
		var link_ = $(this).attr("link_");
		// get the company id
		var companyid = $(".formaddons").attr("companyid");
		var base_url = window.location.origin;
		// this is to decide if its app or profile pages 
		var url_forchecking = window.location.href;
		var checkforapp = url_forchecking.includes("app");
		// alert(checkforapp);
		if(checkforapp == true){
			// check if it is other pages of the app
			var checkfor_otherpages = url_forchecking.includes("otherpages");
			// alert(checkfor_otherpages);
			if(checkfor_otherpages == true){
				var url = $(location).attr('href'),
				    parts = url.split("/"),
				    appid = parts[parts.length-2];

				window.location.replace(base_url+"/app/otherpages/"+companyid+"/"+appid+"/"+link_);
			}else{
				var url = $(location).attr('href'),
				    parts = url.split("/"),
				    appid = parts[parts.length-1];

				window.location.replace(base_url+"/app/otherpages/"+companyid+"/"+appid+"/"+link_);
			}
		}else{
			window.location.replace(base_url+"/profilepages/"+companyid+"/"+link_);
		}
	});


	// this is to open the links of each page 
	$(document).on("click", '.header_pagename', function(event) {
		var companyid = $(".edit_account_profile_layout").attr("accountid");
		var base_url = window.location.origin;
		// this is to decide if its app or profile pages 
		var url_forchecking = window.location.href;
		var checkforapp = url_forchecking.includes("app");
		// alert(checkforapp);
		// if the checkforapp is true then this is an app url and not profile page
		if(checkforapp == true){
			// check if it is other pages of the app
			var checkfor_otherpages = url_forchecking.includes("otherpages");
			// alert(checkfor_otherpages);
			if(checkfor_otherpages == true){
				// app header page
				var url = $(location).attr('href'),
				    parts = url.split("/"),
				    appid = parts[parts.length-2];
				    companyid = parts[parts.length-3];

				window.location.replace(base_url+"/"+companyid+"/app/"+appid);
			}else{
				// app header page
				var url = $(location).attr('href'),
				    parts = url.split("/"),
				    appid = parts[parts.length-1];
				    companyid = parts[parts.length-3];

				window.location.replace(base_url+"/"+companyid+"/app/"+appid);
			}
		}else{
			// profile header page
			window.location.replace(base_url+"/profile/"+companyid);
		}
	});


	// this is dropdown vertical navigation on the page dropdown_vertical_navigation
	$(document).on("click", '.dropdown_vertical_navigation', function(event) {
	    if($('.drpdowntray')[0]){
	    	$('.drpdowntray').remove();
	    	return;
	    }

	    var navlist = $(".dropdown_vertical_navigation").attr("array");

	    var navstring = "";
	    res = navlist.split(",");
		for (i = 0; i < res.length; i++) {
			var splitstring = res[i].split("propsdivider");
			navstring += "<span class='linkeffect openlink_' destination='"+splitstring[0]+"' theattr='otherpages' link_='"+splitstring[2]+"'>"+splitstring[1]+"</span><br>";
		}
		$(this).append("<li class='drpdowntray' style='position:absolute;background:white;text-align:left; border-radius:5px;padding:5px;width:200px;margin-top:30px; margin-left:-200px;font-size:13px;text-shadow:none;color:rgba(0,0,0,0.7);font-weight:normal;'>"+navstring+"</li>");
	});

	// this is to load the editing of the apps layout edit_apps_layout
	$(document).on("click", '.edit_apps_layout', function(event) {
        var APP_URL = {!! json_encode(url('/')) !!};
        var pagetype = $(this).attr("pagetype");
        var accountid = $(this).attr("accountid");

		var url = $(location).attr('href'),
		    parts = url.split("/"),
		    appid = parts[parts.length-1];

        // alert(APP_URL);
        window.location.replace(APP_URL+"/"+accountid+"/app/edit/"+appid);
	});


	$('form').on('submit', function(event){
		event.preventDefault();
		// create loader something
		$("body").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");

		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 formid = $(this).attr("id");
		var emptyval_checker = "";
		$("#"+formid).find("[_romans=98765]").each(function (index) {
			var value = $(this).val();
			if(value == ''){
				emptyval_checker = "123";
			}
		});

		if(emptyval_checker != ''){
			alert("Please fill every form field");
			return;
		}

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

		// insert custom inputid
		// check if rowid exists before generating
		var checkrowid = $("#"+formid).find("[name=rowid]").val();
		if(checkrowid == undefined){
			$(this).prepend("<input type='hidden' name='rowid' value='"+rowid+"'>");
		}

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
		$.ajax({
			url:"{{ route('submitforms') }}",
			method:"POST",
			data:new FormData(this),
			// dataType:'JSON',
			contentType: false,
			cache: false,
			processData: false,
            success:function(data){
            var data = data.trim();//alert(data);
	            data = data.split("~sepera~");

	            // return;
	        var tr_ = "";
	        var details = "";
	        var theformid = "";
	        var therowwid = "";
				for (i = 0; i < data.length; i++) {
					inner = data[i].split("~~~");
					if(inner[0] == 'layoutid'){
						details += "layoutid='"+inner[1]+"' ";
					}

					if(inner[0] == 'companyid'){
						details += "companyid='"+inner[1]+"' ";
					}

					if(inner[0] == 'ownerformid'){
						details += "ownerformid='"+inner[1]+"' ";
						theformid += inner[1];
					}

					if(inner[0] == 'rowid'){
						details += "rowid='"+inner[1]+"' ";
						therowwid += inner[1];
					}


					if(inner[0] != 'rowid' && inner[0] != 'layoutid' && inner[0] != 'companyid' && inner[0] != 'ownerformid'){
						if(inner[1] != undefined){
							tr_ += "<td inputname='"+inner[0]+"'>"+inner[1]+"</td>";
						}
					}
				}
				tr_ += "<td class='action_tray' style='text-align:right;'><span class='linkeffect'>"+edit_rowicon+"</span> <span class='linkeffect'>"+delete_rowicon+"</span></td>";
				// console.log(tr_);
				// the unique class for the row 
				var unique = Math.random().toString(36).substring(7);
					unique += Math.random().toString(36).substring(7);

				// before we insert new row into the dom we first loop to see if the row already exists in the dom 
				rowexist_check = "";
				existent_theid = "";
				$("[theformid="+theformid+"]").find("tr").each(function (index) {
					theid = $(this).attr("id");
					// alert(rowid+ " rowid");
					// alert(theid+ " theid");
					if(theid == therowwid){
						// alert("row exists");
						rowexist_check += "aa";
						existent_theid += theid;
					}else{
						// alert("nope exist");
					}
				});

				if(rowexist_check != ''){
					$("[theformid="+theformid+"]").find("#"+existent_theid).html(tr_);
				}else{
					$("[theformid="+theformid+"]").find(".table_header_tr").after("<tr width='100%' id='"+rowid+"' "+details+">"+tr_+"</tr>");
				}

				if(existent_theid != ''){
					rowid = existent_theid;
				}
				// the classes of each table attribute from the header row
				tdclasses = [];
				$("[theformid="+theformid+"]").find(".table_header_tr > td").each(function (index) {
					var spanclass = $(this).find("span").attr("class");
					
					if(spanclass != undefined){
						tdclasses[tdclasses.length] = spanclass;
					}
				});


				// if file exist in the form and does not exist in the row we add an empty column for it
				arrayfile = [];
				$("[id="+theformid+"]").find("input").each(function (index) {
					var thetype = $(this).attr("type");
					if(thetype == 'file'){
						arrayfile[arrayfile.length] = $(this).attr("name");
					}
				});

				// after inserting all files into array we loop through row to check if file is in the row, if not we append
				// alert(arrayfile);
				array_crosscheckrow = [];
				$("#"+rowid+" > td").each(function (index) {
					inputname = $(this).attr("inputname");
					array_crosscheckrow[array_crosscheckrow.length] = inputname;
				});
				
				// we loop to create array that contains only file class/name
				fileclassarray = [];
				for (i = 0; i < arrayfile.length; i++) {
					// var dfilearray_ = "";alert(arrayfile[i]);
					if(jQuery.inArray(arrayfile[i], array_crosscheckrow) !== -1){}else{
						// this is the image identity
						fileclassarray[fileclassarray.length] = arrayfile[i];
						$("#"+rowid).find(".action_tray").before("<td class='fileneeded' inputname='"+arrayfile[i]+"'>Unavailable</td>");
					}

				}

				// loop through all the array to reorder new row
				for (i = 0; i < tdclasses.length; i++) { //alert($("[inputname="+tdclasses[i]+"]").text());
					$("#"+rowid).find(".action_tray").before($("#"+rowid+" > [inputname="+tdclasses[i]+"]"));
				}
				// $("#"+rowid).remove();
				$("#"+theformid).find("[name=rowid]").remove();
				// empty all the inputs apart from the header details
				$("#"+theformid).find("input").each(function (index) {
					var name = $(this).attr("name");
					if(name != 'layoutid' && name != 'companyid' && name != 'ownerformid'){
						var thetype = $(this).attr("type")
						if(thetype != 'submit'){
							$(this).val("");
						}
					}
				});
				$(".loader").remove();
				// alert("rowid "+rowid);
				// loop through current row to get the file info
				$("#"+rowid+" > td").each(function (index) {
					thetext = $(this).text();//alert(thetext);

					if(thetext == 'Unavailable'){
						theclassid = $(this).attr("inputname");//alert(theclassid);
						var outsidedatal;
					    var baseURL = $(".baseURL").attr("baseURL");
					    var baseURL = baseURL+"/loadaltstream";
					    $.ajaxSetup({
					        headers: {
					            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					        }
					    });
					    $.ajax({
					    	'async': false,
					        type:'POST',
					        url:baseURL,
					        data:{rowid:rowid},
					        success:function(data){
					        var data = data.trim();
					            outsidedata = data;
					      }
					    });

			            outsidedata = outsidedata.split("~sepera~");
			            for (i = 0; i < outsidedata.length; i++) {
			            	// alert(outsidedata[i]);
			            	innerdata = outsidedata[i].split("~~~");
			            	for (j = 0; j < innerdata.length; j++) {
			            		if(innerdata[0] == theclassid){
			            			// alert(innerdata[0]+"--"+innerdata[1]);
			            			$("#"+rowid+" > [inputname="+innerdata[0]+"]").text(innerdata[1]);
			            		}
			            	}
			            }
					}
				});
			}
		})
	});

	// this is to delete the update row deleteupdate_row
	$(document).on("click", '.editrow', function(event) {
		// first remove every rowid that exists in the dom
		$("[name=rowid]").remove();
		// get the formid to loop through all the inputs and create and array
		var ownerformid = $(this).parent().parent().attr("ownerformid");
		// loop to get all the inputs into an array
		arrayofinput = [];
		$("#"+ownerformid).find("input").each(function (index) {
			var inputname = $(this).attr("name");
			var inputtype = $(this).attr("type");

			if(inputname == 'rowid' || inputname == 'layoutid' || inputname == 'companyid' || inputname == 'ownerformid'){}else{
				if(inputtype != 'submit'){
					arrayofinput[arrayofinput.length] = inputname;
				}
			}
		});
		
		var editdetails = $(this).attr("editdetails");
            editdetails = editdetails.split("~sepera~");

        var tr_ = "";
        var details = "";
        var theformid = "";
        var therowwid = "";
        var rowid = "";
		for (i = 0; i < editdetails.length; i++) {
			if(editdetails[i] != ''){
				// alert(editdetails[i]);
				inner = editdetails[i];
				theslit = inner.split("~~~");

				for (j = 0; j < theslit.length; j++) {
					if(theslit[0] == 'rowid'){
						var therowid = theslit[1];
					}

					if(theslit[0] == 'ownerformid'){
						var theformid = theslit[1];
					}

					rowid_check = $("#"+theformid).find("[name=rowid]").val();
					// alert(rowid_check);
					if(rowid_check == undefined){
						$("#"+theformid).prepend("<input type='hidden' name='rowid' value='"+therowid+"'>");
					}

					
					for (w = 0; w < arrayofinput.length; w++) { 
						if(theslit[0] == arrayofinput[w]){ 
							$("[name="+arrayofinput[w]+"]").val(theslit[1]);
						}
					}
				}
			}
		}
	});

	$( document ).ready(function() {
		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_").append("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:;margin-left:45%;margin-top:5px;'></div>");

		// table_wrapper_ loop through the tables and use the formid to obtain the contents of the form theformid
		$(".table_wrapper_").each(function (index) {
			var theformid = $(this).attr("theformid");

		    var baseURL = $(".baseURL").attr("baseURL");
		    var baseURL = baseURL+"/getrowid";
		    $.ajaxSetup({
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        }
		    });
		    $.ajax({
		        type:'POST',
		        url:baseURL,
		        data:{theformid:theformid},
		        success:function(data){
		        var data = data.trim();
		        // alert(data);
		        rowid_array = data.split("~~");
		        
		        for (i = 0; i < rowid_array.length; i++) {
		        	if(rowid_array[i] != ''){
						therowid = rowid_array[i];
						// alert(therowid);
					    var baseURL = $(".baseURL").attr("baseURL");
					    var baseURL = baseURL+"/loadspecificrow";
					    $.ajaxSetup({
					        headers: {
					            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					        }
					    });
					    $.ajax({
					        type:'POST',
					        url:baseURL,
					        data:{therowid:therowid},
					        success:function(data){
					        var data = data.trim();
					        	var editstring = data;
					            var data = data.trim();console.log(data);
						            data = data.split("~sepera~");

						        var tr_ = "";
						        var details = "";
						        var theformid = "";
						        var therowwid = "";
						        var rowid = "";
									for (i = 0; i < data.length; i++) {
										inner = data[i].split("~~~");
										if(inner[0] == 'layoutid'){
											details += "layoutid='"+inner[1]+"' ";
										}

										if(inner[0] == 'companyid'){
											details += "companyid='"+inner[1]+"' ";
										}

										if(inner[0] == 'ownerformid'){
											details += "ownerformid='"+inner[1]+"' ";
											theformid += inner[1];
										}

										if(inner[0] == 'rowid'){
											details += "rowid='"+inner[1]+"' ";
											therowwid += inner[1];
											rowid += inner[1];
										}


										if(inner[0] != 'rowid' && inner[0] != 'layoutid' && inner[0] != 'companyid' && inner[0] != 'ownerformid'){
											if(inner[1] != undefined){
												tr_ += "<td inputname='"+inner[0]+"'>"+inner[1]+"</td>";
											}
										}
									}
									tr_ += "<td class='action_tray' style='text-align:right;'><span class='linkeffect editrow' editdetails='"+editstring+"'>"+edit_rowicon+"</span> <span class='linkeffect'>"+delete_rowicon+"</span></td>";
									// console.log(tr_);
									// the unique class for the row 
									var unique = Math.random().toString(36).substring(7);
										unique += Math.random().toString(36).substring(7);

									$("[theformid="+theformid+"]").find(".table_header_tr").after("<tr width='100%' id='"+rowid+"' "+details+">"+tr_+"</tr>");

									// the classes of each table attribute from the header row
									tdclasses = [];
									$("[theformid="+theformid+"]").find(".table_header_tr > td").each(function (index) {
										var spanclass = $(this).find("span").attr("class");
										
										if(spanclass != undefined){
											tdclasses[tdclasses.length] = spanclass;
										}
									});


									// if file exist in the form and does not exist in the row we add an empty column for it
									arrayfile = [];
									$("[id="+theformid+"]").find("input").each(function (index) {
										var thetype = $(this).attr("type");
										if(thetype == 'file'){
											arrayfile[arrayfile.length] = $(this).attr("name");
										}
									});

									// after inserting all files into array we loop through row to check if file is in the row, if not we append
									// alert(arrayfile);
									array_crosscheckrow = [];
									$("#"+rowid+" > td").each(function (index) {
										inputname = $(this).attr("inputname");
										array_crosscheckrow[array_crosscheckrow.length] = inputname;
									});
									// alert(array_crosscheckrow);
									for (i = 0; i < arrayfile.length; i++) {
										if(jQuery.inArray(arrayfile[i], array_crosscheckrow) !== -1){}else{
											// alert(arrayfile[i]);
											$("#"+rowid).find(".action_tray").before("<td inputname='"+arrayfile[i]+"'>Unavailable</td>");
										}
									}

									// console.log(rowid+" rowid");
									// loop through all the array to reorder new row
									for (i = 0; i < tdclasses.length; i++) {
										$("#"+rowid).find(".action_tray").before($("#"+rowid+" > [inputname="+tdclasses[i]+"]"));
									}
									// $("#"+rowid).remove();
									$("#"+theformid).find("[name=rowid]").remove();
									// empty all the inputs apart from the header details
									$("#"+theformid).find("input").each(function (index) {
										var name = $(this).attr("name");
										if(name != 'layoutid' && name != 'companyid' && name != 'ownerformid'){
											var thetype = $(this).attr("type")
											if(thetype != 'submit'){
												$(this).val("");
											}
										}
									});
									$(".loader").remove();

									// loop through current row to get the file info
									$("#"+rowid+" > td").each(function (index) {
										thetext = $(this).text();//alert(thetext);

										if(thetext == 'Unavailable'){
											theclassid = $(this).attr("inputname");//alert(theclassid);
											var outsidedatal;
										    var baseURL = $(".baseURL").attr("baseURL");
										    var baseURL = baseURL+"/loadaltstream";
										    $.ajaxSetup({
										        headers: {
										            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
										        }
										    });
										    $.ajax({
										    	'async': false,
										        type:'POST',
										        url:baseURL,
										        data:{rowid:rowid},
										        success:function(data){
										        var data = data.trim();
										            outsidedata = data;
										      }
										    });

								            outsidedata = outsidedata.split("~sepera~");
								            for (i = 0; i < outsidedata.length; i++) {
								            	// alert(outsidedata[i]);
								            	innerdata = outsidedata[i].split("~~~");
								            	for (j = 0; j < innerdata.length; j++) {
								            		if(innerdata[0] == theclassid){
								            			// alert(innerdata[0]+"--"+innerdata[1]);
								            			$("#"+rowid+" > [inputname="+innerdata[0]+"]").text(innerdata[1]);
								            		}
								            	}
								            }
										}
									});

					        ///////
					      }
					    });
						// 
		        	}
		        }
		      }
		    });
		});
	});

	// this is to delete row from table and from the database deleteupdate_row
	$(document).on("click", '.deleteupdate_row', function(event) {
		$(".remove_delete_container").remove();
		var rowid = $(this).attr("rowid");

		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 </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='"+rowid+"' 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).after("<div class='remove_delete_container' style='text-align:left;position:absolute;width:200px;background:white;border:1px solid rgba(128,128,128,0.4);border-radius:5px;padding:5px;font-size:13px;'><table>"+form_string+"</table></div>");
	});

	// remove the delete container
	$(document).on("click", '.cancel_deleteoftabletd', function(event) {
		$(".remove_delete_container").remove();
	});

$(document).on("click", '.removetable_td_confirmation', function(event) {
	$("body").prepend("<div class='loader' style='z-index:99999999999999999999999999999999999999999; position:absolute;margin-left:49%;margin-top:40px;'></div>");
	var td_tobe_deleted = $(this).attr("td_tobe_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 baseURL = $(".baseURL").attr("baseURL");
	    var baseURL = baseURL+"/removerow_";
	    $.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });
	    $.ajax({
	        type:'POST',
	        url:baseURL,
	        data:{td_tobe_deleted:td_tobe_deleted},
	        success:function(data){
	        var data = data.trim();
			$("[rowid="+td_tobe_deleted+"]").parent().parent().remove();
			$(".loader").remove();
	      }
	    });
	}
});






	$( document ).ready(function() {
		setInterval(function(){
			// we now rearrange the rows of the onlytable to the right format 
			$(".onlytable_wrapper_").each(function (index) {
				// create the array to carry the input IDs
				arrayof = [];
				// get the inputid and populate the array
				$(this).find(".table_header_tr > td > span").each(function (index) {
					var inputid = $(this).attr("inputid");
					arrayof[arrayof.length] = inputid;
				});
				// console.log(arrayof);
				// loop through the other rows and reorder them
				$(this).find("table > tbody > tr").each(function (index) {
					var trclass = $(this).attr("class");
					if(trclass != 'table_header_tr'){
						for (y = 0; y < arrayof.length; y++) {
							// $(this).prepend($("."+arrayof[y]));
							$("."+trclass).find(".update_tray").before($("."+trclass+" > ."+arrayof[y]));
						}
					}
				});
			});
		}, 10000);
	});

// this is to loop the table_wrapper_ table that also has a form 
	$( document ).ready(function() {
		setInterval(function(){
			// remove unecessary blank rows
			$(".table_wrapper_").find(".update_tray").each(function (index) {
				$(this).remove();
			});
		}, 10);
	});

	// this is to redirect to the editing page of the app from the other pages of the app edit_app_layout
	$(document).on("click", '.edit_app_layout', function(event) {
		// alert("something nice");
		var origin = window.location.origin;
		var base_url = window.location.href;
		var url = $(location).attr('href'),
		    parts = url.split("/"),
		    appid = parts[parts.length-1];
		    companyid = parts[parts.length-4];

		if(companyid == 'otherpages'){
			companyid = parts[parts.length-3];
			appid = parts[parts.length-2];

			window.location.replace(origin+"/"+companyid+"/app/edit/"+appid);
		}else{
			window.location.replace(origin+"/"+companyid+"/app/edit/"+appid);
		}
	});
</script>
@endsection