@extends('layouts.master')

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


@section('content')
<style>
hr {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #000;
}
.status_tag {
            padding: 6px;
            color: white;
            border-radius: 8px;
        }
</style>
	<!-- BEGIN .main-content -->
	<div class="main-content">
		@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">
									<div class="form-group">
										{!! Form::select('term_id', array(""=>__("tr.Term"))+$terms, null, array('id'=> 'term_id', 'class'=>'form-control', 'data-placement'=>'top', 'title'=> __('tr.Term'))) !!}
									</div>
								</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">
									<div class="form-group">
										<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>
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<select id="status" class="form-control">
											<option value="">@lang('tr.Select Status')</option>
											@foreach(App\StudentTraining::STATUSES as $key => $value)
												<option value="{{$key}}">{{$value}}</option>
											@endforeach                                       
										</select>
									</div>
                                </div>


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

								{{--Button--}}
								<div class="col-md-2 float">
									<div class="form-group">
										<button class="btn btn-danger" type="button" id="reset_button">@lang('tr.Reset')</button>
									</div>
                                </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="30%">@lang('tr.Title')</th>
										<th width="20%">@lang('tr.Info')</th>
										<th width="20%">@lang('tr.Training Dates')</th>
										<th width="10%">@lang('tr.Status')</th>
										<th width="10%">@lang('tr.Weeks')</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 trainingFollowUpURL = '{{ route('trainings_show', ['studentTraining'=>'#id']) }}';

		var statuses = [];
		var statuses_color = [];

		@foreach(App\StudentTraining::STATUSES as $key => $value)
			statuses['{{$key}}'] = '{{$value}}';
		@endforeach

		@foreach(App\StudentTraining::STATUSES_COLORS as  $key => $value)
			statuses_color['{{$key}}'] = '{{$value}}';
		@endforeach

		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('my_trainings') }}',
					"dataSrc": "data.data"

				},
				"columns": [
					{ "data": "id", "name": "id"},
					{ "data": "title", "name": "title"},
					{ "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.Term'): <span style='color: black'>"+oData.term_name+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.Type'): <span style='color: black'>"+oData.type+"</span></span><br>";
							html += "<span class='badge-course'>@lang('tr.Approved Weeks'): <span style='color: black'>"+oData.approved_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>";
							
							$(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>";  
							html += "<span class='badge-course'>@lang('tr.Admission Date'): <span style='color: black'>"+oData.admission_date.split(' ')[0]+"</span></span><br>";

							$(nTd).html(html);
						}
					},
					{ "data": "id", "name": "id",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							var html = "";

							html = "<span class='badge badge-"+statuses_color[oData.status]+"'>"+statuses[oData.status]+"</span>";
							
							if(oData.comment && (oData.status == {{\App\StudentTraining::REJECTED}} || oData.status == {{\App\StudentTraining::DISAPPROVED}}))
								html += "<br><span class='badge-course'>@lang('tr.Reason'): <span style='color: black'>"+oData.comment+"</span></span>";
							
							$(nTd).html("<span class='action-column'>"+html+"</span>");
						}
					},
					{ "data": "approved_num_of_weeks", "name": "approved_num_of_weeks"},
					{ "data": "id", "name": "id",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							var html = "";

							html = "<a target='_blank' href='" + trainingFollowUpURL.replace('#id', oData.id) + "' title='Training Follow Up' href='#'><i class='icon-eye'></i></a>";
							if(oData.status == {{\App\StudentTraining::REQUEST}} || oData.status == {{\App\StudentTraining::INREVIEW}})
								html += "<a class='delete' href='javascript:void(0)' title='Delete Training'><i class='icon-delete'></i></a>";

							$(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.columns(4).search($("#status").val()); 
				table.draw();
			} );

			$('#reset_button').on( 'click', function () {
				$("#term_id").val("");
				$("#type").val("");
				$('#search_training_id')[0].selectize.clear();
				$("#status").val("");
				$('#search_button').trigger('click');
			});

			$(document).on("click", ".delete", function () {
				var row = $(this).closest('tr');
                var data = table.row(row).data();

				var message = "Are you sure you want to delete?";
				warningBox(message, function() {            
					var url = '{{ route('student_training_delete', ['studentTraining'=>'#id'])}}';
					url = url.replace('#id', data.id);
					$.ajax({
						type: 'get', 
						url: url,
						dataType: 'json',
						headers: {
							'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
						},
						success: function (data) {
							infoBox("Done.", function() {
								table.draw();
							});
						}
					});
				});
            });
		});
	</script>
@stop