{{-- Modal Absensi --}}
<div class="modal fade" id="modalAbsensi" tabindex="-1" aria-labelledby="modalAbsensiLabel" aria-hidden="true"
    data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content border-radius-xl overflow-hidden shadow-lg border-0">

            {{-- Header --}}
            <div class="modal-header bg-gray-100 border-bottom">
                <h5 class="modal-title font-weight-bolder" id="modalAbsensiLabel" style="font-size: 1rem;">
                    Absensi Training
                </h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            {{-- Body --}}
            <div class="modal-body p-4 bg-white">

                {{-- Loading --}}
                <div id="modal-loading" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-secondary font-weight-bold">Memuat data schedule...</p>
                </div>

                {{-- Content --}}
                <div id="modal-content" style="display:none;">

                    {{-- Schedule detail info --}}
                    <div class="card border mb-3 shadow-none bg-gray-100">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-3 col-6 mb-2">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">ID TRN</small>
                                    <span class="text-sm font-weight-bold" id="d-id-trn">-</span>
                                </div>
                                <div class="col-md-3 col-6 mb-2">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">Tipe Training</small>
                                    <span id="d-score-type-card" class="border border-secondary border-radius-lg px-2 py-1 d-inline-flex align-items-center">
                                        <i class="fas fa-minus-circle text-secondary me-1"></i>
                                        <span class="text-secondary font-weight-bold text-xxs">WITHOUT SCORE</span>
                                    </span>
                                </div>
                                <div class="col-md-6 col-6 mb-2">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">Nama Training</small>
                                    <span class="text-sm font-weight-bold" id="d-training-name">-</span>
                                </div>
                                <div class="col-md-3 col-6 mb-2">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">Tanggal</small>
                                    <span class="text-sm font-weight-bold" id="d-date">-</span>
                                </div>
                                <div class="col-md-3 col-6">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">Waktu</small>
                                    <span class="text-sm font-weight-bold" id="d-time">-</span>
                                </div>
                                <div class="col-md-5 col-6">
                                    <small class="text-secondary d-block text-uppercase font-weight-bolder"
                                        style="font-size: 0.7rem;">Lokasi</small>
                                    <span class="text-sm font-weight-bold" id="d-location">-</span>
                                </div>
                                <div class="col-md-4 col-12 text-end align-self-end">
                                    <span class="badge badge-sm bg-info px-2" id="stat-total" style="font-size: 0.75rem;">Total: 0</span>
                                    <span class="badge badge-sm bg-success px-2" id="stat-hadir" style="font-size: 0.75rem;">Hadir: 0</span>
                                    <span class="badge badge-sm bg-danger px-2" id="stat-absent" style="font-size: 0.75rem;">Tidak Hadir: 0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Bulk action buttons --}}
                    <div class="d-flex align-items-center mb-3" id="bulk-actions">
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-success btn-sm mb-0 px-3" onclick="markAll('present')">
                                <i class="fas fa-check-double me-1"></i> Hadir Semua
                            </button>
                            <button type="button" class="btn btn-danger btn-sm mb-0 px-3" onclick="markAll('absent')">
                                <i class="fas fa-times me-1"></i> Tidak Hadir Semua
                            </button>
                        </div>
                    </div>

                    {{-- Participant table --}}
                    <div class="table-responsive border-radius-lg border" style="max-height:400px;overflow-y:auto;">
                        <table class="table align-middle mb-0">
                            <thead class="thead-light" style="background-color:#00b7bd4f;position:sticky;top:0;z-index:1;">
                                <tr>
                                    <th style="width:40px; font-size: 0.75rem;">#</th>
                                    <th style="font-size: 0.75rem;">NIK</th>
                                    <th style="font-size: 0.75rem;">Participant Name</th>
                                    <th style="font-size: 0.75rem;">Department</th>
                                    <th style="font-size: 0.75rem;">Position</th>
                                    <th style="font-size: 0.75rem;">Section</th>
                                    <th class="text-center" style="width:160px; font-size: 0.75rem;">Attended</th>
                                </tr>
                            </thead>
                            <tbody id="attend-tbody">
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-3">
                                        <i class="fas fa-circle-notch fa-spin me-2"></i>Memuat peserta...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>{{-- /modal-content --}}

            </div>{{-- /modal-body --}}

            {{-- Footer --}}
            <div class="modal-footer bg-gray-100 border-top">
                <small class="text-muted me-auto" style="font-size:.75rem;">
                    <i class="fas fa-info-circle me-1"></i>
                    Default: <strong>Tidak Hadir</strong>. Klik Hadir untuk peserta yang datang.
                </small>
                <button type="button" class="btn btn-secondary mb-0 btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="button" id="btn-simpan" class="btn btn-primary mb-0 btn-sm px-4" disabled
                    onclick="simpan()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>