@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Employees
@endsection

@section('styles')
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
	    <h1>Employees</h1>	
        <a href="{{ route('superAdmin.addEmployee') }}">
            <div class="action-group">
                <span class="add-company">
                    Add New Employee <img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
                </span>
            </div>
        </a>    
	</div>

	@if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
	<div class="row">
	  	<div class="col-md-12">
	        <div class="card">
	            <div class="card-body">
	              	<div class="row">
	                	<div class="col-md-3">
						   <select name="checkstatus" id="checkstatus" class="form-control">
	                    		<option value="">Select status</option>
                                <option value="">All</option>
								<option value="1">Active</option>
								<option value="0">Deactive</option>
	                  		</select>
	                	</div>
	              	</div>

	              	<!-- COmpanies table -->
	              	<div class="table-responsive">
	                	<table id="companies-table" class="table card-table dataTable table-hover table-vcenter text-nowrap" style="width:100%">
	                  		<thead>
	                    		<tr>
                                    <th>Username</th>	                      			
	                      			<th>Location</th>
                                    <th>Total achieved point</th>
	                      			<th width="15%">active/ deactivate</th>
                                    <th>id</th>
	                    		</tr>
	                  		</thead>
	                  		<tbody>
	                  		</tbody>
	                  	</table>
	            	</div>
	          	</div>
	        </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<!-- Data tables -->
	<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<!-- <script src="{{ asset('assets/js/datatable.js') }}"></script> -->

<script type="text/javascript">

var oTable = '';
$(document).ready(function () {
    oTable = $('#companies-table').DataTable({
        "language": {
            "lengthMenu": "Show: _MENU_ records per page",
            "zeroRecords": "Oops No record Found",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        paging: true,
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        ajax: {
            "url": "{{ route('superAdmin.employees') }}",
            "type": "GET",
            "data": function(d) {
                d.checkstatus = $('#checkstatus').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
            {
              data: 'user_image',
               name: ''
             },
             
            {
               data: 'location',
               name: ''
             },
             {
               data: 'totalachivepoint',
               name: ''
             },
             {
                data: null,
                className: 'text-right',
                render: function (data, type, row) {
                   return '<button class="btn btn-primary btn-pill active_status" data-id="'+ row.id +'" data-companyid="'+ row.company_id +'" data-userid="'+ row.user_id +'" data-status="'+ row.is_active1 +'">'+ (row.is_active1 == 1 ? "Deactivate" : "Active") + '</button>';
                    //return '<button class="btn btn-primary btn-pill active_status" data-id="'+ row.id +'" data-companyid="'+ row.company_id +'" data-userid="'+ row.user_id +'" data-status="'+ row.is_active +'">'+ (row.is_active == 1 ? "Deactivate" : "Active") + '</button>';
                }
            },
             { data: 'id', name: 'id' },
        ],

        'columnDefs': [
            {
                'targets': [3], /* column index */
                'orderable': false, /* true or false */
            },
            {
                "targets": [4],
                "visible": false
            }
        ],
        'aaSorting': [4, 'DESC']

    });

    $(document).on('click', '.active_status', function (event) {           
        event.preventDefault();
        var status = $(this).attr('data-status');
        var company_id = $(this).attr('data-companyid');
        var user_id = $(this).attr('data-userid');
        var id = $(this).attr('data-id');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('superAdmin.changeEmployeeStatus') }}",
            method: 'post',
            dataType: 'json',
            data : { 
                is_active: status, 
                company_id: company_id, 
                user_id: user_id, 
                id: id, 
                _token: $('meta[name="csrf_token"]').attr('content')
            },
            success: function (result) {
                if (result.success == true) {
                    oTable.draw();
                } else {
                    //Do nothing
                }
            }
        });

    });

    $("#checkstatus").change(function() {
        oTable.draw();
    });

});

</script>

@endsection