QuoteForge/web/templates/pricelist_detail.html

{{define "title"}}QFS Прайслист{{end}}

{{define "content"}}
<div class="space-y-6">
    <div class="flex items-center space-x-4">
        <a href="/projects" class="text-gray-500 hover:text-gray-700" title="Все проекты">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9.75L12 3l9 6.75v9A2.25 2.25 0 0118.75 21h-13.5A2.25 2.25 0 013 18.75v-9z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 21v-6h6v6"></path>
            </svg>
        </a>
        <h1 id="page-title" class="text-2xl font-bold text-gray-900">Загрузка...</h1>
    </div>

    <div id="pricelist-info" class="bg-white rounded-lg shadow p-6">
        <div id="pl-notification" class="hidden mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-800"></div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <p class="text-sm text-gray-500">Версия</p>
                <p id="pl-version" class="font-mono">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Дата создания</p>
                <p id="pl-date">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Автор</p>
                <p id="pl-author">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Позиций</p>
                <p id="pl-items">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Использований</p>
                <p id="pl-usage">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Статус</p>
                <p id="pl-status">-</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Истекает</p>
                <p id="pl-expires">-</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="p-4 border-b">
            <input type="text" id="search-input" placeholder="Поиск по артикулу..."
                   class="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Артикул</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Категория</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Описание</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Цена, $</th>
                    <th class="px-6 py-3 w-6" title="Качество цены"></th>
                </tr>
            </thead>
            <tbody id="items-body" class="bg-white divide-y divide-gray-200">
                <tr>
                    <td colspan="7" class="px-6 py-4 text-center text-gray-500">Загрузка...</td>
                </tr>
            </tbody>
        </table>

        <div id="items-pagination" class="p-4 border-t flex justify-between items-center">
            <span id="items-info" class="text-sm text-gray-500"></span>
            <div id="items-pages" class="space-x-2"></div>
        </div>
    </div>
</div>

