@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: 'nomor_antrian',
                        name: 'nomor_antrian'
                    },
                    {
                        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(9)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // GrandTotal over all pages


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

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

                    // Update footer
                    api.column(6).footer().innerHTML = totalPesanan + ' Item';
                    api.column(7).footer().innerHTML =
                        'Rp. ' + pageTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                    api.column(9).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');
            window.open(url, '_blank', "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=900,height=600");
        }
    </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.detail_pesanan
                        let nomor = 1
                        // console.log(data);
                        data.forEach(x => {
                            if (x.status_pesanan == 0) {
                                statusnya = '<span class="badge badge-warning">TAKEAWAY</span>';
                            } else if (x.status_pesanan == 1) {
                                statusnya = '<span class="badge badge-info">DINEIN</span>';
                            } else if (x.status_pesanan == 2) {
                                statusnya = '<span class="badge badge-info">DINEIN</span>';
                            } else if (x.status_pesanan == 3) {
                                statusnya = '<span class="badge badge-danger">CANCEL</span>';
                            }
                            let tr = $('<tr></tr>')
                            tr.append('<td class="text-center">' + nomor + '</td>')
                            tr.append('<td>' + x.nama_produk +
                                statusnya + '</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++
                        })
                        $('#kode_pesanan').val(result.data.kode_pesanan)
                        $('#nama_pemesan').val(result.data.nama_pemesan)
                        $('#tanggal_jam').val(tanggal_jam(result.data.created_at))
                        $('#nomor_meja').val(result.data.nomor_meja)
                        $('#nomor_antrian').val(result.data.nomor_antrian)
                        $('#total_pesanan').val(result.data.total_pesanan + ' Item')
                        $('#sub_total').val(formatRupiah(result.data.total_bayar))
                        if (result.data.diskon_persen == null) {
                            result.data.diskon_persen = 0
                        }
                        $('#diskon_persen').val(result.data.diskon_persen + '%')
                        $('#grand_total').val(formatRupiah(result.data.grand_total))
                    }
                }
            })
            $('#modal_detail_history').modal('show')
        }

        function tanggal_jam(tanggal) {
            let date = new Date(tanggal)
            let tahun = date.getFullYear()
            let bulan = date.getMonth() + 1
            let tanggalnya = date.getDate()
            let jam = date.getHours()
            let menit = date.getMinutes()
            let detik = date.getSeconds()
            return `${tanggalnya}-${bulan}-${tahun} ${jam}:${menit}:${detik}`
        }
    </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