<?php
use App\Concerns\ProfileValidationRules;
use Flux\Flux;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Title;
use Livewire\Component;
use Livewire\WithFileUploads;
?>

<section class="w-full">
    @include('partials.settings-heading')

    <flux:heading class="sr-only">Perfil</flux:heading>

    <x-pages::settings.layout :heading="'Perfil'" :subheading="'Actualiza tus datos y foto de perfil'">
        <div class="my-6 flex flex-col gap-8">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                <x-user-avatar :user="auth()->user()" size="lg" />
                <div class="flex flex-wrap gap-2">
                    <label class="setel-btn-secondary inline-flex cursor-pointer items-center gap-2 px-4 py-2 text-sm font-medium">
                        <flux:icon.photo class="size-4" />
                        Cambiar foto
                        <input type="file" class="sr-only" wire:model="profilePhoto" accept="image/jpeg,image/png,image/webp" />
                    </label>
                    @if (auth()->user()->avatar_path)
                        <flux:button type="button" variant="ghost" size="sm" wire:click="removeAvatar" wire:confirm="¿Quitar la foto de perfil?">
                            Quitar foto
                        </flux:button>
                    @endif
                </div>
            </div>
            <div wire:loading wire:target="profilePhoto" class="text-sm text-[var(--setel-text-muted)]">Procesando imagen…</div>
            @error('profilePhoto')
                <p class="text-sm text-red-600">{{ $message }}</p>
            @enderror

            <form wire:submit="updateProfileInformation" class="w-full space-y-6">
                <flux:input wire:model="name" label="Nombres" type="text" required autocomplete="given-name" />

                <div class="grid gap-6 sm:grid-cols-2">
                    <flux:input wire:model="paternal_surname" label="Apellido paterno" type="text" required autocomplete="family-name" />
                    <flux:input wire:model="maternal_surname" label="Apellido materno" type="text" required />
                </div>

                <div>
                    <label class="setel-users-filter-label" for="profile-document">Documento</label>
                    <input
                        id="profile-document"
                        type="text"
                        class="setel-input w-full opacity-80"
                        value="{{ auth()->user()->document }}"
                        disabled
                        readonly
                    />
                    <p class="mt-1 text-xs text-[var(--setel-text-muted)]">Identificador de acceso; solo un administrador puede cambiarlo.</p>
                </div>

                <flux:input wire:model="phone" label="Teléfono" type="text" autocomplete="tel" />

                <div>
                    <flux:input wire:model="email" label="Correo electrónico" type="email" required autocomplete="email" />
                </div>

                <div class="flex items-center gap-4">
                    <flux:button variant="primary" type="submit" data-test="update-profile-button">
                        Guardar cambios
                    </flux:button>
                </div>
            </form>
        </div>

        @if ($this->showDeleteUser)
            <livewire:pages::settings.delete-user-form />
        @endif
    </x-pages::settings.layout>
</section>