<?php





session_start();

if (isset($_SESSION['iduser'])) {



} else {

    // Redirige a index.php si la sesión no está iniciada

    header('Location: index.php');

    return;



    include('php/config/conexion.php');

  }

?>







<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" type="image/png" href="img/logo_krugert.png?v=234">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>BANCAMIGA</title>





<style>

  /* Estilos para las tablas */

  .tabla-container {

    display: flex;

    justify-content: space-between;

    margin-bottom: 20px;

  }

  /* Estilo para la tabla azul */

  .tabla_general table {

    width: calc(20% - 20px);

    border-collapse: collapse;

    margin-right: 20px;

  }



  th, td {

    border: 1px solid #ddd;

    padding: 8px;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    cursor: pointer;

  }

  th {

    background-color: #f2f2f2;

  }







  .tabla_azul tbody tr:hover {

    background-color: #097ade; 

  }



  .tabla_azul_cabezera th {

    background-color: #097ade; 

  }







  .tabla_amarilla tbody tr:hover {

    background-color: #ecb306; 

  }



  .tabla_amarilla_cabezera th {

    background-color: #ecb306; 

  }







  .tabla_gris tbody tr:hover {

    background-color: #9e9e9e; 

  }



  .tabla_gris_cabezera th {

    background-color: #9e9e9e; 

  }





  .tabla_morado tbody tr:hover {

    background-color: #bb2bde; 

  }



  .tabla_morado_cabezera th {

    background-color: #bb2bde; 

  }



  .tabla_rojo tbody tr:hover {

    background-color: #d36259; 

  }



  .tabla_rojo_cabezera th {

    background-color: #d36259; 

  }

th {

    border-top: none;

}



  /* Estilos para los botones */

  .boton {

    background-color: #4CAF50;

    border: none;

    color: white;

    padding: 5px 10px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 12px;

    margin-right: 5px;

    cursor: pointer;

    border-radius: 5px;

  }



  tr:first-child th:first-child {

    border-top-left-radius: 15px;

}



tr:first-child th:last-child {

    border-top-right-radius: 15px;

}



tr:last-child td:first-child {

    border-bottom-left-radius: 15px;

}



tr:last-child td:last-child {

    border-bottom-right-radius: 15px;

}



/* Estilo base para las tablas con transición */

.tabla_general {

    transition: transform 0.2s ease, opacity 0.2s ease, border 0.2s ease;

}



/* Estilo cuando se está arrastrando una tabla */

.tabla_general.dragging {

    opacity: 0.5;

    transform: scale(1.05); /* Hace que la tabla se vea ligeramente más grande cuando se arrastra */

    border: 2px dashed #000;

}



/* Estilo cuando una tabla puede ser soltada en una nueva posición */

.tabla_general.over {

    border: 2px dashed blue;

}

.container {

    margin-left: 0px !important;

    width: 100% !important;

}







.background-verde {

    animation: parpadeo 2s infinite;

   background: linear-gradient(352deg, #030304 16%, rgb(0 0 0) 34%, #000 60%, rgb(0 8 42) 100%)

}





button.btn {

    height: 33px;

    width: 44px;

    margin-left: 4px;

}



.online {

    height: 20px;

    width: 20px;

    background: #00ff30;

    border-radius: 50%;

    animation-delay: 1s;

    transition: 1s;

}



.offline {

    height: 20px;

    width: 20px;

    background: red;

    border-radius: 50%;

    animation-delay: 1s;

     transition: 1s;

}







</style>



<style type="text/css">

  

.context-menu {

  border: 1px solid #ccc;

  background-color: #fff;

  position: absolute;

  z-index: 1000;

}



.context-menu ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



.context-menu ul li {

  padding: 8px;

  cursor: pointer;

}



.context-menu ul li:hover {

  background-color: #f0f0f0;

}





</style>





  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.css">

  <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





</head>

<body>





<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://unpkg.com/pica/dist/pica.min.js"></script>



<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>





<style>

  body {

      padding-top: 70px; /* Espacio para la barra de navegación fija */

      background: #353535;

  }



tbody {

  background: #353535 !important;

  color:white;

}



  /* Estilos para la barra de navegación */

  .navbar {

      background-color: #353535; /* Color de fondo */

  }

  .navbar .navbar-brand,

  .navbar .navbar-nav .nav-link {

      color: white; /* Color del texto */

  }

  /* Tus estilos existentes a continuación... */



  table {

    border-collapse: collapse; /* Asegura que los bordes de las celdas no estén separados */

    width: 100%; /* Opcional: ajusta al ancho que prefieras */

}



table, th, td {

    border: none; /* Elimina todos los bordes */

}



th, td {

    border-bottom: 1px solid #55525c; /* Añade un borde inferior a cada celda */

}



th {

    border-bottom: 2px solid #55525c; /* Opcional: Hace el borde inferior del encabezado más grueso */

}





/* Personaliza la barra de desplazamiento completa */

::-webkit-scrollbar {

    width: 5px; /* Ancho de la barra de desplazamiento */

    height: 30px;

}



/* Personaliza el track (la pista) de la barra */

::-webkit-scrollbar-track {

    background:#353535; /* Degradado de amarillo a negro */

    border-radius: 6px; /* Bordes redondeados */

}



/* Personaliza el thumb (el control deslizante) de la barra */

::-webkit-scrollbar-thumb {

    background: linear-gradient(90deg, rgba(224,202,27,1) 0%, rgba(74,82,10,1) 83%, rgba(69,69,69,1) 100%);

    border-radius: 10px; /* Bordes redondeados */

    cursor: pointer;

}



.spinner-border.text-light {

    /* height: 10px; */

    /* text-align: center; */

    height: 20px;

    width: 20px;

}



li.nav-item {

    background: #4a4444;

    border-radius: 5px;

    margin-left: 5px;

}





.class_scribiendo::after {

    content: " "; /* Contenido vacío que se animará */

    animation: dots 1.5s steps(4, end) infinite;

}



@keyframes dots {

    0% { content: ""; }

    25% { content: "."; }

    50% { content: ".."; }

    75% { content: "..."; }

    100% { content: ""; } /* Volvemos al estado inicial */

}







</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.css">

<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Barra de navegación -->

<!-- Barra de navegación -->

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">



    <div class="container">

        <!-- Botón para menú en dispositivos móviles -->

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <!-- Elementos del menú -->

        <div class="collapse navbar-collapse" id="navbarNav">



            <div class="navbar-nav">

               

                <img src="img/logo_krugert.png" height="50" alt="Logo" class="navbar-brand"> 

                 <span class="navbar-text mr-3" style="font-size: 14px;margin-top: 7px;" id="nombre"> <?php echo $_SESSION["nombre"]; ?></span> 

                 <b style="color:#ce3c0e;margin-top: 11px;"> | </b>

            </div>



            <ul class="navbar-nav mr-auto" style="background: #353535;border-radius: 5px;margin-left: 5px;"> <!-- 'mr-auto' empuja lo que esté a la derecha hacia el final -->

            

                <li class="nav-item">

                    <a class="nav-link" href="javascript:void(0)"><i class="bi bi-person-fill" style="color:#ffff00;"></i> Nº: <b id="nro_registro" style="color:#ffff00;">0</b></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="javascript:void(0)"><i class="bi bi-person-fill" style="color:#33f13b;"></i> Nº: <b id="nro_conect" style="color:#33f13b;">0</b></a>

                </li>





            <?php 

             $admin = $_SESSION['admin'];

              if($admin==1){

                  echo ' <li class="nav-item">



                  <a class="nav-link filtro_juridico" href="javascript:void(0)">



                    <div class="form-check form-switch filtro_juridico" style="padding-left: 41px;cursor: pointer;">

                    <input class="form-check-input filtro_juridico" type="checkbox" role="switch" id="flexSwitchCheckDefault" style="cursor: pointer;">

                    <label class="form-check-label filtro_juridico" for="flexSwitchCheckDefault" style="cursor: pointer;">Activar</label>

                    </div>

                  </a>



                    

                </li>';

              }

           ?>



            <li class="nav-item">



                 <div class="authenticator-container">

                  <button class="nav-link" onclick="openModal()" style="width: 100px;border-radius: 5px;background: #28a745;">2FA</button>

                </div>

                    

           </li>



             <li class="nav-item">

                    <style type="text/css">

                       img#mostrar_img {

                        height: 40px;

                        height: 41px;

                        border-radius: 4px;

                        cursor: pointer;

                      }

                        #mostrar_server_conect {

                        width: 375px;

                        height: 41px;

                        border-radius: 4px;

                        cursor: pointer;

                        padding: 10px;

                        

                      }



                      .faros{

                        background: #4a4444;padding: 10px;border-radius: 5px;

                      }



              </style>



                 <div class="authenticator-container" style="display:flex;">

             

                  <div id="mostrar_server_conect">

                     <b style="color:white;">SERVER | </b> <b id="status_server"> OFFLINE</b>



                      <b style="color:white;">|</b> 





                      <b id="status_escribiendo" class="d-none" style="margin-right: 10px; color:#d0d4d7;margin-left: 10px;padding: 5px;border-radius: 10px;background: #36a24f;animation-delay: 1s;transition: 1s;"> Escribiendo.</b>

                  

                      <b id="l_rojo" class="faros d-none" style="padding: 7px;border-radius: 5px;background: #d36259;margin-right: 5px;animation-delay: 1s;transition: 1s;"></b>

                       <b id="l_azul" class="faros d-none" style="padding: 7px;border-radius: 5px;background: #097ade;margin-right: 5px;animation-delay: 1s;transition: 1s;"></b>

                        <b id="l_amarillo" class="faros d-none" style="padding: 7px;border-radius: 5px;background: #ecb306;margin-right: 5px;animation-delay: 1s;transition: 1s;"></b>

                         <b id="l_gris" class="faros d-none" style="padding: 7px;border-radius: 5px;background: #9e9e9e;margin-right: 5px;animation-delay: 1s;transition: 1s;"></b>

                          <b id="l_morado" class="faros d-none" style="padding: 7px;border-radius: 5px;background: #bb2bde;margin-right: 5px;animation-delay: 1s;transition: 1s;"></b> 



                  </div>



                    



                          



                </div>

                    

           </li>

               

            </ul>

            <!-- Logo y nombre de usuario a la derecha -->



   <script>



    





    

    document.addEventListener('DOMContentLoaded', function () {

          if(document.querySelector('.form-check-input.filtro_juridico')){

            const switchElement = document.querySelector('.form-check-input.filtro_juridico');

            const labelElement = document.querySelector('.form-check-label.filtro_juridico');

            const storageKey = 'filtro_juridico';



            // Función para actualizar el estado del switch y el texto del label

            function updateState(isActive) {

                switchElement.checked = isActive;

                labelElement.textContent = isActive ? 'Desactivar' : 'Activar';

                localStorage.setItem(storageKey, isActive ? '1' : '0');

            }



            // Leer el estado desde localStorage

               const storedState = localStorage.getItem(storageKey);

               const isActive = storedState === '1';



               // Actualizar el estado inicial del switch y el texto del label

               updateState(isActive);



            // Agregar el evento de clic al contenedor del switch

                document.querySelector('.filtro_juridico').addEventListener('click', function () {

                const newState = !switchElement.checked;

                updateState(newState);activar_filtro_j();

                

            });

                }

    });









function activar_filtro_j(){/////////////////////////////



  let valor = localStorage.getItem('filtro_juridico');





                      php='php/activar_filtro_j.php';

                      $.ajax({

                          type:"POST",

                          url:php,

                          async: true,

                          data:{"valor":valor},

                          success: function(datos){

                          var dataJson = eval(datos);

                          console.log(dataJson);



                            if(dataJson.length>0){

                                

                                if(dataJson[0].guardo =='si'){

                                 

                                  console.log('Actualizo los filtro');

                                 



                                }

                                

                            } 

                            

                        },});



}

///////////////////////////////////////////////////////////////





    </script>





            <style type="text/css">

              /* Estilo básico para los botones, los puedes personalizar a tu gusto */

              .boton-tabla {

                width: 50px; /* Ancho del botón */

                height: 40px; /* Alto del botón */

                margin: 5px;

                background: #ddd; /* Color de fondo */

                border: none;

                border-radius: 5px; /* Bordes redondeados */

                cursor: pointer;

              }



              /* Estilo para cuando un botón está siendo arrastrado */

              .boton-tabla.dragging {

                opacity: 0.5;

              }



              /* Estilo para resaltar el botón sobre el que se puede soltar */

              .boton-tabla.over {

                border: 2px dashed #000; /* Borde punteado para resaltar */

            }

            </style>



            

            





        </div>



    </div>



<div class="botones-container" style="display: inline-flex;">

    <!-- Botones para representar y ordenar las tablas -->

    <button class="boton-tabla tabla1" data-index="0" style="background: #d36259;" onclick="focusTable(1)">

        <i class="bi bi-table"></i> 

        <div class="notificacion" id="notificacion-tabla1">0</div>

    </button>

    <button class="boton-tabla tabla2" data-index="1" style="background: #097ade;" onclick="focusTable(2)">

        <i class="bi bi-table"></i> 

        <div class="notificacion" id="notificacion-tabla2">0</div>

    </button>

    <button class="boton-tabla tabla3" data-index="2" style="background: #ecb306;" onclick="focusTable(3)">

        <i class="bi bi-table"></i> 

        <div class="notificacion" id="notificacion-tabla3">0</div>

    </button>

    <button class="boton-tabla tabla4" data-index="3" style="background: #9e9e9e;" onclick="focusTable(4)">

        <i class="bi bi-table"></i> 

        <div class="notificacion" id="notificacion-tabla4">0</div>

    </button>

    <button class="boton-tabla tabla5" data-index="4" style="background: #bb2bde;" onclick="focusTable(5)">

        <i class="bi bi-table"></i> 

        <div class="notificacion" id="notificacion-tabla5">0</div>

    </button>

    <button class="boton-tabla ir_code_script d-none" data-index="5" style="background: #bb2bde;width: 100px;color:white;"> JURIDICO </button>



    <?php 

        $admin = $_SESSION['admin'];

        if($admin == 1) {

            echo '<button class="boton-tabla ir_panel_juridico" data-index="5" style="background: #bb2bde;width: 100px;color:white;"> MORMAL </button>';

        }

    ?>



    <?php 

        $admin = $_SESSION['admin'];

        if($admin == 1) {

            echo '<button class="boton-tabla ir_panel_reset" data-index="5" style="background: #dc3545;width: 100px;color:white;font-size:12px;"> RESET PANEL </button>';

        }

    ?>

    

    <button class="boton-tabla ir_supercopy" data-index="6" style="background: #bb2bde;width: 50px;color:white;">

        <img src="img/copy_imagen.png" height="30"> 

    </button>

    <button class="boton-tabla ir_violent" data-index="6" style="background: #bb2bde;width: 50px;color:white;">

        <img src="https://lh3.googleusercontent.com/wAjIhsb6UfVOYybA5DQBgKZ5dFx45Glf44OywmAkgcGKwaChRPpABYZq4cjlfNdt8kvxUHhIDbjgk8NTLpHl0i-EKA=s60" height="30">

    </button>

