@extends('locationAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Global Challenges
@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>Global Challenges</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">
		                  <div class="row">
		                    <div class="col-md-3">
		                      <select name="checkstatus" id="checkstatus" class="form-control">
		                        <option value="">Select status</option>
		                        <option value="active">Active</option>
		                        <option value="scheduled">Scheduled</option>
		                        <option value="completed">Completed</option>
		                        <option value="deactivated">Deactivated</option>
		                      </select>
		                    </div>
		                  </div>

		                  <!-- COmpanies table -->
		                  <div class="table-responsive">
		                    <table
		                      id="challenges-table"
		                      class="table card-table dataTable table-hover table-vcenter text-nowrap"
		                    >
		                      <thead>
		                        <tr>
									<th>Challenges</th>
									<th>Challenge Type</th>
									<th>Type</th>
									<th>Start (Date | Time)</th>
									<th>Ends Date</th> 
									<!-- <th width="15%">Action</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 = $('#challenges-table').DataTable({
		        "language": {
		            "lengthMenu": "Show: _MENU_ records per page",
		            "zeroRecords": "No Challenges Found",
		            "infoEmpty": "No records available",
		            "infoFiltered": "(filtered from _MAX_ total records)"
		        },
		        paging: true,
		        processing: true,
		        serverSide: true,
		        pagingType: 'full_numbers',
		        ajax: {
		            "url": "{{ route('locationAdmin.challenge') }}",
		            "type": "GET",
		            "data": function(d) {
		                d.checkstatus = $('#checkstatus').val();
		            },
		            headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
		            }
		        },
		        columns: [
		            {
		              data: 'image',
		               name: ''
		             },
		             {
		               data: 'challenge_type',
		               name: ''
		             },	
		             {
		              // data: 'type_by_super_admin',
		              // name: ''
		               render: function (data, type, row) {
		               	 return 'Global';
		               }
		             },	             
		            {
		               data: 'start_date',
		               name: ''
		             },
		             {
		               data: 'end_date',
		               name: ''
		             },	
		             { data: 'id', name: 'id' },
		        ],

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

		    });		    

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

		});
	</script>
@endsection