<?php
session_start();
if (!isset($_SESSION['rol']) || $_SESSION['rol'] !== 'admin') {
    header('Location: ../../index.php');
    exit();
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Historial de Movimientos</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap 5 + FontAwesome + MDB -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet" />
  <link href="../assets/css/recruiter.css" rel="stylesheet" />
</head>
<body  class="bg-light">
<div class="d-flex">
  <?php include '../includes/sidebar.php'; ?>
  <div class="main-content" id="mainContent">
    <?php include '../includes/topbar.php'; ?>

    <div class="container-fluid p-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Historial de Movimientos</h2>
        <a href="movimientos-admin.php" class="btn btn-outline-secondary">
          <i class="fas fa-arrow-left me-2"></i>Regresar
        </a>
      </div>

      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="mb-0">Movimientos realizados por administradores</h5>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-striped align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th>Fecha</th>
                  <th>Administrador</th>
                  <th>Aspirante</th>
                  <th>De</th>
                  <th>A</th>
                </tr>
              </thead>
              <tbody id="tabla-movimientos">
                <!-- Se llenará con JavaScript -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div><!-- /container-fluid -->
  </div><!-- /main-content -->
</div><!-- /d-flex -->

<script>
document.addEventListener('DOMContentLoaded', () => {
  fetch('../../backend/admin/get_movimientos.php')
    .then(r => r.json())
    .then(data => {
      if (!data.success) return;

      const tbody = document.getElementById('tabla-movimientos');
      data.movimientos.forEach(mov => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${mov.fecha}</td>
          <td>${mov.admin_nombre}</td>
          <td>${mov.aspirante_nombre}</td>
          <td>${mov.attuid_anterior}</td>
          <td>${mov.attuid_nuevo}</td>
        `;
        tbody.appendChild(tr);
      });
    })
    .catch(err => {
      console.error('Error al cargar movimientos:', err);
    });
});
</script>
</body>
</html>
