termanager2/resources/views/livewire/profile.blade.php

<div>
    <div class="mb-6">
        <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-indigo-600 transition-colors mb-1">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Torna alla home
        </a>
        <h1 class="text-2xl font-bold text-gray-900">Il mio profilo</h1>
    </div>

    <div class="max-w-2xl space-y-6">
        {{-- Intestazione: avatar iniziale + nome --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex items-center gap-4">
            <div class="h-16 w-16 flex-none rounded-full flex items-center justify-center text-white text-2xl font-bold shadow-sm"
                 style="background:linear-gradient(135deg,#4f46e5,#6366f1)">
                {{ strtoupper(mb_substr($user->name, 0, 1)) }}
            </div>
            <div class="min-w-0">
                <h2 class="text-xl font-bold text-gray-900 truncate">{{ $user->name }}</h2>
                <p class="text-sm text-gray-500 truncate mt-0.5">
                    <span class="break-all">{{ $user->email }}</span>
                    <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 align-middle">
                        {{ ucfirst($user->roles->first()?->name ?? 'utente') }}
                    </span>
                </p>
            </div>
        </div>

        {{-- Dati profilo --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-1">Dati profilo</h3>
            <p class="text-sm text-gray-500 mb-4">Aggiorna nome e cognome ed email.</p>

            @if(session('profile_success'))
                <div class="mb-4 rounded-lg bg-green-50 border border-green-200 px-4 py-2.5 text-sm text-green-800">
                    {{ session('profile_success') }}
                </div>
            @endif

            <form wire:submit="updateProfile" class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Nome e cognome</label>
                    <input wire:model="name" type="text" id="name" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                    <input wire:model="email" type="email" id="email" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="flex justify-end">
                    <x-btn variante="primary" type="submit">Salva modifiche</x-btn>
                </div>
            </form>
        </div>

        {{-- Cambio password --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-1">Cambia password</h3>
            <p class="text-sm text-gray-500 mb-4">Per motivi di sicurezza conferma la password attuale.</p>

            <form wire:submit="updatePassword" class="space-y-4">
                <div>
                    <label for="current_password" class="block text-sm font-medium text-gray-700">Password attuale</label>
                    <input wire:model="current_password" type="password" id="current_password" autocomplete="current-password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('current_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">Nuova password</label>
                        <input wire:model="password" type="password" id="password" autocomplete="new-password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Conferma nuova password</label>
                        <input wire:model="password_confirmation" type="password" id="password_confirmation" autocomplete="new-password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    </div>
                </div>
                <div class="flex justify-end">
                    <x-btn variante="primary" type="submit">Aggiorna password</x-btn>
                </div>
            </form>
        </div>
    </div>
</div>