@extends('admin.layouts.app')
@section('page-title', 'Categories')
@section('body-class', 'categories-preview')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/categories.css') }}?v={{ filemtime(public_path('assets/categories.css')) }}">
@endpush
@push('scripts')
<script src="{{ asset('assets/category-editor.js') }}?v={{ filemtime(public_path('assets/category-editor.js')) }}" defer></script>
@endpush
@section('content')
@php
    $field = static fn ($key, $fallback = '') => is_scalar(old($key, $fallback)) ? old($key, $fallback) : $fallback;
    $imageSource = $field('image_source', request()->query('cover_picker') === '1' || $category?->product_image_id ? 'product' : 'upload');
@endphp
<div class="category-workspace">
    <section class="panel category-library" aria-labelledby="category-list-heading">
        <div class="category-section-heading"><h2 id="category-list-heading">Categories <span>{{ $categories->total() }}</span></h2><a href="{{ route('admin.products.categories') }}" class="category-button category-button-primary category-button-small"><x-icon name="plus" :size="15" /> Add</a></div>
        <form action="{{ route('admin.products.categories') }}" method="get" class="category-search"><x-icon name="search" :size="16" /><input type="search" name="q" value="{{ $search }}" maxlength="80" placeholder="Search categories" aria-label="Search categories"><button type="submit" aria-label="Search"><x-icon name="chevron" :size="14" /></button></form>
        <div class="category-list" aria-label="Choose a category">
            @forelse($categories as $item)
                <a href="{{ route('admin.products.categories.edit', $item) }}" class="category-row" @if($category?->id === $item->id) aria-current="page" @endif>
                    @if($item->coverPath())<img src="{{ route('admin.products.categories.cover', $item) }}?v={{ $item->version }}" alt="" width="44" height="52" loading="lazy">@endif
                    <span><strong>{{ $item->name }}</strong><small>{{ $collections[$item->collection] }} &middot; {{ $item->visible ? 'Visible' : 'Hidden' }}</small></span><x-icon name="chevron" :size="13" />
                </a>
            @empty
                <p class="category-empty">{{ $search !== '' ? 'No matching categories.' : 'No categories yet. Create your first category.' }}</p>
            @endforelse
        </div>
        @if($categories->hasPages())
            <nav class="category-pagination" aria-label="Category pages">
                @if($categories->previousPageUrl())<a class="category-button category-button-small" href="{{ $categories->previousPageUrl() }}">Previous</a>@endif
                <span>{{ $categories->currentPage() }} / {{ $categories->lastPage() }}</span>
                @if($categories->nextPageUrl())<a class="category-button category-button-small" href="{{ $categories->nextPageUrl() }}">Next</a>@endif
            </nav>
        @endif
        <p class="category-library-note">Renaming keeps the same category ID and link.</p>
    </section>
    @if($category)
        <form id="category-image-search" method="get" action="{{ route('admin.products.categories.edit', $category) }}#category-image-control" hidden><input type="hidden" name="cover_picker" value="1"></form>
    @endif
    <div class="category-detail">
        <form method="post" action="{{ $category ? route('admin.products.categories.update', $category) : route('admin.products.categories.store') }}" enctype="multipart/form-data" class="panel category-editor" data-category-editor data-uploaded-cover="{{ $category?->cover_path ? route('admin.products.categories.cover', ['category' => $category, 'source' => 'upload', 'v' => $category->version]) : '' }}">
            @csrf
            @if($category)
                @method('PATCH')
                <input type="hidden" name="version" value="{{ $field('version', $category->version) }}">
            @endif
            <div class="category-section-heading"><h2>{{ $category ? 'Edit category' : 'New category' }}</h2><span class="quiet-badge">Database</span></div>
            <div class="category-form-body">
                @if(session('status'))<p class="category-message is-success" role="status">{{ session('status') }}</p>@endif
                @if($errors->any())
                    <div class="category-message is-error" role="alert"><strong>Please check the following:</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                        @if($errors->has('version') && $category)<a href="{{ route('admin.products.categories.edit', $category) }}">Reload current category</a>@endif
                    </div>
                @endif
                <div class="category-field"><label for="category-name">Category name <span aria-hidden="true">*</span></label><input id="category-name" name="name" required maxlength="80" value="{{ $field('name', $category?->name ?? '') }}" autocomplete="off" placeholder="e.g. Designer Polo" @if($errors->has('name')) aria-invalid="true" @endif></div>
                <div class="category-field-pair">
                    <div class="category-field"><label for="category-collection">Collection</label><select id="category-collection" name="collection" required>@foreach($collections as $value => $label)<option value="{{ $value }}" @selected($field('collection', $category?->collection ?? 'men') === $value)>{{ $label }}</option>@endforeach</select></div>
                    <div class="category-field"><label for="category-position">Shop order</label><input id="category-position" name="position" type="number" min="1" max="9999" step="1" required value="{{ $field('position', $category?->position ?? 1) }}"></div>
                </div>
                <input type="hidden" name="visible" value="0">
                <label class="category-visibility"><input type="checkbox" name="visible" value="1" @checked($field('visible', $category?->visible ?? true))><span><strong>Show on website</strong><small>Hidden categories are excluded from homepage placement.</small></span></label>
                <div class="category-form-divider"></div>
                <fieldset class="category-homepage-control" id="category-homepage-control">
                    <legend>Homepage placement</legend>
                    <input type="hidden" name="homepage_enabled" value="0">
                    <label class="category-visibility"><input type="checkbox" name="homepage_enabled" value="1" @checked($field('homepage_enabled', $category?->homepage_enabled ?? false))><span><strong>Show on homepage</strong><small>A category can stay in Shop without being featured.</small></span></label>
                    <div class="category-homepage-fields">
                        <div class="category-field"><label for="category-homepage-placement">Where to display</label><select id="category-homepage-placement" name="homepage_placement" required>@foreach($placements as $value => $label)<option value="{{ $value }}" @selected($field('homepage_placement', $category?->homepage_placement ?? 'main-collections') === $value)>{{ $label }}</option>@endforeach</select></div>
                        <div class="category-field"><label for="category-homepage-position">Order within this area</label><input id="category-homepage-position" name="homepage_position" type="number" min="1" max="9999" step="1" required value="{{ $field('homepage_position', $category?->homepage_position ?? 1) }}"></div>
                    </div>
                    <p class="category-field-note">Smaller numbers appear first. Equal positions sort by category name.</p>
                </fieldset>
                <div class="category-form-divider"></div>
                <div class="category-field" id="category-image-control"><label for="category-image-source">Category image source</label><select id="category-image-source" name="image_source"><option value="upload" @selected($imageSource === 'upload')>Uploaded category cover</option><option value="product" @selected($imageSource === 'product') @disabled(!$category)>Choose a linked product image</option></select></div>
                @if($category)
                    <fieldset class="category-product-picker" data-category-product-picker>
                        <legend>Choose from this category's products</legend>
                        <div class="category-image-search"><input form="category-image-search" type="search" name="image_q" value="{{ $imageSearch }}" maxlength="80" placeholder="Search product name or code" aria-label="Search category product images"><button form="category-image-search" class="category-button category-button-small" type="submit">Find</button></div>
                        @if($selectedImage && !$productImages->getCollection()->contains('id', $selectedImage->id))
                            <p class="category-field-note">Current selection</p><div class="category-product-options">
                                <label class="category-product-choice"><input type="radio" name="product_image_id" value="{{ $selectedImage->id }}" data-cover-url="{{ route('admin.products.image', $selectedImage) }}" checked><img src="{{ route('admin.products.image', $selectedImage) }}" alt="" width="100" height="120"><span>{{ $selectedImage->product->name }}</span></label>
                            </div>
                        @endif
                        <div class="category-product-options">
                            @forelse($productImages as $image)
                                <label class="category-product-choice"><input type="radio" name="product_image_id" value="{{ $image->id }}" data-cover-url="{{ route('admin.products.image', $image) }}" @checked((string) $field('product_image_id', $category->product_image_id ?? '') === (string) $image->id)><img src="{{ route('admin.products.image', $image) }}" alt="" width="100" height="120" loading="lazy"><span>{{ $image->product->name }}<br>{{ $image->product->code }} &middot; Image {{ $image->position + 1 }}</span></label>
                            @empty
                                <p class="category-field-note">No matching product images in this category.</p>
                            @endforelse
                        </div>
                        @if($productImages->hasPages())
                            <nav class="category-pagination" aria-label="Product image pages">@if($productImages->previousPageUrl())<a class="category-button category-button-small" href="{{ $productImages->previousPageUrl() }}#category-image-control">Previous</a>@endif<span>{{ $productImages->currentPage() }} / {{ $productImages->lastPage() }}</span>@if($productImages->nextPageUrl())<a class="category-button category-button-small" href="{{ $productImages->nextPageUrl() }}#category-image-control">Next</a>@endif</nav>
                        @endif
                        <p class="category-field-note">Only products assigned to this category are shown. Save to apply your selection.</p>
                    </fieldset>
                @else
                    <p class="category-field-note">Save the category first, then add products to choose one of their photos.</p>
                @endif
                <div class="category-upload"><label for="category-cover">{{ $category?->cover_path ? 'Replace uploaded category cover' : 'Upload category cover' }}</label><input id="category-cover" name="cover" type="file" accept="image/jpeg,image/png,image/webp" aria-describedby="category-cover-note"><small id="category-cover-note">JPG, PNG or WebP. Up to 5 MB and 6000 &times; 6000 pixels. Leave blank to keep the uploaded cover.</small></div>
                @if($category?->cover_path)
                    <label class="category-visibility"><input type="checkbox" name="remove_cover" value="1" @checked($field('remove_cover', false))><span><strong>Remove uploaded cover</strong></span></label>
                    <a class="category-field-note" href="{{ route('admin.products.categories.cover', ['category' => $category, 'source' => 'upload']) }}" target="_blank" rel="noopener">View uploaded cover</a>
                @endif
                <p class="category-field-note">An uploaded cover is kept as a fallback when a selected product photo is removed or its product moves to another category.</p>
            </div>
            <div class="category-form-actions"><a class="category-button" href="{{ $category ? route('admin.products.categories.edit', $category) : route('admin.products.categories') }}">Reset changes</a><button type="submit" class="category-button category-button-primary"><x-icon name="check" :size="16" /> {{ $category ? 'Save category' : 'Create category' }}</button></div>
        </form>
        <div class="category-previews">
            <section class="panel category-storefront" aria-labelledby="category-cover-heading"><div class="category-section-heading"><h2 id="category-cover-heading">Category cover</h2></div><div class="category-preview-body"><div class="category-cover"><img data-category-cover-preview @if($category?->coverPath()) src="{{ route('admin.products.categories.cover', $category) }}?v={{ $category->version }}" @else hidden @endif alt="Category cover"><span data-category-cover-empty @if($category?->coverPath()) hidden @endif>Select an image to preview</span></div></div></section>
            <section class="panel category-homepage-preview" aria-labelledby="homepage-preview-heading">
                <div class="category-section-heading"><h2 id="homepage-preview-heading">Homepage order preview</h2><span class="quiet-badge">Saved order</span></div>
                <div class="category-homepage-flow">
                    @foreach($placements as $placement => $label)
                        <div class="homepage-anchor">{{ $label }}</div><div class="homepage-area">
                            @forelse($homepageCategories[$placement] as $item)
                                <div class="homepage-category"><span class="homepage-category-order">{{ $loop->iteration }}</span><span>{{ $item->name }}</span></div>
                            @empty
                                <p class="homepage-area-empty">No categories in this area</p>
                            @endforelse
                        </div>
                    @endforeach
                </div>
                <p class="category-homepage-note">Saved configuration. The storefront will use this when its API connection is added.</p>
            </section>
        </div>
    </div>
</div>
@endsection