@extends('layouts.base')
@section('content')
<div class="page-inner">
    

    <div class="modal fade" id="searchSalaryFormatModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLongTitle">{{trans('labels.salary_format')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>
                <div class="modal-body  bg-light">
                    <form id="searchSalaryFormatForm" name="searchSalaryFormatForm">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}" />
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h4 class="card-title">{{trans('labels.created_salary_formats')}}</h4>
                            </div>
                        </div>
                       
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="tblData" class="display table table-striped table-hover" >
                                    <thead>
                                        <tr>
                                            <th style="width:25px;">#</th>
                                            <th>{{trans('labels.format_name')}} </th>
                                            <th>{{trans('labels.basic_salary')}} </th>
                                            <th>{{trans('labels.gross_salary')}} </th>
                                            <th>{{trans('labels.net_salary')}} </th>
                                            <th>{{trans('labels.action')}}</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addAllowancesModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLongTitle">{{trans('labels.add_allowance')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>
                <div class="modal-body  bg-light">
                    <form id="addAllowanceForm" name="addAllowanceForm">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}" />
                        <input type="hidden" id="fuelPrice" name="fuelPrice" value="{{ $currentFuelPrice }}" />
                       
                        <div class="card-body">
                            <div class="row">
                                
                                <div class="col-md-6">
                                    <div class="form-group form-group-default">
                                        <label for="allowance">{{trans('labels.allowance')}} <span class="required-label">*</span></label>
                                        <select id="allowance" name="allowance" class="form-control"  autocomplete="off"  autocomplete="off">
                                            <option value="">{{trans('labels.select')}}</option>
                                            @foreach ($allowances as $allowance)
                                                <option value="{{$allowance->id}}">{{$allowance->description}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group form-group-default">
                                        <label for="allowanceType">{{trans('labels.allowance_type')}} <span class="required-label">*</span></label>
                                        <select id="allowanceType" name="allowanceType" class="form-control"  autocomplete="off" >
                                            <option value="">{{trans('labels.select')}}</option>
                                            @foreach (trans('constants.allowance_type') as $k => $v)
                                                <option value="{{$k}}">{{$v}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>  
                            </div>  
                            <div class="row">
                                <div class="col-md-6" id="divAllowancePercentage" style="display:none">
                                    <div class="form-group form-group-default">
                                        <label for="allowancePercentage">{{trans('labels.allowance_percentage')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control amo" id="allowancePercentage" name="allowancePercentage" maxlength="100" autocomplete="off">
                                    </div>
                                </div> 

                                <div class="col-md-6" id="divAllowanceAmount" >
                                    <div class="form-group form-group-default">
                                        <label for="allowanceAmount" id="allowanceAmountLabel">{{trans('labels.fixed_amount')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control amo" id="allowanceAmount" name="allowanceAmount" maxlength="100" disabled autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <button class="btn btn-primary btn-lg mt-2 pull-right"  id="btnAddAllowance" type="button">
                                        <i class="fa fa-check-circle"></i> &nbsp;
                                        {{trans('labels.add_allowance_button') }}
                                    </button>
                                </div>
                            </div>
                            
                            
                        </div>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addDeductionsModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLongTitle">{{trans('labels.add_deduction')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>
                <div class="modal-body  bg-light">
                    <form id="addDeductionForm" name="addDeductionForm">
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}" />

                       
                        <div class="card-body">
                            <div class="row">
                                
                                <div class="col-md-6">
                                    <div class="form-group form-group-default">
                                        <label for="deduction">{{trans('labels.deduction')}} <span class="required-label">*</span></label>
                                        <select id="deduction" name="deduction" class="form-control"  autocomplete="off"  autocomplete="off">
                                            <option value="">{{trans('labels.select')}}</option>
                                            @foreach ($deductions as $deductions)
                                                <option value="{{$deductions->id}}">{{$deductions->description}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group form-group-default">
                                        <label for="deductionType">{{trans('labels.deduction_type')}} <span class="required-label">*</span></label>
                                        <select id="deductionType" name="deductionType" class="form-control"  autocomplete="off" >
                                            <option value="">{{trans('labels.select')}}</option>
                                            @foreach (trans('constants.deduction_type') as $k => $v)
                                                <option value="{{$k}}">{{$v}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>  
                            </div>  
                            <div class="row">
                                <div class="col-md-6" id="divDeductionPercentage" style="display:none">
                                    <div class="form-group form-group-default">
                                        <label for="deductionPercentage">{{trans('labels.allowance_percentage')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control amo" id="deductionPercentage" name="deductionPercentage" maxlength="100" autocomplete="off">
                                    </div>
                                </div> 

                                <div class="col-md-6" id="divDeductionAmount" >
                                    <div class="form-group form-group-default">
                                        <label for="deductionAmount">{{trans('labels.fixed_amount')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control amo" id="deductionAmount" name="deductionAmount" maxlength="100" disabled autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <button class="btn btn-primary btn-lg mt-2 pull-right"  id="btnAddDeduction" type="button">
                                        <i class="fa fa-check-circle"></i> &nbsp;
                                        {{trans('labels.add_deduction_button') }}
                                    </button>
                                </div>
                            </div>
                            
                            
                        </div>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @include('partials.bread-crumbs')

    <div class="row">
        <div class="col-md-12">
            <form id="form" name="form">
                <input type="hidden" id="_idpk" name="_idpk" value="" />
                <input type="hidden" id="hidGrossSalary" name="hidGrossSalary"/>
                <input type="hidden" id="hidNetSalary" name="hidNetSalary"/>
                <input type="hidden" id="hidTotalAllowances" name="hidTotalAllowances"/>
                <input type="hidden" id="hidTotalDeductions" name="hidTotalDeductions"/>
                <div class="card">
                    <div class="card-header">
                        <button class="btn btn-primary" id="btnLoadSearch"  type="button">
                            <span class="btn-label"><i class="fas fa-search"></i> {{trans('labels.salary_format')}}</span>
                        </button>
                        
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group form-group-default">
                                    <label for="category">{{trans('labels.format_name')}} <span class="required-label">*</span></label>
                                    <input type="text" class="form-control uppercase" id="formatName" name="formatName" maxlength="100" required  autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default">
                                    <label for="category">{{trans('labels.basic_salary')}} <span class="required-label">*</span></label>
                                    <input type="text" class="form-control uppercase amo" id="basicSalary" name="basicSalary" maxlength="14" required autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-header">
                        <div class="align-items-center">
                            <h4 class="card-title">{{trans('labels.salary_additions')}}   <button class="btn btn-primary pull-right" id="btnAllowancesModal" type="button"><span class="btn-label"><i class="fa fa-plus-circle"></i> {{trans('labels.add_allowance')}}</span> </button></h4>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tblAllowanceData" class="display table table-striped table-hover" >
                                <thead>
                                    <tr>
                                        <th style="width:25px;">#</th>
                                        <th>{{trans('labels.allowance')}} </th>
                                        <th>{{trans('labels.allowance_type')}} </th>
                                        <th>{{trans('labels.amount_percentage')}} </th>
                                        <th>{{trans('labels.action')}}</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-body">
                        
                        <div class="row">
                            <div class="col-md-8">
                                &nbsp;
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default  form-input-readonly">
                                    <label for="category">{{trans('labels.total_allowance')}} </label>
                                    <input type="text" class="form-control uppercase amo" id="totalAllowances" name="totalAllowances" maxlength="14" disabled autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                &nbsp;
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default  form-input-readonly">
                                    <label for="category">{{trans('labels.gross_salary')}}</label>
                                    <input type="text" class="form-control uppercase amo" id="grossSalary" name="grossSalary" maxlength="14" disabled autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="card-header">
                        <div class="align-items-center">
                            <h4 class="card-title">{{trans('labels.salary_deductions')}}   <button class="btn btn-primary pull-right" id="btnDeductionsModal" type="button"><span class="btn-label"><i class="fa fa-plus-circle"></i> {{trans('labels.add_deduction')}}</span> </button></h4>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tblDeductionData" class="display table table-striped table-hover" >
                                <thead>
                                    <tr>
                                        <th style="width:25px;">#</th>
                                        <th>{{trans('labels.deduction')}} </th>
                                        <th>{{trans('labels.deduction_type')}} </th>
                                        <th>{{trans('labels.amount_percentage')}} </th>
                                        <th>{{trans('labels.action')}}</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                   
                    <div class="card-body">
                        
                        <div class="row">
                            <div class="col-md-8">
                                &nbsp;
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default  form-input-readonly">
                                    <label for="category">{{trans('labels.total_deduction')}} </label>
                                    <input type="text" class="form-control uppercase amo" id="totalDeductions" name="totalDeductions" maxlength="14" disabled autocomplete="off">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <hr/>

                    <div class="card-header">
                        <div class="align-items-center">
                            <h4 class="card-title">{{trans('labels.epf_etf_contribution')}}  </h4>
                        </div>
                    </div>

                    <div class="card-body">
                        
                        <div class="row">
                            <div class="col-md-8"></div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default">
                                    <label for="epfEtfContribution">{{trans('labels.epf_etf_contribution')}} <span class="required-label">*</span></label>
                                    <select id="epfEtfContribution" name="epfEtfContribution" class="form-control" required autocomplete="off" >
                                        <option value="">{{trans('labels.select')}}</option>
                                        @foreach(trans("constants.yes_no") as $k => $v)
                                            <option value="{{$k}}">{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>  
                        </div>

                        <div id="divEpfEtfDetail" style="display:none">
                            <div class="row" >
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <label >Employee EPF Contribution (8% from basic salary)</label>
                                </div>
                                <div class="col-md-4">
                                    <label  class="pull-right" id="lblEmployeeEpf">0.00</label>
                                </div>   
                            </div>

                            <div class="row" >
                                <div class="col-md-4"></div>
                                
                                <div class="col-md-4">
                                    <label ><u>Company Contribution</u></label>
                                </div>
                                   
                            </div>
                            <div class="row" >
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <label >EPF (12% from basic salary)</label>
                                </div> 

                                <div class="col-md-4">
                                    <label  class="pull-right" id="lblCompanyEpf">0.00</label>
                                </div> 
                            </div>
                            <div class="row" >
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <label >ETF (3% from basic salary)</label>
                                </div>
                                <div class="col-md-4">
                                    <label  class="pull-right" id="lblCompanyEtf">0.00</label>
                                </div> 
                            </div>
                        </div>    
                    </div>
                    <hr>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                &nbsp;
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-group-default  form-input-readonly">
                                    <label for="category">{{trans('labels.net_salary')}} </label>
                                    <input type="text" class="form-control uppercase amo" id="netSalary" name="netSalary" maxlength="14" disabled autocomplete="off">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="card-footer"> 
                        <div class="row">
                            <div class="col-md-12">
                                @can('salary_format_remove')
                                    @include('partials.buttons.delete')
                                @endcan
                                
                                @can('salary_format_create')
                                    @include('partials.buttons.save')
                                @endcan
                                

                                
                                @include('partials.buttons.reset')
                            </div>
                        </div>
                    </div>
                    
                </div>
            </form>
        </div>
    </div>
</div>


@endsection
@section('custom_scripts')
<script type="text/javascript" src="{{asset('js/xhr.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/services/constant.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/salary/salary-format-creation.js?v=2')}}"> </script>
<script type="text/javascript" src="{{asset('js/datatables.min.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/autoNumeric1.6.2.js')}}"> </script>
@endsection