@extends('layouts.master')
@php
    $fromProses = $fromProses ?? false;
    $pfx = $fromProses ? 'proses-pengiriman' : 'permintaan-pengeluaran';
@endphp

@section('title', 'Verifikasi Fisik Barang — ' . $ppb->nomor)

@section('styles')
<style>
    #tblLots thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; font-size:.82rem; }
    #tblLots tbody td { border:1px solid #f0e8ff; vertical-align:middle; padding:6px 8px; font-size:.85rem; }
    .chip { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.78rem; font-weight:500; }
    .chip-unverified { background:#f3f4f6; color:#6b7280; border:1px solid #d1d5db; }
    .chip-verified-ai { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
    .chip-verified-manual { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
    .confidence-high   { color:#065f46; font-weight:600; }
    .confidence-medium { color:#854d0e; font-weight:600; }
    .confidence-low    { color:#991b1b; font-weight:600; }
    .foto-thumb { width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #dee2e6;cursor:pointer; }
    .foto-item { position:relative;display:inline-block;margin:4px; }
    .foto-item .btn-hapus { position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#dc3545;color:#fff;border:none;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Verifikasi Fisik Barang</p>
            <span class="fs-13 text-muted">Gudang &rarr; Permintaan Mutasi &rarr; {{ $ppb->nomor }} &rarr; Verifikasi</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            <a href="{{ route("$pfx.show", $ppb->id) }}" class="btn btn-secondary btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    {{-- Info PPB --}}
    <div class="card custom-card mb-3">
        <div class="card-header"><div class="card-title mb-0">Informasi Permintaan</div></div>
        <div class="card-body py-2">
            <table class="table table-sm table-borderless mb-0" style="font-size:.875rem">
                <tr><td class="text-muted" style="width:140px">Nomor</td><td>: <strong>{{ $ppb->nomor }}</strong></td></tr>
                <tr><td class="text-muted">Tanggal</td><td>: {{ $ppb->tanggal->translatedFormat('d F Y') }}</td></tr>
                <tr><td class="text-muted">Faskes / Tujuan</td><td>: {{ $ppb->nama_faskes ?? '—' }}</td></tr>
                <tr><td class="text-muted">Diproses Oleh</td><td>: {{ $ppb->diprosesOleh?->nama ?? '—' }}</td></tr>
            </table>
        </div>
    </div>

    {{-- Tabel Lot --}}
    <div class="card custom-card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div class="card-title mb-0">Daftar Lot yang Harus Diverifikasi</div>
            <div class="d-flex gap-2">
                <span id="progressBadge" class="badge bg-secondary d-inline-flex align-items-center" style="font-size:.82rem;padding:5px 10px;line-height:1">0 / {{ count($allLots) }} terverifikasi</span>
                <button type="button" class="btn btn-outline-primary btn-sm px-2 py-1" onclick="openVerifOverlay()">
                    <i class="bx bx-camera me-1"></i> Scan Kamera
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tblLots" class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width:36px">No</th>
                            <th>Barang</th>
                            <th style="width:110px">No Lot</th>
                            <th style="width:110px">No Serial</th>
                            <th style="width:100px">Kedaluwarsa</th>
                            <th class="text-center" style="width:60px">Qty</th>
                            <th style="width:160px">Status Verifikasi</th>
                            <th class="text-center" style="width:130px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyLots"></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Foto Pengiriman --}}
    <div class="card custom-card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div class="card-title mb-0"><i class="bx bx-image me-2"></i>Foto Pengiriman</div>
            <label for="manualFotoInput" class="btn btn-outline-primary btn-sm px-2 py-1 mb-0" style="cursor:pointer">
                <i class="bx bx-upload me-1"></i> Upload Foto
                <input type="file" id="manualFotoInput" accept="image/*" style="display:none" multiple onchange="uploadManualFoto(this)">
            </label>
        </div>
        <div class="card-body">
            <div id="fotoContainer" class="d-flex flex-wrap align-items-center gap-2">
                @forelse($ppb->fotos as $foto)
                <div class="foto-item" id="fotoItem_{{ $foto->id }}">
                    <img src="{{ $foto->url }}" class="foto-thumb" onclick="window.open('{{ $foto->url }}','_blank')">
                    <button class="btn-hapus" onclick="hapusFoto({{ $foto->id }})" title="Hapus foto">&times;</button>
                </div>
                @empty
                <span class="text-muted fs-13" id="fotoEmpty"><i class="bx bx-info-circle me-1"></i>Belum ada foto.</span>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Action Bar --}}
    <div class="card custom-card">
        <div class="card-body py-3 d-flex align-items-center justify-content-between">
            <div id="statusInfo" class="text-muted fs-13">
                <i class="bx bx-info-circle me-1"></i> Scan semua lot untuk mengaktifkan tombol konfirmasi.
            </div>
            <form method="POST" action="{{ route("$pfx.konfirmasi", $ppb->id) }}" id="formKonfirmasi">
                @csrf
                <input type="hidden" name="lots" id="inputLots">
                <button type="button" id="btnKonfirmasi" class="btn btn-success btn-sm px-3 py-1" disabled onclick="submitKonfirmasi()">
                    <i class="bx bx-check-circle me-1"></i> Konfirmasi & Selesaikan
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Fullscreen Camera Overlay (Verifikasi) --}}
<div id="verifOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:#000;flex-direction:column;">
    <video id="verifVideo" autoplay playsinline muted style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>
    <canvas id="verifCanvas" style="display:none;"></canvas>
    <img id="verifFreezeFrame" src="" style="display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">

    {{-- Top bar --}}
    <div style="position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);">
        <span style="color:#fff;font-size:14px;font-weight:600;">Scan Verifikasi Stok (AI)</span>
        <button onclick="closeVerifOverlay()" style="background:rgba(255,255,255,.15);border:none;border-radius:50%;width:40px;height:40px;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;"><i class="bx bx-x"></i></button>
    </div>

    {{-- Upload fallback --}}
    <div style="position:absolute;top:14px;left:50%;transform:translateX(-50%);">
        <label for="verifFileInput" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 14px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;">
            <i class="bx bx-image-alt"></i> Upload Foto
        </label>
        <input type="file" id="verifFileInput" accept="image/*" style="display:none;">
    </div>

    {{-- Capture kiri --}}
    <div style="position:absolute;left:20px;top:50%;transform:translateY(-50%);">
        <button onclick="doVerifCapture()" style="width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent;" onpointerdown="this.style.transform='scale(.9)'" onpointerup="this.style.transform=''" onpointerleave="this.style.transform=''">
            <div style="width:56px;height:56px;border-radius:50%;background:#fff;"></div>
        </button>
    </div>

    {{-- Capture kanan --}}
    <div style="position:absolute;right:20px;top:50%;transform:translateY(-50%);">
        <button onclick="doVerifCapture()" style="width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent;" onpointerdown="this.style.transform='scale(.9)'" onpointerup="this.style.transform=''" onpointerleave="this.style.transform=''">
            <div style="width:56px;height:56px;border-radius:50%;background:#fff;"></div>
        </button>
    </div>

    {{-- Loading --}}
    <div id="verifLoading" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,.75);flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;">
        <div class="spinner-border text-light" style="width:3rem;height:3rem;"></div>
        <p style="margin:0;font-size:14px;">AI sedang menganalisis...</p>
    </div>

    {{-- Result panel --}}
    <div id="verifResultPanel" style="display:none;position:absolute;inset:0;background:#fff;overflow-y:auto;padding:20px 20px 32px;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
            <span style="font-size:15px;font-weight:600;">Hasil Verifikasi AI</span>
            <button onclick="hideVerifResult()" style="background:#f1f3f5;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#x2715;</button>
        </div>
        <div id="verifResultContent"></div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const PPB_PREFIX  = '{{ $pfx }}';
const SCAN_URL    = '{{ route("$pfx.scan-verifikasi", $ppb->id) }}';
const UPLOAD_URL  = '{{ route("$pfx.upload-foto", $ppb->id) }}';
const HAPUS_URL   = '{{ url("$pfx/foto") }}';
const CSRF        = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

let lots          = {!! json_encode($allLots) !!};
let verifStream        = null;
let verifBlob          = null; // foto sementara, dilampirkan hanya jika hasil diterapkan
let verifPendingLots   = []; // lots yang sudah diverifikasi AI tapi belum diterapkan

// ── Render ────────────────────────────────────────────────────────────────────
function renderLots() {
    const tbody = document.getElementById('tbodyLots');
    tbody.innerHTML = '';
    lots.forEach(function (lot, idx) {
        const tr = document.createElement('tr');
        let statusHtml;
        if (lot.verified) {
            if (lot.ai_confidence) {
                const confClass = lot.ai_confidence === 'high' ? 'confidence-high' : lot.ai_confidence === 'medium' ? 'confidence-medium' : 'confidence-low';
                statusHtml = `<span class="chip chip-verified-ai"><i class="bx bx-check me-1"></i>Terverifikasi AI</span>
                              <span class="ms-1 ${confClass}" style="font-size:.72rem">${lot.ai_confidence}</span>`;
            } else {
                statusHtml = `<span class="chip chip-verified-manual"><i class="bx bx-check me-1"></i>Terverifikasi Manual</span>`;
            }
        } else {
            statusHtml = `<span class="chip chip-unverified">Belum Diverifikasi</span>`;
        }
        tr.innerHTML = `
            <td class="text-center">${idx + 1}</td>
            <td>
                <strong>${lot.nama_barang}</strong>
                ${lot.manufaktur ? `<div class="text-muted" style="font-size:.78rem">${lot.manufaktur}</div>` : ''}
                ${(lot.jenis_nie || lot.no_nie) ? `<div class="text-muted fst-italic" style="font-size:.78rem">${lot.jenis_nie}${lot.jenis_nie && lot.no_nie ? ' · ' : ''}${lot.no_nie}</div>` : ''}
            </td>
            <td class="font-monospace">${lot.no_lot || '<em class="text-muted">—</em>'}</td>
            <td class="font-monospace">${lot.no_serial || '<em class="text-muted">—</em>'}</td>
            <td>${lot.kedaluwarsa || '<em class="text-muted">—</em>'}</td>
            <td class="text-center">${lot.qty}</td>
            <td>${statusHtml}</td>
            <td class="text-center">
                <button class="btn btn-sm ${lot.verified ? 'btn-outline-secondary' : 'btn-outline-success'} px-2 py-0"
                    style="font-size:.75rem" onclick="verifikasiManual(${idx})">
                    ${lot.verified ? 'Reset' : 'Manual ✓'}
                </button>
            </td>`;
        tbody.appendChild(tr);
    });
    updateProgress();
}

function updateProgress() {
    const total    = lots.length;
    const verified = lots.filter(l => l.verified).length;
    document.getElementById('progressBadge').textContent = `${verified} / ${total} terverifikasi`;
    document.getElementById('progressBadge').className   = 'badge d-inline-flex align-items-center ' + (verified === total ? 'bg-success' : 'bg-secondary');
    const allDone = verified === total;
    document.getElementById('btnKonfirmasi').disabled = !allDone;
    document.getElementById('statusInfo').innerHTML = allDone
        ? '<i class="bx bx-check-circle me-1 text-success"></i> Semua lot telah diverifikasi. Klik Konfirmasi untuk menyelesaikan.'
        : `<i class="bx bx-info-circle me-1"></i> ${total - verified} lot belum diverifikasi. Scan atau verifikasi manual.`;
}

function verifikasiManual(idx) {
    lots[idx].verified      = !lots[idx].verified;
    lots[idx].ai_confidence = null;
    renderLots();
}

// ── Camera Overlay ────────────────────────────────────────────────────────────
function openVerifOverlay() {
    verifBlob = null;
    document.getElementById('verifResultPanel').style.display = 'none';
    document.getElementById('verifLoading').style.display     = 'none';
    document.getElementById('verifResultContent').innerHTML   = '';
    document.getElementById('verifFileInput').value           = '';
    restoreVerifCamera();
    document.getElementById('verifOverlay').style.display = 'flex';
    startVerifCamera();
}

function closeVerifOverlay() {
    stopVerifCamera();
    document.getElementById('verifOverlay').style.display = 'none';
    verifBlob = null;
}

function startVerifCamera() {
    navigator.mediaDevices.getUserMedia({
        video: { facingMode: { ideal: 'environment' }, width: { ideal: 1920 }, height: { ideal: 1080 } }
    }).then(function(stream) {
        verifStream = stream;
        document.getElementById('verifVideo').srcObject = stream;
    }).catch(function(err) {
        alert('Tidak dapat mengakses kamera: ' + err.message);
        closeVerifOverlay();
    });
}

function stopVerifCamera() {
    if (verifStream) { verifStream.getTracks().forEach(t => t.stop()); verifStream = null; }
}

function restoreVerifCamera() {
    document.getElementById('verifFreezeFrame').style.display = 'none';
    document.getElementById('verifVideo').style.display = 'block';
}

function hideVerifResult() {
    document.getElementById('verifResultPanel').style.display = 'none';
    verifBlob = null;
    verifPendingLots = [];
    restoreVerifCamera();
}

function terapkanHasilVerif() {
    verifPendingLots.forEach(function(v) {
        const lot = lots.find(l => l.lot_id === v.lot_id);
        if (lot) { lot.verified = true; lot.ai_confidence = v.confidence; }
    });
    verifPendingLots = [];
    renderLots();
    uploadVerifFoto();
    closeVerifOverlay();
}

function doVerifCapture() {
    const video  = document.getElementById('verifVideo');
    const canvas = document.getElementById('verifCanvas');
    canvas.width  = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    // Freeze frame
    const freezeEl = document.getElementById('verifFreezeFrame');
    freezeEl.src = canvas.toDataURL('image/jpeg', 0.92);
    freezeEl.style.display = 'block';
    video.style.display = 'none';

    const b64 = resizeVerifToBase64(canvas);
    canvas.toBlob(function(blob) { verifBlob = blob; }, 'image/jpeg', 0.85);
    kirimKeAIVerif(b64);
}

function resizeVerifToBase64(srcCanvas) {
    const MAX = 1920;
    const ratio = Math.min(MAX / srcCanvas.width, MAX / srcCanvas.height, 1);
    const out = document.createElement('canvas');
    out.width  = Math.round(srcCanvas.width  * ratio);
    out.height = Math.round(srcCanvas.height * ratio);
    out.getContext('2d').drawImage(srcCanvas, 0, 0, out.width, out.height);
    return out.toDataURL('image/jpeg', 0.92);
}

document.getElementById('verifFileInput').addEventListener('change', function() {
    const file = this.files[0]; if (!file) return;
    const img = new Image();
    img.onload = function() {
        const c = document.createElement('canvas');
        c.width = img.width; c.height = img.height;
        c.getContext('2d').drawImage(img, 0, 0);
        verifBlob = file;
        kirimKeAIVerif(resizeVerifToBase64(c));
        URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(file);
});

// ── AI Verifikasi ─────────────────────────────────────────────────────────────
function kirimKeAIVerif(base64) {
    document.getElementById('verifResultPanel').style.display = 'none';
    document.getElementById('verifLoading').style.display = 'flex';

    const lotsPayload = lots
        .filter(function(l) { return !l.verified; })
        .map(function(l) {
            return {
                lot_id:      l.lot_id,
                nama:        l.nama_barang,
                no_lot:      l.no_lot    || null,
                no_serial:   l.no_serial || null,
                kedaluwarsa: l.kedaluwarsa || null,
            };
        });

    fetch(SCAN_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ image: base64, lots: JSON.stringify(lotsPayload) }),
    })
    .then(r => r.json().then(d => ({ ok: r.ok, data: d })))
    .then(function(res) {
        document.getElementById('verifLoading').style.display = 'none';
        restoreVerifCamera();

        if (!res.ok) {
            showVerifResult(alertVerifHtml('danger', res.data.error || 'AI scan gagal.') + btnVerifUlang());
            return;
        }
        if (res.data.minta_ulang) {
            showVerifResult(alertVerifHtml('warning', res.data.alasan_ulang || 'Foto kurang jelas.') + btnVerifUlang());
            return;
        }

        const verified = res.data.verified || [];
        verifPendingLots = [];
        verified.forEach(function(v) {
            const lot = lots.find(function(l) { return l.lot_id === v.lot_id && !l.verified; });
            if (lot) verifPendingLots.push({ lot_id: v.lot_id, confidence: v.confidence || null });
        });

        if (verifPendingLots.length > 0) {
            const rows = verifPendingLots.map(function(v) {
                const lot = lots.find(l => l.lot_id === v.lot_id);
                const confClass = v.confidence === 'high' ? 'text-success' : v.confidence === 'medium' ? 'text-warning' : 'text-danger';
                return `<tr>
                    <td style="font-size:14px">${lot ? lot.nama_barang : '—'}</td>
                    <td style="font-size:14px" class="font-monospace">${lot ? (lot.no_serial || lot.no_lot || '—') : '—'}</td>
                    <td style="font-size:14px" class="${confClass} fw-semibold">${v.confidence || '—'}</td>
                </tr>`;
            }).join('');
            showVerifResult(`<div class="alert alert-success py-2 fs-13 mb-3"><i class="bx bx-check-circle me-1"></i>${verifPendingLots.length} lot teridentifikasi.</div>
                <div class="table-responsive mb-3">
                    <table class="table table-sm table-bordered">
                        <thead class="table-light"><tr><th>Barang</th><th>No. Serial / LOT</th><th>Confidence</th></tr></thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>
                <div class="d-flex gap-2 mt-3">
                    <button class="btn btn-outline-secondary flex-fill" onclick="hideVerifResult()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>
                    <button class="btn btn-success flex-fill" onclick="terapkanHasilVerif()"><i class="bx bx-check me-1"></i> Terapkan Hasil</button>
                </div>`);
        } else {
            verifBlob = null;
            showVerifResult(alertVerifHtml('warning', 'Tidak ada lot yang cocok ditemukan. Coba scan ulang.') + btnVerifUlang());
        }
    })
    .catch(function() {
        document.getElementById('verifLoading').style.display = 'none';
        restoreVerifCamera();
        showVerifResult(alertVerifHtml('danger', 'Koneksi gagal. Coba lagi.') + btnVerifUlang());
    });
}

