{{-- Step 1: Products --}}
@php
    $pr = isset($purchaseRequest) ? $purchaseRequest : null;
    $isEditable = isset($isEditable)
        ? (bool)$isEditable
        : ($pr ? in_array($pr->status, ['draft','rejected']) : true);
@endphp

<div class="space-y-6 prw">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-slate-100">انتخاب محصولات</h2>
        @if(!$isEditable)
            <span class="text-sm text-slate-400">این درخواست قابل ویرایش نیست.</span>
        @endif
    </div>

    {{-- Add Product Form (render only when editable) --}}
    @if($isEditable)
    <form method="POST" action="{{ $pr ? route('purchase_requests.items.store', $pr) : route('purchase_requests.temp_items.store') }}" class="glass rounded-xl p-4 space-y-4">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">نام محصول را وارد کنید:</label>
                <div class="relative">
                    <input type="text"
                           id="product-search"
                           class="form-input w-full"
                           placeholder="مثلاً: اسید اسکوربیک..."
                           autocomplete="off"
                           {{ !$isEditable ? 'disabled' : '' }}>
                    <input type="hidden" name="product_id" id="product-id">
                    <div id="product-list"
                         class="absolute z-10 w-full mt-1 bg-slate-800 rounded-md shadow-lg overflow-hidden hidden border border-slate-700">
                    </div>
                </div>

                <div id="selected-product-info"
                     class="mt-4 p-4 rounded-xl bg-white/5 text-slate-300 hidden">
                    <h3 class="text-lg font-bold">
                        محصول انتخاب‌شده:
                        <span id="selected-product-name"></span>
                    </h3>
                    <div class="text-sm text-slate-400 mt-1" id="selected-product-meta"></div>
                </div>

                @error('product_id')
                    <div class="text-red-400 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">مقدار</label>
                <input type="number" step="0.001" min="0.001" name="quantity" id="quantity" class="form-input w-full" placeholder="مثلاً 25.000" required>
                @error('quantity')
                    <div class="text-red-400 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">واحد</label>
                <input type="text" name="unit" id="unit" class="form-input w-full" placeholder="kg / ton / …">
                @error('unit')
                    <div class="text-red-400 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">گرید/خلوص هدف</label>
                <input type="text" name="target_spec" class="form-input w-full" placeholder="Grade / Purity">
                @error('target_spec')
                    <div class="text-red-400 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">توضیحات</label>
            <textarea name="description" rows="2" placeholder="توضیحات اضافی..." class="form-textarea w-full"></textarea>
            @error('description')
                <div class="text-red-400 text-xs mt-1">{{ $message }}</div>
            @enderror
        </div>

        <div class="text-left">
            <button type="submit" class="btn-primary">
                <span class="text-lg">➕</span>
                افزودن محصول
            </button>
        </div>
    </form>
    @else
    <div class="glass rounded-xl p-4 text-sm text-slate-300">
        این مرحله فقط در وضعیت «پیش‌نویس» یا «رد شده» قابل ویرایش است.
    </div>
    @endif

    {{-- Next Step Button --}}
    <div class="mt-4 flex justify-end">
        <button id="prw-next"
                type="button"
                class="px-6 py-2 rounded-xl font-medium transition disabled:opacity-50 disabled:pointer-events-none bg-blue-600 text-white hover:bg-blue-700"
                disabled>
            مرحله بعدی
        </button>
    </div>

    {{-- Products List --}}
    @if($pr && $pr->items && $pr->items->count() > 0)
    <div class="glass rounded-xl overflow-hidden">
        <div class="px-4 py-3 bg-slate-800/50 border-b border-slate-700">
            <h3 class="text-lg font-medium text-slate-200">محصولات انتخاب شده</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-800/30">
                    <tr>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">محصول</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">مقدار</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">واحد</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">گرید/خلوص</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-300">عملیات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    @foreach($pr->items as $item)
                        <tr class="hover:bg-white/5 transition">
                            <td class="px-4 py-3 text-slate-200">{{ optional($item->product)->name }}</td>
                            <td class="px-4 py-3 text-slate-300">{{ $item->quantity }}</td>
                            <td class="px-4 py-3 text-slate-300">{{ $item->unit }}</td>
                            <td class="px-4 py-3 text-slate-300">{{ $item->target_spec }}</td>
                            <td class="px-4 py-3 text-left space-x-2 space-x-reverse">
                                @if($isEditable)
                                    <form method="POST" action="{{ route('purchase_requests.items.destroy', [$pr, $item]) }}" onsubmit="return confirm('حذف این ردیف؟')"
                                          class="inline-flex">
                                        @csrf
                                        @method('DELETE')
                                        <button class="text-red-400 hover:text-red-300">حذف</button>
                                    </form>
                                @else
                                    <span class="text-slate-500 text-sm">غیرقابل ویرایش</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @elseif(!$pr)
    {{-- Show message for new creation (can be hidden via $hideEmptyState) --}}
    @if(empty($hideEmptyState))
    <div class="glass rounded-xl p-6 text-center">
        <div class="text-4xl mb-4">📦</div>
        <h3 class="text-lg font-medium text-slate-200 mb-2">هنوز محصولی اضافه نشده است</h3>
        <p class="text-slate-400">برای شروع، محصول اول را از فرم بالا اضافه کنید.</p>
    </div>
    @endif
    @endif

</div>

