@extends('layouts.portal')

@section('page-title', __('Categories Management'))

@section('sidebar')
    @include('admin.partials.sidebar')
@endsection

@section('content')
<div class="mb-6 card max-w-2xl">
    <h2 class="mb-4 font-semibold">{{ __('Add Category') }}</h2>
    <form method="POST" action="{{ route('admin.categories.store') }}" class="grid gap-4 sm:grid-cols-2">
        @csrf
        <div class="sm:col-span-2">
            <label class="label" for="name">{{ __('Name') }}</label>
            <input type="text" id="name" name="name" required class="input-field" value="{{ old('name') }}">
        </div>
        <div>
            <label class="label" for="icon">{{ __('Icon') }}</label>
            <input type="text" id="icon" name="icon" class="input-field" placeholder="briefcase" value="{{ old('icon') }}">
        </div>
        <div>
            <label class="label" for="sort_order">{{ __('Sort Order') }}</label>
            <input type="number" id="sort_order" name="sort_order" class="input-field" value="{{ old('sort_order', 0) }}">
        </div>
        <div class="sm:col-span-2">
            <label class="label" for="description">{{ __('Description') }}</label>
            <textarea id="description" name="description" rows="2" class="input-field">{{ old('description') }}</textarea>
        </div>
        <div class="sm:col-span-2">
            <button type="submit" class="btn-primary !py-2 !px-4 text-sm">{{ __('Create Category') }}</button>
        </div>
    </form>
</div>

<div class="card overflow-x-auto">
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b text-left text-gray-500">
                <th class="pb-3 pr-4">{{ __('Name') }}</th>
                <th class="pb-3 pr-4">{{ __('Jobs') }}</th>
                <th class="pb-3 pr-4">{{ __('Sort') }}</th>
                <th class="pb-3 pr-4">{{ __('Status') }}</th>
                <th class="pb-3">{{ __('Actions') }}</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @foreach($categories as $category)
                <tr>
                    <td class="py-3 pr-4">
                        <form method="POST" action="{{ route('admin.categories.update', $category) }}" class="space-y-2">
                            @csrf @method('PUT')
                            <input type="text" name="name" value="{{ $category->name }}" class="input-field !py-1.5 text-sm" required>
                            <input type="text" name="icon" value="{{ $category->icon }}" class="input-field !py-1.5 text-sm" placeholder="{{ __('Icon') }}">
                    </td>
                    <td class="py-3 pr-4">{{ $category->jobs_count }}</td>
                    <td class="py-3 pr-4">
                            <input type="number" name="sort_order" value="{{ $category->sort_order }}" class="input-field !py-1.5 w-20 text-sm">
                    </td>
                    <td class="py-3 pr-4">
                            <label class="flex items-center gap-2 text-xs">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" name="is_active" value="1" @checked($category->is_active)> {{ __('Active') }}
                            </label>
                    </td>
                    <td class="py-3 space-x-2 whitespace-nowrap">
                            <button type="submit" class="text-brand-purple hover:underline">{{ __('Save') }}</button>
                        </form>
                        <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" class="inline"
                            onsubmit="return confirm('{{ __('Delete this category?') }}')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-600 hover:underline">{{ __('Delete') }}</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <div class="mt-4">{{ $categories->links() }}</div>
</div>
@endsection