@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Findings 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')	

	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
		<h1>Findings</h1>		
	</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">

		                <!-- Message Tab section -->
			                   <div class="msg-tab-section">
			                    <div id="horizontalTab">
			                      <ul class="resp-tabs-list">
			                        <li value="0">Inbox</li>
			                        <li value="1">Approved</li>
			                        <li value="2">Declined</li>                       
			                      </ul>
			                      <div class="resp-tabs-container">
			                        <!-- inbox -->
			                        <div class="inbox">
			                          <!-- Messages table -->
			                          <div class="table-responsive">
			                              <table id="finding_messages" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
			                                <thead>
			                                  <tr>
			                                  <th>User</th>
			                                  <th>Finding Title</th>
			                                  <th>Message</th>			                                 
			                                  <th>Attachment</th>
			                                  <th>Date</th>                          
			                                </tr>
			                                </thead>
			                                <tbody>
			                                </tbody>
			                              </table> 
			                          </div>
			                        </div>
			                        <!-- approved -->
			                        <div class="approved">
			                          
			                        </div>
			                        <!-- declined -->
			                        <div class="declined">
			                          
			                        </div>

			                      </div>
			                    </div>
			                  </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 = $('#finding_messages').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('companyAdmin.messages.finding') }}",
		            "type": "GET",
		            "data": function(d) {
		                d.msg_status =  $('.resp-tabs-list .resp-tab-active').val();
		            },
		            headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
		            }
		        },
		        columns: [					
					{
						data: 'user_image',
						name: 'user_image',
					},

					{
						data: 'finding_title',
						name: 'finding_title',
					},
					{
						data: 'finding_message',
						name: 'finding_message',
					},
					{
						data: 'finding_image',
						name: 'finding_image',
					},
					{
						data: 'created_at',
						name: 'created_at',
					},

					{ data: 'id', name: 'id' },
		        ],

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

		    });		    

		    $(".resp-tabs-list").click(function() {
		      oTable.draw();
		      $('.inbox').show();
		    });

		});
	</script>
@endsection