@extends('layouts.master')

@section('title', 'Stok Opname — ' . $so->nomor_opname)

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .tbl-stok thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; font-size:.82rem; }
    .tbl-stok tbody td { border:1px solid #f0e8ff; vertical-align:middle; padding:5px 8px; font-size:.84rem; }
    .tbl-stok tr.row-verified   { background:#fffbeb; }
    .tbl-stok tr.row-cocok      { background:#f0fdf4; }
    .tbl-stok tr.row-kurang     { background:#fff5f5; }
    .tbl-stok tr.row-lebih      { background:#eff6ff; }
    .chip { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.77rem; font-weight:500; }
    .chip-cocok    { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
    .chip-kurang   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
    .chip-lebih    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
    .chip-anomali  { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
    .chip-belum    { background:#f1f5f9; color:#64748b; border:1px solid #cbd5e1; }
    .qty-input     { width:70px; }
    .tbl-anomali thead th { background:#fefce8; color:#854d0e; border:1px solid #fde68a; font-size:.82rem; }
    .tbl-anomali tbody td { border:1px solid #fef08a; vertical-align:middle; padding:5px 8px; font-size:.84rem; }
</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">Stok Opname</p>
            <span class="fs-13 text-muted">Gudang &rarr; Stok Opname &rarr; {{ $so->nomor_opname }}</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0 flex-wrap">
            @if($so->isDraft())
            <button class="btn btn-success btn-sm px-2 py-1" onclick="doSelesaikan()">
                <i class="bx bx-check-circle me-1"></i> Selesaikan Opname
            </button>
            @else
            <button class="btn btn-primary btn-sm px-2 py-1" onclick="bukaPdfPreview()">
                <i class="bx bx-printer me-1"></i> Cetak PDF
            </button>
            <a href="{{ route('gudang.stok-opname.pdf-per-barang', $so->id) }}" target="_blank" class="btn btn-outline-primary btn-sm px-2 py-1">
                <i class="bx bx-list-ul me-1"></i> Per Barang
            </a>
            @endif
            <a href="{{ route('gudang.stok-opname.index') }}" class="btn btn-secondary btn-sm px-2 py-1">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    {{-- Info SO --}}
    <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>{{ $so->nomor_opname }}</strong></div>
                <div class="col-md-3"><span class="text-muted">Gudang:</span> <strong>{{ $so->gudang->nama }}</strong></div>
                <div class="col-md-2"><span class="text-muted">Tanggal:</span> {{ $so->tanggal_opname->format('d-m-Y') }}</div>
                <div class="col-md-2">
                    <span class="text-muted">Status:</span>
                    @if($so->isDraft())
                    <span class="badge bg-secondary">Draft</span>
                    @else
                    <span class="badge bg-success">Selesai</span>
                    @endif
                </div>
                <div class="col-md-2"><span class="text-muted">Dibuat:</span> {{ $so->dibuatOleh?->nama ?? '—' }}</div>
            </div>
        </div>
    </div>

    {{-- Summary --}}
    <div class="row g-2 mb-3" id="summaryCards">
        <div class="col-6 col-md-3">
            <div class="card custom-card text-center py-2">
                <div class="fs-20 fw-bold text-success" id="sumCocok">{{ $opnameItems->where('status_item','cocok')->count() }}</div>
                <div class="text-muted fs-12">Cocok</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card text-center py-2">
                <div class="fs-20 fw-bold text-danger" id="sumKurang">{{ ($stoksGudang->count() - $opnameItems->count()) + $opnameItems->where('status_item','kurang')->count() }}</div>
                <div class="text-muted fs-12">Kurang / Belum</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card text-center py-2">
                <div class="fs-20 fw-bold text-primary" id="sumLebih">{{ $opnameItems->where('status_item','lebih')->count() }}</div>
                <div class="text-muted fs-12">Lebih</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card text-center py-2">
                <div class="fs-20 fw-bold text-warning" id="sumAnomali">{{ $anomaliItems->count() }}</div>
                <div class="text-muted fs-12">Anomali</div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        {{-- Panel Scan + Foto (1 kolom kiri) --}}
        <div class="col-md-4 d-flex flex-column gap-3">
            {{-- Card Scan (hanya draft) --}}
            @if($so->isDraft())
            <div class="card custom-card mb-0">
                <div class="card-header">
                    <div class="card-title mb-0"><i class="bx bx-camera me-2 text-primary"></i>Scan Barang Fisik</div>
                </div>
                <div class="card-body text-center py-4">
                    <p class="text-muted fs-13 mb-3">Gunakan kamera AI untuk memverifikasi barang fisik secara otomatis.</p>
                    <div class="d-flex gap-2 justify-content-center flex-wrap">
                        <button type="button" class="btn btn-primary btn-sm px-3 py-1" onclick="bukaOverlayScan()">
                            <i class="bx bx-camera me-1"></i> Buka Kamera Scan
                        </button>
                        <label class="btn btn-outline-secondary btn-sm px-3 py-1 mb-0" style="cursor:pointer">
                            <i class="bx bx-upload me-1"></i> Upload Foto
                            <input type="file" id="scanManualFotoInput" accept="image/*" class="d-none" onchange="uploadManualFotoSO(this)">
                        </label>
                    </div>
                </div>
            </div>
            @endif
            {{-- Hidden fotoGrid saat draft agar JS addFotoToGrid tidak error --}}
            @if($so->isDraft())
            <div id="fotoGrid" style="display:none"></div>
            @endif

            {{-- Card Foto (hanya tampil saat selesai) --}}
            @if(!$so->isDraft())
            <div class="card custom-card mb-0">
                <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 Stok Opname</div>
                    <span class="badge bg-secondary" id="fotoCount">{{ $so->fotos->count() }}</span>
                </div>
                <div class="card-body p-2">
                    {{-- Foto Scan --}}
                    @php $fotoScans = $so->fotos->filter(fn($f) => in_array($f->tipe, ['scan', null, ''])); @endphp
                    @if($fotoScans->count())
                    <div class="fs-12 text-muted mb-1 fw-semibold">Foto Scan</div>
                    <div id="fotoGrid" class="d-flex flex-wrap gap-2 mb-2">
                        @foreach($fotoScans as $foto)
                        <div class="position-relative" id="foto-item-{{ $foto->id }}" style="width:80px;height:80px;">
                            <img src="{{ $foto->url }}" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;"
                                onclick="window.open('{{ $foto->url }}','_blank')">
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div id="fotoGrid" class="d-none"></div>
                    @endif

                    {{-- Upload Hardcopy SO --}}
                    <div class="border-top pt-2 mt-1">
                        <div class="fs-12 fw-semibold text-muted mb-1">Hardcopy SO</div>
                        @php $fotoHardcopy = $so->fotos->where('tipe', 'hardcopy'); @endphp
                        <div id="hardcopyGrid" class="d-flex flex-wrap gap-2 mb-2">
                            @foreach($fotoHardcopy as $foto)
                            <div class="position-relative" id="foto-item-{{ $foto->id }}" style="width:80px;height:80px;">
                                <img src="{{ $foto->url }}" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;"
                                    onclick="window.open('{{ $foto->url }}','_blank')">
                                <button onclick="hapusFotoSO({{ $foto->id }})" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>
                            </div>
                            @endforeach
                        </div>
                        <label class="btn btn-outline-secondary btn-sm px-2 py-1 mb-0" style="cursor:pointer;font-size:.78rem">
                            <i class="bx bx-upload me-1"></i> Upload Hardcopy
                            <input type="file" id="hardcopyInput" accept="image/*" class="d-none" onchange="uploadHardcopy(this)">
                        </label>
                    </div>

                    {{-- Foto Petugas RS --}}
                    <div class="border-top pt-2 mt-2">
                        <div class="fs-12 fw-semibold text-muted mb-1">Foto Petugas RS</div>
                        @php $fotoPetugas = $so->fotos->where('tipe', 'foto_petugas'); @endphp
                        <div id="petugasGrid" class="d-flex flex-wrap gap-2 mb-2">
                            @foreach($fotoPetugas as $foto)
                            <div class="position-relative" id="foto-item-{{ $foto->id }}" style="width:80px;height:80px;">
                                <img src="{{ $foto->url }}" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;"
                                    onclick="window.open('{{ $foto->url }}','_blank')">
                                <button onclick="hapusFotoSO({{ $foto->id }})" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>
                            </div>
                            @endforeach
                        </div>
                        <div class="d-flex gap-2 align-items-center flex-wrap mb-1">
                            <label class="btn btn-outline-secondary btn-sm px-2 py-1 mb-0" style="cursor:pointer;font-size:.78rem">
                                <i class="bx bx-user-circle me-1"></i> Upload Foto Petugas
                                <input type="file" id="petugasInput" accept="image/*" class="d-none" onchange="uploadFotoPetugas(this)">
                            </label>
                        </div>
                        <div class="mt-1">
                            <div class="fs-12 text-muted mb-1">Nama Petugas RS</div>
                            <div class="d-flex gap-1">
                                <input type="text" id="inputNamaPetugasRs" class="form-control form-control-sm"
                                    placeholder="Nama petugas rumah sakit"
                                    value="{{ $so->nama_petugas_rs ?? '' }}"
                                    style="font-size:.8rem">
                                <button class="btn btn-primary btn-sm px-2 py-1" style="font-size:.78rem;white-space:nowrap" onclick="simpanNamaPetugasRs()">
                                    <i class="bx bx-save"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- TTD Digital RS --}}
                    <div class="border-top pt-2 mt-2">
                        <div class="fs-12 fw-semibold text-muted mb-1">TTD Digital Rumah Sakit</div>
                        @php $fotoTtd = $so->fotos->where('tipe','ttd_rs')->first(); @endphp
                        @if($fotoTtd)
                        <div class="mb-2 position-relative d-inline-block" id="ttdRsContainer">
                            <img src="{{ $fotoTtd->url }}" style="max-width:200px;max-height:80px;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;" onclick="window.open('{{ $fotoTtd->url }}','_blank')">
                            <button onclick="hapusFotoSO({{ $fotoTtd->id }}, true)" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;">&times;</button>
                        </div>
                        @else
                        <div id="ttdRsContainer" class="mb-2">
                            <canvas id="ttdCanvas" width="280" height="90"
                                style="border:1px solid #ced4da;border-radius:6px;cursor:crosshair;touch-action:none;background:#fff;display:block"></canvas>
                            <div class="d-flex gap-2 mt-1">
                                <button class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size:.75rem" onclick="clearTtd()"><i class="bx bx-eraser me-1"></i>Hapus</button>
                                <button class="btn btn-primary btn-sm py-0 px-2" style="font-size:.75rem" id="btnSimpanTtd" onclick="simpanTtd()"><i class="bx bx-save me-1"></i>Simpan TTD</button>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>

        {{-- Tabel Stok Sistem --}}
        <div class="col-md-8" id="colStokUtama">
            <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 Stok Sistem ({{ $stoksGudang->count() }} item)</div>
                    @if($so->isDraft())
                    <span class="fs-12 text-muted">Ketik langsung pada kolom <strong>Fisik</strong>, tekan Enter/Tab untuk menyimpan</span>
                    @endif
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height:480px;overflow-y:auto;">
                        <table class="table tbl-stok mb-0">
                            <thead>
                                <tr>
                                    <th style="width:36px">No</th>
                                    <th>Barang</th>
                                    <th style="width:90px">No Lot</th>
                                    <th style="width:90px">No Serial</th>
                                    <th style="width:80px">ED</th>
                                    @if(!empty($sjMap))
                                    <th style="width:120px;white-space:nowrap">No. Pengiriman</th>
                                    <th style="width:85px;white-space:nowrap">Tgl. Kirim</th>
                                    @endif
                                    <th class="text-center" style="width:55px">Sistem</th>
                                    <th class="text-center" style="width:80px">Fisik</th>
                                    <th class="text-center" style="width:60px">Selisih</th>
                                    <th style="width:110px">Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyStoks">
                                @foreach($stoksGudang as $idx => $stok)
                                @php
                                    $item  = $opnameItems->get($stok->id);
                                    $sjKey = $stok->no_serial ? 'sn:'.$stok->no_serial : ($stok->no_lot ? 'lot:'.$stok->no_lot : null);
                                    $sjRow = $sjKey ? ($sjMap[$sjKey] ?? null) : null;
                                @endphp
                                <tr id="row-stok-{{ $stok->id }}" data-stok-id="{{ $stok->id }}"
                                    class="{{ $item ? 'row-'.$item->status_item : '' }}">
                                    <td class="text-center">{{ $idx + 1 }}</td>
                                    <td><strong>{{ $stok->barang?->nama ?? '—' }}</strong>
                                        @if($stok->barang?->ukuran)<small class="text-muted ms-1">{{ $stok->barang->ukuran }}</small>@endif
                                    </td>
                                    <td class="font-monospace">{{ $stok->no_lot ?: '—' }}</td>
                                    <td class="font-monospace">{{ $stok->no_serial ?: '—' }}</td>
                                    <td>{{ $stok->tanggal_kedaluwarsa?->format('d-m-Y') ?? '—' }}</td>
                                    @if(!empty($sjMap))
                                    <td class="font-monospace small">{{ $sjRow['nomor_sj'] ?? '—' }}</td>
                                    <td class="small">{{ $sjRow['tanggal'] ?? '—' }}</td>
                                    @endif
                                    <td class="text-center">{{ $stok->qty }}</td>
                                    <td class="text-center" id="qty-fisik-{{ $stok->id }}">
                                        @if($so->isDraft())
                                        <input type="number" min="0"
                                            class="form-control form-control-sm text-center qty-input-inline"
                                            id="input-fisik-{{ $stok->id }}"
                                            data-stok-id="{{ $stok->id }}"
                                            data-qty-sistem="{{ $stok->qty }}"
                                            value="{{ $item ? $item->qty_fisik : '' }}"
                                            placeholder="—"
                                            style="width:60px;margin:0 auto;padding:2px 4px;font-size:.82rem;">
                                        @else
                                        <span>{{ $item ? $item->qty_fisik : '—' }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center fw-bold" id="selisih-{{ $stok->id }}">
                                        @if($item)
                                        <span class="{{ $item->selisih < 0 ? 'text-danger' : ($item->selisih > 0 ? 'text-primary' : 'text-success') }}">
                                            {{ $item->selisih > 0 ? '+' : '' }}{{ $item->selisih }}
                                        </span>
                                        @else
                                        <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td id="status-{{ $stok->id }}">
                                        @if($item)
                                        @include('gudang.stok-opname._chip-status', ['status' => $item->status_item])
                                        @else
                                        <span class="chip chip-belum">Belum</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                                @if($stoksGudang->isEmpty())
                                <tr><td colspan="{{ 9 + (!empty($sjMap) ? 2 : 0) }}" class="text-center text-muted py-4 fs-13">Tidak ada stok di gudang ini.</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Card Anomali --}}
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0 text-warning"><i class="bx bx-error me-1"></i>Anomali — Tidak Ada di Sistem</div>
                    <div class="d-flex align-items-center gap-2">
                        @if($so->isDraft())
                        <button class="btn btn-warning btn-sm px-2 py-1" style="font-size:.78rem" onclick="bukaModalTambahAnomali()">
                            <i class="bx bx-plus me-1"></i> Tambah Manual
                        </button>
                        @endif
                        <span class="badge bg-warning text-dark" id="badgeAnomali">{{ $anomaliItems->count() }}</span>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table tbl-anomali mb-0">
                            <thead>
                                <tr>
                                    <th>Nama / Keterangan</th>
                                    <th style="width:100px">No Lot</th>
                                    <th style="width:100px">No Serial</th>
                                    <th style="width:80px">ED</th>
                                    <th class="text-center" style="width:60px">Qty</th>
                                    @if($so->isDraft())
                                    <th class="text-center" style="width:80px"></th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody id="tbodyAnomali">
                                @forelse($anomaliItems as $item)
                                <tr id="row-anomali-{{ $item->id }}">
                                    <td id="nama-anomali-{{ $item->id }}">
                                        {{ $item->nama_barang_scan ?: '(tidak dikenali)' }}
                                        @if($item->barang_id)
                                        <span class="badge bg-success ms-1" style="font-size:.7rem">Tercocokkan</span>
                                        @endif
                                    </td>
                                    <td class="font-monospace">{{ $item->no_lot ?: '—' }}</td>
                                    <td class="font-monospace">{{ $item->no_serial ?: '—' }}</td>
                                    <td>{{ $item->tanggal_kedaluwarsa?->format('d-m-Y') ?? '—' }}</td>
                                    <td class="text-center">{{ $item->qty_fisik }}</td>
                                    @if($so->isDraft())
                                    <td class="text-center"><div class="d-flex gap-1 justify-content-center">
                                        <button class="btn btn-primary btn-sm px-2 py-1 me-1" style="font-size:.78rem"
                                            onclick="bukaModalCocokkan({{ $item->id }}, '{{ addslashes($item->nama_barang_scan ?? '') }}')"
                                            data-bs-toggle="tooltip" title="Cocokkan ke master barang">
                                            <i class="bx bx-link-alt"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm px-2 py-1" style="font-size:.78rem"
                                            onclick="hapusAnomali({{ $item->id }})"
                                            data-bs-toggle="tooltip" title="Hapus">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                    </div></td>
                                    @endif
                                </tr>
                                @empty
                                <tr id="anomaliEmpty"><td colspan="6" class="text-center text-muted py-3 fs-13">Tidak ada item anomali.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Fullscreen Scan Overlay --}}
@if($so->isDraft())
<div id="scanOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:#000;flex-direction:column;">
    {{-- Header --}}
    <div style="position:absolute;top:0;left:0;right:0;z-index:2;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);">
        <span style="color:#fff;font-size:.9rem;font-weight:600;"><i class="bx bx-camera me-2"></i>Scan Barang Fisik</span>
        <div style="display:flex;align-items:center;gap:10px;">
            <label for="soFileInput" 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="soFileInput" accept="image/*" style="display:none;">
            <button onclick="tutupOverlayScan()" style="background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:32px;height:32px;font-size:1.1rem;cursor:pointer;line-height:1;">&times;</button>
        </div>
    </div>

    {{-- Video --}}
    <video id="soScanVideo" autoplay playsinline muted style="width:100%;height:100%;object-fit:cover;display:block;"></video>
    <canvas id="soScanCanvas" style="display:none;"></canvas>
    <img id="soFreezeFrame" style="display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">

    {{-- Capture button kiri tengah --}}
    <div id="soCaptureBtnL" style="position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:2;">
        <button onclick="soAmbilFoto()" 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 button kanan tengah --}}
    <div id="soCaptureBtnR" style="position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:2;">
        <button onclick="soAmbilFoto()" 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 overlay --}}
    <div id="soLoading" 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 — full overlay --}}
    <div id="soResultPanel" 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="soResultContent"></div>
    </div>
