@extends('layouts.authenticated')

@section('title', 'Cetak Barcode & Label')
@section('page-title', 'Cetak Barcode & Label')

@push('styles')
<style>
    /* Selected products */
    .selected-product {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        font-size: 13px;
    }
    .dark .selected-product {
        background: #1e3a5f;
        border-color: #3b82f6;
    }
    .selected-product .remove {
        cursor: pointer;
        color: #ef4444;
        font-weight: bold;
    }
    /* Partner combobox */
    .partner-option {
        width: 100%;
        text-align: left;
        padding: 0.7rem 1rem;
        font-size: 0.875rem;
        color: rgb(15 23 42);
        transition: background-color 0.15s ease;
    }
    .dark .partner-option {
        color: rgb(226 232 240);
    }
    .partner-option:hover,
    .partner-option.active {
        background: #eff6ff;
    }
    .dark .partner-option:hover,
    .dark .partner-option.active {
        background: rgba(29, 78, 216, 0.35);
    }
    .partner-option[hidden] {
        display: none !important;
    }
    .partner-product-item {
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .partner-product-item:hover {
        background: rgb(248 250 252);
    }
    .dark .partner-product-item:hover {
        background: rgb(30 41 59);
    }
    .partner-product-item.selected {
        border-color: rgb(59 130 246);
        background: rgb(239 246 255);
    }
    .dark .partner-product-item.selected {
        border-color: rgb(59 130 246);
        background: rgba(30, 64, 175, 0.22);
    }
</style>
@endpush

@section('page-content')
<div class="space-y-6 animate-fade-in">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Cetak Barcode & Label</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Cari produk dan cetak label barcode</p>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6">
        <form action="{{ route('labels.generate') }}" method="POST" class="space-y-5" id="label-form">
            @csrf

            <!-- Cari Produk atau Mitra -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Cari Produk atau Mitra <span class="text-red-500">*</span></label>
                <div class="relative" id="modal-product-search-wrap">
                    <input
                        type="text"
                        id="modal-direct-product-search"
                        autocomplete="off"
                        placeholder="Ketik nama produk, SKU, barcode, atau nama mitra..."
                        class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white text-sm"
                        oninput="searchProductsDebounced()"
                    >
                    <div id="modal-product-dropdown" class="hidden absolute left-0 right-0 top-full mt-2 z-50 overflow-hidden rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 shadow-lg">
                        <div id="modal-product-options" class="max-h-60 overflow-y-auto py-1">
                            <!-- Autocomplete options will be appended here -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Selected Partner Details Card -->
            <div id="selected-partner-card" class="hidden p-4 bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-800/60 rounded-xl flex items-center justify-between">
                <div>
                    <h4 class="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-1">Mitra Terpilih</h4>
                    <strong class="text-slate-900 dark:text-white" id="selected-partner-name"></strong>
                </div>
                <button type="button" onclick="clearSelectedPartner()" class="px-2.5 py-1 text-xs text-red-600 hover:text-red-700 font-semibold transition-colors">
                    Hapus
                </button>
            </div>

            <!-- Product List for Selected Partner -->
            <div id="partner-product-list-wrapper" class="hidden space-y-2">
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">Pilih Produk Mitra <span class="text-red-500">*</span></label>
                    <p id="partner-products-count" class="text-xs text-slate-500 dark:text-slate-400">0 produk</p>
                </div>
                <input
                    type="text"
                    id="partner-product-search"
                    placeholder="Filter produk mitra ini..."
                    class="w-full px-3 py-2 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-xs text-slate-900 dark:text-white placeholder-slate-400 mb-2"
                    oninput="filterPartnerProducts()"
                >
                <div id="partner-product-list" class="max-h-60 overflow-y-auto space-y-2 border border-gray-200 dark:border-slate-700 rounded-lg p-3 bg-slate-50/50 dark:bg-slate-900/10 grid grid-cols-1 md:grid-cols-2 gap-3">
                    <!-- Checkbox options will be loaded here -->
                </div>
            </div>

            <!-- Produk Terpilih -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Produk Terpilih</label>
                <div id="selected-products" class="flex flex-wrap gap-2 min-h-[40px] p-2 border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700/30">
                    <p class="text-sm text-slate-400 italic" id="no-products">Belum ada produk dipilih</p>
                </div>
                <input type="hidden" name="product_ids" id="product-ids-input">
            </div>

            <!-- Jumlah Label -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Jumlah Label per Produk</label>
                <input type="number" name="quantity" value="10" min="1" max="350" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Maksimal 350 label per produk.</p>
            </div>

            <!-- Tagline -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tagline (Opsional)</label>
                <input type="text" name="notes" value="Berdo'a lah sebelum makan/minum" placeholder="Berdo'a lah sebelum makan/minum" maxlength="100" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
            </div>

            <!-- Jenis Barcode -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Jenis Barcode</label>
                <select name="barcode_type" id="barcode-type" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                    <option value="QR" selected>QR Code</option>
                    <option value="CODE128">CODE128</option>
                </select>
            </div>

            <!-- Ukuran Kertas -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Ukuran Kertas</label>
                <select name="paper_size" id="paper-size" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                    <option value="30x40" selected>30mm x 40mm (Label Kecil, Landscape)</option>
                    <option value="50x30">50mm x 30mm (Label Sedang)</option>
                    <option value="60x40">60mm x 40mm (Label Besar)</option>
                    <option value="80x50">80mm x 50mm (Label Extra)</option>
                    <option value="A4">A4 (Kertas Biasa)</option>
                </select>
            </div>

            <button type="submit" id="submit-btn" disabled class="w-full px-4 py-2.5 bg-gray-400 text-white font-medium rounded-lg transition-colors cursor-not-allowed">
                Pilih produk terlebih dahulu
            </button>
        </form>
    </div>
</div>

<script>
const allPartners = @json($partners);
let selectedProducts = new Map();
let searchTimeout = null;
let activeIndex = -1;

function searchProductsDebounced() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(performSearch, 300);
}