@push('scripts')
<script>
(function () {
    const input   = document.getElementById('product-search');
    const listBox = document.getElementById('product-list');
    const hidId   = document.getElementById('product-id');
    const selBox  = document.getElementById('selected-product-info');
    const selName = document.getElementById('selected-product-name');
    const selMeta = document.getElementById('selected-product-meta');
    const form    = input ? input.closest('form') : null;
    const addBtn  = form ? form.querySelector('button[type="submit"]') : null;
    const nextBtn = document.getElementById('prw-next');

    if (!input || !listBox) return;

    const endpoint = "{{ route('products.autocomplete') }}";
    let timer = null, lastQuery = '';

    const enableSubmit = (enabled) => {
        if (!addBtn) return;
        addBtn.disabled = !enabled;
        if (enabled) {
            addBtn.classList.remove('opacity-50','cursor-not-allowed');
        } else {
            addBtn.classList.add('opacity-50','cursor-not-allowed');
        }
    };

    const toggleNext = () => {
        if (!nextBtn) return;
        const nameInput = document.getElementById('product-search');
        const qtyInput = document.getElementById('quantity');
        const unitInput = document.getElementById('unit');
        
        const isFilled = (el) => {
            if (!el) return false;
            if (el.type === 'number')
                return !!(el.value && Number(el.value) > 0);
            return !!(el.value && el.value.trim().length > 0);
        };
        
        const required = [nameInput, qtyInput, unitInput];
        nextBtn.disabled = !required.every(isFilled);
    };

    const hideList = () => {
        listBox.classList.add('hidden');
        listBox.innerHTML = '';
    };

    const showList = () => {
        listBox.classList.remove('hidden');
    };

    const renderItems = (items) => {
        listBox.innerHTML = '';
        if (!items || items.length === 0) {
            hideList();
            return;
        }
        items.forEach(it => {
            const div = document.createElement('div');
            div.className = 'px-4 py-2 cursor-pointer hover:bg-slate-700';
            const extra = [];
            if (it.brand)   extra.push(`برند: ${it.brand}`);
            if (it.country) extra.push(`کشور: ${it.country}`);
            if (it.cas_no)  extra.push(`CAS: ${it.cas_no}`);
            div.innerHTML = `
                <div class="text-slate-200">${it.label}</div>
                ${extra.length ? `<div class="text-xs text-slate-400 mt-0.5">${extra.join(' | ')}</div>` : ''}
            `;
            div.addEventListener('click', () => selectItem(it));
            listBox.appendChild(div);
        });
        showList();
    };

    const selectItem = (it) => {
        input.value = it.label;
        hidId.value = it.id;
        enableSubmit(true);
        hideList();

        // show selected summary
        selName.textContent = it.label;
        const meta = [];
        if (it.brand)   meta.push(`برند: ${it.brand}`);
        if (it.country) meta.push(`کشور: ${it.country}`);
        if (it.cas_no)  meta.push(`CAS: ${it.cas_no}`);
        selMeta.textContent = meta.join(' | ');
        selBox.classList.remove('hidden');
        
        // Enable next button
        toggleNext();
    };

    const search = async (q) => {
        if (!q || q.length < 2) {
            hideList();
            return;
        }
        try {
            const url = new URL(endpoint, window.location.origin);
            url.searchParams.set('q', q);
            url.searchParams.set('limit', 12);
            const res = await fetch(url.toString(), {
                method: 'GET',
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            });
            if (!res.ok) return hideList();
            const json = await res.json();
            renderItems(json.data || []);
        } catch (e) {
            hideList();
        }
    };

    // debounce input
    input.addEventListener('input', (e) => {
        const q = (e.target.value || '').trim();
        lastQuery = q;
        hidId.value = '';        // reset selected id on typing
        enableSubmit(false);     // disable submit until selection
        selBox.classList.add('hidden');
        toggleNext();            // update next button state

        clearTimeout(timer);
        timer = setTimeout(() => search(q), 250);
    });

    // Add event listeners for quantity and unit fields
    const qtyInput = document.getElementById('quantity');
    const unitInput = document.getElementById('unit');
    
    if (qtyInput) {
        ['input', 'change', 'keyup', 'blur'].forEach(evt => 
            qtyInput.addEventListener(evt, toggleNext)
        );
    }
    
    if (unitInput) {
        ['input', 'change', 'keyup', 'blur'].forEach(evt => 
            unitInput.addEventListener(evt, toggleNext)
        );
    }

    // Next button click handler
    if (nextBtn) {
        nextBtn.addEventListener('click', function() {
            location.hash = '#step-2';
            if (typeof window.renderContentForCurrentStep === 'function') {
                window.renderContentForCurrentStep();
            }
            if (typeof window.updateWizardUI === 'function') {
                window.updateWizardUI();
            }
            document.getElementById('wizard-container')?.scrollIntoView({behavior: 'smooth'});
        });
    }

    // close list when clicking outside
    document.addEventListener('click', (ev) => {
        const t = ev.target;
        if (!listBox.contains(t) && t !== input) hideList();
    });

    // keyboard navigation: Enter selects first item if open
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            const first = listBox.querySelector('div');
            if (first) {
                e.preventDefault();
                first.click();
            }
            return;
        }
        if (e.key === 'Escape') {
            hideList();
            input.blur();
        }
    });

    // initial state: if product_id already present (e.g., back with errors)
    if (hidId.value) {
        enableSubmit(true);
        selBox.classList.remove('hidden');
        // Keep input text as-is
    } else {
        enableSubmit(false);
    }
    
    // Initial toggle next state
    toggleNext();
})();
</script>
@endpush

@push('styles')
<style>
	/* اندازه آیتم‌های لیست جستجوی محصول */
	#product-list div { font-size: 12px !important; }
</style>
@endpush