@extends('admin.layouts.app')
@section('page-title', $product ? 'Edit Product' : 'Add a Product')
@section('body-class', 'product-create-preview')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/product-create.css') }}?v={{ filemtime(public_path('assets/product-create.css')) }}">
@endpush
@push('scripts')
    <script type="module" src="{{ asset('assets/product-create.js') }}?v={{ filemtime(public_path('assets/product-create.js')) }}"></script>
@endpush
@section('content')
<div class="product-create" data-product-create data-image-base="{{ asset('images/categories') }}/">
    <div class="product-toolbar"><div><h2>{{ $product ? 'Edit product' : 'New product' }}</h2><span class="quiet-badge" data-product-status>Not saved</span></div><div><button type="button" class="product-button" data-product-reset>Reset</button></div></div>
    <form id="product-form" action="{{ $product ? route('admin.products.update', $product) : route('admin.products.store') }}" method="post" enctype="multipart/form-data" novalidate>
        @csrf
        @if($product)
            @method('PATCH')
        @endif
        @if(!$categories)<p class="product-help">Create a category before saving a product.</p>@endif
        <div class="product-form-layout">
            <div class="product-form-sections">
                <details class="panel product-section" open>
                    <summary><span class="product-step">01</span> General information <x-icon name="chevron" :size="14" /></summary>
                    <div class="product-section-body">
                        <div class="product-field"><label for="product-name">Product name <span>*</span></label><input id="product-name" name="productName" maxlength="160" placeholder="e.g. Everyday Cotton Polo" autocomplete="off"></div>
                        <div class="product-field-pair">
                            <div class="product-field"><label for="product-code">Product code <span>*</span></label><input id="product-code" name="productCode" maxlength="60" value="{{ $productCode }}" autocomplete="off"></div>
                            <div class="product-field"><label for="product-category">Category <span>*</span></label><select id="product-category" name="categoryId"><option value="">Choose a category</option>@foreach(collect($categories)->groupBy('collection') as $collection => $items)<optgroup label="{{ ucfirst($collection) }}">@foreach($items as $category)<option value="{{ $category['id'] }}">{{ $category['name'] }}</option>@endforeach</optgroup>@endforeach</select></div>
                        </div>
                        <div class="product-category-context"><div data-product-category-context><x-icon name="category" :size="17" /><span>Select a category to see its matching cover.</span></div>@if(auth()->user()->hasPermission('products.categories'))<a href="{{ route('admin.products.categories') }}" target="_blank" rel="noopener" aria-label="Manage categories (opens in a new tab)">Manage categories <x-icon name="arrow" :size="13" /></a>@endif</div>
                        <div class="product-field"><label for="product-short-description">Short description</label><textarea id="product-short-description" name="shortDescription" rows="2" maxlength="300" placeholder="A quick introduction to the product"></textarea></div>
                        <div class="product-field"><label for="product-description">Description</label><textarea id="product-description" name="description" rows="4" maxlength="5000" placeholder="Fabric, fit, care instructions and other details"></textarea></div>
                    </div>
                </details>
                <details class="panel product-section" open>
                    <summary><span class="product-step">02</span> Photos <small data-photo-count>0 images</small><x-icon name="chevron" :size="14" /></summary>
                    <div class="product-section-body">
                        <label class="product-upload" for="product-photos"><x-icon name="upload" :size="23" /><strong>Choose product images</strong><span>Up to 20 JPG, PNG or WebP files · Up to 5 MB each</span><input id="product-photos" type="file" accept="image/jpeg,image/png,image/webp" multiple></label>
                        <div class="product-photo-grid" data-product-photos></div>
                        <p class="product-help">Choose a cover, reorder photos, then assign images to colours or individual variants below.</p>
                    </div>
                </details>
                <details class="panel product-section" open>
                    <summary><span class="product-step">03</span> Pricing &amp; variants <small data-variant-count>Single product</small><x-icon name="chevron" :size="14" /></summary>
                    <div class="product-section-body">
                        <fieldset class="product-type"><legend class="sr-only">Product type</legend><label><input type="radio" name="productType" value="simple" checked> Single product</label><label><input type="radio" name="productType" value="variants"> With variants</label></fieldset>
                        <div class="product-defaults"><div class="product-field"><label for="product-price" data-price-label>Sale price (৳) <span>*</span></label><input id="product-price" name="price" type="number" min="0" step="0.01" inputmode="decimal" placeholder="0.00"></div><div class="product-field"><label data-stock-label>Current stock</label><input id="product-stock" name="stock" type="hidden" value="0"><span data-current-stock>0</span></div><div class="product-field" data-simple-sku><label for="product-sku">SKU <span>*</span></label><div class="product-sku-input"><input id="product-sku" name="sku" minlength="4" maxlength="5" pattern="[A-Z0-9]{4,5}" placeholder="Auto" autocomplete="off" autocapitalize="characters" spellcheck="false"><button type="button" data-new-sku aria-label="Generate a new SKU" title="Generate a new SKU">&#8635;</button></div></div></div>
                        <p class="product-help">SKU is generated as 5 characters. Automatic SKUs are finalized when saved. To keep an exact SKU, edit it using 4-5 letters or numbers, without hyphens.</p>
                        <div data-product-variant-controls hidden>
                            <div class="product-field-pair"><div class="product-field"><label for="product-colours">Colours</label><textarea id="product-colours" name="colours" rows="2" placeholder="Black, Navy, Olive, Grey…"></textarea></div><div class="product-field"><label for="product-sizes">Sizes</label><textarea id="product-sizes" name="sizes" rows="2" placeholder="XS, S, M, L, XL, XXL…"></textarea></div></div>
                            <div class="product-generate-row"><p class="product-help">Separate options with commas or new lines. <strong data-combination-count>No options yet</strong></p><button type="button" class="product-button product-button-primary" data-generate-variants><x-icon name="plus" :size="15" /> Generate variants</button></div>
                            <p class="product-help">Generate again after changing options. Matching variants keep their SKU, price, stock balance and image selections.</p>
                            <p class="product-variant-warning" data-variant-warning hidden>Options changed. Generate variants to update the combinations.</p>
                            <div class="product-colour-images" data-colour-images></div>
                            <div class="product-variant-tools"><label class="product-field"><span class="sr-only">Filter variants by colour</span><select data-variant-colour-filter><option value="">All colours</option></select></label><input type="search" data-variant-search aria-label="Search variants by colour, size or SKU" placeholder="Search size or SKU"></div>
                            <fieldset class="product-bulk-edit"><legend>Bulk edit filtered variants</legend><label>Sale price (৳)<input type="number" data-bulk-price min="0" step="0.01" inputmode="decimal" placeholder="Keep current"></label><input type="hidden" data-bulk-stock disabled><button type="button" class="product-button" data-apply-bulk>Apply</button></fieldset>
                            <div class="product-variant-scroll"><table class="product-variant-table"><caption class="sr-only">Product variants with individual images, SKU, sale price and opening stock</caption><thead><tr><th scope="col">Active</th><th scope="col">Colour / Size</th><th scope="col">Images</th><th scope="col">SKU</th><th scope="col">Price (৳)</th><th scope="col">Stock</th></tr></thead><tbody data-variant-rows><tr><td colspan="6" class="product-empty">Add colours and sizes, then generate variants.</td></tr></tbody></table></div>
                            <div class="product-pagination"><span data-variant-pagination-summary>No variants</span><div><button type="button" class="product-button" data-variant-prev aria-label="Previous variants page" disabled>Previous</button><button type="button" class="product-button" data-variant-next aria-label="Next variants page" disabled>Next</button></div></div>
                        </div>
                        <p class="product-help">New variants start at zero. Record incoming stock through Products → Add Stock.</p>
                    </div>
                </details>
            </div>
            <aside class="product-preview-column" aria-labelledby="product-preview-title">
                <section class="panel product-preview"><div class="product-panel-heading"><h2 id="product-preview-title">Product preview</h2><span class="quiet-badge">Draft</span></div><div class="product-preview-body"><div class="product-preview-image"><img data-preview-product-image alt="Product preview" hidden><span data-preview-product-empty><x-icon name="image" :size="35" /><small>Your product image</small></span></div><div class="product-preview-thumbnails" data-preview-product-thumbnails></div><small data-preview-product-category>No category selected</small><h3 data-preview-product-name>Product name</h3><p data-preview-product-description>Add a short description to preview it here.</p><label class="product-field" data-preview-variant-label hidden><span>Preview a variant</span><select data-preview-variant></select></label><div class="product-preview-price" data-preview-product-price>৳0</div><dl class="product-preview-meta"><div><dt>SKU</dt><dd data-preview-product-sku>Auto</dd></div><div><dt>Current stock</dt><dd data-preview-product-stock>0</dd></div><div><dt>Status</dt><dd data-preview-product-availability>Draft preview</dd></div></dl></div></section>
                <section class="panel product-readiness"><h2>Before saving</h2><ul data-product-checklist><li>Product name &amp; code</li><li>Category selected</li><li>At least one product image</li><li>Valid pricing &amp; SKU</li></ul><p>Save stores catalog details and images. Manage quantities through Add Stock. A variant with remaining stock can be disabled but cannot be removed.</p></section>
            </aside>
        </div>
        <div class="product-action-bar"><p data-product-message role="status" aria-live="polite">Complete the required fields, then save to the catalog.</p><div><button type="submit" name="intent" value="draft" class="product-button">Save as Draft</button><button type="submit" name="intent" value="publish" class="product-button product-button-primary"><x-icon name="check" :size="15" /> Save &amp; Activate</button></div></div>
    </form>
    <noscript><p>Enable JavaScript to generate variants, assign images and save this product.</p></noscript>
    <dialog class="product-dialog" data-product-image-dialog aria-labelledby="product-image-dialog-title"><div class="product-panel-heading"><h2 id="product-image-dialog-title">Choose images</h2><button type="button" class="icon-button" data-product-dialog-close aria-label="Close image picker"><x-icon name="close" :size="18" /></button></div><div class="product-dialog-body"><p class="product-help" data-image-dialog-help></p><div class="product-image-choices" data-image-choices></div><p class="product-help" data-image-dialog-empty hidden>Upload product photos first, then assign them here.</p></div><div class="product-dialog-actions"><button type="button" class="product-button" data-product-dialog-close>Cancel</button><button type="button" class="product-button product-button-primary" data-image-dialog-apply>Use selected images</button></div></dialog>
    <dialog class="product-dialog" data-product-result-dialog aria-labelledby="product-result-title"><div class="product-panel-heading"><h2 id="product-result-title">Product preview</h2><button type="button" class="icon-button" data-product-dialog-close aria-label="Close product preview"><x-icon name="close" :size="18" /></button></div><div class="product-dialog-body" data-product-result></div><div class="product-dialog-actions"><button type="button" class="product-button product-button-primary" data-product-dialog-close>Back to product</button></div></dialog>
</div>
<script type="application/json" id="product-edit-data">{!! json_encode($initialProduct, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
<script type="application/json" id="product-create-data">{!! json_encode($categories, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
@endsection