@extends('layouts.app')

@section('title', 'Categories')

@section('content')
<x-breadcrumb :items="[['label' => 'Categories']]" />

<x-page-header title="Categories" subtitle="Manage item categories for your organization.">
    <x-slot name="actions">
        <a href="{{ route('categories.create') }}" class="procure-btn-primary"><i class="fas fa-plus"></i> Add Category</a>
    </x-slot>
</x-page-header>

<div class="procure-filters">
    <form method="GET" action="{{ route('categories.index') }}" class="row align-items-end">
        <div class="col-md-6 mb-2">
            <label class="small text-muted">Search</label>
            <input type="text" name="search" class="form-control form-control-sm" value="{{ request('search') }}" style="border-radius:8px;">
        </div>
        <div class="col-md-3 mb-2">
            <label class="small text-muted">Status</label>
            <select name="status" class="form-control form-control-sm" style="border-radius:8px;">
                <option value="">All</option>
                <option value="active" @selected(request('status') === 'active')>Active</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
            </select>
        </div>
        <div class="col-md-3 mb-2">
            <button type="submit" class="procure-btn w-100"><i class="fas fa-filter"></i> Filter</button>
        </div>
    </form>
</div>

<div class="chart-card">
    <div class="chart-card-body" style="overflow-x:auto;">
        @if($categories->isEmpty())
            <x-empty-state icon="fas fa-tags" title="No categories" message="Create categories to classify catalog items."
                :action-url="route('categories.create')" action-label="Add Category" />
        @else
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Code</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($categories as $category)
                        <tr>
                            <td class="font-weight-bold">{{ $category->name }}</td>
                            <td>{{ $category->code ?? '—' }}</td>
                            <td><x-status-badge :status="$category->status" /></td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('categories.edit', $category) }}" class="procure-btn"><i class="fas fa-edit"></i></a>
                                <form action="{{ route('categories.destroy', $category) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="procure-btn text-danger" onclick="return confirm('Delete this category?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-3">{{ $categories->links() }}</div>
        @endif
    </div>
</div>
@endsection