</div>
@endif

{{-- Modal Cocokkan Anomali --}}
<div class="modal fade" id="modalCocokkan" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0"><i class="bx bx-link-alt me-1"></i>Cocokkan ke Master Barang</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2 fs-13">
                    <span class="text-muted">Nama dari label:</span>
                    <strong id="modalNamaLabel" class="text-warning">—</strong>
                </div>
                <div class="mb-3">
                    <label class="form-label fs-13">Pilih Barang dari Master <span class="text-danger">*</span></label>
                    <select id="selectCocokBarang" class="form-select form-select-sm" style="width:100%"></select>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnSimpanCocokkan" onclick="simpanCocokkan()">
                    <i class="bx bx-link-alt me-1"></i> Cocokkan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Tambah Anomali Manual --}}
<div class="modal fade" id="modalTambahAnomali" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0"><i class="bx bx-plus-circle me-1"></i>Tambah Item Anomali Manual</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2">
                    <div class="col-12">
                        <label class="form-label fs-13 mb-1">Nama Barang <span class="text-danger">*</span></label>
                        <select id="anomNamaSelect" style="width:100%"></select>
                        <div class="fs-11 text-muted mt-1">Pilih dari master atau ketik nama bebas</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label fs-13 mb-1">No Lot</label>
                        <input type="text" id="anomNoLot" class="form-control form-control-sm font-monospace" placeholder="—">
                    </div>
                    <div class="col-6">
                        <label class="form-label fs-13 mb-1">No Serial</label>
                        <input type="text" id="anomNoSerial" class="form-control form-control-sm font-monospace" placeholder="—">
                    </div>
                    <div class="col-6">
                        <label class="form-label fs-13 mb-1">Tanggal ED</label>
                        <input type="text" id="anomED" class="form-control form-control-sm" placeholder="dd-mm-yyyy" autocomplete="off">
                    </div>
                    <div class="col-6">
                        <label class="form-label fs-13 mb-1">Qty <span class="text-danger">*</span></label>
                        <input type="number" id="anomQty" class="form-control form-control-sm" min="1" value="1">
                    </div>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-warning btn-sm" id="btnSimpanAnomaliManual" onclick="simpanAnomaliManual()">
                    <i class="bx bx-plus me-1"></i> Tambah
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Edit Qty --}}
<div class="modal fade" id="modalEditQty" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0">Input Qty Fisik</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2 fs-13">
                    <span class="text-muted">Qty Sistem:</span> <strong id="modalQtySistem">—</strong>
                </div>
                <div class="mb-3">
                    <label class="form-label fs-13">Qty Fisik <span class="text-danger">*</span></label>
                    <input type="number" id="modalQtyFisik" class="form-control form-control-sm qty-input" min="0" value="0">
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnSimpanQty" onclick="simpanFisik()">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const SO_ID          = {{ $so->id }};
const IS_DRAFT       = {{ $so->isDraft() ? 'true' : 'false' }};
const SCAN_URL       = '{{ route('gudang.stok-opname.scan', $so->id) }}';
const UPDATE_URL     = '{{ route('gudang.stok-opname.update-fisik', $so->id) }}';
const ANOMALI_URL    = '{{ route('gudang.stok-opname.simpan-anomali', $so->id) }}';
const SELESAI_URL    = '{{ route('gudang.stok-opname.selesaikan', $so->id) }}';
const UPLOAD_FOTO_URL      = '{{ route('gudang.stok-opname.upload-foto', $so->id) }}';
const NAMA_PETUGAS_URL     = '{{ route('gudang.stok-opname.simpan-nama-petugas', $so->id) }}';
const HAPUS_FOTO_URL  = '{{ route('gudang.stok-opname.hapus-foto', ':id') }}';
const BASE_URL       = '{{ url('') }}';
const CSRF           = document.querySelector('meta[name="csrf-token"]').content;

