@extends('layouts.app')

@section('content')
<div style="background:white;width:99%;padding:10px;border-radius:5px;">

	<span class="linksdivider"></span> <span class="linkeffect createnewapp">Create App</span> <br>
	<!-- <div style="background:white;width:99%;padding:10px;border-radius:5px;"> -->
	    <table width="100%" class="table table-bordered table-striped table-hover">
	        <tr width='100%' class="trheader">
	            <th width='20%'>App Name</th>
	            <th width='80%'></th>
	        </tr>

	    @foreach($getapp as $getapp)
	        <tr width='100%' class="winch arrow-{{$getapp->id}}">
	            <td width='20%' class='linkeffect fetch_appnames load_app' appid='{{$getapp->layoutid}}' id='{{$getapp->layoutid}}'>{{$getapp->layoutid}}</td>
	            <td width='80%'><div class='loader' style='border-top: 16px solid #3498db;width: 20px;height: 20px;'></div></td>
	        </tr>
	    @endforeach
	    </table>
	<!-- </div> -->
</div>

<script>
	$( document ).ready(function() {
		$(".fetch_appnames").each(function (index) {
			var appid = $(this).attr("id");

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

		        var thetext = $(data).find(".header_pagename").text();
		        // console.log(thetext);
		        if(thetext != ''){
			        $("#"+appid).html(thetext);
		        }
		      }
		    });
		});
	});
	// this is to create the new app 
    $(document).on("click", '.createnewapp', 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 samptd = Math.random().toString(36).substring(7);
			samptd += Math.random().toString(36).substring(7);
			samptd += Math.random().toString(36).substring(7);

	    var tdstring = "<td width='20%' class='linkeffect load_app' appid='"+samptd+"'>"+samptd+"</td>";
	    	tdstring += "<td width='80%'>-</td>";
	    	// tdstring += "<td width='10%'><u class='linkeffect'>0</u></td>";
	    	// tdstring += "<td width='10%'><u class='linkeffect'>0</u></td>";
	    	// tdstring += "<td width='10%'><u class='linkeffect'>0</u></td>";
	    	// tdstring += "<td width='5%' style='text-align:right;'><span>"+edit_rowicon+"</span> <span class='linkeffect'>"+delete_rowicon+"</span></td>";
    	$(".trheader").after("<tr>"+tdstring+"</tr>");
    });

    // this is to load the app on the dom load_app
    $(document).on("click", '.load_app', function(event) {
		var url = $(location).attr('href'),
		    parts = url.split("/"),
		    accountid = parts[parts.length-1];

        var APP_URL = {!! json_encode(url('/')) !!};
        var appid = $(this).attr("appid");
        // alert(APP_URL);
        window.location.replace(APP_URL+"/"+accountid+"/app/"+appid);
    });
</script>
@endsection