<x-app-layout>
    <x-slot name="header"><i class="bi bi-tags me-2"></i>{{ __('Item Categories') }}</x-slot>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">{{ __('Add New Category') }}</div>
                <div class="card-body">
                    <form action="{{ route('items.categories.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">{{ __('Category Name') }} <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="e.g. Spices" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('Bootstrap Icon Class') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i id="iconPreview" class="bi bi-tag"></i></span>
                                <input type="text" name="icon" id="iconInput" class="form-control" value="{{ old('icon', 'bi-tag') }}" placeholder="bi-tag">
                            </div>
                            <div class="form-text">
                                Browse icons at <a href="https://icons.getbootstrap.com" target="_blank">icons.getbootstrap.com</a>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary w-100"><i class="bi bi-plus-circle me-1"></i>{{ __('Add Category') }}</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header fw-bold d-flex justify-content-between">
                    <span>{{ __('All Categories') }}</span>
                    <a href="{{ route('items.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>{{ __('Back to Items') }}
                    </a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>{{ __('Icon') }}</th>
                                <th>{{ __('Category Name') }}</th>
                                <th class="text-center">{{ __('Items') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($categories as $cat)
                            <tr>
                                <td><i class="bi {{ $cat->icon }} fs-5 text-primary"></i></td>
                                <td><strong>{{ $cat->name }}</strong></td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $cat->items_count > 0 ? 'info text-dark' : 'secondary' }}">{{ $cat->items_count }}</span>
                                </td>
                                <td class="text-end">
                                    @if($cat->items_count == 0)
                                    <form method="POST" action="{{ route('items.categories.destroy', $cat) }}" class="d-inline" onsubmit="return confirm('{{ __('Delete category?') }}')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
                                    @else
                                    <span class="text-muted small">{{ __('In use') }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">{{ __('No categories yet.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('iconInput')?.addEventListener('input', function() {
            const preview = document.getElementById('iconPreview');
            preview.className = 'bi ' + this.value;
        });
    </script>
</x-app-layout>
