@php
    $assessments = $procedure->loadedAssessmentsFor($userId);
    $latest      = $assessments->first();
    $isPassed    = (bool) $latest?->isPassing();
    $state       = $isPassed ? 'passed' : ($latest ? 'retry' : 'pending');
@endphp

<tr class="procedure-row proc-item" data-state="{{ $state }}" data-name="{{ Str::lower($procedure->name) }}">
    <td class="proc-name">
        <span class="proc-dot proc-dot-{{ $state }}"></span>
        <span>{{ $procedure->name }}</span>
    </td>

    <td class="text-center">
        @if($latest)
            @if($latest->is_na)
            <span class="badge score-na" title="Not applicable">NA</span>
            @else
            <span class="badge score-{{ $latest->score }}" title="{{ $latest->score_label }}">{{ $latest->score }}</span>
            @endif
        @else
            <span class="text-muted">—</span>
        @endif
    </td>

    <td class="text-center">
        @if($isPassed)
        <span class="badge bg-success-subtle text-success-emphasis"><i class="bi bi-check2 me-1"></i>Passed</span>
        @elseif($latest)
        <span class="badge bg-warning-subtle text-warning-emphasis"><i class="bi bi-arrow-repeat me-1"></i>Retry</span>
        @else
        <span class="badge bg-secondary-subtle text-secondary-emphasis">Not assessed</span>
        @endif
    </td>

    <td class="text-muted small text-nowrap d-none d-md-table-cell">
        {{ $latest?->assessment_date?->format('d M Y') ?? '—' }}
    </td>

    <td class="text-end">
        @if($assessments->isNotEmpty())
        <button class="btn btn-sm btn-ghost" type="button"
                data-bs-toggle="collapse" data-bs-target="#hist{{ $procedure->id }}"
                aria-label="Assessment history">
            <i class="bi bi-clock-history"></i>
            <span class="ms-1">{{ $assessments->count() }}</span>
        </button>
        @endif
    </td>
</tr>

@if($assessments->isNotEmpty())
<tr class="proc-history-row proc-item-history" data-for="{{ $procedure->id }}">
    <td colspan="5" class="p-0 border-0">
        <div class="collapse" id="hist{{ $procedure->id }}">
            <div class="proc-history">
                <div class="proc-history-title">
                    <i class="bi bi-clock-history me-1"></i>Assessment history — {{ $procedure->name }}
                </div>
                @foreach($assessments as $a)
                <div class="proc-history-item">
                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                        @if($a->is_na)
                        <span class="badge score-na">NA</span>
                        @else
                        <span class="badge score-{{ $a->score }}">{{ $a->score }}</span>
                        @endif
                        <span class="text-muted small text-nowrap">{{ $a->assessment_date->format('d M Y') }}</span>
                    </div>

                    <div class="flex-grow-1 min-w-0">
                        @if($a->assessedBy)
                        @php $ciProfile = $a->assessedBy->ciProfile; @endphp
                        <div class="d-flex align-items-center gap-2">
                            @if($ciProfile?->photo_path)
                            <img src="{{ asset('storage/' . $ciProfile->photo_path) }}" class="proc-history-avatar"
                                 alt="" title="{{ $a->assessedBy->name }}">
                            @else
                            <span class="proc-history-avatar d-inline-flex align-items-center justify-content-center">
                                <i class="bi bi-person-fill"></i>
                            </span>
                            @endif
                            <div class="min-w-0">
                                <div class="small fw-semibold text-truncate">{{ $a->assessedBy->name }}</div>
                                @if($ciProfile?->position || $ciProfile?->department)
                                <div class="text-muted text-truncate" style="font-size:.7rem">
                                    {{ implode(' · ', array_filter([$ciProfile?->position, $ciProfile?->department])) }}
                                </div>
                                @endif
                            </div>
                        </div>
                        @else
                        <span class="text-muted small">Assessor unknown</span>
                        @endif
                    </div>

                    <div class="proc-history-remark">
                        @if($a->remarks)
                        <i class="bi bi-chat-left-quote me-1 text-muted"></i>{{ $a->remarks }}
                        @else
                        <span class="text-muted fst-italic">No remarks</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </td>
</tr>
@endif