<?= $this->extend('layouts/main_layout') ?>
<?= $this->section('content') ?>

<div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-900"><i class="bi bi-person-plus"></i> Registrar Usuario</h2>
    <a href="<?= site_url('users') ?>" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg no-underline inline-flex items-center gap-2 shadow-sm transition">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="bg-violet-100 rounded-xl shadow-sm border border-gray-100">
    <div class="p-6">
        <form method="post" action="<?= site_url('users') ?>">
            <?= csrf_field() ?>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-500 mb-1">Nombre de Usuario *</label>
                    <input type="text" name="username" id="username" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" value="<?= old('username') ?>" required>
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-500 mb-1">Email *</label>
                    <input type="email" name="email" id="email" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" value="<?= old('email') ?>" required>
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-500 mb-1">Contrasena *</label>
                    <input type="password" name="password" id="password" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                    <p class="text-xs text-gray-400 mt-1">Minimo 6 caracteres</p>
                </div>
                <div>
                    <label for="id_rol" class="block text-sm font-medium text-gray-500 mb-1">Rol *</label>
                    <select name="id_rol" id="id_rol" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                        <option value="">Seleccione...</option>
                        <option value="1" <?= old('id_rol') == 1 ? 'selected' : '' ?>>Administrador</option>
                        <option value="2" <?= old('id_rol') == 2 ? 'selected' : '' ?>>Vendedor</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-6">
                <button type="reset" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium inline-flex items-center gap-2 cursor-pointer">Limpiar</button>
                <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium inline-flex items-center gap-2 border-0 cursor-pointer shadow-sm transition">
                    <i class="bi bi-person-check"></i> Registrar Usuario
                </button>
            </div>
        </form>
    </div>
</div>

<?= $this->endSection() ?>