<?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 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; /* 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 */
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>Historial de Compras</b>
        
        </div>
      </div>
    </div>
    <!--==---------------------------------------------------------------------------------==-->
    <div class="col-12" id="formulariobusqueda" style="margin-bottom: -13px;">
     
  </div>


  <!--========================================== 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">
            <div class="row"> 
          <div class="form-group col-sm-3 col-xs-12" id="usuariodiv">
            <label>Total Cartones Comprados</label>
            <input type="text" name="cartonesC" id="cartonesC" class="form-control" placeholder="Cartones Comprados" readonly>

            <span id="messageR" class="usuario-message" style="color:red;"></span>
          </div>

          <div class="form-group col-sm-3 col-xs-12">
            <label>Total Partidas Jugadas</label>
            <input type="text" name="partidasJ" id="partidasJ" class="form-control" placeholder="Partidas Jugadas" maxlength="100" readonly> 
          </div>

          <div class="form-group col-sm-3 col-xs-12">
            <label>Total Partidas Ganadas</label>
            <input type="text" name="totalpg" id="totalpg" class="form-control" placeholder="Partidas Ganadas" maxlength="100" readonly> 
          </div>
</div>
            <h4 align="center" style="color: white;">Cartones Comprados</h4>

            <div id="tuContenedorElegidoHistorial">

              <!--Contenido generado dinamicamente-->

            </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/historial.js<?php echo '?r='.date('Y-m-d H:i:s');?>"></script>
<script src="scripts/cierre-sesion.js"></script>
  <?php 
  ob_end_flush();
?>