@extends('layouts.admin')
@section('title', $category->exists ? $category->title : 'Add category')
@section('content')
@php
  $imageSelected = old('image_media_asset_id')
      ? \App\Models\MediaAsset::query()->with('variants')->find(old('image_media_asset_id'))
      : ($imageAsset ?? null);
@endphp

<form id="category-form" method="post" action="{{ $category->exists ? route('admin.categories.update', $category) : route('admin.categories.store') }}">
@csrf
@if($category->exists) @method('PUT') @endif

<x-admin.page
    :title="$category->exists ? $category->title : 'Add category'"
    subtitle="Hierarchy, media, product membership, navigation flags, and SEO for storefront taxonomy."
>
    <x-slot:actions>
        <a href="{{ route('admin.categories.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i> Back
        </a>
        <button type="submit" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i>
            {{ $category->exists ? 'Save category' : 'Create category' }}
        </button>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ $errors->first() }}
        </div>
    @endif

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div class="space-y-5">
            <x-admin.section title="Basics" hint="Title, URL handle, parent nesting, and merchandising copy.">
                <x-admin.field label="Title" name="title" required>
                    <input name="title" value="{{ old('title', $category->title) }}" required class="admin-input text-base font-medium" placeholder="Ring canvas">
                </x-admin.field>
                <x-admin.field label="Description" name="description" class="mt-4">
                    <textarea name="description" rows="5" class="admin-input" placeholder="Category story for PLP and navigation…">{{ old('description', $category->description) }}</textarea>
                </x-admin.field>
                <div class="mt-4 grid gap-4 sm:grid-cols-2">
                    <x-admin.field label="Handle" name="handle" help="Used in catalogue paths and admin search.">
                        <input name="handle" value="{{ old('handle', $category->handle) }}" class="admin-input font-mono text-xs" placeholder="auto-from-title">
                    </x-admin.field>
                    <x-admin.field label="Parent category" name="parent_id">
                        <select name="parent_id" class="admin-input">
                            <option value="">— Root category —</option>
                            @foreach($parentOptions as $opt)
                                <option value="{{ $opt['id'] }}" @selected((string) old('parent_id', $category->parent_id) === (string) $opt['id'])>{{ $opt['label'] }}</option>
                            @endforeach
                        </select>
                    </x-admin.field>
                </div>
            </x-admin.section>

            <x-admin.section title="Category image" hint="Chosen from the Media gallery — used on navigation tiles and PLP headers.">
                <x-admin.media-field
                    name="image_media_asset_id"
                    mode="single"
                    label="Hero / tile image"
                    help="Select one image from Media gallery."
                    :selected="$imageSelected ? [$imageSelected] : []"
                    :max="1"
                />
            </x-admin.section>

            <x-admin.section title="Products in this category" hint="Tick products to include. Order follows the list for manual sort.">
                <div class="mb-3 flex flex-wrap items-center justify-between gap-2 text-xs text-[#6d7175]">
                    <span>{{ $category->exists ? $category->products->count() : 0 }} currently assigned</span>
                    <x-admin.field label="Product sort" name="product_sort" class="!mb-0">
                        <select name="product_sort" class="admin-input w-48">
                            @foreach(['manual' => 'Manual', 'title_asc' => 'Title A–Z', 'title_desc' => 'Title Z–A', 'newest' => 'Newest', 'price_asc' => 'Price ↑', 'price_desc' => 'Price ↓'] as $val => $label)
                                <option value="{{ $val }}" @selected(old('product_sort', $category->product_sort ?: 'manual') === $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </x-admin.field>
                </div>
                <div class="max-h-96 overflow-y-auto rounded-xl border border-[var(--color-admin-border)]">
                    @forelse($products as $product)
                        <label class="flex items-center gap-3 border-b border-[var(--color-admin-border)] px-3 py-2.5 text-sm last:border-0 hover:bg-[#fafbfb]">
                            <input
                                type="checkbox"
                                name="product_ids[]"
                                value="{{ $product->id }}"
                                @checked(collect(old('product_ids', $category->exists ? $category->products->pluck('id')->all() : []))->contains($product->id))
                            >
                            <span class="min-w-0 flex-1 truncate font-medium">{{ $product->title }}</span>
                            <x-admin.badge :tone="$product->status === 'active' ? 'success' : 'muted'">{{ $product->status }}</x-admin.badge>
                        </label>
                    @empty
                        <p class="p-6 text-sm text-[#8c9196]">No products in catalogue yet.</p>
                    @endforelse
                </div>
                @if($category->exists)
                    <p class="admin-help mt-2">Saving syncs membership. Unchecking removes a product from this category only.</p>
                @endif
            </x-admin.section>

            <x-admin.section title="Search engine listing">
                <div class="mb-4 rounded-lg border border-[var(--color-admin-border)] bg-[#fafbfb] p-4 text-sm">
                    <div class="text-[#1a0dab]">{{ old('seo_title', $category->seo_title ?: $category->title ?: 'Category title') }}</div>
                    <div class="text-xs text-[#006621]">{{ url('/collections/'.(old('handle', $category->handle) ?: 'category-handle')) }}</div>
                    <div class="mt-1 text-[#4d5156]">{{ old('seo_description', $category->seo_description ?: \Illuminate\Support\Str::limit(strip_tags((string) $category->description), 150)) }}</div>
                </div>
                <x-admin.field label="SEO title" name="seo_title">
                    <input name="seo_title" maxlength="70" value="{{ old('seo_title', $category->seo_title) }}" class="admin-input">
                </x-admin.field>
                <x-admin.field label="Meta description" name="seo_description" class="mt-4">
                    <textarea name="seo_description" rows="3" maxlength="320" class="admin-input">{{ old('seo_description', $category->seo_description) }}</textarea>
                </x-admin.field>
            </x-admin.section>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Publishing">
                <x-admin.field label="Status" name="status">
                    <select name="status" class="admin-input">
                        @foreach(['draft' => 'Draft', 'active' => 'Active', 'archived' => 'Archived'] as $val => $label)
                            <option value="{{ $val }}" @selected(old('status', $category->status ?? 'active') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </x-admin.field>
                <div class="mt-4 space-y-2 text-sm">
                    <label class="flex items-center gap-2"><input type="checkbox" name="published" value="1" @checked(old('published', $category->published ?? true))> Published</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="featured" value="1" @checked(old('featured', $category->featured ?? false))> Featured</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="show_in_nav" value="1" @checked(old('show_in_nav', $category->show_in_nav ?? true))> Show in navigation</label>
                </div>
            </x-admin.section>

            @if($category->exists)
                <x-admin.section title="Children">
                    @forelse($category->children as $child)
                        <a href="{{ route('admin.categories.edit', $child) }}" class="mb-2 flex items-center justify-between rounded-lg border border-[var(--color-admin-border)] px-3 py-2 text-sm hover:bg-[#fafbfb]">
                            <span>{{ $child->title }}</span>
                            <i data-lucide="chevron-right" class="h-3.5 w-3.5 text-[#8c9196]"></i>
                        </a>
                    @empty
                        <p class="text-sm text-[#8c9196]">No child categories.</p>
                    @endforelse
                    <a href="{{ route('admin.categories.create', ['parent_id' => $category->id]) }}" class="mt-2 inline-flex text-xs font-medium text-[#2c6ecb] hover:underline">+ Add child</a>
                </x-admin.section>

                <x-admin.section title="Danger zone">
                    <button
                        type="submit"
                        form="category-delete-form"
                        class="admin-btn w-full justify-center text-[var(--color-danger)]"
                        onclick="return confirm('Delete this category? Children move up one level.')"
                    >
                        Delete category
                    </button>
                </x-admin.section>
            @endif
        </div>
    </div>

    <x-admin.sticky-save form="category-form" hint="Hierarchy, media, products, and publish flags save together." />
</x-admin.page>
</form>

@if($category->exists)
<form id="category-delete-form" method="post" action="{{ route('admin.categories.destroy', $category) }}" class="hidden">
    @csrf
    @method('DELETE')
</form>
@endif
@endsection