function getVisibleOptions() {
    const optionsContainer = document.getElementById('modal-product-options');
    if (!optionsContainer) return [];
    return Array.from(optionsContainer.querySelectorAll('button'));
}

function updateActiveOption() {
    const options = getVisibleOptions();
    options.forEach((opt, idx) => {
        if (idx === activeIndex) {
            opt.classList.add('active');
            opt.scrollIntoView({ block: 'nearest' });
        } else {
            opt.classList.remove('active');
        }
    });
}

function performSearch() {
    const searchInput = document.getElementById('modal-direct-product-search');
    const dropdown = document.getElementById('modal-product-dropdown');
    const optionsContainer = document.getElementById('modal-product-options');

    if (!searchInput || !dropdown || !optionsContainer) return;

    const query = searchInput.value.trim().toLowerCase();
    if (query.length < 2) {
        dropdown.classList.add('hidden');
        optionsContainer.innerHTML = '';
        activeIndex = -1;
        return;
    }

    optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-slate-500 italic">Mencari...</div>';
    dropdown.classList.remove('hidden');
    activeIndex = -1;

    // Filter partners client-side
    const matchingPartners = allPartners.filter(p => p.name.toLowerCase().includes(query));

    // Fetch matching products
    fetch(`/daily-stocks/search?query=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(data => {
            activeIndex = -1;
            const products = (data.success && data.products) ? data.products : [];

            if (matchingPartners.length === 0 && products.length === 0) {
                optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-red-500">Hasil tidak ditemukan!</div>';
                return;
            }

            let partnerItemsHtml = '';
            if (matchingPartners.length > 0) {
                partnerItemsHtml = matchingPartners.map(p => `
                    <button
                        type="button"
                        class="partner-option cursor-pointer bg-emerald-500/5 dark:bg-emerald-500/10 border-l-4 border-emerald-500 text-left w-full px-4 py-2.5 text-sm"
                        onclick="selectPartner('${p.id}', '${p.name.replace(/'/g, "\\'")}')"
                    >
                        <div class="flex justify-between items-center w-full">
                            <div>
                                <div class="font-semibold text-emerald-700 dark:text-emerald-400 text-sm text-left">${p.name}</div>
                                <div class="text-[10px] text-slate-400 text-left">Pilih mitra untuk melihat semua produknya</div>
                            </div>
                            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300 uppercase">Mitra</span>
                        </div>
                    </button>
                `).join('');
            }

            let productItemsHtml = '';
            if (products.length > 0) {
                productItemsHtml = products.map(p => `
                    <button
                        type="button"
                        class="partner-option cursor-pointer text-left w-full px-4 py-2.5 text-sm"
                        onclick="selectProductDirectly('${p.id}', '${p.name.replace(/'/g, "\\'")}', '${p.barcode || ''}', ${p.price || 0}, '${p.partner_name.replace(/'/g, "\\'")}')"
                    >
                        <div class="flex justify-between items-center w-full">
                            <div>
                                <div class="font-medium text-slate-900 dark:text-white text-sm text-left">${p.name}</div>
                                <div class="text-xs text-slate-500 text-left">Mitra: ${p.partner_name}</div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">${p.barcode || p.sku || '-'}</span>
                            </div>
                        </div>
                    </button>
                `).join('');
            }

            optionsContainer.innerHTML = partnerItemsHtml + productItemsHtml;
        })
        .catch(err => {
            optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-red-500">Terjadi kesalahan pencarian!</div>';
            console.error('Modal search fetch error:', err);
        });
}

function selectProductDirectly(id, name, barcode, price, partnerName) {
    const added = addProduct(id, name, barcode, price, partnerName);
    if (added) {
        const dropdown = document.getElementById('modal-product-dropdown');
        const searchInput = document.getElementById('modal-direct-product-search');
        if (dropdown) dropdown.classList.add('hidden');
        if (searchInput) searchInput.value = '';
    }
}

function selectPartner(id, name) {
    const dropdown = document.getElementById('modal-product-dropdown');
    const searchInput = document.getElementById('modal-direct-product-search');
    if (dropdown) dropdown.classList.add('hidden');
    if (searchInput) searchInput.value = '';

    // Set Partner Card details
    document.getElementById('selected-partner-name').textContent = name;
    document.getElementById('selected-partner-card').classList.remove('hidden');

    // Load products for this partner
    loadPartnerProducts(id);
}

function clearSelectedPartner() {
    document.getElementById('selected-partner-card').classList.add('hidden');
    document.getElementById('partner-product-list-wrapper').classList.add('hidden');
    document.getElementById('partner-product-list').innerHTML = '';
    document.getElementById('modal-direct-product-search').value = '';
}

function loadPartnerProducts(partnerId) {
    const productList = document.getElementById('partner-product-list');
    const wrapper = document.getElementById('partner-product-list-wrapper');
    const countEl = document.getElementById('partner-products-count');

    if (!productList || !wrapper) return;

    productList.innerHTML = '<div class="px-2 py-3 text-xs text-slate-500 italic col-span-full">Memuat produk mitra...</div>';
    wrapper.classList.remove('hidden');
    if (countEl) countEl.textContent = 'Memuat...';

    fetch(`/labels/products/${partnerId}`)
        .then(res => res.json())
        .then(products => {
            if (products.length === 0) {
                productList.innerHTML = '<div class="px-2 py-3 text-xs text-slate-500 italic col-span-full">Tidak ada produk untuk mitra ini</div>';
                if (countEl) countEl.textContent = '0 produk';
                return;
            }

            productList.innerHTML = products.map(p => {
                const productId = parseInt(p.id);
                const isSelected = selectedProducts.has(productId);
                return `
                    <label class="partner-product-item flex items-start gap-3 p-3 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded-lg cursor-pointer ${isSelected ? 'selected' : ''}"
                           data-product-id="${productId}"
                           data-search-key="${(p.name + ' ' + (p.barcode || '')).toLowerCase()}">
                        <input type="checkbox" class="product-checkbox mt-1 w-4 h-4 text-blue-600 rounded border-gray-300 dark:border-slate-600" ${isSelected ? 'checked' : ''}
                            data-product-id="${p.id}"
                            data-product-name="${p.name.replace(/'/g, "\\'")}"
                            data-product-barcode="${p.barcode || ''}"
                            data-product-price="${p.price || 0}"
                            data-partner-name="${p.partner ? p.partner.name.replace(/'/g, "\\'") : ''}"
                        >
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-slate-900 dark:text-white truncate">${p.name}</p>
                            <p class="text-xs text-slate-500">Rp ${parseInt(p.price || 0).toLocaleString('id-ID')}</p>
                            <code class="text-xs text-slate-400 font-mono">${p.barcode || '-'}</code>
                        </div>
                    </label>
                `;
            }).join('');

            if (countEl) countEl.textContent = `${products.length} produk`;

            // Add change listener to radio buttons
            productList.querySelectorAll('.product-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', (event) => {
                    const dataset = event.target.dataset;
                    const item = event.target.closest('.partner-product-item');
                    if (checkbox.checked) {
                        addProduct(dataset.productId, dataset.productName, dataset.productBarcode, dataset.productPrice, dataset.partnerName);
                        if (item) item.classList.add('selected');
                    } else {
                        removeProduct(dataset.productId);
                        if (item) item.classList.remove('selected');
                    }
                });
            });
        })
        .catch(err => {
            productList.innerHTML = '<div class="px-2 py-3 text-xs text-red-500 col-span-full">Gagal memuat produk</div>';
            if (countEl) countEl.textContent = 'Gagal memuat';
            console.error('Error loading partner products:', err);
        });
}

function filterPartnerProducts() {
    const query = document.getElementById('partner-product-search')?.value.trim().toLowerCase() || '';
    const items = document.querySelectorAll('#partner-product-list .partner-product-item');
    
    items.forEach(item => {
        const key = item.getAttribute('data-search-key') || '';
        if (query === '' || key.includes(query)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}

// Add product to selected list
function addProduct(id, name, barcode, price, partnerName = '') {
    id = parseInt(id);
    if (selectedProducts.has(id)) {
        return false; // Already added
    }

    selectedProducts.set(id, { name, barcode, price, partnerName });
    
    // Toggle active state in the partner product list DOM if currently loaded
    const item = document.querySelector(`#partner-product-list .partner-product-item[data-product-id="${id}"]`);
    if (item) {
        item.classList.add('selected');
        const checkbox = item.querySelector('.product-checkbox');
        if (checkbox) checkbox.checked = true;
    }

    renderSelectedProducts();
    updateSubmitButton();
    return true;
}

