resto-dhepot/resources/views/pages/Menu/js.blade.php

@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>
<script>
    $(document).ready(function() {
        $('#tabelku').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('menu.getDataMenu') }}",
            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'
                },
            ]
        })
    })
</script>
<script>
    $('.select2').select2();

    function kelompokKategori(id) {
        $.ajax({
            url: "{{ route('menu.kelompok-kategori', '') }}/" + id,
            method: "GET",
            dataType: "json",
            success: function(response) {
                console.log(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>`)
                    })
                }
            },
            error: function(xhr, status, error) {
                toastr.error(xhr.responseJSON.message, 'Error', {
                    timeOut: 3000
                });
            }
        })
    }

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

        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(),
        };

        $.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";

                    // console.log(result);
                    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').val('').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) {
                console.log(response);

                $('#kategori_produk').val(response.produk.kategori_produk_id).trigger('change');
                $('#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);
            },
            error: function(xhr, status, error) {
                toastr.error(xhr.responseJSON.message, 'Error', {
                    timeOut: 3000
                });
            }
        })
    }
</script>
@endpush