@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">🛒 Catat Pembelian Stok</h1>
            <p class="text-gray-600 mt-1">Tambah stok barang baru atau restock barang lama.</p>
        </div>

        <form action="{{ route('purchases.store') }}" method="POST" id="purchaseForm" class="space-y-6">
            @csrf
            
            {{-- Header Card --}}
            <div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Date --}}
                    <div>
                        <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pembelian</label>
                        <input type="date" name="date" id="date" value="{{ old('date', date('Y-m-d')) }}" required
                               class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm">
                    </div>

                    {{-- Transaction Code --}}
                    <div>
                        <label for="transaction_code" class="block text-sm font-medium text-gray-700 mb-1">Kode Transaksi</label>
                        <input type="text" name="transaction_code" id="transaction_code" value="{{ $transactionCode }}" readonly
                               class="w-full rounded-lg border-gray-200 bg-gray-100 text-gray-500 shadow-sm cursor-not-allowed">
                    </div>

                    {{-- Supplier --}}
                    <div>
                        <label for="supplier_id" class="block text-sm font-medium text-gray-700 mb-1">Supplier (Opsional)</label>
                        <div class="relative">
                            <select name="supplier_id" id="supplier_id" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm appearance-none">
                                <option value="">-- Pilih Supplier --</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                @endforeach
                            </select>

                        </div>
                    </div>

                    {{-- Note --}}
                    <div>
                        <label for="note" class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
                        <input type="text" name="note" id="note" placeholder="Contoh: Titipan gudang"
                               class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm">
                    </div>
                </div>
            </div>

            {{-- Items Card --}}
            <div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-gray-900">Daftar Barang</h2>
                    <button type="button" onclick="addItemRow()" class="px-3 py-1.5 bg-indigo-50 text-indigo-700 text-sm font-medium rounded-lg hover:bg-indigo-100 transition-colors">
                        + Tambah Baris
                    </button>
                </div>

                <div class="mb-4 rounded-lg border border-indigo-100 bg-indigo-50/60 p-3">
                    <label for="purchase-barcode-input" class="block text-sm font-medium text-gray-700 mb-1">Scan Barcode Produk</label>
                    <div class="flex">
                        <input type="text" id="purchase-barcode-input" class="w-full rounded-l-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="Scan barcode lalu tekan Enter">
                        <button type="button" onclick="openPurchaseScannerModal()" class="rounded-r-lg border border-l-0 border-gray-300 bg-white px-4 text-sm font-medium text-gray-700 hover:bg-gray-50">
                            Scan
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Produk yang sama akan otomatis menambah qty di baris yang sudah ada.</p>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200" id="itemsTable">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-5/12">Produk</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-2/12">Qty</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/12">Harga Beli Satuan</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-3/12">Subtotal</th>
                                <th class="px-4 py-3 text-center w-1/12"></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="itemsContainer">
                            {{-- Rows will be added here by JS --}}
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <td colspan="3" class="px-4 py-3 text-right font-bold text-gray-700">Total Pembelian:</td>
                                <td class="px-4 py-3 text-right font-bold text-indigo-700" id="grandTotal">Rp 0</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                <a href="{{ route('purchases.index') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    Batal
                </a>
                <button type="submit" class="px-6 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                    Simpan Pembelian
                </button>
            </div>
        </form>
    </div>
</div>

<div id="purchase-scanner-modal" class="fixed inset-0 bg-black bg-opacity-75 hidden flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg p-4 w-full max-w-md">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-lg font-semibold text-gray-900">Scan Barcode Produk</h3>
            <button type="button" onclick="closePurchaseScannerModal()" class="text-gray-500 hover:text-gray-700">Tutup</button>
        </div>
        <div id="purchase-reader" class="overflow-hidden rounded-lg"></div>
    </div>
</div>

{{-- Product List Data for JS --}}
<script>
    const PRODUCTS = @json($products->map(function($p){
        return ['id' => $p->id, 'name' => $p->name, 'barcode' => $p->barcode, 'purchase_price' => $p->purchase_price];
    }));
</script>