// Stok sistem dari server
const stoks = {!! json_encode($stoksGudang->map(fn($s) => [
    'id'         => $s->id,
    'nama'       => $s->barang?->nama ?? '—',
    'no_lot'     => $s->no_lot,
    'no_serial'  => $s->no_serial,
    'kedaluwarsa'=> $s->tanggal_kedaluwarsa?->format('Y-m-d'),
    'qty_sistem' => $s->qty,
])) !!};

// Stok yang sudah di-scan (stok_id => {item_id, qty_fisik, status_item})
let opnameMap = {!! json_encode($opnameItems->map(fn($i) => [
    'item_id'    => $i->id,
    'qty_fisik'  => $i->qty_fisik,
    'status_item'=> $i->status_item,
])) !!};

let anomaliCount = {{ $anomaliItems->count() }};
let editingStokId = null;
let editingQtySistem = null;
let cameraStream = null;

// ── Upload foto di dalam overlay (AI scan) ───────────────────────────────────
if (IS_DRAFT) {
    document.getElementById('soFileInput').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);

            window._soFotoBlob = file;

            // Freeze dengan gambar upload, kirim ke AI
            soResetUntukKamera();
            const freeze = document.getElementById('soFreezeFrame');
            freeze.src = base64;
            freeze.style.display = 'block';
            document.getElementById('soScanVideo').style.display = 'none';
            document.getElementById('soCaptureBtnL').style.display = 'none';
            document.getElementById('soCaptureBtnR').style.display = 'none';
            kirimKeAIScan(base64);
        };
        img.src = URL.createObjectURL(file);
        this.value = '';
    });
}

