<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Incluir Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-50">

    <div class="flex h-screen">
<!-- Sidebar -->
<div class="w-64 bg-blue-800 text-white p-6 flex flex-col justify-between shadow-lg rounded-r-3xl">
    <div>
        <h1 class="text-3xl font-bold mb-8">Dashboard</h1>
        <nav>
            <ul>
                <li class="mb-4 flex items-center space-x-4">
                    <!-- Icono de Trabajos -->
                    <i class="fas fa-briefcase h-6 w-6 text-blue-300"></i>
                    <a href="https://qodifica.com/sistema_liquidaciones/trabajos.php" class="text-lg hover:text-blue-300 transition duration-300">Trabajos</a>
                </li>
                <li class="mb-4 flex items-center space-x-4">
                    <!-- Icono de Personal -->
                    <i class="fas fa-user h-6 w-6 text-blue-300"></i>
                    <a href="https://qodifica.com/sistema_liquidaciones/personal.php#" class="text-lg hover:text-blue-300 transition duration-300">Personal</a>
                </li>
                <li class="mb-4 flex items-center space-x-4">
                    <!-- Icono de Series -->
                    <i class="fas fa-list h-6 w-6 text-blue-300"></i>
                    <a href="https://qodifica.com/sistema_liquidaciones/series.php#" class="text-lg hover:text-blue-300 transition duration-300">Series</a>
                </li>
                <li class="mb-4 flex items-center space-x-4">
                    <!-- Icono de Lista de Trabajos Liquidados -->
                    <i class="fas fa-check-circle h-6 w-6 text-blue-300"></i>
                    <a href="https://qodifica.com/sistema_liquidaciones/lista_trabajos_liquidados.php" class="text-lg hover:text-blue-300 transition duration-300">Trabajos Liquidados</a>
                </li>
            </ul>
        </nav>
    </div>
</div>


        <!-- Main content -->
        <div class="flex-1 p-8 overflow-y-auto">
            <div class="bg-white p-8 rounded-xl shadow-2xl">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6">Bienvenido al Dashboard</h2>
                <p class="text-gray-600">Aquí puedes gestionar todas las configuraciones y ver los reportes de tu sistema.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8">
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Usuarios Activos</h3>
                    <p class="text-gray-600 text-3xl font-bold">150</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Ventas Mensuales</h3>
                    <p class="text-gray-600 text-3xl font-bold">$10,250</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Nuevas Suscripciones</h3>
                    <p class="text-gray-600 text-3xl font-bold">30</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Tickets Abiertos</h3>
                    <p class="text-gray-600 text-3xl font-bold">5</p>
                </div>
            </div>
             <div class="bg-white p-8 rounded-xl shadow-2xl">
                  <!-- Sección de botones -->
            <div class="mb-8">
                <div class="flex justify-end space-x-4">
                    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-blue-500 transition duration-300">
                        <i class="fas fa-search mr-2"></i> Buscar
                    </button>
                    <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                        <i class="fas fa-plus mr-2"></i> Añadir
                    </button>
                    <button class="bg-yellow-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-yellow-500 transition duration-300">
                        <i class="fas fa-edit mr-2"></i> Editar
                    </button>
                    <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                        <i class="fas fa-trash mr-2"></i> Eliminar
                    </button>
                    <button class="bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-gray-500 transition duration-300">
                        <i class="fas fa-check mr-2"></i> Aceptar
                    </button>
                    <button id="openModal" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Agregar Personal</button>
                </div>
            </div>

                 <!-- Tabla con lista predefinida -->
            <div class="overflow-x-auto bg-white shadow-2xl rounded-lg">
                 <div id="lista_usuarios" class="overflow-x-auto"></div>
            </div>
            </div>
        </div>
        

    </div>

</body>

</html>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>


