@extends('admin.layouts.admin')
@section('style')
<link href="{{ asset('assets/admin/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@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">
                        <div class="float-right">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0);">Salary</a>
                                </li>
                                <li class="breadcrumb-item active">Employee Payscale Assign</li>
                            </ol>
                        </div>
                        <h4 class="page-title">Employee Payscale Assign</h4>

                    </div>
                    <!--end page-title-box-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->
            <!-- end page title end breadcrumb -->
            <div class="row">
                <div class="col-sm-12">
                    @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 class="card">
                        <div class="card-body">
                           
                            <!--end form-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6 col-sm-6">
                                    <h4 class="mt-0 mb-0 header-title">Lists </h4>
                                </div>
                                
                                <!-- end row -->
                            </div>
                            <!-- end row -->  
                            <div class="table-responsive">
                                <table id="datatable" class="table table-bordered dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>                                  
                                            <th>SL No.</th>
                                            <th>Employee name</th>
                                            <th>Employee ID</th>
                                            <th>Type</th>
                                            <th>Groos</th>
                                            <th>Basic</th>
                                            <th>Action</th>                                        
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($employies as $employee)
                                    
                                        <tr>
                                            <td>{{ $loop->iteration ?? '' }}</td>
                                            <td>{{ $employee->name  ?? ''}}</td>
                                            <td>{{ $employee->emp_id ?? '' }}</td>
                                            <td>{{ $employee->employment_type ?? '' }}</td>
                                            <td>{{ $employee->employeePayscaleAssign->gross ?? '' }}</td>
                                            <td>{{ $employee->employeePayscaleAssign->basic ?? '' }}</td>   

                                            <td> 
                                                                                                                                             
                                                @if($employee->payscale_assign_id)
                                                <a href="{{ route('admin.employee_payscale_assign.edit', ['id' => $employee->emp_id])}}" type="button" class="btn btn-warning btn-sm" title="Edit" ><i class="fa fa-edit"></i></a>                                               
                                                @else
                                                <a href="#" data-toggle="modal" data-target="#status_update" type="button" class="btn btn-success btn-sm update_emp_id" data-emp_id="{{ $employee->emp_id ?? '' }}" title="Add" ><i class="fa fa-plus"></i></a> 
                                                @endif
                                            </td> 
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->
            </div><!--end row-->
        </div>
        <div class="modal fade " id="status_update" tabindex="-1" role="dialog" aria-labelledby="status_update" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0">
                        <h5 class="modal-title" id="exampleModalLabel">Salary Details</h5>
                        <button type="button" class="close" id="mod_cls" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="card-body" id="card-form">

                            <form method="POST" action="{{ route('admin.employee_payscale_assign.save') }}">
                                @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 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" name="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"  id="basic" required >
                                </div>
                                <div id="payscale_details">

                                </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" >
                                </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"> Late in</div>
                                        <div class="col-md-2"> Assigned 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">Save</button>
                                <input type="hidden" name="emp_id" id="emp_id">
                            </form>

                            <!--end form-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
        <!-- footer -->
    @include('admin.sections.footer')
    <!--end footer-->
    </div>
<!-- end page content -->
@endsection
@section('script')
<script src="{{ asset('assets/admin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

<script type="text/javascript">
    $(document).on('click', '.update_emp_id', function(e) {
        e.preventDefault();
        //$('#product_list').empty();
        //var toAppend = '';
        const id = $(this).data('emp_id');
        //alert(id);
        $('#emp_id').val(id);
        //alert(id);
        $.ajax({
            type: "POST",
            url:  '{{ url("admin/salary/attendance_history")}}',
            data: {
                "_token": "{{ csrf_token() }}",
                id: id,
                },
            success: function(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);                    
                }
            }
        })

        // $.ajax({
        //     type: "POST",
        //     url:  '{{ url("admin/salary/getProduct")}}',
        //     data: {
        //         "_token": "{{ csrf_token() }}",
        //         id: id,
        //         },
        //     success: function(result) {
        //         var obj = $.parseJSON(result);                
        //        // console.log(obj);               
        //         $.each(obj, function (key, value) {
        //            // console.log(value);
        //             toAppend+='<div class="form-group">';
        //             toAppend+='<label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">'+ value.produt_name + '</label>';
        //             toAppend+='<input type="text" class="form-control" name="product['+ value.product_id + '][]"  required >';
        //             toAppend+='</div>';
                                        
        //         });
        //         $("#product_list").append(toAppend);
                
        //     }
        // })
    })

    function calculateAmount(val) {
        var value="";
        if(val){
            basic_val =(val*55)/100;
        }
        $('#basic').val(basic_val);   
        let grade_id = $('#grade').val(); 
        let id = $('#payscale').val();
        //alert(id);
        $.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);
                $.each(obj, function (key, value) {                         
                    if(value.based_on == 'percent'){
                        if(value.calculate_from == 'gross'){
                            $('#rules_amount_'+value.type_id).val((val * value.percentage_value)/100);
                        }else{
                            $('#rules_amount_'+value.type_id).val((basic_val * value.percentage_value)/100);
                        }
                    }
                });

                
            }
        })

    }


    $( document ).ready(function() {
       // $('#product_list').empty();

        $("#yearpicker").datepicker({
            format: "yyyy",
            viewMode: "years", 
            minViewMode: "years",
            autoclose:true //to close picker once year is selected
        });


        $('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