Tul xxx Tul

Viewing: edit.php

<?php $error = $error ?? null; ?>

<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb" style="font-size: 0.85rem;">
        <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/empleados" style="color: var(--primary);">Empleados</a></li>
        <li class="breadcrumb-item active">Editar</li>
    </ol>
</nav>

<?php if ($error): ?>
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert" style="border: none; border-radius: 10px; border-left: 4px solid #ef476f;">
    <i class="bi bi-exclamation-circle-fill me-2"></i><?= htmlspecialchars($error) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<div class="row">
    <div class="col-12">
        <div class="card-custom animate-fade-in">
            <div class="card-header-custom">
                <h5><i class="bi bi-pencil-square me-2"></i>Editar Empleado</h5>
            </div>
            <div class="card-body-custom">
                <form action="<?= BASE_URL ?>/empleados/update/<?= $empleado['id'] ?>" method="POST" enctype="multipart/form-data">

                    <!-- ========== INFORMACIÓN PERSONAL ========== -->
                    <div class="emp-form-section">
                        <h6 class="emp-form-section-title">
                            <i class="bi bi-person-circle me-2"></i>Información Personal
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="nombre" class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    Nombre Completo <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="nombre" name="nombre"
                                       value="<?= htmlspecialchars($empleado['nombre']) ?>"
                                       required style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label for="cargo" class="form-label fw-semibold" style="font-size: 0.85rem;">Cargo</label>
                                <input type="text" class="form-control" id="cargo" name="cargo"
                                       value="<?= htmlspecialchars($empleado['cargo'] ?? '') ?>"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label for="telefono" class="form-label fw-semibold" style="font-size: 0.85rem;">Teléfono</label>
                                <input type="text" class="form-control" id="telefono" name="telefono"
                                       value="<?= htmlspecialchars($empleado['telefono'] ?? '') ?>"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label for="direccion" class="form-label fw-semibold" style="font-size: 0.85rem;">Dirección</label>
                                <input type="text" class="form-control" id="direccion" name="direccion"
                                       value="<?= htmlspecialchars($empleado['direccion'] ?? '') ?>"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label for="nivel" class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <i class="bi bi-award me-1"></i>Nivel / Rango
                                </label>
                                <select class="form-select" id="nivel" name="nivel" style="border-radius: 8px; padding: 10px 14px;">
                                    <option value="bronze" <?= ($empleado['nivel'] ?? '') === 'bronze' ? 'selected' : '' ?>>Bronze (Estándar)</option>
                                    <option value="platinum" <?= ($empleado['nivel'] ?? '') === 'platinum' ? 'selected' : '' ?>>Platinum (Intermedio)</option>
                                    <option value="vip" <?= ($empleado['nivel'] ?? '') === 'vip' ? 'selected' : '' ?>>VIP (Premium)</option>
                                </select>
                            </div>
                    <!-- ========== CUENTA DE ACCESO AL SISTEMA ========== -->
                    <div class="emp-form-section mt-4 mb-4" style="background: rgba(67, 97, 238, 0.03); border: 1px solid rgba(67, 97, 238, 0.1); border-radius: 12px; padding: 20px;">
                        <h6 class="emp-form-section-title" style="border-bottom: none; margin-bottom: 0;">
                            <div class="form-check form-switch d-flex align-items-center gap-2">
                                <input class="form-check-input mt-0" type="checkbox" role="switch" id="crear_usuario" name="crear_usuario" value="1" style="transform: scale(1.2); cursor: pointer;" <?= !empty($empleado['usuario_id']) ? 'checked' : '' ?>>
                                <label class="form-check-label" for="crear_usuario" style="cursor: pointer; color: var(--primary);">
                                    <i class="bi bi-shield-lock me-2"></i><?= !empty($empleado['usuario_id']) ? 'Acceso al Sistema Habilitado' : 'Habilitar Acceso al Sistema' ?>
                                </label>
                            </div>
                        </h6>
                        
                        <div class="row g-3 mt-1" id="usuario-fields" style="display: <?= !empty($empleado['usuario_id']) ? 'flex' : 'none' ?>;">
                            <div class="col-md-4">
                                <label for="usuario_email" class="form-label fw-semibold" style="font-size: 0.85rem;">Email de Acceso <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="usuario_email" name="usuario_email"
                                       value="<?= htmlspecialchars($empleado['usuario_email'] ?? '') ?>"
                                       placeholder="usuario@empresa.com"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-4">
                                <label for="usuario_password" class="form-label fw-semibold" style="font-size: 0.85rem;"><?= !empty($empleado['usuario_id']) ? 'Nueva Contraseña' : 'Contraseña' ?> <?= empty($empleado['usuario_id']) ? '<span class="text-danger">*</span>' : '' ?></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="usuario_password" name="usuario_password"
                                           placeholder="<?= !empty($empleado['usuario_id']) ? '(Dejar vacío para no cambiar)' : '' ?>"
                                           style="border-radius: 8px 0 0 8px; padding: 10px 14px;">
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword" style="border-radius: 0 8px 8px 0;">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="usuario_rol" class="form-label fw-semibold" style="font-size: 0.85rem;">Rol en el Sistema <span class="text-danger">*</span></label>
                                <select class="form-select" id="usuario_rol" name="usuario_rol" style="border-radius: 8px; padding: 10px 14px;">
                                    <option value="empleado" <?= ($empleado['usuario_rol'] ?? '') === 'empleado' ? 'selected' : '' ?>>Empleado (Limitado)</option>
                                    <option value="admin" <?= ($empleado['usuario_rol'] ?? '') === 'admin' ? 'selected' : '' ?>>Administrador (Total)</option>
                                </select>
                            </div>
                            <?php if (!empty($empleado['usuario_id'])): ?>
                            <div class="col-12 mt-2">
                                <div class="form-text text-primary" style="font-size: 0.78rem;">
                                    <i class="bi bi-info-circle me-1"></i> Este empleado ya tiene una cuenta asociada. Modifica los datos para actualizarlos. Si desmarcas la casilla, se ignorarán los cambios del usuario, pero NO se eliminará la cuenta del sistema.
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>

                            <!-- Foto de perfil -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <i class="bi bi-camera me-1"></i>Foto de Perfil
                                </label>
                                <div class="d-flex align-items-center gap-3 mb-2">
                                    <?php if (!empty($empleado['foto'])): ?>
                                        <img src="<?= BASE_URL ?>/public/assets/uploads/empleados/<?= htmlspecialchars($empleado['foto']) ?>"
                                             alt="Foto actual"
                                             style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary);">
                                        <span class="text-muted" style="font-size: 0.78rem;">Foto actual</span>
                                    <?php else: ?>
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center;">
                                            <span style="color: #fff; font-weight: 700;"><?= strtoupper(mb_substr($empleado['nombre'], 0, 2)) ?></span>
                                        </div>
                                        <span class="text-muted" style="font-size: 0.78rem;">Sin foto</span>
                                    <?php endif; ?>
                                </div>
                                <input type="file" class="form-control" id="foto" name="foto"
                                       accept=".jpg,.jpeg,.png"
                                       style="border-radius: 8px; padding: 8px 14px;">
                                <div class="form-text" style="font-size: 0.78rem;">JPG o PNG. Máximo 2MB. Dejar vacío para mantener la actual.</div>
                                <div id="fotoPreview" class="mt-2" style="display: none;">
                                    <img id="fotoPreviewImg" src="" alt="Preview"
                                         style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--success);">
                                    <span class="text-muted ms-2" style="font-size: 0.78rem;">Nueva foto</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ========== REDES SOCIALES ========== -->
                    <div class="emp-form-section">
                        <h6 class="emp-form-section-title">
                            <i class="bi bi-share me-2"></i>Redes Sociales
                        </h6>
                        <div class="row g-3">
                            <!-- Gmail -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/gmail.png" alt="Gmail" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> Gmail (Email de contacto)
                                </label>
                                <input type="email" class="form-control" name="email"
                                       value="<?= htmlspecialchars($empleado['email'] ?? '') ?>"
                                       placeholder="usuario@gmail.com"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/facebook.png" alt="Facebook" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> Facebook
                                </label>
                                <input type="text" class="form-control" name="facebook"
                                       value="<?= htmlspecialchars($empleado['facebook'] ?? '') ?>"
                                       placeholder="facebook.com/usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/instagram.png" alt="Instagram" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> Instagram
                                </label>
                                <input type="text" class="form-control" name="instagram"
                                       value="<?= htmlspecialchars($empleado['instagram'] ?? '') ?>"
                                       placeholder="instagram.com/usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/twitterx.png" alt="X" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> X (Twitter)
                                </label>
                                <input type="text" class="form-control" name="twitter"
                                       value="<?= htmlspecialchars($empleado['twitter'] ?? '') ?>"
                                       placeholder="x.com/usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/linkedin.webp" alt="LinkedIn" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> LinkedIn
                                </label>
                                <input type="text" class="form-control" name="linkedin"
                                       value="<?= htmlspecialchars($empleado['linkedin'] ?? '') ?>"
                                       placeholder="linkedin.com/in/usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/tiktok.png" alt="TikTok" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> TikTok
                                </label>
                                <input type="text" class="form-control" name="tiktok"
                                       value="<?= htmlspecialchars($empleado['tiktok'] ?? '') ?>"
                                       placeholder="tiktok.com/@usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/youtube.webp" alt="YouTube" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> YouTube
                                </label>
                                <input type="text" class="form-control" name="youtube"
                                       value="<?= htmlspecialchars($empleado['youtube'] ?? '') ?>"
                                       placeholder="youtube.com/@canal"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/whatsapp.png" alt="WhatsApp" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> WhatsApp
                                </label>
                                <input type="text" class="form-control" name="whatsapp"
                                       value="<?= htmlspecialchars($empleado['whatsapp'] ?? '') ?>"
                                       placeholder="529991234567"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/guthub.png" alt="GitHub" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> GitHub
                                </label>
                                <input type="text" class="form-control" name="github"
                                       value="<?= htmlspecialchars($empleado['github'] ?? '') ?>"
                                       placeholder="github.com/usuario"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold" style="font-size: 0.85rem;">
                                    <img src="<?= BASE_URL ?>/public/assets/img/redes/www.png" alt="Web" style="width: 18px; height: 18px; margin-right: 5px; object-fit: contain;"> Página Web
                                </label>
                                <input type="text" class="form-control" name="pagina_web"
                                       value="<?= htmlspecialchars($empleado['pagina_web'] ?? '') ?>"
                                       placeholder="miportfolio.com"
                                       style="border-radius: 8px; padding: 10px 14px;">
                            </div>
                        </div>
                    </div>

                    <!-- Botones -->
                    <div class="d-flex gap-2 mt-4 pt-3" style="border-top: 1px solid var(--border-color);">
                        <button type="submit" class="btn btn-primary-custom">
                            <i class="bi bi-check-lg me-1"></i> Actualizar Empleado
                        </button>
                        <a href="<?= BASE_URL ?>/empleados" class="btn btn-light" style="border-radius: 6px;">
                            <i class="bi bi-arrow-left me-1"></i> Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('foto').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const preview = document.getElementById('fotoPreview');
    const previewImg = document.getElementById('fotoPreviewImg');
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.style.display = 'flex';
            preview.style.alignItems = 'center';
        };
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
});
</script>
<script>
    // JS para controlar la vista de los campos de usuario en edit.php
    document.addEventListener('DOMContentLoaded', function() {
        const toggleBtn = document.getElementById('togglePassword');
        const passInput = document.getElementById('usuario_password');
        if(toggleBtn && passInput) {
            toggleBtn.addEventListener('click', function() {
                const type = passInput.type === 'password' ? 'text' : 'password';
                passInput.type = type;
                this.querySelector('i').classList.toggle('bi-eye');
                this.querySelector('i').classList.toggle('bi-eye-slash');
            });
        }

        const checkUser = document.getElementById('crear_usuario');
        const userFields = document.getElementById('usuario-fields');
        const emailInput = document.getElementById('usuario_email');
        const passwordInput = document.getElementById('usuario_password');
        const hasExistingUser = <?= !empty($empleado['usuario_id']) ? 'true' : 'false' ?>;

        if(checkUser && userFields) {
            checkUser.addEventListener('change', function() {
                if(this.checked) {
                    userFields.style.display = 'flex';
                    emailInput.required = true;
                    if(!hasExistingUser) {
                        passwordInput.required = true;
                    }
                } else {
                    userFields.style.display = 'none';
                    emailInput.required = false;
                    passwordInput.required = false;
                }
            });

            // Trigger manual en carga
            if(checkUser.checked) {
               emailInput.required = true;
               if(!hasExistingUser) {
                   passwordInput.required = true;
               }
            }
        }
    });
</script>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64