@extends('layouts.app')

@section('title', 'Pay What You Want')

@section('content')
<div class="pwyw-page">
    <div class="pwyw-layout">
        <div class="pwyw-main-col">
    <header class="pwyw-header">
        <h1>Pay What You Want</h1>
        <p class="pwyw-subtitle">Let customers choose their price within a minimum and maximum. Select a product, set limits, and we create variants on demand and add them to cart—then clean up variants so your catalog stays tidy.</p>
    </header>

    <section class="pwyw-section pwyw-stats-card">
        <div class="pwyw-stats-grid">
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="All-time total of orders completed (paid) through PWYW products">Total Orders</span>
                <span class="pwyw-stat-value">{{ $stats['total_orders'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="PWYW variants created today (recorded by this app)">Created today</span>
                <span class="pwyw-stat-value">{{ $stats['created_today'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="Total PWYW variants that exist right now in Shopify (all products with a PWYW rule)">Existing variants</span>
                <span class="pwyw-stat-value">{{ $stats['existing_variants'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="Number of PWYW variants deleted today (cleanup runs at 3 AM Miami)">Deleted Variants</span>
                <span class="pwyw-stat-value">{{ $stats['deleted_today'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="Different people who added a PWYW product to cart today; resets to 0 at midnight">Cart adds today</span>
                <span class="pwyw-stat-value">{{ $stats['cart_adds_today'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="Different people who added a PWYW product to checkout today; resets to 0 at midnight">Checkout adds today</span>
                <span class="pwyw-stat-value">{{ $stats['checkout_adds_today'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item">
                <span class="pwyw-stat-label" title="Distinct viewers (sessions) who opened a PWYW product page today; resets at midnight">Views today</span>
                <span class="pwyw-stat-value">{{ $stats['views'] ?? 0 }}</span>
            </div>
            <div class="pwyw-stat-item pwyw-stat-item-last-add">
                <span class="pwyw-stat-label" title="Last add to cart from store (Shopify metafield)">Last variant created</span>
                <span class="pwyw-stat-value pwyw-stat-datetime">
                    @if(!empty($pwywLastAdd['at']) || isset($pwywLastAdd['price']))
                        @if(isset($pwywLastAdd['price']))
                            <strong>${{ number_format((float)$pwywLastAdd['price'], 2) }}</strong>
                            @if(!empty($pwywLastAdd['at'])) — @endif
                        @endif
                        @if(!empty($pwywLastAdd['at']))
                            {{ \Carbon\Carbon::parse($pwywLastAdd['at'])->timezone('America/New_York')->format('M j, Y g:i A T') }}
                        @endif
                    @else
                        —
                    @endif
                </span>
            </div>
        </div>
        <p class="pwyw-stats-note"><strong>Existing variants</strong> is the current total of PWYW variants in Shopify (all products with a rule). <strong>Created today</strong> counts only variants this app created today. Variants are deleted per your settings (e.g. 3:00 AM Miami); the default (min-price) variant is always kept. Refresh the page to see the latest numbers.</p>
        <p class="pwyw-stats-note"><strong>Cart adds today</strong> and <strong>Checkout adds today</strong> = different people (unique sessions) who added a PWYW product to cart or checkout today; both reset to 0 at midnight. <strong>Views today</strong> are distinct sessions that opened a PWYW product page on your store today (not this admin); the count resets to 0 at midnight. <a href="{{ route('pwyw.index', ['refresh' => 1]) }}">Refresh stats now</a> to see the latest numbers immediately.</p>
    </section>

    <section class="pwyw-section">
        <h2 class="pwyw-section-title">Add a rule</h2>
        <form action="{{ route('pwyw.store') }}" method="POST" class="pwyw-form">
            @csrf
            <div class="pwyw-field">
                <label class="pwyw-label" for="pwyw-product-search">Product</label>
                <div class="pwyw-product-select-wrap">
                    <input type="text" id="pwyw-product-search" class="pwyw-input" placeholder="Search and select a product..." autocomplete="off" value="">
                    <input type="hidden" name="shopify_product_id" id="pwyw-product-id" value="">
                    <input type="hidden" name="product_title" id="pwyw-product-title" value="">
                    <div id="pwyw-product-dropdown" class="pwyw-product-dropdown" hidden></div>
                    <div id="pwyw-product-selected" class="pwyw-product-selected" hidden></div>
                </div>
                @error('shopify_product_id')
                    <span class="pwyw-error">{{ $message }}</span>
                @enderror
            </div>
            <div class="pwyw-row">
                <div class="pwyw-field">
                    <label class="pwyw-label" for="minimum_price">Minimum price</label>
                    <input type="number" step="0.01" min="0" name="minimum_price" id="minimum_price" class="pwyw-input" value="{{ old('minimum_price', '100') }}" required>
                    @error('minimum_price')
                        <span class="pwyw-error">{{ $message }}</span>
                    @enderror
                </div>
                <div class="pwyw-field">
                    <label class="pwyw-label" for="maximum_price">Maximum price</label>
                    <input type="number" step="0.01" min="0" name="maximum_price" id="maximum_price" class="pwyw-input" value="{{ old('maximum_price', '100000') }}" required>
                    @error('maximum_price')
                        <span class="pwyw-error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="pwyw-row">
                <div class="pwyw-field">
                    <label class="pwyw-label" for="price_step">Price step <span class="pwyw-optional">(optional, e.g. 5)</span></label>
                    <input type="number" step="0.01" min="0" name="price_step" id="price_step" class="pwyw-input" value="{{ old('price_step') }}" placeholder="e.g. 5">
                    @error('price_step')
                        <span class="pwyw-error">{{ $message }}</span>
                    @enderror
                </div>
                <div class="pwyw-field">
                    <label class="pwyw-label">Default value in price input</label>
                    <div class="pwyw-radio-group">
                        <label class="pwyw-radio-label">
                            <input type="radio" name="default_price_field" value="minimum" {{ old('default_price_field', 'minimum') === 'minimum' ? 'checked' : '' }}>
                            Minimum price
                        </label>
                        <label class="pwyw-radio-label">
                            <input type="radio" name="default_price_field" value="suggested" {{ old('default_price_field') === 'suggested' ? 'checked' : '' }}>
                            Suggested price
                        </label>
                    </div>
                </div>
            </div>
            <div class="pwyw-row">
                <div class="pwyw-field">
                    <label class="pwyw-label" for="suggested_price">Suggested price <span class="pwyw-optional">(optional)</span></label>
                    <input type="number" step="0.01" min="0" name="suggested_price" id="suggested_price" class="pwyw-input" value="{{ old('suggested_price') }}" placeholder="Display as hint">
                    @error('suggested_price')
                        <span class="pwyw-error">{{ $message }}</span>
                    @enderror
                </div>
                <div class="pwyw-field pwyw-field-checkbox">
                    <label class="pwyw-checkbox-label">
                        <input type="checkbox" name="enabled" value="1" {{ old('enabled', true) ? 'checked' : '' }}>
                        Enabled
                    </label>
                </div>
            </div>
            <div class="pwyw-field">
                <label class="pwyw-label" for="price_input_label">Price input label <span class="pwyw-optional">(shown above the input on the product page)</span></label>
                <input type="text" name="price_input_label" id="price_input_label" class="pwyw-input" value="{{ old('price_input_label', 'Confirmed Price:') }}" placeholder="Confirmed Price:">
                @error('price_input_label')
                    <span class="pwyw-error">{{ $message }}</span>
                @enderror
            </div>
            <div class="pwyw-field">
                <label class="pwyw-label" for="input_instruction_text">Instruction text <span class="pwyw-optional">(shown below the input)</span></label>
                <input type="text" name="input_instruction_text" id="input_instruction_text" class="pwyw-input" value="{{ old('input_instruction_text', 'Please enter the agreed price for this item.') }}" placeholder="Please enter the agreed price for this item.">
                @error('input_instruction_text')
                    <span class="pwyw-error">{{ $message }}</span>
                @enderror
            </div>
            <div class="pwyw-form-actions">
                <button type="submit" class="btn btn-primary">Add rule</button>
            </div>
        </form>
    </section>

    <section class="pwyw-section">
        <h2 class="pwyw-section-title">Rules</h2>
        @if($rules->isEmpty())
            <p class="pwyw-empty">No rules yet. Add one above.</p>
        @else
            <ul class="pwyw-rules-list">
                @foreach($rules as $rule)
                    <li class="pwyw-rule-item">
                        <div class="pwyw-rule-main">
                            <strong class="pwyw-rule-product">{{ $rule->product_title ?: $rule->shopify_product_id }}</strong>
                            <span class="pwyw-rule-range">${{ number_format($rule->minimum_price, 2) }} – ${{ number_format($rule->maximum_price, 2) }}</span>
                            @if($rule->price_step)
                                <span class="pwyw-rule-step">step {{ number_format($rule->price_step, 2) }}</span>
                            @endif
                            <span class="pwyw-rule-badge {{ $rule->enabled ? 'pwyw-badge-on' : 'pwyw-badge-off' }}">{{ $rule->enabled ? 'On' : 'Off' }}</span>
                        </div>
                        <div class="pwyw-rule-actions">
                            <button type="button" class="btn btn-secondary pwyw-btn-sm pwyw-toggle-edit" data-rule-id="{{ $rule->id }}" aria-expanded="false">Edit rule</button>
                            <form action="{{ route('pwyw.destroy', $rule) }}" method="POST" class="pwyw-inline-form pwyw-delete-form" onsubmit="return confirm('Remove this rule?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger pwyw-btn-sm">Delete</button>
                            </form>
                            <span class="pwyw-create-variant-wrap">
                                <form action="{{ route('pwyw.create-variant', $rule) }}" method="POST" class="pwyw-inline-form" style="margin-left:0.25rem;" title="Creates the single variant for this product in Shopify with the minimum price. Use when the product has no variant or the initial creation failed.">
                                    @csrf
                                    <button type="submit" class="btn btn-primary pwyw-btn-sm" title="Creates the single variant for this product in Shopify with the minimum price. Use when the product has no variant or the initial creation failed.">Create variant in Shopify</button>
                                </form>
                                <span class="pwyw-btn-hint">Use when the product has no variant or creation failed.</span>
                            </span>
                        </div>
                        <div id="pwyw-edit-{{ $rule->id }}" class="pwyw-rule-edit-form" hidden>
                            <form action="{{ route('pwyw.update', $rule) }}" method="POST" class="pwyw-form pwyw-edit-fields">
                                @csrf
                                @method('PUT')
                                <p class="pwyw-edit-hint">Minimum price is fixed for this rule (not editable).</p>
                                <div class="pwyw-row">
                                    <div class="pwyw-field">
                                        <label class="pwyw-label">Minimum price <span class="pwyw-optional">(read-only)</span></label>
                                        <input type="text" class="pwyw-input" value="${{ number_format($rule->minimum_price, 2) }}" disabled readonly>
                                    </div>
                                    <div class="pwyw-field">
                                        <label class="pwyw-label" for="edit-max-{{ $rule->id }}">Maximum price</label>
                                        <input type="number" step="0.01" min="0" name="maximum_price" id="edit-max-{{ $rule->id }}" class="pwyw-input" value="{{ $rule->maximum_price }}" required>
                                    </div>
                                </div>
                                <div class="pwyw-row">
                                    <div class="pwyw-field">
                                        <label class="pwyw-label" for="edit-step-{{ $rule->id }}">Price step <span class="pwyw-optional">(optional)</span></label>
                                        <input type="number" step="0.01" min="0" name="price_step" id="edit-step-{{ $rule->id }}" class="pwyw-input" value="{{ $rule->price_step }}" placeholder="e.g. 5">
                                    </div>
                                    <div class="pwyw-field">
                                        <label class="pwyw-label">Default value in price input</label>
                                        <div class="pwyw-radio-group">
                                            <label class="pwyw-radio-label">
                                                <input type="radio" name="default_price_field" value="minimum" {{ ($rule->default_price_field ?? 'minimum') === 'minimum' ? 'checked' : '' }}>
                                                Minimum price
                                            </label>
                                            <label class="pwyw-radio-label">
                                                <input type="radio" name="default_price_field" value="suggested" {{ ($rule->default_price_field ?? '') === 'suggested' ? 'checked' : '' }}>
                                                Suggested price
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="pwyw-row">
                                    <div class="pwyw-field">
                                        <label class="pwyw-label" for="edit-suggested-{{ $rule->id }}">Suggested price <span class="pwyw-optional">(optional)</span></label>
                                        <input type="number" step="0.01" min="0" name="suggested_price" id="edit-suggested-{{ $rule->id }}" class="pwyw-input" value="{{ $rule->suggested_price }}" placeholder="Display as hint">
                                    </div>
                                    <div class="pwyw-field pwyw-field-checkbox">
                                        <label class="pwyw-checkbox-label">
                                            <input type="checkbox" name="enabled" value="1" {{ $rule->enabled ? 'checked' : '' }}>
                                            Enabled
                                        </label>
                                    </div>
                                </div>
                                <div class="pwyw-field">
                                    <label class="pwyw-label" for="edit-label-{{ $rule->id }}">Price input label</label>
                                    <input type="text" name="price_input_label" id="edit-label-{{ $rule->id }}" class="pwyw-input" value="{{ $rule->price_input_label ?? 'Confirmed Price:' }}" placeholder="Confirmed Price:">
                                </div>
                                <div class="pwyw-field">
                                    <label class="pwyw-label" for="edit-instruction-{{ $rule->id }}">Instruction text</label>
                                    <input type="text" name="input_instruction_text" id="edit-instruction-{{ $rule->id }}" class="pwyw-input" value="{{ $rule->input_instruction_text ?? 'Please enter the agreed price for this item.' }}" placeholder="Please enter the agreed price for this item.">
                                </div>
                                <div class="pwyw-form-actions">
                                    <button type="submit" class="btn btn-primary">Update rule</button>
                                    <button type="button" class="btn btn-secondary pwyw-cancel-edit" data-rule-id="{{ $rule->id }}">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
        <div class="pwyw-info-box">
            <p class="pwyw-info-text">Each product uses <strong>one variant</strong> in Shopify. When a customer adds to cart, that variant's price is set to their chosen amount, then reset to your minimum so the next visitor sees the default. If the product has no variant (e.g. you removed it in Shopify), use <strong>Create variant in Shopify</strong> to create the initial variant with the minimum price.</p>
            <p class="pwyw-info-text pwyw-affirm-tip"><strong>Affirm:</strong> So that Affirm uses the customer's chosen price (not the minimum), in the theme editor open <em>Affirm Product Promo</em> &rarr; Advanced settings &rarr; <strong>Custom Price Selector</strong> and set it to <code>#pwyw-affirm-price</code>.</p>
        </div>
    </section>
        <p class="pwyw-stats-note"><a href="{{ route('setting.pwyw') }}">Configure PWYW cleanup in Setting →</a></p>
        </div>
    </div>
</div>

<style>
.pwyw-page { max-width: 1200px; }
.pwyw-layout { display: block; }
.pwyw-main-col { min-width: 0; }
.pwyw-header { margin-bottom: 1.5rem; }
.pwyw-stats-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; }
.pwyw-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 0.75rem; }
.pwyw-stat-item { display: flex; flex-direction: column; gap: 0.25rem; }
.pwyw-stat-label { font-size: 0.85rem; color: #6b7280; }
.pwyw-stat-value { font-size: 1.5rem; font-weight: 700; color: #111; }
.pwyw-stat-item-last-add .pwyw-stat-datetime { font-size: 0.95rem; font-weight: 600; }
.pwyw-stats-note { margin: 0; font-size: 0.8rem; color: #6b7280; }
.pwyw-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.pwyw-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.pwyw-section { margin-bottom: 2rem; }
.pwyw-section-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem 0; color: #111; }
.pwyw-form { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; }
.pwyw-field { margin-bottom: 1rem; }
.pwyw-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.pwyw-row .pwyw-field { flex: 1; min-width: 160px; }
.pwyw-label { display: block; font-size: 0.9rem; font-weight: 500; color: #374151; margin-bottom: 0.35rem; }
.pwyw-optional { font-weight: 400; color: #6b7280; }
.pwyw-input { width: 100%; max-width: 320px; padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem; }
.pwyw-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.2); }
.pwyw-error { display: block; font-size: 0.85rem; color: #dc2626; margin-top: 0.25rem; }
.pwyw-product-select-wrap { position: relative; max-width: 400px; }
.pwyw-product-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 220px; overflow-y: auto; z-index: 10; margin-top: 2px; }
.pwyw-product-dropdown-item { padding: 0.6rem 0.75rem; cursor: pointer; font-size: 0.9rem; border-bottom: 1px solid #f3f4f6; }
.pwyw-product-dropdown-item:hover { background: #f9fafb; }
.pwyw-product-dropdown-item:last-child { border-bottom: none; }
.pwyw-product-selected { padding: 0.5rem 0; font-size: 0.9rem; color: #374151; }
.pwyw-product-selected strong { color: #111; }
.pwyw-clear-product { margin-left: 0.5rem; font-size: 0.85rem; color: #6b7280; cursor: pointer; text-decoration: underline; }
.pwyw-radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pwyw-radio-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; cursor: pointer; }
.pwyw-field-checkbox { display: flex; align-items: flex-end; }
.pwyw-checkbox-stacked { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.pwyw-checkbox-stacked .pwyw-field-hint { margin-top: 0.15rem; }
.pwyw-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 400; }
.pwyw-cleanup-now { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.pwyw-cleanup-now-desc { font-size: 0.85rem; color: #6b7280; margin: 0 0 0.5rem 0; line-height: 1.4; }
.pwyw-form-actions { margin-top: 1.25rem; }
.pwyw-empty { color: #6b7280; font-size: 0.95rem; }
.pwyw-rules-list { list-style: none; padding: 0; margin: 0; }
.pwyw-rule-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
.pwyw-rule-main { margin-bottom: 0.75rem; }
.pwyw-rule-product { display: block; margin-bottom: 0.25rem; }
.pwyw-rule-range, .pwyw-rule-step { font-size: 0.9rem; color: #6b7280; margin-right: 0.5rem; }
.pwyw-rule-badge { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
.pwyw-badge-on { background: #d1fae5; color: #065f46; }
.pwyw-badge-off { background: #f3f4f6; color: #6b7280; }
.pwyw-rule-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pwyw-inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pwyw-inline-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.pwyw-inline-input { width: 70px; padding: 0.3rem 0.4rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9rem; }
.pwyw-delete-form { margin-left: 0.5rem; }
.pwyw-btn-sm { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.pwyw-debug-section { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 1rem; }
.pwyw-debug-hint { font-size: 0.9rem; color: #0369a1; margin: 0 0 0.75rem 0; }
.pwyw-debug-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1rem; }
.pwyw-debug-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; font-size: 0.9rem; }
.pwyw-debug-dl dt { color: #6b7280; font-weight: 500; }
.pwyw-debug-dl dd { margin: 0; }
.pwyw-debug-dl code { background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85rem; }
.pwyw-info-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.875rem 1rem; margin-bottom: 1rem; }
.pwyw-info-text { margin: 0; font-size: 0.9rem; color: #475569; line-height: 1.5; }
.pwyw-create-variant-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.pwyw-btn-hint { font-size: 0.8rem; color: #64748b; font-style: italic; }
.pwyw-rule-edit-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.pwyw-edit-fields { background: #f9fafb; border-radius: 8px; padding: 1rem; }
.pwyw-edit-hint { margin: 0 0 0.75rem 0; font-size: 0.85rem; color: #6b7280; }
</style>

@push('scripts')
<script>
(function() {
    var searchInput = document.getElementById('pwyw-product-search');
    var productIdInput = document.getElementById('pwyw-product-id');
    var productTitleInput = document.getElementById('pwyw-product-title');
    var dropdown = document.getElementById('pwyw-product-dropdown');
    var selectedDiv = document.getElementById('pwyw-product-selected');
    var timer = null;
    var csrf = document.querySelector('meta[name="csrf-token"]') || document.querySelector('input[name="_token"]');

    function showDropdown(items) {
        dropdown.innerHTML = '';
        if (items.length === 0) {
            dropdown.innerHTML = '<div class="pwyw-product-dropdown-item">No products found</div>';
        } else {
            items.forEach(function(p) {
                var el = document.createElement('div');
                el.className = 'pwyw-product-dropdown-item';
                el.textContent = p.title;
                el.dataset.id = p.id;
                el.dataset.title = p.title || '';
                el.addEventListener('click', function() {
                    productIdInput.value = p.id;
                    productTitleInput.value = p.title || '';
                    selectedDiv.innerHTML = 'Selected: <strong>' + (p.title || p.id) + '</strong><span class="pwyw-clear-product" role="button" tabindex="0">Change</span>';
                    selectedDiv.hidden = false;
                    searchInput.hidden = true;
                    dropdown.hidden = true;
                    searchInput.value = '';
                });
                dropdown.appendChild(el);
            });
        }
        dropdown.hidden = false;
    }

    function clearSelection() {
        productIdInput.value = '';
        productTitleInput.value = '';
        selectedDiv.hidden = true;
        selectedDiv.innerHTML = '';
        searchInput.hidden = false;
        searchInput.value = '';
        searchInput.focus();
    }

    selectedDiv.addEventListener('click', function(e) {
        if (e.target.classList.contains('pwyw-clear-product')) clearSelection();
    });

    searchInput.addEventListener('input', function() {
        var q = searchInput.value.trim();
        clearTimeout(timer);
        if (q.length < 1) {
            dropdown.hidden = true;
            return;
        }
        timer = setTimeout(function() {
            fetch('{{ route("pwyw.search-products") }}?q=' + encodeURIComponent(q), {
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                showDropdown(data.products || []);
            })
            .catch(function() { showDropdown([]); });
        }, 300);
    });

    searchInput.addEventListener('focus', function() {
        if (searchInput.value.trim().length > 0 && dropdown.children.length) dropdown.hidden = false;
    });

    document.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target) && e.target !== searchInput) dropdown.hidden = true;
    });

    if (productIdInput.value) {
        selectedDiv.innerHTML = 'Selected: <strong>' + (productTitleInput.value || productIdInput.value) + '</strong><span class="pwyw-clear-product" role="button" tabindex="0">Change</span>';
        selectedDiv.hidden = false;
        searchInput.hidden = true;
    }

    document.querySelectorAll('.pwyw-toggle-edit').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var id = btn.getAttribute('data-rule-id');
            var panel = document.getElementById('pwyw-edit-' + id);
            if (!panel) return;
            var isOpen = !panel.hidden;
            panel.hidden = isOpen;
            btn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
            btn.textContent = isOpen ? 'Edit rule' : 'Hide';
        });
    });
    document.querySelectorAll('.pwyw-cancel-edit').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var id = btn.getAttribute('data-rule-id');
            var panel = document.getElementById('pwyw-edit-' + id);
            var toggleBtn = document.querySelector('.pwyw-toggle-edit[data-rule-id="' + id + '"]');
            if (panel) panel.hidden = true;
            if (toggleBtn) { toggleBtn.setAttribute('aria-expanded', 'false'); toggleBtn.textContent = 'Edit rule'; }
        });
    });
})();

(function() {
  var autoRefreshMinutes = {{ (int)($autoRefreshMinutes ?? 0) }};
  if (autoRefreshMinutes > 0) {
    setInterval(function() {
      var editPanels = document.querySelectorAll('[id^="pwyw-edit-"]');
      for (var i = 0; i < editPanels.length; i++) { if (!editPanels[i].hidden) return; }
      window.location.reload();
    }, autoRefreshMinutes * 60 * 1000);
  }
})();
</script>
@endpush
@endsection