@php
    $workflowHistory = $workflowHistory ?? [];
@endphp
<style>
    .mec-report-workflow-timeline {
        padding-left: 0;
    }
    .mec-report-history-item {
        position: relative;
        padding-bottom: 1rem;
    }
    .mec-report-history-item:last-child {
        padding-bottom: 0;
    }
    .mec-report-history-item-connector::before {
        content: '';
        position: absolute;
        left: 5px;
        top: 14px;
        bottom: 0;
        width: 1px;
        background: #d1d5db;
    }
    .dark-mode .mec-report-history-item-connector::before {
        background: rgba(255, 255, 255, 0.18);
    }
    .mec-report-history-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #9ca3af;
        margin-top: 5px;
        margin-right: 12px;
    }
    .mec-report-history-bullet.is-submitted { background: #6c757d; }
    .mec-report-history-bullet.is-forwarded { background: #28a745; }
    .mec-report-history-bullet.is-returned { background: #ffc107; }
    .mec-report-history-bullet.is-declined { background: #dc3545; }
    .mec-report-history-bullet.is-resubmitted { background: #17a2b8; }
    .mec-report-history-bullet.is-published { background: #069494; }
    .mec-report-history-content {
        flex: 1;
        min-width: 0;
    }
    .mec-report-history-content .font-weight-bold {
        margin-bottom: 2px;
    }
</style>
@if ($workflowHistory === [])
    <p class="text-muted mb-0">{{ __('No workflow history has been recorded for this report yet.') }}</p>
@else
    <ul class="list-unstyled mec-report-workflow-timeline mb-0">
        @foreach ($workflowHistory as $idx => $entry)
            @php
                $isLast = $idx === count($workflowHistory) - 1;
                $actionDate = $entry['action_date'] ?? null;
                $timestamp = $actionDate instanceof \DateTimeInterface
                    ? $actionDate->format('d M Y').' • '.$actionDate->format('H:i')
                    : '—';
                $bullet = (string) ($entry['bullet'] ?? 'is-submitted');
            @endphp
            <li class="mec-report-history-item{{ $isLast ? '' : ' mec-report-history-item-connector' }}">
                <div class="d-flex">
                    <span class="mec-report-history-bullet flex-shrink-0 {{ $bullet }}"></span>
                    <div class="mec-report-history-content">
                        <div class="font-weight-bold">{{ $entry['action_label'] ?? '' }}</div>
                        @if (filled($entry['routing_line'] ?? null))
                            <div class="small text-muted">{{ $entry['routing_line'] }}</div>
                        @endif
                        <div class="small text-muted">{{ $timestamp }}</div>
                        @if (filled($entry['remarks'] ?? null))
                            <div class="small mt-1">
                                <span class="text-muted font-weight-bold">{{ __('Note') }}:</span>
                                <span>{!! nl2br(e((string) $entry['remarks'])) !!}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </li>
        @endforeach
    </ul>
@endif