// Remove product from selected list
function removeProduct(id) {
    id = parseInt(id);
    selectedProducts.delete(id);
    
    // Toggle active state in the partner product list DOM if currently loaded
    const item = document.querySelector(`#partner-product-list .partner-product-item[data-product-id="${id}"]`);
    if (item) {
        item.classList.remove('selected');
        const checkbox = item.querySelector('.product-checkbox');
        if (checkbox) checkbox.checked = false;
    }

    renderSelectedProducts();
    updateSubmitButton();
}

// Render selected products
function renderSelectedProducts() {
    const container = document.getElementById('selected-products');

    if (selectedProducts.size === 0) {
        container.innerHTML = '<p class="text-sm text-slate-400 italic">Belum ada produk dipilih</p>';
    } else {
        container.innerHTML = Array.from(selectedProducts.entries()).map(([id, product]) => `
            <div class="selected-product">
                <div class="min-w-0">
                    <span class="block truncate max-w-[150px] font-medium">${product.name}</span>
                    <span class="block text-[10px] text-slate-400 truncate max-w-[150px]">${product.partnerName || 'Semua mitra'}</span>
                </div>
                <span class="text-xs text-slate-400 whitespace-nowrap">Rp ${parseInt(product.price || 0).toLocaleString('id-ID')}</span>
                <span class="remove" data-id="${id}" title="Hapus">✕</span>
            </div>
        `).join('');

        // Add remove handlers
        container.querySelectorAll('.remove').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                removeProduct(this.dataset.id);
            });
        });
    }

    // Update hidden input
    document.getElementById('product-ids-input').value = JSON.stringify(Array.from(selectedProducts.keys()));
}

