@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@push('styles')
<style>
    #price-inquiry-container .glass { padding: 12px !important; }
    #price-inquiry-container table { width: 100%; border-collapse: separate; border-spacing: 0; }
    #price-inquiry-container thead tr { background: rgba(148,163,184,0.08); }
    #price-inquiry-container th { color: #cbd5e1; font-weight: 600; font-size: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(148,163,184,0.12); white-space: nowrap; }
    #price-inquiry-container td { color: #cbd5e1; font-size: 12px; padding: 12px 14px; vertical-align: middle; }
    #price-inquiry-container tbody tr:hover { background: rgba(255,255,255,0.04); }
    .price-cell { text-align: right; direction: rtl; }
    .supplier-count { background: rgba(59, 130, 246, 0.1); color: #60a5fa; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
    /* 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; }
</style>
@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 pb-4 mb-6">
            <h1 id="page-title" class="text-2xl font-bold text-slate-100">لیست استعلامات قیمت</h1>
            <div class="mt-4 sm:mt-0">
                <a href="{{ route($routePrefix ?? 'price.inquiry') }}" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl glow">افزودن استعلام قیمت</a>
            </div>
        </header>

        <div class="mt-8 pt-6 border-t border-slate-700">
            <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="inquiry-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="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="price-inquiry-container" class="space-y-4"></div>
            <footer class="table-footer">
                <div id="rangeInfo" class="range-info"></div>
                <nav id="pagination" class="pagination"></nav>
            </footer>
        </div>
    </main>
</div>

<script>
// Route prefix for price inquiry
const routePrefix = '{{ $routePrefix ?? 'price.inquiry' }}';

// Helper function to get base URL
function getPriceInquiryBaseUrl() {
    if (routePrefix.includes('purchase')) {
        return '/purchase/price-inquiry';
    } else if (routePrefix.includes('sales')) {
        return '/sales/price-inquiry';
    } else {
        return '/admin/price-inquiry';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;
    let itemsPerPage = 25;
    let searchQuery = '';
    let allInquiries = [];

    // Load price inquiries
    async function loadInquiries() {
        try {
            const response = await fetch(`${getPriceInquiryBaseUrl()}/list/data`);
            const data = await response.json();
            allInquiries = data.inquiries || [];
            renderInquiries();
        } catch (error) {
            console.error('Error loading inquiries:', error);
        }
    }

    // Render inquiries
    function renderInquiries() {
        const container = document.getElementById('price-inquiry-container');
        if (!container) return;

        let filteredInquiries = allInquiries;
        
        // Apply search filter
        if (searchQuery) {
            const query = searchQuery.toLowerCase();
            filteredInquiries = allInquiries.filter(inquiry => {
                // Search in product name
                if (inquiry.product_name && inquiry.product_name.toLowerCase().includes(query)) {
                    return true;
                }
                
                // Search in offers (supplier, brand, country, grade, packaging, prices)
                if (inquiry.offers && Array.isArray(inquiry.offers)) {
                    return inquiry.offers.some(offer => {
                        return (
                            (offer.supplier_name && offer.supplier_name.toLowerCase().includes(query)) ||
                            (offer.brand && offer.brand.toLowerCase().includes(query)) ||
                            (offer.country && offer.country.toLowerCase().includes(query)) ||
                            (offer.grade && offer.grade.toLowerCase().includes(query)) ||
                            (offer.packaging && offer.packaging.toLowerCase().includes(query)) ||
                            (offer.official_price && offer.official_price.toString().includes(query)) ||
                            (offer.unofficial_price && offer.unofficial_price.toString().includes(query))
                        );
                    });
                }
                
                return false;
            });
        }

        // Apply pagination
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = itemsPerPage === 'all' ? filteredInquiries.length : startIndex + itemsPerPage;
        const paginatedInquiries = filteredInquiries.slice(startIndex, endIndex);

        if (paginatedInquiries.length === 0) {
            container.innerHTML = `
                <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>
                                <th class="text-right">عملیات</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/10">
                            <tr>
                                <td colspan="11" class="px-3 py-8 text-center text-slate-400">هیچ استعلام قیمتی یافت نشد</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <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>
                            <th class="text-right">عملیات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        ${paginatedInquiries.map(inquiry => {
                            const formattedDate = new Date(inquiry.created_at).toLocaleDateString('fa-IR');
                            
                            // Check if inquiry has offers
                            if (!inquiry.offers || !Array.isArray(inquiry.offers) || inquiry.offers.length === 0) {
                                return `
                                    <tr>
                                        <td class="px-3 py-2 text-slate-200">${formattedDate}</td>
                                        <td class="px-3 py-2 text-slate-200">${inquiry.product_name || 'نامشخص'}</td>
                                        <td class="px-3 py-2 text-slate-200">${inquiry.formatted_quantity || 'نامشخص'}</td>
                                        <td class="px-3 py-2 text-slate-200">هیچ تامین‌کننده‌ای یافت نشد</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">-</td>
                                        <td class="px-3 py-2 text-slate-200">${formattedDate}</td>
                                        <td class="px-3 py-2 text-slate-200">
                                            <div class="actions" data-id="${inquiry.id}">
                                                <a href="${getPriceInquiryBaseUrl()}/${inquiry.id}" class="btn-action">مشاهده</a>
                                                <a href="${getPriceInquiryBaseUrl()}/${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>
                                `;
                            }
                            
                            // Create a row for each supplier offer
                            return inquiry.offers.map((offer, index) => `
                                <tr>
                                    <td class="px-3 py-2 text-slate-200">${index === 0 ? formattedDate : ''}</td>
                                    <td class="px-3 py-2 text-slate-200">${index === 0 ? (inquiry.product_name || 'نامشخص') : ''}</td>
                                    <td class="px-3 py-2 text-slate-200">${index === 0 ? (inquiry.formatted_quantity || 'نامشخص') : ''}</td>
                                    <td class="px-3 py-2 text-slate-200">${offer.supplier_name || 'نامشخص'}</td>
                                    <td class="px-3 py-2 text-slate-200 price-cell">${offer.official_price ? Number(offer.official_price).toLocaleString() : '-'}</td>
                                    <td class="px-3 py-2 text-slate-200 price-cell">${offer.unofficial_price ? Number(offer.unofficial_price).toLocaleString() : '-'}</td>
                                    <td class="px-3 py-2 text-slate-200">${offer.grade || '-'}</td>
                                    <td class="px-3 py-2 text-slate-200">${offer.brand || '-'}</td>
                                    <td class="px-3 py-2 text-slate-200">${offer.country || '-'}</td>
                                    <td class="px-3 py-2 text-slate-200">${offer.packaging || '-'}</td>
                                    <td class="px-3 py-2 text-slate-200">${index === 0 ? formattedDate : ''}</td>
                                    <td class="px-3 py-2 text-slate-200">
                                        ${index === 0 ? `
                                            <div class="actions" data-id="${inquiry.id}">
                                                <a href="${getPriceInquiryBaseUrl()}/${inquiry.id}" class="btn-action">مشاهده</a>
                                                <a href="${getPriceInquiryBaseUrl()}/${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('')}
                    </tbody>
                </table>
            </div>
        `;

        renderPagination(filteredInquiries.length);
    }

    // Render pagination
    function renderPagination(totalItems) {
        const rangeInfo = document.getElementById('rangeInfo');
        const pagination = document.getElementById('pagination');
        if (!rangeInfo || !pagination) return;

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

        pagination.innerHTML = '';
        if (totalPages <= 1) return;
        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.textContent = i;
            btn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
            btn.dataset.page = i;
            btn.addEventListener('click', function(){ changePage(i); });
            pagination.appendChild(btn);
        }
    }

    // Change page
    window.changePage = function(page) {
        currentPage = page;
        renderInquiries();
    };

    // View inquiry details
    window.viewInquiryDetails = function(inquiryId) {
        const inquiry = allInquiries.find(i => i.id === inquiryId);
        if (!inquiry) return;

        // Create modal for details
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50';
        modal.innerHTML = `
            <div class="bg-slate-800 border border-slate-700 rounded-2xl w-full max-w-4xl p-6 max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold text-white">جزئیات استعلام قیمت: ${inquiry.product_name}</h3>
                    <button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-slate-200 text-xl">×</button>
                </div>
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-slate-700/50 rounded-lg">
                        <div>
                            <div class="text-slate-400 text-sm">محصول</div>
                            <div class="text-white font-semibold">${inquiry.product_name}</div>
                        </div>
                        <div>
                            <div class="text-slate-400 text-sm">مقدار</div>
                            <div class="text-white font-semibold">${inquiry.formatted_quantity}</div>
                        </div>
                        <div>
                            <div class="text-slate-400 text-sm">تاریخ</div>
                            <div class="text-white font-semibold">${new Date(inquiry.created_at).toLocaleDateString('fa-IR')}</div>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-slate-700">
                                <tr>
                                    <th class="px-3 py-2 text-right text-slate-300">تامین‌کننده</th>
                                    <th class="px-3 py-2 text-right text-slate-300">قیمت رسمی</th>
                                    <th class="px-3 py-2 text-right text-slate-300">قیمت غیررسمی</th>
                                    <th class="px-3 py-2 text-right text-slate-300">گرید</th>
                                    <th class="px-3 py-2 text-right text-slate-300">برند</th>
                                    <th class="px-3 py-2 text-right text-slate-300">کشور</th>
                                    <th class="px-3 py-2 text-right text-slate-300">بسته‌بندی</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-600">
                                ${inquiry.offers.map(offer => `
                                    <tr>
                                        <td class="px-3 py-2 text-slate-200">${offer.supplier_name}</td>
                                        <td class="px-3 py-2 text-slate-200 price-cell">${Number(offer.official_price).toLocaleString()}</td>
                                        <td class="px-3 py-2 text-slate-200 price-cell">${Number(offer.unofficial_price).toLocaleString()}</td>
                                        <td class="px-3 py-2 text-slate-200">${offer.grade || '-'}</td>
                                        <td class="px-3 py-2 text-slate-200">${offer.brand || '-'}</td>
                                        <td class="px-3 py-2 text-slate-200">${offer.country || '-'}</td>
                                        <td class="px-3 py-2 text-slate-200">${offer.packaging || '-'}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    };

    // Handle delete button clicks in inquiry list 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 or inquiry data
        const row = deleteBtn.closest('tr');
        let productName = 'این استعلام';
        if (row) {
            const productCell = row.querySelector('td:nth-child(2)'); // Second column is product name
            if (productCell && productCell.textContent.trim()) {
                productName = productCell.textContent.trim();
            } else {
                // Try to get from allInquiries as fallback
                const inquiry = allInquiries.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(`${getPriceInquiryBaseUrl()}/${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 list
                        await loadInquiries();
                        
                        // 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);
                        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(`${getPriceInquiryBaseUrl()}/${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) {
                        loadInquiries();
                        alert('استعلام قیمت با موفقیت حذف شد.');
                    } else {
                        alert(result.message || 'خطا در حذف استعلام قیمت');
                    }
                })
                .catch(error => {
                    console.error('Delete error:', error);
                    alert('خطا در حذف استعلام قیمت');
                });
            }
        }
    });

    // Search functionality with debouncing for better performance
    let searchTimeout;
    document.getElementById('inquiry-search').addEventListener('input', function(e) {
        searchQuery = e.target.value;
        currentPage = 1;
        
        // Show loading indicator
        const container = document.getElementById('price-inquiry-container');
        if (searchQuery && container) {
            container.innerHTML = `
                <div class="glass rounded-2xl p-8 text-center">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                    <p class="mt-4 text-slate-400">در حال جستجو...</p>
                </div>
            `;
        }
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Set new timeout for debouncing (300ms delay)
        searchTimeout = setTimeout(() => {
            renderInquiries();
        }, 300);
    });

    // Items per page
    document.getElementById('items-per-page').addEventListener('change', function(e) {
        itemsPerPage = e.target.value === 'all' ? 'all' : parseInt(e.target.value);
        currentPage = 1;
        renderInquiries();
    });

    // Load initial data
    loadInquiries();

    // Add event listeners for text show buttons
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('pi-show-text')) {
            const title = e.target.getAttribute('data-title');
            const text = e.target.getAttribute('data-text');
            
            // Create modal for showing text
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50';
            modal.innerHTML = `
                <div class="bg-slate-800 border border-slate-700 rounded-2xl w-full max-w-2xl p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-white">${title}</h3>
                        <button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-slate-200 text-xl">×</button>
                    </div>
                    <div class="text-slate-200 whitespace-pre-wrap">${text}</div>
                </div>
            `;
            document.body.appendChild(modal);
        }
    });
});
</script>
@endsection