@extends('layouts.master')

@section('title', 'Verifikasi Fisik — ' . $penjualan->nomor_penjualan)

@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; }
</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 Penjualan</p>
            <span class="fs-13 text-muted">Penjualan &rarr; {{ $penjualan->nomor_penjualan }} &rarr; Verifikasi</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            <a href="{{ route('penjualan.show', $penjualan->id) }}" class="btn btn-secondary btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    {{-- Info Penjualan --}}
    <div class="card custom-card mb-3">
        <div class="card-header"><div class="card-title mb-0">Informasi Penjualan</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:160px">Nomor Penjualan</td><td>: <strong>{{ $penjualan->nomor_penjualan }}</strong></td></tr>
                <tr><td class="text-muted">Tgl. Transaksi</td><td>: {{ $penjualan->tanggal_transaksi->translatedFormat('d F Y') }}</td></tr>
                <tr><td class="text-muted">Fasilitas Kesehatan</td><td>: {{ $penjualan->nama_faskes }}</td></tr>
                <tr><td class="text-muted">Diselesaikan Oleh</td><td>: {{ $penjualan->diselesaikanOleh?->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>

    {{-- 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>
            <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 Verifikasi
            </button>
        </div>
    </div>
</div>

{{-- Fullscreen Camera Overlay --}}
<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 SCAN_URL       = '{{ route('penjualan.scan-verifikasi', $penjualan->id) }}';
const KONFIRMASI_URL = '{{ route('penjualan.konfirmasi-verifikasi', $penjualan->id) }}';
const CSRF           = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

let lots             = {!! json_encode($allLots) !!};
let verifStream      = null;
let verifPendingLots = [];

// ── 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></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(function (l) { return 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() {
    verifPendingLots = [];
    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';
}

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(function (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';
    verifPendingLots = [];
    restoreVerifCamera();
}

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);

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

    kirimKeAI(resizeVerifToBase64(canvas));
}

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);
        kirimKeAI(resizeVerifToBase64(c));
        URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(file);
});

// ── AI Scan ───────────────────────────────────────────────────────────────────
function kirimKeAI(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(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
    .then(function (res) {
        document.getElementById('verifLoading').style.display = 'none';
        restoreVerifCamera();

        if (!res.ok) {
            showVerifResult(alertHtml('danger', res.data.error || 'AI scan gagal.') + btnUlang());
            return;
        }
        if (res.data.minta_ulang) {
            showVerifResult(alertHtml('warning', res.data.alasan_ulang || 'Foto kurang jelas.') + btnUlang());
            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(function (l) { return 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="terapkanHasil()"><i class="bx bx-check me-1"></i> Terapkan Hasil</button>
                </div>`);
        } else {
            verifPendingLots = [];
            showVerifResult(alertHtml('warning', 'Tidak ada lot yang cocok ditemukan. Coba scan ulang.') + btnUlang());
        }
    })
    .catch(function () {
        document.getElementById('verifLoading').style.display = 'none';
        restoreVerifCamera();
        showVerifResult(alertHtml('danger', 'Koneksi gagal. Coba lagi.') + btnUlang());
    });
}

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

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

function alertHtml(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 btnUlang() {
    return `<button class="btn btn-outline-secondary w-100" onclick="hideVerifResult()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>`;
}

// ── 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('btnKonfirmasi').disabled = true;
    document.getElementById('btnKonfirmasi').innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

    fetch(KONFIRMASI_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ lots: payload }),
    })
    .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
    .then(function (res) {
        if (res.ok && res.data.redirect) {
            window.location.href = res.data.redirect;
        } else {
            alert(res.data.message || 'Gagal menyimpan verifikasi.');
            document.getElementById('btnKonfirmasi').disabled = false;
            document.getElementById('btnKonfirmasi').innerHTML = '<i class="bx bx-check-circle me-1"></i> Konfirmasi Verifikasi';
        }
    })
    .catch(function () {
        alert('Koneksi gagal. Coba lagi.');
        document.getElementById('btnKonfirmasi').disabled = false;
        document.getElementById('btnKonfirmasi').innerHTML = '<i class="bx bx-check-circle me-1"></i> Konfirmasi Verifikasi';
    });
}

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