<?php
// Incluir el archivo de conexión
include 'conexion.php';  // Asegúrate de que la ruta sea correcta

$sql = "SELECT * FROM usuarios";
$result = $conn->query($sql);
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Usuarios</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="bg-light p-5">
    <h2 class="text-center mb-4">Lista de Usuarios</h2>
  <div class="table-responsive">
 <table class="table table-striped table-bordered">
    <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Nombres</th>
            <th>Apellido Paterno</th>
            <th>Apellido Materno</th>
            <th>Tipo Doc</th>
            <th>N° Documento</th>
            <th>Foto DNI</th>
            <th>Email</th>
            <th>Teléfono</th>
            <th>Cargo</th>
            <th>Perfil</th>
            <th>Vehículo</th>
            <th>Placa</th>
            <th>Estado</th>
            <th>Acción</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($row = $result->fetch_assoc()): ?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['nombres']; ?></td>
            <td><?php echo $row['apellido_paterno']; ?></td> <!-- Apellido Paterno -->
            <td><?php echo $row['apellido_materno']; ?></td> <!-- Apellido Materno -->
            <td><?php echo $row['tipo_documento']; ?></td>
            <td><?php echo $row['numero_documento']; ?></td>
            <td><img src="<?php echo $row['foto_dni']; ?>" class="img-thumbnail" style="width: 60px; height: 60px;"></td>
            <td><?php echo $row['email']; ?></td>
            <td><?php echo $row['telefono']; ?></td>
            <td><?php echo $row['cargo']; ?></td>
            <td><?php echo $row['perfil']; ?></td>
            <td><?php echo $row['vehiculo']; ?></td>
            <td><?php echo $row['placa']; ?></td>
            <td id="estado-<?php echo $row['id']; ?>"><?php echo $row['estado']; ?></td>
            <td>
                <?php if ($row['estado'] == 'Activo'): ?>
                    <button id="btn-<?php echo $row['id']; ?>" class="btn btn-danger btn-sm" onclick="cambiarEstadoUsuario(<?php echo $row['id']; ?>)">Dar de Baja</button>
                <?php else: ?>
                    <button id="btn-<?php echo $row['id']; ?>" class="btn btn-success btn-sm" onclick="cambiarEstadoUsuario(<?php echo $row['id']; ?>)">Activar</button>
                <?php endif; ?>
                <button class="btn btn-primary btn-sm" onclick="editarUsuario(<?php echo $row['id']; ?>)">Editar</button>
                <button class="btn btn-success btn-sm" onclick="verCredenciales('<?php echo $row['nombres']; ?>', '<?php echo $row['apellido_paterno']; ?>', '<?php echo $row['apellido_materno']; ?>', '<?php echo $row['numero_documento']; ?>')">Ver Usuario y Contraseña</button>
            </td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

</div>


    <!-- Modal para mostrar credenciales -->
    <div id="modal" class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Credenciales</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Usuario:</strong> <span id="modal-username"></span></p>
                    <p><strong>Contraseña:</strong> <span id="modal-password"></span></p>
                    <button onclick="copiarTexto()" class="btn btn-info">Copiar</button>
                </div>
            </div>
        </div>
    </div>

   <!-- Modal para editar usuario -->
