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

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

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

require $rutaBase.'header.php';
?>
<!--==================================================================================================================-->
<style type="text/css">

.table-bordered th {
    padding: 0; /* Elimina padding de las celdas */
     border:solid;
  }
  
  .table-bordered td {
    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; /* Asegura que el texto sea negro */
}

button[disabled] .numero-grande {
    color: black; /* Mantener el color negro cuando el botón está deshabilitado */
}
  
  
 .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;
    }
}
 label {
            color: white;
        }



</style>
<section class="content">
  <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>
         <button class="btn btn-primary btn-sm" onclick="generarcarton()">Generar cartones</button>
      </div>
    </div>

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


    <!--========================================== Tabla ==========================================-->
    <div class="container-fluid" id="tabla">
      <div class="row">
        <div class="col-12">
          <div class="card" id="listadoregistros">

            <div class="card-body" id="contenedorDatatable" style="background:  #243443 ;">

           

  <div class="row align-items-end">
    <div class="form-group col-md-2 col-sm-6 col-xs-1">
        <label>Letra</label>
        <select name="letra" id="letra" class="form-control">
            <option value="">Seleccione Letra</option>
            <option value="B">B</option>
            <option value="I">I</option>
            <option value="N">N</option>
            <option value="G">G</option>
            <option value="O">O</option>
        </select>
    </div>

    <div class="form-group col-md-1 col-sm-6 col-xs-1">
        <label>Numero</label>
        <input type="number" name="numero" id="numero" class="form-control" placeholder="" maxlength="2" required>
    </div>

    <div class="form-group col-md-1 col-xs-12 d-flex align-items-end">
        <button class="btn btn-primary btn-sm" onclick="enviarNumeroYLetra()">Cantar</button>
    </div>
    
    <div class="form-group col-md-5 col-xs-12 d-flex align-items-end">
        <button type="submit" name="btnEmpezar" id="btnEmpezar" class="btn btn-success mr-2" onclick="EmpezarPartida()">
            <i class="fa fa-play"></i> Empezar Partida
        </button>
        <button type="submit" name="btnFinalizar" id="btnFinalizar" class="btn btn-danger" onclick="FinalizarPartida()">
            <i class="fa fa-flag-checkered"></i> Finalizar Partida
        </button>
    </div>
     <div class="form-group col-md-2 col-sm-6 col-xs-1">
        <label>Actualizar Video En Vivo </label>
        <input type="text" name="url" id="url" class="form-control" placeholder="" maxlength="255" >
    </div>

    <div class="form-group col-md-1 col-xs-12 d-flex align-items-end">
        <button class="btn btn-primary btn-sm" onclick="enviarURL()">Enviar</button>
    </div>
</div>
<div class="row">
  <div class="form-group col-md-6 col-sm-6">
    <div class="card card-outline card-success collapsed-card">
      <div class="card-header">
        <h3 class="card-title">Usuarios en Línea</h3>
        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-card-widget="collapse" onclick="listarjugador()">
            <i class="fas fa-users" style="color:white; background: #198754; padding: 8px; 
            border-radius: 5px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2);"></i>
          </button>
        </div>
      </div>

      <div class="card-body"> 
        <table id="datatable" class="table table-striped table-dark">
          <thead>
            <tr align="center">
              <th>Usuarios</th>  
            </tr>
          </thead>
          <tbody>
            <tr>
              <th></th>
            </tr>                      
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="form-group col-md-6 col-sm-6">
    <div class="card card-outline card-primary collapsed-card">
      <div class="card-header">
        <h3 class="card-title">Cartón Ganador</h3>
        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-card-widget="collapse" onclick="listarcartonganador()">
            <i class="fas fa-trophy" 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>

      <div class="card-body"> 
        <div id="tuContenedor">
          <!--Contenido generado dinámicamente-->
        </div>
      </div>
    </div>
  </div>
</div>
              </div>
            </div>   
          </div>
        </div>
      </div>
    </div>
  </section>
<input type="hidden" name="id_user" id="id_user" value="<?php echo $_SESSION['_AL_id_bingo']; ?>" class="form-control" readonly>
  <!-- Fin Contenido PHP-->
  <?php
  require $rutaBase.'footer.php';
  ?>

  <script type="text/javascript" src="scripts/administrador.js<?php echo '?r='.date('Y-m-d H:i:s');?>"></script>
<script src="scripts/cierre-sesion.js"></script>
  <?php 
  ob_end_flush();
?>