<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Fracción I - Inciso ñ)</title>
  <link rel="stylesheet" href="../menu.css" />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
    }

    main {
      padding: 90px 20px 40px;
      max-width: 1100px;
      margin: 0 auto;
    }

    h1, h2 {
      color: #2b3e5c;
    }

    .tabs {
      margin-bottom: 40px;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      background-color: #fafafa;
    }

    .tab-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .tab-buttons button {
      padding: 6px 12px;
      border: 1px solid #ccc;
      background-color: #ffffff;
      color: #2b3e5c;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .tab-buttons button.active {
      background-color: #2b3e5c;
      color: #ffffff;
      font-weight: bold;
      border-color: #2b3e5c;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }

    th {
      background-color: #f0f0f0;
    }

    tr:hover {
      background-color: #f9f9f9;
    }

    a {
      color: #0066cc;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

<?php include("../menu.php"); ?>

<main>
  <h1>Fracción I - Información necesaria para el ejercicio del derecho a la información pública</h1>
  <h2>Inciso ñ) Estadística de solicitudes de información pública y visitas al sistema</h2>

<?php
  $ruta = "../Transparencia/Fraccion1/nn/";
  $años = range(2022, 2027);
  $meses = [
    'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
    'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
  ];

  $archivos_organizados = [];

  if (is_dir($ruta)) {
    $todos = scandir($ruta);
    foreach ($todos as $archivo) {
      if ($archivo === "." || $archivo === "..") continue;

      $nombre = strtolower($archivo);
      $ext = pathinfo($archivo, PATHINFO_EXTENSION);
      if (!in_array($ext, ['pdf', 'docx'])) continue;

      foreach ($años as $año) {
        if (strpos($nombre, (string)$año) !== false) {
          foreach ($meses as $mes) {
            if (strpos($nombre, $mes) !== false) {
              $archivos_organizados[$año][$mes][] = $archivo;
              break;
            }
          }
          break;
        }
      }
    }
  }
?>

<?php foreach ($años as $año): ?>
  <section class="tabs">
    <h2><?php echo $año; ?></h2>
    <div class="tab-buttons" id="buttons-<?php echo $año; ?>">
      <?php foreach ($meses as $i => $mes): ?>
        <button onclick="showTab('<?php echo $año; ?>', '<?php echo $mes; ?>')" <?php if ($i === 0) echo 'class="active"'; ?>>
          <?php echo ucfirst($mes); ?>
        </button>
      <?php endforeach; ?>
    </div>

    <div id="content-<?php echo $año; ?>">
      <?php foreach ($meses as $i => $mes): ?>
        <div id="content-<?php echo $año; ?>-<?php echo $mes; ?>" class="tab-content <?php if ($i === 0) echo 'active'; ?>">
          <table>
            <thead>
              <tr>
                <th>Documento</th>
                <th>Enlace</th>
              </tr>
            </thead>
            <tbody>
              <?php
                if (!empty($archivos_organizados[$año][$mes])) {
                  foreach ($archivos_organizados[$año][$mes] as $archivo) {
                    $nombre_legible = ucwords(str_replace(['-', '_'], ' ', pathinfo($archivo, PATHINFO_FILENAME)));
                    echo "<tr>
                            <td>" . htmlspecialchars($nombre_legible) . "</td>
                            <td><a href=\"$ruta$archivo\" target=\"_blank\">Ver documento</a></td>
                          </tr>";
                  }
                } else {
                  echo "<tr><td colspan='2'>No hay documentos para este mes.</td></tr>";
                }
              ?>
            </tbody>
          </table>
        </div>
      <?php endforeach; ?>
    </div>
  </section>
<?php endforeach; ?>

</main>

<script>
  function showTab(año, mes) {
    const contenedor = document.getElementById(`content-${año}`);
    const tabs = contenedor.querySelectorAll(".tab-content");
    tabs.forEach(tab => tab.classList.remove("active"));

    const botones = document.querySelectorAll(`#buttons-${año} button`);
    botones.forEach(b => b.classList.remove("active"));

    const mostrar = document.getElementById(`content-${año}-${mes}`);
    const boton = document.querySelector(`#buttons-${año} button[onclick*="${mes}"]`);

    if (mostrar) mostrar.classList.add("active");
    if (boton) boton.classList.add("active");
  }
</script>

</body>
</html>