<div id="modaluser" class="modal fade" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUserLabel">Editar Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editarForm">
                    <input type="hidden" id="edit-id" name="id">

                    <!-- Tipo de Documento -->
                    <div class="mb-3">
                        <label for="edit-tipo_documento" class="form-label">Tipo de Documento</label>
                        <select id="edit-tipo_documento" name="tipo_documento" class="form-select">
                            <option value="DNI">DNI</option>
                            <option value="CE">CE</option>
                            <option value="PP">PP</option>
                            <option value="CI">CI</option>
                            <option value="PTP">PTP</option>
                        </select>
                    </div>

                    <!-- Número de Documento -->
                    <div class="mb-3">
                        <label for="edit-numero_documento" class="form-label">Número de Documento</label>
                        <input type="text" id="edit-numero_documento" name="numero_documento" class="form-control">
                    </div>

                    <!-- Placa -->
                    <div class="mb-3">
                        <label for="edit-placa" class="form-label">Placa</label>
                        <input type="text" id="edit-placa" name="placa" class="form-control">
                    </div>

                    <!-- Número de Cuadrilla -->
                    <div class="mb-3">
                        <label for="edit-numero_cuadrilla" class="form-label">Número de Cuadrilla</label>
                        <input type="text" id="edit-numero_cuadrilla" name="numero_cuadrilla" class="form-control">
                    </div>

                    <!-- Nombres -->
                    <div class="mb-3">
                        <label for="edit-nombres" class="form-label">Nombres</label>
                        <input type="text" id="edit-nombres" name="nombres" class="form-control">
                    </div>

                    <!-- Apellido Paterno -->
                    <div class="mb-3">
                        <label for="edit-apellido_paterno" class="form-label">Apellido Paterno</label>
                        <input type="text" id="edit-apellido_paterno" name="apellido_paterno" class="form-control">
                    </div>

                    <!-- Apellido Materno -->
                    <div class="mb-3">
                        <label for="edit-apellido_materno" class="form-label">Apellido Materno</label>
                        <input type="text" id="edit-apellido_materno" name="apellido_materno" class="form-control">
                    </div>

                    <!-- Correo -->
                    <div class="mb-3">
                        <label for="edit-email" class="form-label">Correo</label>
                        <input type="email" id="edit-email" name="email" class="form-control">
                    </div>

                    <!-- Teléfono -->
                    <div class="mb-3">
                        <label for="edit-telefono" class="form-label">Teléfono</label>
                        <input type="text" id="edit-telefono" name="telefono" class="form-control">
                    </div>

                    <!-- Cargo -->
                    <!-- Cargo -->
<div class="mb-3">
    <label for="edit-cargo" class="form-label">Cargo</label>
    <select id="edit-cargo" name="cargo" class="form-select" required>
        <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>
</div>
<!-- Zona de Trabajo -->
<div class="col-md-6">
    <label for="edit-zona_trabajo" class="form-label">Zona de Trabajo</label>
    <select id="edit-zona_trabajo" name="zona_trabajo" class="form-select" required>
        <option value="LIMA - CENTRO 1">LIMA - CENTRO 1</option>
        <option value="LIMA - CENTRO 2">LIMA - CENTRO 2</option>
        <option value="LIMA - ESTE 1">LIMA - ESTE 1</option>
        <option value="LIMA - ESTE 2">LIMA - ESTE 2</option>
        <option value="LIMA - ESTE 3">LIMA - ESTE 3</option>
        <option value="LIMA - ESTE 4">LIMA - ESTE 4</option>
        <option value="LIMA - NORTE 1">LIMA - NORTE 1</option>
        <option value="LIMA - NORTE 2">LIMA - NORTE 2</option>
        <option value="LIMA - NORTE 3">LIMA - NORTE 3</option>
        <option value="LIMA - OESTE 1">LIMA - OESTE 1</option>
        <option value="LIMA - OESTE 2">LIMA - OESTE 2</option>
        <option value="LIMA - OESTE 3">LIMA - OESTE 3</option>
        <option value="LIMA - SUR 1">LIMA - SUR 1</option>
        <option value="LIMA - SUR 2">LIMA - SUR 2</option>
        <option value="LIMA - SUR 3">LIMA - SUR 3</option>
        <option value="LIMA - SUR 4">LIMA - SUR 4</option>
        <option value="LIMA - SUR 5">LIMA - SUR 5</option>
    </select>
</div>

<!-- Bodega -->
<div class="col-md-6">
    <label for="edit-bodega" class="form-label">Bodega</label>
    <select id="edit-bodega" name="bodega" class="form-select" required>
        <option value="PERU FIBRA">PERU FIBRA</option>
        <option value="WIN">WIN</option>
    </select>
