<?php  
    //include("datos_sistema.php");
    include("datos_sistema.php");
    
    $sql_alcaldes = "SELECT * FROM candidatos WHERE cargo = 'ALCALDE'";
    $query_alcaldes = mysqli_query($con, $sql_alcaldes);

    
?>
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- loader-->
	  <link href="assets/css/pace.min.css" rel="stylesheet" />
	  <script src="assets/js/pace.min.js"></script>

    <!--plugins-->
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
    <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
    <link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
    <link href="assets/plugins/datatable/css/dataTables.bootstrap5.min.css" rel="stylesheet" />

    <!-- CSS Files -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-extended.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <!--Theme Styles-->
    <link href="assets/css/dark-theme.css" rel="stylesheet" />
    <link href="assets/css/semi-dark.css" rel="stylesheet" />
    <link href="assets/css/header-colors.css" rel="stylesheet" />
    <!-- CSS de SweetAlert2 PARA LA ALERTA ANIMADA CADA VEZ QUE SE REALIZA EDITAR, ELIMINAR ETC. -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
    <!-- JS de SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <title><?php echo $titulo_menu;  ?></title>
    
    <script>
$(document).ready(function() {
    // Destruir instancia DataTable existente
    // Inicializar DataTable con el nuevo idioma y botones
    $('#example2').dataTable( {
        "language": {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        paging: true,
        searching: true,
        dom: '<"top"B<"clear"><"spacer"l>f>rt<"bottom"ip><"clear">',  // Configura la estructura del layout de DataTables
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ],
        "order": [[3, 'desc']]  // Si la columna de votos es la quinta, el índice es 4
        
    } );
});
</script>
<style>
    .spacer {
        margin-top: 17px;  /* Ajusta el margen superior del selector de registros para crear el salto de línea */

    }
    .dataTables_length {
        margin-bottom: -30px;  /* Ajusta este valor para bajar el "Mostrar registros" */
    }
