@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</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">Payscale</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="{{ url()->route('admin.salary_payscale.update', ['id' => $payscale->id]) }}" class="row" >
                        @csrf
                            
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Name<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control required" value="{{ $payscale->name ?? '' }}" name="name" aria-required="true" id="name">                                    
                                </div>
                            </div>
                            <div class="col-md-12">                               
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Grade <span class="text-danger">*</span> </label>
                                    <select class="form-control" name="grade" id="grade" required>
                                        <option value="">Select Grade</option>
                                        @foreach($grades as $grade)
                                        <option {{ ($grade->id == $payscale->grade_id) ? 'selected' : '' }} value="{{ $grade->id ?? '' }}">{{ $grade->name ?? '' }}</option>     
                                        @endforeach                                  
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Gross<span class="text-danger">*</span> </label>
                                    <input type="text" onchange="calculateAmount(this.value)" value="{{ $payscale->gross ?? '' }}" class="form-control" name="gross_salary" aria-required="true" id="gross_salary">                                    
                                </div>
                            </div>
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Basic<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control required" name="basic" value="{{ $payscale->basic ?? '' }}" aria-required="true" id="basic">                                    
                                </div>
                            </div>
                            <div id="type_category" style="width:100%;">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-1 d-flex">
                                                <p style="margin-top:5px;" class="text-uppercase"><strong> #</strong></p>
                                            </div>
                                            <div class="col-md-3">
                                                <p style="margin-top:5px;" class="text-uppercase"><strong> Name</strong></p>
                                            </div>
                                            <div class="col-md-2">
                                                <p style="margin-top:5px;" class="text-uppercase"><strong> Code</strong></p>
                                            </div>
                                            <div class="col-md-3">
                                                <p style="margin-top:5px;" class="text-uppercase"><strong> Base On</strong></p>                                                
                                            </div>
                                            <div class="col-md-3">
                                                <p style="margin-top:5px;" class="text-uppercase"><strong> Amount</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @foreach($type_by_grades as $typeGrade)
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-1 d-flex">
                                                <div class="custom-control custom-checkbox my-1 mr-sm-2">
                                                    <input id="customControlInline_{{ $typeGrade->id ?? '' }}" type="checkbox" {{ (in_array($typeGrade->id, $payscale_list)) ? 'checked' : ''  }} class="custom-control-input" name="salary_cat[]" value="{{ $typeGrade->id ?? ''}} " >
                                                    <label class="custom-control-label" for="customControlInline_{{ $typeGrade->id ?? '' }}"></label>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div style="margin-top:5px;">{{ $typeGrade->name ?? ''}} </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div style="margin-top:5px;">{{ $typeGrade->code ?? ''}}</div>
                                            </div>
                                            <div class="col-md-3">
                                                @if($typeGrade->based_on == 'percent')
                                                <p style="margin-top:5px;" class="text-uppercase"> ( {{ $typeGrade->calculate_from ?? '' }})  ({{ $typeGrade->percentage_value ?? '' }} %) </p>
                                                @else
                                                <p style="margin-top:5px;" class="text-uppercase"> ( {{ $typeGrade->min_limit ?? ''}} - {{ $typeGrade->max_limit ?? '' }}) </p> 
                                                @endif
                                            </div>
                                            <div class="col-md-3">
                                                @if($typeGrade->based_on == 'percent')
                                                @php
                                                    $result = 0;
                                                    //($typeGrade->percentage_value * ($typeGrade->calculate_from == 'basic') ? $payscale->basic : $payscale->gross )/100
                                                    if($typeGrade->calculate_from == 'basic'){
                                                        $result = ($typeGrade->percentage_value * $payscale->basic)/100;
                                                    }
                                                    else{
                                                        $result = ($typeGrade->percentage_value * $payscale->gross)/100;
                                                    }
                                                @endphp
                                                <input type="text" name="rules_amount[{{ $typeGrade->id ?? '' }}]" id="rules_amount_{{ $typeGrade->id ?? '' }}" value="{{ $result ?? '' }}">
                                                @else
                                                <input type="text" name="rules_amount[{{ $typeGrade->id ?? '' }}]" id="rules_amount_{{ $typeGrade->id ?? '' }}" value="{{ $typeGrade->min_limit ?? ''}}">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Save</button>

                            </div>
                        </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'){
                        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() {      
    
    $('select#grade').on('change', function() {
        let id = this.value;
        
        var toAppend = '';
        $('#type_category').empty();
        
        $.ajax({
            type: "POST",
            url:  '{{ url("admin/salary/get_salary_type_by_grade")}}',
            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-1 d-flex"><p style="margin-top:5px;" class="text-uppercase"><strong> #</strong></p></div><div class="col-md-3"><p style="margin-top:5px;" class="text-uppercase"><strong> Name</strong></p></div><div class="col-md-2"><p style="margin-top:5px;" class="text-uppercase"><strong> Code</strong></p></div><div class="col-md-3"><p style="margin-top:5px;" class="text-uppercase"><strong> Base On</strong></p> </div><div class="col-md-3"><p style="margin-top:5px;" class="text-uppercase"><strong> Amount</strong></p></div></div></div></div>';
                $.each(obj, function (key, value) {
                                   
                        toAppend+='<div class="col-md-12"><div class="form-group"><div class="row">';
                    
                        toAppend+='<div class="col-md-1 d-flex"><div class="custom-control custom-checkbox my-1 mr-sm-2">';
                        toAppend+='<input id="customControlInline_'+value.id+'" type="checkbox" class="custom-control-input" name="salary_cat['+value.id+']" value="'+value.id+'" ><label class="custom-control-label" for="customControlInline_'+value.id+'"></label>';
                        toAppend+='</div></div>';
                        toAppend+='<div class="col-md-3">';
                        toAppend+='<div style="margin-top:5px;">'+ value.name + '</div>';
                        toAppend+='</div>';
                        toAppend+='<div class="col-md-2">';
                        toAppend+='<div style="margin-top:5px;">'+ value.code + '</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>';
                        }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">';
                        if(value.based_on == 'percent'){
                            toAppend+='<input type="text" name="rules_amount['+value.id+']" id="rules_amount_'+value.id+'" value="">';
                        }else{
                            toAppend+='<input type="text" name="rules_amount['+value.id+']" id="rules_amount_'+value.id+'" value="'+ value.min_limit+'"> ';
                        }
                        

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

                $("#type_category").append(toAppend);
            }
        })
    });

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