<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Crear Usuario</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to bottom right, #1e1e2f, #3a3a52);
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #2c2c3e;
            padding: 2rem;
            border-radius: 12px;
            width: 100%;
            max-width: 450px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }
        h2 {
            text-align: center;
            margin-bottom: 1.5rem;
            color: #00ffcc;
        }
        label {
            display: block;
            margin-top: 1rem;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: none;
            border-radius: 6px;
            background-color: #f0f0f0;
            color: #000;
        }
        .password-container {
            position: relative;
        }
        .password-container input {
            padding-right: 40px;
        }
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #666;
        }
        button {
            width: 100%;
            margin-top: 2rem;
            padding: 10px;
            background-color: #00cc99;
            color: white;
            font-weight: bold;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
        button:hover {
            background-color: #009977;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Registrar Nuevo Usuario</h2>
        <form method="post" autocomplete="off" onsubmit="return clearForm()">
            <label for="nombre">Nombre Completo</label>
            <input type="text" name="nombre" id="nombre" required value="">

            <label for="correo">Correo Electrónico</label>
            <input type="email" name="correo" id="correo" required value="">

            <label for="password">Contraseña</label>
            <div class="password-container">
                <input type="password" name="password" id="password" required value="">
                <span class="toggle-password" onclick="togglePassword()" title="Mostrar/ocultar contraseña">👁</span>
            </div>

            <label for="rol">Rol</label>
            <select name="rol" id="rol" required onchange="toggleMarcas()">
                <option value="">Selecciona un rol</option>
                <option value="Admin">Administrador</option>
                <option value="JDV">Jefe de Ventas</option>
                <option value="EjecVen">Ejecutivo de Ventas</option>
                <option value="Ops">Operaciones</option>
                <option value="JDO">Jefe de Operaciones</option>
            </select>

            <label for="marca">Marca Principal</label>
            <select name="marca" id="marca" required>
                <option value="">Selecciona una marca</option>
                <option value="CAMALEON">CAMALEON</option>
                <option value="GOURMET">GOURMET</option>
                <option value="EXPRESS">EXPRESS</option>
                <option value="DEL SABOR">DEL SABOR</option>
            </select>

            <div id="marcasField" style="display: none;">
                <label for="marcas">Asignar Marcas</label>
                <select name="marcas" id="marcas" multiple>
                    <option value="CAMALEON">CAMALEON</option>
                    <option value="GOURMET">GOURMET</option>
                    <option value="EXPRESS">EXPRESS</option>
                    <option value="DEL SABOR">DEL SABOR</option>
                </select>
            </div>

            <button type="submit">Crear Usuario</button>
        </form>
    </div>

    <script>
        function toggleMarcas() {
            const rol = document.getElementById('rol').value;
            const marcasField = document.getElementById('marcasField');
            marcasField.style.display = rol === 'EjecVen' ? 'block' : 'none';
        }

        function togglePassword() {
            const passwordInput = document.getElementById('password');
            passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
        }

        function clearForm() {
            setTimeout(() => {
                document.getElementById('nombre').value = '';
                document.getElementById('correo').value = '';
                document.getElementById('password').value = '';
                document.getElementById('rol').value = '';
                document.getElementById('marca').value = '';
                document.getElementById('marcas').value = '';
                toggleMarcas();
            }, 50);
            return true;
        }

        window.onload = function () {
            toggleMarcas();
            clearForm();
        };
    </script>
</body>
</html>
