<x-app-layout>
    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
        <div class="flex items-center space-x-4">
            <a href="{{ route('users.index') }}" class="w-10 h-10 rounded-xl bg-black border border-slate-200 flex items-center justify-center text-white hover:bg-slate-800 transition duration-150">
                &larr;
            </a>
            <div class="w-14 h-14 rounded-2xl bg-brand-50 text-brand-700 border-brand-200 flex items-center justify-center font-bold text-xl uppercase">
                {{ substr($user->first_name ?: $user->name, 0, 1) }}{{ substr($user->last_name, 0, 1) }}
            </div>
            <div>
                <div class="flex items-center space-x-2">
                    <h2 class="text-xl font-bold text-slate-800">{{ $user->first_name }} {{ $user->last_name }}</h2>
                    <span class="px-2 py-0.5 bg-brand-50 border-brand-200 text-brand-700 text-xs font-bold uppercase rounded-md tracking-wider">
                        {{ $user->role }}
                    </span>
                </div>
                <p class="text-slate-500 text-sm mt-1">Profile registered on {{ $user->created_at->format('d-m-Y') }}</p>
            </div>
        </div>
        
        <div class="mt-4 md:mt-0 flex space-x-3">
            <a href="{{ route('users.edit', $user->id) }}" class="py-2 px-4 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition duration-150">
                ✏️ Edit Profile
            </a>
            @if(auth()->id() !== $user->id)
                <form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Delete this user account permanently?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="py-2 px-4 bg-red-50 border border-red-200 hover:bg-red-500 text-red-600 hover:text-white text-sm font-semibold rounded-xl transition duration-150">
                        🗑 Delete User
                    </button>
                </form>
            @endif
        </div>
    </div>

    <!-- Details Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Contact Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">📧 Contact details</h3>
                <table class="w-full text-sm">
                    <tr class="h-9 border-b border-slate-200">
                        <td class="text-slate-500 w-1/3">Email Address:</td>
                        <td class="text-slate-700 font-medium">{{ $user->email }}</td>
                    </tr>
                    <tr class="h-9 border-b border-slate-200">
                        <td class="text-slate-500">Phone Number:</td>
                        <td class="text-slate-700 font-medium">{{ $user->phone ?: 'N/A' }}</td>
                    </tr>
                    <tr class="h-9">
                        <td class="text-slate-500">Mobile Number:</td>
                        <td class="text-slate-700 font-medium">{{ $user->mobile ?: 'N/A' }}</td>
                    </tr>
                </table>
            </div>

            <!-- Identity, Address, and Emergency Contact -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">🪪 Identity, Address & Emergency</h3>
                <table class="w-full text-sm">
                    <tr class="h-9 border-b border-slate-200">
                        <td class="text-slate-500 w-1/3">Passport/National ID:</td>
                        <td class="text-slate-700 font-medium">{{ $user->id_passport_no ?: 'N/A' }}</td>
                    </tr>
                    <tr class="h-9 border-b border-slate-200">
                        <td class="text-slate-500">Physical Address:</td>
                        <td class="text-slate-700 font-medium">{{ $user->address ?: 'No Address Added' }}</td>
                    </tr>
                    <tr class="h-9">
                        <td class="text-slate-500">Emergency Details:</td>
                        <td class="text-slate-700 font-medium whitespace-pre-wrap">{{ $user->emergency_contact ?: 'None Listed' }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Sidebar Details -->
        <div class="space-y-6">
            <!-- Payout Bank account details -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">🏦 Banking credentials</h3>
                <table class="w-full text-sm">
                    <tr class="h-8">
                        <td class="text-slate-500 w-1/3">Bank Name:</td>
                        <td class="text-slate-700 font-semibold">{{ $user->bank_name ?: 'N/A' }}</td>
                    </tr>
                    <tr class="h-8">
                        <td class="text-slate-500">Account No:</td>
                        <td class="text-slate-700 font-mono font-semibold">{{ $user->bank_account_no ?: 'N/A' }}</td>
                    </tr>
                    <tr class="h-8">
                        <td class="text-slate-500">Sort Code:</td>
                        <td class="text-slate-700 font-mono font-semibold">{{ $user->sort_code ?: 'N/A' }}</td>
                    </tr>
                </table>
            </div>


        </div>
    </div>
</x-app-layout>
