{{-- MODAL LIVE PROGRESS (Detail Oriented) --}}
<div class="modal fade" id="modalProgress" tabindex="-1" role="dialog" aria-hidden="true"
    data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content border-radius-2xl shadow-sm border-0 overflow-hidden">
            <div class="modal-header bg-white p-4 border-bottom">
                <h5 class="modal-title font-weight-bolder text-dark">Live Monitoring Console</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-gray-50">
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="bg-white p-3 border-radius-xl shadow-soft text-center h-100 border border-light">
                            <p class="text-xxs font-weight-bolder text-secondary text-uppercase mb-1">Working Now</p>
                            <h4 class="font-weight-bolder text-warning mb-0" id="modalProgressCount">
                                {{ count($participants->where('status', 'progress')) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-white p-3 border-radius-xl shadow-soft text-center h-100 border border-light">
                            <p class="text-xxs font-weight-bolder text-secondary text-uppercase mb-1">Finished</p>
                            <h4 class="font-weight-bolder text-success mb-0" id="modalSubmittedCount">
                                {{ count($participants->where('status', 'submitted')) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-white p-3 border-radius-xl shadow-soft text-center h-100 border border-light">
                            <p class="text-xxs font-weight-bolder text-secondary text-uppercase mb-1">Unstarted</p>
                            <h4 class="font-weight-bolder text-danger mb-0" id="modalUnstartedCount">
                                {{ count($participants->where('status', 'unstarted')) }}</h4>
                        </div>
                    </div>
                </div>

                <h6 class="text-xxs text-secondary font-weight-bolder text-uppercase mb-2 ms-1">Session Event Stream</h6>
                <div class="list-group list-group-flush border-radius-lg overflow-hidden shadow-none bg-white border">
@php
    $events = collect();
    foreach($participants as $p) {
        if ($p->raw_start) {
            $events->push([
                'time' => \Carbon\Carbon::parse($p->raw_start),
                'msg' => "Candidate {$p->name} started the test.",
                'icon' => 'fas fa-play',
                'color' => 'info'
            ]);
        }
        if ($p->raw_submit) {
            $events->push([
                'time' => \Carbon\Carbon::parse($p->raw_submit),
                'msg' => "Candidate {$p->name} completed the test.",
                'icon' => 'fas fa-check-circle',
                'color' => 'success'
            ]);
        }
    }
    $events = $events->sortByDesc('time')->take(5);
@endphp
                    @forelse ($events as $event)
                        <div class="list-group-item d-flex align-items-center p-3 border-0 border-bottom border-light">
                            <div class="bg-soft-{{ $event['color'] }} text-{{ $event['color'] }} p-2 border-radius-md me-3"><i class="{{ $event['icon'] }}"></i></div>
                            <div class="flex-grow-1">
                                <p class="text-xs font-weight-bold text-dark mb-0">{{ $event['msg'] }}</p>
                                <p class="text-xxs text-secondary mb-0">{{ $event['time']->diffForHumans() }}</p>
                            </div>
                        </div>
                    @empty
                        <div class="list-group-item d-flex align-items-center p-3 border-0">
                            <div class="flex-grow-1 text-center">
                                <p class="text-xs text-secondary mb-0">No events recorded yet.</p>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
            <div class="modal-footer border-0 p-3 bg-white">
                <div class="me-auto text-xs text-secondary">
                    @if (($exam->control_type ?? null) === 'MANUAL')
                        Mode manual: admin dapat menutup session dari sini.
                    @else
                        Mode auto timer: session akan tertutup otomatis sesuai jadwal.
                    @endif
                </div>
                <button type="button" class="btn btn-navy mb-0 px-4 border-radius-lg" data-bs-dismiss="modal">Close
                    Monitoring</button>
                @if (($exam->control_type ?? null) === 'MANUAL')
                    <button type="button" class="btn btn-danger mb-0 px-4 border-radius-lg"
                        onclick="handleAction('stop')"><i class="fas fa-stop-circle me-1"></i> FORCE CLOSE SESSION</button>
                @endif
            </div>
        </div>
    </div>
</div>