@extends('layouts.app')

@section('title', 'Mi perfil')

@section('content')
    <div class="mx-auto max-w-2xl space-y-6">

        <x-card>
            <div class="mb-6 flex items-center gap-4">
                <span class="flex size-14 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
                    {{ $user->initials() }}
                </span>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $user->name }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ ucfirst($user->getRoleNames()->first() ?? 'Sin rol') }}
                    </p>
                </div>
            </div>

            <form method="POST" action="{{ route('profile.update') }}" class="space-y-5">
                @csrf
                @method('PATCH')

                <div>
                    <x-label for="name">Nombre completo *</x-label>
                    <x-input id="name" type="text" name="name" value="{{ old('name', $user->name) }}" required />
                    <x-error for="name" />
                </div>

                <div>
                    <x-label for="email">Correo electrónico *</x-label>
                    <x-input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" required />
                    <x-error for="email" />
                </div>

                <div class="flex justify-end">
                    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar cambios</x-button>
                </div>
            </form>
        </x-card>

        <x-card>
            <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">Cambiar contraseña</h3>

            <form method="POST" action="{{ route('profile.password') }}" class="space-y-5">
                @csrf
                @method('PUT')

                <div>
                    <x-label for="current_password">Contraseña actual *</x-label>
                    <x-input id="current_password" type="password" name="current_password" required autocomplete="current-password" />
                    <x-error for="current_password" />
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <x-label for="password">Nueva contraseña *</x-label>
                        <x-input id="password" type="password" name="password" required autocomplete="new-password" />
                        <x-error for="password" />
                    </div>
                    <div>
                        <x-label for="password_confirmation">Confirmar nueva contraseña *</x-label>
                        <x-input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password" />
                    </div>
                </div>

                <div class="flex justify-end">
                    <x-button type="submit"><i class="fa-solid fa-key"></i> Actualizar contraseña</x-button>
                </div>
            </form>
        </x-card>
    </div>
@endsection