@php
    $statusHistory = $viewData['statusHistory'] ?? collect();
@endphp

<div class="w-full">
    <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Status History</h3>
        
        @if($statusHistory->count() > 0)
            <div class="space-y-2 max-h-48 overflow-y-auto bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                @foreach($statusHistory as $history)
                    <div class="text-sm border-b border-gray-200 dark:border-gray-700 pb-2 mb-2 last:border-0 last:pb-0 last:mb-0">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                @php
                                    $colorClass = match($history->color_code) {
                                        'label-danger' => 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
                                        'label-warning' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
                                        'label-info' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400',
                                        'label-primary' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400',
                                        'label-success' => 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
                                        'label-default' => 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400',
                                        default => 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400'
                                    };
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium {{ $colorClass }}">
                                    {{ $history->status }}
                                    @if($history->sub_status)
                                        - {{ $history->sub_status }}
                                    @endif
                                </span>
                            </div>
                            <span class="text-gray-500 dark:text-gray-400 text-xs">
                                {{ \Carbon\Carbon::parse($history->date)->format('M j, Y g:i A') }}
                            </span>
                        </div>
                        
                        @if($history->username)
                            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                By: {{ $history->username }}
                            </div>
                        @endif
                        
                        @if(!empty($history->comment))
                            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">
                                "{{ $history->comment }}"
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                No status history available
            </p>
        @endif
    </div>
</div>