<div id="personaModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-3xl w-full">
        <h2 class="text-xl font-bold mb-4">Registro de Usuario</h2>
        <form id="formRegistro" enctype="multipart/form-data" class="grid grid-cols-2 gap-4">
            <input type="text" name="nombres" placeholder="Nombres" required class="border rounded p-2">
            <input type="text" name="apellido_paterno" placeholder="Apellido Paterno" required class="border rounded p-2">
            <input type="text" name="apellido_materno" placeholder="Apellido Materno" required class="border rounded p-2">
            <select name="tipo_documento" required class="border rounded p-2">
                <option value="DNI">DNI</option>
                <option value="Pasaporte">Pasaporte</option>
            </select>
            <input type="text" name="numero_documento" placeholder="Número de Documento" required class="border rounded p-2">
            <input type="file" name="foto_dni" required class="border rounded p-2">
            <input type="date" name="fecha_nacimiento" required class="border rounded p-2">
            <input type="date" name="fecha_ingreso" required class="border rounded p-2">
            <input type="text" name="direccion" placeholder="Dirección" required class="border rounded p-2">
            <input type="text" name="distrito" placeholder="Distrito de Residencia" required class="border rounded p-2">
            <input type="email" name="email" placeholder="Email" required class="border rounded p-2">
            <input type="text" name="telefono" placeholder="Número de Teléfono" required class="border rounded p-2">
            <select name="cargo" required class="border rounded p-2">
                <option value="Supervisor">Supervisor</option>
                <option value="Técnico de Campo">Técnico de Campo</option>
                <option value="Coordinador de Certificaciones">Coordinador de Certificaciones</option>
                <option value="Coordinador de Operaciones">Coordinador de Operaciones</option>
                <option value="Supervisor Técnico y Logístico">Supervisor Técnico y Logístico</option>
                <option value="Gerente General">Gerente General</option>
                <option value="Coordinador de Tesorería">Coordinador de Tesorería</option>
            </select>
            <input type="text" name="numero_cuadrilla" placeholder="Número de Cuadrilla" class="border rounded p-2">
            <select name="perfil" required class="border rounded p-2">
                <option value="T1">T1</option>
                <option value="T2">T2</option>
            </select>
            <select name="vehiculo" id="vehiculo" class="border rounded p-2">
                <option value="">¿Tiene vehículo? (Opcional)</option>
                <option value="Sí">Sí</option>
                <option value="No">No</option>
            </select>
            <input type="text" id="placa" name="placa" placeholder="Placa (Opcional)" class="border rounded p-2 hidden">
            <select name="ctr" id="ctr" class="border rounded p-2">
                <option value="No">CTR: No</option>
                <option value="Sí">CTR: Sí</option>
            </select>
            <input type="text" id="numero_ctr" name="numero_ctr" placeholder="Número CTR (Opcional)" class="border rounded p-2 hidden">
            <select name="estado" required class="border rounded p-2">
                <option value="Activo">Activo</option>
                <option value="Anulado">Anulado</option>
                <option value="Baja">Baja</option>
            </select>
            <button type="submit" class="col-span-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Registrar</button>
        </form>
        <button id="closeModal" class="mt-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 w-full">Cerrar</button>
    </div>
</div>

<script>
    document.getElementById("openModal").addEventListener("click", function() {
        document.getElementById("personaModal").classList.remove("hidden");
    });

    document.getElementById("closeModal").addEventListener("click", function() {
        document.getElementById("personaModal").classList.add("hidden");
    });
</script>
  
    
    <script>
        $(document).ready(function () {
            function cargarLista() {
                $("#lista_usuarios").load("listar_usuarios.php", function() {
                    $("table").addClass("w-full border-collapse border border-gray-300");
                    $("th, td").addClass("border border-gray-300 px-4 py-2 text-center");
                    $("th").addClass("bg-blue-500 text-white");
                });
            }
            cargarLista();
            // setInterval(cargarLista, 5000);

            $("#formRegistro").on("submit", function (e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: "procesar_registro.php",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (respuesta) {
                        mostrarAlerta(respuesta, 'bg-green-500');
                        cargarLista();
                    },
                    error: function () {
                        mostrarAlerta("Error al registrar usuario", 'bg-red-500');
                    }
                });
            });

            // Mostrar campo de Placa si el usuario tiene vehículo
            $("#vehiculo").on("change", function () {
                if ($(this).val() === "Sí") {
                    $("#placa").removeClass("hidden");
                } else {
                    $("#placa").addClass("hidden").val("");
                }
            });

            // Mostrar campo de Número CTR si selecciona "Sí"
            $("#ctr").on("change", function () {
                if ($(this).val() === "Sí") {
                    $("#numero_ctr").removeClass("hidden");
                } else {
                    $("#numero_ctr").addClass("hidden").val("");
                }
            });

        });

        function mostrarAlerta(mensaje, color) {
            let alerta = $('<div class="fixed top-5 right-5 px-4 py-2 text-white rounded shadow-lg ' + color + '">' + mensaje + '</div>');
            $('body').append(alerta);
            setTimeout(() => alerta.fadeOut(500, () => alerta.remove()), 3000);
        }
    </script>

