@php
    $input = 'mt-1 block w-full min-h-11 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-lg shadow-sm';
@endphp

<x-app-layout :title="'Edit '.$category->name">
    <x-slot name="header">
        <a href="{{ route('parts.categories.index') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Part categories</a>
        <h1 class="text-xl font-semibold text-gray-900">{{ $category->name }}</h1>
        <p class="text-sm text-gray-500">
            {{ $category->parts_count }} {{ Str::plural('part', $category->parts_count) }} ·
            <a href="{{ route('parts.index', ['category' => $category->id, 'show' => 'all']) }}" class="text-indigo-600 underline">See parts</a>
        </p>
    </x-slot>

    <div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
        <x-flash />

        <form method="POST" action="{{ route('parts.categories.update', $category) }}" class="rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4">
            @csrf
            @method('PUT')

            <div>
                <x-input-label for="name" value="Category name" />
                <input id="name" name="name" type="text" required maxlength="100" class="{{ $input }}" value="{{ old('name', $category->name) }}">
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="code" value="SKU code" />
                <input id="code" name="code" type="text" required maxlength="10" class="{{ $input }} font-mono uppercase" value="{{ old('code', $category->code) }}">
                <p class="mt-1 text-sm text-gray-500">Used for new SKUs only. Existing SKUs do not change.</p>
                <x-input-error :messages="$errors->get('code')" class="mt-2" />
            </div>

            <label class="flex min-h-11 items-center gap-3">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $category->is_active))
                       class="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <span>
                    <span class="font-medium text-gray-900">On</span>
                    <span class="block text-sm text-gray-500">Turn off to hide this category when adding new parts.</span>
                </span>
            </label>

            <div class="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-end">
                <a href="{{ route('parts.categories.index') }}" class="inline-flex min-h-12 items-center justify-center rounded-lg border border-gray-300 bg-white px-6 font-semibold text-gray-700 hover:bg-gray-50">Cancel</a>
                <button type="submit" class="min-h-12 rounded-lg bg-indigo-600 px-6 font-semibold text-white hover:bg-indigo-500">Save</button>
            </div>
        </form>

        {{-- ========== Sub-categories ========== --}}
        <section class="mt-5 rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">Sub-categories</h2>
                <p class="text-sm text-gray-500">e.g. Display › OLED, Incell, With frame. Optional on each product.</p>
            </div>

            @if ($category->subcategories->isNotEmpty())
                <ul class="divide-y divide-gray-100">
                    @foreach ($category->subcategories as $sub)
                        <li class="py-2">
                            <form method="POST" action="{{ route('parts.subcategories.update', $sub) }}" class="flex flex-wrap items-center gap-2">
                                @csrf
                                @method('PUT')
                                <label class="sr-only" for="sub_{{ $sub->id }}">Name</label>
                                <input id="sub_{{ $sub->id }}" name="name" type="text" maxlength="100" value="{{ $sub->name }}" class="min-h-11 flex-1 rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <label class="flex min-h-11 items-center gap-2 text-sm">
                                    <input type="checkbox" name="is_active" value="1" @checked($sub->is_active) class="h-5 w-5 rounded border-gray-300 text-indigo-600"> On
                                </label>
                                <span class="text-sm text-gray-500">{{ $sub->parts_count }} {{ Str::plural('product', $sub->parts_count) }}</span>
                                <button type="submit" class="min-h-11 rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">Save</button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            @endif

            <form method="POST" action="{{ route('parts.subcategories.store', $category) }}" class="flex flex-wrap items-end gap-2">
                @csrf
                <div class="flex-1">
                    <x-input-label for="new_sub" value="Add a sub-category" />
                    <input id="new_sub" name="name" type="text" maxlength="100" required class="{{ $input }}" placeholder="e.g. OLED">
                </div>
                <button type="submit" class="min-h-11 rounded-lg bg-indigo-600 px-5 font-semibold text-white hover:bg-indigo-500">Add</button>
            </form>
            <x-input-error :messages="$errors->get('name')" />
        </section>
    </div>
</x-app-layout>