// ── Upload foto manual (tombol di card, tanpa AI) ─────────────────────────────
function uploadManualFotoSO(input) {
    const file = input.files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append('foto', file);
    fd.append('_token', CSRF);
    fetch(UPLOAD_FOTO_URL, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { if (d.id) addFotoToGrid(d.id, d.url); });
    input.value = '';
}

function resizeToBase64(srcCanvas) {
    const MAX = 1024;
    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.75);
}

// ── Fullscreen overlay scan ───────────────────────────────────────────────────
let soStream = null;
let soPendingVerified = [];
let soPendingAnomali  = [];

function bukaOverlayScan() {
    const overlay = document.getElementById('scanOverlay');
    overlay.style.display = 'flex';
    // Reset state
    soPendingVerified = [];
    soPendingAnomali  = [];
    soResetUntukKamera();

    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then(function(stream) {
            soStream = stream;
            const video = document.getElementById('soScanVideo');
            video.srcObject = stream;
        })
        .catch(function(err) {
            alert('Tidak dapat mengakses kamera: ' + err.message);
            tutupOverlayScan();
        });
}

function tutupOverlayScan() {
    if (soStream) { soStream.getTracks().forEach(function(t) { t.stop(); }); soStream = null; }
    document.getElementById('scanOverlay').style.display = 'none';
}

function soResetUntukKamera() {
    document.getElementById('soFreezeFrame').style.display = 'none';
    document.getElementById('soFreezeFrame').src = '';
    document.getElementById('soScanVideo').style.display = 'block';
    document.getElementById('soCaptureBtnL').style.display = 'block';
    document.getElementById('soCaptureBtnR').style.display = 'block';
    document.getElementById('soLoading').style.display = 'none';
    document.getElementById('soResultPanel').style.display = 'none';
    document.getElementById('soResultContent').innerHTML = '';
}

function soAmbilFoto() {
    const video  = document.getElementById('soScanVideo');
    const canvas = document.getElementById('soScanCanvas');
    canvas.width  = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    const base64 = resizeToBase64(canvas);

    // Simpan blob untuk upload nanti saat terapkanHasil
    canvas.toBlob(function(blob) { window._soFotoBlob = blob; }, 'image/jpeg', 0.85);

    // Freeze frame
    const freeze = document.getElementById('soFreezeFrame');
    freeze.src = base64;
    freeze.style.display = 'block';
    video.style.display = 'none';
    document.getElementById('soCaptureBtnL').style.display = 'none';
    document.getElementById('soCaptureBtnR').style.display = 'none';

    kirimKeAIScan(base64);
}

function soFotoUlang() {
    soPendingVerified = [];
    soPendingAnomali  = [];
    window._soFotoBlob = null;
    soResetUntukKamera();
}

function soTerapkanHasil() {
    soPendingVerified.forEach(function(v) { autoSimpanFisik(v.stok_id, v.confidence); });
    soPendingAnomali.forEach(function(a)  { autoSimpanAnomali(a); });
    // Upload foto jika ada blob
    if (window._soFotoBlob) {
        uploadFotoSO(window._soFotoBlob);
        window._soFotoBlob = null;
    }
    tutupOverlayScan();
}

