@extends('store.layout.main')
@section('title', isset($product) ? 'Edit Product' : 'Add Product')

@section('page-header')
    @php $headerIsEdit = isset($product); @endphp
    <x-store.page-header pretitle="Store" :title="$headerIsEdit ? 'Edit Product' : 'Add Product'" back-route="store.dashboard" :other-btn="[
        [
            'href' => route('store.product.list'),
            'text' => 'View Products',
            'class' => 'btn btn-outline-primary',
            'icon' => '<i class=\'bi bi-box-seam\'></i>' . html_space(),
        ],
    ]" />
@endsection

@section('main-container')
    @php
        $isEdit = isset($product);
        $currencySym = config('constants.CURRENCY_SYMBOL', '$');
        if (! isset($bizInv)) {
            $bizInv = [
                'manage_stock' => true,
                'manage_tax' => false,
                'manage_product_cost' => false,
                'default_profit_percent' => 25.0,
            ];
        }
        if (! isset($businessPresetTaxesForProduct)) {
            $businessPresetTaxesForProduct = (new \App\Models\Business)->defaultBusinessTaxPresets();
        }
        $showProductCostSection = ($bizInv['manage_product_cost'] ?? false)
            || ($isEdit && isset($product) && (
                ($product->cost_seller_name ?? '') !== ''
                || (float) ($product->buying_cost ?? 0) > 0
                || (float) ($product->shipping_cost ?? 0) > 0
                || (float) ($product->buying_tax ?? 0) > 0
            ));
    @endphp
    <div class="row row-cards">
        <div class="col-12">
            <div class="card product-form-shell border-0 shadow-sm">
                <div class="card-body p-3 p-lg-4">
                    <form action="#" id="form-id" class="product-form" method="POST" enctype="multipart/form-data"
                        data-product-form="1"
                        @unless($isEdit) data-product-draft="1" data-draft-store="{{ (int) ($storeId ?? 0) }}" data-draft-user="{{ (int) (auth()->id() ?? 0) }}" data-storage-base="{{ rtrim(asset('storage'), '/') }}" data-clear-default-profit="{{ (float) ($bizInv['default_profit_percent'] ?? 25) }}" data-biz-manage-tax="{{ !empty($bizInv['manage_tax']) ? '1' : '0' }}" data-biz-manage-stock="{{ !empty($bizInv['manage_stock']) ? '1' : '0' }}" @endunless>
                        @csrf
                        @if ($isEdit)
                            <script>window.__pfIsEditProduct = true;</script>
                        @endif
                        @if (! $isEdit && ! empty($bizInv['manage_tax']))
                            <script>window.__pfBusinessPresetTaxes = @json($businessPresetTaxesForProduct ?? []);</script>
                        @endif
                        @if(!empty($bizInv['manage_tax']))
                            <script>
                            window.__pfCategoryTaxMap = @json($categoryTaxMap ?? []);
                            window.__pfDefaultTaxPreset = @json($defaultTaxPreset ?? null);
                            </script>
                        @endif

                        <div class="row g-4">

                            <div class="col-12 col-lg-3 order-1">
                                <div class="product-form-media-sticky">
                                    <div class="product-form-section product-form-section--media mb-3">
                                        <div class="product-form-section__head product-form-section__head--compact">
                                            <span class="product-form-section__step product-form-section__step--icon" aria-hidden="true"><i class="bi bi-image"></i></span>
                                            <div>
                                                <h3 class="product-form-section__title">Photos</h3>
                                            </div>
                                        </div>

                                        <div class="product-form-photos-split mb-3">
                                            {{-- main image LEFT --}}
                                            <div class="product-form-photos-split__main">
                                                <div class="pf-cover-label">Main Image</div>
                                                <div class="product-form-cover-inner">
                                                    <input type="file" id="product-image-input" name="image" class="d-none" accept="image/*">
                                                    <img id="image-preview"
                                                        src="{{ $isEdit && $product->thumbnail ? asset('storage/'.$product->thumbnail) : $IMAGE_PLACEHOLDER }}"
                                                        alt="Main preview"
                                                        class="product-form-cover-preview rounded"
                                                        data-placeholder-src="{{ $IMAGE_PLACEHOLDER }}">
                                                    <button type="button" class="product-form-cover__add {{ $isEdit && $product->thumbnail ? 'd-none' : '' }}" title="Set main image" aria-label="Set main image">
                                                        <i class="bi bi-plus-lg"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            {{-- sub images RIGHT --}}
                                            <div class="product-form-photos-split__gallery">
                                                <div class="product-gallery-grid">
                                                    @php
                                                        $galleryList = ($isEdit && is_array($product->gallery_images ?? null))
                                                            ? array_values($product->gallery_images)
                                                            : [];
                                                    @endphp
                                                    @for ($gi = 0; $gi < 6; $gi++)
                                                        @php $gPath = $galleryList[$gi] ?? ''; @endphp
                                                        <div class="product-gallery-slot {{ $gPath ? 'has-image' : '' }}" data-slot="{{ $gi }}">
                                                            <input type="hidden" name="gallery_existing[{{ $gi }}]" value="{{ $gPath }}" class="gallery-existing-input">
                                                            <input type="file" name="gallery_replace[{{ $gi }}]" accept="image/*" class="d-none gallery-file-input" id="gallery_replace_{{ $gi }}">
                                                            <button type="button" class="product-gallery-slot__add {{ $gPath ? 'd-none' : '' }}" title="Add photo" aria-label="Add photo">
                                                                <i class="bi bi-plus-lg"></i>
                                                            </button>
                                                            <img src="{{ $gPath ? asset('storage/'.$gPath) : '' }}" alt="" class="product-gallery-slot__img {{ $gPath ? '' : 'd-none' }}">
                                                            <button type="button" class="product-gallery-slot__clear {{ $gPath ? '' : 'd-none' }}" title="Remove" aria-label="Remove">&times;</button>
                                                        </div>
                                                    @endfor
                                                </div>
                                            </div>
                                        </div>

                                        <hr class="my-3 text-muted opacity-25">

                                        <div class="mb-3">
                                            <label class="form-label">Category <span class="text-danger">*</span></label>
                                            <select name="store_category_id" id="category_id" class="form-select" required>
                                                <option value="">Select category</option>
                                                @if ($nicheCount > 1)
                                                    @foreach ($storeNiches as $niche)
                                                        <optgroup label="{{ $niche->name }}">
                                                            @foreach ($storeCategories->where('niche_id', $niche->id) as $cat)
                                                                <option value="{{ $cat->id }}" data-niche-id="{{ $cat->niche_id }}"
                                                                    {{ $isEdit && $product->store_category_id == $cat->id ? 'selected' : '' }}>
                                                                    {{ $cat->name }}
                                                                </option>
                                                                @foreach ($cat->children as $child)
                                                                    <option value="{{ $child->id }}" data-niche-id="{{ $child->niche_id ?? $cat->niche_id }}"
                                                                        {{ $isEdit && $product->store_category_id == $child->id ? 'selected' : '' }}>
                                                                        &nbsp;&nbsp;&nbsp;— {{ $child->name }}
                                                                    </option>
                                                                @endforeach
                                                            @endforeach
                                                        </optgroup>
                                                    @endforeach
                                                @else
                                                    @foreach ($storeCategories as $cat)
                                                        <option value="{{ $cat->id }}" data-niche-id="{{ $cat->niche_id }}"
                                                            {{ $isEdit && $product->store_category_id == $cat->id ? 'selected' : '' }}>
                                                            {{ $cat->name }}
                                                        </option>
                                                        @foreach ($cat->children as $child)
                                                            <option value="{{ $child->id }}" data-niche-id="{{ $child->niche_id ?? $cat->niche_id }}"
                                                                {{ $isEdit && $product->store_category_id == $child->id ? 'selected' : '' }}>
                                                                &nbsp;&nbsp;&nbsp;— {{ $child->name }}
                                                            </option>
                                                        @endforeach
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>

                                        <div>
                                            <label class="form-label">Unit {!! tooltip('Unit of measurement for the product, e.g., kg, pcs, liters') !!}</label>
                                            <select name="unit" class="form-select">
                                                <option value="">Select unit</option>
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->short_name }}"
                                                        {{ $isEdit && $product->unit == $unit->short_name ? 'selected' : '' }}>
                                                        {{ $unit->short_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mt-3">
                                            <label class="form-label">Product tags</label>
                                            <div class="product-form-tags-wrap position-relative">
                                                <input type="text" id="product-tag-input" class="form-control"
                                                    placeholder="Type a tag, then Enter or comma…" autocomplete="off">
                                                <div id="product-tag-dropdown" class="pf-tag-dropdown d-none"></div>
                                            </div>
                                            <input type="hidden" name="tags" id="product-tags-hidden" value="{{ $isEdit ? implode(', ', (array) ($product->tags ?? [])) : '' }}">
                                            <div id="product-tags-chips" class="product-form-tags-chips mt-2"></div>
                                            <small class="text-muted">Letters, numbers, spaces and dashes only. e.g. <em>New Arrival</em>, <em>Featured</em></small>
                                        </div>
                                    </div>


                                </div>
                            </div>

                            <div class="col-12 col-lg-6 order-2" id="pf-details-col">

                                {{-- ── 1. Basics ── --}}
                                @php $secNum = 2; @endphp
                                <div class="product-form-section" id="pf-sec-1">
                                    <div class="product-form-section__head">
                                        <span class="product-form-section__step">1</span>
                                        <div>
                                            <h3 class="product-form-section__title">Basics</h3>
                                            <p class="pf-section-desc">Product name, branch availability and optional expiry date.</p>
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label">Product Name <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text text-muted" aria-hidden="true"><i class="bi bi-box-seam"></i></span>
                                                <input type="text" name="name" class="form-control" placeholder="e.g. Organic cotton tee"
                                                    value="{{ $isEdit ? $product->name : '' }}" required>
                                            </div>
                                        </div>
                                        @include('store.product._branch-selector')
                                        <div class="{{ ($businessBranches ?? collect())->count() > 1 ? 'col-5' : 'col-12' }}">
                                            <label class="form-label">Expiry Date {!! tooltip('Leave empty if this product does not expire') !!}</label>
                                            <input type="date" name="expiry_date" class="form-control"
                                                value="{{ $isEdit ? ($product->expiry_date?->format('Y-m-d') ?? '') : '' }}">
                                        </div>
                                    </div>
                                </div>

                                @if ($showProductCostSection)
                                {{-- ── 2. Cost & Supplier ── --}}
                                <div class="product-form-section" id="pf-sec-cost">
                                    <div class="product-form-section__head pf-section-row">
                                        <span class="product-form-section__step">{{ $secNum++ }}</span>
                                        <div class="flex-grow-1">
                                            <h3 class="product-form-section__title">Cost &amp; Supplier</h3>
                                            <p class="pf-section-desc">Purchase cost and supplier for margin tracking.</p>
                                        </div>
                                        <div class="ms-2">
                                            <input class="pf-toggle" type="checkbox" role="switch"
                                                id="toggle_cost_supplier"
                                                @if ($isEdit && (($product->cost_seller_name ?? '') !== '' || (float) ($product->buying_cost ?? 0) > 0 || (float) ($product->shipping_cost ?? 0) > 0 || (float) ($product->buying_tax ?? 0) > 0))
                                                    checked
                                                @elseif (! $isEdit && ! empty($bizInv['manage_product_cost']))
                                                    checked
                                                @endif>
                                        </div>
                                    </div>
                                    <div class="d-none mt-3" id="cost-supplier-body">
                                        <div class="row g-3">
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Seller / supplier</label>
                                                <div class="seller-search-wrap position-relative">
                                                    <div class="input-group">
                                                        <span class="input-group-text text-muted"><i class="bi bi-search"></i></span>
                                                        <input type="text" id="seller-search-input" class="form-control"
                                                            placeholder="Search by name or phone…" autocomplete="off"
                                                            value="{{ $isEdit ? old('cost_seller_name', $product->cost_seller_name) : old('cost_seller_name') }}">
                                                        <button type="button" id="seller-clear-btn"
                                                            class="btn btn-outline-secondary {{ ($isEdit && old('cost_seller_name', $product->cost_seller_name)) ? '' : 'd-none' }}"
                                                            title="Clear"><i class="bi bi-x-lg"></i></button>
                                                    </div>
                                                    <input type="hidden" name="cost_seller_name" id="seller-hidden"
                                                        value="{{ $isEdit ? old('cost_seller_name', $product->cost_seller_name) : old('cost_seller_name') }}">
                                                    <div id="seller-dropdown" class="seller-dropdown d-none"></div>
                                                </div>
                                                <small class="text-muted">Searches your customer list. You can also type any name directly.</small>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Buying cost <span class="text-muted fw-normal">(per unit)</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text text-muted">{{ $currencySym }}</span>
                                                    <input type="number" name="buying_cost" class="form-control" placeholder="0.00" step="0.01" min="0"
                                                        value="{{ $isEdit ? old('buying_cost', $product->buying_cost) : old('buying_cost') }}">
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Shipping cost <span class="text-muted fw-normal">(per unit)</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text text-muted">{{ $currencySym }}</span>
                                                    <input type="number" name="shipping_cost" class="form-control" placeholder="0.00" step="0.01" min="0"
                                                        value="{{ $isEdit ? old('shipping_cost', $product->shipping_cost) : old('shipping_cost') }}">
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Profit Margin</label>
                                                <div class="input-group">
                                                    <input type="number" id="js-profit-margin-percent" class="form-control" placeholder="25" step="0.01" min="0" max="1000"
                                                        value="{{ (float) ($bizInv['default_profit_percent'] ?? 25) }}">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                    <input type="hidden" name="cost_seller_name" value="">
                                    <input type="hidden" name="buying_cost" value="">
                                    <input type="hidden" name="shipping_cost" value="">
                                @endif

                                {{-- ── Variants & Stock ── --}}
                                <div class="product-form-section" id="pf-sec-vs">
                                    <div class="product-form-section__head pf-section-row">
                                        <span class="product-form-section__step">{{ $secNum++ }}</span>
                                        <div class="flex-grow-1">
                                            <h3 class="product-form-section__title">Variants &amp; Stock</h3>
                                            <p class="pf-section-desc text-truncate">Sizes, colors, or track plain stock.</p>
                                        </div>
                                        <div class="ms-2 d-flex align-items-center gap-2">
                                            <button type="button" id="variants-view-btn"
                                                class="btn {{ $isEdit && $product->variants->count() > 0 ? 'btn-primary' : 'btn-outline-primary' }} btn-sm rounded-pill pf-variants-open-btn"
                                                data-bs-toggle="modal" data-bs-target="#variantsModal">
                                                <i class="bi bi-layers-half me-1"></i>
                                                <span id="variants-view-label">
                                                    {{ $isEdit && $product->variants->count() > 0 ? $product->variants->count().' variants · Edit' : 'Manage Variants' }}
                                                </span>
                                            </button>
                                            <button type="button" id="variants-clear-btn"
                                                class="btn btn-outline-danger btn-sm rounded-pill {{ $isEdit && $product->variants->count() > 0 ? '' : 'd-none' }}"
                                                title="Remove all variants">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                            <input type="hidden" name="has_variants" id="has_variants_hidden"
                                                value="{{ $isEdit && $product->variants->count() > 0 ? '1' : '0' }}">
                                        </div>
                                    </div>
                                    {{-- Variant info block — shown when variants are active --}}
                                    <div id="variants-info-block"
                                         class="mt-2 {{ $isEdit && $product->variants->count() > 0 ? '' : 'd-none' }}">
                                        <div class="alert alert-info d-flex align-items-center gap-2 py-2 mb-0 small">
                                            <i class="bi bi-layers-half flex-shrink-0"></i>
                                            <span id="variants-info-text">
                                                {{ $isEdit && $product->variants->count() > 0
                                                    ? $product->variants->count() . ' variant' . ($product->variants->count() === 1 ? '' : 's') . ' configured — stock is tracked per variant.'
                                                    : 'Variants configured — stock is tracked per variant.' }}
                                            </span>
                                        </div>
                                    </div>
                                    @if (!empty($bizInv['manage_stock']))
                                        {{-- Stock card — full width, hidden when variants are active --}}
                                        <div class="mt-2 {{ $isEdit && $product->variants->count() > 0 ? 'd-none' : '' }}" id="stock-section">
                                            <div class="pf-subtoggle-card">
                                                <div class="d-flex align-items-center justify-content-between gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <span class="pf-subtoggle-icon"><i class="bi bi-box-seam"></i></span>
                                                        <div>
                                                            <div class="pf-subtoggle-title">Stock</div>
                                                            <div class="pf-subtoggle-desc">Track on-hand quantity, SKU and shelf location.</div>
                                                        </div>
                                                    </div>
                                                    <input class="pf-toggle flex-shrink-0" type="checkbox" role="switch"
                                                        id="manage_stock" name="is_manage_basic_stock" value="1"
                                                        {{ $isEdit ? ($product->is_manage_basic_stock ? 'checked' : '') : 'checked' }}>
                                                </div>
                                            </div>
                                        </div>
                                        @include('store.product.stock-manage')
                                    @else
                                        <input type="hidden" name="is_manage_basic_stock" value="0">
                                    @endif
                                </div>

                                @include('store.product.add-variants-popup')

                                {{-- ── Price & Tax ── --}}
                                <div class="product-form-section" id="pf-sec-price">
                                    <div class="product-form-section__head mb-2">
                                        <span class="product-form-section__step">{{ $secNum++ }}</span>
                                        <div>
                                            <h3 class="product-form-section__title">Price &amp; Tax</h3>
                                            <p class="pf-section-desc">Set the selling price and applicable taxes.</p>
                                        </div>
                                    </div>
                                    <div class="row g-3 align-items-start mt-3">
                                        <div class="{{ !empty($bizInv['manage_tax']) ? 'col-6' : 'col-12' }}">
                                            <div style="margin-bottom:0.5rem">
                                                <label id="basic-price-label" class="mb-0">Base Price <span class="text-danger">*</span></label>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-text text-muted">{{ $currencySym }}</span>
                                                <input type="number" placeholder="0.00" step="0.01" name="price"
                                                    id="product-price-input"
                                                    class="form-control" value="{{ $isEdit ? $product->price : '' }}" required>
                                            </div>
                                        </div>
                                        @if (!empty($bizInv['manage_tax']))
                                        @php
                                            $ptaxes = $businessPresetTaxesForProduct ?? [];
                                            $existingTaxNames = $isEdit ? $product->taxes->pluck('tax_name')->toArray() : [];
                                        @endphp
                                        <div class="col-6">
                                            {{-- Label row: same margin-bottom as .form-label (0.5rem) so inputs align --}}
                                            <div class="d-flex align-items-baseline justify-content-between" style="margin-bottom:0.5rem">
                                                <label class="mb-0">Tax</label>
                                                <a href="{{ route('store.settings.business.taxes') }}" target="_blank"
                                                   class="text-muted text-decoration-none" style="font-size:0.75rem">
                                                    <i class="bi bi-gear me-1"></i>Tax settings
                                                </a>
                                            </div>
                                            @if(empty($ptaxes))
                                                <p class="text-muted small mb-0">No taxes configured.
                                                    <a href="{{ route('store.settings.business.taxes') }}">Set up taxes →</a>
                                                </p>
                                                <input type="hidden" name="is_taxable" value="0">
                                            @else
                                                <input type="hidden" name="is_taxable" id="is_taxable_hidden"
                                                    value="{{ ($isEdit && $product->is_taxable) ? '1' : '0' }}">
                                                <div class="dropdown pf-tax-dd" data-bs-auto-close="outside" id="pf-tax-dd-wrap">
                                                    <button type="button"
                                                            class="pf-tax-dd__trigger dropdown-toggle w-100"
                                                            data-bs-toggle="dropdown"
                                                            aria-expanded="false"
                                                            id="pf-tax-dd-btn">
                                                        <span class="pf-tax-dd__trigger-text" id="pf-tax-trigger-text">Select tax…</span>
                                                        <i class="bi bi-chevron-down pf-tax-dd__caret ms-auto" aria-hidden="true"></i>
                                                    </button>
                                                    <div class="dropdown-menu pf-tax-dd__menu w-100" aria-labelledby="pf-tax-dd-btn">
                                                        @foreach($ptaxes as $ptx)
                                                            @php
                                                                $ptxMethodLabel = ($ptx['method'] ?? 'exc') === 'inc' ? 'incl.' : 'excl.';
                                                                $ptxTypeLabel   = ($ptx['type'] ?? 'percentage') === 'percentage' ? '%' : $currencySym;
                                                                $ptxLabel       = $ptx['name'] . ' ' . $ptx['rate'] . $ptxTypeLabel . ' ' . $ptxMethodLabel;
                                                                $ptxChecked     = in_array($ptx['name'], $existingTaxNames);
                                                            @endphp
                                                            <label class="pf-tax-row"
                                                                data-tax-name="{{ e($ptx['name']) }}"
                                                                data-tax-rate="{{ $ptx['rate'] }}"
                                                                data-tax-type="{{ e($ptx['type'] ?? 'percentage') }}"
                                                                data-tax-method="{{ e($ptx['method'] ?? 'exc') }}">
                                                                <input class="pf-tax-cb visually-hidden" type="checkbox"
                                                                    {{ $ptxChecked ? 'checked' : '' }}>
                                                                <span class="pf-branch-chk" aria-hidden="true">
                                                                    <i class="bi bi-check pf-branch-chk__tick"></i>
                                                                </span>
                                                                <span class="pf-tax-row__label">{{ $ptxLabel }}</span>
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap gap-1 mt-1" id="pf-tax-chips"></div>
                                                <div id="pf-tax-hidden-inputs"></div>
                                            @endif
                                        </div>
                                        @else
                                            <input type="hidden" name="is_taxable" value="0">
                                        @endif
                                    </div>
                                </div>

                                {{-- ── Product details ── --}}
                                <div class="product-form-section product-form-section--last" id="pf-sec-details">
                                    <div class="product-form-section__head pf-section-row">
                                        <span class="product-form-section__step">{{ $secNum++ }}</span>
                                        <div class="flex-grow-1">
                                            <h3 class="product-form-section__title">Product details</h3>
                                            <p class="pf-section-desc">Category-specific attributes and product description.</p>
                                        </div>
                                        <div class="ms-2">
                                            <input class="pf-toggle" type="checkbox" role="switch"
                                                id="toggle_product_details"
                                                {{ $isEdit && isset($product->product_attributes) && count($product->product_attributes) > 0 ? 'checked' : '' }}>
                                        </div>
                                    </div>
                                    <div class="d-none mt-3" id="product-details-body">
                                        <div id="dynamic-attributes" class="row g-3"></div>
                                        <div class="mt-3">
                                            <button type="button" id="toggle-more-info" class="btn btn-outline-secondary btn-sm">
                                                <i class="bi bi-text-paragraph me-1"></i>Add description
                                            </button>
                                        </div>
                                        <div class="row g-3 mt-1 d-none" id="more-info-row">
                                            <div class="col-12">
                                                <label class="form-label">Description</label>
                                                <textarea name="description" class="form-control ck-edit" rows="4" placeholder="Tell customers what makes this product special…"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="product-form-actions mt-4 pt-3 border-top">
                                    <button action="{{ $isEdit ? 'update' : 'add' }}"
                                        url="{{ $isEdit ? route('store.product.update', $product->id) : route('store.product.add') }}"
                                        type="submit" class="btn btn-primary btn-lg w-100 form_submit">
                                        <i class="bi bi-check2-circle me-1"></i>{{ $isEdit ? 'Update product' : 'Save product' }}
                                    </button>
                                </div>

                            </div>

                            {{-- ══ RIGHT: Sticky Live Preview ══ --}}
                            <div class="col-12 col-lg-3 order-3">
                                <div class="product-preview-sticky">

                                    {{-- Status dropdown --}}
                                    <div class="mb-2">
                                        <select name="status" id="product-status-select" class="form-select form-select-sm">
                                            <option value="published" {{ ($isEdit && ($product->status ?? 'published') === 'draft') ? '' : 'selected' }}>
                                                Published
                                            </option>
                                            <option value="draft" {{ ($isEdit && ($product->status ?? 'published') === 'draft') ? 'selected' : '' }}>
                                                Draft
                                            </option>
                                        </select>
                                    </div>

                                    <div class="card border-0 shadow-sm pp-card overflow-hidden">

                                        {{-- header --}}
                                        <div class="card-header border-bottom py-2 px-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <span class="pp-header-label">Product Preview</span>
                                                <span class="badge bg-success-lt text-success pp-live-pill">
                                                    <i class="bi bi-broadcast me-1"></i>Live
                                                </span>
                                            </div>
                                        </div>

                                        {{-- image --}}
                                        <div class="pp-img-wrap">
                                            <img id="pp-img"
                                                src="{{ $isEdit ? (asset('storage/'.$product->thumbnail) ?? $IMAGE_PLACEHOLDER) : $IMAGE_PLACEHOLDER }}"
                                                alt="Preview" class="pp-img">
                                            <span id="pp-variant-badge" class="pp-badge pp-badge--blue d-none">
                                                <i class="bi bi-layers-half me-1"></i>Variants
                                            </span>
                                            <span id="pp-stock-badge" class="pp-badge pp-badge--green d-none">
                                                <i class="bi bi-box-seam me-1"></i><span id="pp-stock-text">In stock</span>
                                            </span>
                                        </div>

                                        <div class="card-body p-3 pp-preview-body">

                                            {{-- Section: Category & unit — only shown when populated --}}
                                            <div id="pp-section-cat-unit" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Listing</div>
                                                <div class="d-flex align-items-center justify-content-between gap-1 flex-wrap">
                                                    <span id="pp-category" class="pp-cat-chip"></span>
                                                    <span id="pp-unit-wrap" class="pp-unit-chip d-none"></span>
                                                </div>
                                            </div>

                                            {{-- Section: Name --}}
                                            <div id="pp-section-name" class="pp-prev-section">
                                                <div class="pp-prev-section__label">Name</div>
                                                <div id="pp-name" class="pp-name mb-0">Product Name</div>
                                            </div>

                                            {{-- Section: Branches --}}
                                            @if(($businessBranches ?? collect())->count() > 1)
                                            <div id="pp-section-branches" class="pp-prev-section">
                                                <div class="pp-prev-section__label"><i class="bi bi-diagram-2 me-1"></i>Branches</div>
                                                <div id="pp-branches-chips" class="pp-branch-chips"></div>
                                            </div>
                                            @endif

                                            {{-- Section: Price & tax (customer pays prominently) --}}
                                            <div id="pp-section-price" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Pricing</div>
                                                <div class="d-flex align-items-start justify-content-between flex-wrap gap-1">
                                                    <div class="flex-grow-1 min-w-0">
                                                        <div id="pp-price-line" class="pp-price-line">
                                                            <div class="pp-price-inline-wrap">
                                                                <div id="pp-price-inline" class="d-flex flex-column align-items-start gap-1">
                                                                    <span id="pp-price" class="pp-price pp-customer-face">{{ $currencySym }}0.00</span>
                                                                    <span id="pp-price-tax-label" class="pp-price-tax-label d-none"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="pp-price-note" class="pp-price-note d-none"></div>
                                                        <div id="pp-tax-exc-row" class="pp-tax-breakdown-wrap d-none"></div>
                                                    </div>
                                                    <span id="pp-expiry-wrap" class="pp-expiry-chip align-self-start d-none"></span>
                                                </div>
                                            </div>

                                            {{-- Tags --}}
                                            <div id="pp-section-tags" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Tags</div>
                                                <div id="pp-tags" class="pp-tags"></div>
                                            </div>

                                            {{-- Meta: stock / sku / rack / cost --}}
                                            <div id="pp-meta-section" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Details</div>
                                                {{-- Basic stock only (single line); hidden when variants — stock shown under each option --}}
                                                <div id="pp-stock-meta" class="pp-stock-detail-inline d-none">
                                                    <i class="bi bi-box-seam pp-stock-detail-inline__ico" aria-hidden="true"></i>
                                                    <span class="pp-stock-detail-inline__txt"><span class="pp-stock-detail-inline__lbl">Stock</span><span id="pp-stock-val" class="pp-stock-detail-inline__num">—</span></span>
                                                </div>
                                                <div class="pp-meta-grid">
                                                    <div id="pp-sku-meta" class="pp-meta-item d-none">
                                                        <div class="pp-meta-label">SKU</div>
                                                        <div id="pp-sku-val" class="pp-meta-value">—</div>
                                                    </div>
                                                    <div id="pp-rack-meta" class="pp-meta-item d-none">
                                                        <div class="pp-meta-label">Rack</div>
                                                        <div id="pp-rack-val" class="pp-meta-value">—</div>
                                                    </div>
                                                    <div id="pp-cost-meta" class="pp-meta-item d-none">
                                                        <div class="pp-meta-label">Buy cost</div>
                                                        <div id="pp-cost-val" class="pp-meta-value">—</div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Variants --}}
                                            <div id="pp-variants-section" class="pp-prev-section d-none">
                                                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap mb-1">
                                                    <div class="pp-prev-section__label mb-0"><i class="bi bi-layers-half me-1"></i>Variants</div>
                                                    <span id="pp-variant-total-stock" class="pp-variant-total-stock d-none"></span>
                                                </div>
                                                <div id="pp-variants-list" class="pp-variants-list"></div>
                                            </div>

                                            {{-- Supplier --}}
                                            <div id="pp-tax-row" class="d-none"></div>{{-- compat --}}
                                            <div id="pp-section-supplier" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Supplier</div>
                                                <div id="pp-supplier-row" class="pp-info-row mb-0">
                                                    <i class="bi bi-truck me-1 text-muted"></i>
                                                    <span id="pp-supplier-val" class="pp-info-val"></span>
                                                </div>
                                            </div>

                                            {{-- Description --}}
                                            <div id="pp-section-desc" class="pp-prev-section d-none">
                                                <div class="pp-prev-section__label">Description</div>
                                                <div id="pp-desc-wrap" class="">
                                                    <div id="pp-desc-val" class="pp-desc-text"></div>
                                                </div>
                                            </div>

                                            {{-- empty-state hint --}}
                                            <div id="pp-hint" class="text-center text-muted pp-empty-hint">
                                                <i class="bi bi-pencil-square d-block mb-1" style="font-size:1.3rem;opacity:.3"></i>
                                                Fill the form to see<br>your product preview
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                @unless($isEdit)
                                    <div class="mt-2">
                                        <button type="button" id="pf-float-clear" class="pf-preview-clear-btn d-none w-100" title="Clear form and saved draft">
                                            <i class="bi bi-eraser me-1"></i>Clear product
                                        </button>
                                    </div>
                                @endunless
                            </div>
                            {{-- ══ end preview ══ --}}

                        </div>

                        {{-- Floating save — centered over the middle column --}}
                        <div id="pf-float-stack" class="pf-float-stack">
                            <button type="button" id="pf-float-save" class="pf-float-save-btn">
                                <i class="bi bi-check2-circle me-1"></i>
                                {{ $isEdit ? 'Update product' : 'Save product' }}
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('style')
<style>
/* ══ Photo block — main image left (large), sub images right (small) ══ */
.product-form-photos-split {
    display: grid;
    grid-template-columns: 110px 70px;
    gap: 6px;
    align-items: start;
}

