@extends('backend.layouts.master')

@section('title', 'Article')

@section('scripts')

<!-- START Delete Confirmation -->
<script>
$('button[name="deleteButton"]').on('click', function(e){
	var $form=$(this).closest('form');
	e.preventDefault();
	$('#deleteModal').modal({ backdrop: 'static', keyboard: false })
	.one('click', '#deleteConfirm', function (e) {
		$form.trigger('submit');
	});
});
</script>
<!-- END Delete Confirmation -->

@endsection

@section('content')

	<!-- Breadcrumbs -->
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{ route('backend.index') }}">Backend</a></li>
		<li class="breadcrumb-item"><a href="{{ route('backend.article.index') }}">Article</a></li>
		<li class="breadcrumb-item active">{{ $article->subject }}</li>
	</ol>

	<h1>{{ $article->subject }}</h1>

	<div class="row">
		<div class="col-md-6">
			<div class="card mb-3">
				<div class="card-header"><i class="fa fa-list"></i> Details</div>
				<div class="card-body">
					<dl class="row">
						<dt class="col-sm-3">ID</dt>
						<dd class="col-sm-9">{{ $article->id }}</dd>
						<dt class="col-sm-3">Name</dt>
						<dd class="col-sm-9">{{ $article->subject }}</dd>
						<dt class="col-sm-3">Status</dt>
						<dd class="col-sm-9">{{ $article->status->name }}</dd>
						<dt class="col-sm-3">Slug</dt>
						<dd class="col-sm-9">{{ $article->slug }}</dd>
						<dt class="col-sm-3">Category</dt>
						<dd class="col-sm-9">{{ $article->category->name }}</dd>
						<dt class="col-sm-3">Author</dt>
						<dd class="col-sm-9">{{ $article->user->name }}</dd>
						<dt class="col-sm-3">Created</dt>
						<dd class="col-sm-9">{{ $article->created_at->diffForHumans() }}</dd>
						<dt class="col-sm-3">Last Updated</dt>
						<dd class="col-sm-9">{{ $article->updated_at->diffForHumans() }}</dd>
						<dt class="col-sm-3">Actions</dt>
						<dd class="col-sm-9">
							<form method="post" id="deleteForm" action="{{ route('backend.article.destroy', $article->id) }}">
								<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.article.edit', $article->id) }}"><i class="fas fa-edit"></i> Edit</a> 
							
								{!! csrf_field() !!} 
								{!! method_field('delete') !!}

								<button class="btn btn-sm btn-danger" title="Delete" id="deleteButton" name="deleteButton" type="submit"><i class="fas fa-trash"></i> Delete</button>
							</form>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card mb-3">
				<div class="card-header"><i class="fa fa-image"></i> Image</div>
				<div class="card-body">
					<img src="{{ $article->image_full_url }}" class="img-fluid img-thumbnail" alt="{{ $article->subject }}">
				</div>
			</div>
		</div>
	</div>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-text"></i> Body</div>
		<div class="card-body">
			<p>{!! nl2br(e($article->body)) !!}</p>
		</div>
	</div>

	<!-- START Delete Confirmation Modal -->
	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					Please confirm you would like to delete the selected resourse.
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-danger" id="deleteConfirm">Delete</button>
				</div>
			</div>
		</div>
	</div>
	<!-- END Delete Confirmation Modal -->

@endsection