@extends('layouts.app')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
             <div class="p-4 sm:p-8 bg-gray-50 border border-gray-200 shadow sm:rounded-lg">
                 <div class="max-w-2xl">
                     <h3 class="text-lg font-medium text-gray-900 mb-6">
                        {{ __('Profile Information') }}
                    </h3>

                    <div class="space-y-6">
                         <div>
                             <label class="block font-medium text-sm text-gray-900">{{ __('Name') }}</label>
                             <p class="mt-1 text-sm text-gray-700">{{ $user->name }}</p>
                         </div>

                         <div>
                             <label class="block font-medium text-sm text-gray-900">{{ __('Email') }}</label>
                             <p class="mt-1 text-sm text-gray-700">{{ $user->email }}</p>
                         </div>

                         <div>
                             <label class="block font-medium text-sm text-gray-900">{{ __('Role') }}</label>
                             <p class="mt-1 text-sm text-gray-700">{{ ucwords(str_replace('_', ' ', $user->role)) }}</p>
                         </div>

                         <div>
                             <label class="block font-medium text-sm text-gray-900">{{ __('Branch') }}</label>
                             <p class="mt-1 text-sm text-gray-700">{{ $user->branch?->name ?? 'N/A' }}</p>
                         </div>
                    </div>

                     <div class="flex items-center gap-4 mt-8">
                         <a class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150" href="{{ route('profile.edit') }}">
                             {{ __('Edit Profile') }}
                         </a>
                     </div>
                </div>
            </div>
        </div>
    </div>
@endsection