@extends('backend.layouts.layout')

@section('title','Danh mục bài viết')

@section('content')
<div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">
	<div class="kt-portlet kt-portlet--mobile">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<span class="kt-portlet__head-icon">
					<i class="far fa-th-large"></i>
				</span>
				<h3 class="kt-portlet__head-title">
					Danh mục bài viết
				</h3>
			</div>
			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<div class="dropdown dropdown-inline">
						<button type="button" class="btn btn-danger btn-icon-sm btn-remove-all-item" data-url="{{route('bulkDeleteCategory')}}" data-title="Xóa danh mục bài viết">
							<i class="flaticon2-trash"></i>
						</button>
						<button type="button" class="btn btn-brand btn-icon-sm btn-add-item" data-target="#modal_form" data-url="{{route('createCategory')}}" data-title="Thêm mới danh mục bài viết">
							<i class="flaticon2-plus"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="kt-portlet__body kt-portlet__body--fit table-lar" id="pjax-container">

			<!--begin: Datatable -->
			<div class="table-responsive" id="pjax-table">
				<table class="table grid-view-sort" data-url-sort="{{route('setSortCat')}}">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="chk-all" value="" class="icheck">
							</th>
							<th>Tên</th>
							<th>Danh mục cha</th>
							<th>Tạo lúc</th>
							<th>Sửa lúc</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						@if(!empty($categories))
							@foreach($categories as $category)
								<tr data-id="{{$category['id']}}">
									<td>
										<input type="checkbox" class="chk-item icheck" value="{{$category['id']}}">
									</td>
									<td><a href="{{route('cat',['slug' => $category['slug'], 'id' => $category['id']])}}" target="_blank">{{$category['name']}}</a></td>
									<td>{{$category['parent']}}</td>
									<td>{{$category['created_at']}}</td>
									<td>{{$category['updated_at']}}</td>
									<td>
										<div class="dropdown">
											<button class="btn btn-elevate-hover btn-icon btn-sm btn-icon-md" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												<i class="far fa-ellipsis-h"></i>
											</button>
											<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
												<a class="dropdown-item edit-item" href="javascript:;" data-url="{{route('updateCategory')}}" data-toggle="kt-tooltip" data-id="{{$category['id']}}" title="Sửa" data-placement="right" data-skin="dark" data-container="body"><i class="fal fa-edit"></i> Sửa</a>
												<a class="dropdown-item delete-item" href="javascript:;" data-id="{{$category['id']}}" data-url="{{route('deleteCategory')}}"><i class="fal fa-trash-alt" title="Xóa"></i> Xóa</a>
											</div>
										</div>
									</td>
								</tr>
							@endforeach
						@else
						<tr>
							<td colspan="6" class="text-center empty-table">
								<span>Không có dữ liệu</span>
							</td>
						</tr>
						@endif
					</tbody>
				</table>
			</div>
			<!--end: Datatable -->
		</div>
	</div>
</div>
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				</button>
			</div>
			<div class="modal-body">
				<form class="form-data-mdl" data-url="">
					{{csrf_field()}}
					<div class="form-group">
						<label for="cat-name" class="form-control-label">Tên danh mục</label>
						<input type="text" class="form-control" name="name" id="cat-name" required>
						<div class="block-input-name block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="cat-parent" class="form-control-label">Danh mục cha</label>
						<select name="parent" id="inputParent" class="form-control">
							<option value="">Là danh mục cha</option>
							@if (!empty($parents))
								@foreach($parents as $parent)
									<option value="{{$parent['id']}}">{{$parent['name']}}</option>
								@endforeach
							@endif
						</select>
						<div class="block-input-parent block-error text-danger"></div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div id="loading">
					
				</div>
				<button type="button" class="btn btn-primary btn-save-mdl"><i class="fal fa-save"></i> Lưu lại</button>
			</div>
		</div>
	</div>
</div>
@endsection

@push('scripts')

<script src="{{asset('backend/assets/js/category.js')}}" type="text/javascript"></script>

@endpush