@props(['mode', 'user' => null, 'administrations' => null, 'selectedMonth' => null])

@if($mode === 'self' && $user)
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
        <div class="flex items-center gap-4">
            <h2 class="text-xl font-bold text-text-dark flex items-center gap-2">
                My Page
            </h2>
            <div class="px-4 py-1.5 bg-orange-100 border border-orange-200 rounded-full text-orange-800 font-bold text-sm flex items-center gap-2 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-orange-500">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
                </svg>
                Thẻ hiện có: <span class="text-lg">{{ $user->card }}</span>
            </div>
        </div>
    </div>
@endif

<div class="grid grid-cols-1 {{ in_array($mode, ['edit', 'delete']) ? 'lg:grid-cols-3' : '' }} gap-6 items-start">
    
    <!-- LEFT PANEL: User Profile & Actions / Form -->
    <div class="{{ in_array($mode, ['edit', 'delete']) ? 'col-span-1' : 'col-span-full' }}">
        @if($mode === 'create')
            <div class="max-w-2xl mx-auto w-full">
                <x-user-form :mode="$mode" :user="$user" />
            </div>
        @else
            <x-user-form :mode="$mode" :user="$user" />
        @endif
    </div>

    <!-- RIGHT PANEL: Transaction History -->
    @if(in_array($mode, ['edit', 'delete', 'self']) && $user && $administrations)
        <div class="col-span-1 lg:col-span-2">
            <x-transaction-history :mode="$mode" :user="$user" :administrations="$administrations" :selectedMonth="$selectedMonth" />
        </div>
    @endif

</div>