<?php
// Activamos el almacenamiento en el buffer
ob_start(); 
session_start();

// Definimos la variable $rutaBase
$rutaBase = "../";

// Verificar si el usuario ha iniciado sesión 
if (!isset($_SESSION['_AL_id_bingo'])) { 
  header('Location: '.$rutaBase.'login.php?Acceso_No_Permitido');
  exit;
}

require $rutaBase.'header.php';
?>

<?php if (isset($_SESSION['vio_anuncio']) && $_SESSION['vio_anuncio'] == 0): ?>
<script>
  // Esperar que el contenido de la página se haya cargado
  window.onload = function() {
    // Simulamos el clic en el botón automáticamente
    document.getElementById('anuncio-btn').click();
  };
</script>
<?php endif; ?>

<!--==================================================================================================================-->
<style type="text/css">
   .table-bordered td {
    padding: 0; /* Elimina padding de las celdas */
    border:solid;
  }

  .table-bordered th {
    padding: 0; /* Elimina padding de las celdas */
     border:solid;
  }

  .table-bordered .btn {
    width: 100%; /* Ancho del botón al 100% */
    height: 100%; /* Alto del botón al 100% */
    border: none; /* Sin borde */

    display: block; /* Cambiar a bloque para que ocupe el espacio */
  }

  .table-bordered .btn:focus {
    outline: none; /* Quita el outline cuando está enfocado */
  }

  table {


    text-align: center; /* Centra el texto en toda la tabla */
  }
  th {
    font-size: 20px; /* Tamaño de letra más grande */

  }
  
  .numero-grande {
    font-size: 20px;
    font-weight: bold;
    color: black; 
}

button[disabled] .numero-grande {
    color: black; 
}

