@extends('admin.layouts.admin')

@section('title', 'Categories - SIVILIMA Admin')
@section('breadcrumb_title', 'Categories')
@section('breadcrumb')
  <li class="breadcrumb-item active" aria-current="page">Categories</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{ session('success') }}</div>
@endif

<div class="row">
  <div class="col-12 col-lg-4">
    <div class="card">
      <div class="card-header"><h6 class="mb-0">Add Category</h6></div>
      <div class="card-body">
        <form method="POST" action="{{ route('admin.categories.store') }}">
          @csrf
          <div class="mb-3">
            <label class="form-label">Name *</label>
            <input type="text" name="name" class="form-control" required oninput="this.form.slug.value = this.value.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'')">
          </div>
          <div class="mb-3">
            <label class="form-label">Slug *</label>
            <input type="text" name="slug" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary">Add Category</button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-8">
    <div class="card">
      <div class="card-header"><h6 class="mb-0">All Categories</h6></div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered align-middle">
            <thead><tr><th>#</th><th>Name</th><th>Slug</th><th>Products</th><th width="80"></th></tr></thead>
            <tbody>
              @forelse($categories as $cat)
              <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $cat->name }}</td>
                <td><code>{{ $cat->slug }}</code></td>
                <td><span class="badge bg-info">{{ $cat->products_count }}</span></td>
                <td>
                  <form method="POST" action="{{ route('admin.categories.destroy', $cat) }}" onsubmit="return confirm('Delete this category?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                  </form>
                </td>
              </tr>
              @empty
              <tr><td colspan="5" class="text-center text-muted py-3">No categories.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection