<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-gray-700">{{ __('اتجاهات التسجيل') }}</h3>
        <select wire:model.live="period" class="text-xs rounded border-gray-200 py-1 px-2">
            <option value="7">{{ __('7 أيام') }}</option>
            <option value="30">{{ __('30 يوم') }}</option>
            <option value="90">{{ __('90 يوم') }}</option>
        </select>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-4">
        <div class="text-center p-2 bg-green-50 rounded-lg">
            <p class="text-lg font-bold text-green-600">{{ $totalNew }}</p>
            <p class="text-xs text-gray-500">{{ __('تسجيل جديد') }}</p>
        </div>
        <div class="text-center p-2 bg-red-50 rounded-lg">
            <p class="text-lg font-bold text-red-600">{{ $cancelled }}</p>
            <p class="text-xs text-gray-500">{{ __('ملغى') }}</p>
        </div>
        <div class="text-center p-2 bg-blue-50 rounded-lg">
            <p class="text-lg font-bold text-blue-600">{{ $active }}</p>
            <p class="text-xs text-gray-500">{{ __('نشط حالياً') }}</p>
        </div>
    </div>

    @if(count($dailyEnrollments) > 0)
    @php $max = max($dailyEnrollments) ?: 1; @endphp
    <div class="flex items-end gap-1 h-24">
        @foreach($dailyEnrollments as $date => $count)
        <div class="flex-1 flex flex-col items-center justify-end h-full" title="{{ $date }}: {{ $count }}">
            <div class="w-full bg-blue-400 rounded-t" style="height: {{ round($count / $max * 100) }}%; min-height: 2px;"></div>
        </div>
        @endforeach
    </div>
    <div class="flex justify-between mt-1">
        <span class="text-[10px] text-gray-400" dir="ltr">{{ array_key_first($dailyEnrollments) }}</span>
        <span class="text-[10px] text-gray-400" dir="ltr">{{ array_key_last($dailyEnrollments) }}</span>
    </div>
    @else
    <p class="text-center text-sm text-gray-400 py-4">{{ __('لا توجد بيانات') }}</p>
    @endif
</div>
