@php
    $value = fn($field, $default = '') => old($field, optional($item)->$field ?? $default);
    $type = old('product_type', optional($item)->product_type ?? 'type2');
    $featuresText = old('features_text', is_array(optional($item)->features) ? implode("\n", $item->features) : '');
    $specPairs = old('spec_keys') ? collect(old('spec_keys'))->map(fn($key, $i) => ['label' => $key, 'value' => old('spec_values')[$i] ?? ''])->all() : (optional($item)->specification_pairs ?: [['label' => '', 'value' => '']]);
    $faqRows = old('faq_questions') ? collect(old('faq_questions'))->map(fn($key, $i) => ['question' => $key, 'answer' => old('faq_answers')[$i] ?? ''])->all() : (optional($item)->faq ?: [['question' => '', 'answer' => '']]);
    $catalogRows = old('catalog_title')
        ? collect(old('catalog_title'))->map(fn($title, $i) => [
            'group' => old('catalog_group')[$i] ?? '',
            'code' => old('catalog_code')[$i] ?? '',
            'title' => $title,
            'image' => old('catalog_image')[$i] ?? '',
        ])->all()
        : (optional($item)->catalog_items ?: [['group' => '', 'code' => '', 'title' => '', 'image' => '']]);
    $typeLabels = ['type1' => 'E-commerce', 'type2' => 'Inquiry', 'type3' => 'Catalog'];
    $selectedImages = collect(old('selected_media', is_array(optional($item)->images) ? $item->images : []))->filter()->values();
    $mediaFiles = collect($mediaFiles ?? []);
    $selectedDomainId = old('main_domain_id', optional(optional($item)->category)->parent_id ?: optional($item)->category_id);
@endphp
@extends('layouts.admin')
@section('content')
<section class="admin-page-head compact">
    <div>
        <p class="eyebrow">{{ $item ? 'Edit product' : 'Add product' }}</p>
        <h1>{{ $item ? $item->name : 'New Product' }}</h1>
        <p>{{ $item ? 'Update product content, layout type and publishing details.' : 'Create a product in a guided form with only the relevant fields visible.' }}</p>
    </div>
    <div class="admin-head-actions">
        <a class="button secondary" href="{{ route('admin.products') }}">Back to Products</a>
        @if($item)<a class="button secondary" href="{{ route('products.show', $item->slug) }}" target="_blank">Preview</a>@endif
    </div>
</section>

