@extends('layouts.main', ['title' => 'Data Tabungan 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>
@endpush

@push('scripts')
    <script>
        const dataTable = new simpleDatatables.DataTable("#myTable", {
            columns: [{
                select: 3,
                type: "number",
                render: function(data, td, rowIndex, cellIndex) {
                    return `${parseInt(data).toLocaleString()}`;
                }
            }, ]
        });

        //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

@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>
                    Tabungan Siswa

                </div>

            </header>
            <div class="card-content">
                <table id="myTable">
                    <thead>
                        <tr>
                            <th>NIS</th>
                            <th>Nama</th>
                            <th>Kelas</th>
                            <th>Jumlah Tabungan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>

                                <td data-label="NIS">
                                    {{ $data->nis }}
                                </td>
                                <td data-label="Nama">
                                    {{ $data->nama_siswa }}
                                </td>
                                <td data-label="Nama">
                                    {{ @$data->kelas->nama_kelas }} {{ @$data->kelas->jenjang->nama_jenjang }}
                                </td>
                                <td data-label="Jumlah">
                                    {{ $data->total_tabungan }}
                                </td>

                                <td class="actions-cell">
                                    <div class="buttons right nowrap">

                                        <a href="{{ route('tabungan.create') }}?siswa_id={{ $data->id }}"
                                            class="button small bg-green-500" type="button">
                                            <span class="icon"><i class="mdi mdi-plus text-white"></i></span>
                                        </a>

                                        <a href="{{ route('tabungan-siswa.show', $data->id) }}"
                                            class="button small bg-blue-500" type="button">
                                            <span class="icon"><i class="mdi mdi-eye text-white"></i></span>
                                        </a>

                                        <a target="_blank"
                                            href="{{ route('cetak-preview.index', base64_encode(route('tabungan-siswa.pdf', $data->id))) }}"
                                            class="button small bg-blue-500" type="button">
                                            <span class="icon"><i class="mdi mdi-printer text-white"></i></span>
                                        </a>

                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>

                </table>
            </div>

        </div>
    </section>
@endsection