<?php
include("../config/conexion.php");

/* CONSULTA */
$q = mysqli_query($cn, "SELECT id, usuario, correo FROM usuarios");
if (!$q) {
    die("Error en la base de datos");
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Usuarios del Curso</title>
<style>
  body {
    font-family: "Poppins", Arial, sans-serif;
    background: #f4f4f4;
    padding: 30px;
  }

  .sheet {
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }

  h1 {
    text-align: center;
    color: #4a148c;
    margin-bottom: 10px;
  }

  .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  th {
    background: linear-gradient(135deg,#4a148c,#e91e63);
    color: #fff;
    padding: 10px;
  }

  td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  tr:nth-child(even) {
    background: #f9f9f9;
  }

  .footer {
    margin-top: 30px;
    font-size: 13px;
    text-align: center;
    color: #555;
  }

  .actions {
    text-align: center;
    margin-top: 30px;
  }

  .btn {
    padding: 10px 18px;
    background: #ff9800;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
  }

  @media print {
    .actions { display: none; }
    body { background: #fff; }
  }
</style>
</head>
<body>

<div class="sheet">
  <h1>Usuarios del Curso de Lengua y Literatura</h1>
  <div class="subtitle">
    Generado por el mejor curso y el mejor programador:<br>
    <strong>EVLU Elvis Santamaría</strong>
  </div>

  <table>
    <tr>
      <th>ID</th>
      <th>Usuario</th>
      <th>Correo</th>
    </tr>
    <?php while($r = mysqli_fetch_assoc($q)) { ?>
    <tr>
      <td><?php echo $r['id']; ?></td>
      <td><?php echo htmlspecialchars($r['usuario']); ?></td>
      <td><?php echo htmlspecialchars($r['correo']); ?></td>
    </tr>
    <?php } ?>
  </table>

  <div class="footer">
    Documento generado automáticamente por el sistema académico
  </div>
</div>

<div class="actions">
  <button class="btn" onclick="window.print()">🖨️ Imprimir / Guardar como PDF</button>
</div>

</body>
</html>