// ── Foto Stok Opname ─────────────────────────────────────────────────────────
function uploadFotoSO(blob) {
    const fd = new FormData();
    fd.append('foto', blob, 'scan.jpg');
    fd.append('_token', CSRF);
    fetch(UPLOAD_FOTO_URL, { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (!d.id) return;
            addFotoToGrid(d.id, d.url);
        });
}

function addFotoToGrid(id, url) {
    const empty = document.getElementById('fotoEmpty');
    if (empty) empty.remove();

    const div = document.createElement('div');
    div.className = 'position-relative';
    div.id = 'foto-item-' + id;
    div.style.cssText = 'width:80px;height:80px;';
    div.innerHTML =
        '<img src="' + url + '" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;" onclick="window.open(\'' + url + '\',\'_blank\')">' +
        '<button onclick="hapusFotoSO(' + id + ')" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>';

    document.getElementById('fotoGrid').appendChild(div);
    const badge = document.getElementById('fotoCount');
    if (badge) badge.textContent = parseInt(badge.textContent || '0') + 1;
}

function hapusFotoSO(id) {
    if (!confirm('Hapus foto ini?')) return;
    fetch(HAPUS_FOTO_URL.replace(':id', id), {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': CSRF },
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) return;
        document.getElementById('foto-item-' + id)?.remove();
        const badge = document.getElementById('fotoCount');
        const newCount = Math.max(0, parseInt(badge?.textContent || '1') - 1);
        if (badge) badge.textContent = newCount;
        if (newCount === 0) {
            document.getElementById('fotoGrid').innerHTML = '<div id="fotoEmpty" class="text-muted fs-12 p-2">Belum ada foto.</div>';
        }
    });
}

// ── Upload Hardcopy SO ────────────────────────────────────────────────────────
function uploadHardcopy(input) {
    if (!input.files || !input.files[0]) return;
    const fd = new FormData();
    fd.append('foto', input.files[0]);
    fd.append('tipe', 'hardcopy');
    fd.append('_token', CSRF);
    input.disabled = true;
    fetch(UPLOAD_FOTO_URL, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            if (!d.id) return;
            const grid = document.getElementById('hardcopyGrid');
            const div  = document.createElement('div');
            div.className = 'position-relative';
            div.id = 'foto-item-' + d.id;
            div.style.cssText = 'width:80px;height:80px;';
            div.innerHTML =
                `<img src="${d.url}" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;" onclick="window.open('${d.url}','_blank')">` +
                `<button onclick="hapusFotoSO(${d.id})" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;">&times;</button>`;
            grid.appendChild(div);
            const badge = document.getElementById('fotoCount');
            if (badge) badge.textContent = parseInt(badge.textContent || '0') + 1;
        })
        .finally(() => { input.disabled = false; input.value = ''; });
}

// ── Simpan Nama Petugas RS ────────────────────────────────────────────────────
function simpanNamaPetugasRs() {
    const val = document.getElementById('inputNamaPetugasRs').value.trim();
    fetch(NAMA_PETUGAS_URL, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ nama_petugas_rs: val }),
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            const btn = document.querySelector('[onclick="simpanNamaPetugasRs()"]');
            const ori = btn.innerHTML;
            btn.innerHTML = '<i class="bx bx-check"></i>';
            btn.classList.replace('btn-primary', 'btn-success');
            setTimeout(() => { btn.innerHTML = ori; btn.classList.replace('btn-success', 'btn-primary'); }, 1500);
        }
    });
}

// ── Upload Foto Petugas RS ───────────────────────────────────────────────────
function uploadFotoPetugas(input) {
    if (!input.files || !input.files[0]) return;
    const fd = new FormData();
    fd.append('foto', input.files[0]);
    fd.append('tipe', 'foto_petugas');
    fd.append('_token', CSRF);
    input.disabled = true;
    fetch(UPLOAD_FOTO_URL, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            if (!d.id) return;
            const grid = document.getElementById('petugasGrid');
            const div  = document.createElement('div');
            div.className = 'position-relative';
            div.id = 'foto-item-' + d.id;
            div.style.cssText = 'width:80px;height:80px;';
            div.innerHTML =
                `<img src="${d.url}" style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;" onclick="window.open('${d.url}','_blank')">` +
                `<button onclick="hapusFotoSO(${d.id})" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;">&times;</button>`;
            grid.appendChild(div);
            const badge = document.getElementById('fotoCount');
            if (badge) badge.textContent = parseInt(badge.textContent || '0') + 1;
        })
        .finally(() => { input.disabled = false; input.value = ''; });
}

// ── TTD Digital RS ────────────────────────────────────────────────────────────
(function initTtdCanvas() {
    const canvas = document.getElementById('ttdCanvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let drawing = false, lastX = 0, lastY = 0;

    function pos(e) {
        const r = canvas.getBoundingClientRect();
        const touch = e.touches ? e.touches[0] : e;
        return [touch.clientX - r.left, touch.clientY - r.top];
    }
    canvas.addEventListener('mousedown',  e => { drawing = true; [lastX, lastY] = pos(e); });
    canvas.addEventListener('mousemove',  e => {
        if (!drawing) return;
        const [x, y] = pos(e);
        ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(x, y);
        ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2; ctx.lineCap = 'round';
        ctx.stroke();
        [lastX, lastY] = [x, y];
    });
    canvas.addEventListener('mouseup',    () => drawing = false);
    canvas.addEventListener('mouseleave', () => drawing = false);
    canvas.addEventListener('touchstart', e => { e.preventDefault(); drawing = true; [lastX, lastY] = pos(e); }, {passive:false});
    canvas.addEventListener('touchmove',  e => {
        if (!drawing) return; e.preventDefault();
        const [x, y] = pos(e);
        ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(x, y);
        ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2; ctx.lineCap = 'round';
        ctx.stroke();
        [lastX, lastY] = [x, y];
    }, {passive:false});
    canvas.addEventListener('touchend', () => drawing = false);
})();

function clearTtd() {
    const canvas = document.getElementById('ttdCanvas');
    if (!canvas) return;
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
}

function simpanTtd() {
    const canvas = document.getElementById('ttdCanvas');
    if (!canvas) return;
    const base64 = canvas.toDataURL('image/png');
    const btn    = document.getElementById('btnSimpanTtd');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

    const fd = new FormData();
    fd.append('foto_base64', base64);
    fd.append('tipe', 'ttd_rs');
    fd.append('_token', CSRF);

    fetch(UPLOAD_FOTO_URL, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            if (!d.id) return;
            const container = document.getElementById('ttdRsContainer');
            container.innerHTML =
                `<div class="mb-2 position-relative d-inline-block" id="foto-item-${d.id}">` +
                `<img src="${d.url}" style="max-width:200px;max-height:80px;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;" onclick="window.open('${d.url}','_blank')">` +
                `<button onclick="hapusFotoSO(${d.id}, true)" style="position:absolute;top:-6px;right:-6px;background:#dc3545;border:none;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer;">&times;</button>` +
                `</div>`;
            const badge = document.getElementById('fotoCount');
            if (badge) badge.textContent = parseInt(badge.textContent || '0') + 1;
        })
        .catch(() => { btn.disabled = false; btn.innerHTML = '<i class="bx bx-save me-1"></i>Simpan TTD'; });
}