/* ── Sub images (right column) ── */
.product-form-photos-split__gallery {
    padding-top: 1.38rem; /* push gallery down to align with the image box, below the label */
}
.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.product-gallery-slot {
    aspect-ratio: 1; overflow: hidden; border-radius: .25rem;
    background: #f0f2f5; position: relative;
    border: 1px solid #e4e7ec;
}
.product-gallery-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-slot__add {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; color: #b0b8c4; cursor: pointer;
    transition: color .15s;
}
.product-gallery-slot__add:hover { color: #6c757d; }
.product-gallery-slot__clear {
    position: absolute; top: 1px; right: 2px;
    background: rgba(0,0,0,.45); border: none; border-radius: 50%;
    color: #fff; font-size: .6rem; line-height: 1;
    width: 13px; height: 13px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3; padding: 0;
}
.product-gallery-slot__clear:hover { background: rgba(220,53,69,.8); }

/* ── Media section — tighter horizontal padding for more content width ── */
.product-form-section--media {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

/* ── Main image (left column) ── */
.product-form-photos-split__main { width: 100%; }
.pf-cover-label {
    font-size: .72rem; font-weight: 600; color: #0d5c56;
    letter-spacing: .03em; text-transform: uppercase;
    margin-bottom: .3rem;
}
.product-form-cover-inner {
    position: relative; width: 100%; aspect-ratio: 1;
    border-radius: .375rem; overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(12,166,120,.18);
}
#image-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.product-form-cover__add {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: #f8fafc; border: 1px dashed rgba(12,166,120,.40); border-radius: .375rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; font-size: 1.25rem; color: rgba(12,166,120,.55); cursor: pointer;
    transition: background .15s, color .15s; z-index: 2;
}
.product-form-cover__add:hover { background: #f0f4f3; color: #0d5c56; }

/* Error state on the section step circle */
.pf-sec-has-error .product-form-section__step {
    background: rgba(214,57,57,.11) !important;
    color: #d63939 !important;
}

/* ══ Section one-liner description ══ */
.pf-section-desc {
    font-size: .775rem;
    color: var(--tblr-secondary, #868c98);
    margin: 2px 0 0;
    line-height: 1.4;
}

/* ══ Floating save (center) + clear draft below preview column ══ */
.pf-float-stack {
    position: fixed;
    bottom: 28px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.pf-float-stack > button {
    pointer-events: auto;
}
.pf-preview-clear-btn {
    display: block;
    padding: .4rem .75rem;
    border-radius: .4rem;
    font-weight: 600;
    font-size: .72rem;
    background: rgba(214, 57, 57, 0.08);
    color: #c92a2a;
    border: 1px solid rgba(214, 57, 57, 0.28);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.pf-preview-clear-btn:hover {
    background: rgba(214, 57, 57, 0.14);
    color: #a61e1e;
    border-color: rgba(214, 57, 57, 0.4);
}
.pf-float-save-btn {
    padding: .52rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .88rem;
    background: #0d5c56;
    color: #fff;
    border: none;
    box-shadow: 0 4px 22px rgba(13,92,86,.38), 0 2px 7px rgba(13,92,86,.22);
    transition: box-shadow .2s ease, transform .15s ease, opacity .25s ease;
    cursor: pointer;
    white-space: nowrap;
}
.pf-float-save-btn:hover {
    background: #0a4a44;
    box-shadow: 0 8px 30px rgba(13,92,86,.48), 0 3px 10px rgba(13,92,86,.28);
    transform: translateY(-2px);
}
.pf-float-save-btn:active { transform: translateY(0); }

/* ══ Section cards: teal-tinted background + soft shadow (replaces hr dividers) ══ */
.product-form-section {
    background: rgba(12,166,120,.03);
    border: 1px solid rgba(12,166,120,.10);
    border-bottom: 1px solid rgba(12,166,120,.10) !important;
    border-radius: .7rem;
    padding: 1rem 1.15rem 1.1rem !important;
    margin-bottom: .75rem !important;
    box-shadow: 0 1px 4px rgba(12,166,120,.07), 0 1px 2px rgba(0,0,0,.03);
    transition: box-shadow .18s ease;
}
.product-form-section:hover {
    box-shadow: 0 3px 10px rgba(12,166,120,.10), 0 1px 3px rgba(0,0,0,.04);
}
.product-form-section--last {
    border-bottom: 1px solid rgba(12,166,120,.10) !important;
    margin-bottom: 0 !important;
    padding-bottom: 1.1rem !important;
}
.product-form-section--media {
    background: rgba(12,166,120,.03) !important;
    border: 1px solid rgba(12,166,120,.10) !important;
    box-shadow: 0 1px 4px rgba(12,166,120,.07), 0 1px 2px rgba(0,0,0,.03) !important;
}
.product-form-section__step {
    color: #0ca678 !important;
    background: rgba(12,166,120,.12) !important;
}

/* ══ Variants & Stock sub-cards ══ */
.pf-subtoggle-card {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(12,166,120,.10);
    border-radius: .5rem;
    padding: .65rem .8rem;
    height: 100%;
}
.pf-subtoggle-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--tblr-body-color, #1d273b);
    margin-bottom: 2px;
    line-height: 1.3;
}
.pf-subtoggle-desc {
    font-size: .7rem;
    color: var(--tblr-secondary, #868c98);
    line-height: 1.4;
}
.pf-subtoggle-icon {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    border-radius: .45rem;
    background: rgba(13,92,86,.10);
    color: #0d5c56;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.pf-variants-open-btn,
#variants-view-btn {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .32rem .65rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(13,92,86,.24), 0 1px 2px rgba(13,92,86,.14);
    transition: box-shadow .2s ease, transform .15s ease;
}
#variants-view-btn:hover {
    box-shadow: 0 4px 12px rgba(13,92,86,.32), 0 1px 4px rgba(13,92,86,.18);
    transform: translateY(-1px);
}
#variants-view-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(13,92,86,.2);
}

/* ══ Single-row section heads with right-side toggle ══ */
.pf-section-row {
    align-items: center !important;
    margin-bottom: 0 !important;
}
.pf-section-row .product-form-section__title { margin-bottom: 0; }

/* ══ Prominent toggle switch ══ */
.pf-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 2.75em;
    height: 1.45em;
    border-radius: 2em;
    background-color: #d5dae1;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color .2s ease, box-shadow .15s ease;
    vertical-align: middle;
    outline: none;
}
.pf-toggle::after {
    content: '';
    position: absolute;
    top: .15em; left: .18em;
    width: 1.12em; height: 1.12em;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.pf-toggle:checked {
    background-color: #0ca678;
    box-shadow: 0 0 0 3px rgba(12,166,120,.18);
}
.pf-toggle:checked::after { transform: translateX(1.28em); }
.pf-toggle:focus { box-shadow: 0 0 0 3px rgba(12,166,120,.25); }

/* ══ Sticky columns ══ */
.product-form-media-sticky,
.product-preview-sticky {
    position: sticky;
    top: 20px;
}

/* ══ Product Preview Panel ══ */
.pp-card { border-radius: .5rem !important; }
.pp-header-label { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #868c98; }
.pp-live-pill    { font-size: .6rem; padding: .2rem .45rem; }
.pp-img-wrap  { position: relative; background: #f6f8fb; overflow: hidden; }
.pp-img       { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pp-badge {
    position: absolute; font-size: .59rem; font-weight: 700;
    padding: 3px 9px; border-radius: 20px; line-height: 1.5;
}
.pp-badge--blue  { top: 8px; left: 8px;  background: rgba(12,166,120,.13); color: #0ca678; }
.pp-badge--green { top: 8px; right: 8px; background: rgba(42,183,100,.14); color: #2ab764; }
.pp-cat-chip {
    font-size: .62rem; padding: 2px 10px; border-radius: 20px;
    background: rgba(12,166,120,.08); color: #0ca678;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 58%; display: inline-block;
}
.pp-unit-chip   { font-size: .67rem; color: #868c98; }
.pp-name        { font-size: .92rem; font-weight: 700; color: #1d273b; word-break: break-word; line-height: 1.35; }
/* Customer-facing headline price — sized for narrow preview card (ranges stay one line) */
.pp-price-line { margin-bottom: 0; }
.pp-price-line .pp-price-inline-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pp-price-line .pp-price-inline-wrap::-webkit-scrollbar { display: none; }
.pp-price.pp-customer-face,
.pp-price-line .pp-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0ca678;
    line-height: 1.2;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.pp-price-note  { font-size: .62rem; color: #868c98; font-weight: 600; margin-top: .2rem; }
.pp-expiry-chip {
    font-size: .6rem; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    background: rgba(232,93,4,.08); color: #e85d04;
}
/* Preview sections — air between blocks, top section flush inside card-body */
.pp-prev-section { margin-top: .72rem; }
.pp-prev-section:first-child { margin-top: 0; }
.pp-prev-section__label {
    font-size: .54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #868c98;
    margin-bottom: .28rem;
    line-height: 1.2;
}
.pp-tags         { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-branch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.pp-branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    font-size: .58rem;
    font-weight: 600;
    color: #0d9488;
    background: rgba(13,148,136,.08);
    border: 1px solid rgba(13,148,136,.22);
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.55;
}
.pp-branch-chip .bi {
    font-size: .5rem;
    opacity: .65;
}
.pp-stock-detail-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: #1d273b;
    line-height: 1.2;
}
.pp-stock-detail-inline__ico {
    font-size: 1rem;
    color: #0ca678;
    flex-shrink: 0;
}
.pp-stock-detail-inline__txt {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}
.pp-stock-detail-inline__lbl {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #868c98;
    font-weight: 700;
}
.pp-stock-detail-inline__num {
    font-size: .8rem;
    font-weight: 700;
    color: #1d273b;
}
.pp-meta-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pp-meta-label   { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: #868c98; font-weight: 700; margin-bottom: 2px; }
.pp-meta-value   { font-size: .8rem; font-weight: 600; color: #1d273b; }
.pp-info-row     { font-size: .74rem; color: #626976; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pp-info-val     { font-weight: 600; color: #1d273b; }
.pp-tax-detail   { font-size: .68rem; color: #1d273b; font-weight: 600; }
.pp-price-tax-label {
    font-size: .7rem;
    font-weight: 600;
    color: #626976;
    letter-spacing: .02em;
    line-height: 1.35;
}
.pp-tax-breakdown-wrap { margin-top: .28rem; }
.pp-tax-exc-oneline {
    font-size: .62rem;
    color: #626976;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: .15rem;
}
.pp-tax-breakdown {
    font-size: .62rem;
    color: #626976;
    line-height: 1.55;
}
.pp-tax-breakdown__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .4rem;
    margin-bottom: .12rem;
}
.pp-tax-breakdown__row:last-child { margin-bottom: 0; }
.pp-tax-breakdown__muted { color: #868c98; font-weight: 500; }
.pp-tax-breakdown__amt { font-weight: 600; color: #1d273b; }
.pp-tax-breakdown__op { color: #adb5bd; font-weight: 500; padding: 0 .1rem; }
.pp-tax-breakdown__note { margin-top: .28rem; font-size: .58rem; color: #868c98; font-weight: 600; letter-spacing: .02em; }
/* per-variant rows */
.pp-variant-total-stock { font-size: .62rem; font-weight: 600; color: #2ab764; background: rgba(42,183,100,.1); padding: 1px 7px; border-radius: 20px; }
.pp-variants-list .pp-vitem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .28rem 0;
}
.pp-variants-list .pp-vthumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.08); }
.pp-variants-list .pp-vsep { color: #ced4da; font-weight: 400; flex-shrink: 0; padding: 0 2px; user-select: none; }
.pp-variants-list .pp-vpay-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
}
.pp-variants-list .pp-vpay-total {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 0;
}
.pp-variants-list .pp-vpay-base-note {
    font-size: .58rem;
    color: #868c98;
    font-weight: 500;
}
.pp-variants-list .pp-vpay-name {
    font-size: .62rem;
    font-weight: 600;
    color: #626976;
    max-width: 100%;
}
.pp-variants-list .pp-vstock { font-size: .58rem; color: #868c98; font-weight: 500; align-self: center; flex-shrink: 0; white-space: nowrap; }
.pp-desc-text    {
    font-size: .76rem; color: #626976; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-empty-hint { font-size: .72rem; line-height: 1.65; padding: .5rem 0 .25rem; }

/* ══ Tag dropdown + chips ══ */
.pf-tag-dropdown {
    position: absolute; top: calc(100% + 3px); left: 0; right: 0;
    z-index: 1050; max-height: 200px; overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(13,92,86,.18);
    border-radius: .45rem;
    box-shadow: 0 6px 20px rgba(13,92,86,.12), 0 2px 6px rgba(0,0,0,.06);
}
.pf-tag-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: .45rem .75rem; cursor: pointer; transition: background .12s; background: #fff;
}
.pf-tag-item:hover { background: rgba(13,92,86,.05); }
.pf-tag-item + .pf-tag-item { border-top: 1px solid rgba(13,92,86,.07); }
.pf-tag-item__label { font-size: .84rem; font-weight: 600; color: #1d273b; }
.pf-tag-item__key   { font-size: .68rem; color: #868c98; font-family: monospace; }
.pf-tag-chip {
    display: inline-flex; flex-direction: column; position: relative;
    background: rgba(13,92,86,.07); border: 1px solid rgba(13,92,86,.15);
    border-radius: .4rem; padding: .22rem .9rem .18rem .5rem; gap: 1px;
}
.pf-tag-chip__label { font-size: .78rem; font-weight: 600; color: #0d5c56; line-height: 1.3; }
.pf-tag-chip__key   { font-size: .6rem; color: #868c98; font-family: monospace; line-height: 1.3; }
.pf-tag-chip__remove {
    position: absolute; top: 3px; right: 5px;
    background: none; border: none; padding: 0;
    font-size: .78rem; line-height: 1; color: #adb5bd; cursor: pointer;
}
.pf-tag-chip__remove:hover { color: #d63939; }

/* ══ Seller AJAX dropdown ══ */
.seller-dropdown {
    position: absolute; top: calc(100% + 3px); left: 0; right: 0;
    z-index: 1050; max-height: 220px; overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(13,92,86,.18);
    border-radius: .45rem;
    box-shadow: 0 6px 20px rgba(13,92,86,.12), 0 2px 6px rgba(0,0,0,.06);
}
.seller-item      { padding: .48rem .75rem; cursor: pointer; transition: background .12s; background: #fff; }
.seller-item:hover { background: rgba(13,92,86,.05); }
.seller-item + .seller-item { border-top: 1px solid rgba(13,92,86,.07); }
.seller-item__name { font-size: .84rem; font-weight: 600; color: #1d273b; }
.seller-item__sub  { font-size: .7rem; color: #868c98; }
.seller-no-result  { padding: .75rem; font-size: .8rem; color: #868c98; text-align: center; background: #fff; }
</style>
@endsection

@section('script')
    <script>
    (function () {
        var checkSkuUrl = @json(route('store.product.check-sku'));
        var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        var currentStoreId = {{ (int) ($storeId ?? 0) }};
        var isEdit = {{ !empty($isEdit) ? 'true' : 'false' }};
        var editProductId = {{ isset($product) ? (int) $product->id : 'null' }};

        function clearSkuErrors(form) {
            var sku = form.querySelector('#product-sku-input');
            if (sku) {
                sku.classList.remove('is-invalid');
            }
            var fb = document.getElementById('product-sku-feedback');
            if (fb) {
                fb.classList.add('d-none');
                fb.textContent = '';
            }
            form.querySelectorAll('.js-variant-sku-input').forEach(function (el) {
                el.classList.remove('is-invalid');
            });
        }

        function showInlineSku(msg) {
            var fb = document.getElementById('product-sku-feedback');
            if (fb) {
                fb.textContent = msg || '';
                fb.classList.toggle('d-none', !msg);
            }
            var sku = document.getElementById('product-sku-input');
            if (sku && msg) {
                sku.classList.add('is-invalid');
            }
        }

        function buildCheckSkuFormData(form) {
            var fd = new FormData(form);
            if (isEdit && editProductId) {
                fd.append('exclude_store_product_id', String(editProductId));
            }
            if (isEdit && editProductId) {
                var vids = [];
                form.querySelectorAll('input[name="variants[id][]"]').forEach(function (inp) {
                    var v = parseInt(inp.value, 10);
                    if (v > 0) {
                        vids.push(v);
                    }
                });
                vids.forEach(function (id) {
                    fd.append('exclude_variant_ids[]', String(id));
                });
            }
            return fd;
        }

        window.validateStoreProductFormSync = function (form) {
            if (!form || form.getAttribute('data-product-form') !== '1') {
                return true;
            }
            clearSkuErrors(form);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', checkSkuUrl, false);
            xhr.setRequestHeader('X-CSRF-TOKEN', csrf);
            xhr.send(buildCheckSkuFormData(form));
            if (xhr.status < 200 || xhr.status >= 300) {
                return true;
            }
            var res = {};
            try {
                res = JSON.parse(xhr.responseText || '{}');
            } catch (e) {
                return true;
            }
            if (res.valid) {
                return true;
            }
            if (res.inline) {
                showInlineSku(res.inline);
            }
            if (res.popup && typeof Swal !== 'undefined') {
                var rows = res.conflicts || [];
                var html = '<ul class="text-start small mb-0 ps-3">';
                for (var i = 0; i < rows.length; i++) {
                    var r = rows[i];
                    html += '<li><strong>' + (r.branch_name || '') + '</strong>: SKU already used for "<em>' + (r.existing_title || '') + '</em>"</li>';
                }
                html += '</ul>';
                Swal.fire({
                    icon: 'error',
                    title: 'SKU belongs to another product',
                    html: html + '<p class="mt-3 mb-0 small text-muted">Change the SKU or update the other product in that branch. Nothing was saved.</p>',
                });
            }
            return false;
        };

        var skuTimer = null;
        function scheduleSkuCheck(form) {
            if (!form || form.getAttribute('data-product-form') !== '1') {
                return;
            }
            clearTimeout(skuTimer);
            skuTimer = setTimeout(function () {
                runSkuCheckAsync(form);
            }, 380);
        }

        function runSkuCheckAsync(form) {
            clearSkuErrors(form);
            fetch(checkSkuUrl, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf },
                body: buildCheckSkuFormData(form),
            })
                .then(function (r) {
                    return r.json();
                })
                .then(function (res) {
                    if (res.valid) {
                        return;
                    }
                    if (res.inline) {
                        showInlineSku(res.inline);
                    }
                })
                .catch(function () {});
        }

        function branchRowDisplayName(cb) {
            var row = cb.closest('.pf-branch-row');
            if (!row) {
                return 'Branch ' + cb.value;
            }
            var fromData = row.getAttribute('data-branch-label');
            if (fromData != null && String(fromData).trim() !== '') {
                return String(fromData).trim();
            }
            var labelEl = row.querySelector('.pf-branch-row__name');
            var t = labelEl ? labelEl.textContent.trim() : '';
            return t || ('Branch ' + cb.value);
        }

        function refreshBranchTags(form) {
            var scope = form ? form.querySelector('#pf-branch-scope') : null;
            if (!scope) { return; }
            var container = scope.querySelector('#pf-branch-tags');
            if (!container) { return; }
            var checked = Array.prototype.slice.call(form.querySelectorAll('.pf-branch-cb:checked'));
            container.innerHTML = checked.map(function (cb) {
                var name = branchRowDisplayName(cb);
                var id = cb.value;
                return '<span class="pf-branch-tag" data-branch-id="' + id + '">'
                    + '<i class="bi bi-diagram-2" aria-hidden="true"></i>'
                    + name
                    + '<button type="button" class="pf-branch-tag__remove" aria-label="Remove ' + name + '" data-branch-id="' + id + '">&times;</button>'
                    + '</span>';
            }).join('');
            container.querySelectorAll('.pf-branch-tag__remove').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var bid = btn.getAttribute('data-branch-id');
                    var cb = form.querySelector('.pf-branch-cb[value="' + bid + '"]');
                    if (cb) {
                        if (form.querySelectorAll('.pf-branch-cb:checked').length > 1) {
                            cb.checked = false;
                            refreshBranchDropdownTrigger(form);
                            refreshBranchTags(form);
                            refreshPreviewBranches(form);
                            scheduleSkuCheck(form);
                        }
                    }
                });
            });
        }

        function refreshPreviewBranches(form) {
            var section = document.getElementById('pp-section-branches');
            if (!section) { return; }
            var chips = document.getElementById('pp-branches-chips');
            if (!chips) { return; }
            var checked = Array.prototype.slice.call(form.querySelectorAll('.pf-branch-cb:checked'));
            chips.innerHTML = checked.map(function (cb) {
                var name = branchRowDisplayName(cb);
                return '<span class="pp-branch-chip">'
                    + '<i class="bi bi-diagram-2" aria-hidden="true"></i>'
                    + name
                    + '</span>';
            }).join('');
        }

        function refreshBranchDropdownTrigger(form) {
            var scope = form ? form.querySelector('#pf-branch-scope') : null;
            if (!scope || !form) {
                return;
            }
            var label = scope.querySelector('.pf-branch-dd__trigger-text');
            var countEl = scope.querySelector('.pf-branch-dd__count');
            if (!label) {
                return;
            }
            var checked = Array.prototype.slice.call(form.querySelectorAll('.pf-branch-cb:checked'));
            var names = checked.map(branchRowDisplayName);
            if (countEl) {
                countEl.textContent = String(checked.length);
            }
            if (checked.length === 0) {
                label.textContent = 'Select branches…';
                return;
            }
            if (checked.length === 1) {
                label.textContent = names[0] || ('Branch ' + checked[0].value);
                return;
            }
            label.textContent = checked.length + ' branches selected';
        }

        document.addEventListener('DOMContentLoaded', function () {
            var form = document.getElementById('form-id');
            if (!form) {
                return;
            }
            var search = document.getElementById('pf-branch-search');
            if (search) {
                search.addEventListener('input', function () {
                    var q = (search.value || '').toLowerCase().trim();
                    document.querySelectorAll('.pf-branch-row').forEach(function (row) {
                        var n = (row.getAttribute('data-branch-name') || '');
                        row.style.display = !q || n.indexOf(q) !== -1 ? '' : 'none';
                    });
                });
            }
            form.querySelectorAll('.pf-branch-cb').forEach(function (cb) {
                cb.addEventListener('change', function () {
                    if (!form.querySelector('.pf-branch-cb:checked')) {
                        cb.checked = true;
                    }
                    refreshBranchDropdownTrigger(form);
                    refreshBranchTags(form);
                    refreshPreviewBranches(form);
                    scheduleSkuCheck(form);
                });
            });
            var branchScope = document.getElementById('pf-branch-scope');
            if (branchScope) {
                var btnCur = branchScope.querySelector('.pf-branch-btn-current-only');
                var btnAll = branchScope.querySelector('.pf-branch-btn-all-branches');
                if (btnCur) {
                    btnCur.addEventListener('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        form.querySelectorAll('.pf-branch-cb').forEach(function (cb) {
                            cb.checked = parseInt(cb.value, 10) === currentStoreId;
                        });
                        refreshBranchDropdownTrigger(form);
                        refreshBranchTags(form);
                        refreshPreviewBranches(form);
                        scheduleSkuCheck(form);
                    });
                }
                if (btnAll) {
                    btnAll.addEventListener('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        form.querySelectorAll('.pf-branch-cb').forEach(function (cb) {
                            cb.checked = true;
                        });
                        refreshBranchDropdownTrigger(form);
                        refreshBranchTags(form);
                        refreshPreviewBranches(form);
                        scheduleSkuCheck(form);
                    });
                }
            }
            refreshBranchDropdownTrigger(form);
            refreshBranchTags(form);
            refreshPreviewBranches(form);

            var nameInp = form.querySelector('[name="name"]');
            if (nameInp) {
                nameInp.addEventListener('input', function () {
                    scheduleSkuCheck(form);
                });
            }
            var skuInp = document.getElementById('product-sku-input');
            if (skuInp) {
                skuInp.addEventListener('input', function () {
                    scheduleSkuCheck(form);
                });
            }
            form.addEventListener('input', function (e) {
                if (e.target && e.target.classList && e.target.classList.contains('js-variant-sku-input')) {
                    scheduleSkuCheck(form);
                }
            });
        });
    })();
    </script>
    <script>
        /**
         * Load niche-specific dynamic attributes after category change.
         * Optional callback runs after fields are injected (used by draft restore).
         */
        function loadCategoryAttributes(onReady) {
            const catSel = document.getElementById('category_id');
            const container = document.getElementById('dynamic-attributes');
            if (!catSel || !container) return;

            const nicheId = catSel.options[catSel.selectedIndex]?.dataset?.nicheId;
            container.innerHTML = '';

            if (!nicheId) {
                if (typeof onReady === 'function') onReady(container);
                return;
            }

            fetch(`/store/category/${nicheId}/attributes`)
                .then(res => res.json())
                .then(attributes => {
                    attributes.forEach(attr => {
                        let field = '';

                        switch (attr.type) {
                            case 'text':
                                field = `<input type="text" 
                                            name="attributes[${attr.name}]" 
                                            class="form-control" 
                                            ${attr.required ? 'required' : ''}>`;
                                break;

                            case 'number':
                                field = `<input type="number" 
                                            name="attributes[${attr.name}]" 
                                            class="form-control" 
                                            ${attr.required ? 'required' : ''}>`;
                                break;

                            case 'select':
                                let options = '';
                                attr.options.forEach(opt => {
                                    options += `<option value="${opt}">${opt}</option>`;
                                });
                                field = `<select name="attributes[${attr.name}]" class="form-select" 
                                            ${attr.required ? 'required' : ''}>
                                        ${options}
                                    </select>`;
                                break;
                        }

                        container.innerHTML += `
                        <div class="col-md-6 col-lg-4">
                            <label class="form-label">${attr.label}</label>
                            ${field}
                        </div>`;
                    });

                    if (typeof onReady === 'function') onReady(container);
                })
                .catch(function() {
                    if (typeof onReady === 'function') onReady(container);
                });
        }

        document.getElementById('category_id').addEventListener('change', function() {
            loadCategoryAttributes();

            // Auto-select the tax assigned to this category
            if (typeof syncTaxDropdown === 'function' && window.__pfCategoryTaxMap) {
                var catId = parseInt(this.value, 10);
                var preset = catId ? (window.__pfCategoryTaxMap[catId] || null) : null;
                document.querySelectorAll('.pf-tax-row').forEach(function(row) {
                    var cb = row.querySelector('.pf-tax-cb');
                    if (!cb) return;
                    if (preset && preset.name && row.dataset.taxName === preset.name) {
                        cb.checked = true;
                    } else if (preset) {
                        cb.checked = false;
                    }
                    // If no preset for this category, leave existing selections unchanged
                });
                if (preset) syncTaxDropdown();
            }
        });

        document.getElementById('toggle-more-info').addEventListener('click', function() {
            let row = document.getElementById('more-info-row');

            row.classList.toggle('d-none');

            this.innerHTML = row.classList.contains('d-none') ?
                '<i class="bi bi-text-paragraph me-1"></i>Add description' :
                '<i class="bi bi-chevron-up me-1"></i>Hide description';
        });

        document.addEventListener('DOMContentLoaded', function() {
            const mainImgInput = document.getElementById('product-image-input');
            const mainAddBtn = document.querySelector('.product-form-cover__add');
            if (mainImgInput && mainAddBtn) {
                mainAddBtn.addEventListener('click', function() {
                    mainImgInput.click();
                });
            }

            document.querySelectorAll('.product-gallery-slot').forEach(function(slot) {
                const file = slot.querySelector('.gallery-file-input');
                const hidden = slot.querySelector('.gallery-existing-input');
                const addBtn = slot.querySelector('.product-gallery-slot__add');
                const img = slot.querySelector('.product-gallery-slot__img');
                const clearBtn = slot.querySelector('.product-gallery-slot__clear');
                if (!file || !hidden || !addBtn || !img || !clearBtn) return;

                function showPreview(src) {
                    slot.classList.add('has-image');
                    img.src = src;
                    img.classList.remove('d-none');
                    addBtn.classList.add('d-none');
                    clearBtn.classList.remove('d-none');
                }

                function resetSlot() {
                    slot.classList.remove('has-image');
                    img.src = '';
                    img.classList.add('d-none');
                    addBtn.classList.remove('d-none');
                    clearBtn.classList.add('d-none');
                    file.value = '';
                    hidden.value = '';
                }

                addBtn.addEventListener('click', function() {
                    file.click();
                });

                clearBtn.addEventListener('click', function() {
                    resetSlot();
                });

                file.addEventListener('change', function() {
                    if (!file.files || !file.files[0]) return;
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        hidden.value = '';
                        showPreview(e.target.result);
                    };
                    reader.readAsDataURL(file.files[0]);
                });
            });
        });

        // TAX SECTION LOGIC
        let taxIndex = 0;

        // Product tags — suggestions + label/key chips
        (function () {
            const input    = document.getElementById('product-tag-input');
            const hidden   = document.getElementById('product-tags-hidden');
            const chipsBox = document.getElementById('product-tags-chips');
            const dropdown = document.getElementById('product-tag-dropdown');
            if (!input || !hidden || !chipsBox || !dropdown) return;

            // tags = [{label, key}]
            var tags = [];

            function toKey(str) {
                return str.trim().toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }
            function toLabel(key) {
                return key.split('-').map(function(w) {
                    return w.charAt(0).toUpperCase() + w.slice(1);
                }).join(' ');
            }
            function toTitleCase(str) {
                return str.replace(/\b([a-zA-Z])/g, function(c) { return c.toUpperCase(); });
            }

            // Init from existing hidden value (comma-separated keys)
            if (hidden.value.trim()) {
                hidden.value.split(',').map(function(t){ return t.trim(); }).filter(Boolean)
                    .forEach(function(key) {
                        if (key && !tags.find(function(t){ return t.key === key; })) {
                            tags.push({ label: toLabel(key), key: key });
                        }
                    });
            }

            function sync() {
                hidden.value = tags.map(function(t){ return t.key; }).join(', ');
                if (typeof syncLivePreview === 'function') syncLivePreview();
                renderChips();
            }

            function renderChips() {
                chipsBox.innerHTML = '';
                tags.forEach(function(tag, idx) {
                    var chip = document.createElement('span');
                    chip.className = 'pf-tag-chip';
                    chip.innerHTML =
                        '<span class="pf-tag-chip__label">' + tag.label + '</span>' +
                        '<span class="pf-tag-chip__key">' + tag.key + '</span>' +
                        '<button type="button" class="pf-tag-chip__remove" aria-label="Remove">&times;</button>';
                    chip.querySelector('.pf-tag-chip__remove').addEventListener('click', function() {
                        tags.splice(idx, 1);
                        sync();
                    });
                    chipsBox.appendChild(chip);
                });
            }

            function addTag(raw) {
                if (!raw || !String(raw).trim()) return;
                var clean = String(raw).replace(/[^a-zA-Z0-9\s-]/g, '').trim();
                if (!clean) return;
                var key   = toKey(clean);
                if (!key) return;
                if (tags.find(function(t){ return t.key === key; })) return; // dedup
                tags.push({ label: toTitleCase(clean), key: key });
                sync();
            }

            // Character whitelist on keypress
            input.addEventListener('keypress', function(e) {
                if (e.key.length === 1 && !/[a-zA-Z0-9\s\-]/.test(e.key)) e.preventDefault();
            });
            // Strip invalid chars on paste / input
            input.addEventListener('input', function() {
                var clean = this.value.replace(/[^a-zA-Z0-9\s-]/g, '');
                if (this.value !== clean) this.value = clean;
                fetchSuggestions(this.value.trim());
            });

            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    var val = input.value.replace(/,/g, '').trim();
                    if (val) addTag(val);
                    input.value = '';
                    closeDropdown();
                } else if (e.key === 'Escape') {
                    closeDropdown();
                }
            });

            input.addEventListener('blur', function() {
                setTimeout(function() {
                    var val = input.value.trim();
                    if (val) addTag(val);
                    input.value = '';
                    closeDropdown();
                }, 160);
            });

            // ── Suggestions dropdown ──
            var suggestTimer;
            function fetchSuggestions(q) {
                clearTimeout(suggestTimer);
                if (!q) { closeDropdown(); return; }
                suggestTimer = setTimeout(function() {
                    fetch('{{ route('store.product.tags.search') }}?q=' + encodeURIComponent(q), {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(function(r){ return r.json(); })
                    .then(function(list) {
                        var filtered = list.filter(function(t){
                            return !tags.find(function(e){ return e.key === t.key; });
                        });
                        if (!filtered.length) { closeDropdown(); return; }
                        dropdown.innerHTML = filtered.map(function(t) {
                            return '<div class="pf-tag-item" data-key="' + t.key + '" data-label="' + t.label + '">' +
                                '<span class="pf-tag-item__label">' + t.label + '</span>' +
                                '<span class="pf-tag-item__key">' + t.key + '</span>' +
                                '</div>';
                        }).join('');
                        dropdown.classList.remove('d-none');
                    })
                    .catch(function(){ closeDropdown(); });
                }, 220);
            }

            function closeDropdown() {
                dropdown.innerHTML = '';
                dropdown.classList.add('d-none');
            }

            dropdown.addEventListener('click', function(e) {
                var item = e.target.closest('.pf-tag-item');
                if (!item) return;
                addTag(item.dataset.label);
                input.value = '';
                closeDropdown();
                input.focus();
            });

            document.addEventListener('click', function(e) {
                if (!e.target.closest('.product-form-tags-wrap')) closeDropdown();
            });

            sync();

            window.reloadProductTagsFromHidden = function () {
                tags.length = 0;
                if (hidden.value.trim()) {
                    hidden.value.split(',').map(function(t){ return t.trim(); }).filter(Boolean)
                        .forEach(function(key) {
                            if (key && !tags.find(function(t){ return t.key === key; })) {
                                tags.push({ label: toLabel(key), key: key });
                            }
                        });
                }
                renderChips();
                if (typeof syncLivePreview === 'function') syncLivePreview();
            };
        })();

        /* ── Tax multi-select dropdown ── */
        function syncTaxDropdown() {
            var chips      = document.getElementById('pf-tax-chips');
            var hiddenWrap = document.getElementById('pf-tax-hidden-inputs');
            var isTaxable  = document.getElementById('is_taxable_hidden');
            var triggerTxt = document.getElementById('pf-tax-trigger-text');
            if (!chips || !hiddenWrap) return;

            var selected = [];
            document.querySelectorAll('.pf-tax-row').forEach(function(row) {
                var cb = row.querySelector('.pf-tax-cb');
                if (cb && cb.checked) {
                    selected.push({
                        name:   row.dataset.taxName   || '',
                        rate:   row.dataset.taxRate   || '0',
                        type:   row.dataset.taxType   || 'percentage',
                        method: row.dataset.taxMethod || 'exc',
                    });
                }
            });

            // Update trigger label
            if (triggerTxt) {
                if (selected.length === 0) {
                    triggerTxt.textContent = 'Select tax…';
                } else if (selected.length === 1) {
                    triggerTxt.textContent = '1 tax selected';
                } else {
                    triggerTxt.textContent = selected.length + ' taxes selected';
                }
            }

            // Update is_taxable hidden input
            if (isTaxable) isTaxable.value = selected.length > 0 ? '1' : '0';

            // Render badge chips
            chips.innerHTML = selected.map(function(t) {
                return '<span class="badge bg-primary-lt text-primary fw-normal">' + t.name + '</span>';
            }).join('');

            // Render hidden form inputs
            hiddenWrap.innerHTML = selected.map(function(t, i) {
                return '<input type="hidden" name="taxes[' + i + '][tax_name]" value="' + t.name + '">' +
                       '<input type="hidden" name="taxes[' + i + '][tax_rate]" value="' + t.rate + '">' +
                       '<input type="hidden" name="taxes[' + i + '][tax_type]" value="' + t.type + '">' +
                       '<input type="hidden" name="taxes[' + i + '][tax_method]" value="' + t.method + '">';
            }).join('');

            if (typeof syncLivePreview === 'function') syncLivePreview();
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Wire up tax checkboxes
            document.querySelectorAll('.pf-tax-cb').forEach(function(cb) {
                cb.addEventListener('change', syncTaxDropdown);
            });
            // Sync initial state (edit mode pre-checked)
            syncTaxDropdown();
        });

        // STOCK MANAGEMENT LOGIC
        function toggleStockFields() {
            const checkbox = document.getElementById('manage_stock');
            const stockRow = document.getElementById('stock-fields');

            if (!checkbox || !stockRow) return;

            if (checkbox.checked) {
                stockRow.classList.remove('d-none');
            } else {
                stockRow.classList.add('d-none');

                // Optional: clear values when hidden
                stockRow.querySelectorAll('input, select').forEach(el => {
                    el.value = '';
                });
            }
        }

        // ✅ Run BEFORE user interaction (on page load)
        document.addEventListener('DOMContentLoaded', function() {
            toggleStockFields();

            var ms = document.getElementById('manage_stock');
            if (ms) {
                ms.addEventListener('change', toggleStockFields);
            }
        });

        // VARIANTS LOGIC
        function refreshVariantModalEmptyState() {
            const wrapper = document.getElementById('variant-groups-wrapper');
            const empty = document.getElementById('variant-modal-empty');
            if (!wrapper || !empty) return;
            const hasGroup = wrapper.querySelector('.variant-group-box');
            empty.classList.toggle('d-none', !!hasGroup);
        }

        function variantModalNotify(message, variant) {
            const el = document.getElementById('variant-modal-feedback');
            if (!el) return;
            el.textContent = message;
            el.className = 'variant-modal-feedback alert small py-2 px-3 mb-3 ' +
                (variant === 'error' ? 'alert-danger' : 'alert-info');
            el.classList.remove('d-none');
            clearTimeout(variantModalNotify._t);
            variantModalNotify._t = setTimeout(function() {
                el.classList.add('d-none');
                el.textContent = '';
            }, 4500);
        }

        function updateVariantsViewBtn() {
            const btn = document.getElementById('variants-view-btn');
            const lbl = document.getElementById('variants-view-label');
            const clearBtn = document.getElementById('variants-clear-btn');
            const hiddenInput = document.getElementById('has_variants_hidden');
            const stockSection = document.getElementById('stock-section');
            const infoBlock = document.getElementById('variants-info-block');
            const infoText = document.getElementById('variants-info-text');
            if (!btn) return;
            let count = 0;
            document.querySelectorAll('#variant-groups-wrapper .variant-row').forEach(function() { count++; });
            const hasVariantsNow = count > 0;
            if (hiddenInput) hiddenInput.value = hasVariantsNow ? '1' : '0';
            btn.classList.remove('btn-primary', 'btn-outline-primary');
            btn.classList.add(hasVariantsNow ? 'btn-primary' : 'btn-outline-primary');
            if (lbl) {
                lbl.textContent = hasVariantsNow
                    ? count + (count === 1 ? ' variant' : ' variants') + ' · Edit'
                    : 'Manage Variants';
            }
            if (clearBtn) clearBtn.classList.toggle('d-none', !hasVariantsNow);
            if (stockSection) stockSection.classList.toggle('d-none', hasVariantsNow);
            if (infoBlock) infoBlock.classList.toggle('d-none', !hasVariantsNow);
            if (infoText && hasVariantsNow) {
                infoText.textContent = count + (count === 1 ? ' variant' : ' variants') + ' configured — stock is tracked per variant.';
            }
            syncBasePriceContext();
        }

        function syncBasePriceContext() {
            var sym = '{{ $currencySym }}';
            var hiddenInput = document.getElementById('has_variants_hidden');
            var labelEl = document.getElementById('basic-price-label');
            var priceInput = document.getElementById('product-price-input');
            var stockFields = document.getElementById('stock-fields');
            var variantsOn = !!(hiddenInput && hiddenInput.value === '1');

            // Issue 2: hide plain stock fields when variants are active
            if (stockFields) stockFields.classList.toggle('d-none', variantsOn);

            if (!priceInput) return;

            if (variantsOn) {
                // Collect variant prices
                var prices = [];
                document.querySelectorAll('#variant-groups-wrapper .variant-row [name="variants[price][]"]').forEach(function(el) {
                    var v = parseFloat(el.value);
                    if (!isNaN(v) && v > 0) prices.push(v);
                });

                priceInput.setAttribute('readonly', '');
                priceInput.classList.add('text-muted');

                if (prices.length > 0) {
                    var minP = Math.min.apply(null, prices);
                    var maxP = Math.max.apply(null, prices);
                    priceInput.value = minP.toFixed(2);
                    if (labelEl) {
                        var rangeText = minP === maxP
                            ? sym + minP.toFixed(2)
                            : sym + minP.toFixed(2) + ' – ' + sym + maxP.toFixed(2);
                        labelEl.innerHTML = 'Price Range <span class="text-muted small fw-normal">(' + rangeText + ')</span> <span class="text-danger">*</span>';
                    }
                } else {
                    if (labelEl) labelEl.innerHTML = 'Price <span class="text-danger">*</span>';
                }
            } else {
                priceInput.removeAttribute('readonly');
                priceInput.classList.remove('text-muted');
                if (labelEl) labelEl.innerHTML = 'Base Price <span class="text-danger">*</span>';
            }
        }

        function toggleCostSection() {
            var t = document.getElementById('toggle_cost_supplier');
            var b = document.getElementById('cost-supplier-body');
            if (t && b) b.classList.toggle('d-none', !t.checked);
        }

        function toggleProductDetailsSection() {
            var t = document.getElementById('toggle_product_details');
            var b = document.getElementById('product-details-body');
            if (t && b) b.classList.toggle('d-none', !t.checked);
        }

        document.addEventListener('DOMContentLoaded', function() {
            var tCost    = document.getElementById('toggle_cost_supplier');
            var tDetails = document.getElementById('toggle_product_details');
            if (tCost)    { toggleCostSection();           tCost.addEventListener('change', toggleCostSection); }
            if (tDetails) { toggleProductDetailsSection(); tDetails.addEventListener('change', toggleProductDetailsSection); }
        });

        (function profitMarginPriceHint() {
            function bind() {
                var profitEl = document.getElementById('js-profit-margin-percent');
                var costEl = document.querySelector('[name="buying_cost"]');
                var shipEl = document.querySelector('[name="shipping_cost"]');
                var priceEl = document.getElementById('product-price-input');
                if (!profitEl || !costEl || !priceEl) {
                    return;
                }
                function recalc() {
                    var body = document.getElementById('cost-supplier-body');
                    if (!body || body.classList.contains('d-none')) {
                        return;
                    }
                    var c = (parseFloat(costEl.value) || 0) + (shipEl ? (parseFloat(shipEl.value) || 0) : 0);
                    var p = parseFloat(profitEl.value);
                    if (isNaN(p) || c <= 0) {
                        return;
                    }
                    var calcPrice = (c * (1 + p / 100)).toFixed(2);
                    var hvEl = document.getElementById('has_variants_hidden');
                    var variantsOn = hvEl && hvEl.value === '1';
                    if (variantsOn) {
                        // Fill every variant price input with the calculated price
                        document.querySelectorAll('#variant-groups-wrapper .variant-row [name="variants[price][]"]').forEach(function(el) {
                            el.value = calcPrice;
                        });
                        if (typeof updateVariantsViewBtn === 'function') updateVariantsViewBtn();
                    } else {
                        priceEl.value = calcPrice;
                        if (typeof syncLivePreview === 'function') syncLivePreview();
                    }
                }
                [costEl, shipEl, profitEl].forEach(function (el) {
                    if (!el) {
                        return;
                    }
                    el.addEventListener('input', recalc);
                    el.addEventListener('change', recalc);
                });
            }
            document.addEventListener('DOMContentLoaded', bind);
        })();

        document.addEventListener('DOMContentLoaded', function() {

            const manageVariantStock = document.getElementById('manage_variant_stock');
            const groupsWrapper = document.getElementById('variant-groups-wrapper');

            // Sync price label on load; stock visibility already set by PHP class
            syncBasePriceContext();

            const groupTemplate = document.getElementById('variant-group-template');
            const rowTemplate = document.getElementById('variant-row-template');

            if (!groupTemplate || !rowTemplate || !groupsWrapper) {
                return;
            }

            const variantsModalEl = document.getElementById('variantsModal');
            if (variantsModalEl) {
                variantsModalEl.addEventListener('shown.bs.modal', function() {
                    refreshVariantModalEmptyState();
                });
                variantsModalEl.addEventListener('hidden.bs.modal', function() {
                    updateVariantsViewBtn();
                });
            }

            refreshVariantModalEmptyState();

            /* ── Variants clear (trash) button ── */
            var clearVariantsBtn = document.getElementById('variants-clear-btn');
            if (clearVariantsBtn) {
                clearVariantsBtn.addEventListener('click', function() {
                    if (!confirm('Remove all variants? This cannot be undone.')) return;
                    var gw = document.getElementById('variant-groups-wrapper');
                    if (gw) gw.innerHTML = '';
                    refreshVariantModalEmptyState();
                    updateVariantsViewBtn();
                    if (typeof syncLivePreview === 'function') syncLivePreview();
                });
            }

            /* ===============================
            ADD VARIANT GROUP (Size / Color)
            =============================== */
            document.addEventListener('click', function(e) {
                const btn = e.target.closest('.add-group');
                if (!btn) return;

                const groupId = btn.dataset.groupId;
                const groupName = btn.dataset.groupName;

                if (groupsWrapper.querySelector(`[data-group-id="${groupId}"]`)) {
                    variantModalNotify('"' + groupName + '" is already in your list. Scroll down to edit it, or remove that card first.', 'info');
                    return;
                }

                const clone = groupTemplate.content.cloneNode(true);
                const box = clone.querySelector('.variant-group-box');

                box.dataset.groupId = groupId;
                box.querySelector('.group-title').innerText = groupName;
                const hintEl = box.querySelector('.group-title-hint');
                if (hintEl) hintEl.textContent = groupName;

                groupsWrapper.appendChild(box);
                refreshVariantModalEmptyState();
            });

            /* ===============================
            ADD VARIANT ROW
            =============================== */
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.add-variant-row')) return;

                const groupBox = e.target.closest('.variant-group-box');
                const groupId = groupBox.dataset.groupId;

                const rowClone = rowTemplate.content.cloneNode(true);
                rowClone.querySelector('.variant-group-id').value = groupId;

                if (manageVariantStock && !manageVariantStock.checked) {
                    rowClone.querySelectorAll('.variant-stock-field').forEach(function(el) {
                        el.classList.add('d-none');
                        const input = el.querySelector('input');
                        if (input) input.value = '';
                    });
                }

                groupBox.querySelector('.variant-rows').appendChild(rowClone);
            });

            /* ===============================
            REMOVE VARIANT ROW
            =============================== */
            document.addEventListener('click', function(e) {
                if (e.target.closest('.remove-variant')) {
                    e.target.closest('.variant-row').remove();
                }
            });

            /* ===============================
            REMOVE ENTIRE GROUP
            =============================== */
            document.addEventListener('click', function(e) {
                if (e.target.closest('.remove-group')) {
                    e.target.closest('.variant-group-box').remove();
                    refreshVariantModalEmptyState();
                }
            });

        });

        document.addEventListener('change', function(e) {

            if (e.target.classList.contains('variant-image-input')) {

                const input = e.target;
                const preview = input.closest('.variant-row')
                    .querySelector('.variant-image-preview');

                if (input.files && input.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function(ev) {
                        preview.src = ev.target.result;
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            }

        });

        /* ===============================
        MANAGE VARIANT STOCK TOGGLE
        =============================== */
        const manageVariantStock = document.getElementById('manage_variant_stock');

        function toggleVariantStockFields() {
            const manageVariantStockEl = document.getElementById('manage_variant_stock');
            if (!manageVariantStockEl) return;
            const show = manageVariantStockEl.checked;

            document.querySelectorAll('.variant-stock-field').forEach(function(el) {
                el.classList.toggle('d-none', !show);

                if (!show) {
                    const input = el.querySelector('input[name*="[stock]"]');
                    if (input) input.value = '';
                }
            });
        }

        // run on load (popup open case)
        if (manageVariantStock) {
            toggleVariantStockFields();

            manageVariantStock.addEventListener('change', toggleVariantStockFields);
        }

        /* ══════════════════════════════════════
           LIVE PREVIEW SYNC  (comprehensive)
           ══════════════════════════════════════ */
        window.syncLivePreview = function () {
            var sym = '{{ $currencySym }}';
            var hasContent = false;

            function ppEl(id)   { return document.getElementById(id); }
            function ppInp(nm)  { return document.querySelector('[name="' + nm + '"]'); }
            function ppShow(id) { var e=ppEl(id); if(e) e.classList.remove('d-none'); }
            function ppHide(id) { var e=ppEl(id); if(e) e.classList.add('d-none'); }
            function ppText(id, val) { var e=ppEl(id); if(e) e.textContent = val; }
            function ppToggle(id, vis) { vis ? ppShow(id) : ppHide(id); }

            // ── Name ──
            var nameVal = (ppInp('name') || {}).value || '';
            nameVal = nameVal.trim();
            ppText('pp-name', nameVal || 'Product Name');
            if (nameVal) hasContent = true;
            ppToggle('pp-section-name', !!nameVal);

            // ── Helpers (pricing / tax preview) ──
            function escTxt(s) {
                return String(s == null ? '' : s)
                    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }
            function rnd2(n) { return Math.round(n * 100) / 100; }
            function fmtMoney(n) { return sym + rnd2(n).toFixed(2); }

            /**
             * @typedef {Object} ExcRule
             * @property {string} name
             * @property {boolean} isPercent
             * @property {number} rate
             */

            /**
             * @param {boolean} taxCheckboxOn
             * @returns {Object} { incParts, excRules, hasInclusive, hasExclusive }
             */
            function scanTaxDescriptors(taxCheckboxOn) {
                var incParts = [];
                /** @type {ExcRule[]} */
                var excRules = [];
                if (!taxCheckboxOn) return { incParts: [], excRules: [], hasInclusive: false, hasExclusive: false };

                // New: read from multi-select tax dropdown checkboxes
                document.querySelectorAll('.pf-tax-row').forEach(function(row) {
                    var cb = row.querySelector('.pf-tax-cb');
                    if (!cb || !cb.checked) return;
                    var txName = (row.dataset.taxName || '').trim();
                    if (!txName) return;
                    var txRate = parseFloat(row.dataset.taxRate) || 0;
                    var txType = row.dataset.taxType || 'percentage';
                    var txMeth = row.dataset.taxMethod || 'exc';
                    var isPercent = (txType === 'percent' || txType === 'percentage');
                    var upperName = txName.charAt(0).toUpperCase() + txName.slice(1);
                    var rateLbl = isPercent ? (txRate + '%') : fmtMoney(txRate);

                    if (txMeth === 'inc') {
                        incParts.push(rateLbl + ' ' + txName.toLowerCase());
                    } else if (txMeth === 'exc') {
                        excRules.push({
                            name: upperName,
                            isPercent: isPercent,
                            rate: isPercent ? txRate : rnd2(txRate)
                        });
                    }
                });

                return {
                    incParts: incParts,
                    excRules: excRules,
                    hasInclusive: incParts.length > 0,
                    hasExclusive: excRules.length > 0
                };
            }

            function exclusiveAddon(base, rules) {
                var add = 0;
                (rules || []).forEach(function(r) {
                    if (r.isPercent) add += base * (r.rate / 100);
                    else add += r.rate;
                });
                return rnd2(add);
            }

            /**
             * @typedef {Object} VarOpt
             * @property {string} name
             * @property {number} basePrice
             * @property {number} stock
             * @property {string} img
             */

            // ── Parse tax descriptors before building rows (rates only; dollar math uses bases later)
            var taxCbEl = ppEl('is_taxable_hidden') || ppEl('is_taxable');
            var taxOn = taxCbEl && (taxCbEl.type === 'hidden' ? taxCbEl.value === '1' : taxCbEl.checked);
            var taxDesc = scanTaxDescriptors(taxOn);

            // ── Shelf / catalogue base price (fallback when no typed variant prices yet)
            var priceVal = parseFloat((ppInp('price') || {}).value) || 0;
            ppHide('pp-price-note');
            var ppPriceTaxLbl = ppEl('pp-price-tax-label');
            var ppTaxExcRow = ppEl('pp-tax-exc-row');

            if (ppPriceTaxLbl) { ppPriceTaxLbl.textContent = ''; ppPriceTaxLbl.classList.add('d-none'); }
            if (ppTaxExcRow) { ppTaxExcRow.innerHTML = ''; ppTaxExcRow.classList.add('d-none'); }

            var hvEl = ppEl('has_variants_hidden') || ppEl('has_variants');
            var variantsOn = hvEl ? (hvEl.type === 'hidden' ? hvEl.value === '1' : hvEl.checked) : false;

            /** @type {VarOpt[]} */
            var variantOpts = [];
            var variantPricesNumeric = [];

            if (variantsOn) {
                var allVRows = document.querySelectorAll('#variant-groups-wrapper .variant-row');
                var totalVStock = 0;
                var vHtml = '';

                allVRows.forEach(function(row) {
                    var nameEl = row.querySelector('[name="variants[name][]"]');
                    var priceEl = row.querySelector('[name="variants[price][]"]');
                    var stockEl = row.querySelector('[name="variants[stock][]"]');
                    var imgEl = row.querySelector('.variant-image-preview');
                    var vName = nameEl ? nameEl.value.trim() : '';
                    var vPriceBase = priceEl ? (parseFloat(priceEl.value) || 0) : 0;
                    var vStock = stockEl ? (parseInt(stockEl.value, 10) || 0) : 0;
                    var vImg = imgEl ? (imgEl.getAttribute('src') || '') : '';
                    totalVStock += vStock;
                    if (!vName) return;

                    variantOpts.push({ name: vName, basePrice: vPriceBase, stock: vStock, img: vImg });
                    variantPricesNumeric.push(vPriceBase);

                    var exAdd = exclusiveAddon(vPriceBase, taxDesc.excRules);
                    var customerLine = rnd2(vPriceBase + exAdd);

                    var lineMainAmt = fmtMoney(customerLine);
                    var subTail = '';

                    if (taxDesc.hasExclusive && exAdd > 0) {
                        subTail = fmtMoney(vPriceBase) + ' + ' + fmtMoney(exAdd) + ' tax';
                    } else if (taxDesc.hasInclusive && !taxDesc.hasExclusive) {
                        lineMainAmt = fmtMoney(vPriceBase);
                        subTail = 'incl. ' + taxDesc.incParts.join(', ');
                    } else if (!taxDesc.hasInclusive && !taxDesc.hasExclusive) {
                        lineMainAmt = fmtMoney(vPriceBase);
                    }

                    vHtml +=
                        '<div class="pp-vitem">' +
                            '<img src="' + String(vImg).replace(/"/g, '') + '" alt="" class="pp-vthumb">' +
                            '<span class="pp-vsep" aria-hidden="true">&ndash;</span>' +
                            '<div class="pp-vpay-col">' +
                                '<span class="pp-vpay-total">' + lineMainAmt + '</span>' +
                                (subTail ? '<span class="pp-vpay-base-note">' + escTxt(subTail) + '</span>' : '') +
                                '<span class="pp-vpay-name">' + escTxt(vName) + '</span>' +
                            '</div>' +
                            '<span class="pp-vstock">' + vStock + ' qty</span>' +
                        '</div>';
                });

                var ppVList = ppEl('pp-variants-list');
                if (ppVList) {
                    ppVList.innerHTML = vHtml || '<span class="text-muted small">Open the variant panel to add options</span>';
                }

                var pvts = ppEl('pp-variant-total-stock');
                if (pvts) {
                    pvts.textContent = totalVStock + ' total stock';
                    pvts.classList.toggle('d-none', totalVStock === 0);
                }
                ppToggle('pp-stock-badge', true);
                ppText('pp-stock-text', totalVStock + ' in stock');

                if (variantPricesNumeric.length > 0) {
                    priceVal = Math.min.apply(Math, variantPricesNumeric);
                }

                ppToggle('pp-variant-badge', true);
                ppToggle('pp-variants-section', true);
            } else {
                variantOpts = [];
                ppToggle('pp-variant-badge', false);
                ppToggle('pp-variants-section', false);
            }

            // ── Compose headline (#pp-price) + tax garnish ──

            /** @param {number} base */
            function headlineSingleBaseCustomer(base, options) {
                options = options || {};
                ppText('pp-price', '');
                ppHide('pp-price-note');

                if (options.placeholder) {
                    ppText('pp-price', options.placeholder);
                    return;
                }

                var b = rnd2(base);
                if (taxDesc.hasExclusive && !taxDesc.hasInclusive) {
                    var ad = exclusiveAddon(b, taxDesc.excRules);
                    var tot = rnd2(b + ad);
                    ppText('pp-price', fmtMoney(tot));
                    if (ppTaxExcRow) {
                        ppTaxExcRow.innerHTML =
                            '<div class="pp-tax-exc-oneline">' +
                            fmtMoney(b) + ' + ' + fmtMoney(ad) + ' tax</div>';
                        ppTaxExcRow.classList.remove('d-none');
                    }
                } else if (taxDesc.hasInclusive && !taxDesc.hasExclusive) {
                    ppText('pp-price', fmtMoney(b));
                    if (ppPriceTaxLbl) {
                        ppPriceTaxLbl.textContent = 'incl. ' + taxDesc.incParts.join(', ');
                        ppPriceTaxLbl.classList.remove('d-none');
                    }
                } else {
                    ppText('pp-price', fmtMoney(b));
                    if (taxDesc.hasInclusive && ppPriceTaxLbl) {
                        ppPriceTaxLbl.textContent = 'incl. ' + taxDesc.incParts.join(', ');
                        ppPriceTaxLbl.classList.remove('d-none');
                    }
                    if (taxDesc.hasExclusive) {
                        var ad2 = exclusiveAddon(b, taxDesc.excRules);
                        var tot2 = rnd2(b + ad2);
                        ppText('pp-price', fmtMoney(tot2));
                        ppTaxExcRow.innerHTML =
                            '<div class="pp-tax-exc-oneline">' +
                            fmtMoney(b) + ' + ' + fmtMoney(ad2) + ' tax</div>';
                        ppTaxExcRow.classList.remove('d-none');
                    }
                }
            }

            if (variantsOn) {
                if (variantPricesNumeric.length === 0) {
                    ppText('pp-price', 'Set variant prices');
                    ppShow('pp-price-note');
                    ppText('pp-price-note', 'Add priced options to see totals');
                    if (!taxDesc.hasInclusive && !taxDesc.hasExclusive && priceVal <= 0) {
                        ppText('pp-price', '—');
                    }
                } else {
                    var minB = Math.min.apply(Math, variantPricesNumeric);
                    var maxB = Math.max.apply(Math, variantPricesNumeric);
                    var singleShelf = variantPricesNumeric.length === 1 || rnd2(maxB - minB) === 0;

                    if (singleShelf) {
                        headlineSingleBaseCustomer(minB, {});
                    } else if (!taxDesc.hasExclusive && !taxDesc.hasInclusive) {
                        ppText('pp-price', fmtMoney(minB) + '\u2009\u2014\u2009' + fmtMoney(maxB));
                    } else if (taxDesc.hasExclusive && !taxDesc.hasInclusive) {
                        var minPay = rnd2(minB + exclusiveAddon(minB, taxDesc.excRules));
                        var maxPay = rnd2(maxB + exclusiveAddon(maxB, taxDesc.excRules));
                        ppText('pp-price', fmtMoney(minPay) + '\u2009\u2014\u2009' + fmtMoney(maxPay));
                        var exLow = exclusiveAddon(minB, taxDesc.excRules);
                        ppTaxExcRow.innerHTML =
                            '<div class="pp-tax-exc-oneline">' +
                            fmtMoney(minB) + ' + ' + fmtMoney(exLow) + ' tax</div>';
                        ppTaxExcRow.classList.remove('d-none');
                    } else if (taxDesc.hasInclusive && !taxDesc.hasExclusive) {
                        ppText('pp-price', fmtMoney(minB) + '\u2009\u2014\u2009' + fmtMoney(maxB));
                        if (ppPriceTaxLbl) {
                            ppPriceTaxLbl.textContent = 'incl. ' + taxDesc.incParts.join(', ');
                            ppPriceTaxLbl.classList.remove('d-none');
                        }
                    } else {
                        var minPB = rnd2(minB + exclusiveAddon(minB, taxDesc.excRules));
                        var maxPB = rnd2(maxB + exclusiveAddon(maxB, taxDesc.excRules));
                        ppText('pp-price', fmtMoney(minPB) + '\u2009\u2014\u2009' + fmtMoney(maxPB));
                        if (ppPriceTaxLbl) {
                            ppPriceTaxLbl.textContent = 'incl. ' + taxDesc.incParts.join(', ');
                            ppPriceTaxLbl.classList.remove('d-none');
                        }
                        var exLo2 = exclusiveAddon(minB, taxDesc.excRules);
                        ppTaxExcRow.innerHTML =
                            '<div class="pp-tax-exc-oneline">' +
                            fmtMoney(minB) + ' + ' + fmtMoney(exLo2) + ' tax</div>';
                        ppTaxExcRow.classList.remove('d-none');
                    }
                }
            } else {
                headlineSingleBaseCustomer(priceVal, {});
            }

            // ── Category ──
            var catSel = document.getElementById('category_id');
            var catText = '';
            if (catSel && catSel.selectedIndex >= 0) catText = catSel.options[catSel.selectedIndex].text.trim();
            var catOk = catText && catText !== 'Select category';
            ppText('pp-category', catOk ? catText : '');
            if (catOk) hasContent = true;
            var secCat = ppEl('pp-section-cat-unit');

            // ── Unit ──
            var unitSel = ppInp('unit');
            var unitText = unitSel && unitSel.selectedIndex >= 0 ? unitSel.options[unitSel.selectedIndex].text.trim() : '';
            var unitOk = unitText && unitText !== 'Select unit';
            if (unitOk) { ppText('pp-unit-wrap', unitText); ppShow('pp-unit-wrap'); }
            else ppHide('pp-unit-wrap');
            if (secCat) secCat.classList.toggle('d-none', !catOk && !unitOk);

            // ── Tags ──
            var th = ppEl('product-tags-hidden');
            var tArr = (th && th.value) ? th.value.split(',').map(function(t){return t.trim();}).filter(Boolean) : [];
            var ppTagsEl = ppEl('pp-tags');
            if (ppTagsEl) ppTagsEl.innerHTML = tArr.map(function(t){
                return '<span class="badge bg-primary-lt text-primary" style="font-size:.6rem;font-weight:500">' + t + '</span>';
            }).join('');
            ppToggle('pp-section-tags', tArr.length > 0);

            // ── Expiry ──
            var expVal = (ppInp('expiry_date') || {}).value || '';
            if (expVal) {
                var d = new Date(expVal);
                ppText('pp-expiry-wrap', 'Exp ' + d.toLocaleDateString(undefined, {month:'short',day:'numeric',year:'numeric'}));
                ppShow('pp-expiry-wrap');
            } else ppHide('pp-expiry-wrap');

            var priceInpEarly = ppInp('price');
            var hasPriceInput = !!(priceInpEarly && String(priceInpEarly.value).trim() !== '');

            // ── Stock management (basic product — variant stock is synced earlier) ──
            var msEl    = ppEl('manage_stock');
            var stockEl = ppInp('stock');
            var skuEl   = ppInp('sku');
            var rackEl  = ppInp('rack_no');
            var stockOn = !!(msEl && msEl.checked);
            var stockQty = stockEl ? (stockEl.value || '0') : '0';

            if (!variantsOn) {
                ppToggle('pp-stock-badge', stockOn);
                if (stockOn) ppText('pp-stock-text', stockQty + ' in stock');
                ppToggle('pp-stock-meta', stockOn);
                if (stockOn) ppText('pp-stock-val', stockQty);
            } else {
                ppToggle('pp-stock-meta', false);
            }

            var skuVal = skuEl ? skuEl.value.trim() : '';
            if (!variantsOn) {
                ppToggle('pp-sku-meta', stockOn && !!skuVal);
                ppText('pp-sku-val', skuVal || '—');
            }

            var rackVal = rackEl ? rackEl.value.trim() : '';
            ppToggle('pp-rack-meta', stockOn && !!rackVal);
            ppText('pp-rack-val', rackVal);

            // ── Buying cost ──
            var bcVal = parseFloat((ppInp('buying_cost') || {}).value) || 0;
            ppToggle('pp-cost-meta', bcVal > 0);
            ppText('pp-cost-val', bcVal > 0 ? sym + bcVal.toFixed(2) : '—');

            ppToggle('pp-section-price',
                !!(variantsOn || hasPriceInput || (taxCbEl && taxCbEl.checked)));

            // ── Supplier ──
            var supHidden = ppEl('seller-hidden');
            var supVal = (supHidden ? supHidden.value : ((ppInp('cost_seller_name') || {}).value || '')).trim();
            ppToggle('pp-section-supplier', !!supVal);
            ppText('pp-supplier-val', supVal);

            // ── Description ──
            var descVal = ((ppInp('description') || {}).value || '').trim();
            ppToggle('pp-section-desc', !!descVal);
            ppText('pp-desc-val', descVal);

            // ── Empty-state hint ──
            ppToggle('pp-hint', !hasContent);

            // ── Meta wrap: show Details only if a cell is visible ──
            function metaCellVisible(pid) {
                var el = ppEl(pid);
                return !!(el && !el.classList.contains('d-none'));
            }
            ppToggle('pp-meta-section',
                metaCellVisible('pp-stock-meta')
                || metaCellVisible('pp-sku-meta')
                || metaCellVisible('pp-rack-meta')
                || metaCellVisible('pp-cost-meta'));
        };

        @if(!$isEdit)
        (function productAddDraftPersistence() {
            var DRAFT_TTL_MS = 60 * 60 * 1000;
            var form = document.getElementById('form-id');
            if (!form || form.getAttribute('data-product-draft') !== '1') return;

            var store = form.getAttribute('data-draft-store') || '0';
            var user = form.getAttribute('data-draft-user') || '0';
            var STORAGE_KEY = 'pos_product_add_draft_v1_s' + store + '_u' + user;
            var storageBase = form.getAttribute('data-storage-base') || '';

            var restoring = false;
            var debounceTimer;

            function productFormHasMeaningfulData() {
                var f = form;
                if (!f) return false;

                var nameEl = f.querySelector('[name="name"]');
                if (nameEl && nameEl.value.trim()) return true;

                var priceEl = f.querySelector('[name="price"]');
                if (priceEl && String(priceEl.value).trim() !== '') return true;

                var expEl = f.querySelector('[name="expiry_date"]');
                if (expEl && String(expEl.value).trim() !== '') return true;

                var unitEl = f.querySelector('[name="unit"]');
                if (unitEl && String(unitEl.value).trim() !== '') return true;

                var cat = f.querySelector('[name="store_category_id"]');
                if (cat && cat.value) return true;

                var th = document.getElementById('product-tags-hidden');
                if (th && th.value.trim()) return true;

                var descTa = f.querySelector('textarea[name="description"]');
                if (descTa && descTa.value.trim()) return true;
                if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances && CKEDITOR.instances.description) {
                    var html = CKEDITOR.instances.description.getData() || '';
                    if (html.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ').trim()) return true;
                }

                var vgw = document.getElementById('variant-groups-wrapper');
                if (vgw && vgw.querySelector('.variant-row')) return true;

                var hv = document.getElementById('has_variants_hidden');
                if (hv && hv.value === '1') return true;

                var itax = document.getElementById('is_taxable_hidden') || document.getElementById('is_taxable');
                if (itax && (itax.type === 'hidden' ? itax.value === '1' : itax.checked)) return true;

                var mst = document.getElementById('manage_stock');
                if (mst && mst.checked) return true;

                var sku = f.querySelector('[name="sku"]');
                if (sku && sku.value.trim()) return true;

                var stock = f.querySelector('[name="stock"]');
                if (stock && String(stock.value).trim() !== '') return true;

                var gals = f.querySelectorAll('.gallery-existing-input');
                for (var gi = 0; gi < gals.length; gi++) {
                    if (gals[gi].value && gals[gi].value.trim()) return true;
                }

                var attrInputs = f.querySelectorAll('[name^="attributes["]');
                for (var ai = 0; ai < attrInputs.length; ai++) {
                    if (attrInputs[ai].value && String(attrInputs[ai].value).trim()) return true;
                }

                var bc = f.querySelector('[name="buying_cost"]');
                if (bc && String(bc.value).trim() !== '') return true;

                var sh = document.getElementById('seller-hidden');
                if (sh && sh.value.trim()) return true;

                var rack = f.querySelector('[name="rack_no"]');
                if (rack && rack.value.trim()) return true;

                var imgIn = document.getElementById('product-image-input');
                if (imgIn && imgIn.files && imgIn.files.length) return true;

                return false;
            }

            function refreshClearButtonVisibility() {
                var btn = document.getElementById('pf-float-clear');
                if (!btn) return;
                var show = productFormHasMeaningfulData();
                btn.classList.toggle('d-none', !show);
                btn.setAttribute('aria-hidden', show ? 'false' : 'true');
            }

            window.refreshProductClearButton = refreshClearButtonVisibility;

            function escCssIdent(name) {
                if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(name);
                return String(name).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
            }

            function readStoredDraft() {
                try {
                    return localStorage.getItem(STORAGE_KEY);
                } catch (e) {
                    return null;
                }
            }

            function isExpired(wrapped) {
                if (!wrapped || !wrapped.savedAt) return true;
                return (Date.now() - wrapped.savedAt) > DRAFT_TTL_MS;
            }

            function clearDraftStorage() {
                try {
                    localStorage.removeItem(STORAGE_KEY);
                } catch (e) { /* ignore */ }
            }

            function saveDraftNow() {
                if (restoring) return;
                var wrapped = collectDraft();
                try {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(wrapped));
                } catch (e) { /* quota */ }
            }

            function scheduleSaveDraft() {
                refreshClearButtonVisibility();
                if (restoring) return;
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(saveDraftNow, 450);
            }

            /**
             * innerHTML ignores live .value / .checked on inputs — snapshots them into markup
             * so draft restore keeps variant stocks, prices, names, hidden ids, etc.
             */
            function flushControlledFieldsIntoMarkup(container) {
                if (!container) return;
                container.querySelectorAll('input').forEach(function (el) {
                    var ty = String(el.type || '').toLowerCase();
                    if (ty === 'file' || ty === 'button' || ty === 'submit' || ty === 'image') return;
                    if (ty === 'checkbox' || ty === 'radio') {
                        if (el.checked) el.setAttribute('checked', 'checked');
                        else el.removeAttribute('checked');
                        return;
                    }
                    el.setAttribute('value', el.value == null ? '' : String(el.value));
                });
                container.querySelectorAll('textarea').forEach(function (el) {
                    el.textContent = el.value;
                });
                container.querySelectorAll('select').forEach(function (sel) {
                    Array.prototype.slice.call(sel.options || []).forEach(function (opt) {
                        if (opt.selected) opt.setAttribute('selected', 'selected');
                        else opt.removeAttribute('selected');
                    });
                });
            }

            function collectDraft() {
                var wrapped = {
                    savedAt: Date.now(),
                    version: 1,
                    mainFields: [],
                    attributes: {},
                    variantGroupsHtml: '',
                    taxRowsHtml: '',
                    taxIndexSnap: 0,
                    ui: {}
                };

                var vg = document.getElementById('variant-groups-wrapper');
                if (vg) {
                    flushControlledFieldsIntoMarkup(vg);
                    wrapped.variantGroupsHtml = vg.innerHTML;
                }

                var tr = document.getElementById('tax-rows');
                if (tr) {
                    flushControlledFieldsIntoMarkup(tr);
                    wrapped.taxRowsHtml = tr.innerHTML;
                }

                wrapped.taxIndexSnap = (typeof taxIndex !== 'undefined')
                    ? taxIndex
                    : (tr ? tr.querySelectorAll('.tax-row').length : 0);

                var occMap = {};

                form.querySelectorAll('input, select, textarea').forEach(function(el) {
                    if (!el.name || el.name === '_token') return;
                    if (el.type === 'file' || el.type === 'submit' || el.type === 'button') return;
                    if (el.closest('#variant-groups-wrapper')) return;
                    if (el.closest('#tax-rows')) return;

                    var attrMatch = el.name.match(/^attributes\[(.+)\]$/);
                    if (attrMatch) {
                        wrapped.attributes[attrMatch[1]] = el.value;
                        return;
                    }

                    var occ = occMap[el.name] || 0;
                    occMap[el.name] = occ + 1;

                    if (el.type === 'checkbox') {
                        wrapped.mainFields.push({ n: el.name, i: occ, k: 'c', checked: !!el.checked });
                    } else if (el.type === 'radio') {
                        if (el.checked) wrapped.mainFields.push({ n: el.name, i: occ, k: 'r', value: el.value });
                    } else {
                        wrapped.mainFields.push({ n: el.name, i: occ, k: 'v', value: el.value });
                    }
                });

                var moreRow = document.getElementById('more-info-row');
                var prodDet = document.getElementById('product-details-body');
                var tCost = document.getElementById('toggle_cost_supplier');
                var tDet = document.getElementById('toggle_product_details');

                wrapped.ui = {
                    moreInfoOpen: !!(moreRow && !moreRow.classList.contains('d-none')),
                    productDetailsOpen: !!(prodDet && !prodDet.classList.contains('d-none')),
                    costOpen: !!(tCost && tCost.checked),
                    productDetailsToggle: !!(tDet && tDet.checked)
                };

                return wrapped;
            }

            function applyMainFields(wrapped) {
                var fields = wrapped.mainFields || [];
                fields.forEach(function(f) {
                    var els = form.querySelectorAll('[name="' + escCssIdent(f.n) + '"]');
                    var el = els[f.i];
                    if (!el) return;

                    if (f.k === 'c' && el.type === 'checkbox') {
                        el.checked = !!f.checked;
                    } else if (f.k === 'r' && el.type === 'radio') {
                        el.checked = (el.value === f.value);
                    } else if (f.k === 'v' && el.type !== 'checkbox' && el.type !== 'radio') {
                        el.value = f.value != null ? f.value : '';
                    }
                });
            }

            function syncGallerySlotsFromHidden() {
                if (!storageBase) return;
                document.querySelectorAll('.product-gallery-slot').forEach(function(slot) {
                    var hidden = slot.querySelector('.gallery-existing-input');
                    var img = slot.querySelector('.product-gallery-slot__img');
                    var addBtn = slot.querySelector('.product-gallery-slot__add');
                    var clearBtn = slot.querySelector('.product-gallery-slot__clear');
                    var path = hidden ? hidden.value.trim() : '';
                    if (!path) {
                        slot.classList.remove('has-image');
                        if (img) { img.src = ''; img.classList.add('d-none'); }
                        if (addBtn) addBtn.classList.remove('d-none');
                        if (clearBtn) clearBtn.classList.add('d-none');
                        return;
                    }
                    var src = storageBase.replace(/\/$/, '') + '/' + String(path).replace(/^\//, '');
                    slot.classList.add('has-image');
                    if (img) {
                        img.src = src;
                        img.classList.remove('d-none');
                    }
                    if (addBtn) addBtn.classList.add('d-none');
                    if (clearBtn) clearBtn.classList.remove('d-none');
                });
            }

            function setDescriptionFromDraft(val) {
                var ta = form.querySelector('textarea[name="description"]');
                if (!ta) return;
                ta.value = val != null ? val : '';
                function tryCk() {
                    if (typeof CKEDITOR === 'undefined' || !CKEDITOR.instances) return false;
                    var inst = CKEDITOR.instances[ta.name] || CKEDITOR.instances.description;
                    if (inst) {
                        inst.setData(ta.value);
                        return true;
                    }
                    return false;
                }
                if (!tryCk()) {
                    setTimeout(function() { tryCk(); }, 200);
                    setTimeout(function() { tryCk(); }, 800);
                }
            }

            window.restoreProductAddDraft = function () {
                var raw = readStoredDraft();
                if (!raw) return false;

                var wrapped;
                try {
                    wrapped = JSON.parse(raw);
                } catch (e) {
                    clearDraftStorage();
                    return false;
                }

                if (isExpired(wrapped)) {
                    clearDraftStorage();
                    return false;
                }

                restoring = true;

                try {
                    applyMainFields(wrapped);

                    var taxRowsEl = document.getElementById('tax-rows');
                    if (taxRowsEl && wrapped.taxRowsHtml != null) {
                        taxRowsEl.innerHTML = wrapped.taxRowsHtml;
                    }
                    if (typeof wrapped.taxIndexSnap === 'number' && wrapped.taxIndexSnap >= 0) {
                        taxIndex = wrapped.taxIndexSnap;
                    } else if (taxRowsEl) {
                        taxIndex = taxRowsEl.querySelectorAll('.tax-row').length;
                    }

                    var vgw = document.getElementById('variant-groups-wrapper');
                    if (vgw && wrapped.variantGroupsHtml != null) {
                        vgw.innerHTML = wrapped.variantGroupsHtml;
                    }

                    var catSel = document.getElementById('category_id');
                    if (catSel && catSel.value) {
                        loadCategoryAttributes(function () {
                            var attrs = wrapped.attributes || {};
                            Object.keys(attrs).forEach(function (key) {
                                var inp = form.querySelector('[name="attributes[' + key + ']"]');
                                if (inp) inp.value = attrs[key];
                            });
                        });
                    }

                    if (wrapped.ui) {
                        var mir = document.getElementById('more-info-row');
                        var btnMore = document.getElementById('toggle-more-info');
                        if (mir && btnMore) {
                            mir.classList.toggle('d-none', !wrapped.ui.moreInfoOpen);
                            btnMore.innerHTML = mir.classList.contains('d-none')
                                ? '<i class="bi bi-text-paragraph me-1"></i>Add description'
                                : '<i class="bi bi-chevron-up me-1"></i>Hide description';
                        }
                        var pdb = document.getElementById('product-details-body');
                        var tpd = document.getElementById('toggle_product_details');
                        if (tpd) tpd.checked = !!wrapped.ui.productDetailsToggle;
                        if (pdb) pdb.classList.toggle('d-none', !(wrapped.ui.productDetailsOpen || wrapped.ui.productDetailsToggle));
                        var tcs = document.getElementById('toggle_cost_supplier');
                        var csb = document.getElementById('cost-supplier-body');
                        if (tcs) tcs.checked = !!wrapped.ui.costOpen;
                        if (csb) csb.classList.toggle('d-none', !wrapped.ui.costOpen);
                    }

                    var descField = wrapped.mainFields && wrapped.mainFields.find(function(f) {
                        return f.k === 'v' && f.n === 'description';
                    });
                    if (descField) setDescriptionFromDraft(descField.value);

                    syncGallerySlotsFromHidden();

                    if (typeof window.reloadProductTagsFromHidden === 'function') {
                        window.reloadProductTagsFromHidden();
                    }

                    if (typeof toggleTaxSettings === 'function') toggleTaxSettings();

                    var ms = document.getElementById('manage_stock');
                    var stockRow = document.getElementById('stock-fields');
                    if (typeof toggleStockFields === 'function') toggleStockFields();

                    if (typeof updateVariantsViewBtn === 'function') updateVariantsViewBtn();
                    if (typeof syncBasePriceContext === 'function') syncBasePriceContext();

                    var hv = document.getElementById('has_variants');
                    var stockSec = document.getElementById('stock-section');
                    if (hv && stockSec) {
                        if (hv.checked) stockSec.classList.add('d-none');
                        else stockSec.classList.remove('d-none');
                    }

                    if (typeof toggleVariantStockFields === 'function') toggleVariantStockFields();

                    if (typeof refreshVariantModalEmptyState === 'function') refreshVariantModalEmptyState();

                    if (typeof syncLivePreview === 'function') syncLivePreview();
                } finally {
                    restoring = false;
                }

                if (typeof showToastr === 'function') {
                    showToastr('info', 'Draft restored', 'Unsaved product details were loaded (saved locally for 1 hour).', typeof FastOptions !== 'undefined' ? FastOptions : {});
                }

                refreshClearButtonVisibility();

                return true;
            };

            window.clearProductAddDraft = function () {
                clearTimeout(debounceTimer);
                debounceTimer = null;
                clearDraftStorage();
                restoring = true;
                try {
                    var form = document.getElementById('form-id');
                    if (!form) {
                        return;
                    }

                    if (typeof form.reset === 'function') {
                        form.reset();
                    }

                    form.querySelectorAll('input[type="file"]').forEach(function (el) {
                        el.value = '';
                    });

                    form.querySelectorAll('input').forEach(function (el) {
                        var ty = String(el.type || '').toLowerCase();
                        if (ty === 'file' || ty === 'button' || ty === 'submit' || ty === 'reset') {
                            return;
                        }
                        if (ty === 'hidden') {
                            if (!el.name) {
                                return;
                            }
                            var hkeep = ['_token', 'primary_branch_id', 'is_taxable', 'is_manage_basic_stock', 'sync_original_sku', 'sync_original_name'];
                            if (hkeep.indexOf(el.name) !== -1) {
                                return;
                            }
                            if (el.name === 'branch_ids[]') {
                                return;
                            }
                            el.value = '';
                            return;
                        }
                        if (ty === 'checkbox' || ty === 'radio') {
                            return;
                        }
                        if (!el.name) {
                            return;
                        }
                        el.value = '';
                    });

                    form.querySelectorAll('textarea').forEach(function (ta) {
                        ta.value = '';
                    });

                    form.querySelectorAll('select').forEach(function (sel) {
                        if (sel.name === 'store_category_id' || sel.name === 'unit') {
                            sel.selectedIndex = 0;
                        }
                    });

                    var hv = document.getElementById('has_variants');
                    if (hv) {
                        hv.checked = false;
                    }
                    var ms = document.getElementById('manage_stock');
                    if (ms) {
                        ms.checked = form.getAttribute('data-biz-manage-stock') === '1';
                    }
                    // Clear tax selections on form reset
                    document.querySelectorAll('.pf-tax-cb').forEach(function(cb) { cb.checked = false; });
                    syncTaxDropdown();

                    var tCost = document.getElementById('toggle_cost_supplier');
                    if (tCost) {
                        tCost.checked = false;
                    }
                    var csb = document.getElementById('cost-supplier-body');
                    if (csb) {
                        csb.classList.add('d-none');
                    }
                    var tDet = document.getElementById('toggle_product_details');
                    if (tDet) {
                        tDet.checked = false;
                    }
                    var pdb = document.getElementById('product-details-body');
                    if (pdb) {
                        pdb.classList.add('d-none');
                    }
                    var moreRow = document.getElementById('more-info-row');
                    if (moreRow) {
                        moreRow.classList.add('d-none');
                    }
                    var tMoreBtn = document.getElementById('toggle-more-info');
                    if (tMoreBtn) {
                        tMoreBtn.innerHTML = '<i class="bi bi-text-paragraph me-1"></i>Add description';
                    }

                    var sellerIn = document.getElementById('seller-search-input');
                    var sellerHid = document.getElementById('seller-hidden');
                    var sellerClr = document.getElementById('seller-clear-btn');
                    if (sellerIn) {
                        sellerIn.value = '';
                    }
                    if (sellerHid) {
                        sellerHid.value = '';
                    }
                    if (sellerClr) {
                        sellerClr.classList.add('d-none');
                    }

                    var profitEl = document.getElementById('js-profit-margin-percent');
                    if (profitEl) {
                        var dp = parseFloat(form.getAttribute('data-clear-default-profit') || '25', 10);
                        profitEl.value = isNaN(dp) ? '25' : String(dp);
                    }

                    var tagIn = document.getElementById('product-tag-input');
                    var tagHid = document.getElementById('product-tags-hidden');
                    if (tagIn) {
                        tagIn.value = '';
                    }
                    if (tagHid) {
                        tagHid.value = '';
                    }

                    var branchSearch = document.getElementById('pf-branch-search');
                    if (branchSearch) {
                        branchSearch.value = '';
                    }
                    var scope = document.getElementById('pf-branch-scope');
                    var curId = scope ? parseInt(scope.getAttribute('data-current-store-id') || '0', 10) : 0;
                    form.querySelectorAll('.pf-branch-cb').forEach(function (cb) {
                        cb.checked = curId > 0 && parseInt(cb.value, 10) === curId;
                    });
                    document.querySelectorAll('.pf-branch-row').forEach(function (row) {
                        row.style.display = '';
                    });
                    if (typeof refreshBranchDropdownTrigger === 'function') {
                        refreshBranchDropdownTrigger(form);
                    }

                    var dyn = document.getElementById('dynamic-attributes');
                    if (dyn) {
                        dyn.innerHTML = '';
                    }
                    if (document.getElementById('tax-rows')) {
                        document.getElementById('tax-rows').innerHTML = '';
                    }
                    taxIndex = 0;
                    var vgw2 = document.getElementById('variant-groups-wrapper');
                    if (vgw2) {
                        vgw2.innerHTML = '';
                    }
                    var ip = document.getElementById('image-preview');
                    var ph = ip && ip.getAttribute('data-placeholder-src');
                    if (ip && ph) {
                        ip.src = ph;
                    }
                    var ppImg = document.getElementById('pp-img');
                    if (ppImg && ph) {
                        ppImg.src = ph;
                    }
                    var coverAdd = document.querySelector('.product-form-cover__add');
                    if (coverAdd) {
                        coverAdd.classList.remove('d-none');
                    }
                    document.querySelectorAll('.product-gallery-slot').forEach(function (slot) {
                        var hidden = slot.querySelector('.gallery-existing-input');
                        var file = slot.querySelector('.gallery-file-input');
                        var imgEl = slot.querySelector('.product-gallery-slot__img');
                        var addBtn = slot.querySelector('.product-gallery-slot__add');
                        var clearBtn = slot.querySelector('.product-gallery-slot__clear');
                        if (hidden) {
                            hidden.value = '';
                        }
                        if (file) {
                            file.value = '';
                        }
                        slot.classList.remove('has-image');
                        if (imgEl) {
                            imgEl.src = '';
                            imgEl.classList.add('d-none');
                        }
                        if (addBtn) {
                            addBtn.classList.remove('d-none');
                        }
                        if (clearBtn) {
                            clearBtn.classList.add('d-none');
                        }
                    });

                    if (typeof toggleTaxSettings === 'function') {
                        toggleTaxSettings();
                    }
                    if (typeof updateVariantsViewBtn === 'function') {
                        updateVariantsViewBtn();
                    }
                    if (typeof syncBasePriceContext === 'function') {
                        syncBasePriceContext();
                    }
                    if (typeof toggleStockFields === 'function') {
                        toggleStockFields();
                    }
                    if (typeof toggleVariantStockFields === 'function') {
                        toggleVariantStockFields();
                    }
                    if (typeof refreshVariantModalEmptyState === 'function') {
                        refreshVariantModalEmptyState();
                    }
                    if (typeof window.reloadProductTagsFromHidden === 'function') {
                        window.reloadProductTagsFromHidden();
                    }
                    document.querySelectorAll('textarea.ck-edit').forEach(function (ta) {
                        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances) {
                            var inst = CKEDITOR.instances[ta.name] || CKEDITOR.instances.description;
                            if (inst) {
                                try {
                                    inst.setData('');
                                } catch (e2) { /* ignore */ }
                            }
                        }
                        ta.value = '';
                    });

                    var hv2 = document.getElementById('has_variants');
                    var stockSec = document.getElementById('stock-section');
                    if (hv2 && stockSec) {
                        stockSec.classList.toggle('d-none', !!hv2.checked);
                    }

                    if (typeof syncLivePreview === 'function') {
                        syncLivePreview();
                    }
                } finally {
                    restoring = false;
                }
                refreshClearButtonVisibility();
            };

            function scheduleSaveDraftFromFormEvent(e) {
                if (restoring) {
                    return;
                }
                if (e.target && e.target.closest && e.target.closest('#pf-float-clear')) {
                    return;
                }
                scheduleSaveDraft();
            }

            document.addEventListener('input', function (e) {
                if (e.target && e.target.closest && e.target.closest('#form-id')) {
                    scheduleSaveDraftFromFormEvent(e);
                }
            }, true);
            document.addEventListener('change', function (e) {
                if (e.target && e.target.closest && e.target.closest('#form-id')) {
                    scheduleSaveDraftFromFormEvent(e);
                }
            }, true);
            document.addEventListener('click', function (e) {
                if (e.target && e.target.closest && e.target.closest('#form-id')) {
                    scheduleSaveDraftFromFormEvent(e);
                }
            }, true);

            window.addEventListener('product-add-draft-clear', function () {
                if (typeof window.clearProductAddDraft === 'function') {
                    window.clearProductAddDraft();
                } else {
                    clearDraftStorage();
                }
            });

            document.addEventListener('DOMContentLoaded', function () {
                var btn = document.getElementById('pf-float-clear');
                if (btn) {
                    btn.addEventListener('click', function () {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                title: 'Clear product form?',
                                text: 'This removes all fields and the saved draft.',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Yes, clear',
                                cancelButtonText: 'Cancel',
                                customClass: { confirmButton: 'btn btn-danger mt-2', cancelButton: 'btn btn-secondary ms-2 mt-2' },
                                buttonsStyling: false
                            }).then(function (r) {
                                if (r.isConfirmed && typeof window.clearProductAddDraft === 'function') {
                                    window.clearProductAddDraft();
                                }
                            });
                        } else if (window.confirm('Clear all fields and saved draft?')) {
                            window.clearProductAddDraft();
                        }
                    });
                }
                refreshClearButtonVisibility();
            });
        })();
        @endif

        document.addEventListener('DOMContentLoaded', function () {
            @if(!$isEdit)
            if (typeof window.restoreProductAddDraft === 'function') {
                window.restoreProductAddDraft();
            }
            if (typeof window.refreshProductClearButton === 'function') {
                window.refreshProductClearButton();
            }
            @endif
            syncLivePreview();

            // Main image → both left-side preview and right-side live preview
            var mImgInput = document.getElementById('product-image-input');
            if (mImgInput) {
                mImgInput.addEventListener('change', function () {
                    if (this.files && this.files[0]) {
                        var rd = new FileReader();
                        rd.onload = function (ev) {
                            var imgPrev = document.getElementById('image-preview');
                            if (imgPrev) imgPrev.src = ev.target.result;
                            var addBtn = document.querySelector('.product-form-cover__add');
                            if (addBtn) addBtn.classList.add('d-none');
                            var ppImg = document.getElementById('pp-img');
                            if (ppImg) ppImg.src = ev.target.result;
                        };
                        rd.readAsDataURL(this.files[0]);
                    }
                });
            }

            // Wire static form fields
            var watchFields = [
                'name','price','expiry_date','unit','has_variants',
                'is_manage_basic_stock','stock','sku','rack_no',
                'buying_cost','is_taxable','description'
            ];
            watchFields.forEach(function (n) {
                document.querySelectorAll('[name="' + n + '"]').forEach(function (fe) {
                    fe.addEventListener('input', syncLivePreview);
                    fe.addEventListener('change', syncLivePreview);
                });
            });
            document.getElementById('category_id')?.addEventListener('change', syncLivePreview);

            // Dynamic tax rows — delegate
            document.addEventListener('input', function(e) {
                if (e.target.closest('#tax-rows')) syncLivePreview();
            });
            document.addEventListener('change', function(e) {
                if (e.target.closest('#tax-rows')) syncLivePreview();
            });

            // Variant panel changes — delegate + modal close
            document.addEventListener('input', function(e) {
                if (e.target.closest('#variant-groups-wrapper')) setTimeout(syncLivePreview, 30);
            });
            var varModal = document.getElementById('variantsModal');
            if (varModal) varModal.addEventListener('hidden.bs.modal', syncLivePreview);

            // Buttons that add/remove tax rows or variant groups/rows
            document.addEventListener('click', function(e) {
                if (e.target.closest('.add-group') || e.target.closest('.remove-group') ||
                    e.target.closest('.add-variant-row') || e.target.closest('.remove-variant') ||
                    e.target.closest('#add-tax-row') || e.target.closest('.remove-tax')) {
                    setTimeout(syncLivePreview, 80);
                }
            });
        });

        /* ── Seller AJAX search ── */
        (function() {
            var input    = document.getElementById('seller-search-input');
            var hidden   = document.getElementById('seller-hidden');
            var dropdown = document.getElementById('seller-dropdown');
            var clearBtn = document.getElementById('seller-clear-btn');
            if (!input || !hidden || !dropdown || !clearBtn) return;

            var timer;
            function closeDropdown() { dropdown.innerHTML = ''; dropdown.classList.add('d-none'); }
            function setSelected(name) {
                input.value  = name;
                hidden.value = name;
                clearBtn.classList.toggle('d-none', !name);
                if (typeof syncLivePreview === 'function') syncLivePreview();
            }

            input.addEventListener('input', function() {
                clearTimeout(timer);
                var q = this.value.trim();
                hidden.value = q;
                clearBtn.classList.toggle('d-none', !q);
                if (typeof syncLivePreview === 'function') syncLivePreview();
                if (!q) { closeDropdown(); return; }
                timer = setTimeout(function() {
                    fetch('{{ route('store.customers.index') }}?q=' + encodeURIComponent(q), {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(function(r) { return r.json(); })
                    .then(function(list) {
                        if (!list.length) {
                            dropdown.innerHTML = '<div class="seller-no-result">No customers found for "' + q + '"</div>';
                        } else {
                            dropdown.innerHTML = list.map(function(c) {
                                var sub = [c.phone, c.email].filter(Boolean).join(' · ');
                                return '<div class="seller-item" data-name="' + c.name + '">' +
                                    '<div class="seller-item__name">' + c.name + '</div>' +
                                    (sub ? '<div class="seller-item__sub">' + sub + '</div>' : '') +
                                    '</div>';
                            }).join('');
                        }
                        dropdown.classList.remove('d-none');
                    })
                    .catch(function() { closeDropdown(); });
                }, 270);
            });

            dropdown.addEventListener('click', function(e) {
                var item = e.target.closest('.seller-item');
                if (!item) return;
                setSelected(item.dataset.name);
                closeDropdown();
            });
            clearBtn.addEventListener('click', function() { setSelected(''); closeDropdown(); });
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.seller-search-wrap')) closeDropdown();
            });
        })();

        /* ── Validation: mark section on submit attempt ── */
        document.addEventListener('DOMContentLoaded', function () {
            var form = document.getElementById('form-id');
            if (!form) return;
            form.addEventListener('submit', function () {
                var nameVal  = (form.querySelector('[name="name"]')  || {}).value || '';
                var priceVal = (form.querySelector('[name="price"]') || {}).value || '';
                var hasErr   = !nameVal.trim() || !priceVal.trim();
                var sec1 = document.getElementById('pf-sec-1');
                if (sec1) sec1.classList.toggle('pf-sec-has-error', hasErr);
            }, true);

            // Clear error as soon as user types
            ['name', 'price'].forEach(function(nm) {
                var el = form.querySelector('[name="' + nm + '"]');
                if (el) el.addEventListener('input', function() {
                    var sec1 = document.getElementById('pf-sec-1');
                    var nameOk  = !!(form.querySelector('[name="name"]')  || {}).value?.trim();
                    var priceOk = !!(form.querySelector('[name="price"]') || {}).value?.trim();
                    var ok = nameOk && priceOk;
                    if (sec1) sec1.classList.toggle('pf-sec-has-error', !ok);
                });
            });
        });
    </script>

    @if ($isEdit)
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                /* ============================
                    1️⃣ PREFILL BASIC PRODUCT INFO
                ============================ */
                @if (isset($product))
                    const product = {!! json_encode($product) !!};

                    // Basic fields
                    document.querySelector('[name="name"]').value = product.name;
                    var skuField = document.querySelector('[name="sku"]');
                    if (skuField) {
                        skuField.value = product.sku;
                    }
                    document.querySelector('[name="price"]').value = product.price;
                    const costSellerEl = document.querySelector('[name="cost_seller_name"]');
                    if (costSellerEl) costSellerEl.value = product.cost_seller_name || '';
                    ['buying_cost', 'shipping_cost'].forEach(function (field) {
                        const el = document.querySelector('[name="' + field + '"]');
                        if (el) el.value = (product[field] != null && product[field] !== '') ? product[field] : '';
                    });
                    document.querySelector('[name="description"]').value = product.description;
                    var msb = document.querySelector('input[name="is_manage_basic_stock"][type="checkbox"]');
                    if (msb) {
                        msb.checked = !!product.is_manage_basic_stock;
                    }
                    // Tax is now managed via multi-select dropdown; no toggle to set
                    var hvInput = document.getElementById('has_variants_hidden');
                    if (hvInput) hvInput.value = product.is_variant ? '1' : '0';

                    // Toggle stock fields & tax settings
                    toggleStockFields();
                    toggleVariantStockFields();

                    /* ============================
                        2️⃣ PREFILL DYNAMIC ATTRIBUTES
                    ============================ */
                    const dynamicAttrContainer = document.getElementById('dynamic-attributes');
                    if (product.product_attributes.length) {
                        product.product_attributes.forEach(attr => {
                            const fieldEl = dynamicAttrContainer.querySelector(
                                `[name="attributes[${attr.key}]"]`);
                            if (fieldEl) fieldEl.value = attr.value;
                        });
                    }

                    /* ============================
                        3️⃣ PREFILL TAXES
                    ============================ */
                    const taxRowsContainer = document.getElementById('tax-rows');
                    if (taxRowsContainer && product.taxes.length) {
                        product.taxes.forEach((tax, index) => {
                            addTaxRow();
                            const row = taxRowsContainer.children[index];

                            row.querySelector('.tax-name').value = tax.tax_name;
                            row.querySelector('.tax-rate').value = tax.tax_rate;
                            row.querySelector('.tax-type').value = tax.tax_type == 'percent' || tax.tax_type == 'percentage'?{{App\Templates\I_STATUS::TAX_PERCENTAGE}}:{{App\Templates\I_STATUS::TAX_FIXED}};
                            row.querySelector('.tax-method').value = tax.tax_method;
                        });
                    }
                    toggleTaxSettings();


                    if (product.variants.length) {
                        const groupsWrapper = document.getElementById('variant-groups-wrapper');
                        const groupTemplate = document.getElementById('variant-group-template');
                        const rowTemplate = document.getElementById('variant-row-template');
                        const manageVariantStock = document.getElementById('manage_variant_stock');

                        product.variants.forEach(variant => {
                            const groupId = variant.group.id;
                            const groupName = variant.group.name;

                            // 1️⃣ Check if group exists
                            let groupBox = groupsWrapper.querySelector(
                                `.variant-group-box[data-group-id="${groupId}"]`);

                            if (!groupBox) {
                                const clone = groupTemplate.content.cloneNode(true);
                                groupBox = clone.querySelector('.variant-group-box');
                                groupBox.dataset.groupId = groupId;
                                groupBox.querySelector('.group-title').innerText = groupName;
                                const hintPre = groupBox.querySelector('.group-title-hint');
                                if (hintPre) hintPre.textContent = groupName;
                                groupsWrapper.appendChild(groupBox);
                            }

                            // 2️⃣ Clone row
                            const rowClone = rowTemplate.content.cloneNode(true);
                            const row = rowClone.querySelector('.variant-row');

                            // Ensure all inputs exist before assigning
                            const inputs = {
                                id: row.querySelector('[name="variants[id][]"]'),
                                name: row.querySelector('[name="variants[name][]"]'),
                                price: row.querySelector('[name="variants[price][]"]'),
                                sku: row.querySelector('[name="variants[sku][]"]'),
                                stock: row.querySelector('[name="variants[stock][]"]'),
                                groupId: row.querySelector('.variant-group-id')
                            };

                            if (inputs.groupId) inputs.groupId.value = groupId;
                            if (inputs.id) inputs.id.value = variant.id;
                            if (inputs.name) inputs.name.value = variant.name;
                            if (inputs.price) inputs.price.value = variant.price;
                            if (inputs.sku) inputs.sku.value = variant.sku;
                            if (inputs.stock) inputs.stock.value = variant.stock;

                            // Variant image
                            const preview = row.querySelector('.variant-image-preview');
                            if (preview && (variant.thumbnail_url || variant.image_url)) {
                                preview.src = variant.thumbnail_url ?? variant.image_url;
                            }

                            // 3️⃣ Append row first
                            const variantRowsContainer = groupBox.querySelector('.variant-rows');
                            if (variantRowsContainer) {
                                variantRowsContainer.appendChild(row);
                            }
                        });

                        // 5️⃣ Ensure group UI matches has_variants toggle
                        const hasVariantsCheckbox = document.getElementById('has_variants');
                        const stockSection = document.getElementById('stock-section');

                        if (hasVariantsCheckbox.checked) {
                            stockSection?.classList.add('d-none');
                            manageVariantStock.checked = true;
                            toggleVariantStockFields();
                        } else {
                            stockSection?.classList.remove('d-none');
                        }
                        updateVariantsViewBtn();
                        refreshVariantModalEmptyState();
                    }

                    // Pre-open cost/details sections if data exists
                    toggleCostSection();
                    toggleProductDetailsSection();

                    // Sync live preview after all edit data is prefilled
                    if (typeof syncLivePreview === 'function') syncLivePreview();
                @endif
            });

            document.addEventListener('DOMContentLoaded', function() {
                @if (isset($product))
                    const product = {!! json_encode($product) !!};
                    const dynamicAttrContainer = document.getElementById('dynamic-attributes');

                    // fetch attributes for the product's niche
                    if (product.niche_id) {
                        fetch(`/store/category/${product.niche_id}/attributes`)
                            .then(res => res.json())
                            .then(attributes => {
                                // render inputs
                                attributes.forEach(attr => {
                                    let field = '';

                                    switch (attr.type) {
                                        case 'text':
                                            field =
                                                `<input type="text" name="attributes[${attr.name}]" class="form-control" ${attr.required ? 'required' : ''}>`;
                                            break;
                                        case 'number':
                                            field =
                                                `<input type="number" name="attributes[${attr.name}]" class="form-control" ${attr.required ? 'required' : ''}>`;
                                            break;
                                        case 'select':
                                            let options = '';
                                            attr.options.forEach(opt => options +=
                                                `<option value="${opt}">${opt}</option>`);
                                            field =
                                                `<select name="attributes[${attr.name}]" class="form-select" ${attr.required ? 'required' : ''}>${options}</select>`;
                                            break;
                                    }

                                    dynamicAttrContainer.innerHTML += `
                        <div class="col-md-6 col-lg-4">
                            <label class="form-label">${attr.label}</label>
                            ${field}
                        </div>`;
                                });

                                // prefill values
                                if (product.product_attributes && product.product_attributes.length) {
                                    product.product_attributes.forEach(attr => {
                                        const input = dynamicAttrContainer.querySelector(
                                            `[name="attributes[${attr.key}]"]`);
                                        if (input) input.value = attr.value;
                                    });
                                }
                            });
                    }
                @endif
            });
        </script>
    @endif

    <script>
    // Floating save button — center it horizontally over the middle column
    (function () {
        var floatStack = document.getElementById('pf-float-stack');
        var detailCol = document.getElementById('pf-details-col');
        if (!floatStack || !detailCol) return;

        var pfSave = floatStack.querySelector('#pf-float-save');
        if (pfSave) {
            pfSave.addEventListener('click', function () {
                var realSubmit = document.querySelector('#form-id .form_submit');
                if (realSubmit) realSubmit.click();
            });
        }

        function reposition() {
            var rect = detailCol.getBoundingClientRect();
            var centerX = rect.left + rect.width / 2 + window.scrollX;
            floatStack.style.left = centerX + 'px';
            floatStack.style.transform = 'translateX(-50%)';
        }

        reposition();
        window.addEventListener('resize', reposition);
        window.addEventListener('scroll', reposition);

        var actionsBar = document.querySelector('.product-form-actions');
        if (actionsBar && 'IntersectionObserver' in window) {
            var observer = new IntersectionObserver(function (entries) {
                floatStack.style.opacity = entries[0].isIntersecting ? '0' : '1';
                floatStack.style.pointerEvents = entries[0].isIntersecting ? 'none' : 'auto';
            }, { threshold: 0.1 });
            observer.observe(actionsBar);
        }
    })();
    </script>

@endsection