<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista de Usuarios</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        $.ajax({
            url: 'listar_usuarios_masivo.php',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                let tableRows = '';
                data.forEach(usuario => {
                    tableRows += `
                        <tr class="border-b hover:bg-gray-50 transition">
                            <td class="p-2">${usuario.id}</td>
                            <td class="p-2">${usuario.nombres} ${usuario.apellido_paterno} ${usuario.apellido_materno}</td>
                            <td class="p-2">${usuario.tipo_documento} - ${usuario.numero_documento}</td>
                            <td class="p-2">${usuario.fecha_nacimiento}</td>
                            <td class="p-2">${usuario.fecha_ingreso}</td>
                            <td class="p-2">${usuario.direccion}</td>
                            <td class="p-2">${usuario.distrito}</td>
                            <td class="p-2">${usuario.email}</td>
                            <td class="p-2">${usuario.telefono}</td>
                            <td class="p-2">${usuario.cargo}</td>
                            <td class="p-2">${usuario.numero_cuadrilla}</td>
                            <td class="p-2">${usuario.perfil}</td>
                            <td class="p-2">${usuario.vehiculo} ${usuario.placa ? '- ' + usuario.placa : ''}</td>
                            <td class="p-2">${usuario.ctr} ${usuario.numero_ctr ? '- ' + usuario.numero_ctr : ''}</td>
                            <td class="p-2">${usuario.zona_trabajo}</td>
                            <td class="p-2">${usuario.tipo_banco}</td>
                            <td class="p-2">${usuario.numero_cuenta}</td>
                            <td class="p-2">${usuario.estado}</td>
                            <td class="p-2">${usuario.fecha_registro}</td>
                        </tr>
                    `;
                });
                $('#tabla-usuarios tbody').html(tableRows);
            },
            error: function() {
                alert('Error al cargar los usuarios.');
            }
        });
    });
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 bg-gray-100 min-h-screen text-sm text-gray-800">
    <div class="max-w-full mx-auto bg-white rounded-xl shadow-lg p-4">
        <h2 class="text-2xl font-bold mb-4 text-blue-700">Lista de Usuarios Registrados</h2>
        <div class="overflow-x-auto">
            <table id="tabla-usuarios" class="min-w-full border border-gray-200 text-left text-xs md:text-sm">
                <thead class="bg-blue-100 text-gray-700 uppercase tracking-wider">
                    <tr>
                        <th class="p-2">ID</th>
                        <th class="p-2">Nombres</th>
                        <th class="p-2">Documento</th>
                        <th class="p-2">F. Nacimiento</th>
                        <th class="p-2">F. Ingreso</th>
                        <th class="p-2">Dirección</th>
                        <th class="p-2">Distrito</th>
                        <th class="p-2">Email</th>
                        <th class="p-2">Teléfono</th>
                        <th class="p-2">Cargo</th>
                        <th class="p-2"># Cuadrilla</th>
                        <th class="p-2">Perfil</th>
                        <th class="p-2">Vehículo</th>
                        <th class="p-2">CTR</th>
                        <th class="p-2">Zona</th>
                        <th class="p-2">Banco</th>
                        <th class="p-2"># Cuenta</th>
                        <th class="p-2">Estado</th>
                        <th class="p-2">Registrado</th>
                    </tr>
                </thead>
                <tbody class="bg-white">
                    <!-- Llenado dinámico por AJAX -->
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