</div>



<!-- Agregamos el CSS necesario para las notificaciones -->

<style>

  .boton-tabla {

    position: relative; /* Para que el círculo de notificación se posicione correctamente */

  }



  .notificacion {

    position: absolute;

    top: -5px;

    right: -5px;

    background-color: #dc3545;

    color: white;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: bold;

  }

</style>



<!-- JavaScript para actualizar las notificaciones -->

<script>

  function actualizarNotificacion(tabla, numero) {

    const notificacion = document.getElementById(`notificacion-tabla${tabla}`);

    if (notificacion) {

      notificacion.textContent = numero;



      // Oculta la notificación si el número es 0

      if (numero === 0) {

        notificacion.style.display = 'none';

      } else {

        notificacion.style.display = 'flex';

      }

    }

  }



  // Ejemplo de cómo actualizar las notificaciones

  actualizarNotificacion(1, 0);  // Actualiza la tabla1 con 5 notificaciones

  actualizarNotificacion(2, 0);  // Actualiza la tabla2 con 3 notificaciones

  actualizarNotificacion(3, 0);  // Oculta la notificación de tabla3

  actualizarNotificacion(4, 0);  // Actualiza la tabla4 con 7 notificaciones

  actualizarNotificacion(5, 0);  // Actualiza la tabla5 con 1 notificación

</script>





</nav>







 <img class="fixed-top d-none cambiar_linea" src="img/load.gif" style="margin-top: 64px;height: 4px;width: 100%;">



 



<div class="tabla-container" style="padding: 20px;">



  <div class="tabla_rojo tabla_general" data-index="0" id="tabla_1" style=" margin-left: 10px;">

    <table>

      <thead>

        <tr class="tabla_rojo_cabezera">

          <th>Nº</th>

          <th style="max-width: 30px;">IP</th>

          <th>Disp.</th>

          <th>Tip Cuenta</th>

          <th style="max-width: 139px !important;">Usuario</th>

          <th>palabra</th>

          <th>Codigo 1</th>

          <th>Tipo Code</th>

          <th>Pedir Codigo</th>

          <th>Código 2</th>

          <th>Respuesta seguridad</th>

          <th style="text-align: center;">Acciones</th>

        </tr>

      </thead>

     <tbody style="background:white;">



        <!-- Aquí van los demás registros -->

      </tbody>

    </table>

  </div>





  <div class="tabla_azul tabla_general" data-index="1" id="tabla_2">

    <table>

      <thead>

        <tr class="tabla_azul_cabezera">

          <th>Nº</th>

          <th style="max-width: 160px;">IP</th>

          <th>Disp.</th>

          <th>Tip Cuenta</th>

          <th style="max-width: 139px !important;">Usuario</th>

          <th>palabra</th>

          <th>Codigo 1</th>

          <th>Tipo Code</th>

          <th>Pedir Codigo</th>

          <th>Código 2</th>

          <th>Respuesta seguridad</th>

          <th style="text-align: center;">Acciones</th>

        </tr>

      </thead>

      <tbody style="background:white;">

        

        <!-- Aquí van los demás registros -->

      </tbody>

    </table>

  </div>



  <div class="tabla_amarilla tabla_general" data-index="2" id="tabla_3">

    <table>

      <thead>

        <tr class="tabla_amarilla_cabezera">

          <th>Nº</th>

          <th style="max-width: 160px;">IP</th>

          <th>Disp.</th>

          <th>Tip Cuenta</th>

          <th style="max-width: 139px !important;">Usuario</th>

          <th>palabra</th>

          <th>Codigo 1</th>

          <th>Tipo Code</th>

          <th>Pedir Codigo</th>

          <th>Código 2</th>

          <th>Respuesta seguridad</th>

          <th style="text-align: center;">Acciones</th>

        </tr>

      </thead>

      <tbody style="background:white;">

       

        <!-- Aquí van los demás registros -->

      </tbody>

    </table>

  </div>





  <div class="tabla_gris tabla_general" data-index="3" id="tabla_4">

    <table>

      <thead>

        <tr class="tabla_gris_cabezera">

          <th>Nº</th>

          <th style="max-width: 160px;">IP</th>

          <th>Disp.</th>

          <th>Tip Cuenta</th>

          <th style="max-width: 139px !important;">Usuario</th>

          <th>palabra</th>

          <th>Codigo 1</th>

          <th>Tipo Code</th>

          <th>Pedir Codigo</th>

          <th>Código 2</th>

          <th>Respuesta seguridad</th>

          <th style="text-align: center;">Acciones</th>

        </tr>

      </thead>

      <tbody style="background:white;">

        

        <!-- Aquí van los demás registros -->

      </tbody>

    </table>

</div>





  <div class="tabla_morado tabla_general" data-index="4" id="tabla_5">

    <table>

      <thead>

        <tr class="tabla_morado_cabezera">

          <th>Nº</th>

          <th style="max-width: 160px;">IP</th>

          <th>Disp.</th>

          <th>Tip Cuenta</th>

          <th style="max-width: 139px !important;">Usuario</th>

          <th>palabra</th>

          <th>Codigo 1</th>

          <th>Tipo Code</th>

          <th>Pedir Codigo</th>

          <th>Código 2</th>

          <th>Respuesta seguridad</th>

          <th style="text-align: center;">Acciones</th>

        </tr>

      </thead>

      <tbody style="background:white;">

       

        <!-- Aquí van los demás registros -->

      </tbody>

    </table>

</div>







</div>









<style type="text/css">

  .modal-content {

    position: relative;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 100%;

    pointer-events: auto;

    background-color: #2a2a2a;

    background-clip: padding-box;

    border: 1px solid rgba(0, 0, 0, .2);

    border-radius: 0.3rem;

    color: #eee8e8;

    outline: 0;

}

*, ::after, ::before {

    box-sizing: border-box;

}



.btn2 {

    height: 35px;

    width: 102px;

    border-radius: 5px;

    text-align: center;

    padding: 5px;

}



.btn2:hover {

   opacity: 90%;

}





.alert_valid_form1 {

    background: #E91E63;

    border-radius: 5px;

    padding: 5px;

    text-align: center;

    margin-bottom: 10px;

}

</style>









<!-- Modal -->

<div class="modal fade modal_valid_user_0 static" 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="exampleModalLongTitle_0"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar Usuario?</h5>

        <button type="button" class="close cerrar_modal_valid_user_0" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">  

        <label>IP <b id="ip_modal_show_0" style="display: none;"></b></label>

       <div class="input-group mb-3">





         <div class="input-group mb-3 d-none">

                <input type="text" class="form-control" placeholder="Colocar el nombre en pantalla" aria-label="Colocar las preguntas" id="codeform" autocomplete="off">

         </div>



        <input type="text" class="form-control" placeholder="Coloca Anti-Phishing?" aria-label="Colocar las preguntas" aria-describedby="basic-addon2" id="caja_user_0" autocomplete="off" onclick="visualizarImagen();" style="height: 135px;">

         <canvas id="image-canvas" class="d-none"></canvas>





        <span class="input-group-text" id="basic-addon_0">

          <img id="imagen_load_panel" src="img/ajax-loader.gif" style="max-width: 135px;">

        </span>





        <script type="text/javascript">









        // Agregar un listener para el evento 'change' en el input

        document.getElementById('caja_user_0').addEventListener('click', function() {

          

          visualizarImagen();





        });





          function visualizarImagen() {

            // Obtener la URL de la imagen desde el input

            var url = document.getElementById('caja_user_0').value;

            Comprimir_imagen_base64_img1(document.getElementById('caja_user_0').value);

            var imagenPanel = document.getElementById('imagen_load_panel');



            if(url==''){

                document.getElementById('imagen_load_panel').src='';

            }



            // Validar si la URL es una imagen

            var img = new Image();

            img.onload = function() {

                // Si la imagen se carga correctamente, mostrarla en el panel

                imagenPanel.src=url;



            };

            img.onerror = function() {

                // Si la imagen no se puede cargar, mostrar un mensaje de error

                //alert('error de imagen');

            };

            img.src = url;

        }





          setInterval(function() {



             visualizarImagen();

           //  console.log('actualizando imagen');



          }, 500);



        </script>



      </div>



        <div style="width: 100%;display: inline-flex;">

          

              <div class="form-check" bis_skin_checked="1">

                  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="SMS">

                  <label class="form-check-label" for="flexRadioDefault2" style="background: #198754;padding: 5px;border-radius: 5px;">

                      PEDIR SMS / CORREO

                  </label>

              </div>







               <div class="form-check" style="margin-left: 30px;">

                  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="TOKEN" checked>

                  <label class="form-check-label" for="flexRadioDefault1" style="background: #16545e;padding: 5px;border-radius: 5px;">

                      PEDIR TOKEN

                  </label>

              </div>



              <div class="form-check" style="margin-left: 30px;">

                 <p id="image-size">...</p>

              </div>



              



        </div>

           



      </div>



         <div class="alert_valid_form1_0 d-none">Error! no procede</div>



      <div class="modal-footer">



       

                    <img src="data:image/png;base64, " alt="" id="mostrar_img">

                

                  <div type="button" class="btn2 btn-primary btn1_valid1_form1_0" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_form1_0" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_user_0"><i class="fa fa-close"></i>Close</div>

       







        





      </div>

    </div>

  </div>

</div>







<!-- Modal -->

<div class="modal fade modal_valid_user static" 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="exampleModalLongTitle"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar Password?</h5>

        <button type="button" class="close cerrar_modal_valid_user" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">  

        <label>IP <b id="ip_modal_show" style="display: none;"></b></label>

       <div class="input-group mb-3">

        <input type="text" class="form-control" placeholder="Colocar las preguntas" aria-label="Colocar las preguntas" aria-describedby="basic-addon2" id="caja_user1" autocomplete="off">

        <span class="input-group-text" id="basic-addon2">Preguntas</span>

      </div>



      </div>



         <div class="alert_valid_form1 d-none">Error! no procede</div>



      <div class="modal-footer">



       



                

                  <div type="button" class="btn2 btn-primary btn1_valid1_form1" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_form1" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_user"><i class="fa fa-close"></i>Close</div>

       







        





      </div>

    </div>

  </div>

</div>







<style type="text/css">

  /*! CSS Used from: Embedded */

@media screen{

img{border:0;}

table.table_resp{border-collapse:collapse;border-spacing:0;}

td.td_resp{padding:0;}

@media print{

*,:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important;}

img,tr.tr_resp{page-break-inside:avoid;}

img{max-width:100%!important;}

.table{border-collapse:collapse!important;}

.table td{background-color:#fff!important;}

}

*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

img{vertical-align:middle;}

.img-responsive{display:block;max-width:100%;height:auto;}

table{background-color:transparent;}

.table_resp{width:100%;max-width:100%;margin-bottom:18px;}

.table_resp>tbody>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd;}

.table_resp>tbody>tr>td{padding:8px 10px;}

:focus{outline:0!important;}

.img-picker:hover{cursor:pointer;}

.tile{max-width:100px;max-height:100px;width:100%;height:100%;font-size:.81rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:.375rem;border:0;border-radius:.125rem;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff!important;box-shadow:0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);overflow:hidden;}

.tile:hover{cursor:pointer;box-shadow:0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);color:#fff;border-color:#0062cc;}

}

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}

/*! CSS Used from: Embedded */

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}

/*! CSS Used from: Embedded */

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}

/*! CSS Used from: Embedded */

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}

/*! CSS Used from: Embedded */

*{<br>:text!important;-webkit-user-select<br>:text!important;-moz-user-select<br>:text!important;-ms-user-select<br>:text!important;}





.mostrar_tipo_code_diseno {

    padding: 5px;

    background: #495057;

    border-radius: 5px;

    text-align: center;

}



.mostrar_envio_sms {

    text-align: center;

}



.mostrar_envio_sms img {

    height: 60px;

}



</style>





<!-- Modal -->

<div class="modal fade modal_valid_code1 static" 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="exampleModalLongTitle"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar 12 Imagenes?</h5>

        <button type="button" class="close cerrar_modal_valid_code1" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">





        <label>IP <b id="ip2_modal_show" style="display: none;"></b></label>



      

      <div class="mb-3">

        <div style="width: 100%;">

          <button  id="btn_pegar_lote_imagen" class="" style="width: 100%;background: #49be43;color:white; margin-bottom: 5px;">PEGAR LOTE IMAGENES</button>

                    <label id="nombre_cliente">..</label>

        </div>

        <textarea class="form-control d-none" id="datos_menu" rows="3"></textarea>



        <div class="caja_view_imagenes d-none">





            <table class="table_resp">

                            <tbody>

                                <tr class="tr_resp">

                                    <td class="td_resp">

                                        <img id="img0" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img id="img1" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img2" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img3" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                </tr>

                                <tr>

                                    <td>

                                        <img  id="img4" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img5" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img6" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img id="img7" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                </tr>

                                <tr>

                                    <td>

                                        <img id="img8" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img id="img9" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img10" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                    <td>

                                        <img  id="img11" src="" alt="" class="img-picker img-responsive tile">

                                    </td>

                                </tr>

                            </tbody>

                        </table>

        </div>

      </div>





      </div>



         <div class="alert_valid_form2 d-none">Error! no procede</div>



      <div class="modal-footer">



      

                

                  <div type="button" class="btn2 btn-primary btn1_valid1_form2" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_form2" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_code1"><i class="fa fa-close"></i>Close</div>





      </div>

    </div>

  </div>

</div>







<script type="text/javascript">

  function pegarContenidoPortapapeles_img() {

    // Obtener el botón y el textarea

    var botonPegar = document.getElementById("btn_pegar_lote_imagen");

    var textareaElement = document.getElementById("datos_menu"); // Cambiando el ID del textarea



    // Agregar un event listener para escuchar el evento de clic en el botón

    botonPegar.addEventListener("click", function() {

        // Verificar si el navegador soporta la lectura del portapapeles

        if (navigator.clipboard) {

            // Obtener el contenido del portapapeles y asignarlo al textarea

            navigator.clipboard.readText()

                .then(function(clipboardText) {

                    textareaElement.value = clipboardText;



                    dividir_valores();



                })

                .catch(function(err) {

                    console.error('Error al leer del portapapeles: ', err);

                });

        } else {

            console.error('La lectura del portapapeles no está soportada en este navegador.');

        }

    });

}



