@extends('themes.admin.'.setting('active_admin_theme').'.layouts.default')
@section('content')

	@push('custom-css')
		<style>
			.dt-buttons.btn-group {
				float: unset !important;
				margin-left: 20%;
			}
		</style>
	@endpush

	@php
		$t = new Handbook_tab();
		$tabs = $t->get();

		$s = new Handbook_section();
		$secs = $s->get();

		$i = new Handbook_item();
		$itm = $i->get();
	@endphp
	<div class="gadmin-pagesidebar-width-1">
		<div class="panel panel-default gadmin-pagesidebar-width-1-panel ">
			<!-- begin panel-heading -->
			<div class="panel-heading gadmin-pagesidebar-width-1-heading">
				<h4 class="panel-title">Members Handbook</h4>
			</div>
			<!-- end panel-heading -->
			<div class="gadmin-pagesidebar-body">
				<div class="gadmin-pagesidebar-main">
					<ul class="nav gadmin-pagesidebar-ul" id="handbook-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link gadmin-pagesidebar-options-success active" id="handbook-main-tab" data-toggle="pill" href="#handbook-main" role="tab" aria-controls="handbook-main" aria-selected="true"><i class="fa fa-plus"></i> Add Tab</a>
						</li>
						<li class="nav-item">
							<a class="nav-link gadmin-pagesidebar-options-success" id="handbook-section-tab" data-toggle="pill" href="#handbook-section" role="tab" aria-controls="handbook-section" aria-selected="false"><i class="fa fa-plus"></i> Add Sections</a>
						</li>
						<li class="nav-item">
							<a class="nav-link gadmin-pagesidebar-options-success" id="handbook-item-tab" data-toggle="pill" href="#handbook-item" role="tab" aria-controls="handbook-item" aria-selected="false"><i class="fa fa-plus"></i> Tab Content</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- begin panel -->
