Tiny File Manager

Back Back Up Advanced Editor

<?php
session_start();
include("../connection.php");
$con = connection();

// Manejar la actualización de datos
if(isset($_POST['actualizar'])) {
    $id = $_POST['id'];
    $cargo = $_POST['cargo'];
    $nombre = $_POST['nombre'];
    $correo = $_POST['correo'];
    $contrasena = $_POST['contrasena'];
    $e1 = isset($_POST['e1']) ? $_POST['e1'] : '';
    $e1app = isset($_POST['e1app']) ? $_POST['e1app'] : '';
    $e3 = isset($_POST['e3']) ? $_POST['e3'] : '';
    $defender = isset($_POST['defender']) ? $_POST['defender'] : '';
    $powerbi = isset($_POST['powerbi']) ? $_POST['powerbi'] : '';
    $visio = isset($_POST['visio']) ? $_POST['visio'] : '';
    
    $sql = "UPDATE correos SET cargo=?, nombre=?, correo=?, contrasena=?, E1=?, E1APP=?, E3=?, defender=?, powerbi=?, visio=? WHERE id=?";
    $stmt = $con->prepare($sql);
    $stmt->bind_param("ssssssssssi", $cargo, $nombre, $correo, $contrasena, $e1, $e1app, $e3, $defender, $powerbi, $visio, $id);
    $stmt->execute();
    
    // Recargar la página con los mismos parámetros de búsqueda
    $tipo_busqueda = isset($_GET['tipo']) ? $_GET['tipo'] : 'nombre';
    $valor_busqueda = $tipo_busqueda == 'nombre' ? $nombre : $correo;
    header("Location: ".$_SERVER['PHP_SELF']."?tipo=".$tipo_busqueda."&".$tipo_busqueda."=".urlencode($valor_busqueda));
    exit();
}

$mostrarTabla = false;
$query = null;
$tipo_busqueda = isset($_GET['tipo']) ? $_GET['tipo'] : 'nombre';
$valor_busqueda = isset($_GET[$tipo_busqueda]) ? $_GET[$tipo_busqueda] : '';

