<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-gray-700">{{ __('مستحقات المدربين') }}</h3>
        <span class="text-xs text-gray-500">{{ $monthName }}</span>
    </div>

    <div class="flex items-baseline gap-2 mb-4">
        <span class="text-2xl font-bold text-gray-900" dir="ltr">{{ number_format($totalDues / 100, 2) }}</span>
        <span class="text-sm text-gray-500">{{ __('ج.م') }}</span>
    </div>

    <div class="text-xs text-gray-500 mb-4">
        {{ $trainerCount }} {{ __('مدرب') }} · {{ __('إجمالي المستحقات هذا الشهر') }}
    </div>

    @if($topTrainers->isNotEmpty())
    <div class="border-t border-gray-100 pt-3 space-y-2.5">
        <p class="text-xs font-medium text-gray-600">{{ __('أعلى المستحقات') }}</p>
        @foreach($topTrainers as $trainer)
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-700">{{ $trainer['name'] }}</span>
            <span class="text-sm font-medium text-gray-900" dir="ltr">{{ number_format($trainer['amount'] / 100, 0) }} {{ __('ج.م') }}</span>
        </div>
        @endforeach
    </div>
    @endif
</div>
