$('#loan-table').DataTable().clear().destroy();

    var table_table = $('#loan-table').DataTable({
        initComplete: function () {
            this.api().columns([0]).every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');

                });
            });
        },
        responsive: true,
        fixedHeader: {
            header: true,
            footer: true
        },
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('salary_loan.show',$employee->id) }}",
        },

        columns: [
            {
                data: 'month_year',
                name : 'month_year'
            },
            {
                data: null,
                render: function (data, type, row) {
                    return '{{trans('Title')}}:' + row.loan_title + "<br>" + '{{trans('Reason')}}:' + row.reason;
                }
            },
            {
                data: 'loan_amount',
                name: 'loan_amount',
                render: function (data) {
                    if ('{{config('variable.currency_format') =='suffix'}}') {
                        return data + ' {{config('variable.currency')}}';
                    } else {
                        return '{{config('variable.currency')}} ' + data;

                    }
                }
            },
            {
                data: 'loan_time',
                name: 'loan_time',
            },
            {
                data: 'loan_remaining',
                name: 'loan_remaining',
            },
            {
                data: 'action',
                name: 'action',
                orderable: false
            }
        ],


        "order": [],
        'language': {
            
            "search": '{{trans("Search")}}',
            'paginate': {
                'previous': '{{trans("Previous")}}',
                'next': '{{trans("Next")}}'
            }
        },
        'columnDefs': [
            {
                "orderable": false,
                'targets': [0],
            },
        ],


         'select': {style: 'multi', selector: 'td:first-child'},
        'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
    });
    new $.fn.dataTable.FixedHeader(table_table);


    $('#create_loan_record').click(function () { 
        $(".month_year").val(null).trigger('change');
        $("#loan_type_id").val(null).trigger('change');
        $("#loan_title").val(null).trigger('change'); 
        $("#loan_amount").val(null).trigger('change');
        $("#loan_time").val(null).trigger('change');
        $("#loan_reason").val(null).trigger('change');

        $('.modal-title').text('{{__('Add Loan')}}');
        $('#loan_action_button').val('{{trans('Add')}}');
        $('#loan_action').val('{{trans('Add')}}');
        $('#LoanformModal').modal('show');
    });

    $('#loan_sample_form').on('submit', function (event) {
        event.preventDefault();

        const formData = new FormData(this)
        formData.append('code_id', $('#loan_type_id').val())
        
        if ($('#loan_action').val() == '{{trans('Add')}}') {
            $.ajax({
                url: "{{ route('salary_loan.store',$employee) }}",
                method: "POST",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                   
                    var html = '';
                    if (data.errors) {html = '<div class="alert alert-danger">';
                        for (var count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#LoanformModal').modal('hide');
                        $('#loan-table').DataTable().ajax.reload();
                        $('#loan_sample_form')[0].reset();
                        $('.date').datepicker('update');
                    }
                    $('#loan_form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }

            });
        }

        {{-- 
        if ($('#loan_action').val() == '{{trans('Edit')}}') {
            $.ajax({
                url: "{{ route('salary_loan.update') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    var html = '';
                    if (data.errors) {
                        html = '<div class="alert alert-danger">';
                        for (var count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.error) {
                        html = '<div class = "alert alert-danger" > ' + data.error + ' </div>';
                    }

                    if (data.success) {
                        html = '<div class="alert alert-success" >' + data.success + '</div>';
                        setTimeout(function () {
                            $('#LoanformModal').modal('hide');

                            $('#loan-table').DataTable().ajax.reload();
                            $('#loan_sample_form')[0].reset();
                        $( "#loan_amount" ).prop( "disabled", false );
                        }, 1000);

                    }
                    $('#loan_form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        }
         --}}
    });

    $(document).ready(function () {
        $("#loan_type_id").on("change", function () {
            const selectedCodeTitle = $(this).find(":selected").data("code-title");
    
            $("#loan_title").val(selectedCodeTitle || "");
        });
    
        $("#loan_type_id").trigger("change");
    });


    $(document).on('click', '.loan_edit', function () {

        var id = $(this).attr('id');

        var target = "{{ route('salary_loan.index') }}/" + id + '/edit';


        $.ajax({
            url: target,
            dataType: "json",
            success: function (html) {

                let id = html.data.id;
                $('#month_year_loan').val(html.data.month_year);
                $('#loan_title').val(html.data.loan_title);
                $('#loan_time').val(html.data.loan_time);
                $('#amount_remaining').val(html.data.amount_remaining);
                $('#time_remaining').val(html.data.time_remaining);
                $('#loan_reason').val(html.data.reason);
                $('#loan_type_id').val(html.data.loan_type_id);
                $('#loan_amount').val(html.data.loan_amount);
    $( "#loan_amount" ).prop( "disabled", true );

                $('#loan_hidden_id').val(html.data.id);
                $('.modal-title').text('{{trans('Edit')}}');
                $('#loan_action_button').val('{{trans('Edit')}}');
                $('#loan_action').val('{{trans('Edit')}}');
                $('#LoanformModal').modal('show');
            }
        })
    });




    $('.loan-close').click(function () {
        $('#loan_sample_form')[0].reset();
        $('.date').datepicker('update');
    $( "#loan_amount" ).prop( "disabled", false );

    $('.confirmModal').modal('hide');
        $('#loan-table').DataTable().ajax.reload();
    });