function showVerifResult(html) {
    document.getElementById('verifResultContent').innerHTML = html;
    document.getElementById('verifResultPanel').style.display = 'block';
}

function alertVerifHtml(type, msg) {
    return `<div class="alert alert-${type} py-2 fs-13"><i class="bx bx-${type==='danger'?'x-circle':'camera'} me-1"></i>${msg}</div>`;
}

function btnVerifUlang() {
    return `<button class="btn btn-outline-secondary w-100" onclick="hideVerifResult()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>`;
}

// ── Foto Management ───────────────────────────────────────────────────────────
function uploadVerifFoto() {
    if (!verifBlob) return;
    const blob = verifBlob;
    verifBlob = null;

    const fd = new FormData();
    fd.append('foto', blob, 'verif_' + Date.now() + '.jpg');
    fd.append('_token', CSRF);

    fetch(UPLOAD_URL, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(function(res) {
            if (res.id && res.url) addFotoToCard(res.id, res.url);
        })
        .catch(function() { /* silent */ });
}

function addFotoToCard(id, url) {
    document.getElementById('fotoEmpty')?.remove();
    const div = document.createElement('div');
    div.className = 'foto-item';
    div.id = 'fotoItem_' + id;
    div.innerHTML = `<img src="${url}" class="foto-thumb" onclick="window.open('${url}','_blank')">
        <button class="btn-hapus" onclick="hapusFoto(${id})" title="Hapus foto">&times;</button>`;
    document.getElementById('fotoContainer').appendChild(div);
}

function hapusFoto(id) {
    fetch(HAPUS_URL + '/' + id, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' }
    }).then(function(r) {
        if (r.ok) document.getElementById('fotoItem_' + id)?.remove();
    });
}

function uploadManualFoto(input) {
    const files = Array.from(input.files);
    input.value = '';
    files.forEach(function(file) {
        const fd = new FormData();
        fd.append('foto', file);
        fd.append('_token', CSRF);
        fetch(UPLOAD_URL, { method: 'POST', body: fd })
            .then(r => r.json())
            .then(function(res) {
                if (res.id && res.url) addFotoToCard(res.id, res.url);
            });
    });
}

// ── Submit Konfirmasi ─────────────────────────────────────────────────────────
function submitKonfirmasi() {
    const payload = lots.map(function(l) {
        return { lot_id: l.lot_id, verified: l.verified, ai_confidence: l.ai_confidence };
    });
    document.getElementById('inputLots').value = JSON.stringify(payload);
    document.getElementById('formKonfirmasi').submit();
}

// Init
renderLots();
</script>
@endsection