@extends('backend.layouts.master')

@section('title', 'Attribute')

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

	<h1>{{ $attribute->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">{{ $attribute->id }} </dd>
				<dt class="col-sm-3">Name</dt>
				<dd class="col-sm-9">{{ $attribute->name }} </dd>
				<dt class="col-sm-3">Category</dt>
				<dd class="col-sm-9">{{ $attribute->group->category->name }} </dd>
				<dt class="col-sm-3">Group</dt>
				<dd class="col-sm-9">{{ $attribute->group->name }} </dd>
				<dt class="col-sm-3">Sort Order</dt>
				<dd class="col-sm-9">{{ $attribute->sort_order }} </dd>
				<dt class="col-sm-3">Type</dt>
				<dd class="col-sm-9">{{ $attribute->type->name }} </dd>
				<dt class="col-sm-3">Unit Before</dt>
				<dd class="col-sm-9">{{ $attribute->unit_before }} </dd>
				<dt class="col-sm-3">Unit After</dt>
				<dd class="col-sm-9">{{ $attribute->unit_after }} </dd>
				<dt class="col-sm-3">Default Value</dt>
				<dd class="col-sm-9">{{ $attribute->default_value }} </dd>
				<dt class="col-sm-3">Validation Rules</dt>
				<dd class="col-sm-9">{{ $attribute->validation }} </dd>
				<dt class="col-sm-3">Description</dt>
				<dd class="col-sm-9">{{ $attribute->description }} </dd>
				<dt class="col-sm-3">Created</dt>
				<dd class="col-sm-9">{{ $attribute->created_at->diffForHumans() }} </dd>
				<dt class="col-sm-3">Last Updated</dt>
				<dd class="col-sm-9">{{ $attribute->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.attribute.destroy', $attribute->id) }}">
						<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.product.attribute.edit', $attribute->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>

	@if($attribute->type_id == '3' || $attribute->type_id == '4')

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-table"></i> Options <span class="float-right"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createModal">Add Option</button></span></div>
		<div class="card-body">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Sort Order</th>
						<th>Created</th>
						<th><span class="pull-right">Actions</span></th>
					</tr>
				</thead>
				<tbody>

					@foreach($attribute->options->sortBy('sort_order') as $option)

						<tr>
							<td>{{ $option->id }}</td>
							<td>{{ $option->name }}</td>
							<td>{{ $option->sort_order }}</td>
							<td>{{ $option->created_at->diffForHumans() }}</td>
							<td>
								<span class="pull-right">
									<form method="post" id="deleteForm" action="{{ route('backend.product.attribute.option.destroy', $option->id) }}">
										<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#updateModal-{{ $option->id }}"><i class="fas fa-edit"></i></button>
									
										{!! 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></button>-->
									</form>
								</span>

								<!-- START Edit Modal -->
								<div class="modal fade" id="updateModal-{{ $option->id }}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
									<div class="modal-dialog" role="document">
										<form  method="post" action="{{ route('backend.product.attribute.option.update', $option->id) }}">

											{{ csrf_field() }}
											{!! method_field('patch') !!}

											<div class="modal-content">
												<div class="modal-header">
													<h5 class="modal-title" id="updateModalLabel">Edit Option</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="name"">Option</label>
														<input type="text" class="form-control {{ $errors->first('name', 'is-invalid') }}" id="name" name="name" value="{{ $option->name }}" required autofocus>
														<div class="invalid-feedback">{{ $errors->first('name') }}</div>
													</div>
													<div class="form-group">
														<label for="sort_order"">Sort Order</label>
														<input type="text" class="form-control {{ $errors->first('sort_order', 'is-invalid') }}" id="sort_order" name="sort_order" value="{{ $option->sort_order }}" required>
														<div class="invalid-feedback">{{ $errors->first('sort_order') }}</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-primary" id="createConfirm">Update</button>
												</div>
											</div>
										</form>
									</div>
								</div>
								<!-- END Edit Modal -->

							</td>
						</tr>

					@endforeach

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

	@endif

	<!-- START Create Modal -->
	<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<form  method="post" action="{{ route('backend.product.attribute.option.store') }}">

				{{ csrf_field() }}

				<input type="hidden" name="attribute_id" id="attribute_id" value="{{ $attribute->id }}">

				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="createModalLabel">Create Option</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="name"">Option</label>
							<input type="text" class="form-control {{ $errors->first('name', 'is-invalid') }}" id="name" name="name" value="{{ old('name') }}" required autofocus>
							<div class="invalid-feedback">{{ $errors->first('name') }}</div>
						</div>
						<div class="form-group">
							<label for="sort_order"">Sort Order</label>
							<input type="text" class="form-control {{ $errors->first('sort_order', 'is-invalid') }}" id="sort_order" name="sort_order" value="{{ old('sort_order') }}" required>
							<div class="invalid-feedback">{{ $errors->first('sort_order') }}</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-primary" id="createConfirm">Create</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<!-- END Create Modal -->

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