{{-- Participant List Card --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card shadow-sm border-0 border-radius-xl">
            <div class="card-header bg-white pb-0 border-bottom p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 font-weight-bolder text-dark">Participant Activity Log</h6>
                        <p class="text-xs text-secondary mb-0">List of candidates and their real-time submission
                            status &mdash; <span id="lastUpdateLabel" class="text-xxs text-primary font-weight-bold"><i class="fas fa-circle-notch fa-spin me-1"></i> Polling aktif</span></p>
                    </div>
                    <div class="max-width-250">
                        <div class="input-group input-group-alternative input-group-sm border-radius-lg overflow-hidden border">
                            <span class="input-group-text bg-white border-0"><i
                                    class="fas fa-search text-secondary opacity-5"></i></span>
                            <input type="text" id="participantSearch" class="form-control border-0 px-2"
                                placeholder="Search nik or name..." oninput="filterParticipants(this.value)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr class="bg-gray-50 border-bottom">
                                <th class="ps-4 py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Identification</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Work Unit</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    State</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Timeline</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Duration</th>
                            </tr>
                        </thead>
                        <tbody id="participantTableBody">
                            @foreach ($participants as $p)
                                <tr class="hover-light" data-nik="{{ $p->nik }}" data-name="{{ strtolower($p->name) }}">
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center py-2">
                                            <div class="bg-soft-navy text-navy p-2 border-radius-md me-3 font-weight-bolder text-xs"
                                                style="width: 35px; text-align: center;">
                                                {{ strtoupper(substr($p->name, 0, 1)) }}
                                            </div>
                                            <div class="d-flex flex-column">
                                                <h6 class="mb-0 text-sm font-weight-bold text-dark">
                                                    {{ $p->name }}</h6>
                                                <span class="text-xxs font-weight-bold text-secondary uppercase">{{ $p->nik }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-xs font-weight-bold text-dark">{{ $p->dept }} Dept</span>
                                    </td>
                                    <td class="text-center p-state">
                                        @if ($p->status == 'progress')
                                            <span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-warning text-warning border-radius-pill text-uppercase"
                                                style="font-size: 0.55rem"><i class="fas fa-spinner fa-spin me-1"></i> Working</span>
                                        @elseif($p->status == 'unstarted')
                                            <span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-secondary text-secondary border-radius-pill text-uppercase"
                                                style="font-size: 0.55rem">Idle</span>
                                        @elseif($p->status == 'submitted')
                                            <span class="badge badge-sm border-0 font-weight-bolder py-2 px-3 bg-soft-success text-success border-radius-pill text-uppercase"
                                                style="font-size: 0.55rem"><i class="fas fa-check-circle me-1"></i> Ready</span>
                                        @endif
                                    </td>
                                    <td class="text-center p-timeline">
                                        <div class="d-flex flex-column align-items-center">
                                            <span class="text-xxs font-weight-bold text-secondary mb-1">Start: <span class="text-dark started-at-val">{{ $p->started_at }}</span></span>
                                            <span class="text-xxs font-weight-bold text-secondary">Submit: <span class="text-dark submitted-at-val">{{ $p->submitted_at }}</span></span>
                                        </div>
                                    </td>
                                    <td class="text-center p-duration">
                                        <span class="text-xs font-weight-bolder text-dark duration-val">{{ $p->duration }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="participant-table-footer d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 px-4 py-3 border-top bg-white">
                    <div class="participant-table-footer-left d-flex align-items-center gap-2">
                        <span class="text-xs text-secondary font-weight-bold">Rows</span>
                        <select id="participantRowsPerPage" class="form-select form-select-sm participant-rows-select" onchange="changeParticipantRowsPerPage(this.value)">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                        <span id="participantPageInfo" class="text-xs text-secondary font-weight-bold"></span>
                    </div>
                    <div class="participant-pagination d-flex align-items-center gap-2" id="participantPagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>