@extends('admin.layouts.admin')
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <h3>Update Payscale Assign</h3>
                    <div class="float-right">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">Salary</a>
							</li>							
							<li class="breadcrumb-item active">Update Payscale Assign</li>
						</ol>
					</div>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                    @if(session('alert-green'))
                            <div id="mydiv" class="alert alert-success mt-3 text-center">
                                {{ session('alert-green') }}
                            </div>
                        @endif

                        @if(session('alert-danger'))
                            <div id="mydiv" class="alert alert-danger mt-3 text-center">
                                {{ session('alert-danger') }}
                            </div>
                        @endif
                        @if($errors->any())
                            <div id="mydiv" class="row">
                                <div class="col-md-12 mb-5">
                                    @foreach ($errors->all() as $error)
                                        <div class="text-danger small mb-1">* {{$error}}</div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        {{ session('status') }}                       
                        

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.employee_payscale_assign.update', ['id' => $employee->emp_id]) }}">
                        @csrf

                            <div class="form-group">
                                <label class="input-label" for="department">Payscale <span class="text-danger">*</span></label>
                                <select class="form-control required" name="payscale"  id="payscale"  required>
                                    <option value="">Select Payscale</option>  
                                    @foreach($payscales as $payscale ) 
                                    <option {{ ($employee->employeePayscaleAssign->payscale->id == $payscale->id) ? 'selected' : '' }} value="{{ $payscale->id }}">{{ $payscale->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">Gross </label>
                                <input type="text" readonly class="form-control required"  onchange="calculateAmount(this.value)" name="gross" value="{{ $employee->employeePayscaleAssign->gross ?? '' }}"  id="gross" required >
                            </div>
                            <div class="form-group">
                                <label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">Basic </label>
                                <input type="text" readonly class="form-control required" name="basic" value="{{ $employee->employeePayscaleAssign->basic ?? '' }}" id="basic" required >
                            </div>
                            <div id="payscale_details">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div style="margin-top:5px;">Name</div>
                                            </div>
                                            <div class="col-md-6">
                                                <p style="margin-top:5px;" class="text-uppercase"> Base On </p>
                                            </div>
                                            
                                            <div class="col-md-3">Amount</div>

                                        </div>
                                    </div>
                                </div>
                                    

                                @foreach($employee->employeePayscaleAssign->employeePayscaleDetails as $details)                                                
                                                                
                                
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div style="margin-top:5px;">{{ $details->salaryType->name ?? '' }}</div>
                                            </div>
                                            <div class="col-md-6">
                                    @if($details->salarytype->based_on == 'percent')
                                                <p style="margin-top:5px;" class="text-uppercase"> {{ $details->salarytype->calculate_from ?? ''}} ( {{ $details->salarytype->percentage_value ?? '' }} %) </p>
                                            </div>
                                            
                                            <div class="col-md-3"><input type="text" class="form-control" id="rules_amount_{{ $details->salarytype->id ?? ''}}" name="{{ $details->salarytype->type}}_amount[{{ $details->salarytype->id ?? ''}}][]" value="{{ $details->amount ?? '' }}" ></div>

                                        </div>
                                    </div>
                                </div>
                                    @else
                                                <p style="margin-top:5px;" class="text-uppercase"> ({{ $details->salarytype->min_limit ?? '' }}-{{ $details->salarytype->max_limit ?? '' }}) </p> 
                                            </div>
                                            <div class="col-md-3"><input type="text" class="form-control"  id="rules_amount_{{ $details->salarytype->id ?? ''}}" name="{{ $details->salarytype->type}}_amount[{{ $details->salarytype->id ?? ''}}][]" value="{{ $details->amount ?? '' }}" ></div>

                                        </div>
                                    </div>
                                </div>
                                    @endif                                
                                @endforeach
                            </div>
                            <div class="form-group">
                                <label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">Tax </label>
                                <input type="text" class="form-control" name="tax" id="tax" value="{{ $employee->employeePayscaleAssign->tax ?? '' }}" >
                            </div>
                            <!-- <div id="product_list">

                            </div> -->
                           {{-- <div class="form-group">
                                <label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">Attendance Information</label>
                            </div>
                            <div class="form-group">  
                                <div class="row">                                  
                                    <div class="col-md-3"> working day</div>
                                    <div class="col-md-3"> Attendance</div>
                                    <div class="col-md-2"> Leave</div>
                                    <div class="col-md-2"> Latein</div>
                                    <div class="col-md-2"> Assign leave</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3"><input type="text" readonly class="form-control" id="total_working_day" value="" ></div>
                                    <div class="col-md-3"><input type="text" readonly class="form-control" id="total_attendance" value="" ></div>
                                    <div class="col-md-2"><input type="text" readonly class="form-control" id="total_leave" value="" ></div>
                                    <div class="col-md-2"><input type="text" readonly class="form-control" id="total_latein" value="" ></div>
                                    <div class="col-md-2"><input type="text" readonly class="form-control" id="monthly_allocated_leave" value="" ></div>
                                </div>
                            </div>--}}
                            
                            <button class="btn btn-primary" type="submit">Status Update</button>
                           
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; 2022 SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection
@section('script')

<script type="text/javascript">

    function calculateAmount(val) {
        
        var value="";
        if(val){
            basic_val =(val*55)/100;
        }
        $('#basic').val(basic_val);   
        let grade_id = $('#grade').val(); 
       
        $.ajax({
            type: "POST",
            url:  '{{ url("admin/salary/get_salary_type_by_grade")}}',
            data: {
                "_token": "{{ csrf_token() }}",
                id: grade_id,
                },
            success: function(result) {
                var obj = $.parseJSON(result);                
                //console.log(obj);
                $.each(obj, function (key, value) {                         
                    if(value.based_on == 'percent'){
                        alert((val * value.percentage_value)/100);
                        if(value.calculate_from == 'gross'){
                            $('#rules_amount_'+value.id).val((val * value.percentage_value)/100);
                        }else{
                            $('#rules_amount_'+value.id).val((basic_val * value.percentage_value)/100);
                        }
                    }
                });

                
            }
        })

    }


$( document ).ready(function() {  
    var id = {{ $employee->emp_id ?? '' }};
    $.ajax({
        type: "POST",
        url:  '{{ url("admin/salary/attendance_history")}}',
        data: {
            "_token": "{{ csrf_token() }}",
            id: id,
            },
        success: function(result) {
            //alert(result);
            if(result == 'error'){
                $('#card-form').empty();
                $('#card-form').append('Invalid Employee');
            }
            else {
                $('#total_working_day').val(result.working_day);
                $('#total_attendance').val(result.total_attendance);
                $('#total_leave').val(result.total_leave);
                $('#total_latein').val(result.total_latein);                    
                $('#monthly_allocated_leave').val(result.monthly_allocated_leave);                    
            }
        }
    })
    
    $('select#payscale').on('change', function() {
            let id = this.value;
            
            var toAppend = '';
            $('#payscale_details').empty();
        
            $.ajax({
                type: "POST",
                url:  '{{ url("admin/salary/payscale_cat")}}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    id: id,
                    },
                success: function(result) {
                    var obj = $.parseJSON(result);                
                    //console.log(obj);
                    toAppend+='<div class="col-md-12"><div class="form-group"><div class="row"><div class="col-md-3"><label  class="mb-2 text-bold-600 text-uppercase">Code</label></div><div class="col-md-3"><label  class="mb-2 text-bold-600 text-uppercase">Name</label></div><div class="col-md-3"><label  class="mb-2 text-bold-600 text-uppercase">Based On</label></div><div class="col-md-3"><label  class="mb-2 text-bold-600 text-uppercase">Amount</label></div></div></div>';
                    $.each(obj, function (key, value) {
                        //console.log(value);
                        toAppend+='<div class="col-md-12"><div class="form-group"><div class="row">';
                        toAppend+='<div class="col-md-3">';
                        toAppend+='<div style="margin-top:5px;">'+ value.code + '</div>';
                        toAppend+='</div>';
                        toAppend+='<div class="col-md-3">';
                        toAppend+='<div style="margin-top:5px;">'+ value.type_name + '</div>';
                        toAppend+='</div>';
                        toAppend+='<div class="col-md-3">';
                        if(value.based_on == 'percent'){
                            toAppend+='<p style="margin-top:5px;" class="text-uppercase">'+ value.calculate_from +': ('+ value.percentage_value+' %) </p>';
                            toAppend+='</div>';
                            toAppend+='<div class="col-md-3"><input type="text" class="form-control"  id="rules_amount_'+value.type_id+'" name="'+value.calculation_type+'_amount['+value.type_id+'][]" value="'+value.percentage+'" ></div>';

                            toAppend+='</div></div></div>';
                        }else{
                            toAppend+='<p style="margin-top:5px;" class="text-uppercase">('+ value.min_limit+'-'+ value.max_limit +') </p> ';
                            toAppend+='</div>';
                            toAppend+='<div class="col-md-3"><input type="text" class="form-control" id="rules_amount_'+value.type_id+'" name="'+value.calculation_type+'_amount['+value.type_id+'][]" value="'+ value.min_limit +'" ></div>';

                            toAppend+='</div></div></div>';
                        }

                        $("#gross").val(value.gross);
                        $("#basic").val(value.basic);
                        
                    });
                    $("#payscale_details").append(toAppend);                

                }
            })

        
        });

    setTimeout(function() {
        $('#mydiv').fadeOut('fast');
    }, 3000);
    
    
});
</script>
@endsection