// ── Kirim ke AI ───────────────────────────────────────────────────────────────
function soAlertHtml(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 soBtnFotoUlang() {
    return '<button class="btn btn-outline-secondary w-100 mb-2" onclick="soFotoUlang()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>';
}
function soBtnTerapkan() {
    return '<button class="btn btn-success w-100" onclick="soTerapkanHasil()"><i class="bx bx-check me-1"></i> Terapkan Hasil</button>';
}

function kirimKeAIScan(base64) {
    document.getElementById('soLoading').style.display = 'flex';

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

        let html = '';
        if (!res.ok) {
            html = soAlertHtml('danger', res.data.error || 'AI scan gagal.') + soBtnFotoUlang();
        } else if (res.data.minta_ulang) {
            html = soAlertHtml('warning', res.data.alasan_ulang || 'Foto kurang jelas. Mohon foto ulang lebih dekat.') + soBtnFotoUlang();
        } else {
            soPendingVerified = res.data.verified || [];
            soPendingAnomali  = res.data.anomali  || [];

            if (soPendingVerified.length === 0 && soPendingAnomali.length === 0) {
                html = soAlertHtml('warning', 'Tidak ada item terdeteksi. Coba foto lebih dekat atau terang.') + soBtnFotoUlang();
            } else {
                if (soPendingVerified.length > 0) {
                    html += '<p class="fw-semibold fs-13 mb-2 text-success"><i class="bx bx-check-circle me-1"></i>' + soPendingVerified.length + ' stok teridentifikasi:</p><ul class="fs-13 mb-3">';
                    soPendingVerified.forEach(function(v) {
                        const stok = stoks.find(function(s) { return s.id === v.stok_id; });
                        const nama = stok ? (stok.nama + (stok.no_lot ? ' [' + stok.no_lot + ']' : '')) : 'ID ' + v.stok_id;
                        html += '<li>' + nama + ' <span class="text-muted">(+1 qty)</span></li>';
                    });
                    html += '</ul>';
                }
                if (soPendingAnomali.length > 0) {
                    html += '<p class="fw-semibold fs-13 mb-2 text-warning"><i class="bx bx-error me-1"></i>' + soPendingAnomali.length + ' item anomali:</p><ul class="fs-13 mb-3">';
                    soPendingAnomali.forEach(function(a) {
                        html += '<li>' + (a.nama_barang_scan || '(tidak dikenali)') + (a.no_lot ? ' [' + a.no_lot + ']' : '') + '</li>';
                    });
                    html += '</ul>';
                }
                html += '<div class="d-flex gap-2 mt-3">' + soBtnFotoUlang().replace('w-100 mb-2', 'flex-fill') + soBtnTerapkan().replace('w-100', 'flex-fill') + '</div>';
            }
        }
        document.getElementById('soResultContent').innerHTML = html;
    })
    .catch(function() {
        document.getElementById('soLoading').style.display = 'none';
        document.getElementById('soResultPanel').style.display = 'block';
        document.getElementById('soResultContent').innerHTML = soAlertHtml('danger', 'Koneksi gagal. Coba lagi.') + soBtnFotoUlang();
    });
}

// ── Auto simpan stok verified (qty_fisik += 1 setiap scan) ───────────────────
function autoSimpanFisik(stokId, confidence) {
    const stok = stoks.find(function(s) { return s.id === stokId; });
    if (!stok) return;

    const currentQty = opnameMap[stokId] ? opnameMap[stokId].qty_fisik : 0;
    const newQty     = currentQty + 1;

    const row = document.getElementById('row-stok-' + stokId);
    if (row) row.classList.add('row-verified');

    fetch(UPDATE_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ stok_id: stokId, qty_fisik: newQty, ai_confidence: confidence }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) return;
        opnameMap[stokId] = { item_id: d.item_id, qty_fisik: newQty, status_item: d.status_item };
        updateBarisStok(stokId, newQty, d.selisih, d.status_item, d.item_id);
        updateSummaryCards();
    });
}

// ── Inline qty fisik input ────────────────────────────────────────────────────
if (IS_DRAFT) {
    document.getElementById('tbodyStoks').addEventListener('change', function(e) {
        const input = e.target.closest('.qty-input-inline');
        if (!input) return;
        const stokId   = parseInt(input.dataset.stokId);
        const qtySistem = parseInt(input.dataset.qtySistem);
        const val      = input.value.trim();
        if (val === '') return; // kosong: biarkan, belum discan
        const qtyFisik = parseInt(val);
        if (isNaN(qtyFisik) || qtyFisik < 0) { input.value = ''; return; }
        simpanFisikInline(stokId, qtyFisik, input);
    });

    document.getElementById('tbodyStoks').addEventListener('keydown', function(e) {
        if (e.key !== 'Enter') return;
        const input = e.target.closest('.qty-input-inline');
        if (!input) return;
        e.preventDefault();
        input.dispatchEvent(new Event('change', { bubbles: true }));
        // Fokus ke input berikutnya
        const inputs = Array.from(document.querySelectorAll('.qty-input-inline'));
        const idx    = inputs.indexOf(input);
        if (idx < inputs.length - 1) inputs[idx + 1].focus();
    });
}

function simpanFisikInline(stokId, qtyFisik, inputEl) {
    inputEl.disabled = true;
    fetch(UPDATE_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ stok_id: stokId, qty_fisik: qtyFisik, ai_confidence: null }),
    })
    .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
    .then(function(res) {
        inputEl.disabled = false;
        if (!res.ok) { alert(res.data.message || 'Gagal menyimpan.'); return; }
        opnameMap[stokId] = { item_id: res.data.item_id, qty_fisik: qtyFisik, status_item: res.data.status_item };
        updateBarisStokInline(stokId, qtyFisik, res.data.selisih, res.data.status_item);
        updateSummaryCards();
    })
    .catch(function() { inputEl.disabled = false; alert('Koneksi gagal. Coba lagi.'); });
}

function updateBarisStokInline(stokId, qtyFisik, selisih, statusItem) {
    const row = document.getElementById('row-stok-' + stokId);
    if (!row) return;
    row.className = row.className.replace(/row-(verified|cocok|kurang|lebih|belum)/g, '').trim();
    row.classList.add('row-' + statusItem);

    const cellSel = document.getElementById('selisih-' + stokId);
    if (cellSel) {
        const cls = selisih < 0 ? 'text-danger' : selisih > 0 ? 'text-primary' : 'text-success';
        cellSel.innerHTML = '<span class="' + cls + '">' + (selisih > 0 ? '+' : '') + selisih + '</span>';
    }
    const cellStatus = document.getElementById('status-' + stokId);
    if (cellStatus) cellStatus.innerHTML = chipHtml(statusItem);
}

