@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">

    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Salary Master</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{{$alias}}/salary-master">Salary Master</a>
                    </li>
                    <li class="breadcrumb-item active"> Edit Salary Master</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($employeeCtcMaster, ['id'=>'form-data','method' => 'post']) !!}
 <input type="hidden" name="organization_id" value="{{$organization->id}}">
 @if($employeeCtcMaster->is_salary_master_stale)
 <div class="row">
    <div class="col-md-12">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <div class="alert-body">
                <strong>Warning!</strong> The payroll template has been updated since the last salary calculation. Please review the component values and re-calculate.
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
 </div>
 @endif
 <div class="row">
    <div class="col-md-12">
        <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display:none">
            <div class="alert-body" id="alert">
            </div>
        </div>
    </div>
</div>
 <section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <!-- <div class="card-header">
                    <h4 class="card-title">Multiple Column</h4>
                </div> -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-12 mt-2">
                            <div class="form-group">
                                <label class="form-label">Employee</label>
                                <input type="hidden" id="employee_id" name="employee_id"  value="{{$employeeCtcMaster->employee_id}}">
                                <div class="form-control readonly"  readonly>
                                    {{ $employeeCtcMaster->employee->name ?? '' }}
                                </div>
                            </div>    
                        </div>
                        
                        <div class="col-md-3 col-12 mt-2">
                            <div class="form-group ">
                                <label class="form-label">Template</label>
                                <input type="hidden" id="template_id" name="template_id" value="{{$employeeCtcMaster->template_id}}">
                                <div class="form-control readonly"  readonly>
                                    {{ $employeeCtcMaster->templateinfo->name ?? '' }}  
                                </div>
                                
                            </div>    
                        </div>
                        
                        <div class="col-md-3 col-12 mt-2">
                            <div class="form-group {{{ $errors->has('ctc_amount') ? 'has-error' : '' }}}">
                                <label class="form-label required">CTC (Monthly)<span style="color: red"> * </span></label> <input class="form-control" type="text" name="ctc_amount" id="ctc_amount" value="{{isset($data) && $employeeCtcMaster->ctc_amount ? round($employeeCtcMaster->ctc_amount/12, 2) : old('ctc_amount') }}" onkeypress="return isNumberKey(event)" readonly> {!! $errors->first('ctc_amount','<label class="control-label error" for="ctc_amount">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-3 col-12 mt-2">
                            <div class="form-group {{{ $errors->has('effective_date') ? 'has-error' : '' }}}">
                                <label class="form-label">Effective From</label>
                                <input class="form-control" type="text" name="effective_date" id="effective_date" value="{{ $employeeCtcMaster->effective_from ? \Carbon\Carbon::parse($employeeCtcMaster->effective_from)->format('d-m-Y') : old('effective_date') }}" placeholder="DD-MM-YYYY">
                                {!! $errors->first('effective_date','<label class="control-label error" for="effective_date">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6 col-12 mt-2" style="display:none;">
                            <div class="form-group {{{ $errors->has('reimbursement') ? 'has-error' : '' }}}">
                                <label class="form-label required">Reimbursement Amount (Yearly)</label> 
                                <input placeholder="Optional" class="form-control" type="text" name="reimbursement" id="reimbursement" value="0" onkeypress="return isNumberKey(event)"> {!! $errors->first('reimbursement','<label class="control-label error" for="reimbursement">:message</label>')!!}
                            </div>
                        </div>

                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-2 mt-2">
                                <input type="hidden" name="total_deduction" id='total_deduction' value="0" />
                                <input type="hidden" name="total_net_pay" id='total-net-pay' value="0" />
                                <h4 class="p-1 d-flex justify-content-between"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
									Net Salary
                                    <span id="final_sum">0</span>
                                    </h4>
                            </div>
                        </div>
                   
                        <div class="col-md-6 col-12">
                            <div class="mb-2 mt-2">
                                <h4 class="p-1 d-flex justify-content-between"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
									Total Calculated CTC
                                    <span id="ctc_sum">0</span>
                                    </h4>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            
                            <table class="table table-bordered dataTable no-footer mt-2" id="organization" role="grid" >
                                <thead>
                                    <tr role="row" class="heading">
                                        <th style="width:25%;">{{trans('admin/template.component')}}</th>
                                        <!-- <th>{{trans('admin/template.type')}}</th>
                                        <th>{{trans('admin/template.calculate_method')}}</th> -->
                                        <th style="width:15%">Rate</th>
                                        <th style="width:25%;"></th>
                                        <!-- <th>{{trans('admin/template.calculate_type')}}</th> -->
                                        <th style="width:15%;"><h5><b>Sum: &nbsp</b><span id="earning_sum">0</span></h5></th>
                                        <th style="width:15%;">{{trans('admin/template.calculate_on')}}</th>
                                        <th style="width:10%;">Configuration</th>
                                    </tr>
                                </thead>
                                <tbody id="earningDiv">
                                    
                                        @foreach($payrollTemplateComponets as $keyIndex=>$templateStructureComponent)
                                            <tr role="row" class="odd">   
                                                <td style="font-size: 1em;"> 
                                                    <input type="hidden" id="component-type-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][type_id]" value="{{$templateStructureComponent->type_id}}">{{$templateStructureComponent->component->name}}</b>

                                                    <p><span class="badge bg-secondary" style="font-size:11px;"> {{@$templateStructureComponent->component->grouptype->name}}</span>&NonBreakingSpace;
                                                    <span class="badge bg-primary" style="font-size:11px;"> {{ ucfirst(@$templateStructureComponent->component->type) }}
                                                    </span></p>
                                                </td>
                                                
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control earning_value_data" oninput="calculate()" id="component-value-data-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][value_data]" value="<br />
<b>Warning</b>:  Undefined variable $templateStructureComponent in <b>/var/www/html/thepresence360/resources/views/salarymaster/create_edit_2.blade.php</b> on line <b>176</b><br />
<br />
<b>Warning</b>:  Attempt to read property "value_data" on null in <b>/var/www/html/thepresence360/resources/views/salarymaster/create_edit_2.blade.php</b> on line <b>176</b><br />
0" onkeypress="return isNumberKey(event)">
                                                    </div> 
                                                </td>
                                                <td class="text-wrap">
                                                    @php
                                                        $methods = $templateStructureComponent->component->componentMethod ?? collect();

                                                    @endphp
                                                    @if($templateStructureComponent->component->value_type=='Percentage')
                                                        <b>% of ({{count($methods)>0 ? implode(" + ", $methods->pluck('name')->toArray()) : 'CTC'}})
                                                    @else
                                                        <b>Flat {{count($methods)>0 ? 'depends on ('.implode(" + ", $methods->pluck('name')->toArray()) .')' : ''}}</b>
                                                        
                                                    @endif
                                                </td>
                                                
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control earning_calculated_value" id="component-calculate-salary-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][calculate_salary]" value="0"  onkeypress="return isNumberKey(event)" readonly>
                                                    </div>
                                                </td>
                                                <td>
                                                    <input type="hidden" class="form-control earning_calculated_value" id="component-calculation-type-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][calculation_type]" value="{{ $templateStructureComponent->calculation_type }}" >
                                                    {{ $templateStructureComponent->calculation_type }}
                                                </td>
                                                <td class="text-center">
                                                    <input type="hidden" id="component-is-default-config-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][is_default_config]" value="{{ $templateStructureComponent->is_default_config ?? 1 }}">
                                                    <input type="hidden" id="component-configuration-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][configuration]" value='{{json_encode($templateStructureComponent->configuration)}}'>
                                                    <div class="d-flex align-items-center justify-content-center gap-1">
                                                        <input type="checkbox" class="form-check-input default-config-toggle" data-type-id="{{$templateStructureComponent->type_id}}" style="font-size:0.80rem;" {{ ($templateStructureComponent->is_default_config ?? 1) ? 'checked' : '' }} title="Use template default config">
                                                        <div id="config-btn-wrapper-{{$templateStructureComponent->type_id}}" style="{{ ($templateStructureComponent->is_default_config ?? 1) ? 'display:none;' : '' }}">
                                                            <button type="button" class="btn btn-icon btn-sm rounded-circle btn-outline-success waves-effect" id="addConfig{{$templateStructureComponent->type_id}}" data-bs-toggle="modal" data-bs-target="#addEarningConfigModal" data-id="{{$templateStructureComponent->type_id}}" title="Calculated Value Configuration" ><i class="tool" data-feather="tool"></i></button>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                </tbody>
                            </table> 
                        </div>
                    </div>
                    
                    <div class="row float-end">
                        <div class="col-12 mt-2">
                            <button type="button" onclick="calculate()" id="save-form" class="btn btn-primary me-1 scrolltop"> @lang('app.save')</button> 
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    </div>
    
</section>
{!! Form::close() !!} 
<!-- Earning Config Modal -->
	<div class="modal fade" id="addEarningConfigModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered modal-edit-user">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Configurations</h3>
                    </div>
                    <form id="config_form" onsubmit="return false;">
			
						<input type="hidden" name="component_id" id="payroll-componentid" value="">
						<input type="hidden" name="template_id" id="payroll-templateid" value="">
						<input type="hidden" name="type_id" id="payroll-typeid" value="">
						<div class="row">
                        	<div class="col-12">
								<table class="table table-responsive">
									<thead>
										<th class="text-nowrap">Type</th>
										<th>Value</th>
									</thead>
									<tbody>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.applicable_on_check')}}</b></td>
											<td>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_applicable_on_check" id="component_applicable_on_check_rate" value="rate" >
													<label class="form-check-label" for="component_applicable_on_check_rate">Rate</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_applicable_on_check" id="component_applicable_on_check_pay" value="pay" >
													<label class="form-check-label" for="component_applicable_on_check_pay">Pay</label>
												</div>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.min_value')}}</b></td>
											<td>
												<input type="text" id="component_min_value" name="min_value" value="" class="form-control modal-edit-tax-id" placeholder="Enter Min Value" onkeypress="return isNumberKey(event)"/>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.max_value')}}</b></td>
											<td>
												<input type="text" id="component_max_value" name="max_value" value="" class="form-control modal-edit-tax-id" placeholder="Enter Max Value" onkeypress="return isNumberKey(event)"/>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.min_output_value')}}</b></td>
											<td>
												<input type="text" id="component_min_output_value" name="min_output_value" value="" class="form-control modal-edit-tax-id" placeholder="Enter Min Output Value" onkeypress="return isNumberKey(event)"/>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.max_output_value')}}</b></td>
											<td>
												<input type="text" id="component_max_output_value" name="max_output_value" value="" class="form-control modal-edit-tax-id" placeholder="Enter Max Output Value" onkeypress="return isNumberKey(event)"/>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.re_calculate_on')}}</b></td>
											<td>
												<select class="form-control select2" name="re_calculate_on[]" id="component_re_calculate_on" multiple>
													@foreach($months as $month)
														<option value="{{$loop->iteration}}">{{$month}}</option>
													@endforeach
												</select>
											</td>
										</tr>
										<tr>
											<td class="text-nowrap"><b>{{trans('admin/template.method')}}</b></td>
											<td>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_roundup_calculation_type" id="component_round" value="round">
													<label class="form-check-label" for="component_round">Round</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_roundup_calculation_type" id="component_two_decimal" value="two_decimal">
													<label class="form-check-label" for="component_two_decimal">Two Decimal</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_roundup_calculation_type" id="component_floor" value="floor">
													<label class="form-check-label" for="component_floor">Round Down</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_roundup_calculation_type" id="component_ceil" value="ceil">
													<label class="form-check-label" for="component_ceil">Round Up</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_roundup_calculation_type" id="component_free" value="free">
													<label class="form-check-label" for="component_free">Free</label>
												</div>
											</td>
										</tr>

										<tr>
											<td class="text-nowrap"><b>Gender</b></td>
											<td>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_gender_type" id="component_all"  value="all">
													<label class="form-check-label" for="component_all">All</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_gender_type" id="component_male" value="male">
													<label class="form-check-label" for="component_male">Male</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_gender_type" id="component_female" value="female">
													<label class="form-check-label" for="component_female">Female</label>
												</div>
											</td>
										</tr>

										<tr>
											<td class="text-nowrap"><b>Applicable On</b></td>
											<td>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_applicable_on" id="component_applicable_on_rate" value="rate" >
													<label class="form-check-label" for="component_applicable_on_rate">Rate</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_applicable_on" id="component_applicable_on_pay" value="pay" checked>
													<label class="form-check-label" for="component_applicable_on_pay">Pay</label>
												</div>
											</td>
										</tr>
                                        
										<tr>
											<td class="text-nowrap"><b>Pro Rate</b></td>
											<td>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_pro_rata" id="component_pro_rata_yes" value="yes" >
													<label class="form-check-label" for="component_pro_rata_yes">Yes</label>
												</div>
												<div class="form-check form-check-inline me-0">
													<input type="radio" class="form-check-input" name="component_pro_rata" id="component_pro_rata_no" value="no" checked>
													<label class="form-check-label" for="component_pro_rata_no">No</label>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="reset" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal" aria-label="Close">
                                {{trans('common/common.discard')}}
                            </button>
                            <button type="button" class="btn btn-primary" id="add_component_config">{{trans('common/common.submit')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>

<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>

<!-- END: Page JS-->

<script language=Javascript>

        $(document).ready(function(){
                $('#effective_date').flatpickr({
                    dateFormat: 'd-m-Y',
                });
                calculate();
        });
        function isNumberKey(evt)
        {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 
                && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }

        function percentageVal(event){
            var val = $(this).val();
            if(parseInt(val) > 100){
                $(this).val(val.slice(0, -1));
            }
            return true;
        }

        function calculate(){
            var formdata = new FormData(document.getElementById('form-data'));

            $.ajax({
                url: "{{ route('salarymaster.calculate-salary',['alias'=>$alias]) }}",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                },
                method: 'post',
                type: 'POST',
                dataType: "JSON",
                enctype: "multipart/form-data",
                cache: false,
                async:false,
                processData: false,
                contentType: false,
                data: formdata,
                success: function(data) {
                    
                    $.each(data.calculatedComponents, function (key, component) {
                        let type_id = component.type_id;
                        let salary  = component.calculate_salary;
                        //$('#component-value-data-' + type_id).val(salary);
                        $('#component-calculate-salary-' + type_id).val(salary);
                    });
                   
                    $('#earning_sum').html(data['earningSum']);
                    $('#deduction_sum').html(data['deductionSum']);
                    $('#derived_sum').html(data['derivedSum']);
                    $('#final_sum').html(data['netSalary']);
                    $('#ctc_sum').html(data['ctcSum']);
                    $('#ctc_amount').val(data['ctcSum']);
                    $('#total-deduction').val(data['deductionSum']);
                    $('#total-net-pay').val(data['netSalary']);
                }
            });
        }

        $(".scrolltop").click(function() {
            $("html, body").animate({ scrollTop: 0 });
            return false;
        });


        $("#save-form").click(function(e) {
            e.preventDefault();
            var finalSalary = parseFloat($('#ctc_amount').val());
            var earningSum = parseFloat($('#earning_sum').html());
            var ctcSum = parseFloat($('#ctc_sum').html());
            var deductionSum = parseFloat($('#deduction_sum').html());
            
            if(ctcSum != finalSalary){
                $('#alert').html('Total Calculated CTC Must be equal to CTC Amount');

                $('#alert').parent().show();

                return false;
            }
            if(deductionSum > earningSum){
                $('#alert').html('Deduction Amount Must be less than the Earning Amount');

                $('#alert').parent().show();

                return false;
            }
            if(deductionSum > finalSalary){
                $('#alert').html('Deduction Amount Must be less than the CTC Amount');

                $('#alert').parent().show();

                return false;
            }
            $('#alert').parent().hide();
            $("form").submit();
            return true;
        });

    
    // Load configuration data when modal opens
    $('#addEarningConfigModal').on('show.bs.modal', function (e) {

        var typeId     = $(e.relatedTarget).data('id');
        var templateId = $('#template_id').val();

        // Hidden JSON string
        var configuration = $('#component-configuration-' + typeId).val();

        // Store ids in modal hidden fields
        $('#payroll-templateid').val(templateId);
        $('#payroll-typeid').val(typeId);

        // ✅ Safe JSON parse
        let config = {};
        console.log('Raw configuration:', configuration);
        if (configuration) {

            // Case 1: already object
            if (typeof configuration === 'object') {
                config = configuration;
            }

            // Case 2: JSON string
            else if (configuration !== 'null' && configuration !== '') {
                try {
                    config = JSON.parse(configuration);
                } catch (err) {
                    console.error('Invalid JSON config:', err);
                    config = {};
                }
            }
        }

        // Button text
        if (Object.keys(config).length > 0) {
            $('#add_component_config').text('Update');
        } else {
            $('#add_component_config').text('Save');
        }

        // -----------------------------
        // Set form values
        // -----------------------------
        
        // Applicable on check
        var applicableCheck = config.applicable_on_check || 'rate';
        $('#component_applicable_on_check_' + applicableCheck)
            .prop('checked', true).trigger('change');

        $('#component_min_value').val(config.min_value || '');
        $('#component_max_value').val(config.max_value || '');
        $('#component_min_output_value').val(config.min_output_value || '');
        $('#component_max_output_value').val(config.max_output_value || '');

        // Reset radios
        $('input[name="component_roundup_calculation_type"]').prop('checked', false).trigger('change');
        $('input[name="component_gender_type"]').prop('checked', false).trigger('change');
        $('input[name="component_applicable_on"]').prop('checked', false).trigger('change');
        $('input[name="component_pro_rata"]').prop('checked', false).trigger('change');

        // Roundup
        var roundType = config.roundup_calculation_type || 'round';
        $('#component_' + roundType).prop('checked', true).trigger('change');

        // Gender
        var genderType = config.gender_type || 'all';
        $('#component_' + genderType).prop('checked', true).trigger('change');

        // Applicable on
        var applicableOn = config.applicable_on || 'pay';
        $('#component_applicable_on_' + applicableOn)
            .prop('checked', true).trigger('change');

        // Pro rata
        var proRata = config.pro_rata || 'no';
        $('#component_pro_rata_' + proRata)
            .prop('checked', true).trigger('change');

        // -----------------------------
        // Multi-select re_calculate_on
        // -----------------------------
        var reCalcArray = [];

        if (config.re_calculate_on) {

            if (Array.isArray(config.re_calculate_on)) {
                reCalcArray = config.re_calculate_on;

            } else if (typeof config.re_calculate_on === 'string') {
                reCalcArray = config.re_calculate_on.split(',')
                    .map(function (item) {
                        return item.trim();
                    });
            }
        }

        $('#component_re_calculate_on')
            .val(reCalcArray)
            .trigger('change');

    });
    // Save configuration
	$('#add_component_config').on('click', function() {
		var componentId = $('#payroll-componentid').val();
		var templateId = $('#payroll-templateid').val();
		var typeId = $('#payroll-typeid').val();
		
		// Collect all form data
		var configData = {
			template_id: templateId,
			type_id: typeId,
			applicable_on_check: $('input[name="component_applicable_on_check"]:checked').val(),
			min_value: $('#component_min_value').val(),
			max_value: $('#component_max_value').val(),
			min_output_value: $('#component_min_output_value').val(),
			max_output_value: $('#component_max_output_value').val(),
			re_calculate_on: $('#component_re_calculate_on').val() || [],
			roundup_calculation_type: $('input[name="component_roundup_calculation_type"]:checked').val(),
			gender_type: $('input[name="component_gender_type"]:checked').val(),
			applicable_on: $('input[name="component_applicable_on"]:checked').val(),
			pro_rata: $('input[name="component_pro_rata"]:checked').val(),
		};
        
		// Save configuration in hidden input
        $('#component-configuration-' + typeId).val(JSON.stringify(configData));
        $('#addEarningConfigModal').modal('hide');

        // Auto-uncheck default when config is manually saved
        var $checkbox = $('.default-config-toggle[data-type-id="' + typeId + '"]');
        if ($checkbox.is(':checked')) {
            $checkbox.prop('checked', false).trigger('change');
        }

        calculate();
	});

    // Toggle config button visibility based on default checkbox
    $(document).on('change', '.default-config-toggle', function() {
        var typeId = $(this).data('type-id');
        var isDefault = $(this).is(':checked') ? 1 : 0;
        $('#component-is-default-config-' + typeId).val(isDefault);
        if (isDefault) {
            $('#config-btn-wrapper-' + typeId).hide();
        } else {
            $('#config-btn-wrapper-' + typeId).show();
        }
        calculate();
    });

        

</script>
<style>
    .deleteClass{
        background: rgba(234, 84, 85, 0.12);
        color: #ea5455;
    }
</style>
@endpush