{% extends '::base.html.twig' %}
{% block menuTop %}

{% endblock %}

{% block dashboard %}

	<style>


        .wrapper{
        	padding-bottom:50px;
        }
        .header{
        	background:#000000;
        	}
        .header .container {
        	padding-bottom:20px;
        	}
        .header .container h1{
        	color:#FFF;
        	line-height:50px;
        	margin-top:30px;
        	margin-bottom:0;
        }
        .header .container h3{
        	color:#E0E0E0;
        	font-size:16px;
        	margin-top:-5px;
        }
        .header .container h3 a{
        	color:#66aacc;
        }
        .header .container h3 a:hover{
        	color:#b3d5e6;
        }
        .top-menu{
        	position:absolute;
        	z-index:9999;
        }
        .top-menu .nav-list{
        	background:rgba(255, 255, 255, 0.8);
        	border:1px solid #CCC;
        	margin:20px;
        	position:fixed;right:0;
        }
        pre,.well{
        	background:#FFFFFF;
        }
        .syntax-container{
        	background:#FCFCFC;
        	-webkit-border-radius:7px;
        	-webkit-background-clip:padding-box;
        	-moz-border-radius:7px;
        	-moz-background-clip:padding;
        	border-radius:7px;
        	background-clip:padding-box;
        	border:1px solid #e3e3e3;
        	margin-bottom:30px;
        	padding-bottom:20px;
        }
        .isloading-wrapper.isloading-right{
        	margin-left:10px;
        }
        .isloading-overlay{
        	position:relative;
        	text-align:center;
        	}
    	.isloading-overlay .isloading-wrapper {
    		background:#FFFFFF;-webkit-border-radius:7px;
    		-webkit-background-clip:padding-box;
    		-moz-border-radius:7px;
    		-moz-background-clip:padding;
    		border-radius:7px;
    		background-clip:padding-box;
    		display:inline-block;
    		margin:0 auto;
    		padding:10px 20px;
    		top:10%;
    		z-index:9000;
    	}

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

	    .btn-ericsson {
	      color: #fff;
	      background-color: #00569C;
	      border-color: #3D59CA;
	    }
    </style>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script>

		$(document).ready(function(){
			getReporte();
		});

		function getReporte() {
			$('#versionUpdate').val("");
			$.isLoading("show");

			$("#formAdminVers .modalTable").empty();

			$.getJSON('{{ path('reportemshonduras_getVersion') }}',function(data){
				$("#formAdminVers .modalTable").html(createTableSimple(data.monitor));
			});

			$.isLoading("hide");
		}

		function updateVersion (idvers) {

			var datos = {id: idvers};

			$.ajax({
				type: 'post',
				url: '{{ path("reportemshonduras_modVers") }}',
				data: datos,
				success:function(data){
					swal('Good!', 'Your data has been updated successfully', 'success')
					
					getReporte();
				}
			});

		}

		function createTableSimple(monitor,total,nombreColTotal){

			var header = Object.keys(monitor[0]);

			var table = '<table id="tableSitios"  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

			'<tr class="btn-info">';

			for (var j = 1; j < header.length; j++) {

				table += "<th class='text-center'>" + header[j] + "</th>"
			}
				table += "<th class='text-center'>ACTION</th>"
			table += "</tr></thead>";

			for (var i = 0; i < monitor.length; i++) {
				table += "<tr>";
				for (var j = 1; j < header.length; j++) {

					table += "<td>" + monitor[i][header[j]] + "</td>";
				}table += '<td>'
					table += '<button id="'+ monitor[i][header[0]] +'" onclick="updateVersion(this.id)" type="button">Nueva Version</button>'
					/* table += '<button id="'+ monitor[i][header[0]] +'" onclick="deleteCost(this.id)" type="button">DELETE</button>' */
					table+='</td>'

				table += "</tr>";

				if(typeof total !== "undefined") {

					if (i == monitor.length - 1) {

						var headerTotal = Object.keys(total);
						table += '<tr><td>' + nombreColTotal +'</td>';

						for(var x=0; x<headerTotal.length;x++){
							table += '<td>';
							table += total[headerTotal[x]];

							table += '</td>';

						}
						table += '</tr>';
					}
				}
			}
			table += "</table>";

			return table;
		}

	</script>

	<div class="container-fluid">
		<div class="row">
			<div style="text-align: center" class="col-lg-2">
				<img id="logo" src="{{ asset('images/logoEricsson.png')  }}"  width="220" height="72">
			</div>             
			<div class="col-lg-8 col-md-12">
				<h1 class="text-center text-primary">
					<i class="fa fa-file-text-o"></i> ADMINISTRAR VERSION
				</h1>
			</div>
		</div>

		<form id="formAdminVers" name="formAdminVers" method="POST">
			<div class="container-fluid">
				<input type="hidden" value="" id="versionUpdate">
				<div class="row">
					<div class="col-lg-12" id="parametros">
					<div id="modalTable" class="modalTable"></div>
					</div>
				</div>
			</div>
		</form>

{% endblock %}