@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
@endpush

@push('scripts')
    <script>
        const dataTable = new simpleDatatables.DataTable("#myTable",{
            perPageSelect: [10, 25, 50, 100, -1]
        });

        document.querySelector(".datatable-selector option[value='-1']").textContent = "All";

        //check-data-all
        const checkDataAll = document.getElementById('check-data-all');
        checkDataAll.addEventListener('change', function() {
            const checkData = document.querySelectorAll('.check-data');
            checkData.forEach((item) => {
                item.querySelector('input').checked = checkDataAll.checked;
            });
            getMultiId();
        });

        // const checkData = document.querySelectorAll('.check-data');
        // checkData.forEach((item) => {
        //     item.addEventListener('change', function() {
        //         getMultiId();
        //     });
        // });

        // function getMultiId() {
        //     let ids = [];
        //     const checkData = document.querySelectorAll('.check-data');
        //     checkData.forEach((item) => {
        //         if (item.querySelector('input').checked) {
        //             ids.push(item.getAttribute('data-id'));
        //         }
        //     });

        //     document.getElementById('ids').value = ids.join(',');
        //     document.getElementById('count-ids').innerText = ids.length;
        // }
        
    </script>
@endpush
<div class="w-full flex gap-4">
    <div class="w-full md:w-1/2">
        <div class="field">
            <label class="label">Tanggal Setor</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="tanggal_setor" type="date" placeholder="Tanggal Setor"
                        value="{{ old('tanggal_setor', @$data->tanggal_setor) }}">

                </div>
                @error('tanggal_setor')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>



        <div class="field" id="pilihan-pagu-anggaran">
            <label class="label">Pagu Anggaran</label>
            <div class="field-body">
                <div class="control">
                    <div class="select">
                        <select name="komponen_akun_detail_id" id="komponen_akun_detail_id">
                            <option value="">Pilih Pagu Anggaran</option>
                            @foreach ($paguPendapatans as $item)
                                <option value="{{ $item->id }}" class="pagu-pendapatan" @selected(old('komponen_akun_detail_id', @$data->komponen_akun_detail_id) == $item->id)>
                                    {{ $item->komponen_akun->akun->kode_akun }} - {{ $item->keterangan }} :
                                    {{ number_format($item->jumlah) }}</option>
                            @endforeach

                        </select>
                    </div>
                </div>
                @error('komponen_akun_detail_id')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>
        <div class="field">
            <label class="label">Metode Setor</label>
            <div class="field-body">
                <div class="field grouped multiline">
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="metode_setor" @checked(old('metode_setor', @$data->metode_setor) == 'tunai') value="tunai"
                                checked>
                            <span class="check"></span>
                            <span class="control-label">Tunai</span>
                        </label>
                    </div>
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="metode_setor" @checked(old('metode_setor', @$data->metode_setor) == 'transfer') value="transfer">
                            <span class="check"></span>
                            <span class="control-label">Transfer</span>
                        </label>
                    </div>

                </div>
            </div>
            @error('metode_setor')
                <p class="help is-danger text-red-500">{{ $message }}</p>
            @enderror
        </div>
        <div class="field">
            <label class="label">Keterangan</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="keterangan" type="text" placeholder="Keterangan..."
                        value="{{ old('keterangan', @$data->keterangan) }}">
    
                </div>
                @error('keterangan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    


</div>
<div class="w-full">
    <table id="myTable">
        <thead>
            <tr>
                <th class="checkbox-cell" data-sortable="false">
                    <label class="checkbox">
                        <input type="checkbox" id="check-data-all">
                        <span class="check"></span>
                    </label>
                </th>
                <th>
                    No Pembayaran
                </th>
                <th>
                    Nis
                </th>
                <th>
                    Nama Siswa
                </th>
                <th>Tanggal Pembayaran</th>
                <th>Jumlah</th>
                <th>Bukti Transfer</th>
              
            </tr>
        </thead>
        <tbody>
            @foreach ($pembayarans as $pembayaran)
                <tr>
                    <td class="checkbox-cell">
                        @if (isset($data))
                            <label class="checkbox check-data"  data-id="{{$pembayaran->id}}">
                                <input type="checkbox" @checked(in_array($pembayaran->id,$data->setor_details->pluck('pembayaran_id')->toArray())) name="pembayaran_id[]" value="{{$pembayaran->id}}">
                                <span class="check"></span>
                            </label>
                        @else
                            <label class="checkbox check-data"  data-id="{{$pembayaran->id}}">
                                <input type="checkbox" name="pembayaran_id[]" value="{{$pembayaran->id}}">
                                <span class="check"></span>
                            </label>
                        @endif
                    </td>
                    <td>
                        {{ $pembayaran->no_pembayaran }}
                    </td>
                    <td data-label="NIS">
                        {{ $pembayaran->siswa->nis }}
                    </td>
                    <td data-label="NIS">
                        {{ $pembayaran->siswa->nama_siswa }}
                    </td>
                    <td data-label="NIS">
                        {{ $pembayaran->tanggal_pembayaran }}
                    </td>
                    <td data-label="Name">
                        {{ number_format($pembayaran->total_pembayaran) }}
                    </td>
                    <td data-label="Jenjang">
                        <a href="{{ route('konfirmasi-transfer.bukti-pembayaran', $pembayaran->id) }}" target="_blank"
                            class="text-blue-500 flex gap-1 justify-center"><span class="iconify text-2xl"
                                data-icon="mdi-image-area"></span> Bukti Pembayaran</a>
                    </td>


                    
                </tr>
            @endforeach

        </tbody>

    </table>
</div>