Cetaklabel/Resources/views/app/cardboard-detail/_list.blade.php

    <!--begin::Table-->
{{ $dataTable->table() }}
<!--end::Table-->

{{-- Inject Scripts --}}
@section('scripts')
    {{ $dataTable->scripts() }}
@endsection

@push('customscript')
    @php
        $route = explode('.', Route::currentRouteName());
    @endphp

    <script>
        $("#searchbox").on("keyup search input paste cut", function () {
            LaravelDataTables["cardboard-odner-table"].search(this.value).draw();
        });

        var selected = [];

        function arrayCompare(a1, a2) {
            if (a1.length != a2.length) return false;
            var length = a2.length;
            for (var i = 0; i < length; i++) {
                if (a1[i] !== a2[i]) return false;
            }
            return true;
        }

        function inArray(needle, haystack) {
            var length = haystack.length;
            for(var i = 0; i < length; i++) {
                if(typeof haystack[i] == 'object') {
                    if(arrayCompare(haystack[i], needle)) return true;
                } else {
                    if(haystack[i] == needle) return true;
                }
            }
            return false;
        }


        $(function () {
            const documentTitle = '{{ ucfirst($route[0]) }} Report';
            var buttons = new $.fn.dataTable.Buttons(LaravelDataTables["cardboard-odner-table"], {
                buttons: [
                    {
                        extend: 'copyHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'excelHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'csvHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'pdfHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'print',
                        title: documentTitle
                    }
                ]
            }).container().appendTo($('#kt_datatable_example_buttons'));

            // Hook dropdown menu click event to datatable export buttons
            const exportButtons = document.querySelectorAll('#kt_datatable_example_export_menu [data-kt-export]');
            exportButtons.forEach(exportButton => {
                exportButton.addEventListener('click', e => {
                    e.preventDefault();
                    console.log(e.target.getAttribute('data-kt-export'));
                    // Get clicked export value
                    const exportValue = e.target.getAttribute('data-kt-export');
                    const target = document.querySelector('.dt-buttons .buttons-' + exportValue);

                    // Trigger click event on hidden datatable export buttons
                    target.click();
                });
            });

            LaravelDataTables["cardboard-odner-table"].on('click', '.delete', function (event) {
                var form = $(this).closest("form");
                event.preventDefault();
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: form.serialize(), // serializes the form's elements.
                            success: function (data) {
                                toastr.success(data.message, 'Success!', {timeOut: 5000});
                                Swal.fire({
                                    title: 'Success!',
                                    text: "Data berhasil di hapus, menunggu Approval",
                                    icon: 'success',
                                    confirmButtonText: 'Ok'
                                });
                                LaravelDataTables["{{$route[0]}}-table"].ajax.reload();
                            }
                        });

                    }
                })
            })

            var current_odner = parseInt($("#current_odner").val());
            LaravelDataTables["cardboard-odner-table"].on('click', '.form-check-input', function (event) {
                if($(this).is(':checked')){
                    selected.push($(this).val());
                    current_odner = current_odner + 1;
                }else{
                    selected.splice(selected.indexOf($(this).val()), 1);
                    current_odner = current_odner - 1;
                }

                if(selected.length > 0) {
                    if(current_odner > 5) {
                        $("#save-odner").hide();
                        Swal.fire({
                            text: "Odner More Than 5, Please Select 5 Odner or Less",
                            icon: 'warning'});
                    }else{
                        $("#save-odner").show();
                    }
                } else {
                    $("#save-odner").hide();
                }
                $("#document_id").val(selected);
            })

            //JSON.parse($('#odners').val())

        })

       /* $(document).load(function(){
            $.each($('.odner-check'),function(index,value){
                console.log(value)
            })
        })*/

        $(window).on('load', function(){
            // Assuming the checkboxes have unique IDs and their values match the array elements
            var selectedValues = JSON.parse($('#odners').val());
            Object.keys(selectedValues).forEach(key => {
                const value = selectedValues[key];
                selected.push(`${value}`);
            });
            $("#document_id").val(selected);

// Get the checkboxes by class name
            var checkboxes = document.getElementsByClassName('odner-check');
// Loop through the checkboxes
            for (var i = 0; i < checkboxes.length; i++) {
                var checkbox = checkboxes[i];

                if(inArray(checkbox.value, selectedValues)) {
                    checkbox.checked = true;
                }
            }
        } )
    </script>
@endpush

@section('styles')
    <style>
        .dataTables_filter {
            display: none;
        }
    </style>
@endsection