@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | 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>Challenges</h1>
		<a href="{{ route('superAdmin.addChallenge') }}">
			<div class="action-group">
				<span class="add-company">
					Add New Challenge <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="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>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('superAdmin.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: 'type_by_super_admin',
		               name: ''
		             },		             
		            {
		               data: 'start_date',
		               name: ''
		             },
		             {
		               data: 'end_date',
		               name: ''
		             },		                          
		             /*{
		                data: null,
		                className: 'text-right',
		                render: function (data, type, row) {
		                	var start_date = row.start_date;		                	
		                	var start_date1 = start_date.split('|');
		                	var start_date2 = start_date1[0].split('/');
		                	var start_date3 = start_date1[1].split(':');
		                	var dateOne = new Date(start_date2[2], start_date2[1], start_date2[0], start_date3[0], start_date3[1]);
		                	
		                	var t = new Date();	
		                	var n = new Date(t.getFullYear(), t.getMonth(), t.getDate(),t.getHours(),t.getMinutes());	                	
							
							var a = start_date2[2].trim()+'-'+start_date2[1]+'-'+start_date2[0]+' '+start_date3[0].trim()+':'+start_date3[1];							
							var d = new Date(a);	
							if(d <= n){
								return '<button class="btn btn-primary btn-pill active_status" data-id="'+ row.id +'"  data-status="'+ row.is_active +'">'+ (row.is_active == 1 ? "Deactivate" : "Active") + '</button>';
							}else{
								return '';
							}
		                   
		                }
		            },*/
		             { data: 'id', name: 'id' },
		        ],

		        'columnDefs': [
		            //{
		               // 'targets': [4], /* 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 id = $(this).attr('data-id');
		        $.ajaxSetup({
		            headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
		            }
		        });
		        $.ajax({
		            url: "{{ route('superAdmin.changeChallengeStatus') }}",
		            method: 'post',
		            dataType: 'json',
		            data : { 
		                is_active: status, 		                 
		                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