</div>


                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Guardar Cambios</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      function cambiarEstadoUsuario(userId) {
    let estadoElemento = $("#estado-" + userId);
    let botonElemento = $("#btn-" + userId);
    
    // Verificar si el estado actual del usuario es "Activo" o "Baja"
    if (estadoElemento.text() === "Activo") {
        // Cambiar a "Baja"
        Swal.fire({
            title: "¿Estás seguro?",
            text: "Este usuario será dado de baja.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Sí, dar de baja"
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("dar_de_baja.php", { id: userId }, function(response) {
                    Swal.fire("¡Actualizado!", response, "success");
                    estadoElemento.text("Baja");
                    
                    // Cambiar el texto y color del botón
                    botonElemento.text("Activar");
                    botonElemento.removeClass("btn-danger").addClass("btn-success");
                });
            }
        });
    } else if (estadoElemento.text() === "Baja") {
        // Cambiar a "Activo"
        Swal.fire({
            title: "¿Estás seguro?",
            text: "Este usuario será activado nuevamente.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Sí, activar"
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("dar_de_baja.php", { id: userId }, function(response) {
                    Swal.fire("¡Actualizado!", response, "success");
                    estadoElemento.text("Activo");
                    
                    // Cambiar el texto y color del botón
                    botonElemento.text("Dar de baja");
                    botonElemento.removeClass("btn-success").addClass("btn-danger");
                });
            }
        });
    }
}

function verCredenciales(nombres, apellidoPaterno, apellidoMaterno, documento) {
    // El usuario será el número de documento
    let username = documento;

    // Generar la contraseña
    let ultimosDigitos = documento.slice(-2); // Últimos 2 dígitos del documento
    let inicialPaterno = apellidoPaterno.charAt(0).toUpperCase(); // Inicial del apellido paterno
    let inicialMaterno = apellidoMaterno.charAt(0).toUpperCase(); // Inicial del apellido materno
    let especial = "@"; // Puedes cambiarlo si lo deseas

    let password = `${ultimosDigitos}${inicialPaterno}${inicialMaterno}${especial}`.slice(0, 8); // Máximo 8 caracteres

    // Mostrar en el modal
    document.getElementById("modal-username").textContent = username;
    document.getElementById("modal-password").textContent = password;

    // Mostrar el modal usando Bootstrap
    var myModal = new bootstrap.Modal(document.getElementById('modal'));
    myModal.show();
}


// Función para copiar credenciales al portapapeles
function copiarTexto() {
    let usuario = document.getElementById("modal-username").textContent;
    let password = document.getElementById("modal-password").textContent;
    let texto = `Usuario: ${usuario}\nContraseña: ${password}`;

    navigator.clipboard.writeText(texto).then(() => {
        alert("Copiado al portapapeles");
    });
}


function editarUsuario(userId) {
    $.get("editar_usuario.php", { id: userId }, function(data) {
        let usuario = JSON.parse(data);
        
        // Rellenar los campos del formulario con los datos del usuario
        $("#edit-id").val(usuario.id);
        $("#edit-nombres").val(usuario.nombres);
        $("#edit-apellido_paterno").val(usuario.apellido_paterno);
        $("#edit-apellido_materno").val(usuario.apellido_materno);
        $("#edit-email").val(usuario.email);
        $("#edit-telefono").val(usuario.telefono);
        $("#edit-numero_cuadrilla").val(usuario.numero_cuadrilla);
        $("#edit-numero_documento").val(usuario.numero_documento);
        $("#edit-placa").val(usuario.placa);
        
        // Establecer el valor del tipo de documento
        $("#edit-tipo_documento").val(usuario.tipo_documento);
        
        // Establecer el valor del cargo
        $("#edit-cargo").val(usuario.cargo);
        
        // Establecer el valor de zona_trabajo (lo selecciona automáticamente)
        $("#edit-zona_trabajo").val(usuario.zona_trabajo);
        
        // Establecer el valor de bodega (lo selecciona automáticamente)
        $("#edit-bodega").val(usuario.bodega);
        
        // Mostrar el modal
        var myModal = new bootstrap.Modal(document.getElementById('modaluser'));
        myModal.show();
    });
}


$("#editarForm").submit(function(e) {
    e.preventDefault();

    let formData = new FormData(this);

    $.ajax({
        url: "actualizar_usuario.php",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        dataType: "json",
        success: function(response) {
            if (response.status === "success") {
                Swal.fire("¡Guardado!", response.message, "success").then(() => {
                    location.reload();
                });
            } else {
                Swal.fire("Error", response.message, "error");
            }
        },
        error: function() {
            Swal.fire("Error", "No se pudo actualizar el usuario", "error");
        }
    });
});

    </script>

</body>

</html>
