<?php 
    include("datos_sistema.php");
    /*$footer_empresa = "GEOLAB CHILE";
    $titulo_pagina_empresa = "SISTEMA GEOLAB CHILE";
    $titulo_menu = "SISTEMA GEOLAB CHILE";
    session_start();
    $iduser = $_SESSION['id_usuarioo'];
    $sqluser = "SELECT * FROM usuario WHERE id_usuario='$iduser'";
    $queryuser = mysqli_query($con, $sqluser);
    $rowuser = mysqli_fetch_assoc($queryuser);
    $nombre_usuario = $rowuser['nombre'];*/
?>
<!--start sidebar -->
    <style type="text/css">
      .logo-icon {
        display: none; /* Oculto por defecto */
      }

      .logo-text {
        display: inline-block; /* Mostrado por defecto */
      }

      /* Cuando el menú está minimizado */
      .menu-collapsed .logo-icon {
        display: inline-block;
      }

      .menu-collapsed .logo-text {
        display: none;
      }
    </style>


    <script>
      function toggleMenu() {
        const logoImg = document.querySelector('.logo-img');
        const renovacionImg = document.querySelector('.renovacion-img');
        
        // Alternar visibilidad de las imágenes según el estado del menú
        logoImg.classList.toggle('hide-image');
        renovacionImg.classList.toggle('hide-image');
      }
    </script>
    
    <aside class="sidebar-wrapper" data-simplebar="true">
        <div class="sidebar-header">
          <div class="logo-container">
            <a href="dashboard.php">
              <img src="logo_renovacion_nacional.png" class="logo-img hide-image" style="width: 55px; height: 55px;">
            </a>
          </div>
          <div class="renovacion-img-container align-items-center justify-content-center">
            <a href="dashboard.php">
              <img src="renovacion_nacional.png" class="renovacion-img" style="width: 170px; height: 60px; margin-left: 26px;">
            </a>
          </div>
        </div>
      
        
      <!--navigation-->
      <ul class="metismenu" id="menu">
        <li>
          <a href="dashboard.php">
            <div class="parent-icon">
              <ion-icon name="home-outline"></ion-icon>
            </div>
            <div class="menu-title">Dashboard</div>
          </a>
        </li>
        
        <li class="menu-label">REGISTROS</li>    
        <li>
          <a href="tabla_locales.php">
            <div class="parent-icon">
              <ion-icon name="home-outline"></ion-icon>
            </div>
            <div class="menu-title">Locales</div>
          </a>
        </li>  
        <li class="menu-label">VOTACIONES</li>       
        <li>
          <a href="tabla_votaciones.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Votaciones por mesa</div>
          </a>
        </li>
        
        <li class="menu-label">CANDIDATOS</li>          
        <li>
          <a href="tabla_alcaldes.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Alcaldes</div>
          </a>
        </li>
        <li>
          <a href="tabla_gobernadores.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Gobernadores</div>
          </a>
        </li>    
        <li>
          <a href="tabla_consejeros.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Consejeros Regionales</div>
          </a>
        </li>
        <li>
          <a href="tabla_concejales.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Concejales</div>
          </a>
        </li>
        <li>
          <a href="tabla_por_locales.php">
            <div class="parent-icon">
              <ion-icon name="people-outline"></ion-icon>
            </div>
            <div class="menu-title">Votos por Local</div>
          </a>
        </li>
        <!--<li class="menu-label">REPORTES</li>
        <li>
          <a href="#">
            <div class="parent-icon">
              <ion-icon name="document-text-outline"></ion-icon>
            </div>
            <div class="menu-title">Reportes</div>
          </a>
        </li>-->
        
        
        
      </ul>
      <!--end navigation-->
    </aside>
    <!--end sidebar -->

    <!--start top header-->
    <header class="top-header">
      <nav class="navbar navbar-expand gap-3">
        <div class="toggle-icon">
          <ion-icon name="menu-outline" onclick="toggleMenu()"></ion-icon>
        </div>
        <!--<form class="searchbar">
          <div class="position-absolute top-50 translate-middle-y search-icon ms-3">
            <ion-icon name="search-outline"></ion-icon>
          </div>
          <input class="form-control" type="text" placeholder="Search for anything">
          <div class="position-absolute top-50 translate-middle-y search-close-icon">
            <ion-icon name="close-outline"></ion-icon>
          </div>
        </form>-->
        <div class="top-navbar-right ms-auto">

          <ul class="navbar-nav align-items-center">
            <!--<li class="nav-item">
              <a class="nav-link mobile-search-button" href="javascript:;">
                <div class="">
                  <ion-icon name="search-outline"></ion-icon>
                </div>
              </a>
            </li>-->
            <li class="nav-item">
              <a class="nav-link dark-mode-icon" href="javascript:;">
                <div class="mode-icon">
                  <ion-icon name="moon-outline"></ion-icon>
                </div>
              </a>
            </li>
            <!--<li class="nav-item dropdown dropdown-large dropdown-apps">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <div class="">
                  <ion-icon name="apps-outline"></ion-icon>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
                <div class="row row-cols-3 g-3 p-3">
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-purple text-white">
                      <ion-icon name="cart-outline"></ion-icon>
                    </div>
                    <div class="app-title">Orders</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-info text-white">
                      <ion-icon name="people-outline"></ion-icon>
                    </div>
                    <div class="app-title">Teams</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-success text-white">
                      <ion-icon name="shield-checkmark-outline"></ion-icon>
                    </div>
                    <div class="app-title">Tasks</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-danger text-white">
                      <ion-icon name="videocam-outline"></ion-icon>
                    </div>
                    <div class="app-title">Media</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-warning text-white">
                      <ion-icon name="file-tray-outline"></ion-icon>
                    </div>
                    <div class="app-title">Files</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-branding text-white">
                      <ion-icon name="notifications-outline"></ion-icon>
                    </div>
                    <div class="app-title">Alerts</div>
                  </div>
                </div>
              </div>
            </li>-->
            
            <li class="nav-item dropdown dropdown-large">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <div class="position-relative">
                  <span class="notify-badge" id="notification-count">0</span>
                  <ion-icon name="notifications-outline"></ion-icon>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end">
                <a href="javascript:;">
                  <div class="msg-header">
                    <p class="msg-header-title">Notificaciones</p>
                    <p class="msg-header-clear ms-auto">Archivar notificaciones</p>
                  </div>
                </a>
                <div class="header-notifications-list">
                  
                </div>
                <a href="javascript:;">
                  <div class="text-center msg-footer">Ver todas las notificaciones</div>
                </a>
              </div>
            </li>
            <script type="text/javascript">
                $(document).ready(function() {
                    // Cargar notificaciones cuando se abre el dropdown
                    $('.dropdown-toggle').on('click', function() {
                        $.ajax({
                            url: 'cargar_notificaciones.php', // Archivo PHP para cargar las notificaciones
                            type: 'GET',
                            dataType: 'json',
                            success: function(response) {
                                // Limpiar las notificaciones anteriores
                                $('.header-notifications-list').empty();

                                // Actualizar el contador de notificaciones no leídas
                                $('.notify-badge').text(response.unread_count);

                                // Agregar nuevas notificaciones
                                response.notifications.forEach(function(notification) {
                                    var item = `<a class="dropdown-item" href="${notification.url_destino}">
                                                    <div class="d-flex align-items-center">
                                                        <div class="notify text-${notification.icono_color}">
                                                            <ion-icon name="${notification.icono}"></ion-icon>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <h6 class="msg-name">${notification.titulo} 
                                                                <span class="msg-time float-end">${notification.tiempo}</span>
                                                            </h6>
                                                            <p class="msg-info">'Votación creada'</p>
                                                        </div>
                                                    </div>
                                                </a>`;
                                    $('.header-notifications-list').append(item);
                                });
                            }
                        });
                    });

                    // Marcar todas las notificaciones como leídas
                    $('.msg-header-clear').on('click', function() {
                        $.ajax({
                            url: 'marcar_todas_leidas.php', // Archivo PHP para marcar las notificaciones como leídas
                            type: 'POST',
                            success: function(response) {
                                if (response.success) {
                                    // Actualizar el contador de notificaciones no leídas a 0
                                    $('.notify-badge').text('0');
                                    // Limpiar las notificaciones no leídas
                                    $('.header-notifications-list').empty();
                                }
                            }
                        });
                    });
                });
                </script>
            <li class="nav-item dropdown dropdown-user-setting">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <div class="user-setting">
                  <img src="assets/images/avatars/06.png" class="user-img" alt="">
                </div>
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex flex-row align-items-center gap-2">
                      <img src="assets/images/avatars/06.png" alt="" class="rounded-circle" width="54" height="54">
                      <div class="">
                        <h6 class="mb-0 dropdown-user-name"><?php echo $nombre_apellido ?></h6>
                        <small class="mb-0 dropdown-user-designation text-secondary"><?php echo $rol_usuario ?></small>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li>
                  <a class="dropdown-item" href="perfil_usuario.php">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <ion-icon name="person-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Perfil</span></div>
                    </div>
                  </a>
                </li>
                <!--<li>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <ion-icon name="settings-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Setting</span></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <ion-icon name="speedometer-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Dashboard</span></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <ion-icon name="wallet-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Earnings</span></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="">
                        <ion-icon name="cloud-download-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Downloads</span></div>
                    </div>
                  </a>
                </li>-->
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li>
                  <a class="dropdown-item " data-bs-toggle="modal" data-bs-target="#logoutModal">
                    <div class="d-flex align-items-center">
                      <div>
                        <ion-icon name="log-out-outline"></ion-icon>
                      </div>
                      <div class="ms-3"><span>Salir</span></div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>

    </header>
    <style>
      .hide-image {
        display: none;
      }
      /* Centrar la imagen renovacion_nacional.png */
      .renovacion-img-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* Mostrar solo renovacion_nacional.png en móviles */
      @media (max-width: 768px) {
        .logo-img {
          display: none !important;
        }
        .renovacion-img {
          display: block !important;
        }
      }
    </style>
    <!-- Logout Modal-->
        <div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logoutModalLabel">¿Listo para salir?</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Seleccione "Salir" a continuación, si está listo para finalizar su sesión actual.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <a class="btn btn-primary" href="logout.php">Salir</a>
                    </div>
                </div>
            </div>
        </div>
    <!--end top header-->


