<div>
    <livewire:components.clean-header title="Editar usuario" />


    <div class="w-full px-20 pt-16 pb-4">
        <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">

            @if (session()->has('success'))
                <div class="mb-4 rounded bg-green-100 px-4 py-3 text-green-700">
                    {{ session('success') }}
                </div>
            @endif

            @if (session()->has('error'))
                <div class="mb-4 rounded bg-red-100 px-4 py-3 text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            <div class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">
                <div class="w-full flex items-center justify-center flex-col">
                    <h1 class="text-4xl font-bold">Editar usuario</h1>
                    <p class="text-gray-500 text-sm">
                        Edita los datos del usuario <strong>{{ $user->name }}</strong> para que pueda usar los productos de la plataforma.
                    </p>
                </div>
                <div class="w-full flex items-end justify-between mt-8">

                    <div class="w-full space-y-4">

                        {{-- Name --}}
                        <div>
                            <label class="block font-bold">Nombre</label>
                            <input
                                type="text"
                                wire:model="name"
                                class="mt-1 w-full rounded-lg border px-3 py-2 {{ $errors->has('name') ? 'border-red-500' : 'border-gray-200' }}"
                                required
                            >
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div>
                            <label class="block font-bold">Email</label>
                            <input
                                type="email"
                                wire:model="email"
                                class="mt-1 w-full rounded-lg border px-3 py-2 {{ $errors->has('email') ? 'border-red-500' : 'border-gray-200' }}"
                                required
                            >
                            @error('email')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Password (optional) --}}
                        <div>
                            <label class="block font-bold">Nueva contraseña (opcional)</label>
                            <input
                                type="password"
                                wire:model="password"
                                class="mt-1 w-full rounded-lg border px-3 py-2 {{ $errors->has('password') ? 'border-red-500' : 'border-gray-200' }}"
                            >
                            @error('password')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Confirm Password --}}
                        <div>
                            <label class="block font-bold">Confirmar nueva contraseña</label>
                            <input
                                type="password"
                                wire:model="password_confirmation"
                                class="mt-1 w-full rounded-lg border px-3 py-2 {{ $errors->has('password_confirmation') ? 'border-red-500' : 'border-gray-200' }}"
                            >
                        </div>

                        {{-- Role --}}
                        <div>
                            <label class="block font-bold">Rol</label>

                            <select
                                wire:model="role"
                                class="mt-1 w-full rounded-lg border px-3 py-2 {{ $errors->has('role') ? 'border-red-500' : 'border-gray-200' }}"
                                required
                            >
                                <option value="">Selecciona un rol</option>
                                @foreach($availableRoles as $availableRole)
                                    <option value="{{ $availableRole->name }}">
                                        {{ $availableRole->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Buttons --}}
                        <div class="w-full flex items-center justify-end mt-8">

                            <a href="{{ route('users.index') }}"
                            class="bg-white hover:bg-gray-100 px-4 py-2">
                                Cancelar
                            </a>

                            <button wire:click="update"
                                    wire:loading.attr="disabled"
                                    class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg ml-4">
                                <span wire:loading.remove>Guardar cambios</span>
                                <span wire:loading>Guardando...</span>
                            </button>
                        </div>

                        @if($user->is_deletable())
                            <div class="mt-4">
                                <button wire:click="delete"
                                        wire:confirm="¿Seguro que deseas eliminar este usuario?"
                                        wire:loading.attr="disabled"
                                        class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-700 disabled:opacity-50">
                                    <span wire:loading.remove>Borrar usuario</span>
                                    <span wire:loading>Eliminando...</span>
                                </button>
                            </div>
                        @else
                            <p class="mt-4 text-sm text-gray-500 italic">
                                Este usuario es administrador y no puede borrarse.
                            </p>
                        @endif

                    </div>

                </div>
            </div>

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

