@extends('layouts.master')

@section('title', __("tr.Available Trainings"))
@section('subtitle', __("tr.List Trainings" ) )
@section('titleicon', "icon-file-text")

@if($nTrainings <= 6)
	@section('actiontitle', __('tr.Request Training'))
	@section('actionlink', route('request_training'))
	@section('actionicon', "icon-plus")
@endif

@section('content')
<style>
hr {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #000;
}
</style>
	<!-- BEGIN .main-content -->
	<div class="main-content">
        @if(!empty($errors->all()))
	        <div class="alert alert-danger text-white bg-danger">
	            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	                <span aria-hidden="true">×</span>
	            </button>
	            <ul>
	                @foreach($errors->all() as $error)
	                    <li>{{ $error }}</li>
	                @endforeach
	            </ul>
	        </div>
	    @endif
        @if (Session::has('message'))
            <div class="alert alert-danger text-white bg-danger">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <ul>
                    <li>{!! Session::get('message') !!}</li>
                </ul>
            </div>
        @endif
		<div class="row gutters">
			<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
				 
			<div class="card">
					<div class="card-body pb-0">
						<div class="filter-box">
							<div class="row">
                                 
                                <div class="col-md-3">
									{!! Form::select('term_id', array(""=>__("tr.Select Term"))+$terms, null, array('id'=> 'term_id', 'class'=>'form-control', 'data-placement'=>'top', 'title'=> __('tr.Term'))) !!}
								</div>

								<div class="col-md-3  form-group">
									{!! Form::select('search_training_id', array(""=>__("tr.Select Training"))+$trainings, null, array('id'=> 'search_training_id', 'class'=>'selectize', 'data-placement'=>'top', 'title'=> __('tr.Trainings'))) !!}
								</div>
							 
                                <div class="col-md-3">
                                    <select name="type" id="type" class="form-control">
                                        <option value=''>@lang("tr.Select Type")</option>
                                        @foreach($types as $type)
                                            <option value='{{$type}}'>{{$type}}</option>
                                        @endforeach
                                    </select>
								</div>
                                 
                                

								{{--Button--}}
								<div class="col-md-2 float">
									<button class="btn btn-primary" type="button" id="search_button">@lang('tr.Search')</button>
								</div>

								{{--Button--}}
								<div class="col-md-2 float">
									<button class="btn btn-danger" type="button" id="reset_button">@lang('tr.Reset')</button>
                                </div>
                                
							</div>
						</div>

					</div>
				</div>

				<div class="card">
					<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
						<div class="card-body">
							<table id="data_table" class="display" style="width:100%">
								<thead>
									<tr>
										<th width="5%">#</th>
										<th width="15%">@lang('tr.Title')</th>
										<th width="8%">@lang('tr.Type')</th>
										<th width="8%">@lang('tr.Term')</th>
										<th width="15%">@lang('tr.Info')</th>
										<th width="12%">@lang('tr.Training Dates')</th>
										<th width="5%"></th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Row end -->
	</div>
	<!-- END: .main-content -->

	<script type="text/javascript">
		
        var showURL = '{{ route('studentstrainings_show', ['training'=>'#id']) }}';
		 
		var statusList = {
                @foreach('App\Training'::statusList() as $key=>$value)
                '{{$key}}': '{{$value}}',
                @endforeach
            };

		var badgesStatusList = {
			@foreach('App\Training'::badgesStatusList() as $key=>$value)
			'{{$key}}': '{{$value}}',
			@endforeach
		};

		$(document).ready(function() {
			$('#search_training_id').selectize();

			var table = $('#data_table').DataTable({
				processing: true,
				serverSide: true,
				scrollX: true,
				stateSave: false,
				rowId: 'id',
				order: [
					[ 0, "desc" ]
				],
				"ajax": {
					"url": '{{ route('available_trainings') }}',
					"dataSrc": "data.data"

				},
				"columns": [
					{ "data": "id", "name": "id"},
					{ "data": "title", "name": "title"},
					{ "data": "type", "name": "type"},
					{ "data": "term_name", "name": "term_name"},
					{ "data": "num_of_weeks", "name": "num_of_weeks",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

							var html = "";
							var cvRequired = oData.cv_required == 1? "Yes" : "No";
							var interviewRequired = oData.interview_required == 1? "Yes" : "No";
							html += "<span class='badge-course'>@lang('tr.Weeks'): <span style='color: black'>"+oData.num_of_weeks+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.CV Required'): <span style='color: black'>"+cvRequired+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.Interview Required'): <span style='color: black'>"+interviewRequired+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.Fees'): <span style='color: black'>"+oData.trainingFees+"</span></span><br>";
							$(nTd).html(html);
						}
					},
					
					{ "data": "start_date", "name": "start_date",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

							var html = "";

                            html += "<span class='badge-course'>@lang('tr.Application Start'): <span style='color: black'>"+oData.application_start_date+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.Application End'): <span style='color: black'>"+oData.application_end_date+"</span></span><br>";                            
							html += "<span class='badge-course'>@lang('tr.Training Start'): <span style='color: black'>"+oData.start_date+"</span></span><br>";
                            html += "<span class='badge-course'>@lang('tr.Training End'): <span style='color: black'>"+oData.end_date+"</span></span><br>";  
							$(nTd).html(html);
						}
					},
					{ "data": "id", "name": "id",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							
							var html = "";
							console.log(oData.trainingFull)

							@if($nTrainings > 6)
								html += "<span class='badge badge-pill badge-danger'>Max Hours</span>";
							@else 
								if(!oData.trainingFull)
									html += "<a title='@lang('tr.View Details')' target='_blank' href='"+showURL.replace('#id', oData.id)+"'><i class='icon-eye'></i></a>&nbsp;";
								else
									html += "<span class='badge badge-pill badge-danger'>Full</span>";
							@endif

							$(nTd).html("<span class='action-column'>"+html+"</span>");
						}
					},
				]
			});

			$(".dataTables_filter").hide();

			$('#search_button').on( 'click', function () {
				table.columns(0).search($("#term_id").val());
				table.columns(2).search($("#type").val()); 
				table.columns(3).search($("#search_training_id").val()); 
				table.draw();
			} );

			$('#reset_button').on( 'click', function () {
				$("#term_id").val("");
				$("#type").val("");
				$('#search_training_id')[0].selectize.clear();
				$('#search_button').trigger('click');
			});
		});
	</script>
@stop