@extends('layouts.app')

@section('content')
    <div style="justify-content: space-between;"
        class="card p-4 m-2 bg-white d-flex flex-column flex-sm-row align-items-center gap-2 mb-2">
        <h2 class="fs-lg fw-medium mb-2 me-auto">
            Daftar Hadir
        </h2>
        <div>
            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#jenis-kegiatan" class="btn btn-primary">Cetak Sesuai
                Acara</a>
            <a href="{{ route('cetak_all.absen') }}" class="btn btn-primary">Cetak Seluruh Acara</a>
        </div>

        <div id="jenis-kegiatan" class="modal fade" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="fw-medium fs-base me-auto">
                            Cetak berdasarkan acara
                        </h2>
                    </div>
                    <form method="POST" action="{{ route('cetak-absen') }}">
                        @csrf
                        <div class="modal-body grid columns-12 gap-4 gap-y-3">
                            <div class="g-col-12 g-col-sm-12">
                                <label for="jenis_kegiatan" class="form-label">Kategori Acara</label>
                                <select id="jenis_kegiatan" name="jenis_kegiatan" data-search="true" class="js-select2">
                                    <option></option>
                                    @foreach ($kategoriAcara as $item)
                                        <option value="{{ $item->kategori_acara }}">{{ $item->kategori_acara }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer text-end">
                            <button type="button" data-bs-dismiss="modal"
                                class="btn btn-outline-secondary w-20 me-1">Cancel</button>
                            <button type="submit" data-bs-dismiss="modal" class="btn btn-primary">Download PDF</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-5 m-2 table-responsive">
        <div class="intro-y d-flex justify-content-between align-items-center gap-2 mb-5">
            <h2 class="fs-lg fw-medium mb-2 me-auto">
                Daftar Seluruh Peserta : <span id="peserta-count">{{ $count }}</span>
            </h2>
            <div class="d-flex align-items-center">
                <select id="kategori_acara" class="form-select" onchange="filterKategori()">
                    <option disabled selected value="">Pilih Kategori Acara</option>
                    <option value="all" selected>Tampilkan Semua</option>
                    @foreach ($kategoriAcara as $item)
                        <option value="{{ $item->kategori_acara }}">{{ $item->kategori_acara }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <table id="absenKegiatan" class="table table-hover border rounded-2">
            <thead>
                <tr>
                    <th class="text-center align-middle">No</th>
                    <th class="text-center align-middle">Nama</th>
                    <th class="text-center align-middle">Kegiatan</th>
                    <th class="text-center align-middle">OPD</th>
                    <th class="text-center align-middle">TTD</th>
                </tr>
            </thead>
            <tbody id="data-table">
                @foreach ($data as $item)
                    <tr>
                        <td class="text-center align-middle">{{ $loop->iteration }}</td>
                        <td class="text-center align-middle">{{ $item->nama_lengkap }}</td>
                        <td class="text-center align-middle">{{ $item->kategori_kegiatan }}</td>
                        <td class="text-center align-middle">{{ $item->opd }}</td>
                        <td class="d-flex justify-content-center align-items-center">
                            <img src="{{ asset("storage/$item->kategori_kegiatan/$item->nama_lengkap/$item->ttd") }}"
                                width=50 height=50 alt="ttd">
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection
@section('pageScript')
    <script>
        function filterKategori() {
            var kategori = document.getElementById('kategori_acara').value;
            var tbody = document.getElementById('data-table');
            var rows = tbody.getElementsByTagName('tr');
            var count = 0;

            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var jenisKegiatan = row.getElementsByTagName('td')[2].innerText;

                if (kategori === 'all' || jenisKegiatan === kategori) {
                    row.style.display = '';
                    count++;
                } else {
                    row.style.display = 'none';
                }
            }
            document.getElementById('peserta-count').innerText = count;
        }



        $('#jenis_kegiatan').select2({
            dropdownParent: $('#jenis-kegiatan'),
            placeholder: "Pilih Kategori",
            minimumResultsForSearch: 0,
        });
        $('#jenis_kegiatan').one('select2:open', function(e) {
            $('input.select2-search__field').prop('placeholder', 'Cari...');
        });
    </script>
@endsection