@extends('layouts.dashboard.inface', ['section' => 'agents'])

@section('content')
    <div class="flex-1 overflow-y-auto">
        <div class="w-full max-w-3xl mx-auto p-6 md:p-12">
            <div class="mb-8">
                <a class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-primary dark:text-slate-400 dark:hover:text-blue-400 transition-colors"
                    href="#">
                    <span class="material-symbols-outlined mr-1" style="font-size: 18px;">arrow_back</span>
                    Volver al listado
                </a>
            </div>
            <div class="mb-10">
                <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Agregar Nuevo
                    Vendedor</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-2">Registra un nuevo miembro del equipo de
                    ventas y asigna sus metas mensuales.</p>
            </div>
            <form class="space-y-8">
                <div
                    class="flex flex-col items-center sm:flex-row gap-6 p-6 bg-white dark:bg-[#151b2b] rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
                    <div
                        class="h-24 w-24 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-700 relative group overflow-hidden">
                        <span class="material-symbols-outlined text-slate-400 text-3xl">add_a_photo</span>
                        <input class="absolute inset-0 opacity-0 cursor-pointer" type="file" />
                    </div>
                    <div class="flex-1 text-center sm:text-left">
                        <h3 class="text-sm font-semibold text-slate-900 dark:text-white">Fotografía de perfil
                        </h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Sube una imagen de alta
                            resolución (JPG o PNG, máx. 2MB). Esta imagen se mostrará en el dashboard y
                            reportes.</p>
                        <button class="mt-3 text-sm font-medium text-primary hover:text-blue-600 dark:text-blue-400"
                            type="button">Seleccionar archivo</button>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="full-name">Nombre Completo</label>
                        <input class="form-input-custom" id="full-name" placeholder="Ej. Juan Pérez" required=""
                            type="text" />
                    </div>
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="email">Correo Electrónico</label>
                        <input class="form-input-custom" id="email" placeholder="juan.perez@inmobiliaria.mx"
                            required="" type="email" />
                    </div>
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="phone">Teléfono</label>
                        <input class="form-input-custom" id="phone" placeholder="+52 (55) 0000 0000" type="tel" />
                    </div>
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="branch">Sucursal</label>
                        <select class="form-input-custom appearance-none" id="branch">
                            <option value="">Selecciona una sucursal</option>
                            <option value="cdmx">CDMX - Central</option>
                            <option value="gdl">Guadalajara</option>
                            <option value="mty">Monterrey</option>
                            <option value="qro">Querétaro</option>
                        </select>
                    </div>
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="role">Rol / Nivel</label>
                        <select class="form-input-custom appearance-none" id="role">
                            <option value="junior">Junior Agent</option>
                            <option selected="" value="standard">Agent</option>
                            <option value="senior">Senior Agent</option>
                            <option value="leader">Team Leader</option>
                        </select>
                    </div>
                    <div class="space-y-1.5">
                        <label class="form-label-custom" for="target">Meta de Ventas Mensual (MXN)</label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-mono text-sm">$</span>
                            <input class="form-input-custom pl-8" id="target" placeholder="0.00" type="number" />
                        </div>
                        <p class="text-[10px] text-slate-500 mt-1 italic">Opcional. Se utilizará para calcular
                            el progreso de rendimiento.</p>
                    </div>
                </div>
                <div class="pt-6 border-t border-gray-200 dark:border-gray-800">
                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                        <div class="flex flex-col">
                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Notificaciones
                                de leads</span>
                            <span class="text-xs text-slate-500 dark:text-slate-400">Enviar alertas automáticas
                                cuando se asigne un nuevo lead.</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input checked="" class="sr-only peer" type="checkbox" value="" />
                            <div
                                class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                            </div>
                        </label>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row items-center gap-3 pt-4 pb-12">
                    <button
                        class="w-full sm:w-auto bg-primary hover:bg-blue-600 text-white px-8 py-3 rounded-lg text-sm font-semibold shadow-sm shadow-blue-500/30 transition-all hover:translate-y-[-1px]"
                        type="submit">
                        Guardar Vendedor
                    </button>
                    <button
                        class="w-full sm:w-auto px-8 py-3 rounded-lg text-sm font-semibold text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
                        type="button">
                        Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection