@extends('layouts.app')

	@section('breadcrumb')
		<ul class="breadcrumb">
	    <li><a href="/home">{!! trans('messages.home') !!}</a></li>
			@if($checklist->category == "OJT Checklist")
				<li><a href="/checklist?type=ojt">{!! trans('messages.ojt') !!}</a></li>
			@else
				<li><a href="/checklist">{!! trans('messages.checklist') !!}</a></li>
			@endif
	    <li class="active">{!! $checklist->title !!}</li>
		</ul>
	@stop

	@section('content')
		<div class="row">

			{{-- Add Items --}}
			<div class="col-sm-4">
				<div class="box-info">
					<h2><b>{!! trans('messages.add_new') !!}</b> {!! trans('messages.items') !!}</h2>
					{!! Form::open(['route' => ['checklist_item.store', $checklist->id],'role'=>'form', 'class'=>'checklist-item-form', 'id'=>'checklist-item-form', 'data-table-refresh'=>'checklist-item-table']) !!}
						@include('checklist_item._form')
					{!! Form::close() !!}
				</div>
			</div>

			{{-- List Items --}}
			<div class="col-sm-8">
				<div class="box-info full">

					@if($checklist->category == "Daily Checklist")
						<h2 style="display:flex; justify-content:space-between; align-items:center;">
							<div><b>{!! trans('messages.list_all') !!}</b> {!! trans('messages.items') !!}</div>
							<div style="font-size:12px;">Changes to the checklist will take effect after 12am</div>
						</h2>
					@else
						<h2><b>{!! trans('messages.list_all') !!}</b> {!! trans('messages.items') !!}</h2>
					@endif

					@if($checklist->category == "Daily Checklist")
						<div class="table-responsive custom-scrollbar" style="max-height:650px;">
							<table class="table table-striped ajax-table" id="checklist-item-table" data-source="/checklist-item/lists?chk_id={{$checklist->id}}&category={{$checklist->category}}">
								<thead>
									<tr>
										<th style="width:10%;"></th>
										<th style="width:25%;">{!! trans('messages.title') !!}</th>
										<th style="width:25%;">{!! trans('messages.description') !!}</th>
										<th>{!! trans('messages.start').' '.trans('messages.time') !!}</th>
										<th>{!! trans('messages.type') !!}</th>
										<th>{!! trans('messages.option') !!}</th>
										<th>{!! trans('messages.required') !!}</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
						</div>
					@else
						{!! Form::open(['route' => ['item.order',$checklist->id], 'role' => 'form', 'class' => 'config-menu-form', 'id' => 'config-menu-form', 'data-draggable' => 1, 'data-table-refresh' => 'checklist-item-table']) !!}
							<div class="table-responsive custom-scrollbar" style="max-height:650px;">
								<table class="table ajax-table" id="checklist-item-table" data-source="/checklist-item/lists?chk_id={{$checklist->id}}&category={{$checklist->category}}">
									<thead>
										<tr>
											<th style="width:10%;"></th>
											<th style="width:60%;">{!! trans('messages.title').' | '.trans('messages.description') !!}</th>
											<th>{!! trans('messages.type') !!}</th>
											<th>{!! trans('messages.option') !!}</th>
											<th>{!! trans('messages.required') !!}</th>
										</tr>
									</thead>
									<tbody class="draggable-container"></tbody>
								</table>
							</div>

							<div class="box-footer" style="border-top:1px solid #ddd; display:flex; justify-content:space-between;">
								<div>Drag & drop to rearrange the items.</div>
								{!! Form::submit(trans('messages.update').' '.trans('messages.checklist').' '.trans('messages.order'),['class' => 'btn btn-success']) !!}
							</div>
						{!! Form::close() !!}
					@endif


				</div>
			</div>

		</div>
	@stop