// Verificar si se ha enviado una búsqueda
if(isset($_POST['buscar']) && !empty($_POST['valor_busqueda'])) {
    $tipo_busqueda = $_POST['tipo_busqueda'];
    $valor_busqueda = $_POST['valor_busqueda'];
    $mostrarTabla = true;
    
    // Usamos LIKE para búsqueda parcial y agregamos % alrededor del valor
    $valor_like = "%".$valor_busqueda."%";
    
    if($tipo_busqueda == 'nombre') {
        $sql = "SELECT id, cargo, nombre, correo, contrasena, E1, E1APP, E3, defender, powerbi, visio FROM correos WHERE nombre LIKE ? ORDER BY id DESC";
    } else {
        $sql = "SELECT id, cargo, nombre, correo, contrasena, E1, E1APP, E3, defender, powerbi, visio FROM correos WHERE correo LIKE ? ORDER BY id DESC";
    }
    
    $stmt = $con->prepare($sql);
    $stmt->bind_param("s", $valor_like);
    $stmt->execute();
    $query = $stmt->get_result();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Consulta de correo corporativo">
    <meta name="keywords" content="html, css, bases de datos, php">
    <meta name="author" content="Sebastian Obando">
    <meta name="copyright" content="Sebastian Obando">
    <meta name="google" content="notranslate">
    <title>Correo Corporativo</title>
    <link rel="icon" type="image/png" href="../img/icono1.png">
    
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-image: linear-gradient(to right, #FF8626, #025159);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }
        .header {
            background-color: #025159;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .header h2 {
            margin: 0;
            font-size: 28px;
        }
        .search-container {
            background-color: #f8f9fa;
            padding: 25px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-left: 5px solid #FF8626;
        }
        .search-container h3 {
            margin-top: 0;
            color: #025159;
            font-size: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .filter-form {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 15px;
            align-items: end;
        }
        .form-group {
            margin-bottom: 0;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        .form-group input[type="text"], 
        .form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border 0.3s;
        }
        .form-group input[type="text"]:focus, 
        .form-group select:focus {
            border-color: #FF8626;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
        }
        .form-group input[type="submit"] {
            background-color: #FF8626;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background-color 0.3s;
            height: fit-content;
        }
        .form-group input[type="submit"]:hover {
            background-color: #e5761e;
        }
        .button-container {
            margin: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .button-container input[type="button"] {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #FF8626;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .button-container input[type="button"]:hover {
            background-color: #e5761e;
            transform: translateY(-2px);
        }
        .button-container input[type="button"].secondary {
            background-color: #4179b9;
        }
        .button-container input[type="button"].secondary:hover {
            background-color: #3568a0;
        }
        .no-results {
            padding: 20px;
            background-color: #f8d7da;
            color: #721c24;
            border-radius: 8px;
            margin: 20px;
            text-align: center;
        }
        .info-message {
            padding: 20px;
            background-color: #d1ecf1;
            color: #0c5460;
            border-radius: 8px;
            margin: 20px;
            text-align: center;
        }
        .users-table {
            margin: 20px;
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        table.display {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
        }
        table.display th, table.display td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        table.display th {
            background-color: #025159;
            color: white;
            font-weight: 600;
        }
        table.display tr:hover {
            background-color: #f5f5f5;
        }
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 14px;
            padding: 20px;
            border-top: 1px solid #e0e0e0;
        }
        /* Estilos para los botones */
        .btn-editar {
            padding: 8px 15px;
            background-color: #FF8626;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .btn-editar:hover {
            background-color: #e5761e;
        }
        .btn-copiar {
            margin-left: 5px;
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-copiar:hover {
            background-color: #45a049;
        }
        .btn-mostrar {
            margin-left: 5px;
            padding: 5px 10px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-mostrar:hover {
            background-color: #0b7dda;
        }
        .contrasena-oculta {
            filter: blur(4px);
            user-select: none;
            display: inline-block;
            min-width: 100px;
        }
        /* Notificación estilo toast */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        /* Estilos para el modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 30px;
            border: none;
            width: 80%;
            max-width: 800px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-height: 90vh;
            overflow-y: auto;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }
        .close:hover {
            color: #025159;
        }
        /* Estilos para los campos horizontales */
        .horizontal-fields {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 25px;
        }
        .horizontal-field {
            display: flex;
            flex-direction: column;
        }
        .horizontal-field label {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }
        .horizontal-field input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            width: 100%;
            box-sizing: border-box;
            transition: border 0.3s;
        }
        .horizontal-field input:focus {
            border-color: #FF8626;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
        }
        .form-field {
            margin-bottom: 20px;
        }
        .form-field label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        .form-field input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            transition: border 0.3s;
        }
        .form-field input:focus {
            border-color: #FF8626;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
        }
        /* Responsive para campos horizontales */
        @media (max-width: 768px) {
            .filter-form {
                grid-template-columns: 1fr;
            }
            .horizontal-fields {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .horizontal-fields {
                grid-template-columns: 1fr;
            }
            .button-container {
                flex-direction: column;
            }
            .button-container input[type="button"] {
                width: 100%;
            }
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 5px 10px;
            margin-left: 2px;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #025159 !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #FF8626;
            color: white !important;
            border: 1px solid #FF8626;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #025159;
            color: white !important;
            border: 1px solid #025159;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Consulta de Correo Corporativo</h2>
        </div>
        
        <div class="search-container">
            <h3>Buscar Correo Corporativo</h3>
            <form method="POST" action="" class="filter-form">
                <div class="form-group">
                    <label for="tipo_busqueda">Buscar por:</label>
                    <select id="tipo_busqueda" name="tipo_busqueda">
                        <option value="nombre" <?= $tipo_busqueda == 'nombre' ? 'selected' : '' ?>>Nombre</option>
                        <option value="correo" <?= $tipo_busqueda == 'correo' ? 'selected' : '' ?>>Correo electrónico</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="valor_busqueda" id="label_valor">Ingrese el <?= $tipo_busqueda == 'nombre' ? 'Nombre' : 'Correo electrónico' ?>:</label>
                    <input type="text" id="valor_busqueda" name="valor_busqueda" value="<?= htmlspecialchars($valor_busqueda) ?>" placeholder="Ingrese el <?= $tipo_busqueda == 'nombre' ? 'nombre' : 'correo' ?>" required>
                </div>
                <div class="form-group">
                    <input type="submit" name="buscar" value="Buscar">
                </div>
            </form>
        </div>
        
        <div class="button-container">
            <input type="button" onclick="window.location.href='../index.php';" value="Menú">
            <input type="button" class="secondary" onclick="window.location.href='correos.php';" value="Agregar Nuevo Correo">
        </div>
        
        <?php if($mostrarTabla): ?>
            <?php if($query && $query->num_rows > 0): ?>
                <div class="users-table">
                    <div style="overflow-x: auto;">
                        <table id="tablaPersonas" class="display">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Cargo</th>
                                    <th>Nombre</th>
                                    <th>Correo</th>
                                    <th>Contraseña</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php while ($row = $query->fetch_assoc()): ?>
                                    <tr>
                                        <td><?= $row['id'] ?></td>
                                        <td><?= htmlspecialchars($row['cargo']) ?></td>
                                        <td><?= htmlspecialchars($row['nombre']) ?></td>
                                        <td><?= htmlspecialchars($row['correo']) ?></td>
                                        <td>
                                            <span class="contrasena-oculta"><?= htmlspecialchars($row['contrasena']) ?></span>
                                            <button class="btn-copiar" onclick="copiarContrasena('<?= htmlspecialchars($row['contrasena'], ENT_QUOTES) ?>')">
                                                <i class="far fa-copy"></i> Copiar
                                            </button>
                                            <button class="btn-mostrar" onclick="mostrarContrasena(this)">
                                                <i class="far fa-eye"></i> Mostrar
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn-editar" onclick="openEditModal(
                                                '<?= $row['id'] ?>', 
                                                '<?= htmlspecialchars($row['cargo'], ENT_QUOTES) ?>', 
                                                '<?= htmlspecialchars($row['nombre'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['correo'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['contrasena'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['E1'] ?? '', ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['E1APP'] ?? '', ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['E3'] ?? '', ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['defender'] ?? '', ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['powerbi'] ?? '', ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['visio'] ?? '', ENT_QUOTES) ?>'
                                            )">
                                                <i class="fas fa-edit"></i> Editar
                                            </button>
                                        </td>
                                    </tr>
                                <?php endwhile; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?php else: ?>
                <div class="no-results">
                    <p>No se encontraron registros por el <?= $tipo_busqueda == 'nombre' ? 'Nombre' : 'Correo' ?>: <strong><?= htmlspecialchars($valor_busqueda) ?></strong></p>
                </div>
            <?php endif; ?>
        <?php else: ?>
            <div class="info-message">
                <p>Ingrese el <?= $tipo_busqueda == 'nombre' ? 'Nombre' : 'Correo electrónico' ?> para Consultar.</p>
            </div>
        <?php endif; ?>
    </div>

<div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEditModal()">&times;</span>
            <h2 style="color: #025159; margin-bottom: 20px;">Editar Correo Corporativo</h2>
            <form id="editForm" method="POST" action="">
                <input type="hidden" id="editId" name="id">
                
                
                <div class="form-field">
                    <label>Cargo:</label>
                    <input type="text" id="editCargo" name="cargo" required>
                </div>
                
                <div class="form-field">
                    <label>Nombre:</label>
                    <input type="text" id="editNombre" name="nombre" required>
                </div>
                
                <div class="form-field">
                    <label>Correo:</label>
                    <input type="text" id="editCorreo" name="correo" required>
                </div>
                
                <div class="form-field">
                    <label>Contraseña:</label>
                    <input type="text" id="editContrasena" name="contrasena" required>
                </div>
				
				<label><strong style="color: #025159; font-size: 16px;">Tipo De Licencia</strong></label>
				<br><br>
                
                <div class="horizontal-fields">
                    <div class="horizontal-field">
                        <label>E1:</label>
                        <input type="text" id="editE1" name="e1">
                    </div>
                    
                    <div class="horizontal-field">
                        <label>E1 + APP:</label>
                        <input type="text" id="editE1APP" name="e1app">
                    </div>
                    
                    <div class="horizontal-field">
                        <label>E3:</label>
                        <input type="text" id="editE3" name="e3">
                    </div>
                    
                    <div class="horizontal-field">
                        <label>Defender:</label>
                        <input type="text" id="editDefender" name="defender">
                    </div>
                    
                    <div class="horizontal-field">
                        <label>PowerBI:</label>
                        <input type="text" id="editPowerbi" name="powerbi">
                    </div>
                    
                    <div class="horizontal-field">
                        <label>Visio:</label>
                        <input type="text" id="editVisio" name="visio">
                    </div>
                </div>

<div style="text-align:right; margin-top: 20px;">
                    <button type="button" onclick="closeEditModal()" style="padding:10px 20px; margin-right:10px; background-color:#ccc; color:#333; border:none; border-radius:4px; cursor:pointer; font-weight:600;">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="submit" name="actualizar" style="padding:10px 20px; background-color:#FF8626; color:white; border:none; border-radius:4px; cursor:pointer; font-weight:600;">
                        <i class="fas fa-save"></i> Actualizar
                    </button>
                </div>
            </form>
        </div>
    </div>

<div id="toast" class="toast"></div>

<script>
        $(document).ready(function () {
            <?php if($mostrarTabla && $query && $query->num_rows > 0): ?>
            $('#tablaPersonas').DataTable({
                "paging": true,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
                "searching": true,
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Spanish.json"
                },
                "order": [[0, 'desc']],
                "autoWidth": false,
                "responsive": true,
                "dom": '<"top"lf>rt<"bottom"ip><"clear">'
            });
            <?php endif; ?>

// Cambiar el label cuando cambia el tipo de búsqueda
            $('#tipo_busqueda').change(function() {
                var tipo = $(this).val();
                var labelText = tipo == 'nombre' ? 'Nombre' : 'Correo electrónico';
                $('#label_valor').text('Ingrese el ' + labelText + ':');
                $('#valor_busqueda').attr('placeholder', 'Ingrese el ' + (tipo == 'nombre' ? 'nombre' : 'correo'));
            });
        });

// Función para abrir el modal de edición
        function openEditModal(id, cargo, nombre, correo, contrasena, e1, e1app, e3, defender, powerbi, visio) {
            document.getElementById('editId').value = id;
            document.getElementById('editCargo').value = cargo;
            document.getElementById('editNombre').value = nombre;
            document.getElementById('editCorreo').value = correo;
            document.getElementById('editContrasena').value = contrasena;
            document.getElementById('editE1').value = e1;
            document.getElementById('editE1APP').value = e1app;
            document.getElementById('editE3').value = e3;
            document.getElementById('editDefender').value = defender;
            document.getElementById('editPowerbi').value = powerbi;
            document.getElementById('editVisio').value = visio;
            document.getElementById('editModal').style.display = 'block';
        }

// Función para cerrar el modal de edición
        function closeEditModal() {
            document.getElementById('editModal').style.display = 'none';
        }

// Función para copiar la contraseña al portapapeles
        function copiarContrasena(contrasena) {
            // Crear un elemento temporal para copiar
            const tempInput = document.createElement("input");
            tempInput.value = contrasena;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            
            // Mostrar notificación
            mostrarToast("Contraseña copiada al portapapeles");
        }

// Función para mostrar/ocultar la contraseña
        function mostrarContrasena(boton) {
            const contrasenaSpan = boton.parentElement.querySelector('.contrasena-oculta');
            const icono = boton.querySelector('i');
            
            if(contrasenaSpan.style.filter === 'blur(4px)' || !contrasenaSpan.style.filter) {
                contrasenaSpan.style.filter = 'none';
                icono.className = 'far fa-eye-slash';
                boton.innerHTML = '<i class="far fa-eye-slash"></i> Ocultar';
            } else {
                contrasenaSpan.style.filter = 'blur(4px)';
                icono.className = 'far fa-eye';
                boton.innerHTML = '<i class="far fa-eye"></i> Mostrar';
            }
        }

// Función para mostrar notificación toast
        function mostrarToast(mensaje) {
            const toast = document.getElementById('toast');
            toast.textContent = mensaje;
            toast.style.display = 'block';
            
            setTimeout(() => {
                toast.style.display = 'none';
            }, 2000);
        }

// Cierra el modal si se hace clic fuera del contenido
        window.onclick = function(event) {
            var modal = document.getElementById('editModal');
            if (event.target == modal) {
                closeEditModal();
            }
        }
    </script>
    
    <div class="copyright">
        &#169; Avicampo <?php echo date('Y'); ?>
    </div>
</body>
</html>