@props(['data' => collect(), 'kategoriAcara' => collect(), 'count' => 0])

<div id="table-absensi" class="card border-0 shadow-lg p-1 m-2">
    {{-- ==================== HEADER ==================== --}}
    <div class="card-body">
        <div class="header-filter-container mb-2">
            <h5>
                <i class="fas fa-table me-2"></i>Daftar Seluruh Peserta
                <span class="badge bg-primary ms-2" id="peserta-count">{{ $count }}</span>
            </h5>

            <div class="filter-section">
                <label for="kategori_acara">
                    <i class="fas fa-filter me-1 text-primary"></i>Filter Acara :
                </label>

                <div class="position-relative">
                    <select id="kategori_acara"
                        class="form-select form-select-sm js-select2-filter shadow-sm border-primary-subtle"
                        onchange="filterKategori()">
                        <option value="all" selected>Tampilkan Semua</option>
                        @foreach ($kategoriAcara as $item)
                            <option value="{{ $item->kategori_acara }}">{{ $item->kategori_acara }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>


        <div class="card shadow-sm table-responsive p-3">
            <table id="tableAbsenKegiatan" class="table table-striped table-hover align-middle text-nowrap w-100">
                <thead class="table-primary ">
                    <tr>
                        <th class="text-center">No</th>
                        <th class="text-center">Nama</th>
                        <th class="text-center">Kegiatan</th>
                        <th class="text-center">OPD</th>
                        <th class="text-center">TTD</th>
                    </tr>
                </thead>
                <tbody id="data-table">
                    @foreach ($data as $item)
                        <tr>
                            <td class="text-center fw-semibold">{{ $loop->iteration }}</td>
                            <td>{{ $item->nama_lengkap }}</td>
                            <td class="text-center">{{ $item->kategori_kegiatan }}</td>
                            <td class="text-center">{{ $item->opd }}</td>
                            <td class="text-center">
                                <img src="{{ route('absensi.ttd', [
                                    'kategori' => $item->kategori_kegiatan,
                                    'filename' => $item->nama_lengkap . '/' . $item->ttd,
                                ]) }}"
                                    alt="Tanda Tangan" width="60" height="60"
                                    class="border rounded shadow-sm object-fit-contain">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>