@extends('layouts.panel')

@section('title', 'درخواست‌های خرید - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@section('meta_description', 'ویزارد ۵ مرحله‌ای ثبت درخواست خرید با تاریخچه خریدها')

@push('styles')
    @vite(['resources/css/pages/purchase-requests.css'])
@endpush

@push('scripts')
    @vite(['resources/js/pages/purchase-requests.js'])
@endpush

@section('content')
    <!-- بخش اصلی محتوا -->
    <div id="content-container">
        <main id="main-content" class="mx-auto w-full px-4 py-8">
            <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
                <h1 id="page-title" class="text-2xl font-bold text-slate-100">درخواست خرید جدید</h1>
            </header>

            <!-- منوی مراحل (Wizard Navigation) -->
            <nav class="flex justify-center mb-8">
                <div class="flex space-x-4 space-x-reverse rounded-full bg-slate-800 p-2 text-sm font-medium text-slate-400 shadow-md w-full justify-center">
                    <a href="#step-1" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700 active">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-blue-500 text-white font-bold text-xs ml-2">1</span>
                        انتخاب محصول
                    </a>
                    <a href="#step-2" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">2</span>
                        ثبت اطلاعات تامین‌کنندگان
                    </a>
                    <a href="#step-3" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">3</span>
                        مقایسه و انتخاب نهایی
                    </a>
                    <a href="#step-4" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">4</span>
                        ثبت خرید و گزارش
                    </a>
                    <a href="#step-5" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">5</span>
                        پیش‌نمایش و ذخیره
                    </a>
                </div>
            </nav>

            <!-- محتوای مراحل -->
            <div id="wizard-container" class="glass rounded-2xl p-8">
                <!-- مرحله ۱: انتخاب محصول -->
                <div id="step-1" class="wizard-step">
                    <h2 class="text-xl font-bold mb-4">مرحله ۱: انتخاب محصول و نوع درخواست</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <label for="product-search" class="block text-sm font-medium text-slate-400">نام محصول را وارد کنید:</label>
                            <div class="relative mt-1">
                                <input type="text" id="product-search" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="اسید اسکوربیک...">
                                <div id="product-list" class="absolute z-10 w-full mt-1 rounded-md shadow-lg overflow-hidden hidden"></div>
                            </div>
                        </div>
                        <div>
                            <label for="product-quantity" class="block text-sm font-medium text-slate-400">مقدار مورد نیاز:</label>
                            <div class="flex items-center mt-1">
                                <input type="number" id="product-quantity" value="1" min="1" class="block w-full rounded-l-none rounded-r-md">
                                <select id="product-unit" class="rounded-r-none rounded-l-md border-l-0">
                                    <option>کیلوگرم</option>
                                    <option>گرم</option>
                                    <option>لیتر</option>
                                </select>
                            </div>
                        </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>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                        <div>
                            <label class="block text-sm font-medium text-slate-400 mb-2">نوع خرید:</label>
                            <div class="grid grid-cols-2 gap-3" id="purchase-type-cards">
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center selected" data-value="official">
                                    <input id="purchase-type-official" name="purchaseType" type="radio" value="official" class="hidden" checked>
                                    <label for="purchase-type-official" class="cursor-pointer font-medium text-slate-300">خرید رسمی</label>
                                </div>
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="unofficial">
                                    <input id="purchase-type-unofficial" name="purchaseType" type="radio" value="unofficial" class="hidden">
                                    <label for="purchase-type-unofficial" class="cursor-pointer font-medium text-slate-300">خرید غیررسمی</label>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-400 mb-2">مقصد:</label>
                            <div class="grid grid-cols-2 gap-3" id="destination-cards">
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="warehouse">
                                    <input id="destination-warehouse" name="destination" type="radio" value="warehouse" class="hidden">
                                    <label for="destination-warehouse" class="cursor-pointer font-medium text-slate-300">برای انبار</label>
                                </div>
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="sales">
                                    <input id="destination-sales" name="destination" type="radio" value="sales" class="hidden">
                                    <label for="destination-sales" class="cursor-pointer font-medium text-slate-300">برای فروش</label>
                                </div>
                            </div>
                            <div id="warehouse-container" class="mt-4 hidden">
                                <label class="block text-sm font-medium text-slate-400 mb-2">انتخاب انبار:</label>
                                <select id="warehouse-select" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">در حال بارگذاری...</option>
                                </select>
                            </div>
                            <div id="sales-expert-container" class="mt-4 hidden">
                                <label class="block text-sm font-medium text-slate-400 mb-2">انتخاب کارشناس فروش:</label>
                                <select id="sales-expert" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">یک نفر را انتخاب کنید...</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button id="next-step-1" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition duration-300 ease-in-out" disabled>
                            مرحله بعدی
                        </button>
                    </div>
                </div>

                <!-- مرحله ۲: افزودن اطلاعات تامین‌کننده -->
                <div id="step-2" class="wizard-step hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold">مرحله ۲: ثبت اطلاعات تامین‌کنندگان</h2>
                        <button id="add-new-supplier-btn" class="px-4 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition duration-300 ease-in-out">
                            افزودن استعلام جدید
                        </button>
                    </div>
                    <div id="supplier-table-container">
                        <div class="p-6 glass rounded-xl text-center text-slate-400">
                            برای افزودن استعلام قیمت، روی دکمه "افزودن استعلام جدید" کلیک کنید.
                        </div>
                    </div>
                    <div class="flex justify-between mt-6">
                        <button id="prev-step-2" class="px-6 py-2 text-slate-400 rounded-xl hover:bg-white/5 transition">مرحله قبل</button>
                        <button id="next-step-2" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition duration-300 ease-in-out" disabled>مرحله بعدی</button>
                    </div>
                </div>

                <!-- مرحله ۳: مقایسه و انتخاب نهایی -->
                <div id="step-3" class="wizard-step hidden">
                    <h2 class="text-xl font-bold mb-4">مرحله ۳: مقایسه و انتخاب نهایی</h2>
                    <div id="comparison-table-container" class="overflow-x-auto"></div>
                    <div class="mt-4 p-4 rounded-xl bg-white/5">
                        <p class="text-sm text-slate-400">لطفاً <strong>حداقل یک</strong> تامین‌کننده را از جدول بالا برای مقایسه انتخاب کنید.</p>
                    </div>
                    <div class="flex justify-between mt-6">
                        <button id="prev-step-3" class="px-6 py-2 text-slate-400 rounded-xl hover:bg-white/5 transition">مرحله قبل</button>
                        <button id="next-step-3" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition duration-300 ease-in-out" disabled>مرحله بعدی</button>
                    </div>
                </div>

                <!-- مرحله ۴: ثبت خرید نهایی -->
                <div id="step-4" class="wizard-step hidden">
                    <h2 class="text-xl font-bold mb-4">مرحله ۴: ثبت خرید نهایی</h2>
                    
                    <div class="space-y-6">
                        <!-- تامین‌کنندگان منتخب -->
                        <div class="p-6 glass rounded-xl">
                            <h3 class="text-lg font-semibold mb-4">تامین‌کنندگان منتخب:</h3>
                            <ul id="final-suppliers-list" class="space-y-2">
                                <li class="text-slate-400">لطفاً در مرحله قبل تامین‌کنندگان را انتخاب کنید.</li>
                            </ul>
                        </div>

                        <!-- مشخصات خرید -->
                        <div class="p-6 glass rounded-xl">
                            <h3 class="text-lg font-semibold mb-4">مشخصات خرید:</h3>
                            
                            <div>
                                <label for="purchase-supplier" class="block text-sm font-medium text-slate-400 mb-2">تامین‌کننده نهایی:</label>
                                <select id="purchase-supplier" class="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-right font-iran-sans" dir="rtl">
                                    <option value="">یکی را انتخاب کنید...</option>
                                </select>
                            </div>

                            <div class="mt-4">
                                <label for="purchase-product-details" class="block text-sm font-medium text-slate-400">مشخصات محصول (برند، کشور و...):</label>
                                <textarea id="purchase-product-details" rows="3" class="mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
                            </div>

                            <div class="mt-4">
                                <label for="purchase-reason" class="block text-sm font-medium text-slate-400">دلیل خرید:</label>
                                <textarea id="purchase-reason" rows="3" class="mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
                            </div>

                            <!-- جزئیات فاکتور -->
                            <div class="mt-8 border-t border-slate-700 pt-6">
                                <h4 class="text-lg font-semibold mb-4">جزئیات فاکتور</h4>
                                <div id="invoice-details" class="p-4 rounded-lg bg-white/5">
                                    <div class="grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-8 pb-2">
                                        <span class="text-sm font-bold">نام محصول</span>
                                        <span class="text-sm font-bold">مقدار</span>
                                        <span class="text-sm font-bold">قیمت هر واحد</span>
                                        <span class="text-sm font-bold">جمع کل</span>
                                    </div>
                                    
                                    <div id="invoice-items" class="border-b border-slate-600 pb-2 mb-4">
                                        <div class="grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-8 items-center text-slate-300">
                                            <span id="invoice-product-name"></span>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="number" id="invoice-quantity" class="w-24 rounded-md" value="250" min="1">
                                                <span id="invoice-unit-display">کیلوگرم</span>
                                            </div>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="number" id="invoice-unit-price" class="w-28 rounded-md" value="0" min="0">
                                                <span>تومان</span>
                                            </div>
                                            <span id="total-price-display">0 تومان</span>
                                        </div>
                                    </div>

                                    <h5 class="text-sm font-medium mb-2">هزینه‌های جانبی:</h5>
                                    <div class="space-y-2">
                                        <div class="flex justify-between items-center text-sm">
                                            <label for="shipping-cost">هزینه حمل و نقل:</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="number" id="shipping-cost" class="w-28 rounded-md" value="0" min="0">
                                                <span>تومان</span>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <label for="storage-cost">انبارداری:</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="number" id="storage-cost" class="w-28 rounded-md" value="0" min="0">
                                                <span>تومان</span>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <label for="labor-cost">کارگر و تخلیه:</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="number" id="labor-cost" class="w-28 rounded-md" value="0" min="0">
                                                <span>تومان</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- جمع کل فاکتور -->
                            <div class="mt-4 flex justify-between items-center p-4 rounded-xl bg-white/10">
                                <h4 id="total-invoice-label" class="text-lg font-bold">جمع فاکتور:</h4>
                                <span id="total-invoice-display" class="text-2xl font-bold text-blue-400">۰ تومان</span>
                            </div>
                            
                        </div>
                    </div>

                    <!-- دکمه‌های ناوبری -->
                    <div class="flex justify-between mt-6">
                        <button id="prev-step-4" class="px-6 py-2 text-slate-400 rounded-xl hover:bg-white/5 transition">مرحله قبل</button>
                        <button id="next-step-4" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition">مرحله بعدی</button>
                    </div>
                </div>

                <!-- مرحله ۵: پیش‌نمایش و ذخیره -->
                <div id="step-5" class="wizard-step hidden">
                    <h2 class="text-xl font-bold mb-4">مرحله ۵: پیش‌نمایش و ذخیره</h2>
                    <div id="final-preview" class="space-y-4 p-6 glass rounded-xl">
                        <p class="text-slate-400">لطفاً فرم را در مراحل قبل تکمیل کنید.</p>
                    </div>
                    <div class="flex justify-between mt-6">
                        <button id="prev-step-5" class="px-6 py-2 text-slate-400 rounded-xl transition bg-transparent inline-flex items-center w-auto flex-none hover:bg-red-600 hover:text-white">مرحله قبل</button>
                        <button id="save-all" class="px-6 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition"><span class="ml-2">💾</span> ذخیره نهایی</button>
                    </div>
                </div>
            </div>
            
            <!-- بخش تاریخچه خریدها -->
            <div class="mt-8 pt-6 border-t border-slate-700">
                <h3 class="text-xl font-bold mb-4">لیست خریدهای ثبت‌شده</h3>
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-4 p-4 glass rounded-xl">
                    <div class="relative w-full sm:w-72">
                        <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>
                        </span>
                        <input type="text" id="history-search" placeholder="جستجو در محصول یا تامین‌کننده..." class="w-full rounded-xl border-0 bg-white/5 pl-11 pr-3 text-slate-100 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/50" />
                    </div>
                    <div class="flex items-center gap-3 text-sm flex-wrap">
                        <div class="flex items-center gap-2">
                            <label for="filters-select" class="text-slate-400">فیلتر:</label>
                            <select id="filters-select" class="rounded-md text-sm">
                                <option value="all" selected>همه</option>
                                <option value="completed">خریدهای نهایی شده</option>
                                <option value="failed">خریدهای ناتمام</option>
                                <option value="official">خریدهای رسمی</option>
                                <option value="unofficial">خریدهای غیررسمی</option>
                                <option value="warehouse">خریدهای برای انبار</option>
                                <option value="sales">خریدهای برای تیم فروش</option>
                            </select>
                        </div>
                        <div class="h-6 w-px bg-white/10 hidden sm:block"></div>
                        <div class="flex items-center gap-2">
                        <label for="items-per-page" class="text-slate-400">نمایش:</label>
                        <select id="items-per-page" class="rounded-md text-sm">
                            <option value="10">۱۰</option>
                            <option value="25">۲۵</option>
                            <option value="50">۵۰</option>
                            <option value="100">۱۰۰</option>
                            <option value="all">همه</option>
                        </select>
                        <span class="text-slate-400">مورد</span>
                        </div>
                    </div>
                </div>
                <div id="purchase-history-container" class="space-y-4"></div>
                <div class="table-footer" id="history-footer" style="display: none;">
                    <div id="range-info" class="range-info"></div>
                    <nav id="pagination-container" class="pagination"></nav>
                </div>
            </div>
        </main>
    </div>
@endsection

@push('scripts')
<script>
    // Route prefix for purchase requests
    const routePrefix = '{{ $routePrefix ?? 'admin.purchase-requests' }}';

    // Helper function to get route URL
    function getPurchaseRequestRouteUrl(routeName, id) {
        let baseUrl;
        
        // Check for admin prefix first (more specific)
        if (routeName.startsWith('admin.purchase-requests')) {
            baseUrl = '/admin/purchase-requests';
        } else if (routeName.startsWith('purchase.purchase-requests')) {
            baseUrl = '/purchase/purchase-requests';
        } else if (routeName.startsWith('sales.purchase_requests')) {
            baseUrl = '/sales/purchase-requests';
        } else {
            // Fallback: check if contains 'purchase' (but not 'admin.purchase')
            if (routeName.includes('purchase') && !routeName.startsWith('admin')) {
                baseUrl = '/purchase/purchase-requests';
            } else if (routeName.includes('sales')) {
                baseUrl = '/sales/purchase-requests';
            } else {
                baseUrl = '/admin/purchase-requests';
            }
        }
        
        if (routeName.includes('.show')) {
            return `${baseUrl}/${id}`;
        } else if (routeName.includes('.edit')) {
            return `${baseUrl}/${id}/edit`;
        } else if (routeName.includes('.create')) {
            return `${baseUrl}/create`;
        }
        return baseUrl;
    }

    // --- بخش داده‌های اولیه ---

    // داده نمونه حذف شد؛ تاریخچه از API دریافت می‌شود
    const purchaseHistory = [];

    // --- State ---
    const state = {
        currentStep: 1,
        selectedProduct: null,
        selectedProductId: null,
        quantity: 1,
        unit: 'کیلوگرم',
        purchaseType: null,
        destination: null,
        warehouseId: null,
        salesUserId: null,
        supplierReports: [],
        finalSuppliers: [],
        purchaseInfo: null,
        purchaseHistory: purchaseHistory,
        historyCurrentPage: 1,
        historyItemsPerPage: 10,
        historySearchQuery: '',
        totalHistoryItems: 0, // Total count from API for row numbering
        filters: {
            completed: false,
            failed: false,
            official: false,
            unofficial: false,
            warehouse: false,
            sales: false,
        }
    };

    // --- DOM refs ---
    const stepLinks = document.querySelectorAll('.wizard-step-link');
    const productSearchInput = document.getElementById('product-search');
    const productListDiv = document.getElementById('product-list');
    const selectedProductInfoDiv = document.getElementById('selected-product-info');
    const selectedProductNameSpan = document.getElementById('selected-product-name');
    const nextStep1Btn = document.getElementById('next-step-1');
    const supplierTableContainer = document.getElementById('supplier-table-container');
    const comparisonTableContainer = document.getElementById('comparison-table-container');
    const nextStep2Btn = document.getElementById('next-step-2');
    const nextStep3Btn = document.getElementById('next-step-3');
    const finalSuppliersListUl = document.getElementById('final-suppliers-list');
    const purchaseSupplierSelect = document.getElementById('purchase-supplier');
    const saveAllBtn = document.getElementById('save-all');
    const finalPreviewDiv = document.getElementById('final-preview');
    const nextStep4Btn = document.getElementById('next-step-4');
    const invoiceProductName = document.getElementById('invoice-product-name');
    const invoiceQuantityInput = document.getElementById('invoice-quantity');
    const invoiceUnitPriceInput = document.getElementById('invoice-unit-price');
    const totalPriceDisplay = document.getElementById('total-price-display');
    const shippingCostInput = document.getElementById('shipping-cost');
    const storageCostInput = document.getElementById('storage-cost');
    const laborCostInput = document.getElementById('labor-cost');
    const totalInvoiceDisplay = document.getElementById('total-invoice-display');
    // Payment payer fields removed - no longer used
    let purchaseHistoryContainer = document.getElementById('purchase-history-container');
    const addNewSupplierBtn = document.getElementById('add-new-supplier-btn');
    const productQuantityInput = document.getElementById('product-quantity');
    const productUnitSelect = document.getElementById('product-unit');
    const packagingInput = document.getElementById('packaging-input');
    const packagingSuggestions = document.getElementById('packaging-suggestions');
    const gradeInput = document.getElementById('grade-input');
    const gradeSuggestions = document.getElementById('grade-suggestions');
    const invoiceUnitDisplay = document.getElementById('invoice-unit-display');
    // Old warehouse selectors removed - now using warehouse-container
    // Warehouse container management
    const warehouseContainer = document.getElementById('warehouse-container');
    const warehouseSelect = document.getElementById('warehouse-select');
    const salesExpertContainer = document.getElementById('sales-expert-container');
    
    // Load warehouses function
    async function loadWarehousesForSelect() {
        if (!warehouseSelect) return;
        
        try {
            warehouseSelect.innerHTML = '<option value="">در حال بارگذاری...</option>';
            const response = await fetch('/admin/inventory/warehouses/list', {
                headers: { 'Accept': 'application/json' }
            });
            
            const data = await response.json();
            
            if (data && data.warehouses && Array.isArray(data.warehouses)) {
                warehouseSelect.innerHTML = '<option value="">یک انبار را انتخاب کنید...</option>';
                data.warehouses.forEach(warehouse => {
                    const option = document.createElement('option');
                    option.value = warehouse.id;
                    // Format: "نام انبار / شهر" or just "نام انبار"
                    const displayName = warehouse.location 
                        ? `${warehouse.name} / ${warehouse.location}`
                        : warehouse.name;
                    option.textContent = displayName;
                    warehouseSelect.appendChild(option);
                });
            } else {
                warehouseSelect.innerHTML = '<option value="">انباری یافت نشد</option>';
            }
        } catch (error) {
            console.error('Error loading warehouses:', error);
            warehouseSelect.innerHTML = '<option value="">خطا در بارگذاری انبارها</option>';
        }
    }

    // Handle destination card clicks
    const destinationCards = document.querySelectorAll('#destination-cards .radio-card');
    destinationCards.forEach(card => {
        card.addEventListener('click', function() {
            destinationCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
                const destination = radio.value;
                state.destination = destination;
                
                // Show/hide containers based on destination
                if (destination === 'sales') {
                    // Show sales expert, hide warehouse
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.remove('hidden');
                    }
                    if (warehouseContainer) {
                        warehouseContainer.classList.add('hidden');
                    }
                    // Load sales experts if needed
                    const salesExpertSelect = document.getElementById('sales-expert');
                    if (salesExpertSelect && salesExpertSelect.options.length <= 1) {
                        loadSalesExperts();
                    }
                } else if (destination === 'warehouse') {
                    // Show warehouse, hide sales expert
                    if (warehouseContainer) {
                        warehouseContainer.classList.remove('hidden');
                    }
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.add('hidden');
                    }
                    // Load warehouses
                    loadWarehousesForSelect();
                } else {
                    // Hide both if nothing selected
                    if (warehouseContainer) {
                        warehouseContainer.classList.add('hidden');
                    }
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.add('hidden');
                    }
                }
            }
        });
    });

    // Load sales experts function (if not exists)
    async function loadSalesExperts() {
        try {
            const response = await fetch('/admin/users/by-role?role=کارشناس فروش', {
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            const result = await response.json();
            const select = document.getElementById('sales-expert');
            if (select && result.data && result.data.length > 0) {
                select.innerHTML = '<option value="">یک نفر را انتخاب کنید...</option>';
                result.data.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.name;
                    select.appendChild(option);
                });
            }
        } catch (error) {
            console.error('Error loading sales experts:', error);
        }
    }

    // Store warehouse selection
    if (warehouseSelect) {
        warehouseSelect.addEventListener('change', function() {
            state.warehouseId = this.value || null;
        });
    }

    // Old warehouse selectors functions removed - now using warehouse-container
    const historySearchInput = document.getElementById('history-search');
    const itemsPerPageSelect = document.getElementById('items-per-page');
    const paginationContainer = document.getElementById('pagination-container');
    const rangeInfoDiv = document.getElementById('range-info');
    const historyFooter = document.getElementById('history-footer');

    // --- ابزار: Debounce برای محدودسازی درخواست‌ها ---
    function debounce(func, delay) {
        let timeoutId;
        return function(...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                func.apply(this, args);
            }, delay);
        };
    }

    // Packaging live suggest (non-mandatory)
    if (packagingInput && packagingSuggestions) {
        const fetchPackaging = debounce(async function(q){
            try {
                const url = new URL(`{{ route('admin.products.suggest') }}`);
                url.searchParams.set('type', 'packaging');
                url.searchParams.set('q', q || '');
                url.searchParams.set('limit', '10');
                const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                if (!res.ok) return;
                const data = await res.json();
                const items = (data.items || []).slice(0, 10);
                if (items.length === 0) { packagingSuggestions.classList.add('hidden'); packagingSuggestions.innerHTML = ''; return; }
                const seen = new Set();
                packagingSuggestions.innerHTML = items
                    .filter(v => { const t = String(v).trim(); if (t === '' || seen.has(t)) return false; seen.add(t); return true; })
                    .map(v => `<button type="button" class="w-full text-right px-3 py-2 hover:bg-slate-700 transition border-b border-slate-700 last:border-b-0">${v}</button>`)
                    .join('');
                packagingSuggestions.classList.remove('hidden');
            } catch (e) { /* ignore */ }
        }, 250);

        packagingInput.addEventListener('input', (e) => {
            const q = e.target.value || '';
            fetchPackaging(q);
        });
        packagingSuggestions.addEventListener('click', (e) => {
            const btn = e.target.closest('button');
            if (!btn) return;
            packagingInput.value = btn.textContent;
            packagingSuggestions.classList.add('hidden');
        });
        document.addEventListener('click', (e) => {
            if (!packagingInput.contains(e.target) && !packagingSuggestions.contains(e.target)) {
                packagingSuggestions.classList.add('hidden');
            }
        });
    }

    // Grade live suggest (non-mandatory)
    if (gradeInput && gradeSuggestions) {
        const fetchGrades = debounce(async function(q){
            try {
                const url = new URL(`{{ route('admin.products.suggest') }}`);
                url.searchParams.set('type', 'grade');
                url.searchParams.set('q', q || '');
                url.searchParams.set('limit', '10');
                const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                if (!res.ok) return;
                const data = await res.json();
                const items = (data.items || []).slice(0, 10);
                if (items.length === 0) { gradeSuggestions.classList.add('hidden'); gradeSuggestions.innerHTML = ''; return; }
                const seen = new Set();
                gradeSuggestions.innerHTML = items
                    .filter(v => { const t = String(v).trim(); if (t === '' || seen.has(t)) return false; seen.add(t); return true; })
                    .map(v => `<button type="button" class="w-full text-right px-3 py-2 hover:bg-slate-700 transition border-b border-slate-700 last:border-b-0">${v}</button>`)
                    .join('');
                gradeSuggestions.classList.remove('hidden');
            } catch (e) { /* ignore */ }
        }, 250);

        gradeInput.addEventListener('input', (e) => {
            const q = e.target.value || '';
            fetchGrades(q);
        });
        gradeSuggestions.addEventListener('click', (e) => {
            const btn = e.target.closest('button');
            if (!btn) return;
            gradeInput.value = btn.textContent;
            gradeSuggestions.classList.add('hidden');
        });
        document.addEventListener('click', (e) => {
            if (!gradeInput.contains(e.target) && !gradeSuggestions.contains(e.target)) {
                gradeSuggestions.classList.add('hidden');
            }
        });
    }

    // --- Modal: Add Supplier ---
    const addSupplierModal = document.createElement('div');
    addSupplierModal.id = 'add-supplier-modal';
    addSupplierModal.className = 'fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50 hidden';
    addSupplierModal.innerHTML = `
        <div class="glass rounded-2xl w-full max-w-6xl max-h-[90vh] overflow-y-auto" style="padding: 10px 15px; width: 1000px;">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold text-slate-100">افزودن استعلام برای: <span id="modal-product-name" class="text-blue-400"></span></h3>
                    <button id="close-add-supplier-modal" class="text-gray-400 hover:text-gray-300 text-2xl font-bold">&times;</button>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2">
                        <h4 class="font-semibold mb-4 text-slate-200">اطلاعات استعلام را وارد کنید:</h4>
                        <form id="add-supplier-form" class="space-y-4">
                            <!-- Row 1: نام تامین کننده و قیمت -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">نام تامین کننده:</label>
                                    <div class="relative">
                                        <input type="text" id="supplier-search-input" name="name" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required autocomplete="off" placeholder="نام تامین کننده را وارد کنید">
                                        <div id="supplier-list" class="absolute z-10 w-full mt-1 rounded-lg shadow-lg overflow-hidden hidden bg-slate-800 border border-slate-600"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">قیمت فروش (به تومان):</label>
                                    <input type="text" name="price" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required placeholder="قیمت را وارد کنید">
                                </div>
                            </div>
                            
                            <!-- Row 2: شرایط فروش -->
                            <div class="form-group">
                                <label class="block text-sm font-medium text-slate-400 mb-2">شرایط فروش:</label>
                                <textarea name="conditions" rows="2" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" style="background:#0b1220 !important;" placeholder="شرایط فروش را وارد کنید"></textarea>
                            </div>
                            
                            <!-- Row 3: برند و کشور -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">برند محصول:</label>
                                    <input type="text" name="brand" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="برند محصول را وارد کنید">
                                </div>
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">کشور تولیدکننده:</label>
                                    <input type="text" name="country" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="کشور تولیدکننده را وارد کنید">
                                </div>
                            </div>
                            
                            <!-- Row 4: بسته‌بندی و گرید -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">بسته بندی:</label>
                                    <div class="relative">
                                        <input type="text" name="packaging" id="packaging-input" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="مثلاً: کیسه 25kg" autocomplete="off">
                                        <div id="packaging-suggestions" class="absolute z-10 mt-1 w-full rounded-md bg-slate-800 border border-slate-700 shadow-lg max-h-56 overflow-y-auto hidden"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">گرید:</label>
                                    <input type="text" name="grade" id="grade-input" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="مثلاً: غذایی / دارویی" autocomplete="off">
                                    <div id="grade-suggestions" class="absolute z-10 mt-1 w-full rounded-md bg-slate-800 border border-slate-700 shadow-lg hidden"></div>
                                </div>
                            </div>
                            
                            <!-- Row 5: توضیحات -->
                            <div class="form-group">
                                <label class="block text-sm font-medium text-slate-400 mb-2">توضیحات:</label>
                                <textarea name="notes" rows="2" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" style="background:#0b1220 !important;" placeholder="توضیحات اضافی را وارد کنید"></textarea>
                            </div>
                            
                            <!-- Row 6: تاریخ استعلام -->
                            <div class="form-group">
                                <label class="block text-sm font-medium text-slate-400 mb-2">تاریخ استعلام:</label>
                                <input type="hidden" name="quoted_at" id="quoted_at" value="">
                                @php
                                    $now = \Morilog\Jalali\Jalalian::now();
                                    $currentYear = $now->getYear();
                                    $currentMonth = $now->getMonth();
                                    $currentDay = $now->getDay();
                                    $currentDateShamsi = $now->format('Y/m/d');
                                @endphp
                                <input type="text" id="quoted_at_shamsi" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono tracking-widest cursor-pointer" value="{{ $currentDateShamsi }}" readonly dir="ltr" style="cursor: pointer; text-align: right; direction: ltr;">
                                <small class="text-xs text-slate-500 mt-1 block">برای انتخاب تاریخ روی فیلد کلیک کنید</small>
                            </div>
                            
                            <!-- Submit Button -->
                            <div class="flex justify-end pt-4">
                                <button type="button" id="submit-add-supplier" class="px-6 py-2 bg-red-600 text-white font-medium rounded-xl shadow-lg hover:bg-red-700 transition duration-300 ease-in-out">
                                    افزودن به لیست
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="lg:col-span-1">
                        <h4 class="font-semibold mb-4 text-slate-200">استعلامات قبلی (جهت اطلاع):</h4>
                        <div id="modal-supplier-list" class="space-y-3 max-h-96 overflow-y-auto pr-2">
                            <div class="p-4 glass rounded-xl text-center text-slate-400">
                                در حال بارگذاری اطلاعات...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(addSupplierModal);

    function populateSupplierReferenceList() {
        const listContainer = document.getElementById('modal-supplier-list');
        if (!listContainer) return;
        listContainer.innerHTML = '<p class="text-slate-400">در حال بارگذاری اطلاعات...</p>';

        const productId = state.selectedProductId;
        if (!productId) {
            listContainer.innerHTML = '<p class="text-red-400">خطا: محصولی انتخاب نشده است.</p>';
            return;
        }

        // Check if supplier is selected
        const supplierSelect = document.querySelector('select[name="supplier_id"]');
        const selectedSupplierId = supplierSelect ? supplierSelect.value : null;
        
        if (!selectedSupplierId) {
            listContainer.innerHTML = '<p class="text-slate-400">ابتدا تامین‌کننده را انتخاب کنید تا استعلامات قبلی نمایش داده شود.</p>';
            return;
        }

        // Try to narrow by currently typed supplier (if any)
        const supplierName = (document.getElementById('supplier-search-input')?.value || '').trim();
        const url = new URL(`{{ url('/admin/products') }}/${productId}/previous-suppliers`, window.location.origin);
        if (supplierName.length > 0) { url.searchParams.set('supplier', supplierName); }
        url.searchParams.set('supplier_id', selectedSupplierId);

        fetch(url.toString())
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                listContainer.innerHTML = '';
                const items = (data && data.data) ? data.data : Array.isArray(data) ? data : [];
                if (items.length === 0) {
                    listContainer.innerHTML = '<p class="text-slate-400">استعلام قیمتی از قبل برای این محصول در دسترس نیست، اولین را ایجاد کنید.</p>';
                } else {
                    items.forEach(supplier => {
                        const item = document.createElement('div');
                        item.className = 'p-4 glass rounded-xl hover:bg-white/5 transition duration-200';
                        const priceText = (supplier.price || supplier.price === 0) ? new Intl.NumberFormat('fa-IR').format(supplier.price) + ' تومان' : 'ثبت نشده';
                        const updatedText = supplier.last_quoted_at ? new Date(supplier.last_quoted_at).toLocaleDateString('fa-IR') : 'ثبت نشده';
                        const phoneText = supplier.phone || ' ثبت نشده';
                        item.innerHTML = `
                            <div class="flex items-start justify-between mb-2">
                                <h5 class="font-bold text-slate-200 text-sm">${supplier.name}</h5>
                                ${supplier.supplier_id ? `<span class="text-xs text-slate-500">#${supplier.supplier_id}</span>` : ''}
                            </div>
                            <div class="space-y-1">
                                <p class="text-xs text-slate-400">آخرین قیمت: ${priceText}</p>
                                <p class="text-xs text-slate-400">بروزرسانی: ${updatedText}</p>
                                <p class="text-xs text-slate-400">تماس: ${phoneText}</p>
                            </div>
                        `;
                        listContainer.appendChild(item);
                    });
                }
            })
            .catch(err => {
                console.error('Error fetching previous suppliers:', err);
                listContainer.innerHTML = '<p class="text-red-400">خطا در بارگذاری اطلاعات. لطفاً دوباره تلاش کنید.</p>';
            });
    }

    // Open modal on button click
    addNewSupplierBtn?.addEventListener('click', () => {
        if (!state.selectedProduct) {
            alert('لطفاً ابتدا محصول را در مرحله ۱ انتخاب کنید.');
            return;
        }
        const titleSpan = document.getElementById('modal-product-name');
        if (titleSpan) titleSpan.textContent = state.selectedProduct;
        populateSupplierReferenceList();
        
        addSupplierModal.classList.remove('hidden');
        
        // Initialize Persian calendar datepicker
        const quotedAtShamsiInput = document.getElementById('quoted_at_shamsi');
        const quotedAtHiddenInput = document.getElementById('quoted_at');
        
        @php
            $now = \Morilog\Jalali\Jalalian::now();
            $currentYear = $now->getYear();
            $currentMonth = $now->getMonth();
        @endphp
        
        let currentCalendarYear = {{ $currentYear }};
        let currentCalendarMonth = {{ $currentMonth }};
        
        if (quotedAtShamsiInput) {
            // Get current year from input if available
            const initialValue = quotedAtShamsiInput.value;
            const yearMatch = initialValue.match(/^(\d{4})/);
            if (yearMatch) {
                currentCalendarYear = parseInt(yearMatch[1]);
                const monthMatch = initialValue.match(/\/(\d{1,2})\//);
                if (monthMatch) {
                    currentCalendarMonth = parseInt(monthMatch[1]);
                }
            }
            
            // Show calendar when input is clicked or focused
            quotedAtShamsiInput.addEventListener('focus', function(e) {
                e.preventDefault();
                showPersianCalendar(currentCalendarYear, currentCalendarMonth);
            });
            
            quotedAtShamsiInput.addEventListener('click', function(e) {
                e.preventDefault();
                showPersianCalendar(currentCalendarYear, currentCalendarMonth);
            });
        }
        
        // Function to show Persian calendar (make it accessible globally)
        window.showPersianCalendar = function(year, month) {
            // Remove existing calendar if any (always remove to allow navigation)
            const existingCalendar = document.getElementById('persian-calendar-modal');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Reset loading flag to allow new calendar to load
            window.calendarLoading = false;
            window.calendarConfirmProcessing = false;
            
            // Set loading flag for new calendar
            window.calendarLoading = true;
            
            // Fetch calendar view from server
            fetch(`{{ route('api.calendar-view') }}?year=${year}&month=${month}`, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    // Always get text, even if status is not ok
                    return response.text().then(text => {
                        if (!response.ok) {
                            // Check if it's an error HTML page
                            if (text.includes('persian-calendar-container')) {
                                // It's actually the calendar, just with error status
                                return text;
                            }
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0) {
                        throw new Error('Empty calendar HTML received');
                    }
                    
                    // Check if HTML contains calendar structure
                    if (!html.includes('persian-calendar-container')) {
                        throw new Error('Invalid calendar HTML structure');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.id = 'calendar-backdrop';
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        closeCalendarModal();
                    }, { once: true });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.id = 'calendar-container';
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    // Force calendar to be visible immediately
                    const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                    if (calendarDiv) {
                        calendarDiv.style.display = 'block';
                        calendarDiv.style.visibility = 'visible';
                        calendarDiv.style.opacity = '1';
                    }
                    
                    // Attach direct event listeners to navigation buttons (more reliable)
                    const prevMonthBtn = calendarContainer.querySelector('.prev-month');
                    const nextMonthBtn = calendarContainer.querySelector('.next-month');
                    
                    if (prevMonthBtn) {
                        prevMonthBtn.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            
                            // Use current calendar month/year instead of button attributes
                            let newYear = currentCalendarYear;
                            let newMonth = currentCalendarMonth;
                            
                            // Decrement month first
                            newMonth--;
                            
                            // If month is less than 1, go to previous year
                            if (newMonth < 1) {
                                newMonth = 12;
                                newYear--;
                            }
                            
                            console.log('Navigating to previous month:', newYear, newMonth, 'from:', currentCalendarYear, currentCalendarMonth);
                            
                            // Reset loading flag to allow navigation
                            window.calendarLoading = false;
                            
                            currentCalendarYear = newYear;
                            currentCalendarMonth = newMonth;
                            showPersianCalendar(newYear, newMonth);
                            return false;
                        });
                    }
                    
                    if (nextMonthBtn) {
                        nextMonthBtn.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            
                            // Use current calendar month/year instead of button attributes
                            let newYear = currentCalendarYear;
                            let newMonth = currentCalendarMonth;
                            
                            // Increment month first
                            newMonth++;
                            
                            // If month is greater than 12, go to next year
                            if (newMonth > 12) {
                                newMonth = 1;
                                newYear++;
                            }
                            
                            console.log('Navigating to next month:', newYear, newMonth, 'from:', currentCalendarYear, currentCalendarMonth);
                            
                            // Reset loading flag to allow navigation
                            window.calendarLoading = false;
                            
                            currentCalendarYear = newYear;
                            currentCalendarMonth = newMonth;
                            showPersianCalendar(newYear, newMonth);
                            return false;
                        });
                    }
                    
                    // Helper function to close modal
                    function closeCalendarModal() {
                        const modalEl = document.getElementById('persian-calendar-modal');
                        if (modalEl) {
                            modalEl.style.display = 'none';
                            modalEl.style.visibility = 'hidden';
                            modalEl.style.opacity = '0';
                            modalEl.style.pointerEvents = 'none';
                            modalEl.remove();
                        }
                        const backdropEl = document.getElementById('calendar-backdrop');
                        if (backdropEl) backdropEl.remove();
                        const containerEl = document.getElementById('calendar-container');
                        if (containerEl) containerEl.remove();
                        window.calendarLoading = false;
                    }
                    
                    // Use event delegation for all calendar interactions (single listener for better performance)
                    calendarContainer.addEventListener('click', function(e) {
                        // Prevent clicks on calendar from closing modal (but allow navigation)
                        e.stopPropagation();
                        
                        // Handle month navigation FIRST (before day selection)
                        // Check for both button class and prev/next month classes
                        const prevBtn = e.target.closest('.prev-month') || e.target.closest('.calendar-nav-btn.prev-month');
                        if (prevBtn) {
                            e.preventDefault();
                            e.stopImmediatePropagation();
                            
                            // Use current calendar month/year instead of button attributes
                            let newYear = currentCalendarYear;
                            let newMonth = currentCalendarMonth;
                            
                            // Decrement month first
                            newMonth--;
                            
                            // If month is less than 1, go to previous year
                            if (newMonth < 1) {
                                newMonth = 12;
                                newYear--;
                            }
                            
                            console.log('Navigating to previous month:', newYear, newMonth, 'from:', currentCalendarYear, currentCalendarMonth);
                            
                            // Reset loading flag to allow navigation
                            window.calendarLoading = false;
                            
                            currentCalendarYear = newYear;
                            currentCalendarMonth = newMonth;
                            showPersianCalendar(newYear, newMonth);
                            return false;
                        }
                        
                        const nextBtn = e.target.closest('.next-month') || e.target.closest('.calendar-nav-btn.next-month');
                        if (nextBtn) {
                            e.preventDefault();
                            e.stopImmediatePropagation();
                            
                            // Use current calendar month/year instead of button attributes
                            let newYear = currentCalendarYear;
                            let newMonth = currentCalendarMonth;
                            
                            // Increment month first
                            newMonth++;
                            
                            // If month is greater than 12, go to next year
                            if (newMonth > 12) {
                                newMonth = 1;
                                newYear++;
                            }
                            
                            console.log('Navigating to next month:', newYear, newMonth, 'from:', currentCalendarYear, currentCalendarMonth);
                            
                            // Reset loading flag to allow navigation
                            window.calendarLoading = false;
                            
                            currentCalendarYear = newYear;
                            currentCalendarMonth = newMonth;
                            showPersianCalendar(newYear, newMonth);
                            return false;
                        }
                        
                        // Handle day selection
                        const dayEl = e.target.closest('.calendar-day');
                        if (dayEl) {
                            const gregorian = dayEl.getAttribute('data-gregorian');
                            const shamsi = dayEl.getAttribute('data-shamsi');
                            
                            // Remove selected class from all days
                            calendarContainer.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('selected'));
                            // Add selected class to clicked day
                            dayEl.classList.add('selected');
                            return;
                        }
                        
                        // Handle "Go to Today" button
                        if (e.target.closest('.calendar-today-btn')) {
                            e.stopPropagation();
                            @php
                                $now = \Morilog\Jalali\Jalalian::now();
                            @endphp
                            currentCalendarYear = {{ $now->getYear() }};
                            currentCalendarMonth = {{ $now->getMonth() }};
                            showPersianCalendar(currentCalendarYear, currentCalendarMonth);
                            return;
                        }
                        
                        // Handle "Confirm Date" button
                        if (e.target.closest('.calendar-confirm-btn')) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            
                            const btn = e.target.closest('.calendar-confirm-btn');
                            
                            // Prevent multiple clicks
                            if (window.calendarConfirmProcessing) {
                                return false;
                            }
                            window.calendarConfirmProcessing = true;
                            
                            // Disable button immediately
                            btn.disabled = true;
                            btn.style.opacity = '0.5';
                            btn.style.cursor = 'not-allowed';
                            
                            // Find selected day
                            let selectedDay = calendarContainer.querySelector('.calendar-day.selected');
                            
                            // If no day is selected, try to use today
                            if (!selectedDay) {
                                selectedDay = calendarContainer.querySelector('.calendar-day.today');
                            }
                            
                            if (selectedDay) {
                                // Use selected/today day's date
                                const gregorian = selectedDay.getAttribute('data-gregorian');
                                const shamsi = selectedDay.getAttribute('data-shamsi');
                                
                                const shamsiInput = document.getElementById('quoted_at_shamsi');
                                const hiddenInput = document.getElementById('quoted_at');
                                if (shamsiInput) shamsiInput.value = shamsi;
                                if (hiddenInput) hiddenInput.value = gregorian;
                                
                                // Close modal immediately
                                closeCalendarModal();
                                
                                return false;
                            } else {
                                // Re-enable button if no date found
                                window.calendarConfirmProcessing = false;
                                btn.disabled = false;
                                btn.style.opacity = '1';
                                btn.style.cursor = 'pointer';
                                // Alert user to select a date
                                if (window.customAlert) {
                                    window.customAlert.warning('توجه', 'لطفاً ابتدا یک تاریخ انتخاب کنید');
                                } else {
                                    alert('لطفاً ابتدا یک تاریخ انتخاب کنید');
                                }
                                return false;
                            }
                        }
                    });
                })
                .catch(error => {
                    window.calendarLoading = false;
                    console.error('Failed to load calendar:', error);
                    if (window.customAlert) {
                        window.customAlert.error('خطا', 'خطا در بارگذاری تقویم: ' + error.message);
                    } else {
                        alert('خطا در بارگذاری تقویم: ' + error.message);
                    }
                });
        }
    });

    // Close modal events
    addSupplierModal.addEventListener('click', (e) => {
        if (e.target.id === 'add-supplier-modal') addSupplierModal.classList.add('hidden');
    });
    document.addEventListener('click', (e) => {
        if (e.target && e.target.id === 'close-add-supplier-modal') {
            addSupplierModal.classList.add('hidden');
        }
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') addSupplierModal.classList.add('hidden');
    });

    const OFFER_STORAGE_KEY = 'pr_wizard_offers_v1';

    function loadOffersFromStorage(productId) {
        try {
            const raw = localStorage.getItem(OFFER_STORAGE_KEY);
            if (!raw) return [];
            const parsed = JSON.parse(raw);
            return Array.isArray(parsed)
                ? parsed.filter(x => String(x.productId||'') === String(productId||''))
                : [];
        } catch { return []; }
    }

    function saveOffersToStorage(offers) {
        try {
            // Store only current product offers (productId is attached on each reportData)
            const raw = localStorage.getItem(OFFER_STORAGE_KEY);
            const existing = Array.isArray(JSON.parse(raw||'[]')) ? JSON.parse(raw||'[]') : [];
            // Remove current product's old offers, then add new
            const prdId = state.selectedProductId;
            const kept = existing.filter(x => String(x.productId||'') !== String(prdId||''));
            localStorage.setItem(OFFER_STORAGE_KEY, JSON.stringify([ ...kept, ...offers ]));
        } catch {}
    }

    // Handle add-supplier submit (client-only until final submit)
    document.addEventListener('click', async (e) => {
        if (e.target && e.target.id === 'submit-add-supplier') {
            const form = document.getElementById('add-supplier-form');
            if (!form) return;
            const name = (form.elements.name?.value || '').trim();
            const priceInput = form.elements.price;
            // priceType از مرحله قبل تعیین می‌شود
            
            // Convert price to numeric value
            const price = priceInput ? (window.priceFormatter ? window.priceFormatter.getNumericValue(priceInput) : priceInput.value.replace(/[^\d.]/g, '')) : '';
            
            if (!name || !price) { 
                if (window.customAlert) {
                    window.customAlert.warning('خطا', 'لطفا نام تامین کننده و قیمت را وارد کنید.');
                } else {
                    alert('لطفا نام تامین کننده و قیمت را وارد کنید.');
                }
                return; 
            }
            
            const supplierInput = document.getElementById('supplier-search-input');
            const isNewSupplier = supplierInput.dataset.isNewSupplier === 'true';
            const supplierId = supplierInput.dataset.supplierId;
            
            const reportData = {
                supplierId: isNewSupplier ? `new-${Date.now()}` : (supplierId || `new-${Date.now()}`),
                supplierName: name,
                price: price,
                conditions: (form.elements.conditions?.value || '').trim(),
                brand: (form.elements.brand?.value || '').trim(),
                country: (form.elements.country?.value || '').trim(),
                packaging: (form.elements.packaging?.value || '').trim(),
                grade: (form.elements.grade?.value || '').trim(),
                notes: (form.elements.notes?.value || '').trim(),
                quoted_at: (form.elements.quoted_at?.value || new Date().toISOString().split('T')[0]),
                isNewSupplier: isNewSupplier,
                productId: state.selectedProductId,
                productName: state.selectedProduct
            };
            
            // Client-side only storage (state + localStorage). Persist to DB at final submit.
            state.supplierReports.push(reportData);
            renderSupplierTable();
            saveOffersToStorage(state.supplierReports.map(o => ({ ...o, productId: state.selectedProductId })));
            addSupplierModal.classList.add('hidden');
            form.reset();
            delete supplierInput.dataset.supplierId;
            delete supplierInput.dataset.isNewSupplier;
            delete supplierInput.dataset.newSupplierName;
            if (window.customAlert) window.customAlert.success('موفق', 'استعلام به لیست اضافه شد.');
        }
    });

    function updateWizardUI() {
        stepLinks.forEach(link => {
            link.classList.remove('active', 'text-blue-400');
            const span = link.querySelector('span');
            if (span) { span.classList.remove('bg-blue-500', 'text-white'); span.classList.add('bg-slate-600', 'text-slate-400'); }
            link.style.pointerEvents = 'none';
        });
        const activeLink = document.querySelector(`.wizard-step-link[href="#step-${state.currentStep}"]`);
        if (activeLink) {
            activeLink.classList.add('active', 'text-blue-400');
            const span = activeLink.querySelector('span');
            if (span) { span.classList.remove('bg-slate-600', 'text-slate-400'); span.classList.add('bg-blue-500', 'text-white'); }
            activeLink.style.pointerEvents = 'auto';
        }
        for (let i = 1; i < state.currentStep; i++) {
            const prev = document.querySelector(`.wizard-step-link[href="#step-${i}"]`);
            if (prev) prev.style.pointerEvents = 'auto';
        }
        document.querySelectorAll('.wizard-step').forEach(step => step.classList.add('hidden'));
        document.getElementById(`step-${state.currentStep}`)?.classList.remove('hidden');
    }

    function formatNumber(number) { return new Intl.NumberFormat('fa-IR').format(number); }

    function renderProductList(query) {
        productListDiv.innerHTML = '';
        const q = (query || '').trim();
        if (q.length < 2) { productListDiv.classList.add('hidden'); return; }
        try {
            const url = new URL(`{{ route('products.autocomplete') }}`, window.location.origin);
            url.searchParams.set('q', q);
            url.searchParams.set('limit', '10');
            fetch(url.toString(), { method: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(res => res.ok ? res.json() : Promise.reject())
                .then(data => {
                    const items = (data && data.data) ? data.data : [];
                    if (!items.length) { productListDiv.classList.add('hidden'); return; }
                    items.forEach(p => {
                        const item = document.createElement('div');
                        item.className = 'px-4 py-2 cursor-pointer';
                        item.textContent = p.label || p.name || '';
                        item.addEventListener('click', () => selectProduct(p.label || p.name || '', p.id));
                        productListDiv.appendChild(item);
                    });
                    productListDiv.classList.remove('hidden');
                })
                .catch(() => productListDiv.classList.add('hidden'));
        } catch (_) { productListDiv.classList.add('hidden'); }
    }

    function selectProduct(productName, productId) {
        state.selectedProduct = productName;
        state.selectedProductId = productId || null;
        productSearchInput.value = productName;
        productListDiv.classList.add('hidden');
        selectedProductNameSpan.textContent = productName;
        selectedProductInfoDiv.classList.remove('hidden');
        nextStep1Btn.disabled = false;
        // Load any saved offers for this product from localStorage
        state.supplierReports = loadOffersFromStorage(productId);
        renderSupplierTable();
    }

    function renderSupplierTable() {
        supplierTableContainer.innerHTML = '';
        if (state.supplierReports.length === 0) {
            supplierTableContainer.innerHTML = `<div class="p-6 glass rounded-xl text-center text-slate-400">برای افزودن استعلام قیمت، روی دکمه "افزودن استعلام جدید" کلیک کنید.</div>`;
            nextStep2Btn.disabled = true;
        } else {
            let html = `<div class="overflow-x-auto glass rounded-xl"><table class="min-w-full text-sm"><thead class="text-slate-300 border-b border-slate-700"><tr>
                <th class="px-4 py-3 text-right font-medium">نام تامین کننده</th>
                <th class="px-4 py-3 text-right font-medium">قیمت</th>
                <th class="px-4 py-3 text-right font-medium">شرایط</th>
                <th class="px-4 py-3 text-right font-medium">برند</th>
                <th class="px-4 py-3 text-right font-medium">کشور</th>
                <th class="px-4 py-3 text-right font-medium">بسته‌بندی</th>
                <th class="px-4 py-3 text-right font-medium">گرید</th>
                <th class="px-4 py-3 text-right font-medium">عملیات</th>
            </tr></thead><tbody class="divide-y divide-white/10">`;
            state.supplierReports.forEach((r, index) => {
                const statusBadge = r.isNewSupplier ? 
                    '<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-900/20 text-blue-300 border border-blue-700/30">جدید</span>' :
                    '<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900/20 text-green-300 border border-green-700/30">موجود</span>';
                
                html += `<tr data-supplier-id="${r.supplierId || 'new-' + index}">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            ${r.supplierName}
                            ${r.isNewSupplier ? '<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>' : ''}
                        </div>
                    </td>
                    <td class="px-4 py-3">${r.price}</td>
                    <td class="px-4 py-3">${r.conditions || '-'}</td>
                    <td class="px-4 py-3">${r.brand || '-'}</td>
                    <td class="px-4 py-3">${r.country || '-'}</td>
                    <td class="px-4 py-3">${r.packaging || '-'}</td>
                    <td class="px-4 py-3">${r.grade || '-'}</td>
                    <td class="px-4 py-3">
                        <button class="text-red-400 hover:text-red-600" onclick="removeSupplierRow(${r.supplierId || 'new-' + index})">حذف</button>
                    </td>
                </tr>`;
            });
            html += `</tbody></table></div>`;
            supplierTableContainer.innerHTML = html;
            nextStep2Btn.disabled = false;
        }
    }

    function collectSupplierReports() {
        // داده‌ها از قبل در state.supplierReports نگهداری می‌شود
        // این تابع برای انطباق با منطق ناوبری مرحله بعدی نگه داشته شده است
        return state.supplierReports.length;
    }

    function removeSupplierRow(supplierId) {
        // Remove from state
        state.supplierReports = state.supplierReports.filter((r, index) => {
            const currentId = r.supplierId || 'new-' + index;
            return currentId != supplierId;
        });
        
        // Re-render table
        renderSupplierTable();
        
        // Show success message
        if (window.customAlert) {
            window.customAlert.success('موفق', 'تامین‌کننده با موفقیت حذف شد.');
        }
    }

    function renderComparisonTable() {
        comparisonTableContainer.innerHTML = '';
        if (state.supplierReports.length === 0) {
            comparisonTableContainer.innerHTML = `<div class="p-6 glass rounded-xl text-center text-slate-400">لطفاً تامین‌کنندگان را در مرحله قبل اضافه کنید.</div>`;
            nextStep3Btn.disabled = true; return;
        }
        let tableHtml = `<table class="min-w-full text-sm"><thead class="text-slate-300"><tr>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">انتخاب</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">تامین‌کننده</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">نوع قیمت</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">قیمت</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">شرایط</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">برند</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">کشور</th>
            <th class="px-6 py-3 text-right text-xs font-medium uppercase">نکات</th>
        </tr></thead><tbody class="divide-y divide-white/10">`;
        state.supplierReports.forEach((r, index) => {
            const supplierId = r.supplierId || 'new-' + index;
            const statusBadge = r.isNewSupplier ? 
                '<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-900/20 text-blue-300 border border-blue-700/30">جدید</span>' :
                '<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900/20 text-green-300 border border-green-700/30">موجود</span>';
                
            tableHtml += `<tr class="hover:bg-white/5">
                <td class="px-6 py-4"><input type="checkbox" data-supplier-id="${supplierId}" class="form-checkbox h-4 w-4 text-blue-600 bg-gray-900 rounded border-gray-700"></td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                        ${r.supplierName}
                        ${r.isNewSupplier ? '<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>' : ''}
                    </div>
                    <div class="mt-1">${statusBadge}</div>
                </td>
                <td class="px-6 py-4">${(state.purchaseType === 'official') ? 'رسمی' : 'غیر رسمی'}</td>
                <td class="px-6 py-4">${r.price}</td>
                <td class="px-6 py-4">${r.conditions}</td>
                <td class="px-6 py-4">${r.brand}</td>
                <td class="px-6 py-4">${r.country}</td>
                <td class="px-6 py-4">
                    <span class="notes-toggle cursor-pointer inline-flex items-center gap-1" data-full="${(r.notes || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g, '&quot;')}">
                        ${((r.notes || '').length <= 25) 
                            ? `<span>${(r.notes || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</span>` 
                            : `<span>${(r.notes || '').slice(0,25).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}...</span><span class="text-xs">▼</span>`}
                            </span>
                </td>
            </tr>`;
        });
        tableHtml += `</tbody></table>`;
        comparisonTableContainer.innerHTML = tableHtml;
        comparisonTableContainer.querySelectorAll('input[type="checkbox"]').forEach(cb => {
            cb.addEventListener('change', () => {
                nextStep3Btn.disabled = comparisonTableContainer.querySelectorAll('input:checked').length < 1;
            });
        });
        // Toggle for notes show more/less
        comparisonTableContainer.querySelectorAll('.notes-toggle').forEach(el => {
            el.addEventListener('click', () => {
                const full = el.getAttribute('data-full') || '';
                const spans = el.querySelectorAll('span');
                const textSpan = spans[0];
                let arrowSpan = spans[1];
                if (arrowSpan && arrowSpan.textContent === '▲') {
                    // collapse
                    textSpan.textContent = full.slice(0,25) + '...';
                    arrowSpan.textContent = '▼';
                } else if (full.length > 25) {
                    // expand
                    textSpan.textContent = full;
                    if (arrowSpan) { arrowSpan.textContent = '▲'; }
                    else { arrowSpan = document.createElement('span'); arrowSpan.className = 'text-xs'; arrowSpan.textContent = '▲'; el.appendChild(arrowSpan); }
                }
            });
        });
    }

    function collectFinalSuppliers() {
        state.finalSuppliers = [];
        comparisonTableContainer.querySelectorAll('input:checked').forEach(cb => {
            const sId = cb.dataset.supplierId;
            const supplier = state.supplierReports.find((s, index) => {
                const currentId = s.supplierId || 'new-' + index;
                return currentId == sId;
            });
            if (supplier) state.finalSuppliers.push(supplier);
        });
    }

    function renderFinalSuppliersList() {
        finalSuppliersListUl.innerHTML = '';
        purchaseSupplierSelect.innerHTML = '<option value="">یکی را انتخاب کنید...</option>';
        if (state.finalSuppliers.length > 0) {
            state.finalSuppliers.forEach((s, index) => {
                const supplierId = s.supplierId || 'new-' + index;
                const statusIcon = s.isNewSupplier ? 
                    '<svg class="w-3 h-3 text-blue-400 inline ml-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>' : '';
                const statusText = s.isNewSupplier ? ' (جدید)' : ' (موجود)';
                
                finalSuppliersListUl.innerHTML += `<li>• <span class="text-xs text-slate-300">${s.supplierName}${statusText} (${s.price} تومان)${statusIcon}</span></li>`;
                purchaseSupplierSelect.innerHTML += `<option value="${supplierId}">${s.supplierName}${statusText}</option>`;
            });
        }
        invoiceQuantityInput.value = state.quantity;
        invoiceUnitDisplay.textContent = state.unit;
        // تکمیل خودکار مشخصات محصول بر اساس انتخاب تامین کننده
        purchaseSupplierSelect.onchange = () => {
            const chosenId = purchaseSupplierSelect.value;
            const supplier = state.supplierReports.find((s, index) => {
                const currentId = s.supplierId || 'new-' + index;
                return String(currentId) === String(chosenId);
            });
            const detailsEl = document.getElementById('purchase-product-details');
            if (supplier && detailsEl) {
                const parts = [];
                if (supplier.brand) parts.push(`برند: ${supplier.brand}`);
                if (supplier.country) parts.push(`کشور: ${supplier.country}`);
                if (supplier.notes) parts.push(`نکات: ${supplier.notes}`);
                if (supplier.isNewSupplier) parts.push(`وضعیت: جدید`);
                detailsEl.value = parts.join(' | ');
            }
            // Auto-fill unit price from selected supplier offer
            if (supplier && supplier.price != null) {
                const numericPrice = parseInt(String(supplier.price).replace(/[^\d]/g, ''), 10) || 0;
                invoiceUnitPriceInput.value = numericPrice;
            } else {
                invoiceUnitPriceInput.value = 0;
            }
            calculateInvoiceTotal();
        };
    }

    function collectPurchaseInfo() {
        const finalSupplier = state.supplierReports.find((s, index) => {
            const currentId = s.supplierId || 'new-' + index;
            return currentId == purchaseSupplierSelect.value;
        });
        const unitPrice = parseInt(String(invoiceUnitPriceInput.value).replace(/[^\d]/g, ''), 10) || 0;
        const quantity = parseInt(invoiceQuantityInput.value, 10) || 0;
        const shippingCost = parseInt(shippingCostInput.value, 10) || 0;
        const storageCost = parseInt(storageCostInput.value, 10) || 0;
        const laborCost = parseInt(laborCostInput.value, 10) || 0;

        const subtotal = (unitPrice * quantity) + shippingCost + storageCost + laborCost;
        const vat = state.purchaseType === 'official' ? Math.floor(subtotal * 0.10) : 0;
        const totalWithVat = subtotal + vat;

        state.purchaseInfo = {
            finalSupplierId: purchaseSupplierSelect.value,
            finalSupplierName: finalSupplier ? finalSupplier.supplierName : '',
            productDetails: document.getElementById('purchase-product-details').value,
            reason: document.getElementById('purchase-reason').value,
            invoice: {
                product: state.selectedProduct, quantity, unit: state.unit, unitPrice, shippingCost, storageCost, laborCost,
                totalPrice: unitPrice * quantity,
                totalInvoice: totalWithVat
            },
            paymentPayer: null,
            payerDetails: null
        };
        renderInvoiceDetails();
    }

    function renderInvoiceDetails() {
        if (!state.purchaseInfo) return;
        const inv = state.purchaseInfo.invoice;
        invoiceProductName.textContent = inv.product;
        invoiceQuantityInput.value = inv.quantity;
        invoiceUnitDisplay.textContent = inv.unit;
        invoiceUnitPriceInput.value = inv.unitPrice;
        totalPriceDisplay.textContent = formatNumber(inv.totalPrice) + ' تومان';
        shippingCostInput.value = inv.shippingCost;
        storageCostInput.value = inv.storageCost;
        laborCostInput.value = inv.laborCost;
        totalInvoiceDisplay.textContent = formatNumber(inv.totalInvoice) + ' تومان';
    }

    function calculateInvoiceTotal() {
        const unitPrice = parseInt(String(invoiceUnitPriceInput.value).replace(/[^\d]/g, ''), 10) || 0;
        const quantity = parseInt(invoiceQuantityInput.value, 10) || 0;
        const shippingCost = parseInt(shippingCostInput.value, 10) || 0;
        const storageCost = parseInt(storageCostInput.value, 10) || 0;
        const laborCost = parseInt(laborCostInput.value, 10) || 0;
        const subtotal = (unitPrice * quantity) + shippingCost + storageCost + laborCost;
        totalPriceDisplay.textContent = formatNumber(unitPrice * quantity) + ' تومان';
        // Apply VAT 10% only for official purchases
        const isOfficial = state.purchaseType === 'official';
        const vat = isOfficial ? Math.floor(subtotal * 0.10) : 0;
        const grandTotal = subtotal + vat;
        const labelEl = document.getElementById('total-invoice-label');
        if (labelEl) {
            labelEl.textContent = isOfficial ? 'جمع کل (با احتساب ۱۰٪ مالیات):' : 'جمع فاکتور:';
        }
        totalInvoiceDisplay.textContent = formatNumber(grandTotal) + ' تومان';
    }

    function renderFinalPreview() {
        finalPreviewDiv.innerHTML = '';
        if (state.selectedProduct && state.purchaseInfo) {
            const purchaseTypeText = state.purchaseType === 'official' ? 'رسمی' : 'غیررسمی';
            const destinationText = state.destination === 'warehouse' ? 'انبار' : 'فروش';
            finalPreviewDiv.innerHTML = `<div class="space-y-4">
                <div><span class="font-medium text-slate-400">محصول:</span> <span class="text-xs text-slate-300">${state.selectedProduct}</span></div>
                <div><span class="font-medium text-slate-400">مقدار:</span> <span class="text-xs text-slate-300">${state.quantity} ${state.unit}</span></div>
                <div><span class="font-medium text-slate-400">نوع خرید:</span> <span class="text-xs text-slate-300">${purchaseTypeText}</span></div>
                <div><span class="font-medium text-slate-400">مقصد:</span> <span class="text-xs text-slate-300">${destinationText}</span></div>
                <div class="p-4 rounded-xl bg-white/5"><h4 class="font-semibold mb-2">تامین‌کنندگان منتخب:</h4><ul class="space-y-2 text-sm">${state.finalSuppliers.map(s => `<li>• ${s.supplierName}: ${s.price}</li>`).join('')}</ul></div>
                <div class="p-4 rounded-xl bg-white/5"><h4 class="font-semibold mb-2">خرید نهایی:</h4>
                    <div style="line-height: 40px;"><span class="font-medium text-slate-400">تامین‌کننده:</span> <span class="text-xs text-slate-300">${state.purchaseInfo.finalSupplierName}</span></div>
                    <div style="line-height: 40px;"><span class="font-medium text-slate-400">دلیل:</span> <span class="text-xs text-slate-300">${state.purchaseInfo.reason}</span></div>
        </div>
                <div class="p-4 rounded-xl bg-white/5"><h4 class="font-semibold mb-2">فاکتور:</h4>
                    <div><span class="font-medium text-slate-400">جمع کل:</span> <span class="text-xs text-slate-300">${formatNumber(state.purchaseInfo.invoice.totalInvoice)} تومان</span></div>
                            </div>
            </div>`;
        }
    }

    function renderPurchaseHistory() {
        if (!purchaseHistoryContainer) {
            console.error('purchaseHistoryContainer not found in renderPurchaseHistory');
            return;
        }
        
        const query = (state.historySearchQuery || '').toLowerCase();
        let filtered = (state.purchaseHistory || []).filter(item =>
            ((item.product || '').toLowerCase().includes(query) || (item.supplier || '').toLowerCase().includes(query))
        );
        // Apply filters
        filtered = filtered.filter(item => {
            const status = (item.status || '').toLowerCase(); // 'completed' or 'failed'
            const type = (item.purchaseType || item.purchase_type || '').toLowerCase(); // 'رسمی' mapped to 'official'
            const dest = (item.destination || '').toLowerCase(); // 'warehouse' | 'sales'
            if (state.filters.completed && status !== 'completed') return false;
            if (state.filters.failed && status !== 'failed') return false;
            if (state.filters.official && type !== 'official' && type !== 'رسمی') return false;
            if (state.filters.unofficial && type !== 'unofficial' && type !== 'غیررسمی') return false;
            if (state.filters.warehouse && dest !== 'warehouse') return false;
            if (state.filters.sales && dest !== 'sales') return false;
            return true;
        });
        const page = state.historyCurrentPage;
        const perPage = state.historyItemsPerPage === 'all' ? filtered.length : parseInt(state.historyItemsPerPage, 10);
        const totalPages = perPage > 0 ? Math.ceil(filtered.length / perPage) : 1;
        const totalRows = filtered.length;
        // Use total from API (state.totalHistoryItems) if available, otherwise use filtered length
        const totalForRowNumbering = state.totalHistoryItems || totalRows;
        const start = (page - 1) * perPage;
        const rows = filtered.slice(start, start + perPage);

        purchaseHistoryContainer.innerHTML = '';
        if (rows.length) {
            let html = `<div class=\"glass rounded-2xl overflow-x-auto\"><table class=\"min-w-full text-sm\"><thead><tr>
                <th class=\"text-right\">ردیف</th>
                <th class=\"text-right\">تاریخ ثبت درخواست</th>
                <th class=\"text-right\">محصول</th>
                <th class=\"text-right\">مقدار</th>
                <th class=\"text-right\">تامین‌کننده</th>
                <th class=\"text-right\">بازاریابــــ</th>
                <th class=\"text-right\">فی قیمت</th>
                <th class=\"text-right\">نوع خرید</th>
                <th class=\"text-right\">وضعیت</th>
                <th class=\"text-right\">عملیات</th>
            </tr></thead><tbody class=\"divide-y divide-white/10\">`;
            rows.forEach((item, idx) => {
                const dateFa = item.inquiry_date ? new Date(item.inquiry_date).toLocaleDateString('fa-IR') : (item.created_at ? new Date(item.created_at).toLocaleDateString('fa-IR') : (item.date || ''));
                const productName = item.product || '';
                const qty = item.quantity || 0;
                const supplier = item.supplier || '';
                // Display destination-based value: warehouse -> "انبار", sales -> sales_user_name
                let payer = '';
                if (item.destination === 'warehouse') {
                    payer = 'انبار';
                } else if (item.destination === 'sales' && item.sales_user_name) {
                    payer = item.sales_user_name;
                } else if (item.destination === 'sales' && !item.sales_user_name) {
                    payer = 'واحد فروش'; // fallback if sales_user_name not set
                }
                // Calculate unit price (فی قیمت) = total / quantity
                const total = item.totalPrice || 0;
                const unitPrice = qty > 0 ? (total / qty) : 0;
                const typeText = (item.purchaseType === 'official' || item.purchaseType === 'رسمی') ? 'رسمی' : 'غیررسمی';
                const typeClass = (typeText === 'رسمی') ? 'bg-blue-500/30 text-blue-300' : 'bg-yellow-500/30 text-yellow-300';
                const last = Array.isArray(item.history_status) ? (item.history_status[item.history_status.length - 1] || null) : null;
                const lastStatus = last ? last.status : (item.history_status || null);
                const statusHtml = (function(){
                    if (lastStatus === 'completed') return `<span class="btn-action status-completed">خرید انجام شده</span>`;
                    if (lastStatus === 'failed') return `<span class="btn-action status-failed">خرید انجام نشد</span>`;
                    return `<button class="open-status-modal btn-action btn-warning" data-id="${item.id}">آخرین وضعیت</button>`;
                })();
                // Calculate row number in descending order (newest = highest number)
                // Use totalForRowNumbering (from API) instead of filtered totalRows
                const rowIndex = totalForRowNumbering - start - idx;
                html += `<tr>
                    <td class=\"px-4 py-4\">${rowIndex}</td>
                    <td class="px-4 py-4">${dateFa}</td>
                    <td class="px-4 py-4">${productName}</td>
                    <td class="px-4 py-4">${formatNumber(qty)}</td>
                    <td class="px-4 py-4">${supplier}</td>
                    <td class="px-4 py-4">${payer}</td>
                    <td class="px-4 py-4">${formatNumber(Math.round(unitPrice))}</td>
                    <td class="px-4 py-4"><span class="px-2 py-1 text-xs rounded-full ${typeClass}">${typeText}</span></td>
                    <td class=\"px-4 py-4 ph-status-cell\">${statusHtml}</td>
                    <td>
                        <div class=\"actions\" data-id=\"${item.id}\">
                            <a href=\"${getPurchaseRequestRouteUrl(routePrefix + '.show', item.id)}\" class=\"btn-action\">مشاهده</a>
                            <a href=\"${getPurchaseRequestRouteUrl(routePrefix + '.edit', item.id)}\" class=\"btn-action btn-edit\">ویرایش</a>
                            <button class=\"btn-action btn-delete ph-delete-btn\" data-id=\"${item.id}\">حذف</button>
                        </div>
                    </td>
                </tr>`;
            });
            html += `</tbody></table></div>`;
            purchaseHistoryContainer.innerHTML = html;
        } else {
            purchaseHistoryContainer.innerHTML = `<div class="glass p-4 rounded-xl"><p class="text-slate-400">هیچ خریدی با این مشخصات یافت نشد.</p></div>`;
        }
        renderPaginationControls(totalPages, filtered.length);
    }

    function renderPaginationControls(totalPages, totalRows) {
        paginationContainer.innerHTML = '';
        if (totalPages <= 1) {
            historyFooter.style.display = 'none';
            return;
        }
        
        historyFooter.style.display = 'flex';
        
        // Update range info
        const perPage = state.historyItemsPerPage === 'all' ? totalRows : parseInt(state.historyItemsPerPage, 10);
        const start = totalRows > 0 ? (state.historyCurrentPage - 1) * perPage + 1 : 0;
        const end = Math.min(start + perPage - 1, totalRows);
        rangeInfoDiv.textContent = `نمایش ${start} تا ${end} از ${totalRows}`;
        
        const current = state.historyCurrentPage;
        
        // Create pagination buttons
        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.textContent = i;
            btn.className = `page-btn ${i === current ? 'active' : ''}`;
            btn.dataset.page = i;
                    btn.addEventListener('click', () => { state.historyCurrentPage = i; renderPurchaseHistory(); });
            paginationContainer.appendChild(btn);
        }
    }

    function navigateToStep(step) { state.currentStep = step; window.location.hash = `step-${step}`; }

    document.addEventListener('DOMContentLoaded', () => {
        // Re-initialize DOM elements to ensure they exist
        purchaseHistoryContainer = document.getElementById('purchase-history-container');
        if (!purchaseHistoryContainer) {
            console.error('purchase-history-container element not found in DOM');
            return;
        }
        
        // Initialize state from checked radio buttons
        const checkedPurchaseType = document.querySelector('#purchase-type-cards input[type="radio"]:checked');
        if (checkedPurchaseType) {
            state.purchaseType = checkedPurchaseType.value;
        }
        
        const checkedDestination = document.querySelector('#destination-cards input[type="radio"]:checked');
        if (checkedDestination) {
            state.destination = checkedDestination.value;
        }
        
        const hash = window.location.hash;
        const step = hash ? parseInt(hash.replace('#step-', ''), 10) : 1;
        state.currentStep = (isNaN(step) || step < 1 || step > 5) ? 1 : step;
        renderContentForCurrentStep();
        updateWizardUI();
        
        // Always fetch history on page load
        fetchAndRenderHistory();
    });
    window.addEventListener('hashchange', () => {
        const step = parseInt(window.location.hash.replace('#step-', ''), 10);
        state.currentStep = (isNaN(step) || step < 1 || step > 5) ? 1 : step;
        renderContentForCurrentStep();
        updateWizardUI();
    });

    function renderContentForCurrentStep() {
        switch (state.currentStep) {
            case 2: renderSupplierTable(); break;
            case 3: renderComparisonTable(); break;
            case 4: renderFinalSuppliersList(); collectPurchaseInfo(); break;
            case 5: renderFinalPreview(); break;
        }
    }

    nextStep1Btn.addEventListener('click', () => navigateToStep(2));
    document.getElementById('prev-step-2').addEventListener('click', () => navigateToStep(1));
    nextStep2Btn.addEventListener('click', () => { collectSupplierReports(); navigateToStep(3); });
    document.getElementById('prev-step-3').addEventListener('click', () => navigateToStep(2));
    nextStep3Btn.addEventListener('click', () => { collectFinalSuppliers(); navigateToStep(4); });
    document.getElementById('prev-step-4').addEventListener('click', () => navigateToStep(3));
    nextStep4Btn.addEventListener('click', () => { collectPurchaseInfo(); navigateToStep(5); });
    document.getElementById('prev-step-5').addEventListener('click', () => navigateToStep(4));

    // تابع جداگانه برای ارسال نهایی (قبل از استفاده تعریف می‌شود)
    async function submitFinal(payload) {
        fetch(`{{ url('/admin/purchase-requests/store-wizard') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(payload)
        })
            .then(async (response) => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    if (response.status === 422) {
                        const data = await response.json();
                        console.log('Validation errors:', data);
                        const errors = data && data.errors ? data.errors : {};
                        const errorMessages = Object.values(errors).flat().join('\n') || (data.message || 'خطا در اعتبارسنجی ورودی‌ها');
                        throw new Error(errorMessages);
                    }
                    throw new Error('خطای داخلی سرور، لطفاً با پشتیبانی تماس بگیرید');
                }
                return response.json();
            })
            .then((data) => {
                // Cleanup local offers for this product after success
                try {
                    const raw = localStorage.getItem(OFFER_STORAGE_KEY);
                    const arr = Array.isArray(JSON.parse(raw||'[]')) ? JSON.parse(raw||'[]') : [];
                    const kept = arr.filter(x => String(x.productId||'') !== String(state.selectedProductId||''));
                    localStorage.setItem(OFFER_STORAGE_KEY, JSON.stringify(kept));
                } catch {}
                showResultModal(true, 'سفارش خرید شما با موفقیت ثبت شد');
                resetWizard();
                fetchAndRenderHistory();
                // Stay on the same page; no redirect after submit
            })
            .catch((error) => {
                console.error('Store wizard error:', error);
                if (window.customAlert) {
                    window.customAlert.error('خطا در ذخیره', error.message || 'خطا در ثبت درخواست خرید');
                } else {
                    showResultModal(false, error.message || 'خطا در ثبت درخواست خرید');
                }
            });
    }

    saveAllBtn.addEventListener('click', () => {
        if (!state.purchaseInfo) { 
            if (window.customAlert) {
                window.customAlert.warning('خطا', 'لطفا مراحل را تکمیل کنید.');
            } else {
                alert('لطفا مراحل را تکمیل کنید.');
            }
            return; 
        }
        
        // Ensure final suppliers are collected
        collectFinalSuppliers();
        
        // Ensure purchase_type is set from checked radio button if not in state
        if (!state.purchaseType) {
            const checkedPurchaseType = document.querySelector('#purchase-type-cards input[type="radio"]:checked');
            if (checkedPurchaseType) {
                state.purchaseType = checkedPurchaseType.value;
            }
        }
        
        // Ensure destination is set from checked radio button if not in state
        if (!state.destination) {
            const checkedDestination = document.querySelector('#destination-cards input[type="radio"]:checked');
            if (checkedDestination) {
                state.destination = checkedDestination.value;
            }
        }
        
        // Validate required fields
        if (!state.purchaseType) {
            if (window.customAlert) {
                window.customAlert.warning('خطا', 'لطفا نوع خرید را انتخاب کنید.');
            } else {
                alert('لطفا نوع خرید را انتخاب کنید.');
            }
            return;
        }
        
        if (!state.destination) {
            if (window.customAlert) {
                window.customAlert.warning('خطا', 'لطفا مقصد را انتخاب کنید.');
            } else {
                alert('لطفا مقصد را انتخاب کنید.');
            }
            return;
        }
        
        const payload = {
            purchase_request_id: window.__CURRENT_PR_ID__ || null,
            purchase_request_item_id: window.__CURRENT_ITEM_ID__ || null,
            selected_product_id: state.selectedProductId,
            selected_product_name: state.selectedProduct,
            quantity: state.quantity,
            unit: state.unit,
            purchase_type: state.purchaseType,
            destination: state.destination,
            warehouse_id: state.destination === 'warehouse' ? (state.warehouseId || null) : null,
            sales_user_id: state.destination === 'sales' ? (state.salesUserId || null) : null,
            final_suppliers: (function(){
                // If user selected comparisons, enrich them from supplierReports
                if (state.finalSuppliers && state.finalSuppliers.length) {
                    const reports = state.supplierReports || [];
                    const norm = (s) => (s||'').toString().replace(/\s+/g,' ').trim();
                    return state.finalSuppliers.map(s => {
                        const match = reports.find(r => String(r.supplierId||'') === String(s.supplierId||'') || norm(r.supplierName) === norm(s.supplierName));
                        return {
                            supplierId: s.supplierId,
                            supplierName: s.supplierName,
                            price: s.price,
                            conditions: s.conditions || (match && match.conditions) || '',
                            brand: s.brand || (match && match.brand) || '',
                            country: s.country || (match && match.country) || '',
                            packaging: s.packaging || (match && match.packaging) || '',
                            grade: s.grade || (match && match.grade) || '',
                            notes: s.notes || (match && match.notes) || ''
                        };
                    });
                }
                // Otherwise, use reports directly
                return (state.supplierReports || []).map(r => ({
                    supplierId: r.supplierId || null,
                    supplierName: r.supplierName,
                    price: r.price,
                    conditions: r.conditions || '',
                    brand: r.brand || '',
                    country: r.country || '',
                    packaging: r.packaging || '',
                    grade: r.grade || '',
                    notes: r.notes || ''
                }));
            })(),
            purchase_info: state.purchaseInfo,
            // Get quoted_at from first supplier report, fallback to today
            inquiry_date: (function(){
                const reports = state.supplierReports || [];
                if (reports.length > 0 && reports[0].quoted_at) {
                    return reports[0].quoted_at;
                }
                return new Date().toISOString().split('T')[0];
            })(),
        };
        
        // Debug log
        console.log('Sending payload:', payload);
        // If a global confirm modal exists, use it; otherwise submit directly without alert
        if (window.showConfirmModal) {
            window.showConfirmModal(
                'تایید ثبت نهایی',
                'خلاصه سفارش را بررسی کنید و تایید کنید.',
                () => submitFinal(payload),
                () => {}
            );
            return;
        }
        // در صورت نبود مودال تایید، مستقیم ارسال کن
        submitFinal(payload);
    });

    function resetWizard() {
        Object.assign(state, { selectedProduct: null, quantity: 1, unit: 'کیلوگرم', purchaseType: null, destination: null, supplierReports: [], finalSuppliers: [], purchaseInfo: null });
        productSearchInput.value = '';
        productQuantityInput.value = 1;
        productUnitSelect.value = 'کیلوگرم';
        selectedProductInfoDiv.classList.add('hidden');
        // Reset purchase type cards - set default to "official"
        document.querySelectorAll('#purchase-type-cards .radio-card').forEach(c => c.classList.remove('selected'));
        document.querySelectorAll('#purchase-type-cards input[type="radio"]').forEach(r => r.checked = false);
        const officialCard = document.querySelector('#purchase-type-cards .radio-card[data-value="official"]');
        const officialRadio = document.getElementById('purchase-type-official');
        if (officialCard && officialRadio) {
            officialCard.classList.add('selected');
            officialRadio.checked = true;
            state.purchaseType = 'official';
        }
        // Reset destination cards
        document.querySelectorAll('#destination-cards .radio-card').forEach(c => c.classList.remove('selected'));
        document.querySelectorAll('#destination-cards input[type="radio"]').forEach(r => r.checked = false);
        // Hide containers
        if (warehouseContainer) warehouseContainer.classList.add('hidden');
        if (salesExpertContainer) salesExpertContainer.classList.add('hidden');
        navigateToStep(1);
    }

    function showResultModal(isSuccess, message) {
        if (isSuccess) {
            // Use the global success modal for success messages
            if (window.showSuccessModalWithAutoClose) {
                window.showSuccessModalWithAutoClose(message);
            } else {
                // Fallback to simple alert if modal not available
                alert(message);
            }
        } else {
            // For error messages, use the existing modal or show alert
            const existing = document.getElementById('resultModal');
            if (existing) existing.remove();
            const modal = document.createElement('div');
            modal.id = 'resultModal';
            modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm';
            modal.innerHTML = `
                <div class="glass border rounded-2xl p-8 w-full max-w-md text-center">
                    <div class="mb-4 text-4xl text-red-400">⚠️</div>
                    <h3 id="modal-message" class="text-xl font-bold text-slate-100">${message}</h3>
                    <button id="closeModalBtn" class="mt-6 px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl">بستن</button>
            </div>
            `;
            document.body.appendChild(modal);
            const close = () => { const m = document.getElementById('resultModal'); if (m) m.remove(); };
            modal.addEventListener('click', (e) => { if (e.target === modal) close(); });
            document.getElementById('closeModalBtn').addEventListener('click', close);
            document.addEventListener('keydown', function esc(e){ if (e.key === 'Escape') { close(); document.removeEventListener('keydown', esc);} });
        }
    }

    function fetchAndRenderHistory() {
        // Ensure container exists
        if (!purchaseHistoryContainer) {
            console.error('purchaseHistoryContainer not found');
            return;
        }
        
        // Show loading state
        purchaseHistoryContainer.innerHTML = '<div class="glass p-4 rounded-xl"><p class="text-slate-400 text-center">در حال بارگذاری...</p></div>';
        
        const params = new URLSearchParams();
        params.set('q', state.historySearchQuery || '');
        const per = state.historyItemsPerPage === 'all' ? 1000 : parseInt(state.historyItemsPerPage, 10);
        params.set('per_page', String(per));
        params.set('page', String(state.historyCurrentPage));
        const url = `{{ url('/admin/purchase-requests') }}?${params.toString()}`;
        
        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
            .then(async r => {
                if (r.ok) {
                    return await r.json();
                }
                // Try to extract error for logging
                const ct = r.headers.get('content-type') || '';
                let detail = '';
                try {
                    detail = ct.includes('application/json') ? JSON.stringify(await r.json()) : (await r.text());
                } catch(_) {}
                throw new Error(`HTTP ${r.status} ${r.statusText} ${detail}`);
            })
            .then(data => {
                const rows = data?.data || [];
                const totalPages = data?.last_page || 1;
                const total = data?.total || rows.length;
                // Store total count for row numbering
                state.totalHistoryItems = total;
                // Normalize and store for client-side filters/search
                state.purchaseHistory = rows.map((item) => {
                    const nestedItem = item.items && item.items[0] ? item.items[0] : null;
                    const productName =
                        (nestedItem && nestedItem.product && (nestedItem.product.name || nestedItem.product.title)) ||
                        (nestedItem && (nestedItem.product_name || nestedItem.productTitle)) ||
                        item.product_name ||
                        item.selected_product_name ||
                        item.product ||
                        '';
                    return {
                        id: item.id,
                        created_at: item.created_at,
                        inquiry_date: item.inquiry_date,
                        product: productName,
                        quantity: (item.items && item.items[0] ? (item.items[0].quantity || 0) : (item.quantity || 0)),
                        supplier: (
                            item.latest_supplier
                            || item.supplier
                            || item.finalSupplierName
                            || item.final_supplier_name
                            || item.final_supplier
                            || item.vendor
                            || item.supplier_name
                            || ''
                        ),
                        sales_user_name: item.sales_user_name || '',
                        totalPrice: item.total_amount || item.totalPrice || 0,
                        purchaseType: item.purchase_type || item.purchaseType || '',
                        destination: item.destination || '',
                        status: item.status || item.latest_status || '',
                        history_status: item.history_status || item.historyStatus || null,
                        items: item.items || [],
                        notes_count: item.notes_count || 0,
                    };
                });
                renderPurchaseHistory();
                renderPaginationFromApi(totalPages, total);
            })
            .catch((error) => {
                console.error('Error fetching purchase history:', error);
                if (purchaseHistoryContainer) {
                    purchaseHistoryContainer.innerHTML = `<div class="glass p-4 rounded-xl"><p class="text-red-400">خطا در دریافت تاریخچه خرید.</p></div>`;
                }
                if (paginationContainer) {
                    paginationContainer.innerHTML = '';
                }
            });
    }

    // Helper: POST JSON with robust error parsing
    async function apiPostJson(url, payload) {
        const res = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(payload || {})
        });
        if (!res.ok) {
            let msg = `خطا (${res.status})`;
            try {
                const ct = res.headers.get('content-type') || '';
                if (res.status === 422 && ct.includes('application/json')) {
                    const data = await res.json();
                    const errors = data && data.errors ? data.errors : {};
                    const errorMessages = Object.values(errors).flat().join('\n') || (data.message || msg);
                    throw new Error(errorMessages);
                }
                if (ct.includes('application/json')) {
                    const data = await res.json();
                    throw new Error(data.message || msg);
                } else {
                    const text = await res.text();
                    throw new Error(text || msg);
                }
            } catch (e) {
                if (e instanceof Error) throw e; else throw new Error(msg);
            }
        }
        return res.json();
    }

    function renderHistoryTable(rows, totalRows = null) {
        purchaseHistoryContainer.innerHTML = '';
        if (rows.length) {
            // If totalRows is not provided, use rows.length (for backward compatibility)
            const total = totalRows !== null ? totalRows : rows.length;
            const perPage = state.historyItemsPerPage === 'all' ? total : parseInt(state.historyItemsPerPage, 10);
            const page = state.historyCurrentPage;
            const start = (page - 1) * perPage;
            
            let html = `<div class=\"glass p-5 rounded-2xl overflow-x-auto\"><table class=\"min-w-full text-sm\"><thead class=\"text-slate-300\"><tr>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">ردیف</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">تاریخ ثبت درخواست</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">محصول</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">مقدار (کیلوگرم)</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">تامین‌کننده</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">بازاریابــــ</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">فی قیمت</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">نوع خرید</th>
                <th class=\"px-4 py-3 text-right text-xs font-medium uppercase\">عملیات</th>
            </tr></thead><tbody class=\"divide-y divide-white/10\">`;
            rows.forEach((item, index) => {
                // Calculate row number in descending order (newest = highest number)
                const rowIndex = total - start - index;
                const productName = item.items && item.items[0] && item.items[0].product ? (item.items[0].product.name || '') : '';
                const qty = item.items && item.items[0] ? (item.items[0].quantity || 0) : 0;
                const supplier = item.latest_supplier || item.supplier || '';
                // Display destination-based value: warehouse -> "انبار", sales -> sales_user_name
                let payer = '';
                const destination = item.destination || 'warehouse';
                if (destination === 'warehouse') {
                    payer = 'انبار';
                } else if (destination === 'sales') {
                    payer = item.sales_user_name || 'واحد فروش';
                } else {
                    payer = item.payer || ''; // fallback to old payer field
                }
                const total = item.total_amount || 0;
                // Calculate unit price (فی قیمت) = total / quantity
                const unitPrice = qty > 0 ? (total / qty) : 0;
                const typeText = (item.purchase_type === 'official') ? 'رسمی' : 'غیررسمی';
                const typeClass = (item.purchase_type === 'official') ? 'bg-blue-500/30 text-blue-300' : 'bg-yellow-500/30 text-yellow-300';
                const statusBtnHtml = (Array.isArray(item.history_status) ? (item.history_status[item.history_status.length - 1]?.status === 'completed') : (item.history_status === 'completed')) 
                    ? `<span class=\"btn-action\">خرید انجام شده</span>` 
                    : `<button class=\"open-status-modal btn-action btn-warning\" data-id=\"${item.id}\">آخرین وضعیت</button>`;
                
                const actions = `<div class=\"actions\" data-id=\"${item.id}\">`
                    + `<a href=\"${getPurchaseRequestRouteUrl(routePrefix + '.show', item.id)}\" class=\"btn-action\">مشاهده</a>`
                    + statusBtnHtml
                    + `<a href=\"${getPurchaseRequestRouteUrl(routePrefix + '.edit', item.id)}\" class=\"btn-action btn-edit\">ویرایش</a>`
                    + `<button class=\"btn-action btn-delete ph-delete-btn\">حذف</button>`
                    + `</div>`;

                html += `<tr class=\"hover:bg-white/5\">\n`
                + `    <td class=\"px-4 py-4\">${rowIndex}</td>`
                + `    <td class=\"px-4 py-4\">${item.inquiry_date ? new Date(item.inquiry_date).toLocaleDateString('fa-IR') : (item.created_at ? new Date(item.created_at).toLocaleDateString('fa-IR') : '')}</td>`
                + `    <td class=\"px-4 py-4\">${productName}</td>`
                + `    <td class=\"px-4 py-4\">${formatNumber(qty)}</td>`
                + `    <td class=\"px-4 py-4\">${supplier}</td>`
                + `    <td class=\"px-4 py-4\">${payer}</td>`
                + `    <td class=\"px-4 py-4\">${formatNumber(Math.round(unitPrice))}</td>`
                + `    <td class=\"px-4 py-4\"><span class=\"px-2 py-1 text-xs rounded-full ${typeClass}\">${typeText}</span></td>`
                + `    <td class=\"px-4 py-4\">${actions}</td>`
                + `</tr>`;
            });
            html += `</tbody></table></div>`;
            purchaseHistoryContainer.innerHTML = html;
        } else {
            purchaseHistoryContainer.innerHTML = `<div class="glass p-4 rounded-xl"><p class="text-slate-400">هیچ خریدی ثبت نشده است.</p></div>`;
        }
    }

    function renderPaginationFromApi(totalPages, totalRows) {
        paginationContainer.innerHTML = '';
        if (totalPages <= 1) {
            historyFooter.style.display = 'none';
            return;
        }
        
        historyFooter.style.display = 'flex';
        
        // Update range info
        const perPage = state.historyItemsPerPage === 'all' ? totalRows : parseInt(state.historyItemsPerPage, 10);
        const start = totalRows > 0 ? (state.historyCurrentPage - 1) * perPage + 1 : 0;
        const end = Math.min(start + perPage - 1, totalRows);
        rangeInfoDiv.textContent = `نمایش ${start} تا ${end} از ${totalRows}`;
        
        const current = state.historyCurrentPage;
        
        // Create pagination buttons
        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.textContent = i;
            btn.className = `page-btn ${i === current ? 'active' : ''}`;
            btn.dataset.page = i;
            btn.addEventListener('click', () => { state.historyCurrentPage = i; fetchAndRenderHistory(); });
            paginationContainer.appendChild(btn);
        }
        
    }

    // تابع نمایش مودال موفقیت
    function showSuccessModal() {
        const modal = document.createElement('div');
        modal.id = 'success-modal';
        modal.className = 'fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-gradient-to-br from-green-500/20 to-blue-600/20 backdrop-blur-xl border border-green-400/30 rounded-3xl p-8 max-w-md mx-4 text-center shadow-2xl animate-pulse">
                <div class="mb-6">
                    <div class="mx-auto w-20 h-20 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mb-4 shadow-lg">
                        <span class="text-3xl">✅</span>
                    </div>
                    <h3 class="text-2xl font-bold text-green-400 mb-2">تبریک!</h3>
                    <p class="text-lg text-slate-200 leading-relaxed">پشتیبان عزیز، سفارش خرید شما با موفقیت ثبت شد</p>
        </div>
                <div class="space-y-3 text-sm text-slate-300">
                    <p>🎯 درخواست شما در سیستم ثبت گردید</p>
                    <p>📋 کد پیگیری: <span class="font-mono text-green-400">${Date.now()}</span></p>
                    <p>⏰ تاریخ ثبت: <span class="text-blue-400">${new Date().toLocaleDateString('fa-IR')}</span></p>
    </div>
                <button onclick="closeSuccessModal()" class="mt-6 w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                    <span class="ml-2">🎉</span>
                    متوجه شدم
                </button>
</div>
        `;
        
        document.body.appendChild(modal);
        
        // بستن مودال با کلیک روی پس‌زمینه
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeSuccessModal();
            }
        });
        
        // بستن مودال با کلید Escape
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeSuccessModal();
            }
        });
    }
    
    // تابع بستن مودال موفقیت
    function closeSuccessModal() {
        const modal = document.getElementById('success-modal');
        if (modal) {
            modal.remove();
        }
    }

    const debouncedSearch = debounce((e) => {
        renderProductList(e.target.value);
    }, 300);
    productSearchInput.addEventListener('input', debouncedSearch);
    document.addEventListener('click', (e) => {
        if (!productSearchInput.contains(e.target) && !productListDiv.contains(e.target)) {
            productListDiv.classList.add('hidden');
        }
    });
    productQuantityInput.addEventListener('change', (e) => { state.quantity = e.target.value; });
    productUnitSelect.addEventListener('change', (e) => { state.unit = e.target.value; });
    document.getElementById('purchase-type-cards').addEventListener('click', (e) => {
        const card = e.target.closest('.radio-card'); if (!card) return;
        document.querySelectorAll('#purchase-type-cards .radio-card').forEach(c => c.classList.remove('selected'));
        card.classList.add('selected');
        card.querySelector('input[type="radio"]').checked = true;
        state.purchaseType = card.dataset.value;
    });
    document.getElementById('destination-cards').addEventListener('click', async (e) => {
        const card = e.target.closest('.radio-card'); if (!card) return;
        document.querySelectorAll('#destination-cards .radio-card').forEach(c => c.classList.remove('selected'));
        card.classList.add('selected');
        card.querySelector('input[type="radio"]').checked = true;
        state.destination = card.dataset.value;
        const salesBox = document.getElementById('sales-expert-container');
        const warehouseContainerEl = document.getElementById('warehouse-container');
        if (state.destination === 'sales') {
            salesBox.classList.remove('hidden');
            maybeLoadSalesExperts();
            // Hide warehouse container
            if (warehouseContainerEl) {
                warehouseContainerEl.classList.add('hidden');
            }
        } else {
            salesBox.classList.add('hidden');
            state.salesUserId = null;
            const sel = document.getElementById('sales-expert');
            if (sel) sel.value = '';
            // Show warehouse container and load warehouses
            if (warehouseContainerEl) {
                warehouseContainerEl.classList.remove('hidden');
            }
            loadWarehousesForSelect();
        }
    });

    // Payment payer fields and toggle function removed - no longer used

    async function maybeLoadSalesExperts(){
        const select = document.getElementById('sales-expert');
        if (!select) return;
        // Clear all options and re-add the placeholder to avoid duplicates
        const placeholder = select.querySelector('option[value=""]');
        select.innerHTML = '';
        const ph = document.createElement('option'); ph.value = ''; ph.textContent = 'یک نفر را انتخاب کنید...';
        select.appendChild(ph);
        try {
            const url = new URL(`{{ route('admin.users.by_role') }}`);
            url.searchParams.set('role', 'کارشناس فروش');
            const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!res.ok) return;
            const data = await res.json();
            const seen = new Set();
            (data.data || []).forEach(u => {
                const idStr = String(u.id);
                if (seen.has(idStr)) return;
                seen.add(idStr);
                const opt = document.createElement('option');
                opt.value = idStr;
                opt.textContent = u.name;
                select.appendChild(opt);
            });
        } catch (e) { /* ignore */ }
    }

    // Store sales expert selection
    const salesExpertSelect = document.getElementById('sales-expert');
    if (salesExpertSelect) {
        salesExpertSelect.addEventListener('change', (e) => {
            const val = e.target.value ? parseInt(e.target.value, 10) : null;
            state.salesUserId = Number.isFinite(val) ? val : null;
        });
    }
    [invoiceQuantityInput, invoiceUnitPriceInput, shippingCostInput, storageCostInput, laborCostInput].forEach(el => el?.addEventListener('input', calculateInvoiceTotal));
    
    // Event listeners for purchase history container (only if container exists)
    if (purchaseHistoryContainer) {
        purchaseHistoryContainer.addEventListener('click', (e) => {
            const btn = e.target.closest('.open-status-modal');
            if (!btn) return;
            const row = btn.closest('[data-id]');
            const id = row ? row.getAttribute('data-id') : btn.parentElement.getAttribute('data-id');
            openHistoryStatusModal(id);
        });

        // Handle delete button in history table (use global delete modal)
        purchaseHistoryContainer.addEventListener('click', (e) => {
            const delBtn = e.target.closest('.ph-delete-btn');
            if (!delBtn) return;
            const row = delBtn.closest('[data-id]');
            const id = row ? row.getAttribute('data-id') : delBtn.dataset.id;
            if (!id) return;

            if (window.showDeleteModal) {
                window.showDeleteModal(
                    'حذف خرید',
                    'آیا از حذف این خرید مطمئن هستید؟',
                    () => {
                        const formData = new FormData();
                        formData.set('_method', 'DELETE');

                        // بر اساس نقش (admin / purchase / sales) آدرس درست را بساز
                        const deleteUrl = getPurchaseRequestRouteUrl(routePrefix + '.show', id);

                        fetch(deleteUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: formData
                        })
                            .then(r => {
                                if (!r.ok) throw new Error('خطا در حذف');
                                return r.json().catch(() => ({}));
                            })
                            .then(() => {
                                fetchAndRenderHistory();
                                if (window.customAlert) {
                                    window.customAlert.success('حذف موفق', 'خرید با موفقیت حذف شد');
                                } else if (window.showSuccess) {
                                    window.showSuccess('حذف موفق', 'خرید با موفقیت حذف شد');
                                }
                            })
                            .catch(() => {
                                if (window.customAlert) {
                                    window.customAlert.error('خطا', 'خطا در حذف خرید');
                                } else if (window.showError) {
                                    window.showError('خطا', 'خطا در حذف خرید');
                                }
                            });
                    },
                    () => {}
                );
            }
        });
    }

    function ensureHistoryStatusModal() {
        if (document.getElementById('historyStatusModal')) return;
        const modal = document.createElement('div');
        modal.id = 'historyStatusModal';
        modal.className = 'fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm';
        modal.innerHTML = `
            <div class="glass border rounded-2xl p-6 w-full max-w-md text-slate-100">
                <h3 class="text-lg font-bold mb-4">آخرین وضعیت خرید</h3>
                <div class="space-y-3">
                    <button id="hs-completed" class="w-full px-4 py-2 rounded-md bg-green-600 hover:bg-green-700">خرید انجام شد</button>
                    <div class="space-y-2">
                        <button id="hs-failed-toggle" class="w-full px-4 py-2 rounded-md bg-red-600 hover:bg-red-700">خرید انجام نشد</button>
                        <textarea id="hs-reason" class="w-full rounded-md bg-white/10 border border-white/20 p-3 hidden" rows="3" placeholder="علت را وارد کنید..."></textarea>
                        <button id="hs-submit-failed" class="w-full px-4 py-2 rounded-md bg-red-600 hover:bg-red-700 hidden">ثبت علت</button>
                    </div>
                    <button id="hs-cancel" class="w-full px-4 py-2 rounded-md bg-slate-600 hover:bg-slate-700">بستن</button>
                </div>
            </div>`;
        document.body.appendChild(modal);
    }
    function openHistoryStatusModal(id) {
        ensureHistoryStatusModal();
        const modal = document.getElementById('historyStatusModal');
        const btnCompleted = document.getElementById('hs-completed');
        const btnFailedToggle = document.getElementById('hs-failed-toggle');
        const btnSubmitFailed = document.getElementById('hs-submit-failed');
        const reasonEl = document.getElementById('hs-reason');
        const btnCancel = document.getElementById('hs-cancel');
        // reset
        reasonEl.classList.add('hidden');
        btnSubmitFailed.classList.add('hidden');
        reasonEl.value = '';

        modal.classList.remove('hidden');
        modal.classList.add('flex');
        const close = () => { modal.classList.add('hidden'); modal.classList.remove('flex'); };
        btnCancel.onclick = close;
        modal.onclick = (e) => { if (e.target.id === 'historyStatusModal') close(); };

        btnCompleted.onclick = () => {
            apiPostJson(`{{ url('/admin/purchase-requests') }}/${id}/update-status`, { status: 'completed' })
                .then(() => { 
                    close();
                    // Optimistically update the status cell
                    const row = document.querySelector(`div[data-id="${id}"]`)?.closest('tr');
                    const statusCell = row ? row.querySelector('.ph-status-cell') : null;
                    if (statusCell) {
                        statusCell.innerHTML = `<span class=\"px-3 py-1 text-xs text-white bg-green-600 rounded-md\">خرید انجام شده</span>`;
                    }
                    fetchAndRenderHistory(); 
                    if (window.customAlert) {
                        window.customAlert.success('ثبت شد', 'وضعیت خرید به انجام شده تغییر کرد');
                    } else if (window.showSuccess) {
                        window.showSuccess('ثبت شد','وضعیت خرید به انجام شده تغییر کرد');
                    }
                })
                .catch(err => { 
                    if (window.customAlert) {
                        window.customAlert.error('خطا', 'ثبت وضعیت انجام نشد');
                    } else if (window.showError) {
                        window.showError('خطا','ثبت وضعیت انجام نشد');
                    } else {
                        showResultModal(false, err.message || 'خطا در ثبت وضعیت');
                    }
                });
        };

        btnFailedToggle.onclick = () => {
            reasonEl.classList.toggle('hidden');
            btnSubmitFailed.classList.toggle('hidden');
        };
        btnSubmitFailed.onclick = () => {
            const reason = reasonEl.value.trim();
            apiPostJson(`{{ url('/admin/purchase-requests') }}/${id}/update-status`, { status: 'failed', failure_reason: reason })
                .then(() => { 
                    close(); 
                    // Optimistically update the status cell
                    const row = document.querySelector(`div[data-id="${id}"]`)?.closest('tr');
                    const statusCell = row ? row.querySelector('.ph-status-cell') : null;
                    if (statusCell) {
                        statusCell.innerHTML = `<span class=\"px-3 py-1 text-xs text-white bg-red-600 rounded-md\">خرید انجام نشد</span>`;
                    }
                    fetchAndRenderHistory();
                    if (window.customAlert) {
                        window.customAlert.warning('ثبت شد', 'وضعیت به خرید انجام نشد با علت ثبت شد');
                    }
                })
                .catch(err => {
                    if (window.customAlert) {
                        window.customAlert.error('خطا', err.message || 'خطا در ثبت وضعیت');
                    } else {
                        showResultModal(false, err.message || 'خطا در ثبت وضعیت');
                    }
                });
        };
    }
    historySearchInput.addEventListener('input', (e) => { state.historySearchQuery = e.target.value; state.historyCurrentPage = 1; fetchAndRenderHistory(); });
    itemsPerPageSelect.addEventListener('change', (e) => { state.historyItemsPerPage = e.target.value; state.historyCurrentPage = 1; fetchAndRenderHistory(); });

    // Filter controls
    function bindFilter(id, key){
        const el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('change', () => {
            state.filters[key] = !!el.checked;
            state.historyCurrentPage = 1;
            renderPurchaseHistory();
        });
    }
    // Dropdown toggle handlers
    (function(){
        const btn = document.getElementById('filters-toggle');
        const dd = document.getElementById('filters-dropdown');
        if (!btn || !dd) return;
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            dd.classList.toggle('hidden');
        });
        document.addEventListener('click', (e) => {
            if (!dd.contains(e.target) && e.target !== btn) dd.classList.add('hidden');
        });
    })();
    // Single select filter binding
    (function(){
        const sel = document.getElementById('filters-select');
        if (!sel) return;
        sel.addEventListener('change', () => {
            const v = sel.value;
            state.filters = { completed:false, failed:false, official:false, unofficial:false, warehouse:false, sales:false };
            if (v !== 'all' && state.filters.hasOwnProperty(v)) state.filters[v] = true;
            state.historyCurrentPage = 1;
            renderPurchaseHistory();
        });
    })();

    // Live search for suppliers with general search and new supplier option
    (function initSupplierLiveSearch(){
        const input = document.getElementById('supplier-search-input');
        const list  = document.getElementById('supplier-list');
        if (!input || !list) return;

        const hide = () => list.classList.add('hidden');
        const show = () => list.classList.remove('hidden');
        const clear = () => { list.innerHTML = ''; };

        const render = (items, searchTerm) => {
            clear();
            if (!items || items.length === 0) { 
                // Show "Create new supplier" option if no results
                if (searchTerm && searchTerm.length >= 2) {
                    const createRow = document.createElement('div');
                    createRow.className = 'px-4 py-3 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 transition duration-200 bg-blue-900/20';
                    createRow.innerHTML = `
                        <div class="font-medium text-sm flex items-center gap-2">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                            </svg>
                            ایجاد تامین‌کننده جدید: "${searchTerm}"
                        </div>
                        <div class="text-xs text-slate-400 mt-1">اطلاعات این تامین‌کننده با محصول ذخیره خواهد شد</div>
                    `;
                    createRow.addEventListener('click', () => {
                        input.value = searchTerm;
                        hide();
                        // Store the new supplier name for later use
                        input.dataset.isNewSupplier = 'true';
                        input.dataset.newSupplierName = searchTerm;
                    });
                    list.appendChild(createRow);
                }
                hide(); 
                return; 
            }
            
            items.forEach(s => {
                const row = document.createElement('div');
                row.className = 'px-4 py-3 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 last:border-b-0 transition duration-200';
                row.innerHTML = `
                    <div class="font-medium text-sm">${s.name}</div>
                    <div class="text-xs text-slate-400 mt-1">
                        ${s.activity_type || ''} ${s.industry ? '• ' + s.industry : ''}
                    </div>
                `;
                row.addEventListener('click', () => {
                    input.value = s.name;
                    input.dataset.supplierId = s.id;
                    input.dataset.isNewSupplier = 'false';
                    hide();
                });
                list.appendChild(row);
            });
            show();
        };

        const doSearch = debounce((term) => {
            const q = (term || '').trim();
            if (q.length < 2) { hide(); return; }
            
            // Use general supplier search
            const url = new URL(`{{ route('suppliers.general_search') }}`, window.location.origin);
            url.searchParams.set('q', q);
            fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
                .then(r => r.ok ? r.json() : Promise.reject())
                .then(data => render(Array.isArray(data) ? data : [], q))
                .catch(() => {
                    // Even on error, show create new option
                    render([], q);
                });
        }, 300);

        input.addEventListener('input', (e) => {
            const term = e.target.value;
            // Clear dataset when typing
            delete input.dataset.supplierId;
            delete input.dataset.isNewSupplier;
            delete input.dataset.newSupplierName;
            doSearch(term);
        });
        
        document.addEventListener('click', (e) => {
            if (!list.contains(e.target) && e.target !== input) hide();
        });
    })();
</script>

@endpush