@php
    $step_labels = \App\Rma::stepLabels();
@endphp

<div style="min-width: 520px; max-width: 580px;">
    @if(empty($audits) || count($audits) === 0)
        <div class="text-muted">@lang('messages.no_data')</div>
    @else
        <div style="margin-bottom: 6px;">
            <strong>@lang('rma.audit_trail')</strong>
            <span class="text-muted">&middot;</span>
            <span class="text-muted">{{ $rma->rma_no }}</span>
        </div>

        <div style="position: relative; padding-left: 30px;">
            <div style="position:absolute; left:10px; top:0; bottom:0; width:2px; background:#e5e7eb;"></div>

            @foreach($audits as $audit)
                @php
                    $is_latest = $loop->first;
                    $step = $step_labels[$audit->step] ?? $audit->step;
                    $action = ucfirst(str_replace('_', ' ', (string) $audit->action));
                    $user = optional($audit->user)->user_full_name ?? optional($audit->user)->first_name ?? '--';
                @endphp

                <div style="position: relative; padding: 8px 0 10px 0;">
                    <div style="position:absolute; left:-4px; top:14px; width:16px; height:16px; border-radius:9999px; background:{{ $is_latest ? '#22c55e' : '#cbd5e1' }}; box-shadow:0 0 0 3px #fff; display:flex; align-items:center; justify-content:center;">
                        @if($is_latest)
                            <i class="fa fa-check" style="color:#fff; font-size:10px; line-height:1;"></i>
                        @endif
                    </div>

                    <div style="{{ $is_latest ? 'background:#f0fdf4;border:1px solid #bbf7d0;' : 'background:#fff;border:1px solid #e5e7eb;opacity:0.95;' }} border-radius:12px; padding:8px 10px; margin-left:18px;">
                        <div style="display:flex; justify-content:space-between; gap:10px;">
                            <div>
                                <div style="font-weight:700; color:#111827; font-size:13px;">{{ $step }}</div>
                                <div style="color:#6b7280; font-size:12px; margin-top:2px;">
                                    {{ $action }} &middot; <strong>@lang('report.user'):</strong> {{ $user }}
                                </div>
                            </div>
                            <div style="color:#6b7280; font-size:11px; white-space:nowrap;">
                                {{ @format_datetime($audit->created_at) }}
                            </div>
                        </div>

                        @if(!empty($audit->internal_note))
                            <div style="margin-top:8px; background:#f9fafb; border:1px solid #eef2f7; border-radius:10px; padding:6px 8px; font-size:12px; color:#374151;">
                                <strong>@lang('rma.internal_note'):</strong> {{ $audit->internal_note }}
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>