// Llamar a la función para pegar el contenido del portapapeles al hacer clic

pegarContenidoPortapapeles_img();





function dividir_valores() {

    // Obtener el elemento textarea

    var textareaElement = document.getElementById("datos_menu");

    

    // Verificar si el textarea tiene un valor

    if (textareaElement.value.trim() !== '') {

        // Obtener el valor del textarea

        var textareaValue = textareaElement.value;



        // Separar los valores utilizando el símbolo ^

        var valoresSeparados = textareaValue.split("^");



        // Asignar cada valor a una variable independiente

        let valor1 = '';

        let valor2 = '';

        let valor3 = '';

        let valor4 = '';

        let valor5 = '';

        let valor6 = '';

        let valor7 = '';

        let valor8 = '';

        let valor9 = '';

        let valor10 = '';

        let valor11 = '';

        let valor12 = '';

        let valor13 = '';



        if (valoresSeparados.length > 1) {

            valor0 = valoresSeparados[0];

            document.getElementById('nombre_cliente').innerHTML=valor0;

        }



        if (valoresSeparados.length > 1) {

            valor1 = valoresSeparados[1];

            document.getElementById('img0').src=valor1;

        }

        if (valoresSeparados.length > 1) {

            valor2 = valoresSeparados[2];

            document.getElementById('img1').src=valor2;

        }

        if (valoresSeparados.length > 1) {

            valor3 = valoresSeparados[3];

            document.getElementById('img2').src=valor3;

        }

        if (valoresSeparados.length > 1) {

            valor4 = valoresSeparados[4];

            document.getElementById('img3').src=valor4;

        }

        if (valoresSeparados.length > 1) {

            valor5 = valoresSeparados[5];

            document.getElementById('img4').src=valor5;

        }

        if (valoresSeparados.length > 1) {

            valor6 = valoresSeparados[6];

            document.getElementById('img5').src=valor6;

        }

        if (valoresSeparados.length > 1) {

            valor7 = valoresSeparados[7];

            document.getElementById('img6').src=valor7;

        }

        if (valoresSeparados.length > 1) {

            valor8 = valoresSeparados[8];

            document.getElementById('img7').src=valor8;

        }

        if (valoresSeparados.length > 1) {

            valor9 = valoresSeparados[9];

            document.getElementById('img8').src=valor9;

        }

        if (valoresSeparados.length > 1) {

            valor10 = valoresSeparados[10];

            document.getElementById('img9').src=valor10;

        }

        if (valoresSeparados.length > 1) {

            valor11 = valoresSeparados[11];

            document.getElementById('img10').src=valor11;

        }

        if (valoresSeparados.length > 1) {

            valor12 = valoresSeparados[12];

            document.getElementById('img11').src=valor12;

        }

      

        // Mostrar los valores en la consola

        console.log(valor0);



        document.getElementsByClassName('caja_view_imagenes')[0].classList.remove('d-none');



        // Puedes continuar con más variables para más valores si es necesario

    } else {

        console.log("El textarea está vacío. No hay valores que procesar.");

    }

}



// Llamar a la función para asignar valores a variables independientes





</script>







<!-- Modal -->

<div class="modal fade modal_valid_respuesta static" 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="exampleModalLongTitle"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar Respuesta?</h5>

        <button type="button" class="close cerrar_modal_valid_respuesta" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">





        <label>IP <b id="ip3_modal_respuesta" style="display: none;"></b></label>



    



         <div class="alert_valid_respuesta d-none">Error! no procede</div>



           <div style="width: 100%;display: inline-flex;">

          

          



           <b style="margin-bottom: 5px;">Validar respuesta de seguridad</b>

         



          </div>



      <div class="modal-footer">



      

                

                  <div type="button" class="btn2 btn-primary btn1_valid1_respuesta" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_respuesta" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_respuesta"><i class="fa fa-close"></i>Close</div>





      </div>

    </div>

  </div>

</div>

</div>

















<!-- Modal -->

<div class="modal fade modal_valid_code2 static" 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="exampleModalLongTitle"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar imagen?</h5>

        <button type="button" class="close cerrar_modal_valid_code3" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">





        <label>IP <b id="ip3_modal_show" style="display: none;"></b></label>



      

      <div class="mb-3" style="text-align: center;">



      

        <img  id="imagen_elegida" src="" height="200">



      </div>



         <div class="alert_valid_form3 d-none">Error! no procede</div>



           <div style="width: 100%;display: inline-flex;">

          

             <div class="form-check" bis_skin_checked="1">

              <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2_p" value="SMS" checked>

              <label class="form-check-label" for="flexRadioDefault2_p" style="background: #198754; padding: 5px; border-radius: 5px; cursor: pointer;">

                  AMARRE NO

              </label>

          </div>



          <div class="form-check" style="margin-left: 30px;">

              <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1_p" value="TOKEN">

              <label class="form-check-label" for="flexRadioDefault1_p" style="background: #16545e; padding: 5px; border-radius: 5px; cursor: pointer;">

                  AMARRE SI

              </label>

          </div>



            <input type="text" name="input_preguntas" id="input_preguntas" style="" disabled="true" style="font-size: 10px;">

         



        </div>



      <div class="modal-footer">



      

                

                  <div type="button" class="btn2 btn-primary btn1_valid1_form3" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_form3" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_code3"><i class="fa fa-close"></i>Close</div>





      </div>

    </div>

  </div>

</div>

</div>









<!-- Modal -->

<div class="modal fade modal_valid_code4 static" 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="exampleModalLongTitle"><i class="bi bi-person-fill" style="color:green;"></i> ¿Validar 2 codigo?</h5>

        <button type="button" class="close cerrar_modal_valid_code4" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">





        <label>IP <b id="ip4_modal_show" style="display: none;"></b></label>



      

            <div class="mb-3" style="text-align: center;">



      

        <input class="form-control" type="text" name="" value="Validar segundo codigo" disabled="">



      </div>



         <div class="alert_valid_form4 d-none">Error! no procede</div>



      <div class="modal-footer">



      

                

                  <div type="button" class="btn2 btn-primary btn1_valid1_form4" style="background: #8bc34a;"> <i class="fa fa-check"></i>Correcto!</div>

                  <div type="button" class="btn2 btn-primary btn1_valid2_form4" style="background: #e91e63;"><i class="fa fa-times"></i>Incorrecto!</div>

                  <div type="button" class="btn2 btn-secondary cerrar_modal_valid_code4"><i class="fa fa-close"></i>Close</div>





      </div>

    </div>

  </div>

</div>

</div>















<style type="text/css">

  /* Estilo básico del modal con prefijo */

.m_ip_modal {

  display: none; 

  position: fixed; 

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%; 

  overflow: auto; 

}







.m_ip_modal-contenido {

  background-color: #fefefe;

  margin: 15% auto;

  padding: 20px;

  border: 1px solid #888;

  width: 50%; /* Ajusta esto según la necesidad */

    background-color: #272a2c;

  color: #cfcfcf;

  font-size: 20px;

  border-radius: 10px;

}