@push('scripts')
<script>
    let rowIndex = 0;
    let purchaseScanner = null;

    function formatRupiah(amount) {
        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(amount);
    }

    function addItemRow() {
        const container = document.getElementById('itemsContainer');
        const rowId = `row-${rowIndex}`;
        
        // Generate Options for Select
        let productOptions = '<option value="">-- Pilih Produk --</option>';
        PRODUCTS.forEach(p => {
            productOptions += `<option value="${p.id}" data-price="${p.purchase_price}">${p.name}</option>`;
        });

        const tr = document.createElement('tr');
        tr.id = rowId;
        tr.className = 'hover:bg-gray-50 transition-colors';
        tr.innerHTML = `
            <td class="px-4 py-3">
                <select name="items[${rowIndex}][product_id]" class="product-select w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" onchange="updatePrice(this, '${rowId}')" required>
                    ${productOptions}
                </select>
            </td>
            <td class="px-4 py-3">
                <input type="number" name="items[${rowIndex}][quantity]" class="qty-input w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="1" min="1" oninput="calculateRow('${rowId}')" required>
            </td>
            <td class="px-4 py-3">
                <div class="relative rounded-md shadow-sm">
                    <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
                        <span class="text-gray-500 sm:text-xs">Rp</span>
                    </div>
                    <input type="number" name="items[${rowIndex}][unit_cost]" class="price-input w-full pl-12 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="0" min="0" oninput="calculateRow('${rowId}')" required>
                </div>
            </td>
            <td class="px-4 py-3 text-right font-medium text-gray-900 subtotal-display" id="subtotal-${rowId}">
                Rp 0
            </td>
            <td class="px-4 py-3 text-center">
                <button type="button" onclick="removeRow('${rowId}')" class="text-red-500 hover:text-red-700">
                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                </button>
            </td>
        `;
        
        container.appendChild(tr);
        rowIndex++;
    }

    function findProductByBarcode(barcode) {
        const normalized = String(barcode || '').trim();
        if (!normalized) return null;
        return PRODUCTS.find(product => String(product.barcode || '').trim() === normalized);
    }

    function selectProductInRow(row, product) {
        const select = row.querySelector('.product-select');
        const qtyInput = row.querySelector('.qty-input');
        select.value = product.id;
        updatePrice(select, row.id);
        qtyInput.focus();
        qtyInput.select();
    }

    function addProductByBarcode(barcode) {
        const product = findProductByBarcode(barcode);
        const input = document.getElementById('purchase-barcode-input');

        if (!product) {
            Swal.fire({ icon: 'error', title: 'Produk Tidak Ditemukan', text: `Barcode ${barcode} belum ada di data produk.` });
            return;
        }

        const existingRow = Array.from(document.querySelectorAll('#itemsContainer tr')).find(row => {
            return row.querySelector('.product-select')?.value == product.id;
        });

        if (existingRow) {
            const qtyInput = existingRow.querySelector('.qty-input');
            qtyInput.value = (parseInt(qtyInput.value, 10) || 0) + 1;
            calculateRow(existingRow.id);
            qtyInput.focus();
            qtyInput.select();
        } else {
            const emptyRow = Array.from(document.querySelectorAll('#itemsContainer tr')).find(row => {
                return !row.querySelector('.product-select')?.value;
            });
            const targetRow = emptyRow || (() => {
                addItemRow();
                return document.querySelector('#itemsContainer tr:last-child');
            })();
            selectProductInRow(targetRow, product);
        }

        input.value = '';
        Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: `${product.name} ditambahkan`, timer: 1200, showConfirmButton: false });
    }

    function removeRow(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
            calculateGrandTotal();
        }
    }

    function updatePrice(selectElement, rowId) {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const price = selectedOption.getAttribute('data-price') || 0;
        
        // Find price input in the same row
        const row = document.getElementById(rowId);
        const priceInput = row.querySelector('.price-input');
        priceInput.value = parseInt(price);
        
        calculateRow(rowId);
    }

    function calculateRow(rowId) {
        const row = document.getElementById(rowId);
        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
        const price = parseFloat(row.querySelector('.price-input').value) || 0;
        const subtotal = qty * price;

        row.querySelector('.subtotal-display').innerText = formatRupiah(subtotal);
        row.querySelector('.subtotal-display').setAttribute('data-val', subtotal);
        
        calculateGrandTotal();
    }

    function calculateGrandTotal() {
        let total = 0;
        document.querySelectorAll('.subtotal-display').forEach(el => {
            total += parseFloat(el.getAttribute('data-val') || 0);
        });
        document.getElementById('grandTotal').innerText = formatRupiah(total);
    }

    // Add initial row
    document.addEventListener('DOMContentLoaded', () => {
        addItemRow();

        document.getElementById('purchase-barcode-input')?.addEventListener('keydown', event => {
            if (event.key === 'Enter') {
                event.preventDefault();
                addProductByBarcode(event.target.value);
            }
        });
    });

    function openPurchaseScannerModal() {
        if (typeof Html5Qrcode === 'undefined' || typeof Html5QrcodeSupportedFormats === 'undefined') {
            Swal.fire({ icon: 'error', title: 'Scanner Belum Siap', text: 'Library scanner barcode gagal dimuat. Coba refresh halaman.' });
            return;
        }

        document.getElementById('purchase-scanner-modal').classList.remove('hidden');
        if (purchaseScanner) return;

        purchaseScanner = new Html5Qrcode('purchase-reader');
        purchaseScanner.start(
            { facingMode: 'environment' },
            {
                fps: 10,
                qrbox: { width: 250, height: 250 },
                formatsToSupport: [
                    Html5QrcodeSupportedFormats.CODE_128,
                    Html5QrcodeSupportedFormats.EAN_13,
                    Html5QrcodeSupportedFormats.UPC_A,
                    Html5QrcodeSupportedFormats.UPC_E,
                    Html5QrcodeSupportedFormats.CODE_39,
                    Html5QrcodeSupportedFormats.EAN_8,
                    Html5QrcodeSupportedFormats.QR_CODE
                ]
            },
            decodedText => {
                addProductByBarcode(decodedText);
                closePurchaseScannerModal();
            },
            () => {}
        ).catch(() => {
            Swal.fire({ icon: 'error', title: 'Gagal Membuka Kamera', text: 'Pastikan izin kamera diberikan dan gunakan HTTPS.' });
            closePurchaseScannerModal();
        });
    }

    function closePurchaseScannerModal() {
        if (purchaseScanner) {
            purchaseScanner.stop().finally(() => {
                purchaseScanner = null;
                document.getElementById('purchase-scanner-modal').classList.add('hidden');
            });
        } else {
            document.getElementById('purchase-scanner-modal').classList.add('hidden');
        }
    }
</script>
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
@endpush
@endsection