@push('scripts')
    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            let dataTable = $('#tabelku').DataTable({
                aLengthMenu: [
                    [25, 50, 100, 200, -1],
                    [25, 50, 100, 200, "All"]
                ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('history.getDataHistory') }}',
                    data: function(d) {
                        d.filter_tanggal_1 = $("#filter_tanggal_1").val();
                        d.filter_tanggal_2 = $("#filter_tanggal_2").val();
                    }
                },
                columns: [{
                        data: 'nomor',
                        name: 'nomor',
                        orderable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'kode_pesanan',
                        name: 'kode_pesanan'
                    },
                    {
                        data: 'nama_pemesan',
                        name: 'nama_pemesan'
                    },
                    {
                        data: 'nomor_meja',
                        name: 'nomor_meja'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'total_pesanan',
                        name: 'total_pesanan',
                        className: 'text-center'
                    },
                    {
                        data: 'total_bayar',
                        name: 'total_bayar',
                        className: 'text-right',
                        render: function(data) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    },
                    {
                        data: 'diskon_persen',
                        name: 'diskon_persen',
                        className: 'text-center',
                        render: function(data) {
                            return data ?? 0;
                        }
                    },
                    {
                        data: 'grand_total',
                        name: 'grand_total',
                        className: 'text-right',
                        render: function(data) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    },
                    {
                        data: 'ubah',
                        name: 'ubah',
                        className: 'text-center'
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    let api = this.api();
                    // Remove the formatting to get integer data for summation
                    let intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i :
                            0;
                    };

                    // GrandTotal over all pages
                    totalAll = api
                        .column(8)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // GrandTotal over all pages
                    diskonTotal = api
                        .column(7)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Total over this page
                    pageTotal = api
                        .column(6, {
                            page: 'current'
                        })
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // total pesanan
                    totalPesanan = api
                        .column(5)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Update footer
                    api.column(5).footer().innerHTML = totalPesanan + ' Item';
                    api.column(6).footer().innerHTML =
                        'Rp. ' + pageTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                    api.column(7).footer().innerHTML = diskonTotal + ' %';
                    api.column(8).footer().innerHTML =
                        'Rp. ' + totalAll.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                }
            })
            $('#btn_filter').on('click', function() {
                if ($("#filter_tanggal_1").val() == "" || $("#filter_tanggal_2").val() == "") {
                    alert("Input pencarian tidak boleh kosong")
                } else {
                    dataTable.ajax.reload();
                }
            });
        })
    </script>
    <script>
        function print(id) {
            var url = "{{ route('history.print', '') }}/" + id + '?print=true'
            window.open(url, '_blank');
        }
    </script>
    <script>
        function detail(id_pesanan) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "{{ route('history.getDataDetailHistory') }}",
                data: {
                    id_pesanan: id_pesanan,
                },
                success: function(result) {
                    $('#view_history_detail').empty()
                    if (result.status) {
                        const data = result.data
                        let nomor = 1
                        // console.log(data);
                        data.forEach(x => {
                            let tr = $('<tr></tr>')
                            tr.append('<td class="text-center">' + nomor + '</td>')
                            tr.append('<td>' + x.nama_produk + '</td>')
                            tr.append('<td>' + formatRupiah(x.harga_produk) + '</td>')
                            tr.append('<td class="text-center">' + x.jumlah_produk + '</td>')
                            tr.append('<td>' + formatRupiah(x.total_harga_produk) + '</td>')
                            tr.append('<td class="text-center">' + x.diskon_persen + '%</td>')
                            tr.append('<td class="text-center">' + (x.keterangan_produk ?? '-') +
                                '</td>')
                            $('#view_history_detail').append(tr)
                            nomor++
                        })
                    }
                }
            })
            $('#modal_detail_history').modal('show')
        }
    </script>
    {{-- <script>
        $(document).ready( function () {
            $('#btn_filter').on('click', function(){
                let filter_tanggal_1 = $("#filter_tanggal_1").val()
                let filter_tanggal_2 = $("#filter_tanggal_2").val()

                // proses ajax
            })
        })
    </script> --}}
    <script>
        function formatRupiah(angka) {
            var bilangan = parseInt(angka);

            // Cek apakah bilangan negatif atau positif
            var minus = "";
            if (bilangan < 0) {
                minus = "-";
                bilangan = Math.abs(bilangan);
            }

            // Konversi angka menjadi format ribuan dengan menambahkan titik
            var reverse = bilangan.toString().split("").reverse().join("");
            var ribuan = reverse.match(/\d{1,3}/g);
            var hasil = ribuan.join(".").split("").reverse().join("");

            // Gabungkan hasil dengan simbol rupiah
            var rupiah = "Rp " + minus + hasil;

            return rupiah;
        }
    </script>
@endpush