<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
    <h3 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('سجل الحالات') }}</h3>

    @if($history->isEmpty())
    <p class="text-sm text-gray-400 text-center py-4">{{ __('لا يوجد تغييرات') }}</p>
    @else
    <div class="relative">
        <div class="absolute top-0 bottom-0 start-3 w-0.5 bg-gray-200"></div>

        <div class="space-y-3 sm:space-y-4">
            @foreach($history as $item)
            <div class="flex items-start gap-2 sm:gap-3 relative">
                <div class="w-6 h-6 rounded-full border-2 border-white shadow-sm z-10 shrink-0
                    @switch($item['to'])
                        @case('active') bg-green-500 @break
                        @case('frozen') bg-blue-500 @break
                        @case('suspended') bg-red-500 @break
                        @case('graduated') bg-purple-500 @break
                        @case('withdrawn') bg-gray-500 @break
                        @case('inactive') bg-gray-400 @break
                        @default bg-gray-300
                    @endswitch
                "></div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 sm:gap-2 flex-wrap">
                        @if($item['from'])
                        <span class="text-xs text-gray-500">{{ __($item['from']) }}</span>
                        <svg class="w-3 h-3 text-gray-400 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        @endif
                        <span class="text-xs font-medium text-gray-800">{{ __($item['to']) }}</span>
                    </div>
                    <p class="text-[11px] text-gray-400 mt-0.5 truncate">
                        {{ $item['user'] }} &bull; {{ \Carbon\Carbon::parse($item['date'])->diffForHumans() }}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
