@extends('backend.layouts.layout')

@section('title','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="fal fa-newspaper"></i>
				</span>
				<h3 class="kt-portlet__head-title">
					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('bulkDeleteBlog')}}" data-title="Xóa 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('createBlog')}}" data-title="Thêm mới bài viết">
							<i class="flaticon2-plus"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="kt-portlet__body">

			<!--begin: Search Form -->
			<div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
				<div class="row align-items-center">
					<div class="col-xl-10 order-2 order-xl-1">
						<form action="{{ route('listBlog') }}" data-pjax>
							<div class="row align-items-center">
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<input type="text" class="form-control" placeholder="Tiêu đề..." id="generalSearch" name="title" value="{{request('title','')}}">
								</div>
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<div class="kt-form__group kt-form__group--inline">
										<div class="kt-form__control">
											<select class="form-control bootstrap-select" name="cat_id">
												<option value="">--Danh mục--</option>
												@if (!empty($categories))
													@foreach($categories as $category)
														@if (empty($category->cats->count()))
															<option value="{{$category->id}}" {{request('cat_id') == $category->id ? 'selected' : ''}}>{{$category->name}}</option>
														@endif
													@endforeach
												@endif
											</select>
										</div>
									</div>
								</div>
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<div class="kt-form__group kt-form__group--inline">
										<div class="kt-form__control">
											<select class="form-control bootstrap-select" name="status">
												<option value="">--Trạng thái--</option>
												<option value="1" {{request('status') == 1 ? 'selected' : ''}}>Xuất bản</option>
												<option value="2" {{request('status') == 2 ? 'selected' : ''}}>Nháp</option>
											</select>
										</div>
									</div>
								</div>
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<button type="submit" class="btn btn-primary"><i class="fal fa-search"></i></button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<!--end: Search Form -->
		</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('setSort')}}">
					<thead>
						<tr>
							<th><input type="checkbox" id="chk-all" class="icheck"></th>
							<th>Ảnh</th>
							<th>Tiêu đề</th>
							<th>Trạng thái</th>
							<th>Danh mục</th>
							<th>Lượt xem</th>
							<th>Người tạo</th>
							<th>Tạo lúc</th>
							<th>Sửa lúc</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						@if(!empty($blogs->count()))
							@foreach($blogs as $key => $blog)
								<tr data-id="{{$blog->id}}">
									<td>
										<input type="checkbox" class="chk-item icheck" value="{{$blog->id}}">
									</td>
									<td><a href="{{route('detaiBlog',['slug' => str_slug($blog->title),'id' => $blog->id])}}" target="_blank"><img src="{{!empty($blog->photo) ? asset('upload/'.$blog->photo) : asset('backend/assets/no-photo.png')}}" alt="{{$blog->title}}" width="100"></a></td>
									<td><a href="{{route('detaiBlog',['slug' => str_slug($blog->title),'id' => $blog->id])}}" target="_blank">{{$blog->title}}</a></td>
									<td><span class="text-{{$blog->getStatus($blog->status)['icon']}}">{{$blog->getStatus($blog->status)['label']}}</span></td>
									<td>{{$blog->category->name}}</td>
									<td>{{$blog->view}}</td>
									<td>{{!empty($blog->userblog->name) ? $blog->userblog->name : ''}}</td>
									<td>{{date('d/m/Y H:i:s',strtotime($blog->created_at))}}</td>
									<td>{{date('d/m/Y H:i:s',strtotime($blog->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('updateBlog')}}" data-toggle="kt-tooltip" data-id="{{$blog->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="{{$blog->id}}" data-url="{{route('deleteBlog')}}"><i class="fal fa-trash-alt" title="Xóa"></i> Xóa</a>
											</div>
										</div>
									</td>
								</tr>
							@endforeach
						@else
						<tr>
							<td colspan="10" class="text-center empty-table">
								<span>Không có dữ liệu</span>
							</td>
						</tr>
						@endif
					</tbody>
				</table>
			</div>
			<!--end: Datatable -->
			<div class="pagination-block">
				{{$blogs->links()}}
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="modal_form" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl" 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="" method="post">
					{{csrf_field()}}
					<div class="row">
						<div class="col-md-8">
							<div class="form-group">
								<label for="blog-title" class="form-control-label">Tiêu đề <span id="txt-title"></span></label>
								<input type="text" class="form-control" name="title" id="blog-title" required placeholder="Nhập tiêu đề...">
								<div class="block-input-title block-error text-danger"></div>
							</div>
							<div class="form-group">
								<label for="cat_id" class="form-control-label">Danh mục</label>
								<select name="cat_id" id="cat_id" class="form-control">
									<option value="">--Chọn danh mục--</option>
									@if (!empty($categories))
										@foreach($categories as $key => $category)
											@if (empty($category->cats->count()))
												<option value="{{$category->id}}">{{$category->name}}</option>
											@endif
										@endforeach
									@endif
								</select>
								<div class="block-input-cat_id block-error text-danger"></div>
							</div>
							<div class="form-group">
								<label for="status" class="form-control-label">Trạng thái</label>
								<select name="status" id="status" class="form-control">
									<option value="1">Xuất bản</option>
									<option value="2">Nháp</option>
								</select>
								<div class="block-input-status block-error text-danger"></div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="form-group">
				                 <div class="fileinput fileinput-new" data-provides="fileinput">
				                    <div class="fileinput-new thumbnail img-responsive prv-img-logo" data-url="{{asset('backend/assets/no-photo.png').'?v='.time()}}">
				                       <img src="{{asset('backend/assets/no-photo.png')}}" alt="" class="logo img-responsive" style="width: 100%;"/>
				                    </div>
				                    <div class="fileinput-preview fileinput-exists thumbnail">
				                    </div>
				                    <div>
				                      <input type="file" name="photo" accept="image/*" id="uploadImg" class="hide">
				                    </div>
				                    <div class="overlay-upload">
				                    	<i class="fal fa-camera-alt"></i>
				                    </div>
				                </div>
				                <div class="block-input-photo block-error text-danger"></div>
			                </div>
						</div>
						<div class="col-md-12">
							<label for="blog-tags" class="form-control-label">Tags</label>
							<input type="text" class="form-control tags-input" name="tags" id="blog-tags" data-role="tagsinput" placeholder="Nhập tag..." autocomplete="off">
							<div class="block-input-tags block-error text-danger"></div>
						</div>
						<div class="col-md-12">
							<label for="blog-description" class="form-control-label">Mô tả ngắn <span id="txt-description"></span></label>
							<textarea name="description" id="blog-description" class="form-control" cols="30" rows="5"></textarea>
							<div class="block-input-description block-error text-danger"></div>
						</div>
						<br>
						<div class="col-md-12">
							<label for="blog_content" class="form-control-label">Nội dung</label>
							<textarea name="content" id="blog_content" cols="30" rows="10"></textarea>
							<div class="block-input-content block-error text-danger"></div>
						</div>

						<div class="col-md-12">
							<label for="blog-keywords" class="form-control-label">Keywords</label>
							<input type="text" class="form-control" name="keywords" id="blog-keywords" data-role="tagsinput" placeholder="Nhập keywords..." autocomplete="off">
							<div class="block-input-keywords block-error text-danger"></div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<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')
<link href="{{asset('backend//assets/vendors/general/bootstrap-fileinput/bootstrap-fileinput.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('backend//assets/vendors/general/bootstrap-tagsinput/bootstrap-tagsinput.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('backend//assets/vendors/general/bootstrap-tagsinput/bootstrap-tagsinput-typeahead.css')}}" rel="stylesheet" type="text/css" />
<script src="{{asset('backend/assets/vendors/general/bootstrap-fileinput/bootstrap-fileinput.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/vendors/general/bootstrap-tagsinput/bootstrap-tagsinput.min.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/vendors/general/typeahead/handlebars.min.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/vendors/general/typeahead/typeahead.bundle.min.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/vendors/general/typeahead/bootstrap3-typeahead.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/js/blog.js')}}" type="text/javascript"></script>
@endpush