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

@section('content')
<div class="bg-white rounded-xl border border-gray-100 p-5 mb-6">
    <h2 class="font-semibold mb-4">Add Category</h2>
    <form method="POST" action="{{ route('admin.categories.store') }}" class="flex gap-3 items-end flex-wrap">
        @csrf
        <div>
            <label class="text-xs text-gray-500">Name</label>
            <input name="name" required class="block border border-gray-200 rounded-lg px-3 py-2 text-sm w-56">
        </div>
        <div>
            <label class="text-xs text-gray-500">Icon (emoji)</label>
            <input name="icon" maxlength="10" class="block border border-gray-200 rounded-lg px-3 py-2 text-sm w-24">
        </div>
        <div>
            <label class="text-xs text-gray-500">Sort Order</label>
            <input name="sort_order" type="number" class="block border border-gray-200 rounded-lg px-3 py-2 text-sm w-24">
        </div>
        <button class="bg-orange-500 text-white rounded-lg px-4 py-2 text-sm font-medium">Add</button>
    </form>
</div>

<div class="bg-white rounded-xl border border-gray-100 p-5">
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-500 border-b border-gray-100">
                <th class="py-2">Icon</th><th>Name</th><th>Products</th><th>Active</th><th>Sort</th><th></th>
            </tr>
        </thead>
        <tbody>
        @foreach ($categories as $cat)
            <tr class="border-b border-gray-50 last:border-0">
                <form method="POST" action="{{ route('admin.categories.update', $cat) }}">
                @csrf @method('PUT')
                <td class="py-2 text-lg">{{ $cat->icon }}</td>
                <td><input name="name" value="{{ $cat->name }}" class="border border-gray-200 rounded-lg px-2 py-1 text-sm w-40"></td>
                <td>{{ $cat->products_count }}</td>
                <td><input type="checkbox" name="is_active" value="1" {{ $cat->is_active ? 'checked' : '' }}></td>
                <td><input name="sort_order" type="number" value="{{ $cat->sort_order }}" class="border border-gray-200 rounded-lg px-2 py-1 text-sm w-16"></td>
                <td class="flex gap-2">
                    <button class="text-orange-600 text-xs">Save</button>
                </td>
                </form>
                <td>
                    <form method="POST" action="{{ route('admin.categories.destroy', $cat) }}" onsubmit="return confirm('Delete this category?')">
                        @csrf @method('DELETE')
                        <button class="text-red-500 text-xs">Delete</button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endsection