function updateBarisStok(stokId, qtyFisik, selisih, statusItem, itemId) {
    const row = document.getElementById('row-stok-' + stokId);
    if (!row) return;

    row.className = row.className.replace(/row-(verified|cocok|kurang|lebih|belum)/g, '').trim();
    row.classList.add('row-' + statusItem);

    // Update value input inline (jika ada)
    const inputFisik = document.getElementById('input-fisik-' + stokId);
    if (inputFisik) inputFisik.value = qtyFisik;

    const cellSel = document.getElementById('selisih-' + stokId);
    if (cellSel) {
        const cls = selisih < 0 ? 'text-danger' : selisih > 0 ? 'text-primary' : 'text-success';
        cellSel.innerHTML = '<span class="' + cls + '">' + (selisih > 0 ? '+' : '') + selisih + '</span>';
    }

    const cellStatus = document.getElementById('status-' + stokId);
    if (cellStatus) cellStatus.innerHTML = chipHtml(statusItem);
}

// ── Auto simpan anomali dari AI ───────────────────────────────────────────────
function autoSimpanAnomali(aiItem) {
    fetch(ANOMALI_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({
            nama_barang_scan:    aiItem.nama_barang_scan || null,
            no_lot:              aiItem.no_lot || null,
            no_serial:           aiItem.no_serial || null,
            tanggal_kedaluwarsa: aiItem.tanggal_kedaluwarsa || null,
            qty_fisik:           1,
            ai_confidence:       aiItem.confidence || null,
        }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) return;
        tambahBarisAnomali(d.item_id, aiItem.nama_barang_scan, aiItem, 1);
        anomaliCount++;
        document.getElementById('badgeAnomali').textContent = anomaliCount;
    });
}

