@extends('layouts.app')

@section('content')
<div class="lg:col-span-2">
  <x-custom.card title="Blog Categories">
    <x-slot:header>
      <x-custom.button href="{{ route('blog-categories.create') }}">New Category</x-custom.button>
    </x-slot:header>

    <div class="custom-scrollbar max-w-full overflow-x-auto overflow-y-visible">
      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <form method="GET" class="flex items-center gap-3">
          <input type="text" name="q" value="{{ request('q') }}" placeholder="Search..."
            class="w-1/3 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" />
          <button class="bg-brand-500 hover:bg-brand-600 text-white px-3 py-2 rounded-lg">Filter</button>
        </form>
      </div>

      <x-custom.table :pagination="$categories">
        <x-slot:head>
          <tr>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Slug</th>
            <th class="px-4 py-3 text-right text-sm font-medium text-gray-600 dark:text-gray-300">Actions</th>
          </tr>
        </x-slot:head>
        <x-slot:body>
          @forelse($categories as $category)
            <tr>
              <td class="px-4 py-3">{{ $category->name }}</td>
              <td class="px-4 py-3 text-gray-500">{{ $category->slug }}</td>
              <td class="px-4 py-3">
                <div class="flex items-center gap-2">
                  <x-custom.button href="{{ route('blog-categories.edit', $category) }}">
                    <i class="fa fa-pencil"></i>
                  </x-custom.button>
                  <form method="POST" action="{{ route('blog-categories.delete', $category) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                    @csrf
                    <x-custom.button type="submit" btntype="btn-danger">
                      <i class="fa fa-trash"></i>
                    </x-custom.button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr><td class="px-4 py-6 text-center text-gray-500" colspan="3">No categories yet.</td></tr>
          @endforelse
        </x-slot:body>
      </x-custom.table>
    </div>
  </x-custom.card>
</div>
@endsection