</style>
  </head>
  <body>
  	<style>
        /* Estilo para el contenedor del label y el input */
        .form-label-inside {
          position: relative;
        }

        /* Estilo para el label */
        .form-label-inside label {
          position: absolute;
          top: 0.3rem; /* Ajusta el espaciado vertical del label */
          left: 1rem; /* Ajusta el espaciado horizontal del label */
          pointer-events: none;
          color: #6c757d; /* Color del texto del label */
          transition: 0.2s; /* Transición para suavizar el efecto al hacer foco en el input */
        }

        /* Estilo para el input */
        .form-label-inside input {
          padding: 1.2rem 1rem 0.3rem; /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
        }
        /* Estilo para el input */
        .form-label-inside select {
           /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
          top: 0.3rem;
          left: 1rem;
          padding: 0.7rem 1rem; /* Ajusta el padding para alinear verticalmente el texto */
        }

        /* Estilo para el input cuando está enfocado o tiene contenido */
        .form-label-inside input:focus + label,
        .form-label-inside input:not(:placeholder-shown) + label {
          top: 0.15rem; /* Ajusta el espaciado vertical del label cuando está enfocado o tiene contenido */
          font-size: 0.90rem; /* Tamaño de fuente reducido para el label cuando está enfocado o tiene contenido */
        }
    </style>
    <style>
        /* Estilo para el contenedor de los divs */
        .div-container {
            margin-bottom: 2px;
        }

        /* Estilo para los divs que contienen los inputs */
        .input-div {
            margin-right: 1;
            margin-left: 1;
            margin-bottom: 2px;
        }
    </style>
    <script type="text/javascript">
        function confirmaregistro(){
            var respuesta = confirm("Seguro que desea eliminar el Nivel?");
            if (respuesta == true) {
                return true;
                toastr.success("Registro eliminado");
            }else{
                return false;                
            }
        }
    </script>

 <!--start wrapper-->
    <div class="wrapper">
       <!--start sidebar -->
       <?php include("menu_vector.php");  ?>

        <!-- start page content wrapper-->
        <div class="page-content-wrapper">
          <!-- start page content-->
         <div class="page-content">

          <!--start breadcrumb-->
          <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Resultados</div>
            <div class="ps-3">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0 align-items-center">
                  <li class="breadcrumb-item"><a href="dashboard.php"><ion-icon name="home-outline"></ion-icon></a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">Resultados de Votaciones</li>
                </ol>
              </nav>
            </div>
            
          </div>
          <!--end breadcrumb-->
				<script type="text/javascript">
        function formatCliente(cliente)
        {cliente.value=cliente.value.replace(/[.-]/g, '')
        .replace( /^(\d{1,2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4')}
    </script>
				<h6 class="mb-0 text-uppercase">Tabla de Alcaldes</h6>
				<hr/>
				<div class="card">
					<div class="card-body">
									
						<div class="table-responsive">
							<table id="example2" class="table table-striped table-bordered">
								<thead>
									<tr>										
                                            <th>CANDIDATO</th>
                                            <th>REGION</th>
                                            <th>COMUNA</th>
                                            <th>VOTOS</th>
                                            <th>PARTIDO</th>
                                            <th>PACTO</th>
									</tr>
								</thead>
								<tbody>
									<?php  
                                            while ($row = mysqli_fetch_assoc($query_alcaldes)) {
                                                $nombres_apellidos = $row['nombres']." ".$row['apellidos'];
                                                $query_votos = "SELECT SUM(n_votos) AS total_votos FROM apoderados WHERE candidato = '$nombres_apellidos' AND estado = 'Activo'";
                                                $result_votos = mysqli_query($con, $query_votos);
                                                $row_votos = mysqli_fetch_assoc($result_votos);
                                                $total_votos = isset($row_votos['total_votos']) && $row_votos['total_votos'] ? $row_votos['total_votos'] : 0;
                                        ?>
                                        <tr>                                            
                                            <td><?php echo $row['nombres']." ".$row['apellidos']; ?></td> 
                                            <td><?php echo $row['region'] ?></td>
                                            <td><?php echo $row['comuna'] ?></td>
                                            <td><strong style="color: #28a745; font-size: 1.3em;"><?php echo $total_votos;?></strong></td> 
                                            <td><?php echo $row['partido']; ?></td>
        <td><?php echo $row['pacto']; ?></td>      
                                        </tr>
                                        <?php  
                                        } mysqli_free_result($query_alcaldes);
                                        ?>
									
								</tbody>
								
							</table>
						</div>
					</div>
				</div>
             

          </div>
          <!-- end page content-->
         </div>

         <!--Start Back To Top Button-->
		     <a href="javaScript:;" class="back-to-top"><ion-icon name="arrow-up-outline"></ion-icon></a>
			 <!--End Back To Top Button-->
	  
			 


         <!--start overlay-->
          <div class="overlay nav-toggle-icon"></div>
         <!--end overlay-->

     </div>
  <!--end wrapper-->
  <style type="text/css">
     .icon-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre los íconos */
}

/* Estilos para los enlaces de los íconos */
.icon-link {
    display: inline-flex; /* Asegura que el enlace no ocupe todo el ancho */
    align-items: center;
    justify-content: center;
    width: 24px; /* Ancho fijo para cada ícono */
    height: 24px; /* Altura fija para cada ícono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    cursor: pointer; /* Muestra la manito solo sobre el ícono */
}

/* Estilo específico para el ícono de lápiz para moverlo a la derecha */
.icon-link.edit-icon {
    margin-left: 10px; /* Agrega espacio a la izquierda del ícono */
}

/* Estilo para los íconos */
.icon-link i {
    font-size: 22px; /* Ajusta el tamaño del ícono */
}
  </style>

  


    <!-- JS Files-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
    <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <!--plugins-->
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script src="assets/plugins/datatable/js/jquery.dataTables.min.js"></script>
    <script src="assets/plugins/datatable/js/dataTables.bootstrap5.min.js"></script>
    <!--<script src="assets/js/table-datatable.js"></script>-->

    <!-- Main JS-->
    <script src="assets/js/main.js"></script>


  </body>
</html>