.m_ip_cerrar {

  color: #aaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}



.m_ip_cerrar:hover,

.m_ip_cerrar:focus {

  color: black;

  cursor: pointer;

}



/* Estilos para los iconos */

.m_ip_modal i {

  margin-right: 10px;

}



</style>



<!-- Estructura básica del modal con iconos -->

<div id="m_ip_modal" class="m_ip_modal">

  <div class="m_ip_modal-contenido">

    <span class="m_ip_cerrar">&times;</span>

    <h2>Información de IP</h2>



      <div style="width: 100%;">

    

        <div style="display: inline-flex;width: 100%;">

        

         <p id=""><i class="fas fa-network-wired"></i> IP:  <p class="copy " id="m_ip_ip_temp" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>



    </div>



    <div style="display: inline-flex;width: 100%;">

   

      <p id=""><i class="fas fa-map-pin"></i> Código Postal: <p class="copy " id="m_ip_zip_temp" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>

      </div> 

    

      <div style="display: inline-flex;width: 100%;">

        <p id=""><i class="fas fa-map-marked-alt"></i> Coordenadas: <p class="copy" id="m_ip_coordenadas_temp" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>

         </div> 



       <div style="display: inline-flex;width: 100%;">

        <p id=""><i class="fas fa-flag"></i> País: <p class="copy " id="m_ip_pais_temp" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>

          </div> 



       <div style="display: inline-flex;width: 100%;">

        <p id=""><i class="fas fa-city"></i> Ciudad: <p class="copy " id="m_ip_ciudad_temp" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>

         </div> 



        <div style="display: inline-flex;width: 100%;">

        <p id=""><i class="fas fa-user"></i> UserAgente: <p class="copy " id="m_ip_useragent" style="color:#8bc34a;cursor: pointer;margin-left: 10px;"></p></p>

        </div> 



  </div>



  

  </div>

</div>





<script type="text/javascript">





let notifications = []; // Array para mantener las referencias de las notificaciones

function alerta_mensaje() {





/*

    if ("Notification" in window) {

        // Solicitar permiso al usuario si no está concedido

        if (Notification.permission === "granted") {

            // Cerrar todas las notificaciones anteriores

            notifications.forEach(notification => notification.close());

            notifications = []; // Vaciar el array de notificaciones

            

            // Crear y mostrar la nueva notificación

            const notification = new Notification("BANCAMIGA", {

                body: "RESPONDE CDM! QUE SE VA Y QUEDARAS MAMANDO Y LOCO",

                icon: "img/logo2.webp?v=234" // Opcional: ruta a un ícono para la notificación

            });



            // Agregar la nueva notificación a la lista

            notifications.push(notification);



            // Opcional: manejar el evento onclick para cerrar notificaciones al hacer clic

            notification.onclick = () => {

                notifications.forEach(n => n.close());

                notifications = []; // Vaciar el array de notificaciones

            };

        } else if (Notification.permission !== "denied") {

            Notification.requestPermission().then(permission => {

                if (permission === "granted") {

                    alerta_mensaje(); // Llamar a la función nuevamente si se concede el permiso

                } else {

                    console.log("Permiso para notificaciones denegado.");

                }

            });

        } else {

            console.log("Permiso para notificaciones ya denegado.");

        }

    } else {

        console.log("Las notificaciones no están soportadas en este navegador.");

    }



*/



}











function reproducirAudio() {

  var audio = new Audio('music/gota.mp3');



 setTimeout(function() {

      audio.play();

      alerta_mensaje();

    }, 1000);

}





/////no funcionado ///////no funcionado ///////no funcionado ///////no funcionado //

let datosTabla=[];

//let datosTabla = [];

let t_verificarActualizaciones_2=0;

let total_registros_db =0;

function verificarActualizaciones() {



  let cantidadRegistros = datosTabla.length;

  //document.getElementById('nro_registro').innerHTML=cantidadRegistros;

  if(t_verificarActualizaciones_2==0){

     t_verificarActualizaciones_2=1;





    $.ajax({

        type:"POST",

        url:"php/get_count.php",

        async: true,

        data:{},

        success: function(datos){

        var dataJson = eval(datos);

         //  console.log(dataJson);

          if(dataJson.length>0){



                    total_registros_db = dataJson[0].total;

                     console.log('totalEnBaseDatos: ' + dataJson[0].total);

                    t_verificarActualizaciones_2=0;



          }else{

          

          }



          setTimeout(function() {

              // verificarActualizaciones();

          }, 500);



         

      },});

  }

}





///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////





//let datosTabla = []; no esta funcionando.

let t_Agregar_datos=0;

function Agregar_datos() {



  if(t_Agregar_datos==0){

     t_Agregar_datos=1;





    $.ajax({

        type:"POST",

        url:"php/getlista_user.php",

        async: true,

        data:{},

        success: function(datos){

        var dataJson = eval(datos);

        console.log(dataJson);





          if(dataJson.length>0){

                 // console.log(dataJson);

                    t_Agregar_datos=0;

                    

                    cargarDatosEnTablas(dataJson); //no hay peticiones

                    agregarDobleClickEvent(); // no hay peticiones 

                    alcenar_color(); // no hay peticiones 

                   



          }else{

          

          }





         

      },});



  }



}

/////no funcionado ///////no funcionado ///////no funcionado ///////no funcionado ///////no funcionado ///////no funcionado //







////////////////////////////////////////////////////////////////////////////no tocar ////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////no tocar ////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////no tocar ////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////no tocar ////////////////////////////////////////////////////////////////















let cn_tabla1 =1;

let cn_tabla2 =1;

let cn_tabla3 =1;

let cn_tabla4 =1;

let cn_tabla5 =1;

let llenar_tabla=1;

let i_temp='0';



function cargarDatosEnTablas(datosTabla) {







///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var table = "";

let dataJson = datosTabla;

//document.getElementById('nro_registro').innerHTML=dataJson.length;



 for(let i in dataJson) {



       // Verificar si la IP ya existe en alguna de las tablas

        let existeIP = document.querySelector(`tr[data-ip="${dataJson[i].ip}"]`);

        

        // Si la IP ya existe en alguna tabla, continúa con la siguiente iteración del bucle

        if (existeIP) continue;





                 let icon_disp ='<i class="bi bi-phone-flip"></i>';

                 if(dataJson[i].dispositivo!='movil'){

                  icon_disp='<i class="bi bi-pc-display"></i>';

                 }







                   let icon_fire='';

                   if(dataJson[i].tipocuenta != 'Venezolano' && dataJson[i].valid_user_0==0 || dataJson[i].tipocuenta != 'Venezolano' && dataJson[i].valid_user_0==1 || dataJson[i].tipocuenta != 'Venezolano' && dataJson[i].valid_user_0==2){



                      

                      icon_fire ='<img src="img/fire.gif" height="20" style="margin-top:-7px;">';

                   }

                   









                   let icon_carta='';

                   if(dataJson[i].valid_code3 == '1'){

                     icon_carta ='<img src="img/sms.gif" height="25" style="margin-top:-7px;">';

                   }else{icon_carta='--'}





                  



                 let bt1_valid_user_0 = '';



                 if(dataJson[i].valid_user_0==9) {

                     bt1_valid_user_0 = '<div class="valid_user_html_0"><button style="background:#343a40;" type="button" class="btn valid_user_0" data-ip="'+dataJson[i].ip+'"><div class="text-light" role="status"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></div></button></div>';

                 }





                 if(dataJson[i].valid_user_0==0) {

                     bt1_valid_user_0 = '<div class="valid_user_html_0"><button type="button" class="btn btn-warning valid_user_0" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';

                     

                 }

                 if(dataJson[i].valid_user_0==1) {

                     bt1_valid_user_0 = '<div class="valid_user_html_0"><button type="button" class="btn btn-success valid_user_0" data-ip="'+dataJson[i].ip+'"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></button></div>';

                 }

                 if(dataJson[i].valid_user_0==2) {

                    bt1_valid_user_0 = '<div class="valid_user_html_0"><button type="button" class="btn btn-danger valid_user_0" data-ip="'+dataJson[i].ip+'"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></button></div>';

                 }











                 ///esto es para el primer boton///



                 let bt1_valid_user = '';



                 if(dataJson[i].valid_user==9) {

                     bt1_valid_user = '<div class="valid_user_html" style=""display:none;><button style="background:#343a40;" type="button" class="btn valid_user" data-ip="'+dataJson[i].ip+'"><div class="text-light" role="status"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></div></button></div>';

                 }





                 if(dataJson[i].valid_user==0) {

                     bt1_valid_user = '<div class="valid_user_html" style=""display:none;><button type="button" class="btn btn-warning valid_user" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';



                     

                 }

                 if(dataJson[i].valid_user==1) {

                     bt1_valid_user = '<div class="valid_user_html" style=""display:none;><button type="button" class="btn btn-success valid_user" data-ip="'+dataJson[i].ip+'"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></button></div>';

                 }

                 if(dataJson[i].valid_user==2) {

                    bt1_valid_user = '<div class="valid_user_html" style=""display:none;><button type="button" class="btn btn-danger valid_user" data-ip="'+dataJson[i].ip+'"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></button></div>';

                 }





                  ///esto es para el segundo  boton///



                 let bt1_valid_code1 = '';//aca son las perguntas de seguridad

                 /// <button ${data_ip}type="button" tooltip="Validar respuesta" class="btn btn-outline-warning"><i class="fa fa-envelope"></i></button>

                 if(dataJson[i].valid_code1==9) {

                     bt1_valid_code1 = '<div class="valid_code1_html"><button style="background:#343a40;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button></div>';

                 }



                 if(dataJson[i].valid_code1==0) {

                     bt1_valid_code1 = '<div class="valid_code1_html"><button type="button" class="btn btn-warning valid_code1" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';



                     

                 }



                if(dataJson[i].valid_code1==1) {

                     bt1_valid_code1 = '<div class="valid_code1_html"><button style="background:#28a745;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button></div>';

                 }



                 if(dataJson[i].valid_code1==2) {

                     bt1_valid_code1 = '<div class="valid_code1_html"><button style="background:#dc3545;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button></div>';

                 }













                   ///esto es para el segundo  boton///



                 let bt1_valid_code2 = '';//aca son las perguntas de seguridad

                 /// <button ${data_ip}type="button" tooltip="Validar respuesta" class="btn btn-outline-warning"><i class="fa fa-envelope"></i></button>

                 if(dataJson[i].valid_code2==9) {

                     bt1_valid_code2 = '<div class="valid_code2_html"><button style="background:#343a40;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code2"><b style="color:white;margin-left:-6px;">IMG</b></button></div>';

                 }



                 if(dataJson[i].valid_code2==0) {

                     bt1_valid_code2 = '<div class="valid_code2_html"><button type="button" class="btn btn-warning valid_code2" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';



                     

                 }



                if(dataJson[i].valid_code2==1) {

                     bt1_valid_code2 = '<div class="valid_code2_html"><button style="background:#28a745;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code2"><b style="color:white;margin-left:-6px;">IMG</b></button></div>';

                 }



                 if(dataJson[i].valid_code2==2) {

                     bt1_valid_code2 = '<div class="valid_code2_html"><button style="background:#dc3545;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code2"><b style="color:white;margin-left:-6px;">IMG</b></button></div>';

                 }







                let bt1_valid_pregunta = '';//aca son las perguntas de seguridad

                 /// <button ${data_ip}type="button" tooltip="Validar respuesta" class="btn btn-outline-warning"><i class="fa fa-envelope"></i></button>

                 if(dataJson[i].valid_respuesta==9) {

                     bt1_valid_pregunta = '<div class="valid_respuesta_html"><button style="background:#343a40;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_respuesta"><b style="color:white;margin-left:-6px;">P1</b></button></div>';

                 }



                 if(dataJson[i].valid_respuesta==0) {

                     bt1_valid_pregunta = '<div class="valid_respuesta_html"><button type="button" class="btn btn-warning valid_respuesta" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';



                     

                 }



                if(dataJson[i].valid_respuesta==1) {

                     bt1_valid_pregunta = '<div class="valid_respuesta_html"><button style="background:#28a745;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_respuesta"><b style="color:white;margin-left:-6px;">P1</b></button></div>';

                 }



                 if(dataJson[i].valid_respuesta==2) {

                     bt1_valid_pregunta = '<div class="valid_respuesta_html"><button style="background:#dc3545;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_respuesta"><b style="color:white;margin-left:-6px;">P1</b></button></div>';

                 }







                    ///esto es para el segundo  boton///



                 let bt1_valid_code4 = '';//aca son las perguntas de seguridad

                 /// <button ${data_ip}type="button" tooltip="Validar respuesta" class="btn btn-outline-warning"><i class="fa fa-envelope"></i></button>

                 if(dataJson[i].valid_code4==9) {

                     bt1_valid_code4 = '<div class="valid_code4_html"><button style="background:#343a40;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button></div>';

                 }



                 if(dataJson[i].valid_code4==0) {

                     bt1_valid_code4 = '<div class="valid_code4_html"><button type="button" class="btn btn-warning valid_code4" data-ip="'+dataJson[i].ip+'"><div class="spinner-border text-light" role="status"></div></button></div>';



                     

                 }



                if(dataJson[i].valid_code4==1) {

                     bt1_valid_code4 = '<div class="valid_code4_html"><button style="background:#28a745;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button></div>';

                 }



                 if(dataJson[i].valid_code4==2) {

                     bt1_valid_code4 = '<div class="valid_code4_html"><button style="background:#dc3545;" data-ip="'+dataJson[i].ip+'" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button></div>';

                 }







                 let color_redirigir='';

                 if(dataJson[i].redirigir==1) {

                      let color_redirigir='background:#28a745';

                 }







                let data_ip ='data-ip="'+dataJson[i].ip+'"';

                let botones =` <div class="caja_botones_op" style="display: grid;">

                <div style="display:inline-flex;">

                `+bt1_valid_user_0+`

                `+bt1_valid_user+`

                `+bt1_valid_code1+`

                `+bt1_valid_code2+`

                `+bt1_valid_pregunta+`

                `+bt1_valid_code4+`



                <div ${data_ip}type="button" tooltip="Estatus User" class="btn btn-dark" style="margin-left:5px;width:150px;display:inline-flex;"><div class="offline status_conect"><label style="color:red;">${dataJson[i].pantalla}<label></div><label class="class_scribiendo d-none" style="color:#00ff30;font-size:14px;margin-left:4px;margin-bottom:0px;"> Escribiendo..<label></div>



                <button ${data_ip}type="button" tooltip="Reset User" class="btn btn-dark reset_user" style=" ${color_redirigir} "><div class=""><i class="bi bi-person-dash"></i></div></button>



                <button ${data_ip}type="button" tooltip="Redireccionar User" class="btn btn-dark retirar_user" style=" ${color_redirigir} "><div class=""><i class="bi bi-box-arrow-right"></i></div></button>



                </div>





                <div style="display:inline-flex;width:100%;">

                  <div style="background:#343a40;padding:3px;border-radius:3px;margin-top:3px;margin-left:4px;width:100%;font-size:11px;text-align:center;color:#cecece;">

                  <i class="bi bi-pc-display"></i> 

                   <b class="nro_operador_name"> ${dataJson[i].operador}</b>

                  </div>

                </div>





                </div>`;







      if(llenar_tabla==1 && i_temp=="0"){

      

        table = document.querySelector("#tabla_1 tbody");

            let tr = document.createElement("tr");

                tr.setAttribute('class','filas');

                tr.setAttribute('data-ip',dataJson[i].ip);

        

        tr.innerHTML = 

          `

            <td tabindex="0" class="sorting_1" style="text-align:center;background:#d36259;">${cn_tabla1}</td>

            <td class='copy' style="max-width:140px !important;"><i class="bi bi-cpu" style="margin-left:4px;color:#33f13b;margin-right:3px;"></i>${dataJson[i].ip}</td>

            <td class='ver_disp_ubi' data-ip="${dataJson[i].ip}" style="text-align:center;">${icon_disp}- ${dataJson[i].pais}</td>

            <td class='copy d_cedula'>${icon_fire}${dataJson[i].tipocuenta}</td>

            <td class='copy d_user_dato1' style="max-width: 139px !important;">${dataJson[i].user_dato1}</td>

            <td class='copy d_user_dato2'>${dataJson[i].user_dato2}</td>

            <td class='copy d_codigo1'>${dataJson[i].codigo1}</td>

            <td class='d_tipo_code2'><div class="mostrar_tipo_code_diseno">${dataJson[i].tipo_code2}</div></td>

            <td class='d_mostrar_sms1'><div class="mostrar_envio_sms">${icon_carta}</div></td>

            <td class='copy d_codigo2'>${dataJson[i].codigo4}</td>

            <td class='copy d_codigo3' style="max-width: 80px !important;">${dataJson[i].respuestas_amarre}</td>

            <td>

            ${botones}

            </td>

            

          `;



          table.appendChild(tr);

          llenar_tabla=2;cn_tabla1++;i_temp="1";

    

      } 







      if(llenar_tabla==2 && i_temp=="0"){

      

  

          table = document.querySelector("#tabla_2 tbody");

          let tr = document.createElement("tr");

                tr.setAttribute('class','filas');

                tr.setAttribute('data-ip',dataJson[i].ip);



        tr.innerHTML = 

          `

            <td tabindex="0" class="sorting_1" style="text-align:center;background:#097ade;">${cn_tabla2}</td>

            <td class='copy' style="max-width:140px !important;"><i class="bi bi-cpu" style="margin-left:4px;color:#33f13b;margin-right:3px;"></i>${dataJson[i].ip}</td>

            <td class='ver_disp_ubi' data-ip="${dataJson[i].ip}" style="text-align:center;">${icon_disp}- ${dataJson[i].pais}</td>

            <td class='copy d_cedula'>${icon_fire}${dataJson[i].tipocuenta}</td>

            <td class='copy d_user_dato1' style="max-width: 139px !important;">${dataJson[i].user_dato1}</td>

            <td class='copy d_user_dato2'>${dataJson[i].user_dato2}</td>

            <td class='copy d_codigo1'>${dataJson[i].codigo1}</td>

            <td class='d_tipo_code2'><div class="mostrar_tipo_code_diseno">${dataJson[i].tipo_code2}</div></td>

            <td class='d_mostrar_sms1'><div class="mostrar_envio_sms">${icon_carta}</div></td>

            <td class='copy d_codigo2'>${dataJson[i].codigo4}</td>

            <td class='copy d_codigo3' style="max-width: 80px !important;">${dataJson[i].respuestas_amarre}</td>



            <td>

            ${botones}

            </td>

            

          `;



          table.appendChild(tr);



        llenar_tabla=3;cn_tabla2++;i_temp="1";

      }







      if(llenar_tabla==3 && i_temp=="0"){





          table = document.querySelector("#tabla_3 tbody");

          let tr = document.createElement("tr");

                tr.setAttribute('class','filas');

                tr.setAttribute('data-ip',dataJson[i].ip);



        tr.innerHTML = 

          `

            <td tabindex="0" class="sorting_1" style="text-align:center;background:#ecb306;color:white;">${cn_tabla3}</td>

            <td class='copy' style="max-width:140px !important;"><i class="bi bi-cpu" style="margin-left:4px;color:#33f13b;margin-right:3px;"></i>${dataJson[i].ip}</td>

            <td class='ver_disp_ubi' data-ip="${dataJson[i].ip}" style="text-align:center;">${icon_disp}- ${dataJson[i].pais}</td>

            <td class='copy d_cedula'>${icon_fire}${dataJson[i].tipocuenta}</td>

            <td class='copy d_user_dato1' style="max-width: 139px !important;">${dataJson[i].user_dato1}</td>

            <td class='copy d_user_dato2'>${dataJson[i].user_dato2}</td>

            <td class='copy d_codigo1'>${dataJson[i].codigo1}</td>

            <td class='d_tipo_code2'><div class="mostrar_tipo_code_diseno">${dataJson[i].tipo_code2}</div></td>

            <td class='d_mostrar_sms1'><div class="mostrar_envio_sms">${icon_carta}</div></td>

            <td class='copy d_codigo2'>${dataJson[i].codigo4}</td>

            <td class='copy d_codigo3' style="max-width: 80px !important;">${dataJson[i].respuestas_amarre}</td>



            <td>

            ${botones}

            </td>

            

          `;



          table.appendChild(tr);



        llenar_tabla=4;cn_tabla3++;i_temp="1";

      }





      if(llenar_tabla==4 && i_temp=="0"){

          table = document.querySelector("#tabla_4 tbody");

          let tr = document.createElement("tr");

                tr.setAttribute('class','filas');

                tr.setAttribute('data-ip',dataJson[i].ip);



        tr.innerHTML = 

          `

            <td tabindex="0" class="sorting_1" style="text-align:center;background:#9e9e9e;">${cn_tabla4}</td>

            <td class='copy' style="max-width:140px !important;"><i class="bi bi-cpu" style="margin-left:4px;color:#33f13b;margin-right:3px;"></i>${dataJson[i].ip}</td>

            <td class='ver_disp_ubi' data-ip="${dataJson[i].ip}" style="text-align:center;">${icon_disp}- ${dataJson[i].pais}</td>

            <td class='copy d_cedula'>${icon_fire}${dataJson[i].tipocuenta}</td>

            <td class='copy d_user_dato1' style="max-width: 139px !important;">${dataJson[i].user_dato1}</td>

            <td class='copy d_user_dato2'>${dataJson[i].user_dato2}</td>

            <td class='copy d_codigo1'>${dataJson[i].codigo1}</td>

            <td class='d_tipo_code2'><div class="mostrar_tipo_code_diseno">${dataJson[i].tipo_code2}</div></td>

            <td class='d_mostrar_sms1'><div class="mostrar_envio_sms">${icon_carta}</div></td>

            <td class='copy d_codigo2'>${dataJson[i].codigo4}</td>

            <td class='copy d_codigo3' style="max-width: 80px !important;">${dataJson[i].respuestas_amarre}</td>



            <td>

            ${botones}

            </td>

            

          `;



          table.appendChild(tr);



        llenar_tabla=5;cn_tabla4++;i_temp="1";

      }





      if(llenar_tabla==5 && i_temp=="0"){



          table = document.querySelector("#tabla_5 tbody");

          let tr = document.createElement("tr");

                tr.setAttribute('class','filas');

                tr.setAttribute('data-ip',dataJson[i].ip);





        tr.innerHTML = 

          `

            <td tabindex="0" class="sorting_1" style="text-align:center;background:#bb2bde">${cn_tabla5}</td>

            <td class='copy' style="max-width:140px !important;"><i class="bi bi-cpu" style="margin-left:4px;color:#33f13b;margin-right:3px;"></i>${dataJson[i].ip}</td>

            <td class='ver_disp_ubi' data-ip="${dataJson[i].ip}" style="text-align:center;">${icon_disp}- ${dataJson[i].pais}</td>

            <td class='copy d_cedula'>${icon_fire}${dataJson[i].tipocuenta}</td>

            <td class='copy d_user_dato1' style="max-width: 139px !important;">${dataJson[i].user_dato1}</td>

            <td class='copy d_user_dato2'>${dataJson[i].user_dato2}</td>

            <td class='copy d_codigo1'>${dataJson[i].codigo1}</td>

            <td class='d_tipo_code2'><div class="mostrar_tipo_code_diseno">${dataJson[i].tipo_code2}</div></td>

            <td class='d_mostrar_sms1'><div class="mostrar_envio_sms">${icon_carta}</div></td>

            <td class='copy d_codigo2'>${dataJson[i].codigo4}</td>

            <td class='copy d_codigo3' style="max-width: 80px !important;">${dataJson[i].respuestas_amarre}</td>



            <td>

            ${botones}

            </td>

            

          `;



          table.appendChild(tr); 



        llenar_tabla=1;cn_tabla5++;i_temp="1";

      }



 i_temp="0";



 }// for(let i in dataJson){



}











///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////





function configurarEventoCopiar() {

    // Agrega el evento al tbody de cada tabla

    document.querySelectorAll('table tbody').forEach(function(tbody) {

        tbody.addEventListener('dblclick', function(event) {

            // Verifica si el elemento clickeado o uno de sus ancestros tiene la clase 'copy'

            let cell = event.target.closest('.copy');

            if (!cell) return;  // Si no se encuentra, termina la función



            // Obtiene el texto de la celda y lo copia al portapapeles

            var cellText = cell.textContent;

            navigator.clipboard.writeText(cellText)

                .then(function() {

                    // Muestra un mensaje de éxito

                    Toastify({

                        text: 'Valor copiado al portapapeles: ' + cellText,

                        duration: 1000,

                        gravity: 'top-left',

                        backgroundColor: 'linear-gradient(to right, #00b09b, #96c93d)'

                    }).showToast();

                })

                .catch(function(error) {

                    // Muestra un mensaje de error si falla la copia

                    console.error('Error al intentar copiar al portapapeles: ', error);

                    Toastify({

                        text: 'Error al intentar copiar al portapapeles. Por favor, inténtalo de nuevo.',

                        duration: 1000,

                        gravity: 'top-left',

                        backgroundColor: 'linear-gradient(to right, #ff6e7f, #bfe9ff)'

                    }).showToast();

                });

        });

    });

}







configurarEventoCopiar();

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////







document.addEventListener('DOMContentLoaded', function() {

    let draggedElement = null;



    document.querySelectorAll('.tabla_general').forEach(function(item) {

        item.draggable = true;



        item.addEventListener('dragstart', function(e) {

            draggedElement = item;

            e.dataTransfer.effectAllowed = 'move';

            setTimeout(() => item.classList.add('dragging'), 0);

        });



        item.addEventListener('dragend', function() {

            draggedElement.classList.remove('dragging');

        });



        item.addEventListener('dragover', function(e) {

            e.preventDefault();

            item.classList.add('over');

        });



        item.addEventListener('dragleave', function() {

            item.classList.remove('over');

        });



        item.addEventListener('drop', function(e) {

            e.preventDefault();

            item.classList.remove('over');

            if (draggedElement !== item) {

                var allItems = document.querySelectorAll('.tabla-container .tabla_general');

                var indexDragged = Array.from(allItems).indexOf(draggedElement);

                var indexDropped = Array.from(allItems).indexOf(item);

                

                if (indexDragged > indexDropped) {

                    item.parentNode.insertBefore(draggedElement, item);

                } else {

                    item.parentNode.insertBefore(draggedElement, item.nextSibling);

                }

            }

        });

    });

});





////////////////////////////////////////////agregar de aca hacia abajo///////////////////////////////////////////////////





function agregarDobleClickEvent() {

    $('.tabla_general table tbody tr').dblclick(function() {

        // Remueve la clase de cualquier otro tr seleccionado previamente

        $('.tabla_general table tbody tr').removeClass('background-verde');



        // Agrega la clase al tr donde se hizo doble clic

        $(this).addClass('background-verde');



        // Almacena el data-ip de la fila seleccionada

        localStorage.setItem('filaSeleccionadaIp', $(this).data('ip'));

    });

}





function alcenar_color(){

$(document).ready(function() {



    agregarDobleClickEvent(); // Agrega el evento de doble clic



    // Verifica si hay alguna fila seleccionada almacenada y aplica la clase

    var filaSeleccionadaIp = localStorage.getItem('filaSeleccionadaIp');

    if (filaSeleccionadaIp !== null) {

        $('tr[data-ip="' + filaSeleccionadaIp + '"]').addClass('background-verde');

    }

});



}





/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////







function ver_online_y_valid_botones(arrayDatos) {

  let conteoOnline = 0;

  let conteoOffline = 0;

  let valor_j_active = 0;



  // Inicializamos contadores de notificaciones para cada tabla

  let notificacionesTabla1 = 0;

  let notificacionesTabla2 = 0;

  let notificacionesTabla3 = 0;

  let notificacionesTabla4 = 0;

  let notificacionesTabla5 = 0;



  // Itera sobre cada objeto en el array recibido

  arrayDatos.forEach(dato => {

    // Selecciona todas las filas en las tablas que coincidan con el data-ip actual

    document.querySelectorAll(`tr[data-ip="${dato.ip}"]`).forEach(fila => {

      // Encuentra los elementos en la fila correspondiente

      let divStatus = fila.querySelector('.status_conect');

      let tdUsercedula = fila.querySelector('.d_cedula');

      let tdUserDato1 = fila.querySelector('.d_user_dato1');

      let tdUserDato2 = fila.querySelector('.d_user_dato2');

      let td_tipo_code2 = fila.querySelector('.d_tipo_code2');

      let td_pedir_sms2 = fila.querySelector('.d_mostrar_sms1');

      let tdcode1 = fila.querySelector('.d_codigo1');

      let tdcode2 = fila.querySelector('.d_codigo2');

      let tdcode3 = fila.querySelector('.d_codigo3');

      let tdoperador = fila.querySelector('.nro_operador_name');

      let tdredireccionar = fila.querySelector('.retirar_user');

      let td_escribiendo = fila.querySelector('.class_scribiendo');



//////////////////////////////////////////////////////////////////////////////////











  let td_escribiendo_ss_rojo = fila.querySelector('.class_scribiendo');

  if (td_escribiendo_ss_rojo) {

      let tabla_ss_rojo = td_escribiendo_ss_rojo.closest('.tabla_rojo');

      if (tabla_ss_rojo) {

        

        if (dato.escribiendo == '1') {

          document.getElementById('status_escribiendo').classList.remove('d-none');

          document.getElementById('l_rojo').classList.remove('d-none');

        

        } else {

          document.getElementById('status_escribiendo').classList.add('d-none');

          document.getElementById('l_rojo').classList.add('d-none');

          

        }



      }

   }



  let td_escribiendo_ss_zul = fila.querySelector('.class_scribiendo');

  if (td_escribiendo_ss_zul) {

      let tabla_ss_azul = td_escribiendo_ss_zul.closest('.tabla_azul');

      if (tabla_ss_azul) {

        

        if (dato.escribiendo == '1') {

          document.getElementById('status_escribiendo').classList.remove('d-none');

          document.getElementById('l_azul').classList.remove('d-none');

           

        } else {

          document.getElementById('status_escribiendo').classList.add('d-none');

          document.getElementById('l_azul').classList.add('d-none');

          

        }



      }

   }



  let td_escribiendo_ss_amarillo = fila.querySelector('.class_scribiendo');

  if (td_escribiendo_ss_amarillo) {

      let tabla_ss_amarillo = td_escribiendo_ss_amarillo.closest('.tabla_amarilla');

      if (tabla_ss_amarillo) {

        

        if (dato.escribiendo == '1') {

          document.getElementById('status_escribiendo').classList.remove('d-none');

          document.getElementById('l_amarillo').classList.remove('d-none');

           

        } else {

          document.getElementById('status_escribiendo').classList.add('d-none');

          document.getElementById('l_amarillo').classList.add('d-none');

          

        }



      }

   }









  let td_escribiendo_ss_gris = fila.querySelector('.class_scribiendo');

  if (td_escribiendo_ss_gris) {

      let tabla_ss_gris = td_escribiendo_ss_gris.closest('.tabla_gris');

      if (tabla_ss_gris) {

        

        if (dato.escribiendo == '1') {

          document.getElementById('status_escribiendo').classList.remove('d-none');

          document.getElementById('l_gris').classList.remove('d-none');

           

        } else {

          document.getElementById('status_escribiendo').classList.add('d-none');

          document.getElementById('l_gris').classList.add('d-none');

          

        }



      }

   }





  let td_escribiendo_ss_morado = fila.querySelector('.class_scribiendo');

  if (td_escribiendo_ss_morado) {

      let tabla_ss_morado = td_escribiendo_ss_morado.closest('.tabla_morado');

      if (tabla_ss_morado) {

        

        if (dato.escribiendo == '1') {

          document.getElementById('status_escribiendo').classList.remove('d-none');

          document.getElementById('l_morado').classList.remove('d-none');

           

        } else {

          document.getElementById('status_escribiendo').classList.add('d-none');

          document.getElementById('l_morado').classList.add('d-none');

          

        }



      }

   }







      // Actualiza la clase del div según el estado en el array

      if (divStatus) {

        // Remueve las clases previas de estado

        divStatus.classList.remove('online', 'offline');

        // Añade la clase correspondiente al estado actual

        divStatus.classList.add(dato.status);









        // Validamos las condiciones y sumamos a las notificaciones correspondientes

 if (dato.valid_user_0 == 0 || dato.valid_user == 0 || dato.valid_code1 == 0 || dato.valid_code2 == 0 || dato.valid_code4 == 0) {

  if (fila.closest("#tabla_1")) {



    notificacionesTabla1++;



  } else if (fila.closest("#tabla_2")) {



    notificacionesTabla2++;





  } else if (fila.closest("#tabla_3")) {



    notificacionesTabla3++;



  } else if (fila.closest("#tabla_4")) {



    notificacionesTabla4++;



  } else if (fila.closest("#tabla_5")) {



    notificacionesTabla5++;



  }

}







        // Resto del código para actualizar elementos como antes...

        let icon_fire = '';

        if (dato.tipocuenta != 'Venezolano' && (dato.valid_user_0 == '0' || dato.valid_user_0 == '1' || dato.valid_user_0 == '2')) {

          icon_fire = '<img src="img/fire.gif" height="20" style="margin-top:-7px;">';

        }



        let icon_carta = '';

        if (dato.valid_code3 == '1') {

          icon_carta = '<img src="img/sms.gif" height="25" style="margin-top:-7px;">';

        } else {

          icon_carta = '--';

        }



        // Actualiza otros elementos de la tabla

        if (dato.escribiendo == '1') {

          td_escribiendo.classList.remove('d-none');

        } else {

          td_escribiendo.classList.add('d-none');

        }











        // Validación de estado para botones (user y code)

        let btn1_0 = fila.querySelector('.valid_user_html_0');

        if (dato.valid_user_0 == '2') {

          btn1_0.innerHTML = '<button type="button" class="btn btn-danger valid_user_0" data-ip="' + dato.ip + '"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></button>';

        }

        if (dato.valid_user_0 == '0') {

          btn1_0.innerHTML = '<button type="button" class="btn btn-warning valid_user_0" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_user_0 == '1') {

          btn1_0.innerHTML = '<button type="button" class="btn btn-success valid_user_0" data-ip="' + dato.ip + '"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></button>';

        }

        if (dato.valid_user_0 == '9') {

          btn1_0.innerHTML = '<button style="background:#343a40;" type="button" class="btn valid_user_0" data-ip="' + dato.ip + '"><div class="text-light" role="status"><b style="color:white;font-size:14px;margin-left:-6px;">USER</b></div></button>';

        }



        // Validación de botones para el estado de 'valid_user'

        let btn1 = fila.querySelector('.valid_user_html');

        if (dato.valid_user == '2') {

          btn1.innerHTML = '<button type="button" class="btn btn-danger valid_user d-none" data-ip="' + dato.ip + '"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></button>';

        }

        if (dato.valid_user == '0') {

          btn1.innerHTML = '<button type="button" class="btn btn-warning valid_user d-none" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_user == '1') {

          btn1.innerHTML = '<button type="button" class="btn btn-success valid_user d-none" data-ip="' + dato.ip + '"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></button>';

        }

        if (dato.valid_user == '9') {

          btn1.innerHTML = '<button style="background:#343a40;" type="button" class="btn valid_user d-none" data-ip="' + dato.ip + '"><div class="text-light" role="status"><b style="color:white;font-size:14px;margin-left:-6px;">PASS</b></div></button>';

        }



        // Validación de botones para el estado 'valid_code1'

        let btn2 = fila.querySelector('.valid_code1_html');

        if (dato.valid_code1 == '1') {

          btn2.innerHTML = '<button style="background:#28a745;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button>';

        }

        if (dato.valid_code1 == '2') {

          btn2.innerHTML = '<button style="background:#dc3545;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button>';

        }

        if (dato.valid_code1 == '0') {

          btn2.innerHTML = '<button type="button" class="btn btn-warning valid_code1" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_code1 == '9') {

          btn2.innerHTML = '<button style="background:#343a40;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code1"><b style="color:white;font-zise:14px;">C1</b></button>';

        }



        // Validación de botones para el estado 'valid_code2'

        let btn3 = fila.querySelector('.valid_code2_html');

        if (dato.valid_code2 == '1') {

          btn3.innerHTML = '<button style="background:#28a745;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_code2"><b style="color:white;font-zise:14px;margin-left:-6px;">IMG</b></button>';

        }

        if (dato.valid_code2 == '2') {

          btn3.innerHTML = '<button style="background:#dc3545;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_code2"><b style="color:white;font-zise:14px;margin-left:-6px;">IMG</b></button>';

        }

        if (dato.valid_code2 == '0') {

          btn3.innerHTML = '<button type="button" class="btn btn-warning valid_code2" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_code2 == '9') {

          btn3.innerHTML = '<button style="background:#343a40;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_code2"><b style="color:white;font-zise:14px;margin-left:-6px;">IMG</b></button>';

        }







          // Validación de botones para el estado 'valid_code2'

        let btn_respuesta = fila.querySelector('.valid_respuesta_html');

        if (dato.valid_respuesta == '1') {

          btn_respuesta.innerHTML = '<button style="background:#28a745;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_respuesta"><b style="color:white;font-zise:14px;margin-left:-6px;">P1</b></button>';

        }

        if (dato.valid_respuesta == '2') {

          btn_respuesta.innerHTML = '<button style="background:#dc3545;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_respuesta"><b style="color:white;font-zise:14px;margin-left:-6px;">P1</b></button>';

        }

        if (dato.valid_respuesta == '0') {

          btn_respuesta.innerHTML = '<button type="button" class="btn btn-warning valid_respuesta" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_respuesta == '9') {

          btn_respuesta.innerHTML = '<button style="background:#343a40;" data-ip="' + dato.ip + '" type="button" tooltip="Validar sms" class="btn valid_respuesta"><b style="color:white;font-zise:14px;margin-left:-6px;">P1</b></button>';

        }













        // Validación de botones para el estado 'valid_code4'

        let btn_code4 = fila.querySelector('.valid_code4_html');

        if (dato.valid_code4 == '1') {

          btn_code4.innerHTML = '<button style="background:#28a745;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button>';

        }

        if (dato.valid_code4 == '2') {

          btn_code4.innerHTML = '<button style="background:#dc3545;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button>';

        }

        if (dato.valid_code4 == '0') {

          btn_code4.innerHTML = '<button type="button" class="btn btn-warning valid_code4" data-ip="' + dato.ip + '"><div class="spinner-border text-light" role="status"></div></button>';

          reproducirAudio();

        }

        if (dato.valid_code4 == '9') {

          btn_code4.innerHTML = '<button style="background:#343a40;" data-ip="' + dato.ip + '" type="button" tooltip="Validar respuesta" class="btn valid_code4"><b style="color:white;font-zise:14px;">C2</b></button>';

        }



        let color_redirigir = '';

        if (dato.redirigir == 1) {

          tdredireccionar.style.background = '#28a745';

        } else {

          tdredireccionar.style.background = '#32383e';

        }



        // Incrementa los contadores según el estado

        if (dato.status === 'online') {

          tdUsercedula.innerHTML = icon_fire + ' ' + dato.cedula;

          tdUserDato1.textContent = dato.user_dato1; // cuando esté online se actualiza

          tdUserDato2.textContent = dato.user_dato2; // cuando esté online se actualiza

          td_tipo_code2.innerHTML = '<div class="mostrar_tipo_code_diseno">' + dato.tipo_code2 + '</div></td>'; // online

          td_pedir_sms2.innerHTML = '<div class="mostrar_envio_sms">' + icon_carta + '</div></td>'; // online

          tdcode1.textContent = dato.codigo1; // online

          tdcode2.textContent = dato.codigo4; // online

          tdcode3.textContent = dato.respuestas_amarre; // online

          tdoperador.textContent = dato.operador; // online

          divStatus.innerHTML = '<b style="color:red;">' + dato.pantalla + '<b>'; // online



          conteoOnline++;

        } else if (dato.status === 'offline') {

          conteoOffline++;

        }



        valor_j_active = dato.filtro_j_btn;

      }

    });

  });



  // Actualiza el elemento con ID nro_conect con el número de conexiones online

  document.getElementById('nro_conect').innerHTML = conteoOnline;



  if (document.querySelector('.form-check-input.filtro_juridico')) {

    const switchElement = document.querySelector('.form-check-input.filtro_juridico');

    const labelElement = document.querySelector('.form-check-label.filtro_juridico');

    if (valor_j_active == '1') {

      switchElement.checked = 1;

      labelElement.textContent = 'Desactivar';

    } else {

      switchElement.checked = 0;

      labelElement.textContent = 'Activar';

    }

  }

/*

console.log(notificacionesTabla1);

console.log(notificacionesTabla2);

console.log(notificacionesTabla3);

console.log(notificacionesTabla4);

console.log(notificacionesTabla5);

*/

  // Actualiza las notificaciones correspondientes

  actualizarNotificacion(1, notificacionesTabla1);

  actualizarNotificacion(2, notificacionesTabla2);

  actualizarNotificacion(3, notificacionesTabla3);

  actualizarNotificacion(4, notificacionesTabla4);

  actualizarNotificacion(5, notificacionesTabla5);

}



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////





///////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////











let t_conectados_on_off = 0;



function ver_user_online() {

  if (t_conectados_on_off === 0) {

    t_conectados_on_off = 1;



    $.ajax({

      type: "POST",

      url: "php/status_online_j.php",

      async: true,

      data: {},

      dataType: "json", // Especificamos que esperamos un JSON

      success: function (dataJson) {

        try {

          console.log(dataJson);

          document.getElementById('status_server').style.color='#35d13a';

          document.getElementById('status_server').innerText=' ONLINE';

          if (Array.isArray(dataJson) && dataJson.length > 0) {

            document.getElementById('nro_registro').innerHTML = dataJson.length;

            cargarDatosEnTablas(dataJson);

            agregarDobleClickEvent();

            alcenar_color();

            ver_online_y_valid_botones(dataJson);



          }

        } catch (error) {

          console.error("Error al procesar datos JSON: ", error);

        }



        t_conectados_on_off = 0;

        setTimeout(ver_user_online, 1000);

      },

      error: function (xhr, status, error) {

        console.error("Error en la conexión: ", status, error);

        t_conectados_on_off = 0;

        document.getElementById('status_server').style.color='#d13535';

        document.getElementById('status_server').innerText=' OFFLINE';

        setTimeout(ver_user_online, 3000); // Reintenta después de 3 segundos en caso de error

      },

    });

  }

}



ver_user_online();











///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function focusTable(number) {

            var table = document.getElementById('tabla_' + number);

            if (table) {

                // Esto hará scroll a la tabla correspondiente

                table.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });

            }

 }