<div class="gadmin-pagesidebar-width-2">
	<div class="panel panel-default " data-sortable-id="ui-widget-6">
		<div class="panel-heading">
			<h4 class="panel-title">
				{{$title}}
			</h4>
		</div>
		<div class="panel-body">
			<div class="tab-content" id="handbook-tabContent">
				<div class="tab-pane fade show active" id="handbook-main" role="tabpanel" aria-labelledby="handbook-main-tab">
					<div class="row">
						<h4 class="handbook-sections-pagetitle">Handbook Tabs</h4>
						<div class="col-md-12">
							<form id="tabs" class="form-horizontal form-bordered" enctype="multipart/form-data" action="{{asset('admin/utility/add_handbook_tab')}}" method="post">
								<div class="form-group row">
									<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
										<b>Tab Title:</b>
										<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tab Title"></i></label>
									<div class="col-md-9 col-sm-9">
										<input class="form-control" type="text" id="title" name="title" value="" data-parsley-required="true" required />
									</div>
								</div>
								<div class="form-group row">
									<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
										<b>Tab Order:</b>
										<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tab Title"></i></label>
									<div class="col-md-2 col-sm-9">
										<input class="form-control" type="number" name="order" value="" data-parsley-required="true" required />
									</div>
								</div>
								<div class="form-group row m-b-0 form-save-bg">
									<label class="col-md-3 col-sm-4 col-form-label">&nbsp;</label>
									<div class="col-md-8 col-sm-8">
										<button type="submit" name="tab" class="btn btn-success form-button-save">{{__('save')}} Details</button>
									</div>
								</div>
							</form>
						</div>
						@if($tabs->exists())
							<div class="col-md-12"><br/><hr/>
								<table id="data-table1" class="table table-bordered table-striped table-hover table-condensed" style="width:100%">
									<thead>
										<th>Title</th>
										<th>Order</th>
										<th>Created On</th>
										<th>Actions</th>
									</thead>
									<tbody>
									@foreach($tabs as $ta)
										<tr>
											<td>{{ucwords($ta->title)}}</td>
											<td>{{$ta->order}}</td>
											<td>{{date('d/m/Y',$ta->created_at)}}</td>
											<td>
												<a href="#" class="btn btn-xs btn-success" data-toggle="modal" data-target="#exampleModal{{$ta->id}}"><i class="fa fa-edit" data-toggle="tooltip" data-placement="top" data-title="Edit"></i></a>
												<a href="{{url('admin/ajax/delete_object/Handbook_tab/'.$ta->id)}}" class="btn btn-xs btn-danger dt-delete" data-toggle="tooltip" data-placement="top" data-title="Delete"><i class="fa fa-trash-alt"></i></a>
											</td>
										</tr>
									@endforeach
									</tbody>
								</table>
							</div>
							@foreach($tabs as $ta)
								<div class="modal fade" id="exampleModal{{$ta->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<form class="" action="{{url('admin/utility/edit_handbook/Handbook_tab/'.$ta->id)}}" method="post">
												<div class="modal-header">
													<h5 class="modal-title" id="exampleModalLabel">Edit {{ucwords($ta->title)}}</h5>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body">
													<div class="form-group">
														<label for="recipient-name" class="col-form-label">Title:</label>
														<input type="text" name="title" value="{{$ta->title}}" class="form-control"  required>
													</div>
													<div class="form-group">
														<label for="message-text" class="col-form-label">Order:</label>
														<input type="text" name="order" value="{{$ta->order}}" class="form-control"  required>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
													<button type="submit" class="btn btn-success">SAVE CHANGES</button>
												</div>
											</form>
										</div>
									</div>
								</div>
							@endforeach
						@endif
					</div>
				</div>
				<div class="tab-pane fade" id="handbook-section" role="tabpanel" aria-labelledby="handbook-section-tab">
					<div class="row">
						<h4 class="handbook-sections-pagetitle">Handbook Sections</h4>
							@if($tabs->exists())
							<div class="col-md-12">
								<form id="sections" class="form-horizontal form-bordered" enctype="multipart/form-data" action="{{asset('admin/utility/add_handbook_section')}}" method="post">
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Section Title:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Section Title"></i></label>
										<div class="col-md-9 col-sm-9">
											<input class="form-control" type="text" name="section_title" value="" data-parsley-required="true" required />
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Handbook Tabs:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tabs"></i></label>
										<div class="col-md-9 col-sm-9">
											<select name="handbook_tab_id" class="form-control" required>
												<option value="">Select</option>
												@foreach($tabs as $tab)
													<option value="{{$tab->id}}">{{$tab->title}}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Tab Order:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tab Title"></i></label>
										<div class="col-md-2 col-sm-9">
											<input class="form-control" type="number" name="order" value="" data-parsley-required="true" required />
										</div>
									</div>
									<div class="form-group row m-b-0 form-save-bg">
										<label class="col-md-3 col-sm-4 col-form-label">&nbsp;</label>
										<div class="col-md-8 col-sm-8">
											<button type="submit" class="btn btn-success form-button-save">{{__('save')}} Details</button>
										</div>
									</div>
								</form>
							</div>
							@if($secs->exists())
								<div class="col-md-12"><br/><hr/>
									<table id="data-table2" class="table table-bordered table-striped table-hover table-condensed" style="width:100%">
										<thead>
										<th>Title</th>
										<th>Tab Name</th>
										<th>Order</th>
										<th>Created On</th>
										<th>Actions</th>
										</thead>
										<tbody>
										@foreach($secs as $se)
											<tr>
												<td>{{$se->title}}</td>
												<td>{{ucwords($se->handbook_tab->get()->title)}}</td>
												<td>{{$se->order}}</td>
												<td>{{date('d/m/Y',$se->created_at)}}</td>
												<td>
													<a href="#" class="btn btn-xs btn-success" data-toggle="modal" data-target="#example{{$se->id}}"><i class="fa fa-edit" data-toggle="tooltip" data-placement="top" data-title="Edit"></i></a>
													<a href="{{url('admin/ajax/delete_object/Handbook_section/'.$se->id)}}" class="btn btn-xs btn-danger dt-delete" data-toggle="tooltip" data-placement="top" data-title="Delete"><i class="fa fa-trash-alt"></i></a>
												</td>
											</tr>
										@endforeach
										</tbody>
									</table>
									@foreach($secs as $se)
										<div class="modal fade" id="example{{$se->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog modal-lg" role="document">
												<div class="modal-content">
													<form class="" action="{{url('admin/utility/edit_handbook/Handbook_section/'.$se->id)}}" method="post">
														<div class="modal-header">
															<h5 class="modal-title" id="exampleModalLabel">Edit {{ucwords($se->title)}}</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
														</div>
														<div class="modal-body">
															<div class="form-group">
																<label for="recipient-name" class="col-form-label">Title:</label>
																<input type="text" name="title" value="{{$se->title}}" class="form-control"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Order:</label>
																<input type="text" name="order" value="{{$se->order}}" class="form-control"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Tab:</label>
																<select name="handbook_tab_id" class="form-control" required>
																	<option value="">Select</option>
																	@foreach($tabs as $tab)
																		<option value="{{$tab->id}}" @if($se->handbook_tab_id == $tab->id) selected @endif>{{$tab->title}}</option>
																	@endforeach
																</select>
															</div>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
															<button type="submit" class="btn btn-success">SAVE CHANGES</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									@endforeach
								</div>
							@endif
							@else
								<div class="col-md-12">
									<div class="alert alert-info">No Tabs Created Yet.Go create one first.</div>
								</div>
							@endif
					</div>
				</div>
				<div class="tab-pane fade" id="handbook-item" role="tabpanel" aria-labelledby="handbook-item-tab">
					<div class="row">
						<h4 class="handbook-sections-pagetitle">Handbook Tab Content</h4>
						@if($secs->exists())
							<div class="col-md-12">
								<form id="items" class="form-horizontal form-bordered" enctype="multipart/form-data" action="{{asset('admin/utility/add_handbook_item')}}" method="post">
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Item Title:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Item Title"></i></label>
										<div class="col-md-9 col-sm-9">
											<input class="form-control" type="text" name="item_title" value="" data-parsley-required="true" required />
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Handbook Sections:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tabs"></i></label>
										<div class="col-md-9 col-sm-9">
											<select name="handbook_section_id" class="form-control" required>
												<option value="">Select</option>
												@foreach($secs as $sec)
													<option value="{{$sec->id}}">{{$sec->title}}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3 col-be-3" for="title">
											<b>Tab Order:</b>
											<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="Tab Title"></i></label>
										<div class="col-md-2 col-sm-9">
											<input class="form-control" type="number" name="order" value="" data-parsley-required="true" required />
										</div>
									</div>
									<div class="form-group row">
										<label class="control-label col-md-3 col-sm-3" for="blogname">
											<div style="text-align: left;"><b>Item Content:</b>
												<i class="fa fa-question-circle" style="font-size:16px;color: #AFAFAF;" data-toggle="tooltip" data-placement="top" title="This is where you add your main Item Content"></i>
											</div>
										</label>
										<div class="col-md-9 col-sm-9">
											<div class="panel-body panel-form">
												<textarea class="tiny-mce hidden" name="content" rows="20"></textarea>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label">Files</label>
										<div class="col-md-8">
											{!! dropzone('additional_images', 'Handbook_item', 0, 'handbook', 20, 1000, fileTypes('all'), 'image1', false) !!}
										</div>
									</div>
									<div class="form-group row m-b-0 form-save-bg">
										<label class="col-md-3 col-sm-4 col-form-label">&nbsp;</label>
										<div class="col-md-8 col-sm-8">
											<button type="submit" class="btn btn-success form-button-save">{{__('save')}} Details</button>
										</div>
									</div>
								</form>
							</div>
							@if($itm->exists())
								<div class="col-md-12"><br/><hr/>
									<table id="data-table3" class="table table-bordered table-striped table-hover table-condensed" style="width:100%">
										<thead>
										<th>Title</th>
										<th>Tab Name</th>
										<th>Section Name</th>
										<th>Order</th>
										<th>Created On</th>
										<th>Actions</th>
										</thead>
										<!--<tbody>
										@foreach($itm as $it)
											@php $sec = new Handbook_section($it->handbook_section->get()->id); @endphp
											<tr>
												<td>{{$it->title}}</td>
												<td>{{ucwords($sec->handbook_tab->get()->title)}}</td>
												<td>{{ucwords($sec->title)}}</td>
												<td>{{$it->order}}</td>
												<td>{{date('d/m/Y',$it->created_at)}}</td>
												<td>
													<a href="#" class="btn btn-xs btn-success" data-toggle="modal" data-target="#ex{{$it->id}}"><i class="fa fa-edit" data-toggle="tooltip" data-placement="top" data-title="Edit"></i></a>
													<a href="{{url('admin/ajax/delete_object/Handbook_item/'.$it->id)}}" class="btn btn-xs btn-danger dt-delete" data-toggle="tooltip" data-placement="top" data-title="Delete"><i class="fa fa-trash-alt"></i></a>
												</td>
											</tr>
										@endforeach
										</tbody>-->
									</table>
									<!--@foreach($itm as $it)
										<div class="modal fade" id="ex-{{$it->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog modal-lg" role="document">
												<div class="modal-content">
													<form class="" action="{{url('admin/utility/edit_handbook/Handbook_item/'.$it->id)}}" method="post">
														<div class="modal-header">
															<h5 class="modal-title" id="exampleModalLabel">Edit {{ucwords($it->title)}}</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
														</div>
														<div class="modal-body">
															<div class="form-group">
																<label for="recipient-name" class="col-form-label">Title:</label>
																<input type="text" name="title" value="{{$it->title}}" class="form-control"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Order:</label>
																<input type="text" name="order" value="{{$it->order}}" class="form-control"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Section:</label>
																<select name="handbook_section_id" class="form-control" required>
																	<option value="">Select</option>
																	@php $ss = new Handbook_section(); $ssec = $ss->get(); @endphp
																	@foreach($ssec as $se)
																		<option value="{{$se->id}}" @if($it->handbook_section_id == $se->id) selected @endif>{{$se->title}}</option>
																	@endforeach
																</select>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Content:</label>
																	<div class="panel-body panel-form">
																		<textarea class="tiny-mce hidden" name="content" rows="20">{{$it->content}}</textarea>
																</div>
															</div>
															<div class="form-group">
																<label class="col-md-3 col-form-label">Files</label>
																<div class="col-md-8">
																	{!! dropzone('additional_images'.$it->id, 'Handbook_item', $it->id, 'handbook', 20, 1000, fileTypes('all'), 'image1', false) !!}
																</div>
															</div>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
															<button type="submit" class="btn btn-success">SAVE CHANGES</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									@endforeach-->
										@php
											$ss = new Handbook_section();
											$ssec = $ss->get();
										@endphp
										<div class="modal fade item-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog modal-lg" role="document">
												<div class="modal-content">
													<form class="item-form" action="" method="post">
														<div class="modal-header">
															<h5 class="modal-title" id="exampleModalLabel">Edit <span class="item-edit-title"></span></h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
														</div>
														<div class="modal-body">
															<div class="form-group">
																<label for="recipient-name" class="col-form-label">Title:</label>
																<input type="text" name="title" value="" class="form-control item-title"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Order:</label>
																<input type="text" name="order" value="" class="form-control item-order"  required>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Section:</label>
																<select name="handbook_section_id" class="form-control item-section-title" required>
																	<option value="">Select</option>
																	@foreach($ssec as $se)
																		<option value="{{$se->id}}">{{$se->title}}</option>
																	@endforeach
																</select>
															</div>
															<div class="form-group">
																<label for="message-text" class="col-form-label">Content:</label>
																<div class="panel-body panel-form">
																	<textarea id="tiny-mce-x" class="item-content hidden" name="content" rows="20"></textarea>
																</div>
															</div>
															<div class="form-group">
																<label class="col-md-3 col-form-label">Files</label>
																<div class="col-md-8 item-file">
																	{!! dropzone('additional_images0', 'Handbook_item', 0, 'handbook', 20, 1000, fileTypes('all'), 'image1', false) !!}
																</div>
															</div>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
															<button type="submit" class="btn btn-success">SAVE CHANGES</button>
														</div>
													</form>
												</div>
											</div>
										</div>
								</div>
							@endif
						@else
							<div class="alert alert-info"> No Handbook Sections created yet.Go create one first.</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- end panel -->
	@push('custom-js')
		<script defer async>
			$(document).ready(function() {

				loadScript('assets/plugins/tinymceElfinder/tinymceElfinder.js');
				loadScript('assets/plugins/tinymce_5.7/js/tinymce/jquery.tinymce.min.js');
				loadScript('assets/plugins/tinymce_5.7/js/tinymce/tinymce.min.js?apiKey=27xhkb8mfltvjs62yqkw8kh3tynd73sdf3wi7va8qdr7221f', function(e){
					let tinyUrl = site_root.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
					// make elf instance
					const mceElf = new tinymceElfinder({
						// connector URL
						url: site_root + 'admin/files/connector',
						uploadTargetHash: 'l1_Lw',
						nodeId: 'elfinder'
					});
					// Init TinyMCE
					$('#tiny-mce-x').tinymce({
						plugins: 'advlist,anchor,autolink,autoresize,autosave,charmap,directionality,emoticons,fullscreen,hr,image,imagetools,importcss,insertdatetime,legacyoutput,code,table,paste,link,lists,media,nonbreaking,noneditable,pagebreak,quickbars,save,searchreplace,tabfocus,textpattern,wordcount,visualblocks,visualchars',
						skin: 'oxide-dark',
						content_css: 'default',
						max_height: 600,
						max_width: 500,
						min_height: 400,
						min_width: 400,
						menubar: 'edit insert view format table tools',
						toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code',
						font_formats: 'Arial=arial,helvetica,sans-serif;Open Sans=sans-serif;',
						importcss_append: true,
						branding: false,
						relative_urls: false,
						remove_script_host: false,
						file_picker_callback : mceElf.browser,
						autosave_ask_before_unload: false, // Disables leave page alert
						urlconverter_callback: function(url, node, on_save, name) {

							let checkURL;
							let urlPrefix;
							// Get the first 7 characters of the string
							checkURL = url.substring(0, 7);
							// Determine if those characters are coming from the image uploader
							if(checkURL === "/system") {
								// prefix the incoming URL with url()
								urlPrefix = site_root;
								url = urlPrefix.concat(url);
							}else{

								if (!/^https?:\/\//i.test(url)) {
									url = 'https://' + url;
								}
							}
							// Return URL
							return url;
						},
					});

				});

				var table = $('#data-table1').DataTable( {
					"lengthMenu": [[10, 25, 50, 100, 500, 1000, 5000, -1], [10, 25, 50, 100, 500, 1000, 5000, "All"]],
					"buttons": [
						{ extend: "copy", className: "btn-sm", exportOptions: {columns: [1,2,3]} },
						{ extend: "csv", className: "btn-sm", exportOptions: {columns: [1,2,3,]} },
						{ extend: "excel", className: "btn-sm", exportOptions: {columns: [1,2,3]} },
						{ extend: "pdf", className: "btn-sm", exportOptions: {columns: [1,2,3]} },
						{ extend: "print", className: "btn-sm", exportOptions: {columns: [1,2,3]} }
					],
					"responsive": true,
					"dom": "Bflrtip",
				});
				var table = $('#data-table2').DataTable( {
					"lengthMenu": [[10, 25, 50, 100, 500, 1000, 5000, -1], [10, 25, 50, 100, 500, 1000, 5000, "All"]],
					"buttons": [
						{ extend: "copy", className: "btn-sm", exportOptions: {columns: [1,2,3,4]} },
						{ extend: "csv", className: "btn-sm", exportOptions: {columns: [1,2,3,4]} },
						{ extend: "excel", className: "btn-sm", exportOptions: {columns: [1,2,3,4]} },
						{ extend: "pdf", className: "btn-sm", exportOptions: {columns: [1,2,3,4]} },
						{ extend: "print", className: "btn-sm", exportOptions: {columns: [1,2,3,4]} }
					],
					"responsive": true,
					"dom": "Bflrtip",
				});
				var table = $('#data-table3').DataTable( {
					"lengthMenu": [[10, 25, 50, 100, 500, 1000, 5000, -1], [10, 25, 50, 100, 500, 1000, 5000, "All"]],
					"processing": true,
					"ajax": site_root + "admin/ajax/dt_feed/handbook_item",
					"columns": [
						{ "data": "title"},
						{ "data": "section_title"},
						{ "data": "tab_title"},
						{ "data": "order" },
						{ "data": "created_at" },
						{
							"data": "id",
							"render": function ( data, type, row ){
								return '<a href="#" class="btn btn-xs btn-success dt-item-edit" data-toggle="modal" data-target="#ex-' + data +'"><i class="fa fa-edit" data-toggle="tooltip" data-placement="top" data-title="{{__('edit')}}"></i></a> ' +
										'<a href="' + site_root + 'admin/ajax/delete_object/Handbook_item/' + data +'" class="btn btn-xs btn-danger dt-delete" data-toggle="tooltip" data-placement="top" data-title="{{__('delete')}}"><i class="fa fa-trash-alt"></i></a> ';
							},
						}
					],
					"order": [[1, 'asc']],
					"buttons": [
						{ extend: "copy", className: "btn-sm", exportOptions: {columns: [1,2,3,4,5]} },
						{ extend: "csv", className: "btn-sm", exportOptions: {columns: [1,2,3,4,5]} },
						{ extend: "excel", className: "btn-sm", exportOptions: {columns: [1,2,3,4,5]} },
						{ extend: "pdf", className: "btn-sm", exportOptions: {columns: [1,2,3,4,5]} },
						{ extend: "print", className: "btn-sm", exportOptions: {columns: [1,2,3,4,5]} }
					],
					//"responsive": true,
					"dom": "Bflrtip",
				});

				$('#data-table3').on('click', ' a.dt-item-edit', function(e){
					var this_target = $(this).attr('data-target').split("-")[1];

					$.ajax({
						type: "GET",
						url: site_root + "admin/ajax/dt_feed/handbook_item/"+this_target,
						cache: false,
						data: {},
						success: function (response) {
							data = response.data[0];
							//console.log(data);
							$('.item-form').attr('action','/admin/utility/edit_handbook/Handbook_item/'+this_target);
							$('.item-edit-title').html(data.title);
							$('.item-title').val(data.title);
							$('.item-order').val(data.order);
							$('.item-section-title').val(data.section_title_id);
							$('.item-content').val();
							$('#tiny-mce-x').empty();
							tinymce.get("tiny-mce-x").setContent(data.content);
							update_dropzone(this_target);
							$('.item-modal').modal('show');
						}
					});
				});

			});

			function update_dropzone(object_id){
				var dropzone_html = '<div id="additional_images' + object_id + '" class="dropzone">' +
										'<div class="dz-default dz-message">' +
											'<span class="dz-text">