@extends('layouts.panel')

@section('title', 'استعلام قیمت')

@section('content')
<div id="price-inquiry-custom" class="text-gray-300">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .space-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
        .modal-enter { opacity: 0; transform: scale(0.95); }
        .modal-enter-active { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 300ms; }
        .modal-leave { opacity: 1; transform: scale(1); }
        .modal-leave-active { opacity: 0; transform: scale(0.95); transition: opacity 300ms, transform 300ms; }
        /* clamp long texts in table cells to avoid horizontal scroll */
        .truncate-cell { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
        .price-cell { text-align: right; direction: rtl; }
        /* Table footer styles */
        .table-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            margin-top: 10px;
            border-top: 1px solid rgba(148, 163, 184, 0.1);
            border-radius: 10px;
        }
        .range-info { color: #9ca3af; font-size: 14px; }
        .pagination { display: flex; gap: 8px; }
        .page-btn { padding: 8px 12px; border: 1px solid rgba(148,163,184,0.2); background: rgba(255,255,255,0.05); color: #e5e7eb; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 14px; }
        .page-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(148,163,184,0.3); }
        .page-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 600; }
        .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .page-btn-ellipsis { padding: 8px 4px; color: #9ca3af; cursor: default; }
        /* Persian Datepicker positioning and z-index fixes */
        .datepicker-plot-area {
            z-index: 9999 !important;
            position: fixed !important;
        }
        .datepicker-plot-area.datepicker-state-no-meridian {
            z-index: 9999 !important;
        }
        #plotId {
            z-index: 9999 !important;
            position: fixed !important;
        }
    </style>

    <div class="container mx-auto p-4 md:p-8">
        <header class="flex justify-start items-center mb-6">
            <h1 class="text-xl font-bold text-white">درخواست خرید جدید</h1>
        </header>

        <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 mb-8">
            <div class="flex items-center justify-between text-xs md:text-sm max-w-md mx-auto">
                <div id="stepper-1" class="flex items-center text-blue-400">
                    <span id="stepper-1-circle" class="flex items-center justify-center w-6 hا-6 md:w-8 md:h-8 bg-blue-600 text-white rounded-full ml-2">1</span>
                    <span>انتخاب محصول</span>
                </div>
                <div class="flex-1 h-px bg-gray-700 mx-2"></div>
                <div id="stepper-2" class="flex items-center text-gray-500">
                    <span id="stepper-2-circle" class="flex items-center justify-center w-6 h-6 md:w-8 md:h-8 bg-gray-700 rounded-full ml-2">2</span>
                    <span>مرحله ۲: ثبت اطلاعات تامین‌کنندگان</span>
                </div>
            </div>
        </div>

        <main id="step-1" class="glass rounded-2xl p-8">
            <h2 class="text-lg font-bold text-white mb-6 border-b border-gray-700 pb-4">مرحله ۱: انتخاب محصول و نوع درخواست</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
                <div class="relative">
                    <label for="product-name" class="block text-sm font-medium mb-2">نام محصول را وارد کنید:</label>
                    <input type="text" id="product-name" placeholder="اسید اسکوربیک..." class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" autocomplete="off">
                    <input type="hidden" id="product-id-selected">
                    <div id="search-results" class="absolute z-10 w-full bg-gray-700 border border-gray-600 rounded-lg mt-1 hidden max-h-48 overflow-y-auto"></div>
                </div>

                <div>
                    <label for="quantity" class="block text-sm font-medium mb-2">مقدار مورد نیاز:</label>
                    <div class="flex items-stretch w-full rounded-lg overflow-hidden border border-gray-700 focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500">
                        <input type="number" id="quantity" value="1" class="flex-1 bg-gray-900 p-3 outline-none focus:ring-0 border-0 text-gray-200" />
                        <select id="unit" class="bg-gray-700 p-3 text-gray-300 border-l border-gray-600 outline-none" style="width: 10%;">
                            <option>کیلوگرم</option>
                            <option>گرم</option>
                            <option>تن</option>
                            <option>لیتر</option>
                            <option>کارتن</option>
                            <option>کیسه</option>
                            <option>بشکه</option>
                        </select>
                    </div>
                    <!-- persist selected quantity/unit for step 2 -->
                    <input type="hidden" id="selected-qty">
                    <input type="hidden" id="selected-unit">
                </div>

            </div>

            <div class="mt-8 flex justify-end">
                <button id="next-step-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition">مرحله بعدی</button>
            </div>
        </main>

        <main id="step-2" class="bg-gray-800 rounded-xl p-6 md:p-8 hidden">
            <div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-4">
                <h2 class="text-lg font-bold text-white">مرحله ۲: ثبت اطلاعات تامین‌کنندگان</h2>
                <button id="add-inquiry-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition text-sm">افزودن استعلام جدید</button>
            </div>

            <div id="pi-session" class="bg-gray-900/50 border border-gray-700 rounded-lg p-4 my-8">
                <div class="text-sm text-gray-400 mb-3">استعلامات ثبت‌شده در این صفحه:</div>
                <div id="pi-session-empty" class="text-gray-500" style="font-size: 14px;">هنوز استعلامی ثبت نشده است.</div>
                <div id="pi-session-list" class="hidden overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-800">
                            <tr>
                                <th class="px-3 py-2 text-right text-gray-300">تامین‌کننده</th>
                                <th class="px-3 py-2 text-right text-gray-300">قیمت رسمی</th>
                                <th class="px-3 py-2 text-right text-gray-300">قیمت غیررسمی</th>
                                <th class="px-3 py-2 text-right text-gray-300">واحد پول</th>
                                <th class="px-3 py-2 text-right text-gray-300">گرید</th>
                                <th class="px-3 py-2 text-right text-gray-300">شرایط فروش</th>
                                <th class="px-3 py-2 text-right text-gray-300">برند</th>
                                <th class="px-3 py-2 text-right text-gray-300">کشور</th>
                                <th class="px-3 py-2 text-right text-gray-300">بسته‌بندی</th>
                                <th class="px-3 py-2 text-right text-gray-300">توضیحات</th>
                                <th class="px-3 py-2 text-right text-gray-300">تاریخ</th>
                            </tr>
                        </thead>
                        <tbody id="pi-session-tbody" class="divide-y divide-gray-700"></tbody>
                    </table>
                </div>
            </div>

            <div class="mt-8 flex justify-between items-center">
                <button id="prev-step-btn" class="text-red-500 hover:text-red-400 transition">مرحله قبل</button>
                <button id="pi-final-submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition">ثبت اطلاعات محصول و تامین کنندگان</button>
            </div>
        </main>

        <!-- Recent Price Inquiries Section -->
        <div class="mt-8 pt-6 border-t border-slate-700">
            <h3 class="text-xl font-bold mb-4 text-white">لیست استعلامات قیمت اخیر</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"></circle><path d="M20 20l-3-3"></path></svg>
                    </span>
                    <input type="text" id="inquiry-history-search" placeholder="جستجو در محصول یا تامین‌کننده..." class="w-full rounded-xl border-0 bg-white/5 pr-3 pl-11 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="inquiry-items-per-page" class="text-slate-400">نمایش:</label>
                        <select id="inquiry-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="inquiry-history-container" class="space-y-4">
                <div class="glass rounded-2xl overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead>
                            <tr>
                                <th class="text-right px-4 py-3 text-slate-300">ردیف</th>
                                <th class="text-right px-4 py-3 text-slate-300">تاریخ ثبت</th>
                                <th class="text-right px-4 py-3 text-slate-300">محصول</th>
                                <th class="text-right px-4 py-3 text-slate-300">مقدار</th>
                                <th class="text-right px-4 py-3 text-slate-300">تامین‌کننده</th>
                                <th class="text-right px-4 py-3 text-slate-300">قیمت رسمی</th>
                                <th class="text-right px-4 py-3 text-slate-300">قیمت غیررسمی</th>
                                <th class="text-right px-4 py-3 text-slate-300">عملیات</th>
                            </tr>
                        </thead>
                        <tbody id="inquiry-history-tbody" class="divide-y divide-white/10">
                            <tr>
                                <td colspan="9" class="px-4 py-8 text-center text-slate-400">در حال بارگذاری...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <footer class="table-footer">
                <div id="inquiry-rangeInfo" class="range-info"></div>
                <nav id="inquiry-pagination" class="pagination"></nav>
            </footer>
        </div>
    </div>

    <div id="inquiry-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 hidden modal-enter z-50">
        <div id="modal-panel" class="relative bg-gray-800 border border-gray-700 rounded-2xl w-full max-w-3xl p-6 md:p-8 max-h-[90vh] overflow-y-auto z-50">
            <button type="button" id="pi-modal-close" class="absolute left-4 top-4 text-gray-400 hover:text-gray-200 transition text-xl" aria-label="بستن">×</button>
            <div class="mb-6">
                <h3 class="text-xl font-bold text-white">افزودن استعلام برای: <span id="modal-product-name" class="text-blue-400">محصول</span></h3>
                <p class="text-sm text-gray-400 mt-2"><span class="font-bold text-amber-400">استعلامات قبلی (جهت اطلاع):</span> ابتدا تامین‌کننده را انتخاب کنید تا استعلامات قبلی نمایش داده شود.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
                <div>
                    <label class="block text-sm font-medium mb-2">نام تامین کننده:</label>
                    <div class="relative">
                        <input id="pi-supplier-name" type="text" placeholder="نام تامین کننده را وارد کنید" autocomplete="off" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" />
                        <input id="pi-supplier-id" type="hidden" />
                        <div id="pi-supplier-results" class="absolute z-20 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1 hidden max-h-56 overflow-y-auto"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2 text-amber-400">قیمت‌ها (به ازای 1 واحد):</label>
                    <p class="text-xs text-gray-500 mb-3">قیمت را بر اساس واحد انتخاب شده در مرحله قبل وارد کنید (کیلوگرم، گرم، تن، لیتر، کارتن، کیسه، بشکه)</p>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">قیمت رسمی:</label>
                    <input id="pi-official-price" type="text" placeholder="قیمت رسمی را وارد کنید" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">قیمت غیررسمی:</label>
                    <input id="pi-unofficial-price" type="text" placeholder="قیمت غیررسمی را وارد کنید" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium mb-2">شرایط فروش:</label>
                    <textarea id="pi-conditions" placeholder="شرایط فروش را وارد کنید" rows="3" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">برند محصول:</label>
                    <div class="relative">
                        <input id="pi-brand" type="text" placeholder="برند محصول را وارد کنید" autocomplete="off" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <div id="pi-brand-results" class="absolute z-20 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1 hidden max-h-56 overflow-y-auto"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">کشور تولیدکننده:</label>
                    <div class="relative">
                        <input id="pi-country" type="text" placeholder="کشور تولیدکننده را وارد کنید" autocomplete="off" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <div id="pi-country-results" class="absolute z-20 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1 hidden max-h-56 overflow-y-auto"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">بسته بندی:</label>
                    <div class="relative">
                        <input id="pi-packaging" type="text" placeholder="مثلا: کیسه 25kg" autocomplete="off" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <div id="pi-packaging-results" class="absolute z-20 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1 hidden max-h-56 overflow-y-auto"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">گرید:</label>
                    <div class="relative">
                        <input id="pi-grade" type="text" placeholder="مثلا: غذایی / دارویی" autocomplete="off" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <div id="pi-grade-results" class="absolute z-20 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1 hidden max-h-56 overflow-y-auto"></div>
                    </div>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium mb-2">توضیحات:</label>
                    <textarea id="pi-notes" placeholder="توضیحات اضافی را وارد کنید" rows="3" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">تاریخ استعلام:</label>
                    <input id="pi-quoted-at-shamsi" type="text" placeholder="برای انتخاب تاریخ کلیک کنید" readonly class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition cursor-pointer" style="cursor: pointer;">
                    <input id="pi-quoted-at" type="hidden" value="">
                </div>
            </div>

            <div class="mt-8 flex justify-end">
                <button id="add-to-list-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">افزودن به لیست</button>
            </div>
        </div>
