@extends('backend.layouts.master')

@section('title', 'Attribute List')

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

<!-- START DataTables -->
<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>
<script type="text/javascript">
	$('#dataTable').dataTable({
		"order": [[1, 'asc']],
		"bSort": false.
		"columnDefs": [ { "targets": [5], "orderable": false } ],
		"pageLength": 50
	});
</script>
<!-- END Datatables -->

<!-- START Options field -->
<script>
	$('#type_id').on('change',function(){
	    var selection = $(this).val();
	    switch(selection){
	    case "3":
	    $("#list").show()
	    case "4":
	    $("#list").show()
	   break;
	    default:
	    $("#list").hide()
	    }
	});
</script>
<!-- END Options field -->
@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">List</li>
	</ol>

	<h1>Attributes<span class="float-right"><a class="btn btn-primary" href="{{ route('backend.product.attribute.create') }}">Create Attribute</a></span></h1>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-plus"></i> Quick Create</div>
		<div class="card-body">
			<form method="post" action="{{ route('backend.product.attribute.store') }}">

				{{ csrf_field() }}

				<div class="form-row">
					<div class="form-group col-md-4">
						<label for="name"">Name</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 col-md-4">
						<label for="type_id">Type</label>
						<select class="form-control {{ $errors->first('type_id', 'is-invalid') }}" id="type_id" name="type_id">
							<option disabled selected>Select Attribute Type</option>

							@foreach(App\Models\Product\Attribute\Type::all() as $type)

								<option value="{{ $type->id }}">{{ $type->name }}</option>

							@endforeach

						</select>
						<div class="invalid-feedback">{{ $errors->first('type_id') }}</div>
					</div>
					<div class="form-group col-md-4" id="list" style="display:none;">
						<label for="type_id">Options</label>
						<textarea class="form-control" id="values" name="values" rows="4" placeholder="Possible Values"></textarea>
						<small class="form-text text-muted">Create a new line for each possile value.</small>
					</div>
					<div class="form-group col-md-4">
						<label for="group_id">Group</label>
						<select class="form-control {{ $errors->first('group_id', 'is-invalid') }}" id="group_id" name="group_id">
							<option disabled selected>Select Attribute Group</option>

							@foreach(App\Models\Product\Category::orderBy('sort_order')->get() as $category)

								<optgroup label="{{ $category->name }}">

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

										<option value="{{ $group->id }}">{{ $group->name }}</option>

									@endforeach

								</optgroup>

							@endforeach

						</select>
						<div class="invalid-feedback">{{ $errors->first('group_id') }}</div>
					</div>
					<div class="form-group col-md-4">
						<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') }}">
						<div class="invalid-feedback">{{ $errors->first('sort_order') }}</div>
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-md-12">
						<button type="submit" class="btn btn-primary">Create Attribute</button> <button type="reset" class="btn btn-default">Reset Form</button>
					</div>
				</div>
			</form>
		</div>
	</div>

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

		<div class="card mb-3">
			<div class="card-header"><i class="fa fa-table"></i> {{ $category->name }} Attribute Table</div>
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-hover" id="dataTable" cellspacing="0">
						<thead>
							<tr>
								<th>ID</th>
								<th>Name</th>
								<th>Sort Order</th>
								<th>Type</th>
								<th>Last Updated</th>
								<th width="250" class="text-right">Actions</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 class="text-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> 
									</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->updated_at->diffForHumans() }}</td>
										<td class="text-right">
											<form method="post" id="deleteForm" action="{{ route('backend.product.attribute.destroy', $attribute->id) }}">
												<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> 
											
												{!! 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>
										</td>
									</tr>

								@endforeach

							@endforeach

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

	@endforeach

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