<div>
<x-slot name="header">
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.users') }}" class="btn btn-ghost btn-sm px-2" wire:navigate>
            <x-heroicon-o-arrow-left class="w-4 h-4" />
        </a>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ $user ? 'Editar usuario: ' . $user->name : 'Nuevo usuario' }}
        </h2>
    </div>
</x-slot>

<div class="py-8">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

    @if(session('notify'))
        <div class="alert alert-success mb-4">
            <x-heroicon-o-check-circle class="w-5 h-5" />
            {{ session('notify') }}
        </div>
    @endif

    <div class="card bg-base-100 shadow">
        <div class="card-body p-8">

            <form wire:submit.prevent="save">

                @if($errors->any())
                    <div class="alert alert-error text-sm mb-6">
                        <x-heroicon-o-exclamation-circle class="w-5 h-5 shrink-0" />
                        <ul class="list-disc pl-3 space-y-0.5">
                            @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                        </ul>
                    </div>
                @endif

                {{-- ══════════════════════════════════════════════════════════
                     1. INFORMACIÓN PERSONAL
                ══════════════════════════════════════════════════════════ --}}
                <div class="pb-6 mb-6 border-b border-base-200">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">
                        Información personal
                    </h3>
                    <div class="space-y-4">

                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Título de cortesía
                            </label>
                            <div class="flex-1">
                                <select wire:model="title" class="select select-bordered w-full max-w-xs">
                                    <option value="">— Sin título —</option>
                                    <option value="Sr.">Sr.</option>
                                    <option value="Sra.">Sra.</option>
                                    <option value="Dr.">Dr.</option>
                                    <option value="Dra.">Dra.</option>
                                    <option value="Ing.">Ing.</option>
                                    <option value="Arq.">Arq.</option>
                                    <option value="Prof.">Prof.</option>
                                </select>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Apellidos <span class="text-error">*</span>
                            </label>
                            <div class="flex-1">
                                <input type="text" wire:model="lastName"
                                       class="input input-bordered w-full"
                                       placeholder="García López" />
                                @error('lastName') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Nombre <span class="text-error">*</span>
                            </label>
                            <div class="flex-1">
                                <input type="text" wire:model="firstName"
                                       class="input input-bordered w-full"
                                       placeholder="Ana" />
                                @error('firstName') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                    </div>
                </div>

                {{-- ══════════════════════════════════════════════════════════
                     2. VALIDACIÓN
                ══════════════════════════════════════════════════════════ --}}
                <div class="pb-6 mb-6 border-b border-base-200">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">
                        Validación de acceso
                    </h3>
                    <div class="space-y-4">

                        {{-- Intervalo de fechas --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Válido desde / hasta
                                <p class="text-xs text-gray-400 font-normal mt-0.5">Vacío = sin límite</p>
                            </label>
                            <div class="flex-1 flex items-center gap-2">
                                <input type="date" wire:model="validFrom"
                                       class="input input-bordered flex-1" />
                                <span class="text-gray-400 shrink-0">→</span>
                                <input type="date" wire:model="validUntil"
                                       class="input input-bordered flex-1" />
                            </div>
                        </div>
                        @error('validFrom')  <div class="flex gap-4"><div class="w-48 shrink-0"></div><p class="text-error text-xs flex-1">{{ $message }}</p></div> @enderror
                        @error('validUntil') <div class="flex gap-4"><div class="w-48 shrink-0"></div><p class="text-error text-xs flex-1">{{ $message }}</p></div> @enderror

                        {{-- Contraseña con generador --}}
                        <div class="flex items-start gap-4"
                             x-data="{
                                show: false,
                                generate() {
                                    const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
                                    const lower = 'abcdefghjkmnpqrstuvwxyz';
                                    const digits = '23456789';
                                    const symbols = '!@#$%&*';
                                    const all = upper + lower + digits + symbols;
                                    let pwd = upper[Math.floor(Math.random()*upper.length)]
                                            + lower[Math.floor(Math.random()*lower.length)]
                                            + digits[Math.floor(Math.random()*digits.length)]
                                            + symbols[Math.floor(Math.random()*symbols.length)];
                                    for (let i = 4; i < 12; i++) {
                                        pwd += all[Math.floor(Math.random()*all.length)];
                                    }
                                    pwd = pwd.split('').sort(() => Math.random()-0.5).join('');
                                    $wire.set('formPassword', pwd);
                                    this.show = true;
                                }
                             }">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Contraseña
                                @if(!$user) <span class="text-error">*</span> @endif
                                @if($user)
                                    <p class="text-xs text-gray-400 font-normal mt-0.5">Vacío = no cambiar</p>
                                @endif
                            </label>
                            <div class="flex-1 space-y-2">
                                <div class="flex gap-2">
                                    <label class="input input-bordered flex items-center gap-2 flex-1">
                                        <x-heroicon-o-lock-closed class="w-4 h-4 opacity-40 shrink-0" />
                                        <input wire:model="formPassword" class="grow"
                                               :type="show ? 'text' : 'password'"
                                               placeholder="{{ $user ? '••••••••' : 'Mínimo 8 caracteres' }}" />
                                        <button type="button" @click="show = !show"
                                                class="opacity-50 hover:opacity-100 transition-opacity">
                                            <template x-if="show">
                                                <x-heroicon-o-eye-slash class="w-4 h-4" />
                                            </template>
                                            <template x-if="!show">
                                                <x-heroicon-o-eye class="w-4 h-4" />
                                            </template>
                                        </button>
                                    </label>
                                    <button type="button" @click="generate()"
                                            class="btn btn-outline btn-sm gap-1 shrink-0"
                                            title="Generar contraseña aleatoria">
                                        <x-heroicon-o-arrow-path class="w-4 h-4" />
                                        Generar
                                    </button>
                                </div>
                                @if(!$user)
                                    <p class="text-xs text-gray-400">Mayúsculas, minúsculas, números y símbolo.</p>
                                @endif
                                @error('formPassword') <p class="text-error text-xs">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        {{-- Estado --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Estado <span class="text-error">*</span>
                            </label>
                            <div class="flex-1">
                                <select wire:model="userStatus" class="select select-bordered w-full max-w-xs">
                                    <option value="active">Activo</option>
                                    <option value="inactive">Inactivo</option>
                                    <option value="suspended">Suspendido</option>
                                </select>
                                @error('userStatus') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                    </div>
                </div>

                {{-- ══════════════════════════════════════════════════════════
                     3. CONTACTO
                ══════════════════════════════════════════════════════════ --}}
                <div class="pb-6 mb-6 border-b border-base-200">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">
                        Contacto
                    </h3>
                    <div class="space-y-4">

                        {{-- Empresa --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Empresa <span class="text-error">*</span>
                            </label>
                            <div class="flex-1">
                                <select wire:model.live="companyId" class="select select-bordered w-full">
                                    <option value="">— Seleccionar empresa —</option>
                                    @foreach($companies as $company)
                                        <option value="{{ $company->id }}">
                                            {{ $company->apodo ?: $company->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('companyId') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        {{-- Dirección --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Dirección
                            </label>
                            <div class="flex-1 space-y-1.5">
                                <textarea wire:model="address" rows="2"
                                          class="textarea textarea-bordered w-full"
                                          placeholder="Calle, número, ciudad, CP, país"></textarea>
                                @if($companyId)
                                    <button type="button" wire:click="copyCompanyAddress"
                                            class="btn btn-xs btn-outline gap-1">
                                        <x-heroicon-o-document-duplicate class="w-3.5 h-3.5" />
                                        Copiar dirección de la empresa
                                    </button>
                                @endif
                            </div>
                        </div>

                        {{-- Teléfono --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Teléfono
                            </label>
                            <div class="flex-1">
                                <label class="input input-bordered flex items-center gap-2">
                                    <x-heroicon-o-phone class="w-4 h-4 opacity-40 shrink-0" />
                                    <input type="tel" wire:model="phone" class="grow"
                                           placeholder="+34 600 123 456" />
                                </label>
                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="flex items-start gap-4">
                            <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                                Email <span class="text-error">*</span>
                            </label>
                            <div class="flex-1">
                                <label class="input input-bordered flex items-center gap-2">
                                    <x-heroicon-o-envelope class="w-4 h-4 opacity-40 shrink-0" />
                                    <input type="email" wire:model="email" class="grow"
                                           placeholder="ana@empresa.com" />
                                </label>
                                @error('email') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                    </div>
                </div>

                {{-- ══════════════════════════════════════════════════════════
                     4. PERMISOS
                ══════════════════════════════════════════════════════════ --}}
                <div class="pb-6 mb-6 border-b border-base-200">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">
                        Permisos
                    </h3>
                    <div class="flex items-start gap-4">
                        <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                            Rol <span class="text-error">*</span>
                            <p class="text-xs text-gray-400 font-normal mt-0.5">Define los permisos del usuario</p>
                        </label>
                        <div class="flex-1">
                            <select wire:model="formRole" class="select select-bordered w-full max-w-xs">
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                            @error('formRole') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="flex items-start gap-4 mt-4">
                        <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                            Idioma por defecto <span class="text-error">*</span>
                            <p class="text-xs text-gray-400 font-normal mt-0.5">Idioma de la interfaz para este usuario</p>
                        </label>
                        <div class="flex-1">
                            <div x-data="{ open: false }" @click.outside="open = false" class="relative w-full max-w-xs">
                                {{-- Trigger: muestra la bandera + nombre del idioma seleccionado --}}
                                <button type="button" @click="open = !open"
                                        class="select select-bordered w-full flex items-center gap-2 text-left">
                                    @foreach($languages as $code => $lang)
                                        <span x-show="$wire.locale === '{{ $code }}'" class="flex items-center gap-2">
                                            <img src="{{ asset('images/flags/' . $lang['flag']) }}"
                                                 class="w-5 h-auto rounded-sm border border-base-300" alt="{{ $lang['name'] }}">
                                            {{ $lang['name'] }}
                                        </span>
                                    @endforeach
                                </button>

                                {{-- Opciones --}}
                                <ul x-show="open" x-transition x-cloak
                                    class="absolute z-50 mt-1 w-full bg-base-100 border border-base-300 rounded-box shadow-lg p-1">
                                    @foreach($languages as $code => $lang)
                                        <li>
                                            <button type="button"
                                                    @click="$wire.set('locale', '{{ $code }}'); open = false"
                                                    class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-base-200 text-left"
                                                    :class="$wire.locale === '{{ $code }}' ? 'bg-base-200 font-medium' : ''">
                                                <img src="{{ asset('images/flags/' . $lang['flag']) }}"
                                                     class="w-5 h-auto rounded-sm border border-base-300" alt="{{ $lang['name'] }}">
                                                {{ $lang['name'] }}
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            @error('locale') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                {{-- ══════════════════════════════════════════════════════════
                     5. NOTAS
                ══════════════════════════════════════════════════════════ --}}
                <div class="pb-6 mb-6 border-b border-base-200">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">
                        Notas internas
                    </h3>
                    <div class="flex items-start gap-4">
                        <label class="w-48 shrink-0 pt-2 text-sm font-medium text-gray-700">
                            Notas
                            <p class="text-xs text-gray-400 font-normal mt-0.5">Solo visible para administradores</p>
                        </label>
                        <div class="flex-1">
                            <textarea wire:model="notes" rows="4"
                                      class="textarea textarea-bordered w-full"
                                      placeholder="Observaciones, historial, información relevante…"></textarea>
                        </div>
                    </div>
                </div>

                {{-- ── Botones ───────────────────────────────────────────── --}}
                <div class="flex items-center justify-between pt-2">
                    <a href="{{ route('admin.users') }}" class="btn btn-outline gap-1" wire:navigate>
                        <x-heroicon-o-x-mark class="w-4 h-4" />
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary gap-2"
                            wire:loading.attr="disabled" wire:target="save">
                        <span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
                        <x-heroicon-o-check class="w-4 h-4" />
                        {{ $user ? 'Guardar cambios' : 'Crear usuario' }}
                    </button>
                </div>

            </form>

        </div>
    </div>

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