@extends('admin.layouts.admin')

@section('title', 'Categories')

@section('content')

    <div class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-lg font-semibold text-brand-ink lg:text-2xl lg:font-extrabold">Categories</h1>
            <p class="mt-1 text-brand-ink/65">Product categories shown on the website.</p>
        </div>
        <a href="{{ route('admin.categories.create') }}" class="btn-primary w-full sm:w-auto">+ New Category</a>
    </div>

    <div class="mt-8 overflow-x-auto rounded-2xl border border-brand-green-200 bg-white shadow-card">
        <table class="min-w-full divide-y divide-brand-green-200">
            <thead class="border-b border-brand-green-200 bg-brand-green-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Name (Kannada)</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Products</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-green-200">
                @forelse ($categories as $category)
                    <tr>
                        <td class="px-5 py-3 text-sm font-semibold text-brand-ink">
                            <span class="mr-2 inline-block h-2.5 w-2.5 rounded-full align-middle" style="background-color: {{ $category->color }}"></span>
                            {{ $category->getTranslation('name', 'kn') }}
                        </td>
                        <td class="px-5 py-3 text-sm text-brand-ink/65">{{ $category->products_count }}</td>
                        <td class="px-5 py-3">
                            <span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $category->is_active ? 'bg-brand-green-100 text-brand-green-800' : 'bg-gray-100 text-gray-500' }}">
                                {{ $category->is_active ? 'Active' : 'Hidden' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-right text-sm">
                            <a href="{{ route('admin.categories.edit', $category) }}" class="font-semibold text-brand-green-800 hover:underline">Edit</a>
                            <form method="POST" action="{{ route('admin.categories.destroy', $category) }}" class="ml-3 inline" onsubmit="return confirm('Delete this category and all its products?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="font-semibold text-accent-liver hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-5 py-6 text-center text-sm text-brand-ink/65">No categories yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">{{ $categories->links() }}</div>

@endsection