<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Usuarios - Panel TI</title>
    <link rel="stylesheet" href="../css/ticket.css">
    <link rel="stylesheet" href="../css/historial.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <div class="dashboard-layout">
        
        <aside class="sidebar admin-sidebar">
            <div class="sidebar-header">
                <img src="../assets/logo.png" alt="Logo M&M" class="sidebar-logo">
                <span class="badge-admin">PANEL TI</span>
            </div>
            
            <nav class="sidebar-nav">
                <p class="nav-title">GESTIÓN DE SOPORTE</p>
                <a href="admin-dashboard.html" class="nav-item"><i class="bi bi-speedometer2"></i> Panel General</a>
                <a href="todos-tickets.html" class="nav-item"><i class="bi bi-ticket-detailed"></i> Todos los Tickets</a>
                <a href="usuarios.html" class="nav-item active"><i class="bi bi-people"></i> Usuarios</a>
                <a href="reportes.html" class="nav-item"><i class="bi bi-bar-chart"></i> Reportes</a>
            </nav>
        </aside>

        <main class="main-content">
            <header class="top-bar">
                <div class="page-title">
                    <h2>Gestión de Personal y Accesos</h2>
                </div>
                <div class="user-info">
                    <span id="nombreAdmin">Admin: DANIEL TRAGODARA</span>
                    <button class="btn-logout">Cerrar Sesión</button>
                </div>
            </header>

            <div class="content-area">
                <div class="dashboard-wrapper">
                    
                    <div class="filter-card advanced-filters" style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="search-box" style="margin: 0; width: 350px;">
                            <i class="bi bi-search"></i>
                            <input type="text" placeholder="Buscar por nombre, correo o área...">
                        </div>
                        
                        <button class="btn-guardar-pro" onclick="document.getElementById('modalUsuario').style.display='block'">
                            <i class="bi bi-person-plus-fill"></i> Nuevo Usuario
                        </button>
                    </div>

                    <div class="table-card" style="margin-top: 20px;">
                        <table id="tablaAdmin">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre Completo</th>
                                    <th>Correo Electrónico</th>
                                    <th>Área / Departamento</th>
                                    <th>Rol de Sistema</th>
                                    <th style="text-align: center;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="usuariosBody">
                                </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </main>
    </div>

    <div id="modalUsuario" class="modal-pro">
        <div class="modal-content-pro" style="max-width: 700px;"> <div class="modal-header-pro">
                <div class="header-title">
                    <div class="icon-bg" style="background: #f3e8ff; color: #a855f7;"><i class="bi bi-person-badge"></i></div>
                    <div>
                        <h3 id="modalTituloUsuario">Nuevo Usuario</h3>
                        <p>Completa la información para registrar un nuevo usuario</p>
                    </div>
                </div>
                <button class="close-pro" onclick="cerrarModalUsuario()"><i class="bi bi-x-lg"></i></button>
            </div>

            <div class="modal-body-pro form-premium">
                <input type="hidden" id="editUserId" value="">

                <div class="grid-3-cols">
                    <div class="form-group-icon">
                        <label>Nombre <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-person"></i>
                            <input type="text" id="editUserNombre" placeholder="Ej: Juan">
                        </div>
                    </div>
                    <div class="form-group-icon">
                        <label>Apellido <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-person"></i>
                            <input type="text" id="editUserApellido" placeholder="Ej: Pérez">
                        </div>
                    </div>
                    <div class="form-group-icon">
                        <label>Teléfono <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-telephone"></i>
                            <input type="text" id="editUserTelefono" placeholder="Ej: 999123456" maxlength="9" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                    </div>
                </div>

                <div class="grid-2-cols">
                    <div class="form-group-icon">
                        <label>Empresa <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-building"></i>
                            <select id="editUserEmpresa">
                                <option value="M&M SERVICIOS MOTORIZADOS">M&M SERVICIOS MOTORIZADOS</option>
                                <option value="M&M LOGISTICA Y ALMACENES">M&M LOGISTICA Y ALMACENES</option>
                                <option value="M&M TRANSPORTE Y DISTRIBUCION">M&M TRANSPORTE Y DISTRIBUCION</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group-icon">
                        <label>Sede <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-geo-alt"></i>
                            <select id="editUserSede">
                                <option value="RAYGADA">RAYGADA</option>
                                <option value="DUEÑAS">DUEÑAS</option>
                                <option value="CHORRILLOS">CHORRILLOS</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="grid-2-cols">
                    <div class="form-group-icon">
                        <label>Área <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-folder2-open"></i>
                            <input type="text" id="editUserArea" placeholder="Ej: Ingresa el área manualmente">
                        </div>
                    </div>
                    <div class="form-group-icon">
                        <label>Correo Electrónico <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-envelope"></i>
                            <input type="email" id="editUserCorreo" placeholder="Ej: juan.perez@mym.com">
                        </div>
                    </div>
                </div>

                <div class="grid-2-cols">
                    <div class="form-group-icon">
                        <label>Nombre de Usuario <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-person-badge"></i>
                            <input type="text" id="editUserUsername" placeholder="Ej: jperez">
                        </div>
                    </div>
                    <div class="form-group-icon">
                        <label>Contraseña <span id="lblPasswordOpcional">*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-lock"></i>
                            <input type="password" id="editUserPassword" placeholder="Ingresa una contraseña">
                        </div>
                        <small id="txtPasswordAyuda" style="display: none; color: #64748b; font-size: 11px; margin-top: 4px;">(Déjalo en blanco si no quieres cambiarla)</small>
                    </div>
                </div>

                <div class="grid-2-cols">
                    <div class="form-group-icon">
                        <label>Rol de Usuario <span>*</span></label>
                        <div class="input-wrapper">
                            <i class="bi bi-shield-check"></i>
                            <select id="editUserRol">
                                <option value="usuario">Colaborador</option>
                                <option value="administrador">Administrador</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer-pro">
                <button class="btn-cancelar" onclick="cerrarModalUsuario()"><i class="bi bi-x"></i> Cancelar</button>
                <button class="btn-guardar-pro" onclick="guardarUsuario()"><i class="bi bi-save"></i> Guardar Usuario</button>
            </div>
        </div>
    </div>
<script src="../js/usuarios.js"></script>
</body>
</html>