@extends('layouts.master')
@section('title', 'Verifikasi Fisik Retur — ' . $retur->nomor)

@section('styles')
<style>
    #tblItems thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; font-size:.82rem; }
    #tblItems 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 Retur</p>
            <span class="fs-13 text-muted">Penjualan &rarr; <a href="{{ route('penjualan.retur-kso.index') }}" class="text-muted">Retur Faskes</a> &rarr; {{ $retur->nomor }} &rarr; Verifikasi</span>
        </div>
        <a href="{{ route('penjualan.retur-kso.show', $retur->id) }}" class="btn btn-secondary btn-sm mt-2 mt-md-0 px-2 py-1">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    {{-- Info Retur --}}
    <div class="card custom-card mb-3">
        <div class="card-body py-2">
            <div class="row g-2" style="font-size:.875rem">
                <div class="col-md-3"><span class="text-muted">Nomor:</span> <strong>{{ $retur->nomor }}</strong></div>
                <div class="col-md-3"><span class="text-muted">Faskes:</span> {{ $retur->nama_faskes }}</div>
                <div class="col-md-3"><span class="text-muted">Dibuat:</span> {{ $retur->dibuatOleh?->nama ?? '—' }}</div>
                <div class="col-md-3"><span class="text-muted">Tanggal:</span> {{ $retur->created_at?->format('d/m/Y H:i') }}</div>
            </div>
        </div>
    </div>

    {{-- Tabel Items --}}
    <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">Item Yang Harus Diverifikasi</div>
            <div class="d-flex gap-2 align-items-center">
                <span id="progressBadge" class="badge bg-secondary" style="font-size:.82rem;padding:5px 10px">
                    0 / {{ count($allItems) }} terverifikasi
                </span>
                <button type="button" class="btn btn-primary btn-sm px-2 py-1" onclick="bukaOverlayVerif()">
                    <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="tblItems" 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 class="text-center" style="width:80px">Kondisi</th>
                            <th style="width:160px">Status Verifikasi</th>
                            <th class="text-center" style="width:80px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyItems"></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Foto Verifikasi --}}
    <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-images me-2 text-primary"></i>Foto Verifikasi</div>
            <label for="uploadFotoManual" class="btn btn-outline-primary btn-sm px-2 py-1 mb-0" id="lblUploadFoto" style="cursor:pointer">
                <i class="bx bx-image-add me-1"></i> Tambah Foto
            </label>
            <input type="file" id="uploadFotoManual" accept="image/*" style="display:none">
        </div>
        <div class="card-body py-3">
            <div id="fotoGallery" class="d-flex flex-wrap gap-2 align-items-start">
                @forelse($fotoLogs as $log)
                <a href="{{ $log->fotoUrl() }}" target="_blank">
                    <img src="{{ $log->fotoUrl() }}" class="rounded border" style="height:90px;width:90px;object-fit:cover;cursor:zoom-in" title="{{ $log->created_at?->format('d/m/Y H:i') }}">
                </a>
                @empty
                <div class="text-muted fs-13" id="fotoEmpty"><i class="bx bx-image me-1"></i> Belum ada foto. Foto dari scan AI atau upload manual akan muncul di sini.</div>
                @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 item untuk mengaktifkan tombol konfirmasi.
            </div>
            <form method="POST" action="{{ route('penjualan.retur-kso.konfirmasi', $retur->id) }}" id="formKonfirmasi">
                @csrf
                <input type="hidden" name="items" id="inputItems">
                <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 Scan Overlay --}}