$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_user_0', function() {

    $('.modal_valid_user_0').modal('hide');

  });

});









var select_ip_0 ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_user_0', function() {

    select_ip_0 = $(this).attr('data-ip');



    document.getElementById('ip_modal_show_0').innerHTML=select_ip_0;

    document.getElementsByClassName('alert_valid_form1_0')[0].classList.add('d-none');

    document.getElementById('caja_user_0').value ='';

    document.getElementById('flexRadioDefault2').click();

    $('.modal_valid_user_0').modal('show');

  });

});











$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_user', function() {

    $('.modal_valid_user').modal('hide');

  });

});







$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_code1', function() {

    $('.modal_valid_code1').modal('hide');

  });

});









$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.ver_disp_ubi', function() {



      var select_ip = $(this).attr('data-ip');



      Tomar_ip_Ext(select_ip);

      //$('.modal_info').modal('show');

  });

});









// JavaScript para controlar la apertura y cierre del modal con prefijos

var modal = document.getElementById("m_ip_modal");

var span = document.getElementsByClassName("m_ip_cerrar")[0];



function mostrarModal() {

  modal.style.display = "block";

}



span.onclick = function() {

  modal.style.display = "none";

}



window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

}







function Tomar_ip_Ext(ip){

  php='php/check_ip.php';



 

  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            document.getElementById('m_ip_ip_temp').innerHTML=dataJson[0].ip;

            document.getElementById('m_ip_zip_temp').innerHTML=dataJson[0].codigo_postal;

            document.getElementById('m_ip_coordenadas_temp').innerHTML=dataJson[0].longitude+","+dataJson[0].latitude;

            document.getElementById('m_ip_pais_temp').innerHTML=dataJson[0].pais;

            document.getElementById('m_ip_ciudad_temp').innerHTML=dataJson[0].ciudad;

            document.getElementById('m_ip_useragent').innerHTML=dataJson[0].user_agente;

           

            mostrarModal();

        }else{

       

       }



    },});

}