<script>
    const pricelistId = window.location.pathname.split('/').pop();
    let currentPage = 1;
    let searchQuery = '';
    let searchTimeout = null;
    let currentSource = '';

    async function loadPricelistInfo() {
        try {
            const resp = await fetch(`/api/pricelists/${pricelistId}`);
            if (!resp.ok) throw new Error('Pricelist not found');

            const pl = await resp.json();
            currentSource = pl.source || '';

            document.getElementById('page-title').textContent = `Прайслист ${pl.version}`;
            document.getElementById('pl-version').textContent = pl.version;
            document.getElementById('pl-date').textContent = new Date(pl.created_at).toLocaleDateString('ru-RU');
            document.getElementById('pl-author').textContent = pl.created_by || '-';
            document.getElementById('pl-items').textContent = pl.item_count;
            document.getElementById('pl-usage').textContent = pl.usage_count;

            // Show notification if present and pricelist is active
            const notificationEl = document.getElementById('pl-notification');
            if (pl.notification && pl.is_active) {
                notificationEl.textContent = pl.notification;
                notificationEl.classList.remove('hidden');
            } else {
                notificationEl.classList.add('hidden');
            }

            const statusClass = pl.is_active ? 'text-green-600' : 'text-gray-600';
            document.getElementById('pl-status').innerHTML = `<span class="${statusClass}">${pl.is_active ? 'Активен' : 'Неактивен'}</span>`;

            if (pl.expires_at) {
                document.getElementById('pl-expires').textContent = new Date(pl.expires_at).toLocaleDateString('ru-RU');
            } else {
                document.getElementById('pl-expires').textContent = '-';
            }
        } catch (e) {
            document.getElementById('page-title').textContent = 'Ошибка';
            showToast('Прайслист не найден', 'error');
        }
    }

    async function loadItems(page = 1) {
        currentPage = page;
        try {
            let url = `/api/pricelists/${pricelistId}/items?page=${page}&per_page=50`;
            if (searchQuery) {
                url += `&search=${encodeURIComponent(searchQuery)}`;
            }

            const resp = await fetch(url);
            const data = await resp.json();
            currentSource = data.source || currentSource;

            renderItems(data.items || []);
            renderItemsPagination(data.total_count, data.page, data.per_page);
        } catch (e) {
            document.getElementById('items-body').innerHTML = `
                <tr>
                    <td colspan="${itemsColspan()}" class="px-6 py-4 text-center text-red-500">
                        Ошибка загрузки: ${e.message}
                    </td>
                </tr>
            `;
        }
    }

    function isStockSource() {
        const src = (currentSource || '').toLowerCase();
        return src === 'warehouse' || src === 'competitor';
    }

    function isWarehouseSource() {
        return (currentSource || '').toLowerCase() === 'warehouse';
    }

    function itemsColspan() {
        return 5;
    }

    function escapeHtml(text) {
        if (text === null || text === undefined) return '';
        return String(text)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function renderItems(items) {
        if (items.length === 0) {
            document.getElementById('items-body').innerHTML = `
                <tr>
                    <td colspan="${itemsColspan()}" class="px-6 py-4 text-center text-gray-500">
                        ${searchQuery ? 'Ничего не найдено' : 'Позиции не найдены'}
                    </td>
                </tr>
            `;
            return;
        }

        const stock = isStockSource();
        const p = stock ? 'px-3 py-2' : 'px-6 py-3';
        const descMax = stock ? 30 : 60;

        const html = items.map(item => {
            const price = item.price.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            const description = item.lot_description || '-';
            const truncatedDesc = description.length > descMax ? description.substring(0, descMax) + '...' : description;



            // Price cell — add spread badge for competitor
            let priceHtml = price;
            if (!isWarehouseSource() && item.price_spread_pct > 0) {
                priceHtml += ` <span class="text-xs text-amber-600 font-medium" title="Разброс цен конкурентов">±${item.price_spread_pct.toFixed(0)}%</span>`;
            }

            return `
                <tr class="hover:bg-gray-50">
                    <td class="${p} max-w-[160px]">
                        <span class="font-mono text-sm break-all">${escapeHtml(item.lot_name)}</span>
                    </td>
                    <td class="${p} whitespace-nowrap">
                        <span class="px-2 py-1 text-xs bg-gray-100 rounded">${escapeHtml(item.category || '-')}</span>
                    </td>
                    <td class="${p} text-sm text-gray-500" title="${escapeHtml(description)}">${escapeHtml(truncatedDesc)}</td>
                    <td class="${p} whitespace-nowrap text-right font-mono">${priceHtml}</td>
                    <td class="${p} whitespace-nowrap text-center">${qualityBadgeHtml(item.price_quality)}</td>
                </tr>
            `;
        }).join('');

        document.getElementById('items-body').innerHTML = html;
    }

    function renderItemsPagination(total, page, perPage) {
        const totalPages = Math.ceil(total / perPage);
        const start = (page - 1) * perPage + 1;
        const end = Math.min(page * perPage, total);

        document.getElementById('items-info').textContent = `${start}-${end} из ${total}`;

        if (totalPages <= 1) {
            document.getElementById('items-pages').innerHTML = '';
            return;
        }

        let html = '';

        // Previous button
        if (page > 1) {
            html += `<button onclick="loadItems(${page - 1})" class="px-2 py-1 text-sm text-gray-600 hover:text-gray-900">&larr;</button>`;
        }

        // Page numbers (show max 5 pages)
        const startPage = Math.max(1, page - 2);
        const endPage = Math.min(totalPages, startPage + 4);

        for (let i = startPage; i <= endPage; i++) {
            const activeClass = i === page ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50';
            html += `<button onclick="loadItems(${i})" class="px-3 py-1 text-sm rounded border ${activeClass}">${i}</button>`;
        }

        // Next button
        if (page < totalPages) {
            html += `<button onclick="loadItems(${page + 1})" class="px-2 py-1 text-sm text-gray-600 hover:text-gray-900">&rarr;</button>`;
        }

        document.getElementById('items-pages').innerHTML = html;
    }

    document.getElementById('search-input').addEventListener('input', function(e) {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchQuery = e.target.value.trim();
            loadItems(1);
        }, 300);
    });

    document.addEventListener('DOMContentLoaded', function() {
        loadPricelistInfo();
        loadItems(1);
    });
</script>
{{end}}

{{template "base" .}}