<div id="verifOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:#000;flex-direction:column;">
    {{-- Top bar --}}
    <div style="position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);">
        <span style="color:#fff;font-size:14px;font-weight:600;"><i class="bx bx-camera me-2"></i>Scan Verifikasi Retur</span>
        <button onclick="tutupOverlayVerif()" 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 (tengah atas) --}}
    <div style="position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;">
        <label for="uploadFileInput" 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="uploadFileInput" accept="image/*" style="display:none;">
    </div>

    {{-- Video & freeze --}}
    <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;">

    {{-- Capture kiri --}}
    <div id="verifCaptureBtnL" style="position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:2;">
        <button onclick="verifAmbilFoto()" 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 id="verifCaptureBtnR" style="position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:2;">
        <button onclick="verifAmbilFoto()" 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;z-index:3;background:rgba(0,0,0,.75);flex-direction:column;align-items:center;justify-content:center;gap:16px;">
        <div class="spinner-border text-light" style="width:3rem;height:3rem;"></div>
        <p style="margin:0;color:#fff;font-size:14px;">AI sedang menganalisis...</p>
    </div>

    {{-- Result panel --}}
    <div id="verifResultPanel" style="display:none;position:absolute;inset:0;z-index:4;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;"><i class="bx bx-check-circle text-success me-2"></i>Hasil Scan AI</span>
        </div>
        <div id="verifResultContent"></div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const SCAN_URL        = '{{ route("penjualan.retur-kso.scan-verifikasi", $retur->id) }}';
const UPLOAD_FOTO_URL = '{{ route("penjualan.retur-kso.upload-foto", $retur->id) }}';
const CSRF            = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

let items = {!! json_encode($allItems) !!};
let verifStream = null;
let verifPendingVerified = [];

// ── Render tabel ──────────────────────────────────────────────────────────────
function renderItems() {
    const tbody = document.getElementById('tbodyItems');
    tbody.innerHTML = '';
    items.forEach(function (item, idx) {
        const tr = document.createElement('tr');

        let statusHtml;
        if (item.verified) {
            const confClass = item.ai_confidence === 'high' ? 'confidence-high'
                            : item.ai_confidence === 'medium' ? 'confidence-medium'
                            : item.ai_confidence ? 'confidence-low' : '';
            statusHtml = item.ai_confidence
                ? `<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">${item.ai_confidence}</span>`
                : `<span class="chip chip-verified-manual"><i class="bx bx-check me-1"></i>Manual</span>`;
        } else {
            statusHtml = `<span class="chip chip-unverified">Belum</span>`;
        }

        tr.innerHTML = `
            <td class="text-center">${idx + 1}</td>
            <td><strong>${item.nama_barang}</strong></td>
            <td class="font-monospace">${item.no_lot || '<em class="text-muted">—</em>'}</td>
            <td class="font-monospace">${item.no_serial || '<em class="text-muted">—</em>'}</td>
            <td>${item.kedaluwarsa || '<em class="text-muted">—</em>'}</td>
            <td class="text-center">${item.qty}</td>
            <td class="text-center">
                <select class="form-select form-select-sm py-0" style="font-size:.78rem;min-width:70px" onchange="ubahKondisi(${idx}, this.value)">
                    <option value="baik"  ${item.kondisi === 'baik'  ? 'selected' : ''}>Baik</option>
                    <option value="rusak" ${item.kondisi === 'rusak' ? 'selected' : ''}>Rusak</option>
                </select>
            </td>
            <td>${statusHtml}</td>
            <td class="text-center">
                <button class="btn btn-sm ${item.verified ? 'btn-outline-secondary' : 'btn-outline-success'} px-2 py-0"
                    style="font-size:.75rem" onclick="verifikasiManual(${idx})">
                    ${item.verified ? 'Reset' : 'Manual'}
                </button>
            </td>`;
        tbody.appendChild(tr);
    });
    updateProgress();
}

function updateProgress() {
    const total    = items.length;
    const verified = items.filter(i => i.verified).length;
    document.getElementById('progressBadge').textContent = `${verified} / ${total} terverifikasi`;
    document.getElementById('progressBadge').className   = 'badge ' + (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 item telah diverifikasi. Klik Konfirmasi untuk menyelesaikan.'
        : `<i class="bx bx-info-circle me-1"></i> ${total - verified} item belum diverifikasi. Scan atau verifikasi manual.`;
}

function ubahKondisi(idx, val) {
    items[idx].kondisi = val;
}

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

// ── Fullscreen overlay ────────────────────────────────────────────────────────
function bukaOverlayVerif() {
    const overlay = document.getElementById('verifOverlay');
    overlay.style.display = 'flex';
    verifPendingVerified = [];
    verifResetKamera();

    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);
            tutupOverlayVerif();
        });
}