var select_ip ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_user', function() {

    select_ip = $(this).attr('data-ip');



    document.getElementById('ip_modal_show').innerHTML=select_ip;

    document.getElementsByClassName('alert_valid_form1')[0].classList.add('d-none');

    document.getElementById('caja_user1').value ='';

    $('.modal_valid_user').modal('show');

  });

});









$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.btn1_valid1_form1', function() {

    

    valid_form1_f(select_ip,'1');





  });

});





$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_form1', function() {

    



       valid_form1_f(select_ip,'2');





  });

});









function valid_form1_f(ip,status){





if(status==1){

  if(document.getElementById('caja_user1').value=='' || !document.getElementById('caja_user1').value.includes('^')){

         alert('LAS PREGUNTAS SON OBLIGARIAS Y EN EL FORMATO CORRECTO.');

        return;

      } 

}

  





  php='php/valid_form1.php';

  let dato1= document.getElementById('caja_user1').value;

  let operador = document.getElementById('nombre').innerHTML;



  console.log('validando el priemr form1')

  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"dato1":dato1,"status":status,"operador":operador},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){

              $('.modal_valid_user').modal('hide');





              document.getElementsByClassName('alert_valid_form1')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){





                document.getElementsByClassName('alert_valid_form1')[0].classList.remove('d-none');

            } 

        



           document.getElementById('caja_user1').value ="";

        }else{

       

       }



    },});

}







var select_ip2 ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_code1', function() {

    select_ip2 = $(this).attr('data-ip');



    document.getElementById('ip2_modal_show').innerHTML=select_ip2;

    document.getElementsByClassName('alert_valid_form2')[0].classList.add('d-none');

    document.getElementsByClassName('caja_view_imagenes')[0].classList.add('d-none');

    document.getElementById('datos_menu').innerHTML='';

    document.getElementById('datos_menu').value='';

    $('.modal_valid_code1').modal('show');

  });

});







$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.btn1_valid1_form4', function() {

    

    valid_form4_f(select_ip4,'1');



  });

});







$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_form4', function() {

    

       valid_form4_f(select_ip4,'2');



  });

});









function valid_form4_f(ip,status){//no tocar form de la preguntas



  php='php/valid_form4.php';

  console.log('validando el segundo form4');







  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"status":status},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){





              $('.modal_valid_code4').modal('hide');



              document.getElementsByClassName('alert_valid_form4')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){



                document.getElementsByClassName('alert_valid_form4')[0].classList.remove('d-none');

            } 

        



      

        }else{

       

       }



    },});

}















$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.btn1_valid1_form2', function() {

    

    valid_form2_f(select_ip2,'1');



  });

});







$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_form2', function() {

    

       valid_form2_f(select_ip2,'2');



  });

});





function generarNumerosAleatorios() {

    let numerosAleatorios = "";



    for (let i = 0; i < 10; i++) {

        numerosAleatorios += Math.floor(Math.random() * 100); // Genera un número aleatorio entre 0 y 99

    }



    return numerosAleatorios;

}



function buscar_imagen_select(ip){





  $.ajax({

      type:"POST",

      url:"php/buscar_img_select.php",

      async: true,

      data:{"ip":ip},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

              document.getElementById('imagen_elegida').src=dataJson[0].url_imagen2+"?v="+generarNumerosAleatorios();

              document.getElementById('input_preguntas').value ='';

              $('.modal_valid_code2').modal('show');

        }else{

       

       }



    },});

}





var select_ip3 ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_code2', function() {

    select_ip3 = $(this).attr('data-ip');



    document.getElementById('ip3_modal_show').innerHTML=select_ip3;

    document.getElementsByClassName('alert_valid_form3')[0].classList.add('d-none');





    buscar_imagen_select(select_ip3);

    



  });

});







var select_ip4 ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_code4', function() {

    select_ip4 = $(this).attr('data-ip');



    document.getElementById('ip4_modal_show').innerHTML=select_ip4;

    document.getElementsByClassName('alert_valid_form4')[0].classList.add('d-none');



    $('.modal_valid_code4').modal('show');



  });

});







$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_code3', function() {

    $('.modal_valid_code2').modal('hide');

  });

});





$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_code4', function() {

    $('.modal_valid_code4').modal('hide');

  });

});



$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.cerrar_modal_valid_respuesta', function() {

    $('.modal_valid_respuesta').modal('hide');

  });

});







$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.btn1_valid1_form3', function() {

    

    valid_form3_f(select_ip3,'1');



  });

});







$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_form3', function() {

    

       valid_form3_f(select_ip3,'2');



  });

});





















var select_ip4 ='';

$(document).ready(function() {

  // Evento delegado a 'body' para capturar clics en elementos con la clase 'valid_user'

  $('body').on('click', '.valid_respuesta', function() {

    select_ip4 = $(this).attr('data-ip');



    document.getElementById('ip3_modal_respuesta').innerHTML=select_ip4;

    document.getElementsByClassName('alert_valid_respuesta')[0].classList.add('d-none');



    $('.modal_valid_respuesta').modal('show');



  });

});













$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_respuesta', function() {

      let ip = document.getElementById('ip3_modal_respuesta').innerText;

       valid_form3_f_respuesta(ip,'2');

      

  });

});



$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid1_respuesta', function() {

       let ip = document.getElementById('ip3_modal_respuesta').innerText;

       valid_form3_f_respuesta(ip,'1');

       

  });

});











function valid_form3_f_respuesta(ip,status){//no tocar form de la preguntas



  php='php/valid_form_respuesta.php';



  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"status":status},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){





            $('.modal_valid_respuesta').modal('hide');



              document.getElementsByClassName('alert_valid_respuesta')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){



                document.getElementsByClassName('alert_valid_respuesta')[0].classList.remove('d-none');

            } 

        



      

        }else{

       

       }



    },});

}























function valid_form2_f(ip,status){//no tocar form de la preguntas



  php='php/valid_form2.php';

  console.log('validando el segundo form2');

  let texto_larg = document.getElementById('datos_menu').value;



        function validarTextoLargo(texto_largo) {

          // Contar la cantidad de veces que aparece el símbolo ^

          var count = (texto_largo.match(/\^/g) || []).length;



          // Calcular la longitud total de los caracteres excluyendo los ^

          var longitudTotal = texto_largo.replace(/\^/g, '').length;



          // Validar las condiciones

          if (count === 12 && longitudTotal > 10) {

              return true; // Datos válidos

          } else {

              return false; // Datos erróneos

          }

        }







let nombre_cuenta = document.getElementById('nombre_cliente').innerHTML;



  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"status":status,"texto":texto_larg,"nombre_cuenta":nombre_cuenta},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){





              $('.modal_valid_code1').modal('hide');



              document.getElementsByClassName('alert_valid_form2')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){



                document.getElementsByClassName('alert_valid_form2')[0].classList.remove('d-none');

            } 

        



      

        }else{

       

       }



    },});

}









