@extends('admin.layouts.admin')

@section('title', $category->exists ? 'Edit Category' : 'New Category')

@section('content')

    <h1 class="text-lg font-semibold text-brand-ink lg:text-2xl lg:font-extrabold">{{ $category->exists ? 'Edit Category' : 'New Category' }}</h1>

    <form method="POST"
          action="{{ $category->exists ? route('admin.categories.update', $category) : route('admin.categories.store') }}"
          enctype="multipart/form-data" class="mt-8 space-y-8">
        @csrf
        @if ($category->exists) @method('PUT') @endif

        <div class="card border border-brand-green-200 p-6" data-autotranslate-group>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-brand-ink/65 lg:text-sm lg:font-bold">Name</h2>
                <x-autotranslate-button label="Auto-translate name" />
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach (config('site.locales') as $code => $meta)
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">
                            {{ $meta['name_en'] }} ({{ $meta['name'] }}) @if ($code === 'kn') <span class="text-accent-liver">*</span> @endif
                        </label>
                        <input type="text" name="name[{{ $code }}]" data-locale="{{ $code }}"
                               value="{{ old('name.'.$code, $category->getRawTranslations('name')[$code] ?? '') }}"
                               {{ $code === 'kn' ? 'required' : '' }}
                               class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                    </div>
                @endforeach
            </div>
            @error('name.kn') <p class="mt-2 text-xs text-accent-liver">{{ $message }}</p> @enderror
        </div>

        <div class="card border border-brand-green-200 p-6" data-autotranslate-group>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-brand-ink/65 lg:text-sm lg:font-bold">Description (optional)</h2>
                <x-autotranslate-button label="Auto-translate description" />
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach (config('site.locales') as $code => $meta)
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ $meta['name_en'] }}</label>
                        <textarea name="description[{{ $code }}]" rows="2" data-locale="{{ $code }}"
                                  class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">{{ old('description.'.$code, $category->getRawTranslations('description')[$code] ?? '') }}</textarea>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card border border-brand-green-200 grid grid-cols-1 gap-6 p-6 sm:grid-cols-2">
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Accent Colour</label>
                <div class="flex items-center gap-3">
                    <input type="color" name="color" value="{{ old('color', $category->color ?: '#0B5A2E') }}" class="h-10 w-14 rounded-lg border border-brand-green-100">
                    <span class="text-xs text-brand-ink/65">Used for badges on the category card.</span>
                </div>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order ?? 0) }}"
                       class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Cover Image</label>
                <input type="file" name="image" accept="image/*" class="w-full text-sm">
                @if ($category->image)
                    <img src="{{ $category->imageUrl() }}" alt="" class="mt-3 h-24 w-24 rounded-xl object-cover">
                @endif
            </div>
            <label class="mt-6 flex items-center gap-2 text-sm font-semibold text-brand-ink">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $category->is_active ?? true)) class="rounded border-brand-green-100">
                Visible on the website
            </label>
        </div>

        <div class="flex gap-3">
            <button type="submit" class="btn-primary">Save Category</button>
            <a href="{{ route('admin.categories.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>

@endsection