@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="space-y-6">
        <div class="flex flex-col items-center mb-8">
            <div class="size-24 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
                <span class="material-symbols-outlined text-5xl">person_add</span>
            </div>
            <p class="mt-4 text-sm text-slate-500 dark:text-slate-400">Completa la información del nuevo perfil</p>
        </div>
        <div class="space-y-5">
            <div class="space-y-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1" for="full_name">Nombre
                    Completo</label>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">person</span>
                    <input
                        class="w-full pl-10 pr-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-primary/20 transition-all outline-none"
                        id="full_name" placeholder="Ej. Roberto Alarcón" type="text" />
                </div>
            </div>
            <div class="space-y-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1" for="email">Correo
                    Electrónico</label>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">mail</span>
                    <input
                        class="w-full pl-10 pr-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-primary/20 transition-all outline-none"
                        id="email" placeholder="usuario@ejemplo.com" type="email" />
                </div>
            </div>
            <div class="space-y-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1"
                    for="password">Contraseña</label>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">lock</span>
                    <input
                        class="w-full pl-10 pr-12 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-primary/20 transition-all outline-none"
                        id="password" placeholder="••••••••" type="password" />
                    <button class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-primary"
                        type="button">
                        <span class="material-symbols-outlined text-[20px]">visibility</span>
                    </button>
                </div>
            </div>
            <div class="space-y-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1" for="role">Rol de
                    Usuario</label>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">badge</span>
                    <select
                        class="w-full pl-10 pr-10 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-primary/20 appearance-none transition-all outline-none"
                        id="role">
                        <option disabled="" selected="" value="">Selecciona un rol</option>
                        <option value="admin">Administrador</option>
                        <option value="operator">Operador</option>
                        <option value="driver">Conductor</option>
                    </select>
                    <span
                        class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
                </div>
            </div>
        </div>
    </div>

    <div class=" bottom-0 left-0 w-full bg-white/80 backdrop-blur-lg border-t border-outline-variant p-4 z-40">
        <div class="max-w-2xl mx-auto">
            <button
                class="w-full bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30 flex items-center justify-center gap-2 transition-all duration-200 active:scale-[0.98]">
                <span class="material-symbols-outlined" data-icon="save" data-weight="fill"
                    style="font-variation-settings: 'FILL' 1;">save</span>
                Guardar Usuario
            </button>
        </div>
    </div>
@endsection