@extends('layouts.main', ['title' => 'Data Tagihan Siswa'])
@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> --}}
    <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>
        // 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();
        // });

        $(document).on('change', '.check-data', function() {
            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;
        }

        const dataTable = $("#tagihans-table");

        //when dataTable is finish ajax load
        dataTable.on('draw.dt', function(e, settings, data) {
            const elIds = document.getElementById('ids').value;
            var ids = elIds.split(',');
            
            //checked check-data
            const checkData = document.querySelectorAll('.check-data');
            checkData.forEach((item) => {
                if (ids.includes(item.getAttribute('data-id'))) {
                    item.querySelector('input').checked = true;
                } else {
                    item.querySelector('input').checked = false;
                }
            });
            
        });
    </script>


    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

@push('modal')
    <div id="modal-notif" class="modal">
        <div class="modal-background --modal-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title" id="form-notif-title">Kirim Wa Otomatis</p>
            </header>
            <section class="modal-card-body">
                <form action="{{ route('tagihan.multi-send-notif') }}" method="POST" id="multi-send-notif">
                    @csrf
                    <input type="hidden" name="ids" id="ids">
                    <div class="field">
                        <label class="label">Pesan Notifikasi Ke <span id="count-ids"></span> Siswa</label>
                        <div class="field-body">
                            <div class="control">
                                <textarea class="textarea" name="message" type="text" placeholder="Pesan Notifikasi">{{ old('message', @$data->message) }}</textarea>

                            </div>
                            @error('message')
                                <p class="help is-danger text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Sertakan Nota Tagihan</label>
                        <input type="checkbox" name="sertakan_file" id="sertakan_file"> <label for="sertakan_file">Sertakan
                            File</label>
                    </div>
                    <div class="w-full">
                        <hr>
                        <div class="field grouped">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                            <div class="control">
                                <button type="reset" class="button red">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>
            </footer>

        </div>
    </div>
@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>
                    Tagihan Siswa

                </div>
                {{-- <div class="p-4">
                    <a href="{{ route('siswa.create') }}"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"><i
                            class="mdi mdi-plus"></i> Tambah Data</a>
                </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 data-sortable="false">
                                Bayar
                            </th>
                            <th>NIS</th>
                            <th>Nama</th>
                            <th>Jenjang</th>
                            <th>Kelas</th>
                            <th>Tagihan</th>
                            <th data-sortable="false">
                                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 >
                                    <a href="{{ route('tagihan.show', $data->id) }}" class="button small bg-green-500"
                                        data-target="sample-modal-2" type="button">
                                        <span class="icon"><i class="mdi mdi-cash text-white"></i></span>
                                    </a>
                                </td>
                                <td data-label="NIS">
                                    {{ $data->nis }}
                                </td>
                                <td data-label="Name">
                                    {{ $data->nama_siswa }}
                                </td>
                                <td data-label="Jenjang">
                                    {{ $data->kelas->jenjang->nama_jenjang }}
                                </td>
                                <td data-label="nama_kelas">
                                    {{ $data->kelas->nama_kelas }}
                                </td>
                                <td data-label="tagihan">
                                    <ul>
                                        @foreach ($data->tagihan_berikutnya as $item)
                                            <li>{{ $item['jenis_pembayaran'] }} : {{ $item['tanggal_tagihan'] }}</li>
                                        @endforeach
                                    </ul>
                                </td>

                                <td>
                                    <a href="{{ route('tagihan.cetak', $data->id) }}" class="button small bg-blue-500"
                                        data-target="sample-modal-2" type="button">
                                        <span class="icon"><i class="mdi mdi-printer text-white"></i></span>
                                    </a>
                                    @if ($data->no_hp)
                                    <a href="https://wa.me/{{ $data->no_wa }}?text=Assalamualaikum warahmatullahi wabarakatuh, ini merupakan pesan dari pihak {{Helper::setting('site_name')}} ingin menyampaikan :" target="_blank" title="Kirim WA Manual Ke : {{ $data->nama_siswa }}" class="button small bg-green-500" type="button">
                                        <span class="icon"><i class="mdi mdi-whatsapp text-white"></i></span>
                                        
                                    </a>
                                    @endif
                                    
                                </td>
                            </tr>
                        @endforeach

                    </tbody>

                </table> --}}
                <hr>
                {{-- <form action="{{ route('tagihan.multi-send-notif') }}" method="POST" id="multi-send-notif">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="ids" id="ids">
                </form> --}}
                <button type="button"
                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded --modal"
                    data-target="modal-notif" data-form="multi-send-notif"><i class="mdi mdi-whatsapp"></i> Kirim
                    Notif</button>
            </div>

        </div>
    </section>
@endsection