@extends('layouts.app')

@section('content')

<nav area-label="breadcrumb mt-3">

	<ol class="breadcrumb">
		<a href="{{ route('home') }}" class="text-dectoration-none mr-3">
			<li class="breadcrumb-item">Home</li>
		</a>
		<li class="breadcrumb-item active">Categories</li>
	</ol>
	
</nav>


<div class="row productBox">
		<div class="col-12 productsTitle">
			<h2 class="h2">CATEGORIES</h2>
			<div class="button">
				<a href="{{ route('categories.create') }}" class="btn btn-custom gray m-0"><i class="fa-solid fa-plus"></i>Add Category</a>				
			</div>
		</div>
		<div class="col-12 product-table table-responsive">
			<table class="table" cellpedding="0" cellspacing="0">
				<thead>
					<tr>
						<th>S. No</th>
						<th>Category Name</th>
						<th>Slug</th>
						<th>Edit</th>
						<th>Delete</th>
					</tr>
				</thead>
				<tbody>
				@foreach($categories as $index => $cat)
					<tr>
						<td>{{ $index+1 }}</td>
						<td>{{ $cat->name }}</td>
						<td>{{ $cat->slug }}</td>
						<td><a href="{{ route('categories.edit', $cat->slug) }}" class="mr-3"><i class="fa-solid fa-pencil"></i></a></td>
						<td>
						<form action="{{ route('categories.destroy', $cat->slug) }}" method="post">
							@csrf
							@method('DELETE')
							<button type="submit" class="btn btn-primary custom-button primary-color">Delete</button>
						</form>
					</td>
					</tr>
				@endforeach
				</tbody>
			</table>
		</div>
	</div>




<!--
<div class="card">
	<div class="card-header d-flex justify-content-between">
		<span>Categories</span>
		<a href="{{ route('categories.create') }}" class="btn btn-dark">Add Category</a>
	</div>
	<div class="card-body">
		<table class="table table-bordered table-dark">
			<thead>
				<th>#</th>
				<th>Category Name</th>
				<th>Slug</th>
				<th>Edit</th>
				<th>Delete</th>
			</thead>
			<tbody>
				@foreach($categories as $index => $cat)
				<tr>
					<td>{{ $index+1 }}</td>
					<td>{{ $cat->name }}</td>
					<td>{{ $cat->slug }}</td>
					<td><a href="{{ route('categories.edit', $cat->slug) }}" class="btn btn-primary btn-sm">Edit</a></td>
					<td>
						<form action="{{ route('categories.destroy', $cat->slug) }}" method="post">
							@csrf
							@method('DELETE')
							<button type="submit" class="btn btn-danger btn-sm">Delete</button>
						</form>
					</td>
				</tr>
				@endforeach
			</tbody>
		</table>
	</div>
</div> -->





@endsection