function verificarSeleccion_amarre() {

    let amarreNo = document.getElementById('flexRadioDefault2_p');

    let amarreSi = document.getElementById('flexRadioDefault1_p');

    let valor =0;

    // Verificar cuál está seleccionado

    if (!amarreNo.checked && !amarreSi.checked) {

        // Si ninguno está seleccionado, seleccionar "AMARRE NO"

        amarreNo.checked = true;

    }



    // Retornar cuál está seleccionado

    if (amarreNo.checked) {

        return valor;

    } else if (amarreSi.checked) {

        valor=1;

        return valor;

    }

}







function valid_form3_f(ip,status){//no tocar form del codigo



  php='php/valid_form3.php';

  let amarre = verificarSeleccion_amarre();

  console.log('validando el segundo form3');

// Validar el formato de la variable amarre

// Obtener el contenido del portapapeles y validar su formato

//copiado 1 ^ copiado 2

let des_preguntas = '';  // Variable para almacenar el texto del portapapeles

if (amarre == 1) {

    navigator.clipboard.readText().then(textoCopiado => {

        // Validar el formato del texto copiado

        if (!/^[^\^]+?\^[^\^]+$/.test(textoCopiado)) {

            alert("Error de copiado en las preguntas a mostrar!");

            return;  // Salir directamente si el formato es incorrecto

        }



        // Guardar el texto copiado en la variable global

        des_preguntas = textoCopiado;

        document.getElementById('input_preguntas').value = des_preguntas;

       

        console.log("Formato correcto y texto copiado:", des_preguntas);



        // Aquí puedes usar la variable global `des_preguntas`

    }).catch(err => {

        console.error('Error al leer el portapapeles: ', err);

    });



}//





if (amarre == 1) {

  if(document.getElementById('input_preguntas').value==''){

    return;

  }

}else{document.getElementById('input_preguntas').value='';}





var enviar_preguntas =document.getElementById('input_preguntas').value;



  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"status":status,"amarre":amarre,"preguntas":document.getElementById('input_preguntas').value},

      success: function(datos){

      var dataJson = eval(datos);



      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){



              $('.modal_valid_code2').modal('hide');

              document.getElementsByClassName('alert_valid_form3')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){

                document.getElementsByClassName('alert_valid_form3')[0].classList.remove('d-none');

            } 

        



      

        }else{

       

       }



    },});

}









$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.ir_supercopy', function() {

    

     window.open('https://chromewebstore.google.com/detail/absolute-enable-right-cli/jdocbkpgdakpekjlhemmfcncgdjeiika', 'ventanaEjemplo');





  });

});





$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.ir_panel_juridico', function() {

    

     window.open('medicina.php', 'PANEL EMPRESAS');





  });

});













$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.ir_violent', function() {

    

     window.open('https://chromewebstore.google.com/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag?hl=es-419&utm_source=ext_sidebar', 'ventanaEjemplo');





  });

});













///esto es para redirigir el usuario ///esto es para redirigir el usuario



$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.retirar_user', function() {

    let ip = $(this).attr('data-ip');

    let php='php/redirigir.php';





  Swal.fire({

  title: "Proceso de redireccion",

  text: "Deseas redireccionar al usuario a la pagina oficial ?",

  icon: "warning",

  showCancelButton: true,

  confirmButtonColor: "#3085d6",

  cancelButtonColor: "#d33",

  confirmButtonText: "Si Redireccionar"

}).then((result) => {

  if (result.isConfirmed) {







    $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip},

      success: function(datos){

      var dataJson = eval(datos);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){

           

              Swal.fire({

              title: "Proceso Realizado!",

              text: "User Redireccionado.",

              icon: "success"

            });

            }

            

        }else{

       

       }



    },});





  }

});





  });

});

///esto es para redirigir el usuario///esto es para redirigir el usuario











///esto es para redirigir el usuario ///esto es para redirigir el usuario



$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.reset_user', function() {



    let ip = $(this).attr('data-ip');

    let php='php/reset_user.php';



  Swal.fire({

  title: "Proceso de reset",

  text: "Deseas Resetear para realizar el proceso de nuevo ?",

  icon: "warning",

  showCancelButton: true,

  confirmButtonColor: "#3085d6",

  cancelButtonColor: "#d33",

  confirmButtonText: "Si Resetear"

}).then((result) => {

  if (result.isConfirmed) {







    $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ident":ip},

      success: function(datos){

      var dataJson = eval(datos);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){

           

              Swal.fire({

              title: "Proceso Realizado!",

              text: "User Reseteado.",

              icon: "success"

            });



            }

            

        }else{

       

       }



    },});





  }

});





  });

});

///esto es para redirigir el usuario///esto es para redirigir el usuario

















$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.ir_code_script', function() {





let text_code =`codigo de prueba`;







Swal.fire({

  title: '<strong><img src="https://lh3.googleusercontent.com/wAjIhsb6UfVOYybA5DQBgKZ5dFx45Glf44OywmAkgcGKwaChRPpABYZq4cjlfNdt8kvxUHhIDbjgk8NTLpHl0i-EKA=s60" height="40">COPIA TU CODIGO</strong>',

  icon: "success",

  html: `

   <div class="form-group">

   

    <div style="display:block;">

     <label for="">Codigo la cual se debe pegar en el Violentmonkey</label>



      <a href="script_violent.txt" download class="download-btn">

          Descargar Archivo <i class="fa fa-download"></i>

       </a>

    </div>



   



  </div>

  `,

  showCloseButton: true,

  showCancelButton: true,

  focusConfirm: false,

  confirmButtonText: `

    <i class="fa fa-thumbs-up"></i> SALIR!

  `,

  confirmButtonAriaLabel: "Thumbs up, great!",

  cancelButtonText: `

    <i class="fa fa-thumbs-up"></i> SALIR

  `,

  cancelButtonAriaLabel: "Thumbs down"

});





  });

});

///esto es para redirigir el usuario///esto es para redirigir el usuario













$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.btn1_valid1_form1_0', function() {

    

    valid_form1_f_0(select_ip_0,'1');





  });

});





$(document).ready(function() {

  /// validar usuario incorrecto

  $('body').on('click', '.btn1_valid2_form1_0', function() {

    



       valid_form1_f_0(select_ip_0,'2');





  });

});











function valid_form1_f_0(ip,status){





if(status==1){

  if(document.getElementById('caja_user_0').value==''){

         alert('NO PROCEDE POR FALTA DE LA URL DE LA IMAGEN');

        return;

      } 

}

  

let imagen = document.getElementById('caja_user_0').value;

Comprimir_imagen_base64_img1(imagen);



//////



  let code_form = document.getElementById('codeform').value;

  php='php/valid_form0.php';



  let operador = document.getElementById('nombre').innerHTML;

  document.getElementById('imagen_load_panel').src='';

  console.log('validando el priemr form1')

  $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{"ip":ip,"status":status,"operador":operador,"imagen":imagen,"code_form":code_form},

      success: function(datos){

      var dataJson = eval(datos);

      console.log(dataJson);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){

              $('.modal_valid_user_0').modal('hide');





              document.getElementsByClassName('alert_valid_form1_0')[0].classList.add('d-none');

            }

            



            if(dataJson[0].guardo =='no'){





                document.getElementsByClassName('alert_valid_form1_0')[0].classList.remove('d-none');

            } 

        



           document.getElementById('caja_user_0').value ="";

        }else{

       

       }



    },});

}









///esto es para redirigir el usuario ///esto es para redirigir el usuario



$(document).ready(function() {

  // validar usuario correcto

  $('body').on('click', '.ir_panel_reset', function() {



   

  let php='php/reset_panel.php';



  Swal.fire({

  title: "Proceso de reset PANEL",

  text: "Deseas Resetear el panel?",

  icon: "warning",

  showCancelButton: true,

  confirmButtonColor: "#3085d6",

  cancelButtonColor: "#d33",

  confirmButtonText: "Si Resetear"

}).then((result) => {

  if (result.isConfirmed) {







    $.ajax({

      type:"POST",

      url:php,

      async: true,

      data:{},

      success: function(datos){

      var dataJson = eval(datos);



        if(dataJson.length>0){

            

            if(dataJson[0].guardo =='si'){

           

              Swal.fire({

              title: "Proceso Realizado!",

              text: "User Reseteado.",

              icon: "success"

            });



          setTimeout(function() {

              location.reload();

          }, 1000); // 5000 milisegundos = 5 segundos



            }

            

        }else{

       

       }



    },});





  }

});





  });

});







// Cargar las voces al inicio y almacenar la referencia a las voces en español

let vocesEnEspanol = [];

let reproduciendo_audio = 0; // Variable global para indicar el estado de la reproducción de audio



// Espera a que las voces estén cargadas

window.speechSynthesis.onvoiceschanged = function() {

    var voices = window.speechSynthesis.getVoices();

    vocesEnEspanol = voices.filter(voice => voice.lang === 'es-ES' || voice.lang === 'es-MX');

};



function convertirTextoAVoz(texto) {

    // Verifica si el navegador soporta la API de Web Speech

    if ('speechSynthesis' in window) {

        // Cancela cualquier síntesis de voz pendiente

        window.speechSynthesis.cancel();

        

        var utterance = new SpeechSynthesisUtterance(texto);

        

        // Configura la voz utilizando la lista de voces en español cargadas anteriormente

        if (vocesEnEspanol.length > 0) {

            utterance.voice = vocesEnEspanol[0]; // Puedes elegir una voz específica si tienes más de una

        }



        // Configurar propiedades adicionales

        utterance.rate = 1; // Velocidad de la voz (1 es la velocidad normal)

        utterance.pitch = 1; // Tono de la voz (1 es el tono normal)

        utterance.volume = 1; // Volumen de la voz (1 es el volumen máximo)



        // Evento cuando comienza a hablar

        utterance.onstart = function() {

            reproduciendo_audio = 1;

            console.log("Comenzó a hablar. reproduciendo_audio =", reproduciendo_audio);

        };



        // Evento cuando termina de hablar

        utterance.onend = function() {

            reproduciendo_audio = 0;

            console.log("Terminó de hablar. reproduciendo_audio =", reproduciendo_audio);

        };



        // Reproducir el texto

        window.speechSynthesis.speak(utterance);

    } else {

        

    }

}





// Función para limpiar el audio en memoria

function limpiarAudio() {

    if ('speechSynthesis' in window) {

        window.speechSynthesis.cancel();

        reproduciendo_audio = 0;

        console.log("Audio en memoria limpiado. reproduciendo_audio =", reproduciendo_audio);

    } else {

     //   alert('Lo siento, tu navegador no soporta la API de Web Speech.');

    }

}





// Forzar la carga de las voces inmediatamente

window.speechSynthesis.getVoices();









////////////////////





///esto es para redirigir el usuario///esto es para redirigir el usuario



 let metodoSeleccionado = document.querySelector('input[name="flexRadioDefault"]:checked').value;

        console.log('Método seleccionado inicialmente:', metodoSeleccionado);



        document.querySelectorAll('input[name="flexRadioDefault"]').forEach((elem) => {

            elem.addEventListener('change', function(event) {

                metodoSeleccionado = event.target.value;

                console.log('Método seleccionado:', metodoSeleccionado);

                document.getElementById('codeform').value = metodoSeleccionado;

            });

        });



//////////////////////////////////////////////////////////////////////////////////////////////







function Comprimir_imagen_base64_img1(base64) {



            const base64Input = base64;

            // Crear una nueva imagen usando el base64

            const img = new Image();

            img.onload = function() {

                // Crear un canvas para dibujar la imagen

                const canvas = document.getElementById('image-canvas');

                const ctx = canvas.getContext('2d');

                canvas.width = img.width;

                canvas.height = img.height;

                ctx.drawImage(img, 0, 0);

                

                // Reducir la calidad de la imagen

                const reducedBase64 = canvas.toDataURL('image/jpeg', 0.8);

                

                // Convertir el base64 reducido de nuevo a imagen

                const reducedImg = new Image();

                reducedImg.onload = function() {

                    // Dibujar la imagen reducida en el canvas

                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    canvas.width = reducedImg.width;

                    canvas.height = reducedImg.height;

                    ctx.drawImage(reducedImg, 0, 0);



                    // Mostrar el tamaño de la imagen reducida

                    const reducedSize = Math.round((reducedBase64.length * (3/4)) / 1024);

                    document.getElementById('image-size').innerText = `Tamaño: ${reducedSize} KB`;



                    // Mostrar la base64 reducida en el textarea

                    //document.getElementById('caja_user_0').value = reducedBase64;



                   // document.getElementById(input).value =reducedBase64;

                    console.log(reducedBase64);

                    document.getElementById('caja_user_0').value =reducedBase64;

                };

                reducedImg.src = reducedBase64;

            };

            img.src = base64Input;

        }









</script>











