@extends(auth()->check() && auth()->user()->hasRole('usuario') ? 'layouts.portal' : 'layouts.app')
@section('title', 'Mi Perfil')
@section('content')

<div class="max-w-lg lg:max-w-3xl mx-auto">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-5">
        @if(auth()->user()->hasRole('usuario'))
        <a href="{{ route('portal.index') }}"
           class="w-9 h-9 flex items-center justify-center rounded-full bg-white border border-gray-200 text-gray-500 shadow-sm flex-shrink-0">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        @endif
        <div>
            <h1 class="text-xl font-bold text-gray-900">Mi perfil</h1>
            <p class="text-xs text-gray-400">Actualiza tu información personal</p>
        </div>
    </div>

    {{-- Avatar + nombre --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 mb-4 flex items-center gap-4">
        <div class="w-14 h-14 rounded-full bg-blue-600 flex items-center justify-center text-white text-xl font-bold flex-shrink-0">
            {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
        </div>
        <div>
            <p class="font-semibold text-gray-900">{{ auth()->user()->name }}</p>
            <p class="text-sm text-gray-400">{{ auth()->user()->email }}</p>
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 mt-1">
                {{ auth()->user()->getRoleNames()->first() ?? 'Usuario' }}
            </span>
        </div>
    </div>

    {{-- Actualizar información --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 mb-4">
        <h2 class="text-sm font-semibold text-gray-700 mb-4">Información personal</h2>
        <livewire:profile.update-profile-information-form />
    </div>

    {{-- Cambiar contraseña --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-4">Cambiar contraseña</h2>
        <livewire:profile.update-password-form />
    </div>

</div>

@endsection
