@extends('layouts.app')

@section('content')

<div class="content-header">
	<p class="title">Add New Attribute</p>
	<ul>
		<li><a href="{{ route('attributes.index') }}">{{ __('List') }}</a></li>
	</ul>
</div>

<div class="content">
	<form method="POST" action="{{ route('attributes.store') }}">
		@csrf
		<table class="table table-borderless">
			<tbody>
				<tr>
					<th class="bg-light" width="50%"><label for="name">Attribute Name</label></th>
					<th class="bg-light" width="50%"><label for="slug">Slug</label></th>
				</tr>
				<tr>
					<td>
						<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
						@error('name')
						<div class="invalid-feedback">{{ $message }}</div>
						@enderror
					</td>
					<td>
						<input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug') }}" required>
						@error('slug')
						<div class="invalid-feedback">{{ $message }}</div>
						@enderror
					</td>
				</tr>
			</tbody>
		</table>
		<button type="submit" class="btn btn-primary mt-2" style="float: right;">Save</button>
		<a href="{{ route('attributes.index') }}" class="btn btn-secondary mt-2" style="float: right; margin-right: 10px;">Cancel</a>
	</form>
</div>

<script>
	document.getElementById('name').addEventListener('input', function() {
		const name = this.value;
		const slug = name.toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
		document.getElementById('slug').value = slug;
	});
</script>

@endsection