@extends('layouts.admin_master')

@section('title', 'New option')

@section('page-title')
	<h1 class="page-title">New Option</h1>
	<a href="{{ route('admin.options.index') }}" class="btn btn-outline-success ml-auto">Options</a>
@endsection

@section('content')
	<div class="card">
		<div class="card-status bg-blue"></div>
		<div class="card-header">
			<h3 class="card-title">Add New Option</h3>
		</div>
		<form method="post" action="{{ route('admin.options.store') }}">
			<div class="card-body">
				@csrf
				<div class="form-group">
					<label class="form-label">Option Name</label>
					<input type="text" required name="name" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Option Name">
					@if ($errors->has('name'))
						<div class="invalid-feedback">{{ $errors->first('name') }}</div>
					@endif
				</div>
				<br>
				<h3 class="border-bottom-gray">Attributes <button id="addItem" class="btn add-more btn-primary float-right" type="button"><i class="fe fe-plus"></i></button></h3>
				<div id="option-attributes">
					<div class="row">
						<div class="col-md-11">
							<div class="form-group">
								<label class="form-label">Attribute name</label>
								<input type="text" name="attributes[]" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Attribute Name" required />
							</div>
						</div>
						<div class="col-md-1">
							<div class="form-group">
								<button style="margin-top: 27px;" type="button" class="deleteItem btn btn-danger btn-block"><i class="fe fe-trash"></i></button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card-footer text-right">
				<a href="javascript:void(0)" class="btn btn-warning ml-auto">Cancel</a>
				<button type="submit" class="btn btn-primary ml-auto">Save</button>
			</div>
		</form>
	</div>
@endsection

@section('scriptes')
	<script type="text/javascript">
		$(document).ready(function() {
			// when the Add Field button is clicked
			$("#addItem").click(function(e) {
				// Append a new row of code to the "#items" div
				$("#option-attributes").append(
					`<div class="row">
						<div class="col-md-11">
							<div class="form-group">
								<label class="form-label">Attribute name</label>
								<input type="text" name="attributes[]" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Attribute Name" required />
							</div>
						</div>
						<div class="col-md-1">
							<div class="form-group">
								<button style="margin-top: 27px;" type="button" class="deleteItem btn btn-danger btn-block"><i class="fe fe-trash"></i></button>
							</div>
						</div>
					</div>`
				);
			});

			$('body').on("click", ".deleteItem", function(e) {
				$(this).parent().parent().parent().remove();
			});
		});
	</script>
@endsection