@section('plugins.Select2', true)
<script>
    // Load Table
    @if (!($no_table ?? null))
    var table = $('#table-list')
        .on( 'preDraw.dt', function () {
            t0 = performance.now();})
        .on('xhr.dt', function ( e, settings, json, xhr, data ) {
            t1 = performance.now();
            duration = ((t1 - t0) / 1000.0).toFixed(2);
        })
        .DataTable({
        autoWidth: false,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        processing: true,
        serverSide: true,
        dom: 'lrtip',
        order: [[ 1, "asc" ]],
        ajax: `{{ $urlData ?? route($this_helper .'data')}}`,
        columns: data_columns,
        columnDefs : [{
            targets  : 'no-sort',
            orderable: false,
        }],
        infoCallback: function( settings, start, end, max, total, pre ) {
            var api = this.api();
            var info = "Showing " + start + " to " + end + " of " + total + " entries. <b>(Total " + max.toLocaleString('en-US') + ")</b><br>Search took: " + duration + " seconds.";
            return info
        },
    });

    // filter column
    $('.th-datatable-select').select2({
        theme: 'bootstrap-5',
        placeholder : "Select Option",
        allowClear : true,
        width:'100%',
    }).on('change', function(){
        let i = $(this).attr('data-column');
        let v = $(this).val();
        table.columns(i).search(v).draw();
    });

    // Column search box
    $('.search-input-text').on('keyup', function () {
        let i = $(this).attr('data-column');  // getting column index
        let v = $(this).val();  // getting search input value
        if (v.length > 0 && v.length < 2) {
            return;
        }
        table.columns(i).search(v).draw();
    }).on('click', function (e) {
        e.stopPropagation();
    });

    function tVisible(dataColumn) {
        var column = table.column( dataColumn );
        // Toggle the visibility
        column.visible( ! column.visible() );
    }
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
        // Toggle the visibility
        column.visible( ! column.visible() );
    });
    @endif

    // Detail Data
    $('body').on('click','.btn-detail', function () {
        let url = $(this).data('href');
        window.location.href = url;
    });

    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        })
    });

    @if (in_array('delete',$feature))
        // Delete data
        $('body').on('click','.btn-delete', function () {
            let id = $(this).attr('data-id');
            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.value == true) {
                    $.ajax({
                        type: "DELETE",
                        url: "{{route($this_helper .'delete')}}"+'/'+id,
                        dataType: "JSON",
                        success: function (response) {
                            if (response.success) {
                                @if (!($no_table ?? null))
                                $("#table-list").DataTable().ajax.reload();
                                @endif
                                swal("success","Data successfully deleted");
                            } else {
                                swal("error", response.message);
                            }
                        },
                        error: function (err) {
                            // console.log(err);
                            swal("error")
                        }
                    });
                }
            })
        });
    @endif

    @if (in_array('edit',$feature))
        // Edit Data
        $('body').on('click','.btn-edit', function () {
            $('.loader').show();
            let id = $(this).attr('data-id');
            $('#input-form').slideDown();
            $.ajax({
                type: "GET",
                url: "{{route($this_helper .'edit')}}/"+id,
                dataType: "JSON",
                beforeSend : function name(params) {
                    const element = document.getElementById("input-form");
                    $([document.documentElement, document.body]).animate({
                        scrollTop: $("#input-form").offset().top
                    }, 300);
                },
                success: function (response) {
                    if (response.success) {
                        dataEditButton(response.data);
                    } else {
                        swal("error", response.message);
                    }
                    $('.loader').hide();
                },
                error: function (err) {
                    $('.loader').hide();
                    swal("error",'something went wrong');
                    $('#input-form').slideUp();
                }
            });
        });
    @endif

</script>