@push('scripts')
    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    <!-- date-range-picker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            let dataTable = $('#tabelku').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('menu.getDataMenu') }}',
                    data: function(d) {
                        d.kelompok_produk = $('#filter-kelompok-kategori').val();
                    }
                },
                columns: [{
                        data: 'nomor',
                        name: 'nomor',
                        orderable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'kode_produk',
                        name: 'kode_produk'
                    },
                    {
                        data: 'nama_produk',
                        name: 'nama_produk'
                    },
                    {
                        data: 'harga_produk',
                        name: 'harga_produk'
                    },
                    {
                        data: 'kategori_produk',
                        name: 'kategori_produk'
                    },
                    {
                        data: 'nama_kelompok_kategori',
                        name: 'nama_kelompok_kategori'
                    },
                    {
                        data: 'ubah',
                        name: 'ubah',
                        className: 'text-center'
                    },
                ]
            })
            $('#btn_filter').on('click', function() {
                dataTable.ajax.reload();
            });
        })
    </script>
    <script>
        $('.select2').select2();

        function kelompokKategori(id) {
            $.ajax({
                url: "{{ route('menu.kelompok-kategori', '') }}/" + id,
                method: "GET",
                dataType: "json",
                success: function(response) {
                    $('#kelompok_produk').empty();

                    if (response.message) {
                        $('#kelompok_produk').append(`<option value="">Pilih Dulu Kategori Produk</option>`);
                    } else {
                        response?.forEach(function(item, index) {
                            $('#kelompok_produk').append(
                                `<option value="${item?.id}">${item?.nama_kelompok_kategori}</option>`
                            )
                        })
                    }

                    // get attribute data-produk-id and data-kelompok-kategori-id
                    let produkId = $('#kategori_produk').attr('data-produk-id');
                    let kelompokKategoriId = $('#kategori_produk').attr('data-kelompok-kategori-id');
                    if (produkId != '' && kelompokKategoriId != '') {
                        $('#kelompok_produk').val(kelompokKategoriId).trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error(xhr.responseJSON.message, 'Error', {
                        timeOut: 3000
                    });
                }
            })
        }

        $('#promodatetime').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            locale: {
                format: 'MM/DD/YYYY hh:mm A'
            }
        });

        function checkPromoOrNot() {
            let kelompokProduk = $('#kelompok_produk').val();
            if (kelompokProduk == 9) {
                $('.form-promo').show();
                $('#stok_promo').attr('required', 'required');
                $('#promodatetime').attr('required', 'required');
            } else {
                $('.form-promo').hide();
                $('#stok_promo').removeAttr('required');
                $('#promodatetime').removeAttr('required');
            }
        }

        function saveMenu() {
            document.getElementById('btn-simpan-menu').disabled = true;
            document.getElementById('btn-simpan-menu').innerText = "Loading...";

            if ($('#kategori_produk').val() == 9) {
                //    check if value is null or empty
                if ($('#stok_promo').val() == '' || $('#promodatetime').val() == '') {
                    toastr.error('Stok Promo dan Tanggal Promo tidak boleh kosong', 'Gagal', {
                        timeOut: 2000
                    });
                    document.getElementById('btn-simpan-menu').disabled = false;
                    document.getElementById('btn-simpan-menu').innerText = "Simpan";
                    return;
                }
            }

            var url = $('#formMenu').data('url');
            var method = $('#formMenu').data('method');
            var data = {
                _token: "{{ csrf_token() }}",
                kategori_produk: $('#kategori_produk').val(),
                kelompok_produk: $('#kelompok_produk').val(),
                kode_produk: $('#kode_produk').val(),
                nama_produk: $('#nama_produk').val(),
                harga_produk: $('#harga_produk').val(),
                tersedia: $('#tersedia').val(),
                deskripsi_produk: $('#deskripsi_produk').val(),
                stok_promo: $('#stok_promo').val(),
                promodatetime: $('#promodatetime').val()
            };

            $.ajax({
                url: url,
                method: method,
                data: data,
                success: function(result) {
                    if (result.errors) {
                        toastr.error(result.errors, 'Gagal', {
                            timeOut: 2000
                        });
                        document.getElementById('btn-simpan-menu').disabled = false;
                        document.getElementById('btn-simpan-menu').innerText = "Simpan";
                    } else {
                        toastr.success(result.message, 'Berhasil', {
                            timeOut: 2000
                        });

                        $('#modal-produk').modal('hide');
                        $('#formMenu')[0].reset();
                        document.getElementById('btn-simpan-menu').disabled = false;
                        document.getElementById('btn-simpan-menu').innerText = "Simpan";

                        setTimeout(function() {
                            window.location.reload(1);
                        }, 1000);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error(xhr.responseJSON.message, 'Error', {
                        timeOut: 3000
                    });
                    document.getElementById('btn-simpan-menu').disabled = false;
                    document.getElementById('btn-simpan-menu').innerText = "Simpan";
                }
            });
        }

        function tambahMenu() {
            $('#formMenu')[0].reset();
            $('#kategori_produk').attr('data-produk-id', '');
            $('#kategori_produk').attr('data-kelompok-kategori-id', '');
            $('#kategori_produk').val('0').trigger('change');
            $('#kelompok_produk').val('default').trigger('change');
            $('#modal-produk').modal('show');
            $('#title-form-menu').text("Tambah Menu");

            let formMenu = document.getElementById('formMenu');
            formMenu.setAttribute('data-url', "{{ route('menu.store') }}");
            formMenu.setAttribute('data-method', "post");
        }

        function editMenu(id) {
            $('#modal-produk').modal('show');
            $('#title-form-menu').text("Ubah Menu");
            let formMenu = document.getElementById('formMenu');
            formMenu.setAttribute('data-url', "{{ route('menu.update', '') }}/" + id);
            formMenu.setAttribute('data-method', "put");

            $.ajax({
                url: "{{ route('menu.show', '') }}/" + id,
                method: "GET",
                success: function(response) {
                    $('#kategori_produk').val(response.produk.kategori_produk_id).trigger('change');
                    $('#kategori_produk').attr('data-produk-id', response.produk.id);
                    $('#kategori_produk').attr('data-kelompok-kategori-id', response
                        .kelompok_kategori_id);
                    $('#kelompok_produk').val(response.kelompok_kategori_id);
                    $('#kode_produk').val(response.produk.kode_produk);
                    $('#nama_produk').val(response.produk.nama_produk);
                    $('#harga_produk').val(response.produk.harga_produk);
                    $('#tersedia').val(response.produk.tersedia);
                    $('#deskripsi_produk').val(response.produk.deskripsi_produk);
                    $('#stok_promo').val(response.produk.stok_promo);
                    var tgl_start_promo_with_am_pm = moment(response.produk.tgl_start_promo).format(
                        'MM/DD/YYYY hh:mm A');
                    var tgl_end_promo_with_am_pm = moment(response.produk.tgl_end_promo).format(
                        'MM/DD/YYYY hh:mm A');
                    var promodatetime = tgl_start_promo_with_am_pm + ' - ' + tgl_end_promo_with_am_pm;
                    $('#promodatetime').val(promodatetime);
                },
                error: function(xhr, status, error) {
                    toastr.error(xhr.responseJSON.message, 'Error', {
                        timeOut: 3000
                    });
                }
            })
        }
    </script>
@endpush