@extends('layouts.master')

@section('title', __("tr.Excuses"))
@section('subtitle', __("tr.Show user Excuses" ) )
@section('titleicon', "icon-files-empty")

@can('submit_excuses')
	@section('actiontitle', __('tr.Submit Excuse'))
	@section('actionlink', route('submit_excuse'))
	@section('actionicon', "icon-plus")
@endcan

@section('content')
	<!-- BEGIN .main-content -->
	<div class="main-content">
		<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-2">
									{!! Form::select('excuse_type_id', array(""=>__("tr.Type"))+$excuseTypes, null, array('id'=> 'excuse_types_id', 'data-placement'=>'top', 'title'=> __('tr.Type'))) !!}
								</div>

								<div class="col-md-2">
									{!! Form::select('excuse_status', array(""=>__("tr.Select Status"))+$excuseStatus, null, array('id'=> 'excuse_status', 'data-placement'=>'top', 'title'=> __('tr.Status'))) !!}
								</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 style="width: 10%">@lang('tr.Date')</th>
									<th style="width: 10%">@lang('tr.Excuse Type')</th>
									<th style="width: 40%">@lang('tr.Excuse Reason')</th>
									<th style="width: 35%">@lang('tr.Status')</th>
									<th style="width: 05%"></th>
								</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Row end -->
	</div>
	<!-- END: .main-content -->

	<script type="text/javascript">
		var showURL = '{{ route('show_excuse', ['excuse'=>'#id']) }}';
		var statusLabels = [];
		var statusBadges = [];

		@foreach(\App\Excuse::statusLabels() as $key => $label)
				statusLabels[{{ $key }}] = '{{ str_replace('_', ' ', ucfirst($label)) }}';
		@endforeach

		@foreach(\App\Excuse::statusBadges() as $key => $badge)
			statusBadges[{{ $key }}] = '{{ $badge }}';
		@endforeach

		 

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

				},
				"columns": [
					{ "data": "updated_at", "name": "updated_at",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							let html = '';
							const formattedDate = new Date(oData.updated_at).toISOString().split('T')[0];
							html += formattedDate;
							$(nTd).html(html);
						}
					},
					{ "data": "excuse_type_name", "name": "excuse_type_name"},
					{ "data": "reasons", "name": "reasons"},
					{ "data": "status", "name": "status",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							var html = '';
							html += "<span class='badge badge-" + statusBadges[oData.status] + "'>" + statusLabels[oData.status] + "</span>";
							$(nTd).html(html);
						}
					},
					{ "data": "id", "name": "id",
						fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
							var html = "";
							html += "<a title='@lang('tr.View')' href='"+showURL.replace('#id', oData.id)+"' target='_blank'><i class='icon-eye'></i></a>&nbsp;";
							$(nTd).html("<span class='action-column'>"+html+"</span>");
						}
					},
				]
			});

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

			$('#search_button').on( 'click', function () {
				table.columns(0).search($("#excuse_types_id").val());
				table.columns(1).search($("#excuse_status").val());
				table.draw();
			});

			$('#reset_button').on( 'click', function () {
				$("#excuse_types_id").val("");
				$("#excuse_status").val("");
				$('#search_button').trigger('click');
			});
		});
	</script>
@stop