<!DOCTYPE html>
<html>
	<head>

		<!-- Page Title -->
		<title>Mi Huella por la Paz - Yucatán - Dashboard</title>
		<!-- Favicon -->
		<link rel="shortcut icon" href="favicon.ico?v3">

		<!-- Page Options -->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		
		<!-- Page Info -->		
		<meta name="description" content="">
		<meta name="author" content="">

	<!-- Custom fonts for this template-->
	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

	<!-- Custom styles for this template-->
	<link href="css/sb-admin-2.css" rel="stylesheet">
	<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

	<style>

		.sidebar-logo{
			height: 40px;
			margin-bottom: 5px;
		}
	
	</style>
	
		<!-- WordCloud -->		
		<script src="Clouds/js/wordcloud2.js"></script>
		<script src="Clouds/js/jquery-3.4.1.min.js"></script>
		<script src="Clouds/R/Data/Data.js?v<?php echo rand(11111,99999); ?>"></script>	

</head>

<body id="page-top">

	<!-- Page Wrapper -->
	<div id="wrapper">

		<!-- Sidebar -->
		<ul class="navbar-nav bg-gradient-primary-light sidebar sidebar-dark accordion" id="accordionSidebar">

			<!-- Sidebar - Brand -->
			<a class="sidebar-brand d-flex align-items-center justify-content-center bg-white">
				<div class="sidebar-brand-icon">
					<img src="img/logos/Mi_Huella_I_SL.png" width="90px" />
				</div>
				<div class="sidebar-brand-text mx-2">
					<img src="img/logos/Mi_Huella_T_SL.png" width="90px" />
				</div>
			</a>

			<!-- Divider -->
			<hr class="sidebar-divider my-0">

			<li class="nav-item active">
				<a class="nav-link nav-link-AC" href="#" onclick="UpdatePage('overview.php');">
					<i class="fas fa-fw fa-tachometer-alt"></i>
					<span>Proyect Overview</span></a>
			</li>
			
			<li class="nav-item active">
				<a class="nav-link nav-link-AC" href="#" onclick="UpdatePage('wordcloud.php');">
					<i class="fas fa-fw fa-cloud"></i>
					<span>Word Cloud</span></a>
			</li>
			
			<li class="nav-item">
				<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseReports" aria-expanded="true" aria-controls="collapseReports">
					<i class="fas fa-table"></i>
					<span>Reports</span></a>
				</a>
				<div id="collapseReports" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
					<div class="bg-white py-2 collapse-inner rounded">
						<h6 class="collapse-header">Participación por nivel:</h6>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Inicial');">Inicial</a>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Preescolar');">Preescolar</a>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Primaria');">Primaria</a>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Secundaria');">Secundaria</a>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Media');">Media</a>
						<a class="collapse-item" href="#" onclick="UpdatePage('tables.php?lvl=Superior');">Superior</a>																														
					</div>
				</div>
			</li>
			
						
			<!--li class="nav-item active">
				<a class="nav-link" href="#" onclick="UpdatePage('testing.php');">
					<i class="fas fa-skull-crossbones"></i>
					<span>Testing</span></a>
			</li-->
			

			<!-- Divider -->
			<hr class="sidebar-divider d-none d-md-block">

			<!-- Sidebar Toggler (Sidebar) -->
			<div class="text-center d-none d-md-inline">
				<button class="rounded-circle border-0" id="sidebarToggle"></button>
			</div>
			
	
				<!-- Client Logos -->
			
			<li class="nav-item">
				<a class="nav-link" style="text-align: center;">
					<span>Designed for:</span></a>
			</li>

			<a class="sidebar-brand d-flex align-items-center justify-content-center">
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/Yuc-2018-2024_I_SL.png"	/>
				</div>
				<div class="sidebar-brand-text mx-2">
					<img class="sidebar-logo" src="img/logos/Yuc-2018-2024_T_SL.png"	/>
				</div>
			</a>
			
			<a class="sidebar-brand d-flex align-items-center justify-content-center">
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/SIIES-2018-2024_T_SL.png"	/>
				</div>
			</a>
			
			<a class="sidebar-brand d-flex align-items-center justify-content-center" >
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/SEGEY-2018-2024_T_SL.png"	/>
				</div>
			</a>						

			<!-- Institutional Logos -->
			
			<li class="nav-item">
				<a class="nav-link" style="text-align: center;">
					<span>Powered by:</span></a>
			</li>

			<a class="sidebar-brand d-flex align-items-center justify-content-center" target="_blank" href="http://www.geoint.mx">
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/GeoInt_I_SL.png"	/>
				</div>
				<div class="sidebar-brand-text mx-2">
					<img class="sidebar-logo" src="img/logos/GeoInt_T_SL.png"	/>
				</div>
			</a>

			<a class="sidebar-brand d-flex align-items-center justify-content-center" target="_blank" href="http://www.centrogeo.org.mx">
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/CentroGeo_I_SL.png"	/>
				</div>
				<div class="sidebar-brand-text mx-2">
					<img class="sidebar-logo" src="img/logos/CentroGeo_T_SL.png"	/>
				</div>
			</a>
			
			<a class="sidebar-brand d-flex align-items-center justify-content-center" target="_blank" href="https://www.conacyt.gob.mx">
				<div class="sidebar-brand-icon">
					<img class="sidebar-logo" src="img/logos/CONACYT_I_SL.png"	/>
				</div>
				<div class="sidebar-brand-text mx-2">
					<img class="sidebar-logo" src="img/logos/CONACYT_T_SL.png"	/>
				</div>
			</a>


		</ul>
		<!-- End of Sidebar -->

		<!-- Content Wrapper -->
		<div id="content-wrapper" class="d-flex flex-column">

			<!-- Main Content -->
			<div id="content">

				<!-- Topbar -->
				<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

					<!-- Sidebar Toggle (Topbar) -->
					<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
						<i class="fa fa-bars"></i>
					</button>

					<h1 class="h3 mb-0 text-gray-800">Dashboard of: <a target="_blanl" href="http://www.huellaporlapaz.mx"<b>Huellaporlapaz.mx</b></a></h1>
					
					<!-- Topbar Search -->
					<!--form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
						<div class="input-group">
							<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
							<div class="input-group-append">
								<button class="btn btn-primary" type="button">
									<i class="fas fa-search fa-sm"></i>
								</button>
							</div>
						</div>
					</form--!>

					<!-- Topbar Navbar -->
					<ul class="navbar-nav ml-auto">

						<!-- Nav Item - Search Dropdown (Visible Only XS) -->
						<!--li class="nav-item dropdown no-arrow d-sm-none">
							<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fas fa-search fa-fw"></i>
							</a>
							<!-- Dropdown - Messages -->
							<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
								<form class="form-inline mr-auto w-100 navbar-search">
									<div class="input-group">
										<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
										<div class="input-group-append">
											<button class="btn btn-primary" type="button">
												<i class="fas fa-search fa-sm"></i>
											</button>
										</div>
									</div>
								</form>
							</div>
						</li-->

						<div class="topbar-divider d-none d-sm-block"></div>

						<!-- Nav Item - User Information -->
						<li class="nav-item dropdown no-arrow">
							<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
								<img class="img-profile rounded-circle" src="https://www.freeclipartnow.com/d/9911-6/AndyToolsHammerSpanner.jpg">
							</a>
							<!-- Dropdown - User Information -->
							<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
								<a class="dropdown-item" href="#">
									<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
									Profile
								</a>
								<a class="dropdown-item" href="#">
									<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
									Settings
								</a>
								<a class="dropdown-item" href="#">
									<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
									Activity Log
								</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
									<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
									Logout
								</a>
							</div>
						</li>

					</ul>

				</nav>
				<!-- End of Topbar -->

				<!-- Begin Page Content -->
				<div class="container-fluid" id="myMContainer">
					<div class="col-sm-12 mt-5">
						<div class="text-center">
							<i class="far fa-compass fa-spin fa-6x"></i>
							<p class="lead text-gray-800 mt-2 mb-3">Loading...</p>
							<p class="h5 text-gray-600 mb-0">Please wait while we retrieve the information</p>
						</div>
					</div>				
				</div>
				<!-- /.container-fluid -->

			</div>
			<!-- End of Main Content -->

			<!-- Footer -->
			<footer class="sticky-footer bg-white">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Copyright &copy; GeoInt - CentroGeo 2019</span>
					</div>
				</div>
			</footer>
			<!-- End of Footer -->

		</div>
		<!-- End of Content Wrapper -->

	</div>
	<!-- End of Page Wrapper -->

	<!-- Scroll to Top Button-->
	<a class="scroll-to-top rounded" href="#page-top">
		<i class="fas fa-angle-up"></i>
	</a>

	<!-- Logout Modal-->
	<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
					<button class="close" type="button" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
				<div class="modal-footer">
					<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
					<a class="btn btn-primary" href="login.html">Logout</a>
				</div>
			</div>
		</div>
	</div>
	
	
