@extends('layouts.app')
@section('title', 'Categories')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Categories</h1>
            <p class="text-sm text-ink-muted">Create categories for your products and assign them to a department. Categories appear on the POS and product forms.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @include('components.data-transfer', ['type'=>'categories','label'=>'Categories','exportPermission'=>'products.view','managePermission'=>'products.manage'])
            @can('products.manage')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-category')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add category</button>
        @endcan
        </div>
    </div>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Category</th><th>Department</th><th>Parent</th><th>Kitchen station</th><th>Products</th><th></th></tr></thead>
            <tbody>
            @forelse ($categories as $category)
                <tr>
                    <td class="font-medium">{{ $category->name }}</td>
                    <td>{{ $category->department?->name ?? '—' }}</td>
                    <td>{{ $category->parent?->name ?? '—' }}</td>
                    <td>{{ $category->kitchen_station ?: '—' }}</td>
                    <td>{{ $category->products_count }}</td>
                    <td class="text-right whitespace-nowrap">
                        @can('products.manage')
                        <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-category-{{ $category->id }}')">Edit</button>
                        <form method="POST" action="{{ route('inventory.categories.destroy', $category) }}" class="inline" onsubmit="return confirm('Delete {{ addslashes($category->name) }}?')">
                            @csrf @method('DELETE')
                            <button class="btn-ghost btn-sm text-danger">Delete</button>
                        </form>
                        @endcan
                    </td>
                </tr>

                <x-modal id="edit-category-{{ $category->id }}" title="Edit {{ $category->name }}">
                    <form method="POST" action="{{ route('inventory.categories.update', $category) }}" id="edit-category-{{ $category->id }}-form" class="space-y-4">
                        @csrf @method('PUT')
                        <div>
                            <label class="field-label">Department</label>
                            <select name="department_id" class="input" required>
                                @foreach ($departments as $department)
                                    <option value="{{ $department->id }}" @selected($category->department_id == $department->id)>{{ $department->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div><label class="field-label">Category name</label><input name="name" value="{{ $category->name }}" class="input" required></div>
                        <div>
                            <label class="field-label">Parent category</label>
                            <select name="parent_id" class="input">
                                <option value="">No parent</option>
                                @foreach ($parents as $parent)
                                    @if ($parent->id !== $category->id)
                                        <option value="{{ $parent->id }}" @selected($category->parent_id == $parent->id)>{{ $parent->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div><label class="field-label">Kitchen station</label><input name="kitchen_station" value="{{ $category->kitchen_station }}" class="input" placeholder="e.g. Main Kitchen, Grill, Bar"></div>
                        <div><label class="field-label">Sort order</label><input type="number" min="0" name="sort_order" value="{{ $category->sort_order }}" class="input"></div>
                    </form>
                    <x-slot:footer><button class="btn-secondary" x-on:click="open = false">Cancel</button><button form="edit-category-{{ $category->id }}-form" class="btn-primary">Save</button></x-slot:footer>
                </x-modal>
            @empty
                <tr><td colspan="6" class="text-center text-ink-muted py-8">No categories yet.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="add-category" title="Add category">
        <form method="POST" action="{{ route('inventory.categories.store') }}" id="add-category-form" class="space-y-4">
            @csrf
            <div>
                <label class="field-label">Department</label>
                <select name="department_id" class="input" required>
                    <option value="">Select department…</option>
                    @foreach ($departments as $department)
                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                    @endforeach
                </select>
            </div>
            <div><label class="field-label">Category name</label><input name="name" class="input" required placeholder="e.g. Main Meals, Soft Drinks, Beers"></div>
            <div>
                <label class="field-label">Parent category</label>
                <select name="parent_id" class="input">
                    <option value="">No parent</option>
                    @foreach ($parents as $parent)<option value="{{ $parent->id }}">{{ $parent->name }}</option>@endforeach
                </select>
            </div>
            <div><label class="field-label">Kitchen station</label><input name="kitchen_station" class="input" placeholder="Optional: Main Kitchen, Grill, Bar"></div>
            <div><label class="field-label">Sort order</label><input type="number" min="0" name="sort_order" value="0" class="input"></div>
        </form>
        <x-slot:footer><button class="btn-secondary" x-on:click="open = false">Cancel</button><button form="add-category-form" class="btn-primary">Add category</button></x-slot:footer>
    </x-modal>
</div>
@endsection