{{View::make('layout.header')}}

    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Approver Manager</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header" style="">
                                <h4 class="card-title" style="">Search</h4>
                                <div class="btn-group btn-align-right "><a class="dt-button create-new btn btn-primary" href="{{route('approver-create')}}" ><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus mr-50 font-small-4"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>Add New Approver/Manager</span></a></div>
                            </div>
                            
                            <div class="card-body">
                                <div class="table-responsive table-list" style="overflow-x:scroll;">
                                    <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >
                                        <thead>
                                            <tr>
                                                <th width="16%" style="text-transform: capitalize;">Approver</th>
                                                <th width="10%" style="text-transform: capitalize;">Branch</th>
                                                <th width="13%" style="text-transform: capitalize;">Department</th>
                                                <th width="13%" style="text-transform: capitalize;">Category</th>
                                                <th width="33%" style="text-transform: capitalize;">Employees</th>
                                                <th width="15%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Action</th>
                                                            
                                            </tr>
                                        </thead>
                                        <tbody>
                                                    
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                 
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header" style="">
                                <h4 class="card-title" style="">EClaim Approver</h4>
                            </div>
                            
                            <div class="card-body">
                                <div class="table-responsive table-list" style="overflow-x:scroll;">
                                    
                                        <table class="table table-striped  my-leave-summary-entitle" id="example12" style="font-size:12px;" >
                                            <thead>
                                                <tr>
                                                    <th width="16%" style="text-transform: capitalize;">Approver</th>
                                                    <th width="10%" style="text-transform: capitalize;">Branch</th>
                                                    <th width="13%" style="text-transform: capitalize;">Department</th>
                                                    <th width="13%" style="text-transform: capitalize;">Category</th>
                                                    <th width="33%" style="text-transform: capitalize;">Employees</th>
                                                    <th width="15%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Action</th>
                                                                
                                                </tr>
                                            </thead>
                                            <tbody>
                                                        
                                            </tbody>
                                        </table>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
              </section>
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure want to delete this eclaim approver mapping?</h5>
                        <div id="delete-modal">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure want to delete this approver mapping?</h5>
                        <div id="delete-modal1">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn1">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
              
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    @include('inc.eclaim-edit-approver-model')
    @include('inc.edit-approver-model')
<!-- /// select employees javascript starts///-->
<script type="text/javascript">
$(".edc").click(function() {
	$("#ed_list").slideUp('slow');
});

$(".ed1").click(function(event) {
$('#ed_list1').css({position:"absolute",'left':220,'top':event.pageY}).slideDown('slow');
});

$(".edc1").click(function() {
	$("#ed_list1").slideUp('slow');
        $("#ed_list2").slideUp('slow');
});


var resObj;
var resObj1;
var resObj2;
var id;
var empno;
var empno1;
var name;
var description;
var top_pos;
var top_pos2;
var resObjEclaim;
var Eclaim_empno;

$(document).ready(function(){
	$(document).mousemove(function(e){
		top_pos = e.pageY;
		top_pos = top_pos-150;
		top_pos2 = e.pageY;
		top_pos2 = top_pos2-150;;
   }); 
    //showListapprover();
    listapprover11();
    listaEClaimManager11();
	getuser();
	getApprover();
});

function listapprover11(){

    $('#example11').DataTable({
             "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
             "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": false,
		        "ajax": "{!! route('getApproverEmployeeList') !!}",
               
                "columns": [
                    
                    { data: 'name', name: 'name' },
                    { data: 'branch', name: 'branch' },
                    { data: 'department', name: 'department' },
                    { data: 'category', name: 'category' },
                    { data: 'approver_id', name: 'approver_id',
		            "render": function (data,type,row,meta){
                        var emp=''; 
                        for(var j=0; j<row.employees.length; j++){
                            emp += ''+ row.employees[j].name +', ';
                        }
                        return emp;
                    }
                    },
                    { data: 'approver_id', name: 'approver_id',
		            "render": function (data,type,row,meta){ 
                        var edit = '<a class="appDialog-model16" data-toggle="modal" data-target="#inlineForm15" data-id="'+row.approver_id+'" style="color:#28c76f;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                                                
                        return edit;                     
                   } },
     
                ],
                'rowCallback': function(row, data, index){
                    
                    $(row).find('td:eq(5)').css('text-align', 'center');
                    $(row).find('td:eq(0)').css('word-break', 'all');
                    $(row).find('td:eq(4)').css('word-break', 'all');
                    
                },
             "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
         });
}

