{{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="#">Employees</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 ptitle" style="padding:1rem; color:#fff;">

                                <h4 class="card-title" style="color:#fff;">Employees</h4>

                            </div>

                            

                            <div class="card-body">

                            <div class="col-md-12" style="padding: 15px 0px 0px 0px;">

                                    <div class="" style="width:100%">

                                        <div class="btn-group">

                                        <input type="text" name="name" id="staff_name" class="form-control" placeholder="Staff name" style="padding-left: 10px; border-width: 0 1px 0 0px; border-radius:0px;" value="{{request()->get('name') ? request()->get('name') : '' }}">&nbsp;

                                       <select name="branch" id="branch" class="form-control" onchange="getfilterdata()" style="border-width: 0 1px 0 0px; border-radius:0px;">

                                                <option value="">Branch</option>

                                                @foreach($branches as $branch)

                                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>

                                                @endforeach

                                            </select>&nbsp;

                                            <select name="category" id="category" class=" form-control" onchange="getfilterdata()" style="border-width: 0 1px 0 0px; border-radius:0px;">

                                                <option value="">Category</option>

                                                @foreach($categories as $category)

                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>

                                                @endforeach

                                            </select>&nbsp;

                                            <select name="department" id="department" class=" form-control" onchange="getfilterdata()" style="border-width: 0px;">

                                                <option value="">Department</option>

                                                @foreach($departments as $department)

                                                    <option value="{{ $department->id }}">{{ $department->name }}</option>

                                                @endforeach

                                            </select>

                                            

                                        </div>

                                        

                                        <div class="justify-content-between align-items-center" style="margin: 0px 0; float:right;">

                                            <div class="d-flex align-items-right">

                                            <div class="btn-group btn-align-right "><a class="dt-button create-new btn btn-primary" href="{{route('create-employee')}}" ><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 Employee</span></a></div>

                                                &nbsp;<div class="btn-group btn-align-right ">

                                                    <a onclick="deleteSelected()" class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn" >Delete</a>

                                                    &nbsp;&nbsp;

                                            {{-- hide and show --}}

                                            <div class="dropdown" style="margin-top:4px;">

                                                <button class="dropbtn fa fa-gear"></button>

                                                <div id="myDropdown" class="dropdown-content">



                                                </div>

                                            </div>

                                                    

                                                </div>

                                            </div>    

                                        </div>

                                    </div>



                                    

                                </div>

                            <div class="table-responsive table-list" style="overflow-x:scroll;">

                            <div id="emp-dlt-msg"></div>

                            <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >

                                        <thead>

                                            <tr >

                                                <th width="8%" style="text-transform: capitalize;">No.</th>

                                                <th width="10%" style="text-transform: capitalize;">Name</th>

                                                <th width="12%" style="text-transform: capitalize;">Date of Join</th>

                                                <th width="11%" style="text-transform: capitalize;">Phone</th>

                                                <th width="11%" style="text-transform: capitalize;">Department</th>

                                                <th width="10%" style="text-transform: capitalize;">Branch</th>

                                                <th width="10%" style="text-transform: capitalize;">Category</th>

                                                <th width="10%" style="text-transform: capitalize;">State</th>

                                                <th width="10%" style="text-transform: capitalize;">Reset Pswd</th>

                                                <th width="5%" 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')}}

<!-- /// select employees javascript starts///-->

<script type="text/javascript">



var resObj;



var delper;

var hr;

$(document).ready(function(){

    
    showListcount();

  //showListapprover();

   

	

});

 $("#staff_name").keyup( function() {

   

   getfilterdata();

});

var base_url = $('body').attr('data-baseurl')+'/e-leave';

console.log(base_url);

function getfilterdata(){

        var nam = $("#staff_name").val();

        var branch = $("#branch").val();

        var department = $("#department").val();

        var category = $("#category").val();

       var string_url = "getUserList?dtable=yes&branch_id="+ branch +"&department_id="+ department +"&category_id="+ category+ "&name="+ nam;

    //    var table = $('#example11').DataTable({

    //          "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],

    //          "order": [],

	// 	        "processing": true,

    //             "destroy": true,

	// 	        "serverSide": true,

	// 	        "ajax": string_url,

               

    //             "columns": delper != 1 ?  [

                    

    //                 { data: 'employee_no', name: 'employee_no' },

    //                 { data: 'name', name: 'name' },

    //                 { data: 'join_date', name: 'Date of Join',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = row.join_date.split("-").reverse().join("-");

                    

    //                    return ldate;                     

    //                 } },

    //                 { data: 'phone_no', name: 'Phone' },

    //                 { data: 'department', name: 'Department' },

    //                 { data: 'branch', name: 'Branch' },

    //                 { data: 'category', name: 'Category' },

    //                 { data: 'state', name: 'State'},

    //                 { data: 'employee_no', name: 'Reset Pswd',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = '<a class="" onclick="resetpwd(\''+row.username+'\')" style="color:#3192F4;">Reset</a>';

                    

    //                    return ldate;                     

    //                 } },

    //                 {

    //                     name: 'Action',

    //                     "render": function (data,type,row,meta){ 

    //                     var edit = '<a href="'+base_url+'/update-employee/'+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;                   

                  

	// 	                }

    //                 },

    //             ] :  [

                    

    //                 { data: 'employee_no', name: 'No' },

    //                 { data: 'name', name: 'Name' },

    //                 { data: 'join_date', name: 'Date of Join',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = row.join_date.split("-").reverse().join("-");

                    

    //                    return ldate;                     

    //                 } },

    //                 { data: 'phone_no', name: 'Phone' },

    //                 { data: 'department', name: 'Department' },

    //                 { data: 'branch', name: 'Branch' },

    //                 { data: 'category', name: 'Category' },

    //                 { data: 'state', name: 'State'},

    //                 { data: 'employee_no', name: 'Reset Pswd',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = '<a class="" onclick="resetpwd(\''+row.username+'\')" style="color:#3192F4;">Reset</a>';

                    

    //                    return ldate;                     

    //                 } },

    //                 {

    //                     name: 'Action',

    //                     "render": function (data,type,row,meta){ 

    //                     var edit = '<a href="'+base_url+'/update-employee/'+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;                   

                  

	// 	                }

    //                 },

    //                 {"render": function (data,type,row,meta){ 

    //                     var action = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.username+'"/>';

                   

                        

    //                    return action;                     

                  

	// 	                }

    //                 },

     

    //             ],

    //             'rowCallback': function(row, data, index){

                    

    //                 if( delper != 1){

    //                     $(row).find('td:eq(9)').css('text-align', 'center');

    //                     // $(row).find('td:eq(10)').css('text-align', 'center');

    //                     $(row).find('td:eq(0)').css('word-break', 'all');

    //                     $(row).find('td:eq(4)').css('word-break', 'all');

    //                 }else{

    //                     $(row).find('td:eq(9)').css('text-align', 'center');

    //                     $(row).find('td:eq(10)').css('text-align', 'center');

    //                     $(row).find('td:eq(0)').css('word-break', 'all');

    //                     $(row).find('td:eq(4)').css('word-break', 'all');

    //                 }

                    

    //             },

    //             'columnDefs': delper != 1 ? [{

    //                 "targets": [9,8],

    //                 "orderable": false

    //             }] :  [{

    //                 "targets": [10,9,8],

    //                 "orderable": false

    //             }

    //             ],

    //          "language": {

    //                 "paginate": {

    //                 // remove previous & next text from pagination

    //                 "previous": '&nbsp;',

    //                 "next": '&nbsp;'

    //                 }

    //             },

    //      });


    var table = $('#example11').DataTable({
    "lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]],
    "order": [],
    "processing": true,
    "destroy": true,
    "serverSide": true,
    "ajax": string_url,
    "columns": delper != 1 ? [
        { data: 'employee_no', name: 'employee_no' },
        { data: 'name', name: 'name' },
        { 
            data: 'join_date', 
            name: 'Date of Join',
            "render": function(data, type, row, meta) {
            if (!row.join_date || typeof row.join_date !== 'string' || row.join_date.trim() === "") {
            return '-';
             }
        
        var parts = row.join_date.split("-");
        if (parts.length !== 3) {
            return row.join_date;
        }
        
        return parts.reverse().join("-");

            }
        },
        { 
            data: 'phone_no', 
            name: 'Phone',
            "render": function(data, type, row, meta) {
                return row.phone_no ? row.phone_no : '-';
            }
        },
        { 
            data: 'department', 
            name: 'Department',
            "render": function(data, type, row, meta) {
                return row.department ? row.department : '-';
            }
        },
        { 
            data: 'branch', 
            name: 'Branch',
            "render": function(data, type, row, meta) {
                return row.branch ? row.branch : '-';
            }
        },
        { 
            data: 'category', 
            name: 'Category',
            "render": function(data, type, row, meta) {
                return row.category ? row.category : '-';
            }
        },
        { 
            data: 'state', 
            name: 'State',
            "render": function(data, type, row, meta) {
                return row.state ? row.state : '-';
            }
        },
        { 
            data: 'employee_no', 
            name: 'Reset Pswd',
            "render": function(data, type, row, meta) {
                return '<a onclick="resetpwd(\'' + (row.username ? row.username : '') + '\')" style="color:#3192F4;">Reset</a>';
            }
        },
        {
            name: 'Action',
            "render": function(data, type, row, meta) {
                var username = row.username ? row.username : '';
                return '<a href="'+base_url+'/update-employee/'+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;';
            }
        }
    ] : [
        { data: 'employee_no', name: 'No' },
        { data: 'name', name: 'Name' },
        { 
            data: 'join_date', 
            name: 'Date of Join',
            "render": function (data, type, row, meta) {
                 // If join_date is null, undefined, or empty, show '-'
                 if (!row.join_date || typeof row.join_date !== 'string' || row.join_date.trim() === "") {
            return '-';
        }
        
        var parts = row.join_date.split("-");
        if (parts.length !== 3) {
            return row.join_date;
        }
        
        return parts.reverse().join("-");
            }
        },
        { 
            data: 'phone_no', 
            name: 'Phone',
            "render": function(data, type, row, meta) {
                return row.phone_no ? row.phone_no : '-';
            }
        },
        { 
            data: 'department', 
            name: 'Department',
            "render": function(data, type, row, meta) {
                return row.department ? row.department : '-';
            }
        },
        { 
            data: 'branch', 
            name: 'Branch',
            "render": function(data, type, row, meta) {
                return row.branch ? row.branch : '-';
            }
        },
        { 
            data: 'category', 
            name: 'Category',
            "render": function(data, type, row, meta) {
                return row.category ? row.category : '-';
            }
        },
        { 
            data: 'state', 
            name: 'State',
            "render": function(data, type, row, meta) {
                return row.state ? row.state : '-';
            }
        },
        { 
            data: 'employee_no', 
            name: 'Reset Pswd',
            "render": function(data, type, row, meta) {
                return '<a onclick="resetpwd(\'' + (row.username ? row.username : '') + '\')" style="color:#3192F4;">Reset</a>';
            }
        },
        {
            name: 'Action',
            "render": function(data, type, row, meta) {
                var username = row.username ? row.username : '';
                return '<a href="'+base_url+'/update-employee/'+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;';
            }
        },
        {
            "render": function(data, type, row, meta) {
                var username = row.username ? row.username : '';
                return '<input type="checkbox" name="inlineRadioOptions" id="inlineRadio'+row.id+'" value="'+username+'"/>';
            }
        }
    ],
    "rowCallback": function(row, data, index) {
        if (delper != 1) {
            $(row).find('td:eq(9)').css('text-align', 'center');
            $(row).find('td:eq(0)').css('word-break', 'all');
            $(row).find('td:eq(4)').css('word-break', 'all');
        } else {
            $(row).find('td:eq(9)').css('text-align', 'center');
            $(row).find('td:eq(10)').css('text-align', 'center');
            $(row).find('td:eq(0)').css('word-break', 'all');
            $(row).find('td:eq(4)').css('word-break', 'all');
        }
    },
    "columnDefs": delper != 1 ? [
        {
            "targets": [9, 8],
            "orderable": false
        }
    ] : [
        {
            "targets": [10, 9, 8],
            "orderable": false
        }
    ],
    "language": {
        "paginate": {
            "previous": '&nbsp;',
            "next": '&nbsp;'
        }
    }
});
         

        var columns = table.settings().init().columns;

        for (let i = 0; i < columns.length; i++) {

            //

            var dCol =

                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;

            $("#myDropdown").append(dCol);

        }



        // show hide and show data

        var daraArr = {!! json_encode($columnHideShowData) !!}

        hidefun(table, '{!! $c_key !!}', daraArr);

}

function showListcount(){

    

    var string_url = "getUserList?dtable=yes";

   

    // var table = $('#example11').DataTable({

    //          "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],

    //          "order": [],

	// 	        "processing": true,

    //             "destroy": true,

	// 	        "serverSide": true,

	// 	        "ajax": string_url,

               

    //             "columns": delper != 1 ?  [

                    

    //                 { data: 'employee_no', name: 'employee_no' },

    //                 { data: 'name', name: 'name' },

    //                 { data: 'join_date', name: 'Date of Join',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = row.join_date.split("-").reverse().join("-");

                    

    //                    return ldate;                     

    //                 } },

    //                 { data: 'phone_no', name: 'Phone' },

    //                 { data: 'department', name: 'Department' },

    //                 { data: 'branch', name: 'Branch' },

    //                 { data: 'category', name: 'Category' },

    //                 { data: 'state', name: 'State'},

    //                 { data: 'employee_no', name: 'Reset Pswd',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = '<a class="" onclick="resetpwd(\''+row.username+'\')" style="color:#3192F4;">Reset</a>';

                    

    //                    return ldate;                     

    //                 } },

    //                 {

    //                     name: 'Action',

    //                     "render": function (data,type,row,meta){ 

    //                     var edit = '<a href="'+base_url+'/update-employee/'+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;                   

                  

	// 	                }

    //                 },

    //             ] :  [

                    

    //                 { data: 'employee_no', name: 'employee_no' },

    //                 { data: 'name', name: 'name' },

    //                 { data: 'join_date', name: 'Date of Join',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = row.join_date.split("-").reverse().join("-");

                    

    //                    return ldate;                     

    //                 } },

    //                 { data: 'phone_no', name: 'Phone' },

    //                 { data: 'department', name: 'Department' },

    //                 { data: 'branch', name: 'Branch' },

    //                 { data: 'category', name: 'Category' },

    //                 { data: 'state', name: 'State'},

    //                 { data: 'employee_no', name: 'Reset Pswd',

    //                 "render": function (data,type,row,meta){ 

    //                     var ldate = '<a class="" onclick="resetpwd(\''+row.username+'\')" style="color:#3192F4;">Reset</a>';

                    

    //                    return ldate;                     

    //                 } },

    //                 {

    //                     name: 'Action',

    //                     "render": function (data,type,row,meta){ 

    //                     var edit = '<a href="'+base_url+'/update-employee/'+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;                   

                  

	// 	                }

    //                 },

    //                 {"render": function (data,type,row,meta){ 

    //                     var action = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.username+'"/>';

                   

                        

    //                    return action;                     

                  

	// 	                }

    //                 },

     

    //             ],

    //             'rowCallback': function(row, data, index){

                    

    //                 if( delper != 1){

    //                     $(row).find('td:eq(9)').css('text-align', 'center');

    //                     // $(row).find('td:eq(10)').css('text-align', 'center');

    //                     $(row).find('td:eq(0)').css('word-break', 'all');

    //                     $(row).find('td:eq(4)').css('word-break', 'all');

    //                 }else{

    //                     $(row).find('td:eq(9)').css('text-align', 'center');

    //                     $(row).find('td:eq(10)').css('text-align', 'center');

    //                     $(row).find('td:eq(0)').css('word-break', 'all');

    //                     $(row).find('td:eq(4)').css('word-break', 'all');

    //                 }

                    

    //             },

    //             'columnDefs': delper != 1 ? [{

    //                 "targets": [9,8],

    //                 "orderable": false

    //             }] :  [{

    //                 "targets": [10,9,8],

    //                 "orderable": false

    //             }

    //             ],

    //          "language": {

    //                 "paginate": {

    //                 // remove previous & next text from pagination

    //                 "previous": '&nbsp;',

    //                 "next": '&nbsp;'

    //                 }

    //             },

    //      });


    var table = $('#example11').DataTable({
    "lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]],
    "order": [],
    "processing": true,
    "destroy": true,
    "serverSide": true,
    "ajax": string_url,
    "columns": delper != 1 ? [
        { data: 'employee_no', name: 'employee_no', 
          "render": function(data, type, row, meta) {
              return row.employee_no || '-';
          } 
        },
        { data: 'name', name: 'name',
          "render": function(data, type, row, meta) {
              return row.name || '-';
          }
        },
        { data: 'join_date', name: 'Date of Join',
          "render": function(data, type, row, meta) {
              if (!row.join_date || row.join_date.trim() === "") return '-';
              var parts = row.join_date.split("-");
              if (parts.length !== 3) return row.join_date;
              return parts.reverse().join("-");
          }
        },
        { data: 'phone_no', name: 'Phone',
          "render": function(data, type, row, meta) {
              return row.phone_no || '-';
          }
        },
        { data: 'department', name: 'Department',
          "render": function(data, type, row, meta) {
              return row.department || '-';
          }
        },
        { data: 'branch', name: 'Branch',
          "render": function(data, type, row, meta) {
              return row.branch || '-';
          }
        },
        { data: 'category', name: 'Category',
          "render": function(data, type, row, meta) {
              return row.category || '-';
          }
        },
        { data: 'state', name: 'State',
          "render": function(data, type, row, meta) {
              return row.state || '-';
          }
        },
        { data: 'employee_no', name: 'Reset Pswd',
          "render": function(data, type, row, meta) {
              var username = row.username || '';
              return '<a class="" onclick="resetpwd(\'' + username + '\')" style="color:#3192F4;">Reset</a>';
          }
        },
        {
            name: 'Action',
            "render": function(data, type, row, meta) {
                var username = row.username || '';
                return '<a href="' + base_url + '/update-employee/' + 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;';
            }
        }
    ] : [
        { data: 'employee_no', name: 'employee_no', 
          "render": function(data, type, row, meta) {
              return row.employee_no || '-';
          } 
        },
        { data: 'name', name: 'name',
          "render": function(data, type, row, meta) {
              return row.name || '-';
          }
        },
        { data: 'join_date', name: 'Date of Join',
          "render": function(data, type, row, meta) {
              if (!row.join_date || row.join_date.trim() === "") return '-';
              var parts = row.join_date.split("-");
              if (parts.length !== 3) return row.join_date;
              return parts.reverse().join("-");
          }
        },
        { data: 'phone_no', name: 'Phone',
          "render": function(data, type, row, meta) {
              return row.phone_no || '-';
          }
        },
        { data: 'department', name: 'Department',
          "render": function(data, type, row, meta) {
              return row.department || '-';
          }
        },
        { data: 'branch', name: 'Branch',
          "render": function(data, type, row, meta) {
              return row.branch || '-';
          }
        },
        { data: 'category', name: 'Category',
          "render": function(data, type, row, meta) {
              return row.category || '-';
          }
        },
        { data: 'state', name: 'State',
          "render": function(data, type, row, meta) {
              return row.state || '-';
          }
        },
        { data: 'employee_no', name: 'Reset Pswd',
          "render": function(data, type, row, meta) {
              var username = row.username || '';
              return '<a class="" onclick="resetpwd(\'' + username + '\')" style="color:#3192F4;">Reset</a>';
          }
        },
        {
            name: 'Action',
            "render": function(data, type, row, meta) {
                var username = row.username || '';
                return '<a href="' + base_url + '/update-employee/' + 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;';
            }
        },
        {
            "render": function(data, type, row, meta) {
                var username = row.username || '';
                return '<input type="checkbox" name="inlineRadioOptions" id="inlineRadio' + row.id + '" value="' + username + '"/>';
            }
        }
    ],
    "rowCallback": function(row, data, index) {
        if (delper != 1) {
            $(row).find('td:eq(9)').css('text-align', 'center');
            $(row).find('td:eq(0)').css('word-break', 'all');
            $(row).find('td:eq(4)').css('word-break', 'all');
        } else {
            $(row).find('td:eq(9)').css('text-align', 'center');
            $(row).find('td:eq(10)').css('text-align', 'center');
            $(row).find('td:eq(0)').css('word-break', 'all');
            $(row).find('td:eq(4)').css('word-break', 'all');
        }
    },
    "columnDefs": delper != 1 ? [{
        "targets": [9, 8],
        "orderable": false
    }] : [{
        "targets": [10, 9, 8],
        "orderable": false
    }],
    "language": {
        "paginate": {
            "previous": '&nbsp;',
            "next": '&nbsp;'
        }
    },
});

         

         var columns = table.settings().init().columns;

        for (let i = 0; i < columns.length; i++) {

            //

            var dCol =

                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;

            $("#myDropdown").append(dCol);

        }



        // show hide and show data

        var daraArr = {!! json_encode($columnHideShowData) !!}

        hidefun(table, '{!! $c_key !!}', daraArr);

}



<!--/// reset password starts ///-->



function resetpwd(username){

    alert("Password Reset");

    $.ajax({

        type:'post',

        data:{

            _token : "{{ csrf_token() }}",

            username : username,

                    

        },

        url:'{{ route('resetPassword')}}',

                

        success:function(data){

            var resObj = data;



            var messege = resObj;

            if(messege ==  true || messege == 1)

                alert("Successful Reset Password");



            else

                alert("Error Occured");

        },

        error:function(w){

        }

    });



}



function countSelected(){



var count = 0 ;

var arrId = [];

$.each($('input[name="inlineRadioOptions"]:checked'), function(){

                var str =$(this).val();

                

                arrId.push(str);

                count ++;

              });





return count;



            }  



function deleteSelected(){



    if(countSelected() == 0){



        alert("No item selected");



        return;



    }



    var result = confirm("Are you sure want cancel the user(s)?");



    if(!result)



        return;



    if(result){

        $.each($('input[name="inlineRadioOptions"]:checked'), function(){



            $.ajax({

                    type:'post',

                    data: {  

                        _token : "{{ csrf_token() }}",

                        username: $(this).val() 

                    },

                    url:'{{ route('deleteUser')}}',

                        success:function(data) {

                            var html='<div class="alert alert-success fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-check"></i>Employee Successfully Deleted</div>';

                            $('#emp-dlt-msg').html(html);

                            showListcount();

                        }

                            

                });

        });

    



    }



}	





function updateEclaimApp(){

    var arr = new Array;

        

    $("#aemployees2 option:selected").each  ( function() {

        arr.push ( $(this).val() );

    });

   if($("#approverlst2").val()!=''){

		

        $.ajax({

            type:'get',

            

            url:'{{ route('updateManagerMapping')}}',

            data:{ 

                old_manager_id: $("#username").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);

            }

                    

        });

}

$("#checkAll").click(function(){

            $('input:checkbox').not(this).not(":disabled").prop('checked', this.checked);

        });





</script>