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

    

        $(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;
        }

        const dataTable = $("#pengeluarans-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

@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>
                    Pengeluaran

                </div>
                {{-- <div class="p-4">
                    <a href="{{ route('pengeluaran.import') }}"
                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded"><i
                            class="mdi mdi-plus"></i> Import Data</a>
                </div> --}}
                <div class="p-4">
                    <a href="{{ route('pengeluaran.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() }}
              
                <hr>
                <form action="{{ route('pengeluaran.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