// Update submit button state
function updateSubmitButton() {
    const submitBtn = document.getElementById('submit-btn');

    if (selectedProducts.size === 0) {
        submitBtn.disabled = true;
        submitBtn.className = 'w-full px-4 py-2.5 bg-gray-400 text-white font-medium rounded-lg transition-colors cursor-not-allowed';
        submitBtn.textContent = 'Pilih produk terlebih dahulu';
    } else {
        submitBtn.disabled = false;
        submitBtn.className = 'w-full px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors';
        submitBtn.textContent = `Generate Label (${selectedProducts.size} produk)`;
    }
}

// Form submission handler
document.getElementById('label-form').addEventListener('submit', function(e) {
    if (selectedProducts.size === 0) {
        e.preventDefault();
        alert('Silakan pilih produk terlebih dahulu!');
        return false;
    }
});

// Setup key listeners on direct search input
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('modal-direct-product-search');
    const dropdown = document.getElementById('modal-product-dropdown');
    const wrap = document.getElementById('modal-product-search-wrap');

    if (searchInput) {
        searchInput.addEventListener('keydown', (e) => {
            const options = getVisibleOptions();
            if (options.length === 0 || dropdown.classList.contains('hidden')) {
                return;
            }

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                activeIndex = (activeIndex + 1) % options.length;
                updateActiveOption();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                activeIndex = (activeIndex - 1 + options.length) % options.length;
                updateActiveOption();
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (activeIndex >= 0 && activeIndex < options.length) {
                    options[activeIndex].click();
                }
            } else if (e.key === 'Escape') {
                dropdown.classList.add('hidden');
            }
        });

        searchInput.addEventListener('focus', () => {
            if (searchInput.value.trim().length >= 2) {
                dropdown.classList.remove('hidden');
            }
        });
    }

    document.addEventListener('click', (e) => {
        if (wrap && !wrap.contains(e.target) && dropdown) {
            dropdown.classList.add('hidden');
        }
    });
});
</script>
@endsection