@extends('layouts.authenticated')

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

@php
    $paperDimensions = [
        '30x40' => ['width' => 30, 'height' => 40, 'label' => '30mm x 40mm'],
        '50x30' => ['width' => 50, 'height' => 30, 'label' => '50mm x 30mm'],
        '60x40' => ['width' => 60, 'height' => 40, 'label' => '60mm x 40mm'],
        '80x50' => ['width' => 80, 'height' => 50, 'label' => '80mm x 50mm'],
    ];
    $currentPaper = $paperDimensions[$paperSize] ?? $paperDimensions['30x40'];
    $paperWidth = $currentPaper['width'];
    $paperHeight = $currentPaper['height'];
    $paperLabel = $currentPaper['label'];
@endphp

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
@endpush

@section('page-content')
<div class="space-y-6 animate-fade-in">
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6 print:hidden">
        <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Cetak Barcode & Label Thermal</h1>
        <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Ukuran: {{ $paperLabel }} - Direct Thermal 1 line</p>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6 print:hidden">
        <form id="barcode-form" class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Pilih Mitra</label>
                <select id="partner-select" 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="">-- Pilih Mitra --</option>
                    @foreach($partners as $partner)
                    <option value="{{ $partner->id }}">{{ $partner->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Pilih Produk</label>
                <div id="product-list" class="space-y-2 max-h-60 overflow-y-auto">
                    <p class="text-sm text-slate-500 italic">Pilih mitra terlebih dahulu untuk menampilkan produk</p>
                </div>
            </div>

            <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" id="quantity" 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">
            </div>

            <button type="button" id="preview-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 id="print-area" class="hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6 print:hidden">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Preview Label</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">Siap cetak - Ukuran {{ $paperLabel }}</p>
                </div>
                <div class="flex gap-3">
                    <button onclick="backToForm()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors text-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                        Kembali
                    </button>
                    <button onclick="printLabels()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors text-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                        Cetak Label
                    </button>
                </div>
            </div>
        </div>

        <div id="labels-container" class="bg-white rounded-xl border border-gray-200 p-6 print:border-none print:p-0">
            <!-- Labels akan di-generate di sini -->
        </div>
    </div>
</div>

<style>
    .thermal-label {
        width: {{ $paperWidth }}mm;
        height: {{ $paperHeight }}mm;
        padding: 1.5mm 1.6mm;
        margin: 0 auto 2mm auto;
        background: #fff;
        border: 1px dashed #d1d5db;
        page-break-inside: avoid;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.2mm;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

    .thermal-label .label-main {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .thermal-label .logo-container {
        display: flex;
        align-items: center;
        gap: 1mm;
        margin-bottom: 0.6mm;
        min-height: 4mm;
        overflow: hidden;
    }

    .thermal-label .logo-container img.store-logo {
        max-height: 4mm;
        max-width: 18mm;
        object-fit: contain;
    }

    .thermal-label .logo-container .store-name {
        font-size: 6pt;
        font-weight: 700;
        color: #1e293b;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .thermal-label .product-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1.2mm;
        min-width: 0;
    }

    .thermal-label .product-name {
        font-size: 8pt;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.1;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .thermal-label .price {
        font-size: 8.5pt;
        font-weight: 800;
        color: #2563eb;
        line-height: 1;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .thermal-label .barcode-block {
        flex: 0 0 14mm;
        width: 14mm;
        min-width: 14mm;
        max-width: 14mm;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .thermal-label .barcode-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.25mm;
    }

    .thermal-label .barcode-container > div {
        width: 12mm;
        height: 8mm;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .thermal-label .barcode-container > div svg,
    .thermal-label .barcode-container > div canvas,
    .thermal-label .barcode-container > div img {
        width: 12mm !important;
        height: 8mm !important;
    }

    .thermal-label .barcode-fallback {
        font-size: 4pt;
        color: #111827;
        font-family: monospace;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .thermal-label .barcode-number {
        font-size: 4.4pt;
        color: #6b7280;
        font-family: monospace;
        text-align: center;
        line-height: 1;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @page {
        size: {{ $paperWidth }}mm {{ $paperHeight }}mm;
        margin: 0;
    }

    @media print {
        html, body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: visible !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        body * {
            visibility: hidden;
        }

        #labels-container,
        #labels-container * {
            visibility: visible;
        }

        aside, header, footer, .print\\:hidden {
            display: none !important;
        }

        #labels-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 0;
            margin: 0;
            border: none;
        }

        .thermal-label {
            border: none;
            margin: 0;
            padding: 1.5mm 1.6mm;
            width: {{ $paperWidth }}mm;
            height: {{ $paperHeight }}mm;
            box-sizing: border-box;
            display: flex;
            page-break-after: always;
            break-after: page;
            page-break-inside: avoid;
        }

        .thermal-label:last-child {
            page-break-after: auto;
        }

        .thermal-label .product-name {
            font-size: 7.6pt !important;
            max-width: 100% !important;
        }

        .thermal-label .price {
            font-size: 7.8pt !important;
        }

        .thermal-label .barcode-block {
            width: 14mm !important;
            min-width: 14mm !important;
            max-width: 14mm !important;
        }

        .thermal-label .barcode-container > div {
            width: 12mm !important;
            height: 12mm !important;
        }

        .thermal-label .barcode-number {
            font-size: 3.8pt !important;
        }
    }
</style>

<script>
function normalizeBarcodeText(barcode) {
    return (barcode || '').replace(/^ABBA/i, '');
}

document.getElementById('partner-select').addEventListener('change', function() {
    const partnerId = this.value;
    const productList = document.getElementById('product-list');
    const previewBtn = document.getElementById('preview-btn');

    if (!partnerId) {
        productList.innerHTML = '<p class="text-sm text-slate-500 italic">Pilih mitra terlebih dahulu untuk menampilkan produk</p>';
        previewBtn.disabled = true;
        previewBtn.className = 'w-full px-4 py-2.5 bg-gray-400 text-white font-medium rounded-lg transition-colors cursor-not-allowed';
        previewBtn.textContent = 'Pilih produk terlebih dahulu';
        return;
    }

    productList.innerHTML = '<p class="text-sm text-slate-500 italic">Memuat produk...</p>';

    fetch(`/labels/products/${partnerId}`)
        .then(res => res.json())
        .then(products => {
            if (products.length === 0) {
                productList.innerHTML = '<p class="text-sm text-slate-500 italic">Tidak ada produk untuk mitra ini</p>';
                previewBtn.disabled = true;
                previewBtn.className = 'w-full px-4 py-2.5 bg-gray-400 text-white font-medium rounded-lg transition-colors cursor-not-allowed';
                previewBtn.textContent = 'Tidak ada produk';
                return;
            }

            productList.innerHTML = products.map(p => `
                <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
                    <input type="checkbox" name="product_ids[]" value="${p.id}" data-name="${p.name}" data-price="${p.price || 0}" data-barcode="${p.barcode || ''}" class="w-4 h-4 text-blue-600 rounded product-checkbox">
                    <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>
                    </div>
                    <code class="text-xs text-slate-400 font-mono">${p.barcode || '-'}</code>
                </label>
            `).join('');

            previewBtn.disabled = false;
            previewBtn.className = 'w-full px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors';
            previewBtn.textContent = 'Preview Label';

            document.querySelectorAll('.product-checkbox').forEach(cb => {
                cb.addEventListener('change', updatePreviewButton);
            });
        })
        .catch(err => {
            productList.innerHTML = '<p class="text-sm text-red-500">Gagal memuat produk</p>';
            console.error(err);
        });
});

function updatePreviewButton() {
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    const previewBtn = document.getElementById('preview-btn');

    if (checkboxes.length === 0) {
        previewBtn.disabled = true;
        previewBtn.className = 'w-full px-4 py-2.5 bg-gray-400 text-white font-medium rounded-lg transition-colors cursor-not-allowed';
        previewBtn.textContent = 'Pilih minimal 1 produk';
    } else {
        previewBtn.disabled = false;
        previewBtn.className = 'w-full px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors';
        previewBtn.textContent = `Preview Label (${checkboxes.length} produk)`;
    }
}

document.getElementById('preview-btn').addEventListener('click', function() {
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    if (checkboxes.length === 0) return;

    const quantity = parseInt(document.getElementById('quantity').value) || 10;
    const container = document.getElementById('labels-container');
    container.innerHTML = '';

    checkboxes.forEach((cb, idx) => {
        const name = cb.dataset.name;
        const price = parseInt(cb.dataset.price) || 0;
        const barcode = cb.dataset.barcode || '';

        for (let i = 0; i < quantity; i++) {
            const labelDiv = document.createElement('div');
            labelDiv.className = 'thermal-label';
            labelDiv.innerHTML = `
                <div class="label-main">
                    <div id="logo-container-${idx}-${i}" class="logo-container"></div>
                    <div class="product-row">
                        <div class="product-name">${name}</div>
                        <div class="price">Rp ${price.toLocaleString('id-ID')}</div>
                    </div>
                </div>
                <div class="barcode-block">
                    <div class="barcode-container" id="barcode-container-${idx}-${i}"></div>
                    <div class="barcode-number">${normalizeBarcodeText(barcode)}</div>
                </div>
            `;
            container.appendChild(labelDiv);
        }
    });

    setTimeout(() => {
        checkboxes.forEach((cb, idx) => {
            const barcode = cb.dataset.barcode;
            const quantity = parseInt(document.getElementById('quantity').value) || 10;

            for (let i = 0; i < quantity; i++) {
                const barcodeContainer = document.getElementById(`barcode-container-${idx}-${i}`);
                if (barcodeContainer && barcode) {
                    try {
                        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                        svg.classList.add('barcode-svg');
                        barcodeContainer.innerHTML = '';
                        barcodeContainer.appendChild(svg);

                        JsBarcode(svg, barcode, {
                            format: 'CODE128',
                            width: 1.1,
                            height: 28,
                            displayValue: false,
                            margin: 0,
                            background: '#ffffff',
                            lineColor: '#000000'
                        });
                    } catch (e) {
                        console.error('Barcode generation failed for:', barcode, e);
                        barcodeContainer.innerHTML = `<div class="barcode-fallback">${normalizeBarcodeText(barcode)}</div>`;
                    }
                }
            }
        });
    }, 100);

    document.getElementById('print-area').classList.remove('hidden');
    document.querySelector('#barcode-form').closest('.bg-white').classList.add('hidden');

    const logoUrl = @json($logoUrl);
    const storeName = @json($storeName);
    loadLogoAndInsert(logoUrl, storeName);
});

function loadLogoAndInsert(logoUrl, storeName) {
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    const quantity = parseInt(document.getElementById('quantity').value) || 10;

    if (logoUrl) {
        checkboxes.forEach((cb, idx) => {
            for (let i = 0; i < quantity; i++) {
                const logoContainer = document.getElementById(`logo-container-${idx}-${i}`);
                if (logoContainer) {
                    const img = document.createElement('img');
                    img.src = logoUrl;
                    img.alt = 'Store Logo';
                    img.className = 'store-logo';
                    logoContainer.appendChild(img);
                }
            }
        });
    } else {
        checkboxes.forEach((cb, idx) => {
            for (let i = 0; i < quantity; i++) {
                const logoContainer = document.getElementById(`logo-container-${idx}-${i}`);
                if (logoContainer && logoContainer.children.length === 0) {
                    logoContainer.innerHTML = `<div class="store-name">${storeName}</div>`;
                }
            }
        });
    }
}

function backToForm() {
    document.getElementById('print-area').classList.add('hidden');
    document.querySelector('#barcode-form').closest('.bg-white').classList.remove('hidden');
}

function printLabels() {
    window.print();
}
</script>
@endsection