function tutupOverlayVerif() {
    if (verifStream) { verifStream.getTracks().forEach(t => t.stop()); verifStream = null; }
    document.getElementById('verifOverlay').style.display = 'none';
}

function verifResetKamera() {
    document.getElementById('verifFreezeFrame').style.display = 'none';
    document.getElementById('verifFreezeFrame').src = '';
    document.getElementById('verifVideo').style.display = 'block';
    document.getElementById('verifCaptureBtnL').style.display = 'block';
    document.getElementById('verifCaptureBtnR').style.display = 'block';
    document.getElementById('verifLoading').style.display = 'none';
    document.getElementById('verifResultPanel').style.display = 'none';
    document.getElementById('verifResultContent').innerHTML = '';
}

function verifAmbilFoto() {
    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 base64 = resizeToBase64(canvas);

    const freeze = document.getElementById('verifFreezeFrame');
    freeze.src = base64;
    freeze.style.display = 'block';
    video.style.display = 'none';
    document.getElementById('verifCaptureBtnL').style.display = 'none';
    document.getElementById('verifCaptureBtnR').style.display = 'none';

    kirimKeAIVerif(base64);
}

function verifFotoUlang() {
    verifPendingVerified = [];
    verifResetKamera();
}

function verifTerapkanHasil() {
    verifPendingVerified.forEach(function(v) {
        const item = items.find(i => i.item_id === v.item_id);
        if (item && !item.verified) {
            item.verified      = true;
            item.ai_confidence = v.confidence || null;
        }
    });
    renderItems();
    tutupOverlayVerif();
}

// ── Upload file ───────────────────────────────────────────────────────────────
document.getElementById('uploadFileInput').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);
        const base64 = resizeToBase64(c);
        URL.revokeObjectURL(img.src);

        verifPendingVerified = [];
        verifResetKamera();

        const freeze = document.getElementById('verifFreezeFrame');
        freeze.src = base64;
        freeze.style.display = 'block';
        document.getElementById('verifVideo').style.display = 'none';
        document.getElementById('verifCaptureBtnL').style.display = 'none';
        document.getElementById('verifCaptureBtnR').style.display = 'none';
        kirimKeAIVerif(base64);
    };
    img.src = URL.createObjectURL(file);
    this.value = '';
});

function resizeToBase64(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);
}

// ── Kirim ke AI ───────────────────────────────────────────────────────────────
function alertHtml(type, msg) {
    return `<div class="alert alert-${type} py-2 fs-13">${msg}</div>`;
}
function btnFotoUlang() {
    return `<button class="btn btn-outline-secondary flex-fill" onclick="verifFotoUlang()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>`;
}
function btnTerapkan() {
    return `<button class="btn btn-success flex-fill" onclick="verifTerapkanHasil()"><i class="bx bx-check me-1"></i> Terapkan Hasil</button>`;
}

