$('#basic_table').DataTable().clear().destroy();

    var table_table = $('#basic_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>');
                    $('select').selectpicker('refresh');
                });
            });
        },
        responsive: true,
        fixedHeader: {
            header: true,
            footer: true
        },
       
        serverSide: true,
        ajax: {
            url: "{{ route('salary_basic.show',$employee->id) }}",
        },

        columns: [

            {
                data: 'month_year',
                name: 'month_year',
            },
            {
                data: 'payslip_type',
                name: 'payslip_type',
            },
            {
                data: 'basic_salary',
                name: 'basic_salary',
                render: function (data) {
                    if ('{{config('variable.currency_format') =='suffix'}}') {
                        return data + ' {{config('variable.currency')}}';
                    } else {
                        return '{{config('variable.currency')}} ' + data;

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


        "order": [],
        'language': {
            
            "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
            "search": '{{trans("Search")}}',
            'paginate': {
                'previous': '{{trans("Previous")}}',
                'next': '{{trans("Next")}}'
            }
        },
        'columnDefs': [
            {
                "orderable": false,
                'targets': [0, 3],
            },
        ],


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


    $('#create_basic_salary_record').click(function () {
        $(".month_year").val(null).trigger('change');
        $('.modal-title').text('{{__('Add Basic Salary')}}');
        $('#basic_salary_action_button').val('{{trans('Add')}}');
        $('#basic_salary_action').val('{{trans('Add')}}');
        $("#month_year").val(null).trigger('change');
        $("#payslip_type_edit").val(null).trigger('change');
        $("#basic_salary_edit").val(null).trigger('change');
        
        $('#basicSalaryformModal').modal('show');
    });

    $(document).ready(function () {
        const getIncomeTaxAmount = function (basic, gender){
            let taxAmount = 0;

            const totalBasic = basic * 14;
            const limitDeduction = gender == 'FEMALE' ? 400000 : 350000;
            const minTaxAmount = 3000;

            let taxableAmount = (totalBasic - limitDeduction) * 1;

            taxableAmount = taxableAmount > 0 ? taxableAmount : 0;

            const firstSlotTaxableAmount = taxableAmount > 0 && taxableAmount > 100000 ? 100000 : taxableAmount;
            const secondSlotTaxableAmount = taxableAmount > 100000 ? (taxableAmount <= 400000 ? (taxableAmount - 100000) * 1 : 300000): 0;
            const restOfTaxableAmount = taxableAmount > 400000 ? (taxableAmount - 400000) * 1 : 0;

            taxAmount = (taxAmount + (firstSlotTaxableAmount > 0 ? (firstSlotTaxableAmount * (.05)) * 1 : 0) * 1) * 1;
            taxAmount = (taxAmount + (secondSlotTaxableAmount > 0 ? (secondSlotTaxableAmount * (.1)) * 1 : 0) * 1) * 1;
            taxAmount = (taxAmount + (restOfTaxableAmount > 0 ? (restOfTaxableAmount * (.15)) * 1 : 0) * 1) * 1;

            let gpfAmount = (totalBasic * (.2) * (.15)) * 1;

            taxAmount = gpfAmount > 0 && taxAmount > 0 ? (taxAmount - gpfAmount) * 1 : 0;
            taxAmount = taxAmount <= 0 ? 0 : (taxAmount < minTaxAmount ? minTaxAmount : taxAmount);

            const perMonthTaxAmount = taxAmount > 0 ? ((taxAmount/12) * 1).toFixed(2) : 0;

            return perMonthTaxAmount;
        }

       // Attach a change event listener to the range_edit select field
        $("#range_edit").on("change", function () {
            const selectedText = $(this).find("option:selected").text();
        
            const basicSalary = parseFloat(selectedText) || 0;
            const gender = 'MALE';
        
            // Set the value of the basic_salary_edit input field
            $("#basic_salary_edit").val(basicSalary);
            
            // Calculate 35% of the basic salary and set it to the house_rent_edit field
            let houseRent = 0;

            //house rent range according to basic salary
            if(basicSalary <= 9700) {
                houseRent = (basicSalary * 0.50).toFixed(2); // Keep two decimal places

                if(houseRent < 4500) houseRent = 4500;
            } else if(basicSalary >= 9701 && basicSalary <= 16000) {
                houseRent = (basicSalary * 0.45).toFixed(2); // Keep two decimal places

                if(houseRent < 4800) houseRent = 4800;
            } else if(basicSalary >= 16001 && basicSalary <= 35500) {
                houseRent = (basicSalary * 0.40).toFixed(2); // Keep two decimal places

                if(houseRent < 7000) houseRent = 7000;
            } else {
                houseRent = (basicSalary * 0.35).toFixed(2); // Keep two decimal places

                if(houseRent < 13800) houseRent = 13800;
            }
            
            $("#house_rent_edit").val(houseRent);

            // Set Income Tax
            let incomeTax = getIncomeTaxAmount(basicSalary, gender);

            $("#income_tax_edit").val(incomeTax);
        });        

        $("#basic_salary_edit").on("keyup ", function () {
            let salary_manual = $("#basic_salary_edit").val().trim();
            const gender = 'MALE';

            // Set Income Tax
            let incomeTax = getIncomeTaxAmount(salary_manual, gender);
            $("#income_tax_edit").val(incomeTax);
        })
    });

    // Set salary range on change of the job grade - calling AJAX
    // $(document).ready(function () {
    //     const fetchSalaryRanges = async () => {
    //         const salaryGrade = $("#job_grade_edit").val(); // Get the value from the input field
    //         const $rangeDropdown = $("#range_edit");
    
    //         // Clear the existing options in the Salary Range dropdown
    //         $rangeDropdown.empty().append('<option value="" selected>None</option>');
    
    //         if (salaryGrade) {
    //             try {
    //                 const response = await $.ajax({
    //                     type: "GET",
    //                     url: `/salary/step/list-for-dropdown/${salaryGrade}`,
    //                     dataType: "json",
    //                 });
    
    //                 if (response.success && response.salarySteps) {
    //                     // Populate the dropdown with new options from the response
    //                     response.salarySteps.forEach((range) => {
    //                         $rangeDropdown.append(
    //                             `<option value="${range.salary_step_id}">${range.amount}</option>`
    //                         );
    //                     });
    
    //                     // Refresh Select2 dropdown if it's applied
    //                     $rangeDropdown.select2();
    //                 } else {
    //                     toastr.error(response.message || "Failed to fetch salary ranges.");
    //                 }
    //             } catch (error) {
    //                 toastr.error("An error occurred while fetching salary ranges.");
    //                 console.error(error);
    //             }
    //         }
    //     };
    
    //     // Fetch salary ranges on page load since the salary grade is fixed
    //     fetchSalaryRanges();
    // });
    

    $('#basic_salary_sample_form').on('submit', function (event) {
        event.preventDefault();
        if ($('#basic_salary_action').val() == '{{trans('Add')}}') {

            $.ajax({
                url: "{{ route('salary_basic.store',$employee) }}",
                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.check_month_year) {
                        html = '<div class="alert alert-danger">' + data.check_month_year + '</div>';
                    }
                    if (data.success) {
                       toastr.success(data.success, "Success!");
                        
                            $('#basicSalaryformModal').modal('hide');
                            $('#basic_table').DataTable().ajax.reload();
                            $('#basic_salary_sample_form')[0].reset();
                        
                    }
                    $('#basic_salary_form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        }

        if ($('#basic_salary_action').val() == '{{trans('Edit')}}') {
            $.ajax({
                url: "{{ route('salary_basic.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.check_month_year) {
                        html = '<div class="alert alert-danger">' + data.check_month_year + '</div>';
                    }

                    if (data.success) {
                        toastr.success(data.success, "Success!");
                        setTimeout(function () {
                            $('#basicSalaryformModal').modal('hide');
                            $('#basic_table').DataTable().ajax.reload();
                            $('#basic_salary_sample_form')[0].reset();
                        }, 1000);

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


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

        var id = $(this).data("id");
        var target = "{{ route('salary_basic.index') }}/" + id + '/edit';

        $.ajax({
            url: target,
            dataType: "json",
            success: function (html) {
                $('#basicSalaryformModal').modal('show');
                $('#employee_id').val(html.data.employee_id);
                $('#month_year').val(html.data.month_year);
                $('#job_grade_edit').val(html.data.salary_grade_id).trigger('change');
                $('#range_edit').val(html.data.salary_step_id).trigger('change');
                $('#basic_salary_edit').val(html.data.basic_salary);
                $('#payslip_type_edit').val(html.data.payslip_type).trigger('change');
                $('#basic_salary_hidden_id').val(html.data.id);
                $('.modal-title').text('{{trans('Edit Basic Salary')}}');
                $('#basic_salary_action_button').val('{{trans('Update')}}');
                $('#basic_salary_action').val('{{trans('Edit')}}');
                
            }
        })
    });


    {{-- let allowance_delete_id; --}}

    $(document).on('click', '.salary_basic_delete', function () {
    salary_basic_delete_id = $(this).data("id");
        $('.modal-title').text('{{__('DELETE Record')}}');
        $('.basic-ok').text('{{trans('OK')}}');
        {{-- $('.confirmModal').modal('show'); --}}
        $('#confirmModal').modal('show');
    });


    $('.basic_salary-close').click(function () {
        $('#basic_salary_sample_form')[0].reset();
        $('select').selectpicker('refresh');
        $('.confirmModal').modal('hide');
        $('#basic_table').DataTable().ajax.reload();
    });

    $('.basic-ok').click(function () {
        let target = "{{ route('salary_basic.index') }}/" + salary_basic_delete_id + '/delete';
        $.ajax({
            url: target,
            beforeSend: function () {
                $('.basic-ok').text('{{trans('Deleting...')}}');
            },
            success: function (data) {
                setTimeout(function () {
                    $('#confirmModal').modal('hide');
                    $('#basic_table').DataTable().ajax.reload();
                }, 2000);
            }
        })
    });