<div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-2xl p-5 shadow-sm space-y-4">

    {{-- Header --}}
    <h3 class="flex items-center gap-3 text-sm md:text-base font-semibold text-gray-800 dark:text-gray-100">
        <span
            class="bg-sky-500/10 dark:bg-sky-400/10 w-9 h-9 flex items-center justify-center rounded-full text-sky-600 dark:text-sky-400">
            <x-flux::icon.banknotes variant="solid" class="w-5 h-5" />
        </span>
        <div>
            <span>Account Limits & Balances</span>
            <p class="text-xs text-gray-600 dark:text-gray-400">
                Based on the selected account
            </p>
        </div>
    </h3>

    {{-- Content --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-700 dark:text-gray-300">

        {{-- Per Transaction --}}
        <div class="flex justify-between items-center bg-gray-50 dark:bg-gray-900 rounded-lg px-3 py-2">
            <span class="font-medium">Per Transaction Limit</span>
            <span class="font-semibold">{{ $currencySymbol }}
                {{ number_format($account->per_transaction_limit, 2) }}
            </span>
        </div>

        {{-- Daily --}}
        <div class="flex justify-between items-center bg-gray-50 dark:bg-gray-900 rounded-lg px-3 py-2">
            <span class="font-medium">Daily Limit</span>
            <span class="font-semibold">
                {{ $currencySymbol }}
                {{ number_format($account->daily_transaction_limit, 2) }}
            </span>
        </div>

        {{-- Monthly --}}
        <div class="flex justify-between items-center bg-gray-50 dark:bg-gray-900 rounded-lg px-3 py-2">
            <span class="font-medium">Monthly Limit</span>
            <span class="font-semibold">
                {{ $currencySymbol }}
                {{ number_format($account->monthly_transaction_limit, 2) }}
            </span>
        </div>

        {{-- Reserved --}}
        <div class="flex justify-between items-center bg-yellow-50 dark:bg-yellow-900/20 rounded-lg px-3 py-2">
            <span class="font-medium">Reserved Amount</span>
            <span class="font-semibold text-yellow-700 dark:text-yellow-400">
                {{ $currencySymbol }}
                {{ number_format($account->total_pending_reserve, 2) }}
            </span>
        </div>

        {{-- Available --}}
        <div class="flex justify-between items-center bg-green-50 dark:bg-green-900/20 rounded-lg px-3 py-2">
            <span class="font-medium">Available Balance</span>
            <span class="font-semibold text-green-700 dark:text-green-400">
                {{ $currencySymbol }}
                {{ number_format($account->available_balance, 2) }}
            </span>
        </div>

        {{-- Total --}}
        <div class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-2">
            <span class="font-medium">Total Balance</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">
                {{ $currencySymbol }}
                {{ number_format($account->balance, 2) }}
            </span>
        </div>
    </div>
</div>
