document.addEventListener('DOMContentLoaded', function() {
    // Función para cargar datos desde el backend
    function cargarDatos() {
      fetch('backend/get_datos.php') // Cambia el nombre del archivo PHP según corresponda
        .then(response => response.json())
        .then(data => {
          console.log('Datos cargados:', data);
          if (data.data) {
            mostrarDatosEnTabla(data.data);
          } else {
            console.error('No se encontraron datos en la respuesta.');
          }
        })
        .catch(error => {
          console.error('Error al cargar datos:', error);
        });
    }

    // Función para mostrar los datos en la tabla
    function mostrarDatosEnTabla(datos) {
      const tbody = document.querySelector('#fileTable tbody');
      tbody.innerHTML = ''; // Limpiar contenido existente

      datos.forEach(dato => {
        const estadoBadge = obtenerBadgeEstado(dato.estado);

        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${dato.id}</td>
          <td>${dato.año}</td>
          <td>${dato.mes}</td>
          <td>${dato.dia}</td>
          <td>${dato.fecha}</td>
          <td>${dato.usuario_solicitante || ''}</td>
          <td>${dato.usuario_respuesta || ''}</td>
          <td>${dato.proveedor}</td>
          <td>${dato.banco}</td>
          <td>${dato.cuenta}</td>
          <td>${dato.cantidad}</td>
          <td><span class="badge ${estadoBadge}">${dato.estado || ''}</span></td>
           <td>
          <div class="btn-group">
            <button type="button" class="btn btn-info 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="#">Responder</a></li>
              <li><a class="dropdown-item view-btn" href="#">Eliminar</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);
      });
    }

    // Función para obtener la clase del badge según el estado
    function obtenerBadgeEstado(estado) {
      switch (estado) {
        case 'Solicitado':
          return 'bg-warning text-dark'; // Amarillo
        case 'Respondido':
          return 'bg-success'; // Verde
        case 'Actualizado':
          return 'bg-primary'; // Azul
        case 'Eliminado':
          return 'bg-danger'; // Rojo (puedes ajustar el color según prefieras)
        default:
          return 'bg-secondary'; // Gris para estados desconocidos
      }
    }

    // Función para ver detalles (implementa según tus necesidades)
    function verDetalles(id) {
      console.log('Ver detalles para ID:', id);
      // Implementa la lógica para mostrar detalles
    }

    // Cargar datos al cargar la página
    cargarDatos();
  });