function tambahBarisAnomali(itemId, nama, aiItem, qtyFisik) {
    const emptyRow = document.getElementById('anomaliEmpty');
    if (emptyRow) emptyRow.remove();

    const namaSafe = (nama || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");

    const tr = document.createElement('tr');
    tr.id = 'row-anomali-' + itemId;
    tr.innerHTML =
        '<td>' + (nama || '(tidak dikenali)') + '</td>' +
        '<td class="font-monospace">' + (aiItem.no_lot || '—') + '</td>' +
        '<td class="font-monospace">' + (aiItem.no_serial || '—') + '</td>' +
        '<td>' + (aiItem.tanggal_kedaluwarsa || '—') + '</td>' +
        '<td class="text-center">' + qtyFisik + '</td>' +
        '<td class="text-center"><div class="d-flex gap-1 justify-content-center">' +
            '<button class="btn btn-primary btn-sm px-2 py-1 me-1" style="font-size:.78rem"' +
                ' onclick="bukaModalCocokkan(' + itemId + ', \'' + namaSafe + '\')"' +
                ' data-bs-toggle="tooltip" title="Cocokkan ke master barang"><i class="bx bx-link-alt"></i></button>' +
            '<button class="btn btn-danger btn-sm px-2 py-1" style="font-size:.78rem"' +
                ' onclick="hapusAnomali(' + itemId + ')"' +
                ' data-bs-toggle="tooltip" title="Hapus"><i class="bx bx-trash"></i></button>' +
        '</div></td>';
    document.getElementById('tbodyAnomali').appendChild(tr);
    initTooltips();
}

function hapusAnomali(itemId) {
    if (!confirm('Hapus item anomali ini?')) return;
    fetch(`${BASE_URL}/gudang/stok-opname/${SO_ID}/item/${itemId}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': CSRF },
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (d.success) {
            document.getElementById('row-anomali-' + itemId)?.remove();
            anomaliCount = Math.max(0, anomaliCount - 1);
            document.getElementById('badgeAnomali').textContent = anomaliCount;
            if (anomaliCount === 0) {
                document.getElementById('tbodyAnomali').innerHTML =
                    '<tr id="anomaliEmpty"><td colspan="6" class="text-center text-muted py-3 fs-13">Tidak ada item anomali.</td></tr>';
            }
        }
    });
}

// ── Summary cards ─────────────────────────────────────────────────────────────
function updateSummaryCards() {
    let belum = 0, cocok = 0, kurang = 0, lebih = 0;
    stoks.forEach(function(s) {
        const entry = opnameMap[s.id];
        if (!entry) { belum++; return; }
        if (entry.status_item === 'cocok')  cocok++;
        if (entry.status_item === 'kurang') kurang++;
        if (entry.status_item === 'lebih')  lebih++;
    });
    document.getElementById('sumCocok').textContent  = cocok;
    document.getElementById('sumKurang').textContent = belum + kurang;
    document.getElementById('sumLebih').textContent  = lebih;
    document.getElementById('sumAnomali').textContent = anomaliCount;
}

function chipHtml(status) {
    const map = {
        'cocok':               '<span class="chip chip-cocok"><i class="bx bx-check me-1"></i>Cocok</span>',
        'kurang':              '<span class="chip chip-kurang"><i class="bx bx-down-arrow-alt me-1"></i>Kurang</span>',
        'lebih':               '<span class="chip chip-lebih"><i class="bx bx-up-arrow-alt me-1"></i>Lebih</span>',
        'tidak_ada_di_sistem': '<span class="chip chip-anomali"><i class="bx bx-question-mark me-1"></i>Tidak di Sistem</span>',
        'anomali_barang':      '<span class="chip chip-anomali"><i class="bx bx-error me-1"></i>Anomali</span>',
    };
    return map[status] || status;
}

// ── Selesaikan ────────────────────────────────────────────────────────────────
function doSelesaikan() {
    const belum = stoks.filter(function(s) { return !opnameMap[s.id]; }).length;
    const msg = belum > 0
        ? 'Masih ada ' + belum + ' item belum discan. Tetap selesaikan opname?'
        : 'Selesaikan proses opname ini? Data tidak dapat diubah lagi setelah diselesaikan.';
    if (!confirm(msg)) return;

    const btn = document.querySelector('[onclick="doSelesaikan()"]');
    const btnOri = btn ? btn.innerHTML : '';
    if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Memproses...'; }

    fetch(SELESAI_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    })
    .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
    .then(function(res) {
        if (res.data.redirect) { window.location.href = res.data.redirect; return; }
        alert(res.data.message || 'Gagal menyelesaikan opname.');
        if (btn) { btn.disabled = false; btn.innerHTML = btnOri; }
    })
    .catch(function() {
        alert('Koneksi gagal. Coba lagi.');
        if (btn) { btn.disabled = false; btn.innerHTML = btnOri; }
    });
}

// Inisialisasi tooltip (termasuk untuk elemen yang ditambahkan dinamis)
function initTooltips() {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
        bootstrap.Tooltip.getOrCreateInstance(el);
    });
}
document.addEventListener('DOMContentLoaded', initTooltips);

// ── Tambah Anomali Manual ─────────────────────────────────────────────────────
let fpAnomED = null;

function bukaModalTambahAnomali() {
    $('#anomNamaSelect').val(null).trigger('change');
    document.getElementById('anomNoLot').value    = '';
    document.getElementById('anomNoSerial').value = '';
    document.getElementById('anomQty').value      = '1';
    if (fpAnomED) fpAnomED.clear();
    new bootstrap.Modal(document.getElementById('modalTambahAnomali')).show();
    setTimeout(function() { $('#anomNamaSelect').select2('open'); }, 400);
}

function simpanAnomaliManual() {
    let namaVal = $('#anomNamaSelect').val() || '';
    // Jika pilihan ketik bebas, strip prefix __free__
    if (namaVal.startsWith('__free__')) namaVal = namaVal.slice(8);
    const nama = namaVal.trim();
    const qty  = parseInt(document.getElementById('anomQty').value);
    if (!nama)               { alert('Isi nama barang terlebih dahulu.'); return; }
    if (isNaN(qty) || qty < 1) { alert('Isi qty dengan benar.'); return; }

    // Konversi dd-mm-yyyy → yyyy-mm-dd untuk backend
    const edDisplay = document.getElementById('anomED').value.trim();
    let edValue = null;
    if (edDisplay) {
        const parts = edDisplay.split('-');
        if (parts.length === 3) edValue = parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    const btn = document.getElementById('btnSimpanAnomaliManual');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>';

    fetch(ANOMALI_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({
            nama_barang_scan:    nama,
            no_lot:              document.getElementById('anomNoLot').value.trim() || null,
            no_serial:           document.getElementById('anomNoSerial').value.trim() || null,
            tanggal_kedaluwarsa: edValue,
            qty_fisik:           qty,
            ai_confidence:       null,
        }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-plus me-1"></i> Tambah';
        if (!d.success) { alert(d.message || 'Gagal menyimpan.'); return; }
        bootstrap.Modal.getInstance(document.getElementById('modalTambahAnomali')).hide();
        tambahBarisAnomali(d.item_id, nama, {
            no_lot:              document.getElementById('anomNoLot').value.trim() || null,
            no_serial:           document.getElementById('anomNoSerial').value.trim() || null,
            tanggal_kedaluwarsa: edDisplay || null,
        }, qty);
        anomaliCount++;
        document.getElementById('badgeAnomali').textContent = anomaliCount;
        updateSummaryCards();
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-plus me-1"></i> Tambah';
        alert('Koneksi gagal. Coba lagi.');
    });
}

// ── Modal Cocokkan Anomali ─────────────────────────────────────────────────
let cocokkanItemId = null;

$(document).ready(function () {
    $('#selectCocokBarang').select2({
        dropdownParent: $('#modalCocokkan'),
        placeholder: '— Cari nama barang —',
        allowClear: true,
        ajax: {
            url: '{{ route('penjualan.cari-barang') }}',
            dataType: 'json',
            delay: 300,
            data: function (p) { return { q: p.term }; },
            processResults: function (d) {
                return { results: d.map(function(b) { return { id: b.id, text: b.nama }; }) };
            },
        },
    });

    // Select2 nama barang anomali — ajax + tags (ketik bebas)
    $('#anomNamaSelect').select2({
        dropdownParent: $('#modalTambahAnomali'),
        placeholder: '— Cari atau ketik nama barang —',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
            url: '{{ route('gudang.stok-opname.cari-barang') }}',
            dataType: 'json',
            delay: 300,
            data: function (p) { return { q: p.term }; },
            processResults: function (data, params) {
                const term = (params.term || '').trim();
                const results = data.map(function(b) { return { id: b.id, text: b.text }; });
                if (term) results.push({ id: '__free__' + term, text: term, isFree: true });
                return { results: results };
            },
        },
        templateResult: function (d) {
            if (d.isFree) return $('<span><i class="bx bx-pencil me-1" style="color:#f59e0b"></i><span>' + $('<div>').text(d.text).html() + '</span> <small style="color:#9ca3af">(ketik bebas)</small></span>');
            return $('<span>').text(d.text);
        },
        templateSelection: function (d) { return d.text; },
    });
});

// Flatpickr untuk tanggal ED anomali (init saat modal pertama kali dibuka)
document.getElementById('modalTambahAnomali').addEventListener('shown.bs.modal', function () {
    if (!fpAnomED) {
        fpAnomED = flatpickr('#anomED', {
            dateFormat: 'd-m-Y',
            allowInput: true,
        });
    }
});

function bukaModalCocokkan(itemId, namaLabel) {
    cocokkanItemId = itemId;
    document.getElementById('modalNamaLabel').textContent = namaLabel || '(tidak dikenali)';
    $('#selectCocokBarang').val(null).trigger('change');
    new bootstrap.Modal(document.getElementById('modalCocokkan')).show();
}

function simpanCocokkan() {
    const barangId = $('#selectCocokBarang').val();
    if (!barangId) { alert('Pilih barang terlebih dahulu.'); return; }

    const btn = document.getElementById('btnSimpanCocokkan');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

    fetch(`${BASE_URL}/gudang/stok-opname/${SO_ID}/anomali/${cocokkanItemId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ barang_id: barangId }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-link-alt me-1"></i> Cocokkan';
        if (!d.success) { alert(d.message || 'Gagal menyimpan.'); return; }

        bootstrap.Modal.getInstance(document.getElementById('modalCocokkan')).hide();

        // Update nama di tabel anomali
        const namaCell = document.getElementById('nama-anomali-' + cocokkanItemId);
        if (namaCell) {
            namaCell.innerHTML = d.nama_barang +
                ' <span class="badge bg-success ms-1" style="font-size:.7rem">Tercocokkan</span>';
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-link-alt me-1"></i> Cocokkan';
        alert('Koneksi gagal.');
    });
}

@if(!$so->isDraft())
function bukaPdfPreview() {
    document.getElementById('iframeSoPdf').src = '{{ route('gudang.stok-opname.pdf', $so->id) }}';
    new bootstrap.Modal(document.getElementById('modalPdfPreview')).show();
}
document.getElementById('modalPdfPreview')?.addEventListener('hidden.bs.modal', function () {
    document.getElementById('iframeSoPdf').src = '';
});
@endif
</script>

@if(!$so->isDraft())
<div class="modal fade" id="modalPdfPreview" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width:88vw">
        <div class="modal-content" style="height:90vh">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0"><i class="bx bx-file-blank me-2"></i>Laporan Stok Opname — {{ $so->nomor_opname }}</h6>
                <div class="d-flex gap-2 ms-auto me-2">
                    <a href="{{ route('gudang.stok-opname.pdf', $so->id) }}" target="_blank" class="btn btn-success btn-sm px-2 py-1">
                        <i class="bx bx-download me-1"></i> Download PDF
                    </a>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="flex:1;overflow:hidden">
                <iframe id="iframeSoPdf" src="" style="width:100%;height:100%;border:none"></iframe>
            </div>
        </div>
    </div>
</div>
@endif
@endsection