@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto bg-white shadow-md rounded p-6">
    <h2 class="text-xl font-bold mb-4">My Profile</h2>

    <div class="space-y-4">
        <div>
            <label class="font-semibold">Name:</label>
            <p>{{ $user->name }}</p>
        </div>

        <div>
            <label class="font-semibold">Email:</label>
            <p>{{ $user->email }}</p>
        </div>

        <div>
            <label class="font-semibold">Phone:</label>
            <p>{{ $user->phone ?? 'N/A' }}</p>
        </div>

        <div>
            <label class="font-semibold">Roles:</label>
            <p>
                @foreach($user->roles as $role)
                    <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded mr-1">{{ $role->name }}</span>
                @endforeach
            </p>
        </div>
    </div>
    
    <div class="mt-6">
        <a href="{{ route('profile.edit') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow">
            Edit Profile
        </a>
    </div>
</div>
@endsection