<form method="post" action="{{ route('admin.products.save') }}" class="admin-form product-admin-form product-form-page" data-product-admin enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" value="{{ optional($item)->id }}">

    <section class="admin-form-step">
        <span>Step 1</span>
        <h2>Select Product Type</h2>
        <div class="product-type-picker">
            @foreach($typeLabels as $key => $label)
                <label class="type-tile">
                    <input type="radio" name="product_type" value="{{ $key }}" @checked($type === $key)>
                    <strong>{{ $label }}</strong>
                    <small>{{ $key === 'type1' ? 'Price, stock and cart CTA' : ($key === 'type2' ? 'Quote CTA, specs and FAQ' : 'Visual grid and grouped items') }}</small>
                </label>
            @endforeach
        </div>
    </section>

    <div class="product-form-tabs" data-product-tabs>
        <div class="product-tab-nav" role="tablist" aria-label="Product form sections">
            <button class="active" type="button" data-product-tab-button="details">1. Title & Details</button>
            <button type="button" data-product-tab-button="gallery">2. Gallery</button>
            <button type="button" data-product-tab-button="type-fields">3. Product Fields</button>
            <button type="button" data-product-tab-button="seo">4. SEO & Publish</button>
        </div>

        <section class="admin-form-step product-tab-panel active" data-product-tab-panel="details">
            <span>Step 2</span>
            <h2>Title, Category & Description</h2>
            <div class="admin-field-grid category-field-grid">
                <label>Main Category<select name="main_domain_id" data-domain-select required><option value="">Select main category</option>@foreach($domains as $domain)<option value="{{ $domain->id }}" @selected((int) $selectedDomainId === $domain->id)>{{ $domain->name }}</option>@endforeach</select><small class="hint">Choose Nursing & Medical, Laboratory, or Education Maps & Charts first.</small></label>
                <label>Child Category<select name="category_id" data-child-category-select required><option value="">Select child category</option>@foreach($categories as $category)<option value="{{ $category->id }}" data-parent="{{ $category->parent_id }}" @selected((int) $value('category_id') === $category->id)>{{ optional($category->parent)->name }} / {{ $category->name }}</option>@endforeach</select><small class="hint">Only child categories from the selected main category are shown.</small></label>
                <label>Status<select name="status"><option value="active" @selected($value('status', 'active') === 'active')>Active</option><option value="draft" @selected($value('status') === 'draft')>Draft</option></select></label>
                <label>Title<input name="name" value="{{ $value('name') }}" required></label>
                <label>Slug<input name="slug" value="{{ $value('slug') }}"></label>
                <label class="span-2">Short Description<textarea name="short_description" rows="3" required>{{ $value('short_description') }}</textarea></label>
                <label class="span-2">Description<textarea name="description" rows="5" required>{{ $value('description') }}</textarea></label>
            </div>
        </section>

        <section class="admin-form-step product-tab-panel" data-product-tab-panel="gallery">
            <span>Step 3</span>
            <h2>Product Gallery</h2>
            <div class="media-picker" data-media-picker>
                <div class="media-picker-head">
                    <div>
                        <strong>Gallery Images</strong>
                        <small class="hint">Use the media popup to select existing images, or upload new images while saving.</small>
                    </div>
                    <button class="button secondary" type="button" data-media-toggle>Open Media Gallery</button>
                </div>
                <div class="selected-media-preview" data-selected-media-preview>
                    @forelse($selectedImages as $image)
                        <figure><img src="{{ $image }}" alt="Selected product image" loading="lazy"><figcaption>{{ basename($image) }}</figcaption></figure>
                    @empty
                        <p>No images selected yet.</p>
                    @endforelse
                </div>
                @foreach($selectedImages as $image)
                    @unless($mediaFiles->contains('url', $image))
                        <input type="hidden" name="selected_media[]" value="{{ $image }}">
                    @endunless
                @endforeach
            </div>
        </section>

        <section class="admin-form-step product-tab-panel" data-product-tab-panel="type-fields">
            <span>Step 4</span>
            <h2>Product Type Fields</h2>
            <div class="type-panel" data-type-panel="type1">
                <div class="admin-field-grid">
                    <label>Price<input type="number" step="0.01" min="0" name="price" value="{{ $value('price') }}"></label>
                    <label>Available Stock<input type="number" min="0" name="stock" value="{{ $value('stock') }}"></label>
                    <label class="span-2">Features, one per line<textarea name="features_text" rows="5">{{ $featuresText }}</textarea></label>
                    <label class="check span-2"><input type="checkbox" name="enable_cart" value="1" @checked(old('enable_cart', optional($item)->enable_cart))> Enable add to cart and buy now buttons</label>
                </div>
            </div>
            <div class="type-panel" data-type-panel="type2">
                <label>Features, one per line<textarea name="features_text" rows="5">{{ $featuresText }}</textarea></label>
                <div class="repeater" data-repeater="spec">
                    <div class="repeater-head"><strong>Specifications</strong><button class="button secondary" type="button" data-add-row="spec">Add Spec</button></div>
                    <div data-rows>@foreach($specPairs as $row)<div class="repeater-row"><input name="spec_keys[]" placeholder="Label" value="{{ $row['label'] ?? '' }}"><input name="spec_values[]" placeholder="Value" value="{{ $row['value'] ?? '' }}"><button type="button" data-remove-row>Remove</button></div>@endforeach</div>
                </div>
                <div class="repeater" data-repeater="faq">
                    <div class="repeater-head"><strong>FAQ</strong><button class="button secondary" type="button" data-add-row="faq">Add FAQ</button></div>
                    <div data-rows>@foreach($faqRows as $row)<div class="repeater-row faq-row"><input name="faq_questions[]" placeholder="Question" value="{{ $row['question'] ?? '' }}"><textarea name="faq_answers[]" rows="2" placeholder="Answer">{{ $row['answer'] ?? '' }}</textarea><button type="button" data-remove-row>Remove</button></div>@endforeach</div>
                </div>
            </div>
            <div class="type-panel" data-type-panel="type3">
                <label class="compact-field">Gallery Display<select name="gallery_type"><option value="grid" @selected($value('gallery_type', 'grid') === 'grid')>Grid</option><option value="list" @selected($value('gallery_type') === 'list')>List</option></select></label>
                <div class="repeater" data-repeater="catalog">
                    <div class="repeater-head"><strong>Grouped Catalog Items</strong><button class="button secondary" type="button" data-add-row="catalog">Add Item</button></div>
                    <div data-rows>
                        @foreach($catalogRows as $row)
                            <div class="repeater-row catalog-row">
                                <input name="catalog_group[]" placeholder="Group, e.g. Skeletal" value="{{ $row['group'] ?? '' }}">
                                <input name="catalog_code[]" placeholder="Code" value="{{ $row['code'] ?? '' }}">
                                <input name="catalog_title[]" placeholder="Title" value="{{ $row['title'] ?? '' }}">
                                <div class="catalog-image-picker">
                                    <input type="hidden" name="catalog_image[]" value="{{ $row['image'] ?? '' }}">
                                    <div class="catalog-image-preview" data-catalog-image-preview>
                                        @if(!empty($row['image']))<img src="{{ $row['image'] }}" alt="Catalog item image" loading="lazy"><span>{{ basename($row['image']) }}</span>@else<span>No image selected</span>@endif
                                    </div>
                                    <button class="button secondary" type="button" data-media-target>Select Image</button>
                                </div>
                                <button type="button" data-remove-row>Remove</button>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        <section class="admin-form-step product-tab-panel" data-product-tab-panel="seo">
            <span>SEO</span>
            <h2>Publishing</h2>
            <div class="admin-field-grid">
                <label>Legacy Specifications<textarea name="specifications" rows="3">{{ $value('specifications') }}</textarea></label>
                <label>Use Cases<textarea name="use_cases" rows="3">{{ $value('use_cases') }}</textarea></label>
                <label>Brochure URL<input name="brochure_url" value="{{ $value('brochure_url') }}"></label>
                <label>Meta Title<input name="meta_title" value="{{ $value('meta_title') }}"></label>
                <label class="span-2">Meta Description<textarea name="meta_description" rows="3">{{ $value('meta_description') }}</textarea></label>
                <label class="check span-2"><input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', optional($item)->is_featured))> Featured product</label>
            </div>
            <div class="form-sticky-actions"><a class="button secondary" href="{{ route('admin.products') }}">Cancel</a><button class="button primary">Save Product</button></div>
        </section>
    </div>

    <div class="admin-media-modal" data-media-modal aria-hidden="true">
        <div class="admin-media-backdrop" data-media-close></div>
        <aside class="admin-media-dialog" role="dialog" aria-modal="true" aria-label="Media gallery">
            <div class="admin-media-head">
                <div>
                    <span>Media Gallery</span>
                    <h2>Select product images</h2>
                    <p>Choose gallery images with checkboxes, or use Select Image for a catalog row.</p>
                </div>
                <button type="button" data-media-close aria-label="Close media gallery">&times;</button>
            </div>
            <label class="media-dropzone">
                Upload New Images
                <input type="file" name="gallery_uploads[]" accept="image/*" multiple>
                <small class="hint">Uploads are attached to this product when you save.</small>
            </label>
            <div class="admin-media-grid">
                @forelse($mediaFiles as $file)
                    <article class="media-choice">
                        <label>
                            <input type="checkbox" name="selected_media[]" value="{{ $file['url'] }}" @checked($selectedImages->contains($file['url']))>
                            <img src="{{ $file['url'] }}" alt="{{ $file['name'] }}" loading="lazy">
                            <span>{{ $file['name'] }}</span>
                        </label>
                        <button class="button secondary" type="button" data-media-select data-media-url="{{ $file['url'] }}" data-media-name="{{ $file['name'] }}">Select Image</button>
                    </article>
                @empty
                    <p>No media files yet. Upload images above or from the Media page.</p>
                @endforelse
            </div>
        </aside>
    </div>
</form>
@endsection