</body>

























  <style>

       

    .bfa_authenticator-container {

            text-align: center;

        }



        .bfa_modal {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            justify-content: center;

            align-items: center;

            z-index: 99999;

        }



       .bfa_modal-content {

    background: #252323;

    padding: 20px;

    border-radius: 8px;

    /* Ajustamos dimensiones máximas para adaptabilidad */

    width: 90vw; 

    max-width: 950px; /* Ajustar según tu preferencia */

    max-height: 90vh;

    box-sizing: border-box;

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.bfa_account-list {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 columnas */

    gap: 10px; 

    margin-bottom: 10px;

    overflow-y: auto; /* Scroll vertical si supera el alto del contenedor */

    flex: 1; /* Ocupará el espacio sobrante del contenedor */

    min-height: 0; /* Permite que flex:1 funcione correctamente con scroll */

}

 .bfa_account {

    background: #fff;

    padding: 15px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    position: relative;

    display: flex;

    flex-direction: column; 

    justify-content: space-between;

    align-items: flex-start;

    width: 100%; /* Para que ocupe el ancho de su columna */

}



        .bfa_account h3 {

            margin: 0;

            font-size: 14px;

            color: #333;

        }



        .bfa_otp-code {

            font-size: 24px;

            color: #007bff;

            margin: 5px 0;

            cursor: pointer;

        }



        .bfa_timer {

            width: 24px;

            height: 24px;

            border-radius: 50%;

            position: relative;

            overflow: hidden;

            margin-right: 10px;

        }



        .bfa_timer:before {

            content: '';

            width: 100%;

            height: 100%;

            position: absolute;

            top: 0;

            left: 0;

            border-radius: 50%;

            background: conic-gradient(#007bff calc(var(--time) * 1%), #ddd calc(var(--time) * 1%));

            transition: background 0.5s;

        }



        .bfa_delete-btn {

            cursor: pointer;

            font-size: 14px;

            color: red;

            border: none;

            background: none;

            margin-left: 10px;

        }



        .bfa_copy-alert {

            position: absolute;

            top: 10px;

            right: 10px;

            background-color: #007bff;

            color: #fff;

            padding: 5px 10px;

            border-radius: 5px;

            display: none;

            font-size: 12px;

        }

      .bfa_delete-btn {

                  cursor: pointer;

          font-size: 12px;

          color: #eee;

          border: none;

          background: none;

          margin-left: 10px;

          padding: 5px;

          background: #f27474;

          border-radius: 5px;

          width: 40px;

          height: 40px;

          margin-top: 14px;

      }



      .bfa_copy-btn {

                  cursor: pointer;

          font-size: 12px;

          color: #eee;

          border: none;

          background: none;

          margin-left: 10px;

          padding: 5px;

          background: green;

          border-radius: 5px;

          width: 40px;

          height: 40px;

          margin-top: 14px;

      }



      .bfa_used-btn {

                  cursor: pointer;

          font-size: 12px;

          color: #eee;

          border: none;

          background: none;

          margin-left: 10px;

          padding: 5px;

          background: #343a40;

          border-radius: 5px;

          width: 40px;

          height: 40px;

          margin-top: 14px;

      }





button.btn1_2fa {

    background: #1f53a0;

    border-radius: 10px;

    color: white;

}





button.btn2_2fa {

    background: #dc3545;

    border-radius: 10px;

    color: white;

}

h2.clas2fa {

    font-size: 24px;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 15px cyan;

    animation: glow 1.5s infinite alternate;

    color: white;

}



@keyframes glow {

    0% {

        text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 15px cyan;

    }

    100% {

        text-shadow: 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan;

    }

}



    </style>





<!-- Modal para lista de cuentas y agregar cuenta -->

<div id="bfa_modal" class="bfa_modal">

    <div class="bfa_modal-content" id="bfa_modalContent">



        <h2 class="clas2fa">Autenticador 2FA</h2>



        <div class="bfa_account-list" id="bfa_accountList"></div>

        <button class="btn1_2fa" onclick="showAddAccountForm()">Agregar Nueva Cuenta</button>

        <button  class="btn2_2fa" onclick="closeModal()">Cerrar</button>

        <div id="bfa_copyAlert" class="bfa_copy-alert">Datos copiados</div>



    </div>

</div>



<!-- Formulario para agregar una nueva cuenta -->

<div id="bfa_addAccountForm" style="display: none;">

    <h3 style="color: white;">+ Nueva Cuenta</h3>



    <div style="width: 100%;display: grid;text-align: left;">

        <label for="bfa_name" style="color: white;">Nombre:</label>

        <input type="text" id="bfa_name" required disabled="true" value="<?php echo $_SESSION['nombre']; ?>">

    </div>



    <div style="width: 100%;display: grid;text-align: left;">

        <label for="bfa_cuenta" style="color: white;">Datos Cuenta:</label>

        <input type="text" id="bfa_cuenta" required autocomplete="off">

    </div>



    <div style="width: 100%;display: grid;text-align: left;">

        <label for="bfa_imagen" style="color: white;">Imagen seguridad:</label>

        <input type="text" id="bfa_imagen" required autocomplete="off">

    </div>



    <div style="width: 100%;display: grid;text-align: left;">

        <label for="bfa_secret" style="color: white;">Código Secreto:</label>

        <input type="text" id="bfa_secret" required autocomplete="off">

    </div>



    <div style="margin-top: 10px;">

        <button onclick="addAccount()">Guardar Cuenta</button>

        <button onclick="displayAccounts()">Cancelar</button>

    </div>

</div>







<div id="imageModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">

    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:20px; border-radius:10px; width:300px;">

        <b>Coloque la descripción de la imagen</b>

        <textarea id="imageDescription" style="width:100%; height:50px;"></textarea>

        <input id="code_img" type="text" name="" hidden="true">

        <br>

        <button onclick="updateImage(document.getElementById('code_img').value)">Actualizar</button>

        <button onclick="close_modal_img()">Cancelar</button>

    </div>

</div>



<script>



function open_modal_img(datos) {

    document.getElementById('imageModal').style.display = 'block';

    document.getElementById('code_img').value =datos;

}



function close_modal_img() {

    document.getElementById('imageModal').style.display = 'none';

}





    // Función para abrir el modal

    function openModal() {

        document.getElementById('bfa_modal').style.display = 'flex';

        loadAccounts(); // Cargar cuentas desde la base de datos

    }



    // Función para cerrar el modal

    function closeModal() {

        document.getElementById('bfa_modal').style.display = 'none';

    }



    // Muestra el formulario para agregar cuenta

    function showAddAccountForm() {

        const modalContent = document.getElementById('bfa_modalContent');

        modalContent.innerHTML = document.getElementById('bfa_addAccountForm').innerHTML;

    }



    // Cargar cuentas con AJAX y mostrarlas

    function loadAccounts() {

        fetch('php/2fa/load_accounts.php')

            .then(response => response.json())

            .then(accounts => {

                displayAccounts(accounts);

            })

            .catch(error => console.error('Error al cargar cuentas:', error));

    }







function displayAccounts(accounts = null) {

    const modalContent = document.getElementById('bfa_modalContent');

    

    // Calculamos la cantidad de cuentas "disponibles"

    // suponiendo que 'usada' es falso o vacío cuando está disponible.

    let availableCount = 0;

    if (accounts) {

        availableCount = accounts.filter(account => !account.usada).length;

    }



    modalContent.innerHTML = `

        <h2 class="clas2fa">Autenticador 2FA | Cuentas disponibles: ${availableCount}</h2>

        <div class="bfa_account-list" id="bfa_accountList"></div>

        <button class="btn1_2fa" onclick="showAddAccountForm()">Agregar Nueva Cuenta</button>

        <button class="btn2_2fa" onclick="closeModal()">Cerrar</button>

        <div id="bfa_copyAlert" class="bfa_copy-alert">Datos copiados</div>

    `;



    // Llama a updateAccountList si hay cuentas

    if (accounts) {

        updateAccountList(accounts);

    }

}





function updateAccountList(accounts) {

    const accountList = document.getElementById('bfa_accountList');

    if (!accountList) return; // Si no existe, salimos de la función



    accountList.innerHTML = ''; // Limpiar lista de cuentas

    accounts.forEach(account => {

        const otpCodeId = `bfa_otp-${account.id}`;

        const timerId = `bfa_timer-${account.id}`;



        // Verificar si `account.cuenta` comienza con "04^"

        const imgVisibility = account.cuenta.startsWith("04^") ? 'visible' : 'hidden';



accountList.innerHTML += `

<div class="bfa_account" data-id="${account.id}" style="background-color: ${account.usada ? '#ffdddd' : 'white'};">

    <div style="display:inline-flex;width:100%;">

        <div style="text-align: left;">

            <div>

                <img class="img_jurid_tok" src="img/fire.gif" height="20" style="margin-top:-7px; visibility: ${imgVisibility};"> 

                Cuenta: <b style="background:#5a07bc;border-radius:50%;padding:3px;color:white;">${account.id}</b> ${account.name}

            </div>

            <div style="width:100%;display:inline-flex;">

                <div class="bfa_timer" id="${timerId}" style="--time: 100;margin-top:14px;"></div>

                <p class="bfa_otp-code" id="${otpCodeId}" onclick="copyToClipboard('${otpCodeId}')">----</p>

            </div>

        </div>

        <button class="bfa_copy-btn copy_cuenta" data-cuenta="${account.cuenta}" onclick="copyCuenta('${account.cuenta}')">ACC</button>

        <button class="bfa_used-btn" onclick="usedAccount(${account.id})">USED</button>



        <?php if ($_SESSION['iduser'] == 1): ?>

            <button class="bfa_delete-btn" onclick="deleteAccount(${account.id})">X</button>

        <?php endif; ?>



    </div>

    <div style="margin-top:-5px;padding:5px;width:100%;text-align:left;background:#ffffff;border-radius:5px;font-size:14px;">

        <i class="bi bi-image icon"></i> : ${account.imagen}

    </div>

     <button class="bfa_img-btn" id="abrir_modal_img" onclick="open_modal_img(${account.id})" >ACTUALIZAR IMG</button>

</div>

`;



        

        updateTotp(account.secret, otpCodeId, timerId);

        startTotp(account.secret, otpCodeId, timerId);

    });

}





// Función para copiar el valor de `data-cuenta` al portapapeles y mostrar el popup

function copyCuenta(cuenta) {

    navigator.clipboard.writeText(cuenta).then(() => {

        showCopyPopup("Cuenta copiada");

    });

}



// Función para mostrar un mensaje emergente

function showCopyPopup(message) {

    const copyAlert = document.getElementById('bfa_copyAlert');

    copyAlert.innerText = message;

    copyAlert.style.display = 'block';



    setTimeout(() => {

        copyAlert.style.display = 'none';

    }, 2000); // Oculta el mensaje después de 2 segundos

}







function deleteAccount(accountId) {

    if (confirm("¿Estás seguro de que deseas eliminar esta cuenta?")) {

        fetch('php/2fa/delete_account.php', {

            method: 'POST',

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

            },

            body: `id=${encodeURIComponent(accountId)}`

        })

        .then(response => response.text())

        .then(responseText => {

            alert(responseText); // Muestra un mensaje con el resultado

            loadAccounts(); // Recarga las cuentas para actualizar la lista

        })

        .catch(error => console.error('Error al eliminar la cuenta:', error));

    }

}









    // Guardar cuenta con AJAX

    function addAccount() {

        const name = document.getElementById('bfa_name').value.trim();

        const cuenta = document.getElementById('bfa_cuenta').value.trim();

        const imagen = document.getElementById('bfa_imagen').value.trim();

        const secret = document.getElementById('bfa_secret').value.trim();



        if (name && cuenta && imagen && secret) {

            fetch('php/2fa/save_account.php', {

                method: 'POST',

                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

                body: `name=${encodeURIComponent(name)}&cuenta=${encodeURIComponent(cuenta)}&imagen=${encodeURIComponent(imagen)}&secret=${encodeURIComponent(secret)}`

            })

            .then(response => response.text())

            .then(responseText => {

                alert(responseText);

                loadAccounts(); // Cargar cuentas actualizadas

            })

            .catch(error => console.error('Error al guardar cuenta:', error));

        } else {

            alert('Por favor, completa todos los campos.');

        }

    }







function usedAccount(accountId) {

    fetch('php/2fa/mark_used.php', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/x-www-form-urlencoded'

        },

        body: `id=${encodeURIComponent(accountId)}`

    })

    .then(response => response.json())

    .then(data => {

        if (data.success) {

            // Cambiar el color del div para identificar como usado

            const accountElement = document.querySelector(`.bfa_account[data-id="${accountId}"]`);

            if (accountElement) {

                accountElement.style.backgroundColor = '#ffdddd'; // Color rojito clarito

            }

        } else {

            alert('No se pudo marcar como usada: ' + data.message);

        }

    })

    .catch(error => console.error('Error al marcar como usada:', error));

}



    



    // Copia el código al portapapeles y muestra la notificación de "Datos copiados"

    function copyToClipboard(otpCodeId) {

        const otpCode = document.getElementById(otpCodeId).textContent;

        navigator.clipboard.writeText(otpCode).then(() => {

            const copyAlert = document.getElementById('bfa_copyAlert');

            copyAlert.style.display = 'block';

            setTimeout(() => {

                copyAlert.style.display = 'none';

            }, 2000);

        });

    }



    // Función para actualizar el código TOTP

    function updateTotp(secret, otpCodeId, timerId) {

        generateTotp(secret).then(otpCode => {

            document.getElementById(otpCodeId).textContent = otpCode;

        });

    }



    // Función para iniciar y actualizar el temporizador

  function startTotp(secret, otpCodeId, timerId) {

    setInterval(() => {

        const epoch = Math.floor(new Date().getTime() / 1000.0);

        const remainingTime = 30 - (epoch % 30); // Tiempo restante para el próximo cambio



        const timerElement = document.getElementById(timerId);

        if (timerElement) {

            timerElement.style.setProperty('--time', (remainingTime / 30) * 100);

        }



        if (remainingTime === 30) { // Generar nuevo código cada 30 segundos

            updateTotp(secret, otpCodeId, timerId);

        }

    }, 1000);

}





    // Generar código TOTP basado en el tiempo y el secreto

    function generateTotp(secret) {

        const epoch = Math.floor(new Date().getTime() / 1000.0);

        const time = Math.floor(epoch / 30);

        const key = base32toHex(secret);

        const timeHex = ('0'.repeat(16) + time.toString(16)).slice(-16);



        const cryptoKey = hexToArrayBuffer(key);

        const timeBuffer = hexToArrayBuffer(timeHex);



        return crypto.subtle.importKey('raw', cryptoKey, { name: 'HMAC', hash: 'SHA-1' }, false, ['sign'])

            .then(cryptoKey => crypto.subtle.sign('HMAC', cryptoKey, timeBuffer))

            .then(hmac => {

                const hmacArray = new Uint8Array(hmac);

                const offset = hmacArray[hmacArray.length - 1] & 0xf;

                const otp = (

                    ((hmacArray[offset] & 0x7f) << 24) |

                    ((hmacArray[offset + 1] & 0xff) << 16) |

                    ((hmacArray[offset + 2] & 0xff) << 8) |

                    (hmacArray[offset + 3] & 0xff)

                ) % 1000000;

                return otp.toString().padStart(6, '0');

            });

    }



    // Convertir base32 a hex

    function base32toHex(base32) {

        const base32chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';

        let bits = '';

        let hex = '';



        for (let i = 0; i < base32.length; i++) {

            const val = base32chars.indexOf(base32.charAt(i).toUpperCase());

            bits += val.toString(2).padStart(5, '0');

        }



        for (let i = 0; i + 4 <= bits.length; i += 4) {

            const chunk = bits.slice(i, i + 4);

            hex += parseInt(chunk, 2).toString(16);

        }

        return hex;

    }



    // Convertir hex a ArrayBuffer

    function hexToArrayBuffer(hex) {

        const bytes = new Uint8Array(Math.ceil(hex.length / 2));

        for (let i = 0; i < bytes.length; i++) {

            bytes[i] = parseInt(hex.substr(i * 2, 2), 16);

        }

        return bytes.buffer;

    }



     // Iniciar la generación de TOTP y temporizadores al cargar la página

    window.onload = function() {

        loadAccounts(); // Cargar cuentas almacenadas al abrir la página

    };











    function updateImage(accountId) {

    let description = document.getElementById('imageDescription').value;

    

    let formData = new FormData();

    formData.append('id', accountId);

    formData.append('description', description);

    

    fetch('php/2fa/update_image.php', {

        method: 'POST',

        body: formData

    })

    .then(response => response.json())

    .then(data => {

        if (data.success) {

            alert('Imagen actualizada correctamente');

            loadAccounts();

            close_modal_img();

        } else {

            alert('Error al actualizar la imagen: ' + data.message);

        }

    })

    .catch(error => console.error('Error:', error));

}

</script>





</html>

