@extends('layouts.main', ['title' => 'Data Detail Pembayaran'])
{{-- @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");

        //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(',');
        }
        
    </script>
@endpush --}}


@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.0/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.0/css/dataTables.bootstrap5.css">
    <style>
        th,
        td {
            white-space: nowrap;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/2.2.0/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.2.0/js/dataTables.js"></script>
    <script>
        $(document).on('change', '.check-data', 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>
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

@section('content')
    <section class="section main-section">

        <div class="card ">
            <header class="card-header">
                <div class="card-header-title">
                    <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
                    Pembayaran
                    
                </div>
                
            </header>
            <div class="card-content table-responsive">
                {{ $dataTable->table() }}
                {{-- <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>
                                Nis
                            </th>
                            <th>
                                Nama Siswa
                            </th>
                            <th>Tanggal Pembayaran</th>
                            <th>Jumlah</th>
                            <th>Tagihan</th>
                            <th>Dibuat Pada</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>
                                <td class="checkbox-cell">
                                    <label class="checkbox check-data"  data-id="{{$data->id}}">
                                        <input type="checkbox">
                                        <span class="check"></span>
                                    </label>
                                </td>
                                <td data-label="NIS">
                                    {{ $data->pembayaran->siswa->nis }}
                                </td>
                                <td data-label="NIS">
                                    {{ $data->pembayaran->siswa->nama_siswa }}
                                </td>
                                <td data-label="NIS">
                                    {{ $data->pembayaran->tanggal_pembayaran }}
                                </td>
                                <td data-label="Name">
                                    {{ number_format($data->nominal_pembayaran) }}
                                </td>
                                <td data-label="Jenjang">
                                    {{ $data->tagihan->jenis_pembayaran_siswa->jenis_pembayaran->nama_jenis_pembayaran }}
                                </td>
                               
                                
                                <td data-label="Created">
                                    {{ $data->created_at->diffForHumans() }}
                                </td>
                                <td class="actions-cell">
                                    <div class="buttons right nowrap">
                                        <a target="_blank" href="{{ route('cetak-preview.index', base64_encode(route('detail-pembayaran.pdf', $data->id))) }}" class="button small bg-blue-500" type="button">
                                            <span class="icon"><i class="mdi mdi-printer text-white"></i></span>
                                        </a>
                                        <a href="{{ route('detail-pembayaran.show', $data->id) }}" class="button small bg-blue-500"
                                            data-target="sample-modal-2" type="button">
                                            <span class="icon"><i class="mdi mdi-eye text-white"></i></span>
                                        </a>
                                        <button  class="button small red --modal-delete" data-form="delete-data-{{$data->id}}" data-target="modal-delete"
                                            type="button">
                                            <span class="icon"><i class="mdi mdi-trash-can"></i></span>
                                        </button>
                                        <form action="{{ route('detail-pembayaran.destroy',$data->id) }}" method="POST" id="delete-data-{{$data->id}}">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                   
                </table> --}}
                <hr>
                <form action="{{ route('detail-pembayaran.multi-delete') }}" method="POST" id="multi-delete-data">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="ids" id="ids">
                </form>
                <button type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-2 rounded --modal-delete" data-target="modal-delete"  data-form="multi-delete-data"><i class="mdi mdi-trash-can"></i> Hapus</button>
            </div>
           
        </div>
    </section>
@endsection