@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"> Preview</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}}">
 <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">Effective From {{ date('d-m-Y', strtotime($employeeCtcMaster->effective_from ?? '')) }} @if($employeeCtcMaster->effective_to) To  {{ date('d-m-Y', strtotime($employeeCtcMaster->effective_to ?? '')) }} @endif</h4>
                    <a class="dt-button create-new btn btn-secondary me-2" tabindex="0"
                                        aria-controls="organization" href="{{ url($alias . '/salary-master') }}">
                                        <span><i class="fa fa-back" aria-hidden="true"></i> Back </span>
							        </a>
                </div>
                
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 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-4 col-12 mt-2">
                            <div class="form-group ">
                                <label class="form-label">Template</label>
                                <div class="form-control readonly"  readonly>
                                    {{ $employeeCtcMaster->templateinfo->name ?? '' }}  
                                </div>
                                
                            </div>    
                        </div>
                        
                        <div class="col-md-4 col-12 mt-2">
                            <div class="form-group {{{ $errors->has('ctc_amount') ? 'has-error' : '' }}}">
                                <label class="form-label required">CTC (Monthly)</label>
                                <div class="form-control" readonly> {{round($employeeCtcMaster->monthly_salary, 2) }}</div>
                            </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">
                                <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">{{round($employeeCtcMaster->total_net_pay, 2) }}</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">{{round($employeeCtcMaster->monthly_salary, 2) }}</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:10%">{{trans('admin/template.calculate_value')}}</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:20%;">{{trans('admin/template.calculate_on')}}</th>
                                        {{-- <th style="width:5%;"></th> --}}
                                    </tr>
                                </thead>
                                <tbody id="earningDiv">
                                    
                                        @foreach($payrollTemplateComponets as $keyIndex=>$templateStructureComponent)
                                            <tr role="row" class="odd">   
                                                <td style="font-size: 1em;"> 
                                                    {{ $templateStructureComponent->type_name }}
                                                    <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">
                                                        <div type="text" class="form-control earning_value_data">
                                                            <br />
<b>Warning</b>:  Undefined variable $templateStructureComponent in <b>/var/www/html/thepresence360/resources/views/salarymaster/preview.blade.php</b> on line <b>161</b><br />
<br />
<b>Warning</b>:  Attempt to read property "value_data" on null in <b>/var/www/html/thepresence360/resources/views/salarymaster/preview.blade.php</b> on line <b>161</b><br />
0                                                        </div>
                                                    </div> 
                                                </td>
                                                <td class="text-wrap">
                                                    @php
                                                        $methods = $templateStructureComponent->component->componentMethod ?? collect();

                                                    @endphp
                                                    @if($templateStructureComponent->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">
                                                         {{$templateStructureComponent->calculate_salary}}
                                                        
                                                    </div>
                                                </td>
                                                <td>
                                                    {{ $templateStructureComponent->calculation_type }}
                                                </td>
                                                {{-- <td>
                                                    <button type="button" class="btn btn-icon 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>
                                                    <input type="hidden" id="component-configuration-{{$templateStructureComponent->type_id}}" name="component[{{$templateStructureComponent->id}}][configuration]" value='{{json_encode($templateStructureComponent->configuration)}}'>
                                                </td> --}}
                                            </tr>
                                        @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if(count($reimbursementEmployeeTemplate) > 0)
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <h3><b>Reimbursement</b></h3>
                            <table class="table table-bordered dataTable no-footer mt-2" role="grid">
                                <thead>
                                    <tr role="row" class="heading">
                                        <th style="width:50%;">Component</th>
                                        <th style="width:50%;">Actual Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reimbursementEmployeeTemplate as $reimbursementvalue)
                                        <tr role="row" class="odd">
                                            <td>{{ @$reimbursementvalue->component->name }}</td>
                                            <td>{{ round($reimbursementvalue->calculate_salary, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    <div class="row float-end">

                    </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" checked>
													<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>
                            
                        </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>

        
        

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


    
    // 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);

        $('#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);
        $('input[name="component_gender_type"]').prop('checked', false);
        $('input[name="component_applicable_on"]').prop('checked', false);
        $('input[name="component_pro_rata"]').prop('checked', false);

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

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

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

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

        // -----------------------------
        // 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');

    });
    

        

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