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

@section('content')
<div x-data="{ showForm: false, edit: null }" class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <div class="lg:col-span-2">
        <div class="mb-4 flex justify-end">
            <a href="{{ route('categories.import.form') }}" class="btn-secondary"><x-icon name="download" class="h-4 w-4"/>{{ __('Import') }}</a>
        </div>
        <div class="table-wrap">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="th">{{ __('Name') }}</th>
                        <th class="th">{{ __('Products') }}</th>
                        <th class="th">{{ __('Prescription') }}</th>
                        <th class="th"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($categories as $category)
                        <tr class="hover:bg-slate-50">
                            <td class="td font-medium">{{ $category->name }}</td>
                            <td class="td">{{ $category->products_count }}</td>
                            <td class="td">@if($category->requires_prescription)<span class="badge bg-purple-100 text-purple-700">Rx</span>@endif</td>
                            <td class="td text-right">
                                <div class="flex justify-end gap-2">
                                    <button @click="showForm = true; edit = {{ $category->toJson() }}" class="text-brand-600"><x-icon name="pencil" class="h-4 w-4"/></button>
                                    <form method="POST" action="{{ route('categories.destroy', $category) }}" onsubmit="return confirm('{{ __('Delete?') }}')">
                                        @csrf @method('DELETE')
                                        <button class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="td py-10 text-center text-slate-400">{{ __('No categories.') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $categories->links() }}</div>
    </div>

    <div class="card">
        <h2 class="font-semibold text-slate-800" x-text="edit ? '{{ __('Edit category') }}' : '{{ __('New category') }}'"></h2>
        <form method="POST" :action="edit ? '/app/categories/' + edit.id : '{{ route('categories.store') }}'" class="mt-4 space-y-4">
            @csrf
            <template x-if="edit"><input type="hidden" name="_method" value="PUT"></template>
            <div>
                <label class="label">{{ __('Name') }}</label>
                <input type="text" name="name" :value="edit?.name" required class="input">
            </div>
            <div>
                <label class="label">{{ __('Description') }}</label>
                <textarea name="description" rows="2" class="input" x-text="edit?.description"></textarea>
            </div>
            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" name="requires_prescription" value="1" :checked="edit?.requires_prescription" class="rounded border-slate-300 text-brand-600">
                {{ __('Requires prescription') }}
            </label>
            <div class="flex gap-2">
                <button class="btn-primary flex-1" x-text="edit ? '{{ __('Update') }}' : '{{ __('Create') }}'"></button>
                <button type="button" @click="edit = null" x-show="edit" class="btn-secondary">{{ __('New') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection