@extends('backend.layouts.master')

@section('title', 'Category')

@section('styles')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" integrity="sha256-F+DaKAClQut87heMIC6oThARMuWne8+WzxIDT7jXuPA=" crossorigin="anonymous" />

@endsection

@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 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js" integrity="sha256-t5ZQTZsbQi8NxszC10CseKjJ5QeMw5NINtOXQrESGSU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js" integrity="sha256-hJ44ymhBmRPJKIaKRf3DSX5uiFEZ9xB/qx8cNbJvIMU=" crossorigin="anonymous"></script>

@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.product.index') }}">Product</a></li>
		<li class="breadcrumb-item"><a href="{{ route('backend.product.category.index') }}">Category</a></li>
		<li class="breadcrumb-item active">{{ $category->name }}</li>
	</ol>

	<h1>{{ $category->name }}</h1>

	<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">{{ $category->id }}</dd>
				<dt class="col-sm-3">Name</dt>
				<dd class="col-sm-9">{{ $category->name }}</dd>
				<dt class="col-sm-3">Slug</dt>
				<dd class="col-sm-9">{{ $category->slug }}</dd>
				<dt class="col-sm-3">Sort Order</dt>
				<dd class="col-sm-9">{{ $category->sort_order }}</dd>
				<dt class="col-sm-3">Created</dt>
				<dd class="col-sm-9">{{ $category->created_at->diffForHumans() }}</dd>
				<dt class="col-sm-3">Last Updated</dt>
				<dd class="col-sm-9">{{ $category->updated_at->diffForHumans() }}</dd>
				<dt class="col-sm-3">Actions</dt>
				<dd class="col-sm-9">
					<form method="post" id="deleteForm" action="{{ route('backend.product.category.destroy', $category->id) }}">
						<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.product.category.edit', $category->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 class="card mb-3">
		<div class="card-header"><i class="fa fa-table"></i> Attributes</div>
		<div class="card-body">
			<table class="table table-hover" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Sort Order</th>
						<th>Type</th>
						<th>Created</th>
						<th><span class="pull-right">Actions</span></th>
					</tr>
				</thead>
				<tbody>

					@foreach($category->groups->sortBy('sort_order') as $group)

						<tr>
							<td></td>
							<td><strong>{{ $group->name }}</strong></td>
							<td></td>
							<td></td>
							<td></td>
							<td>
								<span class="pull-right">
									<a class="btn btn-sm btn-success" title="Show" href="{{ route('backend.product.attribute.group.show', $group->id) }}"><i class="fas fa-eye"></i></i></a> 
									<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.product.attribute.group.edit', $group->id) }}"><i class="fas fa-edit"></i></a> 
								</span>
							</td>

						</tr>

						@foreach($group->attributes->sortBy('sort_order') as $attribute)

							<tr>
								<td>{{ $attribute->id }}</td>
								<td><a href="{{ route('backend.product.attribute.show', $attribute->id) }}">{{ $attribute->name }}</a></td>
								<td>{{ $attribute->sort_order }}</td>
								<td>{{ $attribute->type->name }}</td>
								<td>{{ $attribute->created_at->diffForHumans() }}</td>
								<td>
									<span class="pull-right">
										<a class="btn btn-sm btn-success" title="Show" href="{{ route('backend.product.attribute.show', $attribute->id) }}"><i class="fas fa-eye"></i></i></a> 
										<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.product.attribute.edit', $attribute->id) }}"><i class="fas fa-edit"></i></a> 
									</span>
								</td>
							</tr>

						@endforeach

					@endforeach

				</tbody>
			</table>
		</div>
	</div>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-table"></i> Products</div>
		<div class="card-body">
			<table class="table table-hover" id="dataTable" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Slug</th>
						<th>Created</th>
						<th><span class="pull-right">Actions</span></th>
					</tr>
				</thead>
				<tbody>

					@foreach($category->products as $product)

						<tr>
							<td>{{ $product->id }}</td>
							<td><a href="{{ route('backend.product.show', $product->id) }}">{{ $product->name }}</a></td>
							<td>{{ $product->slug }}</td>
							<td>{{ $product->created_at->diffForHumans() }}</td>
							<td>
								<span class="pull-right">
									<a class="btn btn-sm btn-success" title="Show" href="{{ route('backend.product.show', $product->id) }}"><i class="fas fa-eye"></i></i></a> 
									<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.product.edit', $product->id) }}"><i class="fas fa-edit"></i></a> 
								</span>
							</td>
						</tr>

					@endforeach

				</tbody>
			</table>
		</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