<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">{{ now()->translatedFormat('d M') }}</span>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-4">
        {{-- Overdue --}}
        <div class="text-center">
            <span class="text-2xl font-bold {{ $overdue > 0 ? 'text-red-600' : 'text-gray-400' }}">{{ $overdue }}</span>
            <p class="text-xs text-gray-500 mt-1">{{ __('متأخرة') }}</p>
        </div>

        {{-- Due Today --}}
        <div class="text-center">
            <span class="text-2xl font-bold {{ $dueToday > 0 ? 'text-amber-600' : 'text-gray-400' }}">{{ $dueToday }}</span>
            <p class="text-xs text-gray-500 mt-1">{{ __('اليوم') }}</p>
        </div>

        {{-- Due Soon --}}
        <div class="text-center">
            <span class="text-2xl font-bold text-blue-600">{{ $dueThisWeek }}</span>
            <p class="text-xs text-gray-500 mt-1">{{ __('خلال ٣ أيام') }}</p>
        </div>
    </div>

    @if($byBranch->isNotEmpty())
    <div class="border-t border-gray-100 pt-3 space-y-2">
        <p class="text-xs font-medium text-gray-600">{{ __('حسب الفرع') }}</p>
        @foreach($byBranch as $branch)
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-700">{{ $branch->branch_name }}</span>
            <span class="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
                {{ $branch->count }}
            </span>
        </div>
        @endforeach
    </div>
    @endif

    @if($dueToday + $overdue === 0)
    <div class="text-center py-2">
        <p class="text-sm text-gray-500">{{ __('لا توجد تجديدات مستحقة اليوم') }}</p>
    </div>
    @endif
</div>
