@extends('layouts.app')

	@section('breadcrumb')
		<ul class="breadcrumb">
		    <li><a href="/home">{!! trans('messages.home') !!}</a></li>
				<li><a href="/demerit">{!! trans('messages.manage').' '.trans('messages.demerit') !!}</a></li>
		    <li class="active">{!! $demerit->User->name_with_designation_and_department.' '.trans('messages.detail').' '.trans('messages.from').' '.showDate($demerit->from_date).' '.trans('messages.to').' '.showDate($demerit->to_date) !!}</li>
		</ul>
	@stop

	@section('content')
		<h4><strong>{{ trans('messages.demerit').' '.trans('messages.detail') }}</strong> {{ trans('messages.configuration') }}</h4>
		<div class="row">
			<div class="col-sm-4">
				<div class="box-info">
					<h2><strong>{!! trans('messages.add_new') !!}</strong> {!! trans('messages.demerit').' '.trans('messages.detail') !!}</h2>
					{!! Form::open(['route' => ['demerit_detail.store', $demerit->id],'role' => 'form', 'class' => 'demerit-detail-form','id' => 'demerit-detail-form','data-table-refresh' => 'demerit-details-table']) !!}
						@include('demerit.detail_form')
					{!! Form::close() !!}
				</div>
			</div>
			<div class="col-sm-8">
				<div class="box-info full">
					<h2><strong>{!! trans('messages.list_all') !!}</strong> {!! trans('messages.demerit').' '.trans('messages.detail') !!}</h2>
					<div class="table-responsive">
						<table class="table table-striped ajax-table" id="demerit-details-table" data-source="/demerit/listDetails?demerit_id={{$demerit->id}}" >
							<thead>
								<tr>
									<th>{!! trans('messages.option') !!}</th>
									<th>{!! trans('messages.title')  !!}</th>
									<th>{!! trans('messages.point') !!}</th>
									<th>{!! trans('messages.description') !!}</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	@stop

	@section('js')
		<script>
			var offences_point = {!! json_encode($offences_point) !!};
			var point_field = document.getElementById("demerit_detail_point");
			var custom_title_field = document.getElementById("custom_title_field");

			function setPoint(value){
				point_field.value = (offences_point[value]) ? offences_point[value] : 0;
				if(value == "others" || value == "Others")
					custom_title_field.style.display='block';
				else
					custom_title_field.style.display='none';
			}
		</script>
	@stop