@php
    $isPosPopup = ((int) request('pos_popup', 0) === 1);
@endphp

<x-app-layout>
    @unless($isPosPopup)
        <x-slot name="header">
            @include('pos.products.nav')
        </x-slot>
    @endunless

    <div class="py-6">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="app-card">
                <div class="p-6 space-y-4">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Pricing Groups</h2>
                            <div class="text-sm text-gray-600">Manage per-product pricing groups in one place.</div>
                        </div>
                        <button type="button" class="app-btn-primary" id="pgAddBtn">Add Pricing Group</button>
                    </div>

                    @if(session('status'))
                        <div class="p-3 rounded bg-green-100 text-green-800 border border-green-200">{{ session('status') }}</div>
                    @endif
                    @if(session('error'))
                        <div class="p-3 rounded bg-red-100 text-red-800 border border-red-200">{{ session('error') }}</div>
                    @endif

                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-gray-600 border-b">
                                    <th class="py-2 pr-3">Product</th>
                                    <th class="py-2 pr-3">Group</th>
                                    <th class="py-2 pr-3 text-right">Cost Price</th>
                                    <th class="py-2 pr-3 text-right">MRP Price</th>
                                    <th class="py-2 pr-3 text-right">Default Cost Price</th>
                                    <th class="py-2 pr-3 text-right">Default MRP Price</th>
                                    <th class="py-2 pr-3">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @forelse($groups as $g)
                                    @php
                                        $p = $g->pricingParent;
                                    @endphp
                                    <tr>
                                        <td class="py-2 pr-3">
                                            <div class="text-gray-900">{{ $p->name ?? '' }}</div>
                                            <div class="text-xs text-gray-500">{{ $p->barcode ?? '' }}</div>
                                        </td>
                                        <td class="py-2 pr-3 text-gray-800">{{ $g->name }}</td>
                                        <td class="py-2 pr-3 text-right">{{ number_format((float) ($g->cost ?? 0), 2) }}</td>
                                        <td class="py-2 pr-3 text-right">{{ number_format((float) ($g->default_price ?? 0), 2) }}</td>
                                        <td class="py-2 pr-3 text-right text-gray-700">{{ number_format((float) ($p->cost ?? 0), 2) }}</td>
                                        <td class="py-2 pr-3 text-right text-gray-700">{{ number_format((float) ($p->default_price ?? 0), 2) }}</td>
                                        <td class="py-2 pr-3">
                                            <div class="flex items-center gap-2">
                                                <button type="button" class="app-btn-secondary js-pg-edit"
                                                    data-id="{{ $g->id }}"
                                                    data-parent-id="{{ $p->id ?? '' }}"
                                                    data-parent-name="{{ $p->name ?? '' }}"
                                                    data-name="{{ $g->name }}"
                                                    data-cost="{{ $g->cost }}"
                                                    data-mrp="{{ $g->default_price }}"
                                                    data-price-discount="{{ $g->price_discount }}"
                                                    data-price-discount-qty="{{ $g->price_discount_qty }}"
                                                    data-price-discount-unit="{{ $g->price_discount_unit }}"
                                                    data-price-wholesale="{{ $g->price_wholesale }}"
                                                    data-price-wholesale-qty="{{ $g->price_wholesale_qty }}"
                                                    data-price-wholesale-unit="{{ $g->price_wholesale_unit }}"
                                                    data-price-wholesale-qty1="{{ $g->price_wholesale_qty1 }}"
                                                    data-price-wholesale-unit1="{{ $g->price_wholesale_unit1 }}"
                                                    data-price-wholesale-qty2="{{ $g->price_wholesale_qty2 }}"
                                                    data-price-wholesale-unit2="{{ $g->price_wholesale_unit2 }}"
                                                    data-price-special="{{ $g->price_special }}"
                                                    data-price-special-qty="{{ $g->price_special_qty }}"
                                                    data-price-special-unit="{{ $g->price_special_unit }}"
                                                >Edit</button>
                                                <button type="button" class="app-btn-danger js-pg-del" data-id="{{ $g->id }}">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="py-6 text-center text-gray-500">No pricing groups yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div>
                        {{ $groups->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="pgData" class="hidden"
        data-csrf="{{ csrf_token() }}"
        data-route-search="{{ route('pos.products.search') }}"
        data-route-preview-template="{{ route('pos.products.pricingGroups.preview', ['product' => '__PRODUCT__']) }}"
        data-route-store="{{ route('pos.products.pricingGroups.store') }}"
        data-route-update-template="{{ route('pos.products.pricingGroups.update', ['group' => '__GROUP__']) }}"
        data-route-delete-template="{{ route('pos.products.pricingGroups.delete', ['group' => '__GROUP__']) }}"
    ></div>

    <div id="pgModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50" style="display:none;">
        <div class="bg-white rounded-lg w-full max-w-5xl mx-4 overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b">
                <div class="font-semibold text-gray-900" id="pgModalTitle">Add Pricing Group</div>
                <button type="button" id="pgModalClose" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
            </div>
            <div class="p-4 max-h-[85vh] overflow-y-auto">
                <input type="hidden" id="pgGroupId" value="">
                <input type="hidden" id="pgProductId" value="">

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                            <input type="text" id="pgProductSearch" class="w-full rounded border-gray-300" placeholder="Search product by name/barcode...">
                            <div id="pgSearchResults" class="mt-1 app-card hidden max-h-64 overflow-y-auto"></div>
                            <div class="mt-2 text-sm text-gray-700">Selected: <span class="font-semibold" id="pgSelectedProduct">None</span></div>
                        </div>

                        <div class="border rounded-md p-4" style="background: var(--brand-soft);">
                            <div class="font-semibold text-gray-800 mb-3">Default pricing preview</div>

                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
                                <div>Cost: <span class="font-semibold" id="pgPreviewCost">0.00</span></div>
                                <div>Agency Rate: <span class="font-semibold" id="pgPreviewAgency">0.00</span></div>
                                <div>MRP: <span class="font-semibold" id="pgPreviewMrp">0.00</span></div>
                            </div>

                            <div class="mt-4 space-y-3">
                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Normal Sell Pricing</div>
                                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 text-sm">
                                        <div class="sm:col-span-2">Base Discount: <span class="font-semibold" id="pgPreviewDiscount">0</span></div>
                                        <div>Set 1 Qty ≥: <span class="font-semibold" id="pgPreviewDiscountQty">0</span></div>
                                        <div>Set 1 Rate: <span class="font-semibold" id="pgPreviewDiscountUnit">0</span></div>
                                    </div>
                                </div>

                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Wholesale Sell Pricing</div>
                                    <div class="space-y-2 text-sm">
                                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                            <div class="sm:col-span-2">Base Discount: <span class="font-semibold" id="pgPreviewWholesale">0</span></div>
                                            <div>Set 1 Qty ≥: <span class="font-semibold" id="pgPreviewWholesaleQty">0</span></div>
                                            <div>Set 1 Rate: <span class="font-semibold" id="pgPreviewWholesaleUnit">0</span></div>
                                        </div>
                                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                            <div>Set 2 Qty ≥: <span class="font-semibold" id="pgPreviewWholesaleQty1">0</span></div>
                                            <div>Set 2 Rate: <span class="font-semibold" id="pgPreviewWholesaleUnit1">0</span></div>
                                            <div>Set 3 Qty ≥: <span class="font-semibold" id="pgPreviewWholesaleQty2">0</span></div>
                                            <div>Set 3 Rate: <span class="font-semibold" id="pgPreviewWholesaleUnit2">0</span></div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Special Sell Pricing</div>
                                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 text-sm">
                                        <div class="sm:col-span-2">Base Discount: <span class="font-semibold" id="pgPreviewSpecial">0</span></div>
                                        <div>Set 1 Qty ≥: <span class="font-semibold" id="pgPreviewSpecialQty">0</span></div>
                                        <div>Set 1 Rate: <span class="font-semibold" id="pgPreviewSpecialUnit">0</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Group Name</label>
                            <input type="text" id="pgName" class="w-full rounded border-gray-300" placeholder="e.g., Batch Promo">
                        </div>

                        <div class="border rounded-md p-4 bg-gray-50">
                            <div class="font-semibold text-gray-800 mb-3">Pricing Group Pricing</div>

                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">Cost Price</label>
                                    <input type="number" step="0.01" min="0" id="pgCost" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">MRP Price</label>
                                    <input type="number" step="0.01" min="0" id="pgMrp" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                </div>
                                <div>
                                    <div class="text-xs text-gray-600 mt-6">Agency Rate is from product (not grouped).</div>
                                </div>
                            </div>

                            <div class="mt-4 space-y-3">
                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Normal Sell Pricing</div>
                                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                        <div class="sm:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700">Base Discount</label>
                                            <input type="number" step="0.01" min="0" id="pgDiscount" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">Set 1 Qty ≥</label>
                                            <input type="number" step="1" min="0" id="pgDiscountQty" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">Set 1 Rate</label>
                                            <input type="number" step="0.01" min="0" id="pgDiscountUnit" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Wholesale Sell Pricing</div>
                                    <div class="space-y-3">
                                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                            <div class="sm:col-span-2">
                                                <label class="block text-sm font-medium text-gray-700">Base Discount</label>
                                                <input type="number" step="0.01" min="0" id="pgWholesale" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 1 Qty ≥</label>
                                                <input type="number" step="1" min="0" id="pgWholesaleQty" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 1 Rate</label>
                                                <input type="number" step="0.01" min="0" id="pgWholesaleUnit" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                        </div>
                                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 2 Qty ≥</label>
                                                <input type="number" step="1" min="0" id="pgWholesaleQty1" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 2 Rate</label>
                                                <input type="number" step="0.01" min="0" id="pgWholesaleUnit1" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 3 Qty ≥</label>
                                                <input type="number" step="1" min="0" id="pgWholesaleQty2" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">Set 3 Rate</label>
                                                <input type="number" step="0.01" min="0" id="pgWholesaleUnit2" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="font-semibold text-gray-800 mb-2">Special Sell Pricing</div>
                                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                                        <div class="sm:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700">Base Discount</label>
                                            <input type="number" step="0.01" min="0" id="pgSpecial" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">Set 1 Qty ≥</label>
                                            <input type="number" step="1" min="0" id="pgSpecialQty" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">Set 1 Rate</label>
                                            <input type="number" step="0.01" min="0" id="pgSpecialUnit" class="mt-1 w-full rounded border-gray-300" placeholder="0">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 flex items-center justify-end gap-2">
                    <button type="button" class="app-btn-secondary" id="pgCancel">Cancel</button>
                    <button type="button" class="app-btn-primary" id="pgSave">Save</button>
                </div>

                <div id="pgError" class="mt-3 hidden p-3 rounded bg-red-100 text-red-800 border border-red-200 text-sm"></div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const dataEl = document.getElementById('pgData');
            const csrf = dataEl?.dataset?.csrf || '';
            const routes = {
                search: dataEl?.dataset?.routeSearch || '',
                previewTemplate: dataEl?.dataset?.routePreviewTemplate || '',
                store: dataEl?.dataset?.routeStore || '',
                updateTemplate: dataEl?.dataset?.routeUpdateTemplate || '',
                deleteTemplate: dataEl?.dataset?.routeDeleteTemplate || '',
            };

            const modal = document.getElementById('pgModal');
            const addBtn = document.getElementById('pgAddBtn');
            const closeBtn = document.getElementById('pgModalClose');
            const cancelBtn = document.getElementById('pgCancel');
            const saveBtn = document.getElementById('pgSave');
            const errEl = document.getElementById('pgError');

            const groupIdEl = document.getElementById('pgGroupId');
            const productIdEl = document.getElementById('pgProductId');
            const productSearchEl = document.getElementById('pgProductSearch');
            const resultsEl = document.getElementById('pgSearchResults');
            const selectedEl = document.getElementById('pgSelectedProduct');

            const previewCostEl = document.getElementById('pgPreviewCost');
            const previewMrpEl = document.getElementById('pgPreviewMrp');
            const previewAgencyEl = document.getElementById('pgPreviewAgency');
            const previewDiscountEl = document.getElementById('pgPreviewDiscount');
            const previewDiscountQtyEl = document.getElementById('pgPreviewDiscountQty');
            const previewDiscountUnitEl = document.getElementById('pgPreviewDiscountUnit');

            const previewWholesaleEl = document.getElementById('pgPreviewWholesale');
            const previewWholesaleQtyEl = document.getElementById('pgPreviewWholesaleQty');
            const previewWholesaleUnitEl = document.getElementById('pgPreviewWholesaleUnit');
            const previewWholesaleQty1El = document.getElementById('pgPreviewWholesaleQty1');
            const previewWholesaleUnit1El = document.getElementById('pgPreviewWholesaleUnit1');
            const previewWholesaleQty2El = document.getElementById('pgPreviewWholesaleQty2');
            const previewWholesaleUnit2El = document.getElementById('pgPreviewWholesaleUnit2');

            const previewSpecialEl = document.getElementById('pgPreviewSpecial');
            const previewSpecialQtyEl = document.getElementById('pgPreviewSpecialQty');
            const previewSpecialUnitEl = document.getElementById('pgPreviewSpecialUnit');

            const nameEl = document.getElementById('pgName');
            const costEl = document.getElementById('pgCost');
            const mrpEl = document.getElementById('pgMrp');
            const discountEl = document.getElementById('pgDiscount');
            const discountQtyEl = document.getElementById('pgDiscountQty');
            const discountUnitEl = document.getElementById('pgDiscountUnit');

            const wholesaleEl = document.getElementById('pgWholesale');
            const wholesaleQtyEl = document.getElementById('pgWholesaleQty');
            const wholesaleUnitEl = document.getElementById('pgWholesaleUnit');
            const wholesaleQty1El = document.getElementById('pgWholesaleQty1');
            const wholesaleUnit1El = document.getElementById('pgWholesaleUnit1');
            const wholesaleQty2El = document.getElementById('pgWholesaleQty2');
            const wholesaleUnit2El = document.getElementById('pgWholesaleUnit2');

            const specialEl = document.getElementById('pgSpecial');
            const specialQtyEl = document.getElementById('pgSpecialQty');
            const specialUnitEl = document.getElementById('pgSpecialUnit');

            function escapeHtml(s) {
                return String(s || '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function showModal(show) {
                if (!modal) return;
                modal.style.display = show ? 'flex' : 'none';
            }

            function setError(msg) {
                if (!errEl) return;
                if (!msg) {
                    errEl.classList.add('hidden');
                    errEl.textContent = '';
                    return;
                }
                errEl.textContent = msg;
                errEl.classList.remove('hidden');
            }

            function showResults(show) {
                if (!resultsEl) return;
                resultsEl.classList.toggle('hidden', !show);
            }

            function resetForm() {
                setError('');
                groupIdEl.value = '';
                productIdEl.value = '';
                if (selectedEl) selectedEl.textContent = 'None';
                if (previewCostEl) previewCostEl.textContent = '0.00';
                if (previewAgencyEl) previewAgencyEl.textContent = '0.00';
                if (previewMrpEl) previewMrpEl.textContent = '0.00';
                if (previewDiscountEl) previewDiscountEl.textContent = '0';
                if (previewDiscountQtyEl) previewDiscountQtyEl.textContent = '0';
                if (previewDiscountUnitEl) previewDiscountUnitEl.textContent = '0';

                if (previewWholesaleEl) previewWholesaleEl.textContent = '0';
                if (previewWholesaleQtyEl) previewWholesaleQtyEl.textContent = '0';
                if (previewWholesaleUnitEl) previewWholesaleUnitEl.textContent = '0';
                if (previewWholesaleQty1El) previewWholesaleQty1El.textContent = '0';
                if (previewWholesaleUnit1El) previewWholesaleUnit1El.textContent = '0';
                if (previewWholesaleQty2El) previewWholesaleQty2El.textContent = '0';
                if (previewWholesaleUnit2El) previewWholesaleUnit2El.textContent = '0';

                if (previewSpecialEl) previewSpecialEl.textContent = '0';
                if (previewSpecialQtyEl) previewSpecialQtyEl.textContent = '0';
                if (previewSpecialUnitEl) previewSpecialUnitEl.textContent = '0';
                if (productSearchEl) productSearchEl.value = '';
                if (nameEl) nameEl.value = '';
                if (costEl) costEl.value = '';
                if (mrpEl) mrpEl.value = '';

                if (discountEl) discountEl.value = '';
                if (discountQtyEl) discountQtyEl.value = '';
                if (discountUnitEl) discountUnitEl.value = '';

                if (wholesaleEl) wholesaleEl.value = '';
                if (wholesaleQtyEl) wholesaleQtyEl.value = '';
                if (wholesaleUnitEl) wholesaleUnitEl.value = '';
                if (wholesaleQty1El) wholesaleQty1El.value = '';
                if (wholesaleUnit1El) wholesaleUnit1El.value = '';
                if (wholesaleQty2El) wholesaleQty2El.value = '';
                if (wholesaleUnit2El) wholesaleUnit2El.value = '';

                if (specialEl) specialEl.value = '';
                if (specialQtyEl) specialQtyEl.value = '';
                if (specialUnitEl) specialUnitEl.value = '';
            }

            async function loadPreview(productId) {
                const url = String(routes.previewTemplate).replace('__PRODUCT__', encodeURIComponent(productId));
                const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
                if (!res.ok) return;
                const data = await res.json();
                if (previewCostEl) previewCostEl.textContent = Number(data?.default?.cost || 0).toFixed(2);
                if (previewMrpEl) previewMrpEl.textContent = Number(data?.default?.mrp || 0).toFixed(2);
                if (previewAgencyEl) previewAgencyEl.textContent = Number(data?.default?.agency_rate || 0).toFixed(2);

                if (previewDiscountEl) previewDiscountEl.textContent = Number(data?.default?.price_discount || 0).toFixed(2);
                if (previewDiscountQtyEl) previewDiscountQtyEl.textContent = String(parseInt(data?.default?.price_discount_qty || 0, 10) || 0);
                if (previewDiscountUnitEl) previewDiscountUnitEl.textContent = Number(data?.default?.price_discount_unit || 0).toFixed(2);

                if (previewWholesaleEl) previewWholesaleEl.textContent = Number(data?.default?.price_wholesale || 0).toFixed(2);
                if (previewWholesaleQtyEl) previewWholesaleQtyEl.textContent = String(parseInt(data?.default?.price_wholesale_qty || 0, 10) || 0);
                if (previewWholesaleUnitEl) previewWholesaleUnitEl.textContent = Number(data?.default?.price_wholesale_unit || 0).toFixed(2);
                if (previewWholesaleQty1El) previewWholesaleQty1El.textContent = String(parseInt(data?.default?.price_wholesale_qty1 || 0, 10) || 0);
                if (previewWholesaleUnit1El) previewWholesaleUnit1El.textContent = Number(data?.default?.price_wholesale_unit1 || 0).toFixed(2);
                if (previewWholesaleQty2El) previewWholesaleQty2El.textContent = String(parseInt(data?.default?.price_wholesale_qty2 || 0, 10) || 0);
                if (previewWholesaleUnit2El) previewWholesaleUnit2El.textContent = Number(data?.default?.price_wholesale_unit2 || 0).toFixed(2);

                if (previewSpecialEl) previewSpecialEl.textContent = Number(data?.default?.price_special || 0).toFixed(2);
                if (previewSpecialQtyEl) previewSpecialQtyEl.textContent = String(parseInt(data?.default?.price_special_qty || 0, 10) || 0);
                if (previewSpecialUnitEl) previewSpecialUnitEl.textContent = Number(data?.default?.price_special_unit || 0).toFixed(2);
                if (selectedEl) selectedEl.textContent = data?.product?.name || ('#' + productId);
                productIdEl.value = data?.pricing_parent?.id || productId;
            }

            async function searchProducts(term) {
                const url = routes.search + '?search=' + encodeURIComponent(term);
                const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
                if (!res.ok) return [];
                return await res.json();
            }

            let timer = null;
            productSearchEl?.addEventListener('input', function () {
                clearTimeout(timer);
                const term = String(productSearchEl.value || '').trim();
                if (term.length < 2) {
                    showResults(false);
                    return;
                }
                timer = setTimeout(async function () {
                    const rows = await searchProducts(term);
                    if (!resultsEl) return;
                    resultsEl.innerHTML = '';
                    rows.slice(0, 25).forEach((p) => {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'w-full text-left px-3 py-2 hover:bg-gray-50 text-sm';
                        btn.textContent = `${p.name} (${p.barcode || p.sku || ''})`;
                        btn.addEventListener('click', function () {
                            showResults(false);
                            loadPreview(p.id);
                        });
                        resultsEl.appendChild(btn);
                    });
                    showResults(true);
                }, 200);
            });

            function openCreate(productId) {
                resetForm();
                document.getElementById('pgModalTitle').textContent = 'Add Pricing Group';
                showModal(true);
                if (productId) loadPreview(productId);
            }

            addBtn?.addEventListener('click', function () { openCreate(null); });
            closeBtn?.addEventListener('click', function () { showModal(false); });
            cancelBtn?.addEventListener('click', function () { showModal(false); });

            saveBtn?.addEventListener('click', async function () {
                setError('');
                const groupId = String(groupIdEl.value || '').trim();
                const productId = String(productIdEl.value || '').trim();
                const name = String(nameEl.value || '').trim();
                const cost = costEl.value === '' ? null : parseFloat(costEl.value);
                const mrp = mrpEl.value === '' ? null : parseFloat(mrpEl.value);

                const priceDiscount = discountEl.value === '' ? null : parseFloat(discountEl.value);
                const priceDiscountQty = discountQtyEl.value === '' ? null : parseInt(discountQtyEl.value, 10);
                const priceDiscountUnit = discountUnitEl.value === '' ? null : parseFloat(discountUnitEl.value);

                const priceWholesale = wholesaleEl.value === '' ? null : parseFloat(wholesaleEl.value);
                const priceWholesaleQty = wholesaleQtyEl.value === '' ? null : parseInt(wholesaleQtyEl.value, 10);
                const priceWholesaleUnit = wholesaleUnitEl.value === '' ? null : parseFloat(wholesaleUnitEl.value);
                const priceWholesaleQty1 = wholesaleQty1El.value === '' ? null : parseInt(wholesaleQty1El.value, 10);
                const priceWholesaleUnit1 = wholesaleUnit1El.value === '' ? null : parseFloat(wholesaleUnit1El.value);
                const priceWholesaleQty2 = wholesaleQty2El.value === '' ? null : parseInt(wholesaleQty2El.value, 10);
                const priceWholesaleUnit2 = wholesaleUnit2El.value === '' ? null : parseFloat(wholesaleUnit2El.value);

                const priceSpecial = specialEl.value === '' ? null : parseFloat(specialEl.value);
                const priceSpecialQty = specialQtyEl.value === '' ? null : parseInt(specialQtyEl.value, 10);
                const priceSpecialUnit = specialUnitEl.value === '' ? null : parseFloat(specialUnitEl.value);

                if (!productId) return setError('Select a product.');
                if (!name) return setError('Group name is required.');

                const isEdit = groupId !== '';
                const url = isEdit
                    ? String(routes.updateTemplate).replace('__GROUP__', encodeURIComponent(groupId))
                    : routes.store;

                const res = await fetch(url, {
                    method: isEdit ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        product_id: parseInt(productId, 10),
                        name: name,
                        cost: cost,
                        default_price: mrp,
                        price_discount: priceDiscount,
                        price_discount_qty: priceDiscountQty,
                        price_discount_unit: priceDiscountUnit,

                        price_wholesale: priceWholesale,
                        price_wholesale_qty: priceWholesaleQty,
                        price_wholesale_unit: priceWholesaleUnit,
                        price_wholesale_qty1: priceWholesaleQty1,
                        price_wholesale_unit1: priceWholesaleUnit1,
                        price_wholesale_qty2: priceWholesaleQty2,
                        price_wholesale_unit2: priceWholesaleUnit2,

                        price_special: priceSpecial,
                        price_special_qty: priceSpecialQty,
                        price_special_unit: priceSpecialUnit,
                    })
                });

                const payload = await res.json().catch(() => null);
                if (!res.ok) {
                    return setError(payload?.message || 'Failed to save pricing group');
                }

                try {
                    const params = new URLSearchParams(window.location.search);
                    if (params.get('pos_popup') === '1') {
                        window.parent.postMessage({ type: 'pos-pricing-group-saved' }, window.location.origin);
                        window.parent.postMessage({ type: 'pos-close-product-modal' }, window.location.origin);
                        return;
                    }
                } catch (e) {}

                window.location.reload();
            });

            document.addEventListener('click', async function (e) {
                const editBtn = e.target.closest('.js-pg-edit');
                if (editBtn) {
                    resetForm();
                    document.getElementById('pgModalTitle').textContent = 'Edit Pricing Group';
                    groupIdEl.value = editBtn.getAttribute('data-id') || '';
                    productIdEl.value = editBtn.getAttribute('data-parent-id') || '';
                    if (selectedEl) selectedEl.textContent = editBtn.getAttribute('data-parent-name') || 'Selected';
                    nameEl.value = editBtn.getAttribute('data-name') || '';
                    costEl.value = editBtn.getAttribute('data-cost') || '';
                    mrpEl.value = editBtn.getAttribute('data-mrp') || '';

                    discountEl.value = editBtn.getAttribute('data-price-discount') || '';
                    discountQtyEl.value = editBtn.getAttribute('data-price-discount-qty') || '';
                    discountUnitEl.value = editBtn.getAttribute('data-price-discount-unit') || '';

                    wholesaleEl.value = editBtn.getAttribute('data-price-wholesale') || '';
                    wholesaleQtyEl.value = editBtn.getAttribute('data-price-wholesale-qty') || '';
                    wholesaleUnitEl.value = editBtn.getAttribute('data-price-wholesale-unit') || '';
                    wholesaleQty1El.value = editBtn.getAttribute('data-price-wholesale-qty1') || '';
                    wholesaleUnit1El.value = editBtn.getAttribute('data-price-wholesale-unit1') || '';
                    wholesaleQty2El.value = editBtn.getAttribute('data-price-wholesale-qty2') || '';
                    wholesaleUnit2El.value = editBtn.getAttribute('data-price-wholesale-unit2') || '';

                    specialEl.value = editBtn.getAttribute('data-price-special') || '';
                    specialQtyEl.value = editBtn.getAttribute('data-price-special-qty') || '';
                    specialUnitEl.value = editBtn.getAttribute('data-price-special-unit') || '';
                    await loadPreview(productIdEl.value);
                    showModal(true);
                    return;
                }

                const delBtn = e.target.closest('.js-pg-del');
                if (delBtn) {
                    if (!confirm('Delete this pricing group?')) return;
                    const id = delBtn.getAttribute('data-id');
                    const url = String(routes.deleteTemplate).replace('__GROUP__', encodeURIComponent(id));
                    const res = await fetch(url, {
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                    });
                    const payload = await res.json().catch(() => null);
                    if (!res.ok) {
                        alert(payload?.message || 'Failed to delete');
                        return;
                    }
                    try {
                        const params = new URLSearchParams(window.location.search);
                        if (params.get('pos_popup') === '1') {
                            window.parent.postMessage({ type: 'pos-pricing-group-saved' }, window.location.origin);
                            window.parent.postMessage({ type: 'pos-close-product-modal' }, window.location.origin);
                            return;
                        }
                    } catch (e) {}

                    window.location.reload();
                }
            });

            // Support opening from POS popup: /pos/products/pricing-groups?product_id=123
            try {
                const params = new URLSearchParams(window.location.search);
                const pid = params.get('product_id');
                if (pid) {
                    openCreate(pid);
                }
                const gid = params.get('group_id');
                if (gid) {
                    const btn = document.querySelector(`.js-pg-edit[data-id="${CSS.escape(gid)}"]`);
                    if (btn) btn.click();
                }
            } catch (e) {}
        })();
    </script>
</x-app-layout>