function kirimKeAIVerif(base64) {
    document.getElementById('verifLoading').style.display = 'flex';

    const pending = items
        .filter(i => !i.verified)
        .map(i => ({ item_id: i.item_id, nama: i.nama_barang, no_lot: i.no_lot || null, no_serial: i.no_serial || null, kedaluwarsa: i.kedaluwarsa || null }));

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

        let html = '';
        if (!res.ok) {
            html = alertHtml('danger', res.data.error || 'AI scan gagal.') + `<div class="d-flex gap-2 mt-2">${btnFotoUlang()}</div>`;
        } else if (res.data.minta_ulang) {
            html = alertHtml('warning', '<i class="bx bx-camera me-1"></i>' + (res.data.alasan_ulang || 'Foto kurang jelas. Mohon foto ulang lebih dekat.'))
                 + `<div class="d-flex gap-2 mt-2">${btnFotoUlang()}</div>`;
        } else {
            verifPendingVerified = res.data.verified || [];

            if (verifPendingVerified.length === 0) {
                html = alertHtml('warning', 'Tidak ada item yang cocok ditemukan.')
                     + `<div class="d-flex gap-2 mt-2">${btnFotoUlang()}</div>`;
            } else {
                uploadFotoVerif(base64);
                html = `<p class="fw-semibold fs-13 mb-2 text-success"><i class="bx bx-check-circle me-1"></i>${verifPendingVerified.length} item terverifikasi:</p><ul class="fs-13 mb-3">`;
                verifPendingVerified.forEach(function(v) {
                    const item = items.find(i => i.item_id === v.item_id);
                    html += `<li>${item ? item.nama_barang : 'ID ' + v.item_id} <span class="text-muted fs-12">(${v.confidence || '—'})</span></li>`;
                });
                html += `</ul><div class="d-flex gap-2">${btnFotoUlang()}${btnTerapkan()}</div>`;
            }
        }
        document.getElementById('verifResultContent').innerHTML = html;
    })
    .catch(function() {
        document.getElementById('verifLoading').style.display = 'none';
        document.getElementById('verifResultPanel').style.display = 'block';
        document.getElementById('verifResultContent').innerHTML = alertHtml('danger', 'Koneksi gagal. Coba lagi.')
            + `<div class="d-flex gap-2 mt-2">${btnFotoUlang()}</div>`;
    });
}

// ── Gallery helper ────────────────────────────────────────────────────────────
function addFotoToGallery(url) {
    const gallery = document.getElementById('fotoGallery');
    const empty   = document.getElementById('fotoEmpty');
    if (empty) empty.remove();
    const a   = document.createElement('a');
    a.href    = url;
    a.target  = '_blank';
    const img = document.createElement('img');
    img.src   = url;
    img.className = 'rounded border';
    img.style = 'height:90px;width:90px;object-fit:cover;cursor:zoom-in';
    a.appendChild(img);
    gallery.appendChild(a);
}

// ── Upload foto verifikasi ke server ─────────────────────────────────────────
function uploadFotoVerif(base64) {
    fetch(UPLOAD_FOTO_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ image: base64 }),
    })
    .then(r => r.json())
    .then(function(data) { if (data.url) addFotoToGallery(data.url); })
    .catch(() => {});
}

// ── Upload foto manual (tanpa AI scan) ───────────────────────────────────────
document.getElementById('uploadFotoManual').addEventListener('change', function () {
    const file = this.files[0]; if (!file) return;
    const label = document.getElementById('lblUploadFoto');
    label.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Mengupload...';
    label.style.pointerEvents = 'none';

    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);
        const base64 = resizeToBase64(c);
        URL.revokeObjectURL(img.src);

        fetch(UPLOAD_FOTO_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ image: base64 }),
        })
        .then(r => r.json())
        .then(function (data) {
            if (data.url) addFotoToGallery(data.url);
            label.innerHTML = '<i class="bx bx-check me-1 text-success"></i> Tersimpan';
            setTimeout(function () {
                label.innerHTML = '<i class="bx bx-image-add me-1"></i> Tambah Foto';
                label.style.pointerEvents = '';
            }, 2000);
        })
        .catch(function () {
            label.innerHTML = '<i class="bx bx-error me-1 text-danger"></i> Gagal';
            setTimeout(function () {
                label.innerHTML = '<i class="bx bx-image-add me-1"></i> Tambah Foto';
                label.style.pointerEvents = '';
            }, 2000);
        });
    };
    img.src = URL.createObjectURL(file);
    this.value = '';
});

// ── Submit ────────────────────────────────────────────────────────────────────
function submitKonfirmasi() {
    const payload = items.map(i => ({
        item_id:       i.item_id,
        verified:      i.verified,
        ai_confidence: i.ai_confidence,
        kondisi:       i.kondisi,
    }));
    document.getElementById('inputItems').value = JSON.stringify(payload);
    document.getElementById('formKonfirmasi').submit();
}

renderItems();
</script>
@endsection