@extends('layouts.app')

@section('title', __('app.categories'))

@section('content')
<div x-data="{ modalOpen: false, editing: null }">

    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold">{{ __('app.categories') }}</h2>
        @can('manage', App\Models\Category::class)
            <button @click="editing = null; modalOpen = true" class="bg-slate-900 text-white text-sm rounded-lg px-4 py-2 hover:bg-slate-800">
                + {{ __('app.add') }}
            </button>
        @endcan
    </div>

    @if ($errors->any())
        <div class="mb-4 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-3">
            @foreach ($errors->all() as $error) <p>{{ $error }}</p> @endforeach
        </div>
    @endif

    <div class="bg-white rounded-xl border overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="text-left px-4 py-3">{{ __('app.name_bn') }}</th>
                    <th class="text-left px-4 py-3">{{ __('app.parent_category') }}</th>
                    <th class="text-left px-4 py-3">{{ __('app.products') }}</th>
                    <th class="text-left px-4 py-3">{{ __('app.status') }}</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse ($categories as $category)
                    <tr>
                        <td class="px-4 py-3">{{ $category->name_bn }} <span class="text-gray-400">({{ $category->name_en }})</span></td>
                        <td class="px-4 py-3">{{ $category->parent?->name_bn ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $category->products_count }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 rounded-full text-xs {{ $category->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ $category->is_active ? __('app.active') : __('app.inactive') }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right space-x-2">
                            @can('manage', App\Models\Category::class)
                                <button @click='editing = @json($category); modalOpen = true' class="text-blue-600 hover:underline">{{ __('app.edit') }}</button>
                                <form method="POST" action="{{ route('categories.destroy', $category) }}" class="inline" onsubmit="return confirm('{{ __('app.delete') }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-red-600 hover:underline">{{ __('app.delete') }}</button>
                                </form>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">{{ __('app.no_results') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $categories->links() }}</div>

    {{-- Create/Edit modal --}}
    <div x-show="modalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40">
        <div @click.outside="modalOpen = false" class="bg-white rounded-xl w-full max-w-md p-6">
            <h3 class="font-semibold mb-4" x-text="editing ? '{{ __('app.edit') }}' : '{{ __('app.add') }}'"></h3>

            <form method="POST" x-init="$el.action = editing ? `/categories/${editing.id}` : '{{ route('categories.store') }}'">
                @csrf
                <template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">{{ __('app.name_bn') }}</label>
                        <input type="text" name="name_bn" x-bind:value="editing?.name_bn" required class="w-full rounded-lg border-gray-300 text-sm px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">{{ __('app.name_en') }}</label>
                        <input type="text" name="name_en" x-bind:value="editing?.name_en" required class="w-full rounded-lg border-gray-300 text-sm px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">{{ __('app.parent_category') }}</label>
                        <select name="parent_id" class="w-full rounded-lg border-gray-300 text-sm px-3 py-2">
                            <option value="">—</option>
                            @foreach ($categories as $c)
                                <option value="{{ $c->id }}" x-bind:selected="editing?.parent_id === {{ $c->id }}">{{ $c->name_bn }}</option>
                            @endforeach
                        </select>
                    </div>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="checkbox" name="is_active" value="1" x-bind:checked="editing ? editing.is_active : true" class="rounded">
                        {{ __('app.active') }}
                    </label>
                </div>

                <div class="mt-6 flex justify-end gap-2">
                    <button type="button" @click="modalOpen = false" class="px-4 py-2 text-sm rounded-lg border">বাতিল</button>
                    <button type="submit" class="px-4 py-2 text-sm rounded-lg bg-slate-900 text-white">{{ __('app.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection