document.addEventListener('DOMContentLoaded', () => {
    // Datos de ejemplo
    const fileData = [
      {
        id: 1,
        año: 2024,
        mes: "Julio",
        día: 23,
        fecha: "2024-07-23",
        solicitante: "Usuario A",
        respuesta: "Usuario B",
        proveedor: "Proveedor X",
        banco: "Banco Y",
        cuenta: "123456789",
        cantidadRespuestas: 3,
        estado: "Completado"
      },
      {
        id: 2,
        año: 2024,
        mes: "Julio",
        día: 22,
        fecha: "2024-07-22",
        solicitante: "Usuario C",
        respuesta: "Usuario D",
        proveedor: "Proveedor Z",
        banco: "Banco W",
        cuenta: "987654321",
        cantidadRespuestas: 2,
        estado: "Pendiente"
      }
    ];
  
    // Renderizar datos en la tabla
    const tbody = document.querySelector('#fileTable tbody');
    fileData.forEach(data => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${data.id}</td>
        <td>${data.año}</td>
        <td>${data.mes}</td>
        <td>${data.día}</td>
        <td>${data.fecha}</td>
        <td>${data.solicitante}</td>
        <td>${data.respuesta}</td>
        <td>${data.proveedor}</td>
        <td>${data.banco}</td>
        <td>${data.cuenta}</td>
        <td>${data.cantidadRespuestas}</td>
        <td>${data.estado}</td>
        <td>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Acciones
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item edit-btn" href="#">Editar</a></li>
              <li><a class="dropdown-item view-btn" href="#">Ver</a></li>
              <li><a class="dropdown-item pdf-btn" href="#">Generar PDF</a></li>
              <li><a class="dropdown-item add-btn" href="#">Agregar</a></li>
            </ul>
          </div>
        </td>
      `;
      tbody.appendChild(tr);
    });
  
    // Filtrar datos
    document.querySelectorAll('#fileTable thead input').forEach((input, index) => {
      input.addEventListener('input', () => {
        const column = input.dataset.column;
        const value = input.value.toLowerCase();
        document.querySelectorAll('#fileTable tbody tr').forEach(row => {
          const cellText = Array.from(row.children).map((cell, i) => {
            if (i === 4) { // La celda "Fecha" ocupa dos columnas
              return row.children[i].textContent.toLowerCase() + row.children[i + 1].textContent.toLowerCase();
            }
            return cell.textContent.toLowerCase();
          });
          const isMatch = cellText.some(cell => cell.includes(value));
          row.style.display = isMatch ? '' : 'none';
        });
      });
    });
  
    // Eventos para botones de acciones
    document.querySelector('#fileTable').addEventListener('click', (event) => {
      const target = event.target;
      if (target.classList.contains('edit-btn')) {
        alert('Editar archivo para ID: ' + target.closest('tr').children[0].textContent);
      } else if (target.classList.contains('view-btn')) {
        alert('Ver archivo para ID: ' + target.closest('tr').children[0].textContent);
      } else if (target.classList.contains('pdf-btn')) {
        alert('Generar PDF para ID: ' + target.closest('tr').children[0].textContent);
      } else if (target.classList.contains('add-btn')) {
        alert('Agregar archivo para ID: ' + target.closest('tr').children[0].textContent);
      }
    });
  });
