@extends('layouts.admin')

@section('title', 'Upload Laporan - Report Admin')

@push('styles')
<style>
    .import-card:hover { box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12); }
    .import-card .card-header { border-bottom: 2px solid #6366f1; }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Upload Laporan</h1>
        <p class="text-sm text-gray-500 mt-1">Upload laporan settlement dari Shopee, TikTok, dan Lazada</p>
    </div>

    <!-- Single Import Card -->
    <div class="import-card bg-white rounded-xl border shadow-sm transition-all max-w-2xl" id="importCard">
        <div class="card-header flex items-center gap-3 p-5">
            <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center flex-shrink-0">
                <span class="material-symbols-outlined text-indigo-600 text-lg" id="platformIcon">upload</span>
            </div>
            <div>
                <h3 class="font-semibold text-gray-900">Upload Laporan</h3>
                <p class="text-xs text-gray-500" id="platformHint">Pilih platform dan toko untuk memulai</p>
            </div>
        </div>

        <div class="p-5 space-y-4">
            <!-- Platform + Store Dropdowns -->
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Platform</label>
                    <select id="platformSelect" onchange="onPlatformChange()" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400">
                        <option value="">-- Pilih Platform --</option>
                        <option value="shopee">Shopee</option>
                        <option value="tiktok">TikTok</option>
                        <option value="lazada">Lazada</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Toko</label>
                    <select id="storeSelect" onchange="onStoreChange()" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400">
                        <option value="">-- Pilih Toko --</option>
                        @foreach($stores as $store)
                            <option value="{{ $store->id }}">{{ $store->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Fee Summary -->
            <div id="feeSummary" class="hidden p-3 bg-gray-50 rounded-lg">
                <p class="text-xs font-medium text-gray-500 mb-2">Fee per Platform</p>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs" id="feeSummaryGrid"></div>
            </div>

            <!-- File Input -->
            <div class="mt-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">File Order Completed / Income Settlement</label>
                    <div class="relative">
                        <input type="file" id="orderFile" accept=".xlsx,.xls" class="hidden" onchange="updateFileName(this, 'orderFileName')">
                        <label for="orderFile" class="flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors text-sm">
                            <span class="material-symbols-outlined text-gray-400 text-lg">attach_file</span>
                            <span id="orderFileName" class="text-gray-500 truncate">Pilih file...</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex gap-2">
                <button onclick="doPreview()" id="previewBtn" disabled class="flex-1 px-4 py-2 rounded-lg border border-indigo-300 text-indigo-700 text-sm font-medium hover:bg-indigo-50 flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent">
                    <span class="material-symbols-outlined text-lg">preview</span>
                    Preview
                </button>
                <button onclick="showConfirmModal()" id="importBtn" disabled class="flex-1 px-4 py-2 rounded-lg bg-indigo-500 text-white text-sm font-medium hover:bg-indigo-600 flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-indigo-500">
                    <span class="material-symbols-outlined text-lg">upload</span>
                    Import
                </button>
            </div>

            <!-- Status -->
            <div id="importStatus" class="hidden rounded-lg p-3 text-sm"></div>

            <!-- Preview Section -->
            <div id="previewSection" class="hidden">
                <div class="text-xs text-gray-500 mb-2" id="previewSummary"></div>
                <div class="overflow-x-auto max-h-48 border border-gray-200 rounded-lg">
                    <table class="w-full text-left text-xs">
                        <thead class="bg-gray-50 text-gray-500 uppercase sticky top-0">
                            <tr>
                                <th class="px-3 py-2 font-semibold">Order ID</th>
                                <th class="px-3 py-2 font-semibold">SKU</th>
                                <th class="px-3 py-2 font-semibold text-right">Qty</th>
                                <th class="px-3 py-2 font-semibold text-right">Revenue</th>
                                <th class="px-3 py-2 font-semibold text-right">Fee %</th>
                                <th class="px-3 py-2 font-semibold">HPP</th>
                            </tr>
                        </thead>
                        <tbody id="previewBody" class="divide-y divide-gray-100"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Import History -->
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-900">Riwayat Import</h3>
            <p class="text-sm text-gray-500">{{ $importHistory->count() }} import terakhir</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                        <th class="px-4 py-3 font-semibold">File</th>
                        <th class="px-4 py-3 font-semibold">Toko</th>
                        <th class="px-4 py-3 font-semibold">Platform</th>
                        <th class="px-4 py-3 font-semibold">Periode</th>
                        <th class="px-4 py-3 font-semibold text-right">Total</th>
                        <th class="px-4 py-3 font-semibold text-right">Imported</th>
                        <th class="px-4 py-3 font-semibold text-right">Skipped</th>
                        <th class="px-4 py-3 font-semibold">Status</th>
                        <th class="px-4 py-3 font-semibold">Tanggal</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @forelse($importHistory as $history)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium text-gray-900 max-w-[220px] truncate">{{ $history->file_name }}</td>
                        <td class="px-4 py-3">
                            @if($history->store)
                                <span class="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-semibold rounded border border-blue-100">{{ $history->store->name }}</span>
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 capitalize">{{ $history->platform }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $history->period ?? '-' }}</td>
                        <td class="px-4 py-3 text-right font-medium">{{ $history->total_rows > 0 ? number_format($history->total_rows) : '-' }}</td>
                        <td class="px-4 py-3 text-right">{{ $history->imported_rows > 0 ? number_format($history->imported_rows) : '-' }}</td>
                        <td class="px-4 py-3 text-right text-gray-500">{{ $history->skipped_rows > 0 ? number_format($history->skipped_rows) : '-' }}</td>
                        <td class="px-4 py-3">
                            @if($history->status == 'completed')
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Completed</span>
                            @elseif($history->status == 'processing')
                                <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">Processing</span>
                            @elseif($history->status == 'failed')
                                <span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-semibold rounded-full">Failed</span>
                            @else
                                <span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs font-semibold rounded-full">Pending</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-500 whitespace-nowrap">{{ $history->created_at->format('d M Y H:i') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-12 text-center">
                            <span class="material-symbols-outlined text-5xl text-gray-300">upload_file</span>
                            <p class="mt-3 text-gray-500">Belum ada file yang diimport</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Confirm Modal -->
<div id="confirmModal" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black/50 transition-opacity" onclick="closeConfirmModal()"></div>
    <div class="relative flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden">
            <div class="p-5 flex items-start gap-3">
                <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <span class="material-symbols-outlined text-indigo-600 text-xl">upload</span>
                </div>
                <div class="flex-1">
                    <h3 id="confirmModalTitle" class="text-lg font-semibold text-gray-900">Konfirmasi Import</h3>
                    <p id="confirmModalMessage" class="text-sm text-gray-600 mt-1"></p>
                    <div id="confirmModalSummary" class="mt-2 p-2 bg-gray-50 rounded-lg text-xs text-gray-600 hidden"></div>
                </div>
                <button onclick="closeConfirmModal()" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 flex-shrink-0">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="p-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-2">
                <button onclick="closeConfirmModal()" id="cancelImportBtn" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-white">Batal</button>
                <button onclick="executeImport()" id="confirmImportBtn" class="px-4 py-2 rounded-lg bg-indigo-500 text-white text-sm font-medium hover:bg-indigo-600 flex items-center gap-2">
                    <span id="confirmImportSpinner" class="hidden">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.878 3 8.291l2-2.001z"></path>
                        </svg>
                    </span>
                    <span id="confirmImportLabel">Import</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- HPP Modal -->
<div id="hppModal" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black/50 transition-opacity" onclick="closeHppModal()"></div>
    <div class="relative flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl overflow-hidden">
            <div class="p-5 bg-amber-50 border-b border-amber-200 flex items-start justify-between gap-4">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0">
                        <span class="material-symbols-outlined text-amber-600">warning</span>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">Produk Belum Ada HPP</h3>
                        <p class="text-sm text-gray-600 mt-0.5">
                            <span id="hppModalCount">0</span> produk/SKU belum memiliki HPP.
                        </p>
                    </div>
                </div>
                <button onclick="closeHppModal()" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="overflow-x-auto max-h-80">
                <table class="w-full text-left text-sm">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase sticky top-0">
                        <tr>
                            <th class="px-4 py-3 font-semibold">SKU</th>
                            <th class="px-4 py-3 font-semibold">Nama Produk</th>
                            <th class="px-4 py-3 font-semibold text-right">Order</th>
                            <th class="px-4 py-3 font-semibold text-right">Qty</th>
                        </tr>
                    </thead>
                    <tbody id="hppModalBody" class="divide-y divide-gray-100"></tbody>
                </table>
            </div>
            <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row justify-end gap-2">
                <button onclick="closeHppModal()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-white">Nanti Saja</button>
                <a href="{{ route('admin.products', ['hpp' => 'missing']) }}" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 text-center flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Lengkapi HPP Sekarang
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const csrfToken = '{{ csrf_token() }}';
let previewCache = {};
let selectedPlatform = '';
let selectedStore = '';
let storeFeeCache = {};

const platformConfig = {
    shopee: { label: 'Shopee', icon: 'shopping_cart', dualFile: true, hint: 'Upload file Order Completed + Income Settlement' },
    tiktok: { label: 'TikTok', icon: 'music_note', dualFile: false, hint: 'Upload file Income / Settlement TikTok' },
    lazada: { label: 'Lazada', icon: 'store', dualFile: false, hint: 'Upload file Income / Settlement Lazada' }
};

function onPlatformChange() {
    selectedPlatform = document.getElementById('platformSelect').value;
    clearFiles();
    updateUI();
    if (selectedPlatform && selectedStore) loadStoreFee();
}

function onStoreChange() {
    selectedStore = document.getElementById('storeSelect').value;
    clearFiles();
    updateUI();
    if (selectedPlatform && selectedStore) loadStoreFee();
}

function clearFiles() {
    document.getElementById('orderFile').value = '';
    document.getElementById('orderFileName').textContent = 'Pilih file...';
    document.getElementById('previewSection').classList.add('hidden');
    previewCache = {};
}

function loadStoreFee() {
    if (!selectedStore) return;
    if (storeFeeCache[selectedStore]) { renderFeeSummary(storeFeeCache[selectedStore]); return; }
    fetch(`/admin/settings/store-fee/${selectedStore}`, {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
    })
    .then(r => r.ok ? r.json() : null)
    .then(data => {
        if (data && data.fees) {
            storeFeeCache[selectedStore] = data.fees;
            renderFeeSummary(data.fees);
        }
    })
    .catch(() => {});
}

function renderFeeSummary(fees) {
    const p = selectedPlatform;
    const f = fees[p] || {};
    const adminPct = parseFloat(f.admin_fee_percent || 0);
    const svcPct = parseFloat(f.service_fee_percent || 0);
    const otherPct = parseFloat(f.other_fee_percent || 0);
    const transFee = parseFloat(f.transaction_fee || 0);
    const totalPct = adminPct + svcPct + otherPct;

    document.getElementById('feeSummaryGrid').innerHTML = `
        <div><span class="font-medium text-gray-700">Admin</span><br><span class="text-indigo-600 font-bold">${adminPct}%</span></div>
        <div><span class="font-medium text-gray-700">Service</span><br><span class="text-indigo-600 font-bold">${svcPct}%</span></div>
        <div><span class="font-medium text-gray-700">Lainnya</span><br><span class="text-indigo-600 font-bold">${otherPct}%</span></div>
        <div><span class="font-medium text-gray-700">Trans. Fee</span><br><span class="text-indigo-600 font-bold">${transFee > 0 ? 'Rp ' + transFee.toLocaleString('id-ID') : '-'}</span></div>
        <div><span class="font-medium text-gray-700">Total Fee</span><br><span class="text-indigo-600 font-bold">${totalPct}%</span></div>
    `;
    document.getElementById('feeSummary').classList.remove('hidden');
}

function updateUI() {
    const previewBtn = document.getElementById('previewBtn');
    const importBtn = document.getElementById('importBtn');
    previewBtn.disabled = true;
    importBtn.disabled = true;

    if (!selectedPlatform) {
        document.getElementById('platformIcon').textContent = 'upload';
        document.getElementById('platformHint').textContent = 'Pilih platform dan toko untuk memulai';
        return;
    }

    const cfg = platformConfig[selectedPlatform];
    document.getElementById('platformIcon').textContent = cfg.icon;
    document.getElementById('platformHint').textContent = cfg.hint;

    if (selectedStore) {
        previewBtn.disabled = false;
    }
}

function updateFileName(input, targetId) {
    document.getElementById(targetId).textContent = input.files[0]?.name || 'Pilih file...';
}

async function doPreview() {
    if (!selectedPlatform) { alert('Pilih platform terlebih dahulu.'); return; }
    if (!selectedStore) { alert('Pilih toko terlebih dahulu.'); return; }
    let orderFile = document.getElementById('orderFile').files[0];
    if (!orderFile) { alert('Pilih file terlebih dahulu.'); return; }

    const previewBtn = document.getElementById('previewBtn');
    const importBtn = document.getElementById('importBtn');
    previewBtn.disabled = true;
    importBtn.disabled = true;

    const formData = new FormData();
    formData.append('store_id', selectedStore);
    formData.append('order_file', orderFile);

    const endpoints = {
        shopee: '{{ route("admin.import.preview-shopee") }}',
        tiktok: '{{ route("admin.import.preview-tiktok") }}',
        lazada: '{{ route("admin.import.preview-lazada") }}'
    };

    try {
        const res = await fetch(endpoints[selectedPlatform], {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: formData
        });
        const data = await res.json();
        if (data.success) {
            previewCache = { store_id: selectedStore, order_file: orderFile, preview: data.preview };
            renderPreview(data.preview);
            importBtn.disabled = false;
        } else {
            showStatus(data.message || 'Gagal membaca file', 'error');
        }
    } catch (e) {
        showStatus('Terjadi kesalahan: ' + e.message, 'error');
    } finally {
        previewBtn.disabled = false;
    }
}

function renderPreview(data) {
    document.getElementById('previewSection').classList.remove('hidden');
    const totalFeePct = data.total_fee_pct || 0;
    document.getElementById('previewSummary').textContent =
        `${data.total_orders || 0} orders • Revenue: Rp ${(data.total_revenue || 0).toLocaleString('id-ID')} • Fee: ${totalFeePct}% ≈ Rp ${(data.total_fee_estimate || 0).toLocaleString('id-ID')}`;

    document.getElementById('previewBody').innerHTML = (data.orders_sample || []).map(row => `
        <tr class="${row.has_error ? 'bg-red-50' : ''}">
            <td class="px-3 py-2 font-mono text-gray-900 text-xs">${row.order_id || '-'}</td>
            <td class="px-3 py-2 text-gray-700 text-xs">${row.sku || '-'}</td>
            <td class="px-3 py-2 text-right text-gray-700 text-xs">${row.quantity || 0}</td>
            <td class="px-3 py-2 text-right text-gray-700 text-xs font-medium">${(row.revenue || 0).toLocaleString('id-ID')}</td>
            <td class="px-3 py-2 text-right text-gray-700 text-xs">${(row.fee_pct || 0)}%</td>
            <td class="px-3 py-2 text-xs">${row.hpp > 0 ? '<span class="text-green-600">Rp ' + row.hpp.toLocaleString('id-ID') + '</span>' : '<span class="text-red-400">-</span>'}</td>
        </tr>
    `).join('');
}

function showStatus(message, type) {
    const el = document.getElementById('importStatus');
    el.classList.remove('hidden');
    const cls = type === 'success' ? 'bg-green-50 text-green-700 border-green-200'
        : type === 'error' ? 'bg-red-50 text-red-700 border-red-200'
        : 'bg-blue-50 text-blue-700 border-blue-200';
    el.className = `rounded-lg p-3 text-sm border ${cls}`;
    el.innerHTML = message;
}

function showConfirmModal() {
    if (!previewCache.preview) { alert('Lakukan preview terlebih dahulu.'); return; }
    const storeName = document.querySelector('#storeSelect option[value="' + selectedStore + '"]').textContent;
    document.getElementById('confirmModalTitle').textContent = `Import ke ${storeName}?`;
    document.getElementById('confirmModalMessage').textContent = `Akan mengimport data ${platformConfig[selectedPlatform].label} untuk toko ${storeName}. Data duplikat akan otomatis dilewati.`;
    const summary = document.getElementById('previewSummary').textContent;
    document.getElementById('confirmModalSummary').textContent = summary;
    document.getElementById('confirmModalSummary').classList.remove('hidden');
    document.getElementById('confirmModal').classList.remove('hidden');
}

function closeConfirmModal() { document.getElementById('confirmModal').classList.add('hidden'); }

async function executeImport() {
    if (!selectedPlatform) { alert('Pilih platform terlebih dahulu.'); return; }
    if (!selectedStore) { alert('Pilih toko terlebih dahulu.'); return; }
    if (!previewCache.preview) { closeConfirmModal(); alert('Lakukan preview terlebih dahulu.'); return; }

    // Loading state on modal buttons
    const cancelBtn = document.getElementById('cancelImportBtn');
    const confirmBtn = document.getElementById('confirmImportBtn');
    const confirmSpinner = document.getElementById('confirmImportSpinner');
    const confirmLabel = document.getElementById('confirmImportLabel');
    cancelBtn.disabled = true;
    confirmBtn.disabled = true;
    confirmSpinner.classList.remove('hidden');
    confirmLabel.textContent = 'Mengimport...';

    const formData = new FormData();
    formData.append('store_id', previewCache.store_id);
    formData.append('order_file', previewCache.order_file);

    const endpoints = {
        shopee: '{{ route("admin.import.execute-shopee") }}',
        tiktok: '{{ route("admin.import.execute-tiktok") }}',
        lazada: '{{ route("admin.import.execute-lazada") }}'
    };

    try {
        const res = await fetch(endpoints[selectedPlatform], {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: formData
        });
        const data = await res.json();
        if (data.success) {
            const d = data.data || {};
            const missingCount = d.missing_hpp_count || 0;
            showStatus(
                `<span class="material-symbols-outlined text-green-600 align-middle mr-1">check_circle</span> Import berhasil! ${d.imported_rows || 0} baris diimport, ${d.skipped_rows || 0} dilewati${missingCount > 0 ? ` • <span class="font-semibold text-amber-700">${missingCount} produk belum ada HPP</span>` : ''}`,
                'success'
            );
            if (missingCount > 0) showHppModal(d.missing_hpp || [], missingCount);
            else setTimeout(() => window.location.reload(), 2000);
        } else {
            showStatus(`<span class="material-symbols-outlined text-red-600 align-middle mr-1">error</span> ${data.message || 'Import gagal'}`, 'error');
        }
    } catch (e) {
        showStatus(`Terjadi kesalahan: ${e.message}`, 'error');
    } finally {
        closeConfirmModal();
        cancelBtn.disabled = false;
        confirmBtn.disabled = false;
        confirmSpinner.classList.add('hidden');
        confirmLabel.textContent = 'Import';
    }
}

function showHppModal(list, count) {
    document.getElementById('hppModalCount').textContent = count;
    document.getElementById('hppModalBody').innerHTML = list.map(item => `
        <tr class="hover:bg-amber-50/50">
            <td class="px-4 py-2 font-mono text-gray-900">${item.sku || '<span class="text-gray-400">-</span>'}</td>
            <td class="px-4 py-2 text-gray-900">${item.product_name || '-'}</td>
            <td class="px-4 py-2 text-right text-gray-700">${item.orders}</td>
            <td class="px-4 py-2 text-right text-gray-700">${item.total_qty}</td>
        </tr>
    `).join('');
    document.getElementById('hppModal').classList.remove('hidden');
}

function closeHppModal() {
    document.getElementById('hppModal').classList.add('hidden');
    window.location.reload();
}
</script>
@endpush