</div>

    <!-- Simple text modal (for long conditions/notes) -->
    <div id="pi-text-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
        <div class="bg-gray-800 border border-gray-700 rounded-2xl w-full max-w-2xl mx-auto my-16 p-6 md:p-8 max-h-[80vh] overflow-y-auto relative">
            <button type="button" id="pi-text-close" class="absolute left-4 top-4 text-gray-400 hover:text-gray-200 text-xl">×</button>
            <h3 id="pi-text-title" class="text-lg font-bold text-white mb-4">جزئیات</h3>
            <div id="pi-text-content" class="text-gray-200 whitespace-pre-wrap break-words"></div>
    </div>
</div>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const setupButtonGroup = (groupId, buttonClass) => {
                const group = document.getElementById(groupId);
                if (!group) return;
                const buttons = group.querySelectorAll(`.${buttonClass}`);
                buttons.forEach(button => {
                    button.addEventListener('click', () => {
                        buttons.forEach(btn => {
                            btn.classList.remove('border-blue-500', 'text-blue-400', 'font-semibold', 'bg-transparent');
                            btn.classList.add('border-gray-700', 'bg-gray-900', 'text-gray-400', 'hover:border-gray-600');
                        });
                        button.classList.add('border-blue-500', 'text-blue-400', 'font-semibold', 'bg-transparent');
                        button.classList.remove('border-gray-700', 'bg-gray-900', 'text-gray-400', 'hover:border-gray-600');
                    });
                });
            };


            const step1 = document.getElementById('step-1');
            const step2 = document.getElementById('step-2');
            const nextStepBtn = document.getElementById('next-step-btn');
            const prevStepBtn = document.getElementById('prev-step-btn');
            const stepper1 = document.getElementById('stepper-1');
            const stepper1Circle = document.getElementById('stepper-1-circle');
            const stepper2 = document.getElementById('stepper-2');
            const stepper2Circle = document.getElementById('stepper-2-circle');

            const goToStep2 = () => {
                step1.classList.add('hidden');
                step2.classList.remove('hidden');
                stepper1.classList.replace('text-blue-400', 'text-gray-500');
                stepper1Circle.classList.replace('bg-blue-600', 'bg-gray-700');
                stepper2.classList.replace('text-gray-500', 'text-blue-400');
                stepper2Circle.classList.replace('bg-gray-700', 'bg-blue-600');
            };

            const goToStep1 = () => {
                step2.classList.add('hidden');
                step1.classList.remove('hidden');
                stepper2.classList.replace('text-blue-400', 'text-gray-500');
                stepper2Circle.classList.replace('bg-blue-600', 'bg-gray-700');
                stepper1.classList.replace('text-gray-500', 'text-blue-400');
                stepper1Circle.classList.replace('bg-gray-700', 'bg-blue-600');
            };

            nextStepBtn.addEventListener('click', () => {
                // persist qty/unit
                const qty = document.getElementById('quantity').value;
                const unit = document.getElementById('unit').value;
                document.getElementById('selected-qty').value = qty;
                document.getElementById('selected-unit').value = unit;
                // update price label in step 2
                const unitLabel = unit || 'واحد';
                const priceLabel = document.getElementById('pi-price-label');
                if (priceLabel) priceLabel.textContent = `قیمت به ازای 1 ${unitLabel}:`;
                goToStep2();
            });
            prevStepBtn.addEventListener('click', goToStep1);

            const inquiryModal = document.getElementById('inquiry-modal');
            const addInquiryBtn = document.getElementById('add-inquiry-btn');
            const addToListBtn = document.getElementById('add-to-list-btn');
            const modalProductName = document.getElementById('modal-product-name');

            // localStorage key for form data
            const STORAGE_KEY = 'price_inquiry_form_data';
            let storageTimeout = null;

            // Save form data to localStorage
            function saveFormDataToStorage() {
                const formData = {
                    supplierName: document.getElementById('pi-supplier-name')?.value || '',
                    supplierId: document.getElementById('pi-supplier-id')?.value || '',
                    officialPrice: document.getElementById('pi-official-price')?.value || '',
                    unofficialPrice: document.getElementById('pi-unofficial-price')?.value || '',
                    conditions: document.getElementById('pi-conditions')?.value || '',
                    brand: document.getElementById('pi-brand')?.value || '',
                    country: document.getElementById('pi-country')?.value || '',
                    packaging: document.getElementById('pi-packaging')?.value || '',
                    grade: document.getElementById('pi-grade')?.value || '',
                    notes: document.getElementById('pi-notes')?.value || '',
                    quotedAt: document.getElementById('pi-quoted-at')?.value || '',
                    quotedAtShamsi: document.getElementById('pi-quoted-at-shamsi')?.value || '',
                    timestamp: Date.now()
                };
                try {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(formData));
                    // Clear existing timeout
                    if (storageTimeout) {
                        clearTimeout(storageTimeout);
                    }
                    // Set timeout to clear storage after 3 minutes (180000 ms)
                    storageTimeout = setTimeout(() => {
                        localStorage.removeItem(STORAGE_KEY);
                        storageTimeout = null;
                    }, 180000); // 3 minutes
                } catch (e) {
                    console.warn('Failed to save to localStorage:', e);
                }
            }

            // Load form data from localStorage
            function loadFormDataFromStorage() {
                try {
                    const stored = localStorage.getItem(STORAGE_KEY);
                    if (!stored) return false;
                    
                    const formData = JSON.parse(stored);
                    const now = Date.now();
                    const threeMinutes = 180000; // 3 minutes in milliseconds
                    
                    // Check if data is older than 3 minutes
                    if (formData.timestamp && (now - formData.timestamp) > threeMinutes) {
                        localStorage.removeItem(STORAGE_KEY);
                        return false;
                    }
                    
                    // Restore form fields
                    if (formData.supplierName) {
                        const supplierNameEl = document.getElementById('pi-supplier-name');
                        if (supplierNameEl) supplierNameEl.value = formData.supplierName;
                    }
                    if (formData.supplierId) {
                        const supplierIdEl = document.getElementById('pi-supplier-id');
                        if (supplierIdEl) supplierIdEl.value = formData.supplierId;
                    }
                    if (formData.officialPrice) {
                        const officialPriceEl = document.getElementById('pi-official-price');
                        if (officialPriceEl) officialPriceEl.value = formData.officialPrice;
                    }
                    if (formData.unofficialPrice) {
                        const unofficialPriceEl = document.getElementById('pi-unofficial-price');
                        if (unofficialPriceEl) unofficialPriceEl.value = formData.unofficialPrice;
                    }
                    if (formData.conditions) {
                        const conditionsEl = document.getElementById('pi-conditions');
                        if (conditionsEl) conditionsEl.value = formData.conditions;
                    }
                    if (formData.brand) {
                        const brandEl = document.getElementById('pi-brand');
                        if (brandEl) brandEl.value = formData.brand;
                    }
                    if (formData.country) {
                        const countryEl = document.getElementById('pi-country');
                        if (countryEl) countryEl.value = formData.country;
                    }
                    if (formData.packaging) {
                        const packagingEl = document.getElementById('pi-packaging');
                        if (packagingEl) packagingEl.value = formData.packaging;
                    }
                    if (formData.grade) {
                        const gradeEl = document.getElementById('pi-grade');
                        if (gradeEl) gradeEl.value = formData.grade;
                    }
                    if (formData.notes) {
                        const notesEl = document.getElementById('pi-notes');
                        if (notesEl) notesEl.value = formData.notes;
                    }
                    if (formData.quotedAt) {
                        const quotedAtEl = document.getElementById('pi-quoted-at');
                        if (quotedAtEl) quotedAtEl.value = formData.quotedAt;
                    }
                    if (formData.quotedAtShamsi) {
                        const quotedAtShamsiEl = document.getElementById('pi-quoted-at-shamsi');
                        if (quotedAtShamsiEl) quotedAtShamsiEl.value = formData.quotedAtShamsi;
                    }
                    
                    return true;
                } catch (e) {
                    console.warn('Failed to load from localStorage:', e);
                    return false;
                }
            }

            // Clear form data from localStorage
            function clearFormDataFromStorage() {
                try {
                    localStorage.removeItem(STORAGE_KEY);
                    if (storageTimeout) {
                        clearTimeout(storageTimeout);
                        storageTimeout = null;
                    }
                } catch (e) {
                    console.warn('Failed to clear localStorage:', e);
                }
            }

            function resetInquiryModal() {
                const fields = [
                    'pi-supplier-name','pi-supplier-id','pi-official-price','pi-unofficial-price','pi-conditions',
                    'pi-brand','pi-country','pi-packaging','pi-grade','pi-notes','pi-quoted-at','pi-quoted-at-shamsi'
                ];
                fields.forEach(id => {
                    const el = document.getElementById(id);
                    if (!el) return;
                    if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') el.value = '';
                    else el.value = '';
                });
                const supResults = document.getElementById('pi-supplier-results');
                if (supResults) { supResults.innerHTML = ''; supResults.classList.add('hidden'); }
            }

            const openModal = () => {
                const productName = document.getElementById('product-name').value;
                modalProductName.textContent = productName || 'محصول انتخاب نشده';
                // ensure clean state each time
                resetInquiryModal();
                
                // Try to load saved data from localStorage
                const hasSavedData = loadFormDataFromStorage();
                
                // Date will be set by calendar if needed
                
                inquiryModal.classList.remove('hidden');
                setTimeout(() => inquiryModal.classList.remove('modal-enter'), 10);
                document.body.style.overflow = 'hidden';
            };
            const closeModal = () => {
                // Save form data before closing
                saveFormDataToStorage();
                inquiryModal.classList.add('modal-leave');
                inquiryModal.classList.remove('modal-enter');
                setTimeout(() => { inquiryModal.classList.add('hidden'); inquiryModal.classList.remove('modal-leave'); }, 300);
                document.body.style.overflow = '';
            };
            addInquiryBtn.addEventListener('click', () => { resetInquiryModal(); openModal(); });
            addToListBtn.addEventListener('click', async () => {
                const productId = document.getElementById('product-id-selected')?.value || '';
                const supplierId = document.getElementById('pi-supplier-id').value || '';
                const officialPriceRaw = document.getElementById('pi-official-price').value || '';
                const unofficialPriceRaw = document.getElementById('pi-unofficial-price').value || '';
                const quotedAtRaw = document.getElementById('pi-quoted-at').value || '';
                const payload = {
                    product_id: productId,
                    supplier_id: supplierId,
                    official_price: officialPriceRaw.replace(/[^\d.]/g, ''),
                    unofficial_price: unofficialPriceRaw.replace(/[^\d.]/g, ''),
                    currency: 'تومان',
                    conditions: document.getElementById('pi-conditions').value || null,
                    brand: document.getElementById('pi-brand').value || null,
                    country: document.getElementById('pi-country').value || null,
                    packaging: document.getElementById('pi-packaging').value || null,
                    grade: document.getElementById('pi-grade').value || null,
                    notes: document.getElementById('pi-notes').value || null,
                    quoted_at: quotedAtRaw || new Date().toISOString().split('T')[0],
                };

                if (!payload.product_id) {
                    if (window.showErrorModal) {
                        window.showErrorModal('ابتدا محصول را انتخاب کنید.');
                    } else {
                        alert('ابتدا محصول را انتخاب کنید.');
                    }
                    return;
                }
                if (!payload.supplier_id) {
                    if (window.showErrorModal) {
                        window.showErrorModal('تامین‌کننده را از لیست نتایج انتخاب کنید.');
                    } else {
                        alert('تامین‌کننده را از لیست نتایج انتخاب کنید.');
                    }
                    return;
                }
                if (!payload.official_price && !payload.unofficial_price) {
                    if (window.showErrorModal) {
                        window.showErrorModal('حداقل یکی از قیمت‌های رسمی یا غیررسمی را وارد کنید.');
                    } else {
                        alert('حداقل یکی از قیمت‌های رسمی یا غیررسمی را وارد کنید.');
                    }
                    return;
                }

                try {
                    const res = await fetch(`{{ route('price.inquiry.quote') }}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(payload),
                    });
                    const json = await res.json();
                    if (!res.ok || !json.success) {
                        if (window.showErrorModal) {
                            window.showErrorModal(json.message || 'خطا در ثبت استعلام');
                        } else {
                            alert(json.message || 'خطا در ثبت استعلام');
                        }
                        return;
                    }

                    const tbody = document.getElementById('pi-session-tbody');
                    const listWrap = document.getElementById('pi-session-list');
                    const emptyMsg = document.getElementById('pi-session-empty');
                    if (emptyMsg) emptyMsg.classList.add('hidden');
                    if (listWrap) listWrap.classList.remove('hidden');
                    if (tbody) {
                        const esc = (s) => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
                        const tr = document.createElement('tr');
                        const supplierName = document.getElementById('pi-supplier-name')?.value || '-';
                        const officialPriceNum = Number(payload.official_price || 0);
                        const unofficialPriceNum = Number(payload.unofficial_price || 0);
                        // Persist supplier_id on the row for finalization
                        tr.setAttribute('data-supplier-id', payload.supplier_id || '');
                        tr.setAttribute('data-official-price', payload.official_price || '');
                        tr.setAttribute('data-unofficial-price', payload.unofficial_price || '');
                        tr.setAttribute('data-quoted-at', payload.quoted_at || new Date().toISOString().split('T')[0]);
                        const condTxt = payload.conditions || '';
                        const notesTxt = payload.notes || '';
                        const quotedDate = payload.quoted_at ? new Date(payload.quoted_at).toLocaleDateString('fa-IR') : new Date().toLocaleDateString('fa-IR');
                        tr.innerHTML = `
                            <td class=\"px-3 py-2 text-gray-200\">${esc(supplierName)}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${officialPriceNum.toLocaleString()}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${unofficialPriceNum.toLocaleString()}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${payload.currency}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${esc(payload.grade || '-')}</td>
                            <td class=\"px-3 py-2 text-gray-200\">
                                <span class=\"truncate-cell\">${esc(condTxt)}</span>
                                ${condTxt ? `<button class=\\"pi-show-text text-blue-400 ml-2\\" data-title=\\"شرایط فروش\\" data-text=\\"${esc(condTxt)}\\">مشاهده</button>` : ''}
                            </td>
                            <td class=\"px-3 py-2 text-gray-200\">${esc(payload.brand || '-')}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${esc(payload.country || '-')}</td>
                            <td class=\"px-3 py-2 text-gray-200\">${esc(payload.packaging || '-')}</td>
                            <td class=\"px-3 py-2 text-gray-200\">
                                <span class=\"truncate-cell\">${esc(notesTxt)}</span>
                                ${notesTxt ? `<button class=\\"pi-show-text text-blue-400 ml-2\\" data-title=\\"توضیحات\\" data-text=\\"${esc(notesTxt)}\\">مشاهده</button>` : ''}
                            </td>
                            <td class=\"px-3 py-2 text-gray-200\">${quotedDate}</td>
                        `;
                        tbody.appendChild(tr);
                    }

                    // Clear saved data and reset modal for next use and close
                    clearFormDataFromStorage();
                    resetInquiryModal();
                    closeModal();
                } catch (e) {
                    alert('خطای ارتباط با سرور');
                }
            });
            inquiryModal.addEventListener('click', (e) => { if (e.target === inquiryModal) closeModal(); });
            const modalCloseBtn = document.getElementById('pi-modal-close');
            if (modalCloseBtn) modalCloseBtn.addEventListener('click', closeModal);

            const productNameInput = document.getElementById('product-name');
            const searchResultsContainer = document.getElementById('search-results');
            let searchTimer = null;
            const productsEndpoint = "{{ route('products.autocomplete') }}";
            const suppliersSearchEndpoint = "{{ route('suppliers.general_search') }}";

            const renderProductResults = (items) => {
                searchResultsContainer.innerHTML = '';
                if (!items || items.length === 0) { searchResultsContainer.classList.add('hidden'); return; }
                searchResultsContainer.classList.remove('hidden');
                items.forEach(it => {
                    const el = document.createElement('div');
                    el.className = 'p-3 hover:bg-gray-600 cursor-pointer text-sm';
                    el.innerHTML = `<div class="text-gray-200">${it.label || it.name}</div>`;
                    el.addEventListener('click', () => {
                        productNameInput.value = it.label || it.name || '';
                        const hid = document.getElementById('product-id-selected');
                        if (hid) hid.value = it.id || it.value || '';
                        searchResultsContainer.classList.add('hidden');
                    });
                    searchResultsContainer.appendChild(el);
                });
            };

            const fetchProducts = async (q) => {
                try {
                    const url = new URL(productsEndpoint, window.location.origin);
                    url.searchParams.set('q', q);
                    url.searchParams.set('limit', 12);
                    const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    if (!res.ok) { searchResultsContainer.classList.add('hidden'); return; }
                    const data = await res.json();
                    renderProductResults(data.data || []);
                } catch (_) { searchResultsContainer.classList.add('hidden'); }
            };

            productNameInput.addEventListener('input', (e) => {
                const query = productNameInput.value.trim();
                searchResultsContainer.innerHTML = '';
                if (query.length < 2) { searchResultsContainer.classList.add('hidden'); return; }
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => fetchProducts(query), 250);
            });
            document.addEventListener('click', (e) => {
                if (!productNameInput.contains(e.target) && !searchResultsContainer.contains(e.target)) {
                    searchResultsContainer.classList.add('hidden');
                }
            });

            // Supplier live search in modal
            const supInput = document.getElementById('pi-supplier-name');
            const supId = document.getElementById('pi-supplier-id');
            const supResults = document.getElementById('pi-supplier-results');
            let supTimer = null;

            function hideSup() { supResults.classList.add('hidden'); supResults.innerHTML = ''; }
            function showSup() { supResults.classList.remove('hidden'); }
            function renderSuppliers(items) {
                supResults.innerHTML = '';
                if (!items || items.length === 0) { hideSup(); return; }
                items.forEach(s => {
                    const row = document.createElement('div');
                    row.className = 'px-3 py-2 hover:bg-gray-700 cursor-pointer text-sm';
                    row.textContent = s.name;
                    row.addEventListener('click', () => {
                        supInput.value = s.name;
                        supId.value = s.id;
                        hideSup();
                        // Auto-save when supplier is selected
                        saveFormDataToStorage();
                    });
                    supResults.appendChild(row);
                });
                showSup();
            }
            async function fetchSuppliers(q) {
                try {
                    const url = new URL(suppliersSearchEndpoint, window.location.origin);
                    url.searchParams.set('q', q);
                    url.searchParams.set('query', q);
                    url.searchParams.set('limit', '10');
                    const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    if (!res.ok) { hideSup(); return; }
                    const json = await res.json();
                    const items = Array.isArray(json) ? json
                                  : (json.data || json.items || json.results || json.suppliers || []);
                    renderSuppliers(items);
                } catch (_) { hideSup(); }
            }
            if (supInput) {
                supInput.addEventListener('input', (e) => {
                    const q = (supInput.value || '').trim();
                    supId.value = '';
                    if (q.length < 2) { hideSup(); return; }
                    clearTimeout(supTimer);
                    supTimer = setTimeout(() => fetchSuppliers(q), 250);
                    // Auto-save to localStorage
                    saveFormDataToStorage();
                });
                // Show suggestions on focus if existing text
                supInput.addEventListener('focus', () => {
                    const q = (supInput.value || '').trim();
                    if (q.length >= 2) fetchSuppliers(q);
                });
            }
            // Auto-save when supplier is selected
            if (supId) {
                supId.addEventListener('change', () => {
                    saveFormDataToStorage();
                });
            }
            document.addEventListener('click', (e) => {
                if (!supResults.contains(e.target) && e.target !== supInput) hideSup();
            });

            // Autocomplete for brand, country, packaging, and grade fields
            const brandInput = document.getElementById('pi-brand');
            const brandResults = document.getElementById('pi-brand-results');
            const countryInput = document.getElementById('pi-country');
            const countryResults = document.getElementById('pi-country-results');
            const packagingInput = document.getElementById('pi-packaging');
            const packagingResults = document.getElementById('pi-packaging-results');
            const gradeInput = document.getElementById('pi-grade');
            const gradeResults = document.getElementById('pi-grade-results');

            // Generic autocomplete function
            function setupAutocomplete(input, results, fieldType) {
                let timer;
                
                function hideResults() {
                    results.classList.add('hidden');
                }
                
                function showResults(items) {
                    if (!items || items.length === 0) {
                        hideResults();
                        return;
                    }
                    results.innerHTML = items.map(item => `
                        <div class="px-3 py-2 hover:bg-gray-700 cursor-pointer text-sm text-gray-200 border-b border-gray-600 last:border-b-0" data-value="${item}">
                            ${item}
                        </div>
                    `).join('');
                    results.classList.remove('hidden');
                }
                
                function fetchSuggestions(query) {
                    fetch(`/admin/price-inquiry/suggestions/${fieldType}?q=${encodeURIComponent(query)}`)
                        .then(r => r.json())
                        .then(data => {
                            if (data.success && data.suggestions) {
                                showResults(data.suggestions);
                            } else {
                                hideResults();
                            }
                        })
                        .catch(() => hideResults());
                }
                
                input.addEventListener('input', (e) => {
                    const q = (input.value || '').trim();
                    if (q.length < 2) { 
                        hideResults(); 
                        return; 
                    }
                    clearTimeout(timer);
                    timer = setTimeout(() => fetchSuggestions(q), 250);
                });
                
                input.addEventListener('focus', () => {
                    const q = (input.value || '').trim();
                    if (q.length >= 2) fetchSuggestions(q);
                });
                
                results.addEventListener('click', (e) => {
                    if (e.target.dataset.value) {
                        input.value = e.target.dataset.value;
                        hideResults();
                        // Auto-save when value is selected
                        saveFormDataToStorage();
                    }
                });
                
                document.addEventListener('click', (e) => {
                    if (!results.contains(e.target) && e.target !== input) {
                        hideResults();
                    }
                });
            }

            // Setup autocomplete for all fields
            if (brandInput && brandResults) setupAutocomplete(brandInput, brandResults, 'brand');
            if (countryInput && countryResults) setupAutocomplete(countryInput, countryResults, 'country');
            if (packagingInput && packagingResults) setupAutocomplete(packagingInput, packagingResults, 'packaging');
            if (gradeInput && gradeResults) setupAutocomplete(gradeInput, gradeResults, 'grade');

            // Auto-save event listeners for all form fields
            const formFields = [
                'pi-official-price',
                'pi-unofficial-price',
                'pi-conditions',
                'pi-notes',
                'pi-quoted-at'
            ];
            
            let saveTimer = null;
            const debouncedSave = () => {
                clearTimeout(saveTimer);
                saveTimer = setTimeout(() => {
                    saveFormDataToStorage();
                }, 500); // Debounce: save after 500ms of no typing
            };
            
            formFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field) {
                    field.addEventListener('input', debouncedSave);
                    field.addEventListener('change', () => {
                        clearTimeout(saveTimer);
                        saveFormDataToStorage();
                    });
                }
            });

            // Recent Price Inquiries functionality
            let inquiryHistoryData = [];
            let inquiryCurrentPage = 1;
            let inquiryItemsPerPage = 10;
            let inquirySearchQuery = '';

            // Load recent price inquiries
            async function loadInquiryHistory() {
                try {
                    const response = await fetch('/admin/price-inquiry/list/data');
                    const data = await response.json();
                    inquiryHistoryData = data.inquiries || [];
                    renderInquiryHistory();
                } catch (error) {
                    console.error('Error loading inquiry history:', error);
                    document.getElementById('inquiry-history-tbody').innerHTML = `
                        <tr>
                            <td colspan="9" class="px-4 py-8 text-center text-red-400">خطا در بارگذاری داده‌ها</td>
                        </tr>
                    `;
                }
            }

            // Render inquiry history table
            function renderInquiryHistory() {
                const tbody = document.getElementById('inquiry-history-tbody');
                if (!tbody) return;

                let filteredData = inquiryHistoryData;
                
                // Apply search filter
                if (inquirySearchQuery) {
                    filteredData = inquiryHistoryData.filter(inquiry => 
                        inquiry.product_name.toLowerCase().includes(inquirySearchQuery.toLowerCase()) ||
                        inquiry.offers.some(offer => 
                            offer.supplier_name.toLowerCase().includes(inquirySearchQuery.toLowerCase())
                        )
                    );
                }

                // Apply pagination
                const startIndex = (inquiryCurrentPage - 1) * inquiryItemsPerPage;
                const endIndex = inquiryItemsPerPage === 'all' ? filteredData.length : startIndex + inquiryItemsPerPage;
                const paginatedData = filteredData.slice(startIndex, endIndex);

                if (paginatedData.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="9" class="px-4 py-8 text-center text-slate-400">هیچ استعلام قیمتی یافت نشد</td>
                        </tr>
                    `;
                    renderInquiryPagination(filteredData.length);
                    return;
                }

                // Calculate row numbers in descending order (newest = highest number)
                // Total count of all inquiries (not just filtered/paginated)
                const totalInquiries = filteredData.length;
                // Start from the highest number (newest inquiry)
                let rowIndex = totalInquiries - startIndex;
                
                tbody.innerHTML = paginatedData.map((inquiry, inquiryIndex) => {
                    const formattedDate = new Date(inquiry.created_at).toLocaleDateString('fa-IR');
                    const currentRowIndex = rowIndex;
                    
                    // Decrement rowIndex for each inquiry (newest = highest number)
                    if (inquiry.offers && inquiry.offers.length > 0) {
                        rowIndex--;
                    }
                    
                    // Create rows for each supplier offer
                            return inquiry.offers.map((offer, offerIndex) => `
                        <tr>
                            <td class="px-4 py-4 text-slate-200">${offerIndex === 0 ? currentRowIndex : ''}</td>
                            <td class="px-4 py-4 text-slate-200">${offerIndex === 0 ? formattedDate : ''}</td>
                            <td class="px-4 py-4 text-slate-200">${offerIndex === 0 ? inquiry.product_name : ''}</td>
                            <td class="px-4 py-4 text-slate-200">${offerIndex === 0 ? inquiry.formatted_quantity : ''}</td>
                            <td class="px-4 py-4 text-slate-200">${offer.supplier_name || 'نامشخص'}</td>
                                    <td class="px-4 py-4 text-slate-200 price-cell">${Number(offer.official_price).toLocaleString()} تومان</td>
                                    <td class="px-4 py-4 text-slate-200 price-cell">${Number(offer.unofficial_price).toLocaleString()} تومان</td>
                                    <td class="px-4 py-4 text-slate-200">
                                        ${offerIndex === 0 ? `
                                            <div class="actions" data-id="${inquiry.id}">
                                                <a href="/admin/price-inquiry/${inquiry.id}" class="btn-action">مشاهده</a>
                                                <a href="/admin/price-inquiry/${inquiry.id}/edit" class="btn-action btn-edit">ویرایش</a>
                                                <button class="btn-action btn-delete ph-delete-btn" data-id="${inquiry.id}">حذف</button>
                                            </div>
                                        ` : ''}
                                    </td>
                        </tr>
                    `).join('');
                }).join('');

                renderInquiryPagination(filteredData.length);
            }

            // Render pagination for inquiry history
            function renderInquiryPagination(totalItems) {
                const rangeInfo = document.getElementById('inquiry-rangeInfo');
                const pagination = document.getElementById('inquiry-pagination');
                if (!rangeInfo || !pagination) return;

                const per = inquiryItemsPerPage === 'all' ? totalItems : parseInt(inquiryItemsPerPage, 10);
                const totalPages = per ? Math.ceil(totalItems / per) : 1;
                const startItem = totalItems === 0 ? 0 : ((inquiryCurrentPage - 1) * per + 1);
                const endItem = Math.min(inquiryCurrentPage * per, totalItems);
                rangeInfo.textContent = `نمایش ${startItem} تا ${endItem} از ${totalItems}`;

                pagination.innerHTML = '';
                if (totalPages <= 1) return;

                // Previous button
                const prevBtn = document.createElement('button');
                prevBtn.textContent = 'قبلی';
                prevBtn.className = 'page-btn';
                prevBtn.disabled = inquiryCurrentPage === 1;
                prevBtn.onclick = () => {
                    if (inquiryCurrentPage > 1) {
                        changeInquiryPage(inquiryCurrentPage - 1);
                    }
                };
                pagination.appendChild(prevBtn);

                // Page numbers with ellipsis
                const maxVisible = 5;
                let startPage = Math.max(1, inquiryCurrentPage - Math.floor(maxVisible / 2));
                let endPage = Math.min(totalPages, startPage + maxVisible - 1);
                
                if (endPage - startPage < maxVisible - 1) {
                    startPage = Math.max(1, endPage - maxVisible + 1);
                }

                // First page
                if (startPage > 1) {
                    const firstBtn = document.createElement('button');
                    firstBtn.textContent = '1';
                    firstBtn.className = 'page-btn';
                    firstBtn.onclick = () => changeInquiryPage(1);
                    pagination.appendChild(firstBtn);

                    if (startPage > 2) {
                        const ellipsis = document.createElement('span');
                        ellipsis.textContent = '...';
                        ellipsis.className = 'page-btn-ellipsis';
                        pagination.appendChild(ellipsis);
                    }
                }

                // Page numbers
                for (let i = startPage; i <= endPage; i++) {
                    const btn = document.createElement('button');
                    btn.textContent = i;
                    btn.className = `page-btn ${i === inquiryCurrentPage ? 'active' : ''}`;
                    btn.onclick = () => changeInquiryPage(i);
                    pagination.appendChild(btn);
                }

                // Last page
                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        const ellipsis = document.createElement('span');
                        ellipsis.textContent = '...';
                        ellipsis.className = 'page-btn-ellipsis';
                        pagination.appendChild(ellipsis);
                    }

                    const lastBtn = document.createElement('button');
                    lastBtn.textContent = totalPages;
                    lastBtn.className = 'page-btn';
                    lastBtn.onclick = () => changeInquiryPage(totalPages);
                    pagination.appendChild(lastBtn);
                }

                // Next button
                const nextBtn = document.createElement('button');
                nextBtn.textContent = 'بعدی';
                nextBtn.className = 'page-btn';
                nextBtn.disabled = inquiryCurrentPage === totalPages;
                nextBtn.onclick = () => {
                    if (inquiryCurrentPage < totalPages) {
                        changeInquiryPage(inquiryCurrentPage + 1);
                    }
                };
                pagination.appendChild(nextBtn);
            }

            // Change inquiry page
            window.changeInquiryPage = function(page) {
                inquiryCurrentPage = page;
                renderInquiryHistory();
            };

            // Search functionality for inquiry history
            const inquirySearchInput = document.getElementById('inquiry-history-search');
            if (inquirySearchInput) {
                inquirySearchInput.addEventListener('input', function(e) {
                    inquirySearchQuery = e.target.value;
                    inquiryCurrentPage = 1;
                    renderInquiryHistory();
                });
            }

            // Items per page for inquiry history
            const inquiryItemsPerPageSelect = document.getElementById('inquiry-items-per-page');
            if (inquiryItemsPerPageSelect) {
                inquiryItemsPerPageSelect.addEventListener('change', function(e) {
                    inquiryItemsPerPage = e.target.value === 'all' ? 'all' : parseInt(e.target.value);
                    inquiryCurrentPage = 1;
                    renderInquiryHistory();
                });
            }

            // Handle delete button clicks in inquiry history table
            document.addEventListener('click', function(e) {
                const deleteBtn = e.target.closest('.ph-delete-btn');
                if (!deleteBtn) return;
                
                const inquiryId = deleteBtn.getAttribute('data-id');
                if (!inquiryId) return;
                
                // Get product name from table row
                const row = deleteBtn.closest('tr');
                let productName = 'این استعلام';
                if (row) {
                    const productCell = row.querySelector('td:nth-child(3)'); // Third column is product name
                    if (productCell && productCell.textContent.trim()) {
                        productName = productCell.textContent.trim();
                    } else {
                        // Try to get from inquiryHistoryData as fallback
                        const inquiry = inquiryHistoryData.find(inq => inq.id == inquiryId);
                        if (inquiry && inquiry.product_name) {
                            productName = inquiry.product_name;
                        }
                    }
                }
                
                // Show delete modal
                if (window.showDeleteModal) {
                    window.showDeleteModal(
                        'حذف استعلام قیمت',
                        `آیا از حذف استعلام قیمت "${productName}" مطمئن هستید؟`,
                        async () => {
                            // Confirm callback - delete the inquiry
                            try {
                                const formData = new FormData();
                                formData.set('_method', 'DELETE');
                                
                                const response = await fetch(`/admin/price-inquiry/${inquiryId}`, {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                        'X-Requested-With': 'XMLHttpRequest'
                                    },
                                    body: formData
                                });
                                
                                const result = await response.json();
                                
                                if (!response.ok || !result.success) {
                                    throw new Error(result.message || 'خطا در حذف استعلام قیمت');
                                }
                                
                                // Reload inquiry history
                                await loadInquiryHistory();
                                
                                // Show success modal with countdown
                                if (window.showSuccessModalWithAutoClose) {
                                    window.showSuccessModalWithAutoClose('استعلام قیمت با موفقیت حذف شد.');
                                } else if (window.showSuccessModal) {
                                    window.showSuccessModal('استعلام قیمت با موفقیت حذف شد.');
                                } else {
                                    alert('استعلام قیمت با موفقیت حذف شد.');
                                }
                            } catch (error) {
                                console.error('Delete error:', error);
                                if (window.showErrorModal) {
                                    window.showErrorModal(error.message || 'خطا در حذف استعلام قیمت');
                                } else {
                                    alert(error.message || 'خطا در حذف استعلام قیمت');
                                }
                            }
                        },
                        () => {
                            // Cancel callback - do nothing
                        }
                    );
                } else {
                    // Fallback if global modal is not available
                    if (confirm(`آیا از حذف استعلام قیمت "${productName}" مطمئن هستید؟`)) {
                        const formData = new FormData();
                        formData.set('_method', 'DELETE');
                        
                        fetch(`/admin/price-inquiry/${inquiryId}`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: formData
                        })
                        .then(r => r.json())
                        .then(result => {
                            if (result.success) {
                                loadInquiryHistory();
                                if (window.showSuccessModalWithAutoClose) {
                                    window.showSuccessModalWithAutoClose('استعلام قیمت با موفقیت حذف شد.');
                                } else if (window.showSuccessModal) {
                                    window.showSuccessModal('استعلام قیمت با موفقیت حذف شد.');
                                } else {
                                    alert('استعلام قیمت با موفقیت حذف شد.');
                                }
                            } else {
                                if (window.showErrorModal) {
                                    window.showErrorModal(result.message || 'خطا در حذف استعلام قیمت');
                                } else {
                                    alert(result.message || 'خطا در حذف استعلام قیمت');
                                }
                            }
                        })
                        .catch(error => {
                            console.error('Delete error:', error);
                            if (window.showErrorModal) {
                                window.showErrorModal('خطا در حذف استعلام قیمت');
                            } else {
                                alert('خطا در حذف استعلام قیمت');
                            }
                        });
                    }
                }
            });

            // Load inquiry history on page load
            loadInquiryHistory();

            // Persian Calendar for quoted_at date
            const quotedAtShamsiInput = document.getElementById('pi-quoted-at-shamsi');
            const quotedAtHiddenInput = document.getElementById('pi-quoted-at');
            
            if (quotedAtShamsiInput) {
                let currentCalendarYear = null;
                let currentCalendarMonth = null;
                
                // Get current date from input or use today
                const getCurrentDate = () => {
                    const currentValue = quotedAtShamsiInput.value;
                    if (currentValue && currentValue.includes('/')) {
                        const parts = currentValue.split('/');
                        return {
                            year: parseInt(parts[0]),
                            month: parseInt(parts[1])
                        };
                    }
                    // Get from server
                    @php
                        $now = \Morilog\Jalali\Jalalian::now();
                        $currentYear = $now->getYear();
                        $currentMonth = $now->getMonth();
                    @endphp
                    return {
                        year: {{ $currentYear }},
                        month: {{ $currentMonth }}
                    };
                };
                
                // Function to show Persian calendar
                window.showQuotedAtCalendar = function(year, month) {
                    // Remove existing calendar if any
                    const existingCalendar = document.getElementById('persian-calendar-modal-quoted-at');
                    if (existingCalendar) {
                        existingCalendar.remove();
                    }
                    
                    // Fetch calendar view from server
                    const calendarUrl = '{{ route('api.calendar-view') }}';
                    fetch(calendarUrl + '?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 => {
                            return response.text().then(text => {
                                if (!response.ok) {
                                    if (text.includes('persian-calendar-container')) {
                                        return text;
                                    }
                                    console.error('Calendar fetch error:', {
                                        status: response.status,
                                        statusText: response.statusText,
                                        url: calendarUrl + '?year=' + year + '&month=' + month,
                                        responseText: text.substring(0, 500)
                                    });
                                    throw new Error('Failed to load calendar: ' + response.status);
                                }
                                return text;
                            });
                        })
                        .then(html => {
                            if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                                console.error('Invalid calendar HTML');
                                throw new Error('Invalid calendar HTML');
                            }
                            
                            // Create modal container
                            const modal = document.createElement('div');
                            modal.id = 'persian-calendar-modal-quoted-at';
                            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.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();
                                modal.remove();
                            });
                            
                            // Create calendar container
                            const calendarContainer = document.createElement('div');
                            calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                            calendarContainer.innerHTML = html;
                            calendarContainer.addEventListener('click', function(e) {
                                e.stopPropagation();
                            });
                            
                            modal.appendChild(backdrop);
                            modal.appendChild(calendarContainer);
                            document.body.appendChild(modal);
                            
                            setTimeout(() => {
                                const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                                if (calendarDiv) {
                                    calendarDiv.style.display = 'block';
                                    calendarDiv.style.visibility = 'visible';
                                    calendarDiv.style.opacity = '1';
                                }
                            }, 50);
                            
                            // Handle day selection
                            setTimeout(() => {
                                const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                                dayElements.forEach(dayEl => {
                                    dayEl.addEventListener('click', function(e) {
                                        e.stopPropagation();
                                        
                                        // Remove selected class from all days
                                        dayElements.forEach(day => {
                                            day.classList.remove('selected');
                                            const dayNumber = day.querySelector('.day-number');
                                            const dayGregorian = day.querySelector('.day-gregorian');
                                            if (dayNumber) {
                                                dayNumber.style.color = '';
                                            }
                                            if (dayGregorian) {
                                                dayGregorian.style.color = '';
                                            }
                                        });
                                        
                                        // Add selected class to clicked day
                                        this.classList.add('selected');
                                        const dayNumber = this.querySelector('.day-number');
                                        const dayGregorian = this.querySelector('.day-gregorian');
                                        if (dayNumber) {
                                            dayNumber.style.color = '#ffffff';
                                        }
                                        if (dayGregorian) {
                                            dayGregorian.style.color = '#ffffff';
                                        }
                                        
                                        const gregorian = this.getAttribute('data-gregorian');
                                        const shamsi = this.getAttribute('data-shamsi');
                                        
                                        if (quotedAtShamsiInput) {
                                            quotedAtShamsiInput.value = shamsi;
                                        }
                                        if (quotedAtHiddenInput) {
                                            quotedAtHiddenInput.value = gregorian;
                                        }
                                        
                                        // Auto-save when date is selected
                                        saveFormDataToStorage();
                                        
                                        modal.remove();
                                    });
                                });
                                
                                // Handle month navigation
                                const prevBtn = calendarContainer.querySelector('.prev-month');
                                const nextBtn = calendarContainer.querySelector('.next-month');
                                
                                if (prevBtn) {
                                    prevBtn.addEventListener('click', function(e) {
                                        e.stopPropagation();
                                        let newYear = parseInt(this.getAttribute('data-year'));
                                        let newMonth = parseInt(this.getAttribute('data-month'));
                                        
                                        if (newMonth < 1) {
                                            newMonth = 12;
                                            newYear--;
                                        }
                                        
                                        currentCalendarYear = newYear;
                                        currentCalendarMonth = newMonth;
                                        showQuotedAtCalendar(newYear, newMonth);
                                    });
                                }
                                
                                if (nextBtn) {
                                    nextBtn.addEventListener('click', function(e) {
                                        e.stopPropagation();
                                        let newYear = parseInt(this.getAttribute('data-year'));
                                        let newMonth = parseInt(this.getAttribute('data-month'));
                                        
                                        if (newMonth > 12) {
                                            newMonth = 1;
                                            newYear++;
                                        }
                                        
                                        currentCalendarYear = newYear;
                                        currentCalendarMonth = newMonth;
                                        showQuotedAtCalendar(newYear, newMonth);
                                    });
                                }
                                
                                // Handle "Go to Today" button
                                const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                                if (todayBtn) {
                                    todayBtn.addEventListener('click', function(e) {
                                        e.stopPropagation();
                                        const today = getCurrentDate();
                                        currentCalendarYear = today.year;
                                        currentCalendarMonth = today.month;
                                        showQuotedAtCalendar(today.year, today.month);
                                    });
                                }
                            }, 100);
                        })
                        .catch(error => {
                            console.error('Failed to load calendar:', error);
                        });
                };
                
                // Open calendar on input click
                quotedAtShamsiInput.addEventListener('click', function() {
                    const currentDate = getCurrentDate();
                    currentCalendarYear = currentDate.year;
                    currentCalendarMonth = currentDate.month;
                    showQuotedAtCalendar(currentDate.year, currentDate.month);
                });
            }

            // (Removed previous-quotes fetch logic for this page)
            // Text modal handlers
            const textModal = document.getElementById('pi-text-modal');
            const textClose = document.getElementById('pi-text-close');
            const textTitle = document.getElementById('pi-text-title');
            const textContent = document.getElementById('pi-text-content');
            function openTextModal(title, text){
                textTitle.textContent = title || 'جزئیات';
                textContent.textContent = text || '';
                textModal.classList.remove('hidden');
            }
            function closeTextModal(){ textModal.classList.add('hidden'); }
            if (textClose) textClose.addEventListener('click', closeTextModal);
            textModal.addEventListener('click', (e)=>{ if(e.target === textModal) closeTextModal(); });
            const sessionTbody = document.getElementById('pi-session-tbody');
            if (sessionTbody) sessionTbody.addEventListener('click', (e)=>{
                const btn = e.target.closest('.pi-show-text');
                if (!btn) return;
                openTextModal(btn.getAttribute('data-title') || 'جزئیات', btn.getAttribute('data-text') || '');
            });

            // Final submit: persist as Purchase Request
            const finalSubmit = document.getElementById('pi-final-submit');
            if (finalSubmit) finalSubmit.addEventListener('click', async () => {
                const productId = document.getElementById('product-id-selected')?.value || '';
                const qty = document.getElementById('selected-qty')?.value || document.getElementById('quantity')?.value || '';
                const unit = document.getElementById('selected-unit')?.value || document.getElementById('unit')?.value || '';
                const purchaseType = 'official';
                const destination = 'warehouse';
                const productName = document.getElementById('product-name')?.value || '';
                if (!productId || !qty || !unit) {
                    if (window.showErrorModal) {
                        window.showErrorModal('محصول، مقدار و واحد لازم است.');
                    } else {
                        alert('محصول، مقدار و واحد لازم است.');
                    }
                    return;
                }

                // Build offers from the table rows we added in this session (lightweight - from payloads captured at insert time)
                const rows = Array.from(document.querySelectorAll('#pi-session-tbody tr'));
                if (rows.length === 0) {
                    if (window.showErrorModal) {
                        window.showErrorModal('ابتدا حداقل یک استعلام ثبت کنید.');
                    } else {
                        alert('ابتدا حداقل یک استعلام ثبت کنید.');
                    }
                    return;
                }

                // Because we didn't persist all payloads on DOM, we reconstruct from cells
                const offers = rows.map(tr => {
                    const tds = tr.querySelectorAll('td');
                    const dsSupplierId = tr.getAttribute('data-supplier-id');
                    const dsOfficialPrice = tr.getAttribute('data-official-price');
                    const dsUnofficialPrice = tr.getAttribute('data-unofficial-price');
                    const dsQuotedAt = tr.getAttribute('data-quoted-at');
                    return {
                        supplier_id: dsSupplierId ? Number(dsSupplierId) : null,
                        supplier_name: tds[0]?.textContent?.trim() || null,
                        official_price: Number(dsOfficialPrice || '0') || 0,
                        unofficial_price: Number(dsUnofficialPrice || '0') || 0,
                        currency: tds[3]?.textContent?.trim() || 'تومان',
                        grade: tds[4]?.textContent?.trim() || null,
                        conditions: tds[5]?.querySelector('.truncate-cell')?.textContent || null,
                        brand: tds[6]?.textContent?.trim() || null,
                        country: tds[7]?.textContent?.trim() || null,
                        packaging: tds[8]?.textContent?.trim() || null,
                        notes: tds[9]?.querySelector('.truncate-cell')?.textContent || null,
                        quoted_at: dsQuotedAt || new Date().toISOString().split('T')[0],
                    };
                });

                try {
                    const res = await fetch(`{{ route('price.inquiry.finalize') }}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ product_id: productId, product_name: productName, quantity: Number(qty), unit, purchase_type: purchaseType, destination, offers })
                    });
                    const json = await res.json();
                    if (!res.ok || !json.success) {
                        if (window.showErrorModal) {
                            window.showErrorModal(json.message || 'خطا در ثبت درخواست خرید');
                        } else {
                            alert(json.message || 'خطا در ثبت درخواست خرید');
                        }
                        return;
                    }
                    // redirect to price inquiry list to show persisted entry
                    window.location.href = json.redirect || `{{ route('price.inquiry.list') }}`;
                } catch (e) {
                    if (window.showErrorModal) {
                        window.showErrorModal('خطای ارتباط با سرور');
                    } else {
                        alert('خطای ارتباط با سرور');
                    }
                }
            });
        });
</script>
</div>
@endsection