function listaEClaimManager11(){

    $('#example12').DataTable({
            "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
            "order": [],
                "processing": true,
                "destroy": true,
                "serverSide": false,
                "ajax": "{!! route('getAllManagerNConnectedUsers') !!}",
            
                "columns": [
                    
                    { data: 'name', name: 'name' },
                    { data: 'branch', name: 'branch' },
                    { data: 'department', name: 'department' },
                    { data: 'category', name: 'category' },
                    { data: 'employees', name: 'employees' },
                    { data: 'username', name: 'username',
                    "render": function (data,type,row,meta){ 
                        var edit = '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.username+'" style="color:#28c76f;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                                                
                        return edit;                     
                } },
    
                ],
                'rowCallback': function(row, data, index){
                    
                    $(row).find('td:eq(5)').css('text-align', 'center');
                    $(row).find('td:eq(0)').css('word-break', 'all');
                    $(row).find('td:eq(4)').css('word-break', 'all');
                    
                },
            "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
        });
}

$(document).on("click", ".appDialog-model11", function() {
    var managerID = $(this).data('id');
    $("#delete-modal").html('');
    var html = "<input type='hidden' id='e_id' name='e_id' value='"+managerID+"'><div class='row mb-1'>";
    $("#delete-modal").append(html);
        
});

$(document).on("click", ".appDialog-model12", function() {
    var approverID = $(this).data('id');
    $("#delete-modal1").html('');
    var html = "<input type='hidden' id='a_id' name='a_id' value='"+approverID+"'><div class='row mb-1'>";
    $("#delete-modal1").append(html);
        
});

$(document).on('click', '.yes-btn', function() {
    $.ajax({
        type:'get',
        data:{
            '_token' : "{{ csrf_token() }}",
            'manager_id' : $("#e_id").val(),
                    
        },
        url:'{{ route('eremoveManagerMapping')}}',
                
        success:function(e){
            window.location.reload();
        },
        error:function(w){
        }
    });
});

$(document).on('click', '.yes-btn1', function() {
    $.ajax({
        type:'get',
        data:{
            '_token' : "{{ csrf_token() }}",
            'employee_id' : $("#a_id").val(),
                    
        },
        url:'{{ route('eremoveApproverMapping')}}',
            
        success:function(e){
            window.location.reload();
        },
        error:function(w){
        }
    });
});
   


function updateEclaimApp(){
    var arr = new Array;
        console.log( $("#approver2").val());
    $("#aemployees2 option:selected").each  ( function() {
        arr.push ( $(this).val() );
    });
   if($("#approverlst2").val()!=''){
		
        $.ajax({
            type:'get',
            
            url:'{{ route('updateManagerMapping')}}',
            data:{ 
                old_manager_id: $("#approver2").val(),
			    manager_id: $("#approverlst2").val(),
			    employee_id: arr,
            },
            success:function(data) {
               window.location.reload();
            }
                    
        });	
	}else{
		alert('Approver required');
		
	}
}


function updateApp(){
	var appremp = "";
	var options = document.getElementById("aemployees").options;
	if($("#approverlst").val() == ""){
        for(var i = 0; i < options.length; i++){
            if(options[i].selected){
            if(appremp == "")
                appremp = options[i].value;
            else
                appremp = appremp + ","+ options[i].value;
            }
        }	

        $.ajax({
            type:'get',
            
            url:'{{ route('editApproverMapping')}}',
            data:{ 
                old_approver_id: $("#approver_id").val(),
                approver_id: $("#approver_id").val(),
                employee_ids: appremp,
            },
            success:function(data) {
                window.location.reload();
            }
                    
        });
    }
	else{
        for(var i = 0; i < options.length; i++){
            if(options[i].selected){
            if(appremp == "")
                appremp = options[i].value;
            else
                appremp = appremp + ","+ options[i].value;
            }
        }	
        
        $.ajax({
            type:'get',
            
            url:'{{ route('editApproverMapping')}}',
            data:{ 
                old_approver_id: $("#approver_id").val(),
		        approver_id: $("#approverlst").val(),
		        employee_ids: appremp,
            },
            success:function(data) {
                window.location.reload();
            }
                    
        });
    }
}



function getuser(){
	
    $.ajax({
            type:'get',
            
            url:'{{ route('getAllUsers')}}',
            
            success:function(data) {
                var resObj2 = data;
			    var html = "";
                var html1 = "";
			        html += '<select multiple="multiple" class="select " id="aemployees" name="aemployees" style="height:200px">';
                    html1 += '<select multiple="multiple" class="select " id="aemployees2" name="aemployees2" style="height:275px">';
			        for(var i = 0; i < resObj2.length; i++){
				        html += '<option value="'+resObj2[i].username+'">'+resObj2[i].name+'</option>';
                        html1 += '<option value="'+resObj2[i].username+'">'+resObj2[i].name+'</option>';
			        }
			        html += '</select>';
                    html1 += '</select>';

			        $("#list_emp").html(html);
                    $("#list_emp2").html(html1);
            }
                    
        });
}



</script>