<!-- Modal -->
<div class="modal fade" id="maxModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="maxModalTitle">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" id="maxModalContent">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
	
	<!-- Modal creation -->
	<script>
		function showModal(title, contentID){

			document.getElementById("maxModalTitle").innerHTML = title;
			document.getElementById("maxModalContent").innerHTML = document.getElementById(contentID).innerHTML;
			$('#maxModal').modal('show')
		}
		
	</script>

	<!-- Bootstrap core JavaScript-->
	<script src="vendor/jquery/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

	<!-- Core plugin JavaScript-->
	<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

	<!-- Custom scripts for all pages-->
	<script src="js/sb-admin-2.min.js"></script>

	<!-- Page level plugins -->
	<script src="vendor/chart.js/Chart.min.js"></script>
	<script src="vendor/datatables/jquery.dataTables.min.js"></script>
	<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
	
	<!-- AMCharts -->
	<script src="https://www.amcharts.com/lib/4/core.js"></script>
	<script src="https://www.amcharts.com/lib/4/charts.js"></script>
	<script src="https://www.amcharts.com/lib/4/themes/dataviz.js"></script>
	<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
	<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
	
	<!-- AJAX -->
	<script>
	
		// Obtenemos el control del DIV principal...
		var DivMain = document.getElementById("myMContainer");
		// Mensaje de espera...
		var lMessage = "";
		
		// Loading message...
		function mLoading(){
			if (lMessage == "")
				lMessage = DivMain.innerHTML;
			else			
				DivMain.innerHTML = lMessage;
		}
		
		// Request de actualización dinámica (main)...
		var mainClient = new XMLHttpRequest();
		
		// Última página web...
		var lPage = "";

		// Actualiza div contenedor (main)...
		function UpdatePage(wPage, force=false){
			// If it is the same page, do nothing....
			if (lPage==wPage && !force) return false;
			// Save last page...
			lPage=wPage;
			// Loading message...
			mLoading();
			// Create a FormData instance...
			var upData = new FormData();
			// Set POST data...
			mainClient.open("post", wPage, true);
			// Send to server...
			mainClient.send(upData);
			// Terminamos...
			return true;
		}
					
		// Respuesta del cliente main...
		mainClient.onreadystatechange = function(){
			// Status OK...
			if (mainClient.readyState == 4 && mainClient.status == 200){
				// Check for errors on response...
				if (mainClient.responseText.indexOf('Error!') != -1) {
					// Present data to user...
					DivMain.innerHTML = mainClient.responseText;
				}else{
					// Present data to user...
					DivMain.innerHTML = mainClient.responseText;
					// Clear response...
					mainClient.responseText = "";
					//$('#accordionSidebar').addClass('toggled');
				}
				// Procesamos Scripts recibidos...
				processScripts(DivMain);
			}
		}
		
		// Process scripts on container div...
		function processScripts(pDIV){
			// Get the scripts...
			var sArr = pDIV.getElementsByTagName('script');
			// Process each...
			for (var n = 0; n < sArr.length; n++)
				eval(sArr[n].innerHTML);
		}
		
		
			// Establecemos la transparencia del fondo de las letras...
			var alphaBGWords = 50;
			
			// Creamos los elementos globales que vamos a ocupar...
			var maskCanvas = null;
			var img = new Image();
			var url;			

			// Convertimos el JSON de Data.js en una lista para WordCloud...
			var maxWords = 0; 	// Establecemos el número máximo de palabras, 0 para todas.
			list = [];			// Generamos una lista vacía...
			
			// Por cada elemento en db hacemos una entrada (palabra, frecuencia) en la lista...
			for (var i in db) {
				// Guardamos el elemento...
				list.push([db[i]["word"], db[i]["freq"]]);
				// Salimos cuando lleguemos al máximo permitido (0 para todas)...
				if (i == maxWords && maxWords != 0) break;
			}
					
		window.onload = (function(){readyState();});

        function readyState(){

            // Hide sidebar on small devices..
            if($(window).width() < 768){
                $("#accordionSidebar").addClass("toggled");
            }

            // Cargamos pagina inicial (general)...
            UpdatePage("overview.php");

        }

        // Auto close left menus when clicked (only on small devices)
        jQuery("a.collapse-item").click(function(){
            if($(window).width() < 768){
                $(this).parent().parent().removeClass("show");
                $("#accordionSidebar").addClass("toggled");
            }
        });


        // Auto close sidebar when clicked (only on small devices)
        jQuery("a.nav-link-AC").click(function(){
            if($(window).width() < 768 && !$(this).hasClass('collapsed')){
                $("#accordionSidebar").addClass("toggled");
            }
        });



	

		var CrateCloudChart;

	</script>	




		

</body>

</html>