.b, .i, .n, .g, .o {
  width: 1px; /* Ajusta el tamaño según sea necesario */
  height: 30px; /* Ajusta el tamaño según sea necesario */  
  border-radius: 50%; /* Esto crea la forma de círculo */

  
}
  .b { background-color: #fbcd2f; } /* Color para la columna B */
  .i { background-color: #fbf91b; } /* Color para la columna I */
  .n { background-color: #f89cf6; } /* Color para la columna N */
  .g { background-color: #2ca0a5; } /* Color para la columna G */
  .o { background-color: #27d8e2; } /* Color para la columna O */
  
 .bola {  
    width: 50px;  
    height: 50px;  
    border-radius: 50%;  
    background-color: #0e0e0e;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    cursor: pointer;  
    color: #fff; /* Cambia a blanco o el color que prefieras para el texto */
    font-size: 15px;  /* Ajusta el tamaño de la letra como prefieras */
    font-weight: bold; /* Pone el texto en negrita */
   
  }

#contenedorbolas {
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px; 
    overflow-x: auto;  
    
}

  .contenedorbolas {
    position: relative;  
    overflow-x: hidden; /* Mantiene el mismo efecto */
  }


.slide-in {
    animation: slideIn 0.5s ease-in-out; /* Ajusta la duración y la curva si lo deseas */
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.video-container {
    width: 100%; /* Ocupa el 100% del ancho */
    max-width: 800px; /* Ancho máximo en píxeles */
    height: 250px; /* Altura en píxeles */
    margin: auto; /* Centra el contenedor */
    position: relative; /* Para el iframe */
    overflow: hidden; /* Para evitar desbordamientos */
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none; /* Elimina el borde del iframe */
}


.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 80%; /* Aumentar el ancho para móviles */
    max-width: 400px; /* Limitar el ancho máximo */
    opacity: 0;
    pointer-events: none;
    height: auto;
    transform: translate(-50%, -70%);
    text-align: center; /* Centrar contenido */
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: -15px;
    right: -3px;
    color: black; /* Cambiar color a negro */
    cursor: pointer;
    font-size: 24px; /* Tamaño de fuente para visibilidad */
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5; /* Asegurarse de que este detrás del popup */
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}



form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}


.login-box, .register-box {
    display: flex;                      /* Activar Flexbox */
    justify-content: center;            /* Centrar horizontalmente */
    align-items: center;                /* Centrar verticalmente */
    height: 100vh; 
        width: 100%;                           /* Ocupa toda la altura de la ventana */
}


</style>

<section class="content">
   <div class="mostrarlogin">
      <div class="container-fluid">



        <!--==---------------------------------------------------------------------------------==-->

        <div class="card card-primary" id="card_header" style="margin-bottom: 2px;">
          <div class="card-header">
            <b>Numeros Cantados</b>
            <div id="contenedorbolas" style="display: flex; gap: 10px;">
            </div>
        </div>
    </div>
   
    <!--==---------------------------------------------------------------------------------==-->
    <div class="col-12" id="formulariobusqueda" style="margin-bottom: -13px;">
      <div class="card card-outline card-primary collapsed-card">

        <div class="card-header">
          <h3 class="card-title">Elegir Cartones</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" onclick="listarinactivo()">
              <i class="fas fa-plus" style="color:white; background: #0069d9; padding: 8px; 
              border-radius: 5px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2);"></i>
          </button>
      </div>
  </div><!--FIN CARD HEADER-->

  <div class="card-body" style="background:  #243443 ;">
      <!--========================================== Formulario De Consulta ==========================================-->
      <form role="form" name="formulario_consulta" id="formulario_consulta" method="POST">

        <div class="form-group col-md-3 col-sm-6 col-xs-1">
            <input type="text" id="busquedaCarton" class="form-control" placeholder="Buscar por N° de Cartón" onkeyup="listarinactivo()">
        </div> 
        <div id="tuContenedor">

            <!--Contenido generado dinamicamente-->

        </div>

    </form>
    <!--========================================== FIN Formulario De Consulta ==========================================-->
    <div class="card-footer">

    </div><!--FIN CARD FOOTER-->
</div><!--FIN CARD BODY-->
</div><!--FIN CARD COLLAPSE-->
</div><!--FIN FORMULARIOBUSQUEDA-->


<!--========================================== Tabla ==========================================-->
<div class="container-fluid" id="tabla">
    <div class="row">
      <div class="col-12">
        <div class="card" id="listadoregistros" style="background:  #243443 ;">

          <div class="card-body" id="contenedorDatatable">
            <h4 align="center" style="color: white;">Cartones Elegidos</h4>

            <div id="tuContenedorElegido">

              <!--Contenido generado dinamicamente-->

          </div>


      </div>
  </div>
</div>

</div><!--FIN ROW-->
<div class="col-md-8">
    <div class="video-container" id="contenedorVideo">

    </div><!--FIN CONTENEDOR VIDEO-->
</div><!--FIN COL MD-8-->
</div><!--FIN DIV TABLA-->
</div>
<button class="login-btn" id="anuncio-btn">ANUNCIO</button>



</div>
</section>

<input type="hidden" name="id_user" id="id_user" value="<?php echo $_SESSION['_AL_id_bingo']; ?>" class="form-control" readonly>

<div class="blur-bg-overlay"></div>
<div class="form-popup">
    <span class="close-btn material-symbols-rounded"><i class="fa-solid fa-rectangle-xmark"></i></span>
    
    <img src="../../public/images/modal.png" alt="Logo" width="300" height="450" style="max-width: 100%; height: auto;"/> <!-- Asegúrate que la imagen se ajuste -->
</div>


    

  <!-- Fin Contenido PHP-->
  <?php
  require $rutaBase.'footer.php';
  ?>

  <script type="text/javascript" src="scripts/jugador.js<?php echo '?r='.date('Y-m-d H:i:s');?>"></script>
<script src="scripts/cierre-sesion.js">
  
</script>
<script type="text/javascript">
    const navbarMenu = document.querySelector(".mostrarlogin");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

</script>
  <?php 
  ob_end_flush();
?>