@extends('locationAdmin.layouts.auth')

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

@section('styles')
	<!-- Data table css -->
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet"/>
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet"/>
	<!-- Responsive Tab Css -->
	<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/responsive-tab/easy-responsive-tabs.css') }}" />
@endsection

@section('content')	

	@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">
		                  <span class="add-company">Employee</span>	 
		                  <!-- employee table -->
		                  <div class="table-responsive">
		                    <table
		                      id="employee-table"
		                      class="table card-table dataTable table-hover table-vcenter"
		                    >
		                      <thead>
		                        <tr>
									<th>User</th>									
									<th>Message</th>									
									<th>Date</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>
	<!-- Responsive Tab -->
	<script src="{{ asset('assets/plugins/responsive-tab/easy-responsive-tabs.js') }}"></script>
	<script src="{{ asset('assets/js/responsive-tab.js') }}"></script>	
	<script>
		var oTable = '';
		$(document).ready(function () {
		    oTable = $('#employee-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('locationAdmin.messages.employees') }}",
		            "type": "GET",
		            "data": function(d) {
		            	d.timezone = moment.tz.guess();
		               // d.checkstatus = $('#checkstatus').val();
		            },
		            headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
		            }
		        },
		        columns: [
		            {
					   data: 'user_image',
					   name: 'user_image',
					},		             
		            {
		              data: 'employee_message',
		              name: 'employee_message'
		            },
		            {
		              data: 'created_at',
		              name: 'created_at'
		            },	
		            { data: 'message_id', name: 'id' },
		        ],

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

		    });

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

		});
	</script>
@endsection