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

<div>
    <div class="mb-6">
        <a href="{{ $gruppo ? route('mio-gruppo') : 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>
            {{ $gruppo ? 'Torna al mio gruppo' : '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->identificativo }}</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>

        {{-- Gruppo di servizio (solo per il sorvegliante) --}}
        @if($gruppo)
        <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-6" aria-labelledby="titolo-mio-gruppo">
            <h3 id="titolo-mio-gruppo" class="text-lg font-semibold text-gray-900 mb-1">Il tuo gruppo di servizio</h3>
            <p class="text-sm text-gray-500 mb-4">
                Sei il sorvegliante del gruppo <strong class="text-gray-800">{{ $gruppo->nome }}</strong> dal {{ $gruppo->created_at->format('d/m/Y') }}.
            </p>
            <dl class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div class="rounded-lg bg-gray-50 px-3 py-2">
                    <dt class="text-xs text-gray-500">Membri</dt>
                    <dd class="text-xl font-bold text-gray-900">{{ $riepilogoGruppo['membri'] }}</dd>
                </div>
                <div class="rounded-lg bg-gray-50 px-3 py-2">
                    <dt class="text-xs text-gray-500">Nel pacchetto</dt>
                    <dd class="text-xl font-bold text-gray-900">{{ $riepilogoGruppo['pacchetto'] }}</dd>
                </div>
                <div class="rounded-lg bg-gray-50 px-3 py-2">
                    <dt class="text-xs text-gray-500">Da dare</dt>
                    <dd class="text-xl font-bold text-gray-900">{{ $riepilogoGruppo['da_dare'] }}</dd>
                </div>
                <div class="rounded-lg bg-gray-50 px-3 py-2">
                    <dt class="text-xs text-gray-500">Dati ai membri</dt>
                    <dd class="text-xl font-bold text-gray-900">{{ $riepilogoGruppo['dati'] }}</dd>
                </div>
            </dl>
            <div class="mt-4">
                <x-btn variante="primary" :href="route('mio-gruppo')">Vai al mio gruppo</x-btn>
            </div>
        </section>
        @endif

        {{-- 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">{{ $user->isSorvegliante() ? 'Aggiorna nome e cognome.' : '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>
                @if($user->isSorvegliante())
                    {{-- Il sorvegliante entra con il nome utente del gruppo, senza email --}}
                    <div>
                        <p class="block text-sm font-medium text-gray-700">Nome utente</p>
                        <p class="mt-1 text-sm"><code class="select-all">{{ $user->username }}</code></p>
                        <p class="mt-1 text-xs text-gray-500">Viene dal nome del gruppo: lo usi per entrare, insieme alla password.</p>
                    </div>
                @else
                <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>
                @endif
                <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>