@extends('layouts.app')

@section('title', 'Verifikasi Pesanan - Pasar Induk Banjarnegara')

@section('content')
<style>
    :root {
        --ink: #212B22;
        --ink-soft: #55604F;
        --paper: #F7F1E3;
        --paper-dark: #EDE1C1;
        --paper-line: #DECEA0;
        --leaf: #3E6B4B;
        --leaf-dark: #24402D;
        --chili: #BD3F0F;
        --turmeric: #D69A2D;
    }

    .verify-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 20px;
        box-shadow: 0 8px 25px -10px rgba(33, 43, 34, 0.1);
        transition: all 0.25s ease;
    }

    .form-input {
        width: 100%;
        background-color: #FFFFFF;
        border: 1px solid var(--paper-line);
        border-radius: 14px;
        padding: 12px 16px;
        font-size: 1rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        letter-spacing: 1.5px;
        transition: all 0.2s ease;
        color: var(--ink);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--leaf);
        box-shadow: 0 0 0 3px rgba(62, 107, 75, 0.15);
    }

    .btn-verify {
        background: var(--turmeric);
        color: var(--ink);
        transition: all 0.2s ease;
        padding: 12px 24px;
        border-radius: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .btn-verify:hover {
        background: #b88322;
        transform: translateY(-1px);
    }

    .btn-camera {
        background: #3E6B4B;
        color: #ffffff;
        transition: all 0.2s ease;
        padding: 12px 20px;
        border-radius: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-camera:hover {
        background: #24402D;
        transform: translateY(-1px);
    }

    .result-card {
        border-radius: 20px;
        animation: slideIn 0.3s ease;
    }

    #qr-reader {
        border: none !important;
        width: 100% !important;
    }

    #qr-reader__scan_region {
        background: rgba(0,0,0,0.05);
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="max-w-4xl mx-auto py-2">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('pedagang.dashboard') }}" class="inline-flex items-center gap-2 text-xs font-semibold text-[#3E6B4B] hover:text-[#24402D] px-3.5 py-1.5 rounded-full border border-[#DECEA0] bg-[#FDFBF5] hover:bg-[#EDE1C1] transition">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Kembali ke Dashboard
        </a>
    </div>

    <!-- Header Chalkboard -->
    <div class="bg-[#212B22] border border-[#3a4436] rounded-2xl p-6 sm:p-8 text-center mb-6 text-[#F7F1E3] shadow-md">
        <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Validasi Transaksi</span>
        <h1 class="text-2xl sm:text-3xl font-bold text-white mt-1 mb-2">Verifikasi Pesanan Pembeli</h1>
        <p class="text-xs sm:text-sm text-[#EDE1C1]/80 max-w-lg mx-auto">Gunakan pemindai kamera, scan barcode fisik, atau masukkan nomor invoice untuk mengonfirmasi pesanan pelanggan.</p>
    </div>

    <!-- Main Card Input & Camera Toggle -->
    <div class="verify-card p-6 sm:p-8 mb-6">
        <div class="flex flex-col gap-4">
            <div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
                <div class="flex-1">
                    <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">
                        Nomor Barcode atau No. Invoice Transaksi
                    </label>
                    <input type="text" id="barcodeInput" 
                        class="form-input" 
                        placeholder="Misal: INV/20260831/XXX atau kode barcode" 
                        autocomplete="off"
                        autofocus>
                </div>
                <div class="flex gap-2">
                    <button type="button" id="btnToggleCamera" onclick="toggleCameraScanner()" 
                        class="btn-camera text-xs shadow-sm flex items-center justify-center gap-2">
                        <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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span id="cameraBtnText">Scan Kamera</span>
                    </button>
                    <button type="button" onclick="verifikasiBarcode()" 
                        class="btn-verify text-xs shadow-sm flex items-center justify-center gap-1.5">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        Verifikasi
                    </button>
                </div>
            </div>

            <!-- CAMERA SCANNER VIEWPORT (HIDDEN BY DEFAULT) -->
            <div id="cameraScannerWrapper" class="hidden mt-3 p-4 bg-[#F4EFE6] border border-[#DECEA0] rounded-2xl">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-ping"></span>
                        <span class="text-xs font-bold text-[#212B22]">Kamera Pemindai Aktif</span>
                    </div>
                    <button type="button" onclick="stopCameraScanner()" class="text-xs text-[#BD3F0F] font-bold hover:underline cursor-pointer">
                        Tutup Kamera
                    </button>
                </div>
                <div id="qr-reader" class="mx-auto max-w-md bg-black rounded-xl overflow-hidden shadow-inner"></div>
                <p class="text-center text-[11px] text-[#55604F] mt-2.5">Arahkan kamera ke barcode atau QR code pada struk/layar pembeli.</p>
            </div>
        </div>
    </div>

    <!-- Result Area -->
    <div id="verifikasiResult" class="hidden"></div>

    <!-- Petunjuk & Indikator Status -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
        <div class="bg-[#FDFBF5] border border-[#DECEA0] rounded-2xl p-5 shadow-sm">
            <h3 class="font-bold text-sm text-[#212B22] mb-2 flex items-center gap-2">
                <svg class="w-4 h-4 text-[#3E6B4B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Petunjuk Verifikasi
            </h3>
            <ul class="text-xs text-[#55604F] space-y-1.5 ml-5 list-disc">
                <li>Gunakan kamera HP atau barcode scanner untuk membaca kode secara cepat</li>
                <li>Anda juga dapat mengetik nomor invoice secara langsung pada kolom input</li>
                <li>Setelah rincian sayur sesuai, klik konfirmasi pembayaran untuk menyelesaikan transaksi</li>
            </ul>
        </div>
        <div class="bg-[#FDFBF5] border border-[#DECEA0] rounded-2xl p-5 shadow-sm">
            <h3 class="font-bold text-sm text-[#212B22] mb-2 flex items-center gap-2">
                <svg class="w-4 h-4 text-[#3E6B4B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Indikator Status Pesanan
            </h3>
            <ul class="text-xs text-[#55604F] space-y-2">
                <li class="flex items-center gap-2">
                    <span class="px-2 py-0.5 rounded-full text-[11px] font-bold bg-[#EDE1C1] text-[#212B22] border border-[#DECEA0]">Pending</span>
                    <span>Menunggu verifikasi dan pembayaran di lapak</span>
                </li>
                <li class="flex items-center gap-2">
                    <span class="px-2 py-0.5 rounded-full text-[11px] font-bold bg-[#DCEAE0] text-[#24402D] border border-[#3E6B4B]/30">Paid</span>
                    <span>Pembayaran telah lunas dikonfirmasi pedagang</span>
                </li>
                <li class="flex items-center gap-2">
                    <span class="px-2 py-0.5 rounded-full text-[11px] font-bold bg-[#3E6B4B] text-white">Completed</span>
                    <span>Sayur pesanan telah diserahkan ke pembeli</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
    let html5QrCode = null;
    let isCameraActive = false;

    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    function toggleCameraScanner() {
        if (isCameraActive) {
            stopCameraScanner();
        } else {
            startCameraScanner();
        }
    }

    function startCameraScanner() {
        const wrapper = document.getElementById('cameraScannerWrapper');
        const btnText = document.getElementById('cameraBtnText');
        wrapper.classList.remove('hidden');
        btnText.innerText = 'Tutup Kamera';
        isCameraActive = true;

        if (!html5QrCode) {
            html5QrCode = new Html5Qrcode("qr-reader");
        }

        const config = { fps: 15, qrbox: { width: 260, height: 180 } };

        html5QrCode.start(
            { facingMode: "environment" },
            config,
            (decodedText) => {
                document.getElementById('barcodeInput').value = decodedText;
                stopCameraScanner();
                verifikasiBarcode(decodedText);
            },
            (errorMessage) => {
                // scanning per frame
            }
        ).catch(err => {
            console.error("Gagal memulai kamera: ", err);
            showToast('Tidak dapat mengakses kamera. Pastikan izin kamera telah diberikan.', 'error');
            stopCameraScanner();
        });
    }

    function stopCameraScanner() {
        const wrapper = document.getElementById('cameraScannerWrapper');
        const btnText = document.getElementById('cameraBtnText');
        if (html5QrCode && html5QrCode.isScanning) {
            html5QrCode.stop().then(() => {
                wrapper.classList.add('hidden');
                btnText.innerText = 'Scan Kamera';
                isCameraActive = false;
            }).catch(err => {
                wrapper.classList.add('hidden');
                btnText.innerText = 'Scan Kamera';
                isCameraActive = false;
            });
        } else {
            wrapper.classList.add('hidden');
            btnText.innerText = 'Scan Kamera';
            isCameraActive = false;
        }
    }

    function verifikasiBarcode(directCode = null) {
        var barcode = directCode ? directCode.trim() : document.getElementById('barcodeInput').value.trim();
        if (!barcode) {
            showToast('Masukkan nomor barcode atau invoice terlebih dahulu!', 'error');
            return;
        }

        const resultDiv = document.getElementById('verifikasiResult');
        resultDiv.innerHTML = `
            <div class="verify-card p-6 sm:p-8 text-center">
                <div class="inline-block w-7 h-7 border-3 border-[#3E6B4B] border-t-transparent rounded-full animate-spin"></div>
                <p class="mt-3 text-xs text-[#55604F] font-medium">Memverifikasi pesanan...</p>
            </div>
        `;
        resultDiv.classList.remove('hidden');

        $.ajax({
            url: '{{ route("pedagang.verify.barcode") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                barcode: barcode
            },
            success: function(response) {
                if (response.success) {
                    let itemsHtml = '';
                    if (response.data.items && response.data.items.length > 0) {
                        itemsHtml = `
                            <div class="mt-4 border-t border-[#DECEA0]/60 pt-3">
                                <div class="text-xs font-bold text-[#212B22] mb-2 uppercase tracking-wider">Rincian Komoditas Dipesan:</div>
                                <div class="space-y-1.5 bg-white/70 rounded-xl p-3 border border-[#DECEA0]/50">
                                    ${response.data.items.map(it => `
                                        <div class="flex justify-between items-center text-xs text-[#212B22]">
                                            <span><strong>${it.nama}</strong> (${it.formatted_qty || (it.qty + ' ' + it.satuan)})</span>
                                            <span class="font-bold text-[#3E6B4B]">Rp ${formatNumber(it.subtotal)}</span>
                                        </div>
                                    `).join('')}
                                </div>
                            </div>
                        `;
                    }

                    resultDiv.innerHTML = `
                        <div class="verify-card p-6 sm:p-7 result-card border-2 border-[#3E6B4B]/40 bg-[#F9FBF8]">
                            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pb-4 border-b border-[#DECEA0]/60">
                                <div>
                                    <span class="text-xs font-bold uppercase tracking-widest text-[#3E6B4B]">Pesanan Ditemukan</span>
                                    <h3 class="text-lg sm:text-xl font-bold text-[#212B22] mt-0.5">${response.data.invoice_number}</h3>
                                    <div class="text-xs text-[#55604F] mt-0.5">${response.data.tanggal || ''}</div>
                                </div>
                                <div>
                                    <span class="px-3 py-1 rounded-full text-xs font-bold ${response.data.status === 'pending' ? 'bg-[#EDE1C1] text-[#212B22] border border-[#DECEA0]' : 'bg-[#DCEAE0] text-[#24402D] border border-[#3E6B4B]/30'}">
                                        Status: ${response.data.status === 'pending' ? 'Menunggu Konfirmasi' : 'Lunas / Selesai'}
                                    </span>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 my-4 text-xs">
                                <div class="bg-white rounded-xl p-3 border border-[#DECEA0]/60">
                                    <span class="text-[#55604F] block text-[11px]">Nama Pembeli</span>
                                    <span class="font-bold text-[#212B22] text-sm mt-0.5 block">${response.data.pembeli_name}</span>
                                </div>
                                <div class="bg-white rounded-xl p-3 border border-[#DECEA0]/60">
                                    <span class="text-[#55604F] block text-[11px]">Total Tagihan</span>
                                    <span class="font-bold text-[#3E6B4B] text-base mt-0.5 block">Rp ${formatNumber(response.data.total_harga)}</span>
                                </div>
                            </div>

                            ${itemsHtml}

                            <div class="mt-6 pt-2">
                                ${response.data.status === 'pending' ? `
                                    <form action="/pedagang/order/${response.data.id}/update" method="POST" onsubmit="showToast('Mengonfirmasi pesanan...', 'success')">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="_method" value="PUT">
                                        <input type="hidden" name="status" value="paid">
                                        <button type="submit" class="w-full bg-[#3E6B4B] hover:bg-[#24402D] text-white px-6 py-3 rounded-xl font-bold text-xs transition shadow-sm cursor-pointer flex items-center justify-center gap-2">
                                            <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="M5 13l4 4L19 7"></path>
                                            </svg>
                                            Konfirmasi Penerimaan Pembayaran
                                        </button>
                                    </form>
                                ` : `
                                    <div class="bg-[#DCEAE0] border border-[#3E6B4B]/30 rounded-xl p-3.5 text-center text-xs font-bold text-[#24402D] flex items-center justify-center gap-2">
                                        <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="M5 13l4 4L19 7"></path>
                                        </svg>
                                        Pesanan ini sudah dikonfirmasi pembayarannya
                                    </div>
                                `}
                            </div>
                        </div>
                    `;
                    showToast('Pesanan ditemukan!', 'success');
                } else {
                    resultDiv.innerHTML = `
                        <div class="verify-card p-6 sm:p-8 result-card border-2 border-[#BD3F0F]/30 bg-[#FDF9F8] text-center">
                            <h3 class="text-base font-bold text-[#BD3F0F] mb-1">Pesanan Tidak Ditemukan</h3>
                            <p class="text-xs text-[#55604F] mb-4">${response.message}</p>
                            <button onclick="resetVerification()" class="bg-[#EDE1C1] hover:bg-[#DECEA0] text-[#212B22] font-bold px-4 py-2 rounded-xl text-xs transition cursor-pointer">
                                Coba Input Ulang
                            </button>
                        </div>
                    `;
                    showToast(response.message, 'error');
                }
            },
            error: function() {
                resultDiv.innerHTML = `
                    <div class="verify-card p-6 sm:p-8 result-card border-2 border-[#BD3F0F]/30 bg-[#FDF9F8] text-center">
                        <h3 class="text-base font-bold text-[#BD3F0F] mb-1">Gagal Menghubungi Server</h3>
                        <p class="text-xs text-[#55604F] mb-4">Pastikan koneksi internet Anda stabil dan coba lagi.</p>
                        <button onclick="resetVerification()" class="bg-[#EDE1C1] hover:bg-[#DECEA0] text-[#212B22] font-bold px-4 py-2 rounded-xl text-xs transition cursor-pointer">
                            Coba Lagi
                        </button>
                    </div>
                `;
                showToast('Terjadi kesalahan koneksi server', 'error');
            }
        });
    }

    function resetVerification() {
        document.getElementById('verifikasiResult').classList.add('hidden');
        document.getElementById('barcodeInput').value = '';
        document.getElementById('barcodeInput').focus();
    }

    document.getElementById('barcodeInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            verifikasiBarcode();
        }
    });
</script>
@endsection