@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <style>
        .qty-input::-webkit-inner-spin-button,
        .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .qty-input { -moz-appearance: textfield; }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'">
                            <i class="fas fa-chevron-left me-1"></i>Kembali
                        </button>
                        <button type="submit" id="saveButton" class="btn btn-primary mb-0" onclick="saveData(event)">
                            <i class="fas fa-download me-1"></i>Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header py-2" style="margin-top: 20px;">
                            <h5 class="mb-0">Header {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body py-3">
                            <form id="my-form" autocomplete="off">
                                @csrf
                                <input type="hidden" id="record_id" value="{{ $model->id ?? '' }}">
                                <input type="hidden" name="content_hash" id="content_hash"
                                    value="{{ $content_hash ?? '' }}">
                                <input type="hidden" id="lock_dmenu" value="{{ $lock_dmenu ?? '' }}">
                                <input type="hidden" id="lock_record_id" value="{{ $lock_record_id ?? '' }}">

                                <!-- ROW 1 -->
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="id" class="form-label me-2"
                                                style="min-width:100px;">ID</label>
                                            <input type="text" class="form-control" id="id" name="id"
                                                value="{{ $model->id ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="petugas" class="form-label me-2"
                                                style="min-width:100px;">Petugas</label>
                                            <select id="petugas" name="petugas" class="form-control custom-select"
                                                style="width: 100%">
                                                <option value=""></option>
                                                @foreach ($petugas as $p)
                                                    <option value="{{ $p->value }}" @selected((string) old('petugas', optional($penunjang_in->first())->petugas) === (string) $p->value)>
                                                        {{ $p->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="shift" class="form-label me-2"
                                                style="min-width:100px;">Shift</label>
                                            <select id="shift" name="shift" class="form-control">
                                                <option value=""></option>
                                                @foreach ($shift as $p)
                                                    <option value="{{ $p->value }}" @selected((string) old('shift', optional($penunjang_in->first())->shift) === (string) $p->value)>
                                                        {{ $p->name }}
                                                    </option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                </div>

                                <!-- ROW 2 -->
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="tanggal" class="form-label me-2"
                                                style="min-width:100px;">Tanggal</label>
                                            <input type="date" class="form-control" id="tanggal" name="tanggal"
                                                value="{{ old('tanggal') ?: (optional($penunjang_in->first())->tanggal ? \Carbon\Carbon::parse(optional($penunjang_in->first())->tanggal)->format('Y-m-d') : '') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="jenis_spin" class="form-label me-2"
                                                style="min-width:100px;">Jenis</label>
                                            <select id="jenis_spin" name="jenis_spin" class="form-control">
                                                <option value=""></option>
                                                @foreach ($jenis as $p)
                                                    <option value="{{ $p->value }}" @selected((string) old('jenis_spin', optional($penunjang_in->first())->jenis) === (string) $p->value)>
                                                        {{ $p->name }}
                                                    </option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="group" class="form-label me-2"
                                                style="min-width:100px;">Group</label>
                                            <select id="group" name="group" class="form-control">
                                                <option value=""></option>
                                                @foreach ($group as $p)
                                                    <option value="{{ $p->value }}" @selected((string) old('group', optional($penunjang_in->first())->group) === (string) $p->value)>
                                                        {{ $p->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="pengambil" class="form-label me-2"
                                                style="min-width:100px;">Pengambil</label>
                                            <select id="pengambil" name="pengambil" class="form-control custom-select"
                                                style="width: 100%">
                                                <option value=""></option>
                                                @foreach ($pengambil as $p)
                                                    <option value="{{ $p->id }}" @selected((string) old('pengambil', optional($penunjang_in->first())->pengambil) === (string) $p->id)>
                                                        {{ $p->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>

                    </div>
                    <div class="card-body">
                        @php
                            $hasInactiveBarang = $details->contains(function ($d) {
                                return ($d->barang_isactive ?? '1') == '0';
                            });
                        @endphp
                        @if ($hasInactiveBarang)
                            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center p-3 mb-3 text-white" id="alert-has-inactive" role="alert" style="background-color: #dc3545 !important; border: 1px solid #b02a37 !important; color: #ffffff !important; border-radius: 8px; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);">
                                <i class="fas fa-exclamation-circle me-2 fs-5 text-white" style="color: #ffffff !important;"></i>
                                <div style="font-size: 14px; line-height: 1.5; color: #ffffff !important;">
                                    <strong style="color: #ffffff !important;">Perhatian:</strong> Transaksi ini memuat barang yang berstatus <strong style="color: #ffffff !important;">Non-Aktif</strong> di Master Barang. Transaksi tidak dapat diposting sebelum barang diaktifkan kembali.
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close" style="filter: brightness(0) invert(1);"></button>
                            </div>
                        @endif
                        <div class="table-responsive">
                            <table id="tgrpo-tbl-detail" class="table table-bordered table-striped">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        <th style="text-align:center; border-color: #daecff;">No</th>
                                        <th style="text-align:center; border-color: #daecff;">Act</th>
                                        <th style="text-align:center; border-color: #daecff;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff;">QTY</th>
                                        <th style="text-align:center; border-color: #daecff;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff;">Keperluan</th>
                                        <th style="text-align:center; border-color: #daecff;">Catatan</th>
                                        <th style="display: none;">Type</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-detail">
                                    @foreach ($details as $index => $detail)
                                        <tr class="form-row" data-id="{{ $detail->id }}">
                                            <td class="text-center">{{ ($index + 1) * 10 }}
                                                <input type="hidden" name="tmp_urut[]" value="{{ ($index + 1) * 10 }}">
                                            </td>
                                            <td class="text-center" style="white-space:nowrap;">
                                                <button type="button" class="btn btn-danger btn-sm btn-cancel">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <div class="input-group input-group-sm">
                                                    <input name="tmp_nama_barang[]" class="form-control form-control-sm"
                                                        value="{{ $detail->barang_name }}" placeholder="Pilih Barang…"
                                                        readonly required>
                                                    <input type="hidden" name="tmp_id_barang[]"
                                                        value="{{ $detail->id_barang }}">
                                                    <input type="hidden" name="tmp_nama_barang_id[]"
                                                        value="{{ $detail->kode_baru }}|{{ $detail->kode_lama }}">
                                                    <input type="hidden" name="tmp_kode_lama[]"
                                                        value="{{ $detail->kode_lama }}">
                                                    <input type="hidden" name="tmp_kode_baru[]"
                                                        value="{{ $detail->kode_baru }}">
                                                    <button type="button" class="btn btn-outline-primary btn-find-barang"
                                                        title="Cari Barang">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                                @if (($detail->barang_isactive ?? '1') == '0')
                                                    <span class="badge bg-danger mt-1 badge-inactive-warning" style="font-size: 10px;">
                                                        <i class="fas fa-exclamation-circle me-1"></i>Tidak Aktif
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <input name="tmp_display_kode_lama[]" class="form-control form-control-sm"
                                                    value="{{ $detail->kode_lama }}" readonly>
                                            </td>
                                            <td>
                                                <input name="tmp_display_kode_baru[]" class="form-control form-control-sm"
                                                    value="{{ $detail->kode_baru }}" readonly>
                                            </td>
                                            <td style="width:120px">
                                                <input type="number" step="1" min="0" name="tmp_qty[]"
                                                    class="form-control form-control-sm qty-input"
                                                    value="{{ (float) $detail->qty }}" required>
                                                <input type="hidden" name="tmp_stok[]" class="stok-hidden"
                                                    value="">
                                            </td>
                                            <td style="width:140px">
                                                <input type="text" name="tmp_satuan[]"
                                                    class="form-control form-control-sm"
                                                    value="{{ $detail->satuan_nama }}" disabled>
                                            </td>
                                            <td>
                                                <div class="input-group input-group-sm">
                                                    <input name="tmp_keperluan[]" class="form-control form-control-sm"
                                                        value="{{ $detail->deskripsi }}" placeholder="Pilih Keperluan…"
                                                        readonly required>
                                                    <input type="hidden" name="tmp_keperluan_id[]"
                                                        value="{{ $detail->keperluan }}">
                                                    <button type="button"
                                                        class="btn btn-outline-primary btn-find-keperluan"
                                                        title="Cari Kerperluan">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td>
                                                <input name="tmp_catatan[]" class="form-control form-control-sm"
                                                    value="{{ $detail->catatan }}">
                                            </td>
                                            <td style="display: none;">
                                                <input type="hidden" name="tmp_input_method[]"
                                                    value="{{ $detail->input_method }}">
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr id="add-row">
                                        <td colspan="9" class="text-left">
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                    <i class="fas fa-plus"></i> Tambah
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" id="scanBarcodeBtn"
                                                    data-bs-toggle="modal" data-bs-target="#scanBarcodeModal">
                                                    <i class="fas fa-barcode"></i> Scan Barcode
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- SUPPLIER MODAL --}}
    <div class="modal fade bd-example-modal-lg" id="keperluanModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List Keperluan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <h5 class="font-weight-bolder"></h5>
                        <table id="tbl-keperluan" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($keperluan as $s)
                                    <tr data-id="{{ $s->id }}" data-name="{{ e($s->deskripsi) }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-keperluan mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->deskripsi }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- BARANG MODAL --}}
    <div class="modal fade bd-example-modal-lg" id="barangModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List Nama Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <h5 class="font-weight-bolder"></h5>
                        <table id="tbl-barang" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Kode Baru</th>
                                    <th style="border-color: #daecff;">Kode Lama</th>
                                    <th style="border-color: #daecff;">Name</th>
                                    <th style="border-color: #daecff;">Stok</th>
                                    <th style="border-color: #daecff;">Satuan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($barang as $s)
                                    <tr data-id="{{ $s->id }}" data-kode-baru="{{ $s->kode_baru }}" data-kode-lama="{{ $s->kode_lama }}"
                                        data-name="{{ e($s->nama) }}" data-satuan="{{ e($s->satuan_nama) }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-barang mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->kode_baru }}</td>
                                        <td>{{ $s->kode_lama }}</td>
                                        <td>{{ $s->nama }}</td>
                                        <td>{{ (float) $s->stok }}</td>
                                        <td>{{ $s->satuan_nama }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="scanBarcodeModal" tabindex="-1" aria-labelledby="scanBarcodeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 700px;">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="scanBarcodeModalLabel">
                        <i class="fas fa-barcode me-2"></i>Scan Barcode
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="barcodeInput" class="form-label">Kode Baru / Scan Barcode</label>
                        <input type="text" class="form-control form-control-lg" id="barcodeInput"
                            placeholder="Scan atau ketik kode baru..." autofocus>
                        <small class="text-muted">Arahkan scanner ke barcode atau ketik kode baru secara manual</small>
                    </div>
                    <div id="barcodeResult" class="alert" style="display: none;"></div>
                    <div id="barcodeItemInfo" class="card" style="display: none;">
                        <div class="card-body">
                            <h6 class="card-title text-primary">Informasi Barang:</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Kode Baru</td>
                                            <td>: <span id="infoKodeBaru">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kode Lama</td>
                                            <td>: <span id="infoKodeLama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama</td>
                                            <td>: <span id="infoNama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama Label</td>
                                            <td>: <span id="infoNamaLabel">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kategori</td>
                                            <td>: <span id="infoKategori">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Satuan</td>
                                            <td>: <span id="infoSatuan">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Stok</td>
                                            <td>: <span id="infoStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Min Stok</td>
                                            <td>: <span id="infoMinStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Lokasi</td>
                                            <td>: <span id="infoLokasi">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" id="btnSubmitBarcode" disabled>
                        <i class="fas fa-check me-1"></i>Tambahkan ke Detail
                    </button>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="scanBarcodeModal" tabindex="-1" aria-labelledby="scanBarcodeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 700px;">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="scanBarcodeModalLabel">
                        <i class="fas fa-barcode me-2"></i>Scan Barcode
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="barcodeDisplay" class="form-label">Kode Baru / Scan Barcode</label>

                        {{-- Input yang tampil --}}
                        <input type="text" class="form-control form-control-lg scan-display" id="barcodeDisplay"
                            placeholder="Scan kode baru..." readonly inputmode="none" tabindex="-1" autocomplete="off">

                        {{-- Input tersembunyi khusus mode scan --}}
                        <input type="text" id="barcodeScannerInput" autocomplete="off" inputmode="none"
                            style="position:absolute; left:-9999px; top:0; opacity:0; width:1px; height:1px;">

                        <small class="text-muted" id="barcodeHelpText">
                            Arahkan scanner ke barcode
                        </small>
                    </div>
                    <div id="barcodeResult" class="alert" style="display: none;"></div>
                    <div id="barcodeItemInfo" class="card" style="display: none;">
                        <div class="card-body">
                            <h6 class="card-title text-primary">Informasi Barang:</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Kode Baru</td>
                                            <td>: <span id="infoKodeBaru">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kode Lama</td>
                                            <td>: <span id="infoKodeLama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama</td>
                                            <td>: <span id="infoNama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama Label</td>
                                            <td>: <span id="infoNamaLabel">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kategori</td>
                                            <td>: <span id="infoKategori">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Satuan</td>
                                            <td>: <span id="infoSatuan">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Stok</td>
                                            <td>: <span id="infoStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Min Stok</td>
                                            <td>: <span id="infoMinStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Lokasi</td>
                                            <td>: <span id="infoLokasi">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" id="btnSubmitBarcode" disabled>
                        <i class="fas fa-check me-1"></i>Tambahkan ke Detail
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <style>
        .select2-container {
            width: 100% !important;
        }

        .input-group .form-control {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .input-group .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .input-group.input-group-sm .form-control {
            height: calc(1.5em + .5rem + 2px);
        }

        .input-group .form-control:focus {
            box-shadow: none;
        }

        .btn-find-supplier i {
            pointer-events: none;
        }
    </style>

    <script>
        // ============ EDIT LOCK WARNING ============
        @if (!empty($lock_info))
            document.addEventListener('DOMContentLoaded', function() {
                var lockOpenedAt = new Date('{{ $lock_info->opened_at }}');
                var jamBuka = lockOpenedAt.toLocaleString('id-ID', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian!',
                    html: '<b>{{ $lock_info->username }}</b> sedang membuka halaman edit ini sejak ' +
                        jamBuka +
                        '.<br><br>Anda tetap bisa melanjutkan, namun perubahan bisa saling tertimpa.',
                    confirmButtonText: 'Lanjutkan',
                    confirmButtonColor: '#3085d6',
                });
            });
        @endif

        // ============ RELEASE LOCK ON LEAVE ============
        (function() {
            var lockDmenu = document.getElementById('lock_dmenu') ? document.getElementById('lock_dmenu').value : '';
            var lockRecordId = document.getElementById('lock_record_id') ? document.getElementById('lock_record_id')
                .value : '';
            if (lockDmenu && lockRecordId) {
                window.addEventListener('beforeunload', function() {
                    var payload = new URLSearchParams({
                        _token: '{{ csrf_token() }}',
                        dmenu: lockDmenu,
                        record_id: lockRecordId,
                        username: '{{ auth()->user()->username ?? '' }}'
                    });
                    navigator.sendBeacon('{{ url('/riwayat/edit') }}', payload);
                });
            }
        })();
    </script>

    {{-- Idle Detection: auto-release lock setelah 5 menit tidak aktif --}}
    @include('partials.idle-lock-detection')

    <script>
        let rowNo = (() => {
            const last = Array.from(document.querySelectorAll('#tbody-detail tr.form-row td:nth-child(1)'))
                .map(td => parseInt(td.textContent.trim(), 10))
                .filter(n => !isNaN(n))
                .sort((a, b) => b - a)[0] || 0;
            return last;
        })();
        let addIdx = 0;
        let activeRowEl = null;

        document.addEventListener('DOMContentLoaded', () => {
            const tbody = document.getElementById('tbody-detail');

            document.getElementById('btnAddRow')?.addEventListener('click', () => {
                rowNo += 10;
                const i = addIdx++;
                const html = `
                <tr class="form-row" data-index="${i}">
                    <td class="text-center">${rowNo}
                    <input type="hidden" name="tmp_urut[]" value="${rowNo}">
                    </td>
                    <td class="text-center" style="white-space:nowrap;">
                    <button type="button" class="btn btn-danger btn-sm btn-cancel">
                        <i class="fas fa-trash"></i>
                    </button>
                    </td>
                    <td>
                    <div class="input-group input-group-sm">
                        <input name="tmp_nama_barang[]" class="form-control form-control-sm" placeholder="Pilih Barang…" readonly required>
                        <input type="hidden" name="tmp_id_barang[]">
                        <input type="hidden" name="tmp_nama_barang_id[]">
                        <input type="hidden" name="tmp_kode_lama[]">
                        <input type="hidden" name="tmp_kode_baru[]">
                        <input type="hidden" name="tmp_input_method[]" value="manual">
                        <button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang">
                        <i class="fas fa-search"></i>
                        </button>
                    </div>
                    </td>
                    <td>
                    <input name="tmp_display_kode_lama[]" class="form-control form-control-sm" readonly>
                    </td>
                    <td>
                    <input name="tmp_display_kode_baru[]" class="form-control form-control-sm" readonly>
                    </td>
                    <td style="width:120px">
                    <input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required>
                    <input type="hidden" name="tmp_stok[]" class="stok-hidden">
                    </td>
                    <td style="width:140px">
                    <input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled>
                    </td>
                    <td>
                    <div class="input-group input-group-sm">
                        <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan…" readonly required>
                        <input type="hidden" name="tmp_keperluan_id[]">
                        <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">
                        <i class="fas fa-search"></i>
                        </button>
                    </div>
                    </td>
                    <td>
                    <input name="tmp_catatan[]" class="form-control form-control-sm">
                    </td>
                </tr>`;
                document.getElementById('add-row').insertAdjacentHTML('beforebegin', html);

                // Attach event listener to new qty input
                const newRow = document.getElementById('add-row').previousElementSibling;
                const newQtyInput = newRow.querySelector('.qty-input');
                newQtyInput.addEventListener('input', () => validateQty(newQtyInput));
            });

            // Handler klik di tbody (event delegation)
            tbody.addEventListener('click', (e) => {
                // Cari Supplier
                if (e.target.closest('.btn-find-keperluan')) {
                    activeRowEl = e.target.closest('tr.form-row');
                    new bootstrap.Modal(document.getElementById('keperluanModal')).show();
                    return;
                }

                // Cari Barang
                if (e.target.closest('.btn-find-barang')) {
                    activeRowEl = e.target.closest('tr.form-row');
                    highlightSelectedBarang();
                    new bootstrap.Modal(document.getElementById('barangModal')).show();
                    return;
                }

                // Hapus baris
                if (e.target.closest('.btn-cancel')) {
                    const tr = e.target.closest('tr.form-row');
                    tr?.remove();
                    renumberRows();
                    // Refresh highlight pada modal barang
                    highlightSelectedBarang();
                    return;
                }
            });

            // Handler pilih supplier di modal
            document.getElementById('tbl-keperluan').addEventListener('click', (e) => {
                const pick = e.target.closest('.choose-keperluan');
                if (!pick || !activeRowEl) return;

                const row = pick.closest('tr');
                const id = row.dataset.id || '';
                const name = row.dataset.name || '';

                activeRowEl.querySelector('[name="tmp_keperluan_id[]"]').value = id;
                activeRowEl.querySelector('[name="tmp_keperluan[]"]').value = name;

                bootstrap.Modal.getInstance(document.getElementById('keperluanModal')).hide();
            });

            // Handler pilih barang di modal
            document.getElementById('tbl-barang').addEventListener('click', (e) => {
                const pick = e.target.closest('.choose-barang');
                if (!pick || !activeRowEl) return;

                // Cek jika button dalam status terpilih, jangan lanjutkan
                if (pick.classList.contains('btn-success')) {
                    return;
                }

                const row = pick.closest('tr');
                const kodeBaru = row.dataset.kodeBaru || '';
                const kodeLama = row.dataset.kodeLama || '';
                const name = row.dataset.name || '';
                const satuan = row.dataset.satuan || '';

                activeRowEl.querySelector('[name="tmp_id_barang[]"]').value = row.dataset.id || '';
                activeRowEl.querySelector('[name="tmp_nama_barang_id[]"]').value = kodeBaru + '|' +
                    kodeLama;
                activeRowEl.querySelector('[name="tmp_kode_lama[]"]').value = kodeLama;
                activeRowEl.querySelector('[name="tmp_kode_baru[]"]').value = kodeBaru;
                activeRowEl.querySelector('[name="tmp_nama_barang[]"]').value = name;
                activeRowEl.querySelector('[name="tmp_satuan[]"]').value = satuan;
                activeRowEl.querySelector('[name="tmp_display_kode_lama[]"]').value = kodeLama;
                activeRowEl.querySelector('[name="tmp_display_kode_baru[]"]').value = kodeBaru;

                // Hapus badge tidak aktif jika ada di baris ini
                activeRowEl.querySelector('.badge-inactive-warning')?.remove();

                // Sembunyikan alert atas jika sudah tidak ada barang tidak aktif
                if (document.querySelectorAll('.badge-inactive-warning').length === 0) {
                    document.getElementById('alert-has-inactive')?.remove();
                }

                // Fetch stok
                fetch("{{ URL::to($url_menu) }}/get-stok", {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            barang_id: kodeBaru
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        activeRowEl.querySelector('.stok-hidden').value = data.stok;
                        // Trigger validation on qty input
                        const qtyInput = activeRowEl.querySelector('.qty-input');
                        validateQty(qtyInput);
                    })
                    .catch(err => console.error('Error fetching stok:', err));

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

                // Update highlight setelah pilih barang
                setTimeout(() => highlightSelectedBarang(), 100);
            });

            // Fetch stok for existing rows
            document.querySelectorAll('#tbody-detail tr.form-row').forEach(row => {
                const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]').value;
                const kodeLama = row.querySelector('[name="tmp_kode_lama[]"]').value;
                if (barangId && kodeLama) {
                    fetch("{{ URL::to($url_menu) }}/get-stok", {
                            method: "POST",
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                kode_baru: barangId,
                                kode_lama: kodeLama
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            row.querySelector('.stok-hidden').value = data.stok;
                            // Trigger validation on qty input
                            const qtyInput = row.querySelector('.qty-input');
                            validateQty(qtyInput);
                        })
                        .catch(err => console.error('Error fetching stok:', err));
                }
            });

            // Attach event listeners to existing qty inputs
            document.querySelectorAll('.qty-input').forEach(input => {
                input.addEventListener('input', () => validateQty(input));
            });
        });

        function renumberRows() {
            let n = 10;
            document.querySelectorAll('#tbody-detail tr.form-row').forEach(tr => {
                const tdNo = tr.querySelector('td:nth-child(1)');
                if (tdNo) tdNo.childNodes[0].nodeValue = n;
                const hid = tr.querySelector('input[name="tmp_urut[]"]');
                if (hid) hid.value = n;
                n += 10;
            });
        }

        // Fungsi untuk menandai barang yang sudah dipilih
        function highlightSelectedBarang() {
            // Reset semua baris dulu
            $('#tbl-barang tbody tr').removeClass('table-success').find('.choose-barang').removeClass('btn-success')
                .addClass('btn-primary').text('Pilih').css('cursor', 'pointer');

            // Ambil semua id_barang dan kode_baru yang sudah dipilih di detail
            const selectedIds = new Set();
            const selectedCodesNoId = new Set();
            const allSelectedCodes = new Set();

            document.querySelectorAll('#tbody-detail tr.form-row').forEach(row => {
                const idVal = String(row.querySelector('[name="tmp_id_barang[]"]')?.value || '').trim();
                const barangId = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                const kodeVal = barangId.split('|')[0] || '';

                if (idVal) {
                    selectedIds.add(idVal);
                } else if (kodeVal) {
                    selectedCodesNoId.add(kodeVal);
                }

                if (kodeVal) {
                    allSelectedCodes.add(kodeVal);
                }
            });

            // Tandai baris yang sudah dipilih
            $('#tbl-barang tbody tr').each(function() {
                const idBarang = String($(this).data('id') || '').trim();
                const kodeBaru = String($(this).data('kode-baru') || '').trim();

                let isSelected = false;
                if (idBarang) {
                    isSelected = selectedIds.has(idBarang) || (kodeBaru && selectedCodesNoId.has(kodeBaru));
                } else if (kodeBaru) {
                    isSelected = allSelectedCodes.has(kodeBaru);
                }

                if (isSelected) {
                    $(this).addClass('table-success');
                    $(this).find('.choose-barang').removeClass('btn-primary').addClass('btn-success').text(
                        'Terpilih').css('cursor', 'not-allowed');
                }
            });
        }

        // Fungsi untuk cek apakah barang sudah ada di detail
        function isItemAlreadyInDetail(kodeBaru) {
            let found = false;
            document.querySelectorAll('#tbody-detail tr.form-row').forEach(row => {
                const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                const existingKodeBaru = barangId.split('|')[0] || '';
                if (existingKodeBaru === kodeBaru) {
                    found = true;
                }
            });
            return found;
        }
    </script>

    <script>
        $(document).ready(function() {
            const dtSup = $('#tbl-keperluan').DataTable({
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }],
                order: [
                    [1, 'asc']
                ],
                responsive: true,
                language: {
                    sEmptyTable: "Tidak ada data",
                    sSearch: "Cari:",
                    sLengthMenu: "Tampilkan _MENU_",
                    sInfo: "Menampilkan _START_–_END_ dari _TOTAL_"
                }
            });
            $('#supplierModal').on('shown.bs.modal', function() {
                dtSup.columns.adjust();
            });

            $('#supplierModal').on('hide.bs.modal', function() {
                $(this).find(':focus').blur();
            });

            const dtBrg = $('#tbl-barang').DataTable({
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }],
                order: [
                    [3, 'asc']
                ],
                responsive: true,
                language: {
                    sEmptyTable: "Tidak ada data",
                    sSearch: "Cari:",
                    sLengthMenu: "Tampilkan _MENU_",
                    sInfo: "Menampilkan _START_–_END_ dari _TOTAL_"
                }
            });
            dtBrg.on('draw', function() {
                highlightSelectedBarang();
            });
            $('#barangModal').on('shown.bs.modal', function() {
                dtBrg.columns.adjust();
                highlightSelectedBarang();
            });

            $('#barangModal').on('hide.bs.modal', function() {
                $(this).find(':focus').blur();
            });
        });
    </script>

    <script>
        function saveData(event) {
            event.preventDefault();

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('_method', 'PUT'); // Method spoofing untuk update

            const fields = ['tanggal', 'shift', 'group', 'petugas', 'jenis_spin', 'pengambil'];

            const getVal = f => (document.querySelector(`[name="${f}"]`)?.value || '').trim();
            fields.forEach(f => formData.set(f, getVal(f)));

            // Sertakan content hash untuk optimistic locking
            formData.append('content_hash', document.getElementById('content_hash').value);

            const headerKurang = fields.some(f => !getVal(f));
            if (headerKurang) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data header belum lengkap diisi',
                    text: 'Silakan lengkapi data header terlebih dahulu.',
                    confirmButtonText: 'OK',
                });
                return;
            }

            const rows = document.querySelectorAll('#tbody-detail tr.form-row');
            if (rows.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak Ada Data Detail!',
                    text: 'Silakan Tambahkan Minimal 1 Data Detail.',
                    confirmButtonText: 'OK',
                });
                return;
            }

            // Validasi setiap baris detail sebelum submit
            let validationError = '';
            rows.forEach((row, i) => {
                const rowNum = i + 1;
                const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                const qty = row.querySelector('[name="tmp_qty[]"]')?.value || '';
                const keperluanId = row.querySelector('[name="tmp_keperluan_id[]"]')?.value || '';
                const stok = parseFloat(row.querySelector('.stok-hidden')?.value || 0);

                if (!barangId) validationError += `Baris ${rowNum}: Barang harus dipilih\n`;
                if (!qty || parseFloat(qty) <= 0) validationError += `Baris ${rowNum}: Qty harus lebih dari 0\n`;
                if (!keperluanId) validationError += `Baris ${rowNum}: Keperluan harus dipilih\n`;
            });

            if (validationError) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data Detail Belum Sesuai!',
                    html: '<pre style="text-align:left; white-space:pre-wrap;">' + validationError + '</pre>',
                    confirmButtonText: 'OK',
                });
                return;
            }

            rows.forEach((row, i) => {
                // Pastikan urut memiliki nilai valid (fallback ke index * 10 jika kosong)
                const urutValue = row.querySelector('[name="tmp_urut[]"]')?.value || '';
                formData.append(`details[${i}][urut]`, urutValue || ((i + 1) * 10));
                formData.append(`details[${i}][id_barang]`, row.querySelector('[name="tmp_id_barang[]"]')?.value || '');
                formData.append(`details[${i}][keperluan_id]`, row.querySelector('[name="tmp_keperluan_id[]"]')
                    ?.value || '');
                formData.append(`details[${i}][kode_baru]`, row.querySelector('[name="tmp_kode_baru[]"]')
                    ?.value || '');
                formData.append(`details[${i}][kode_lama]`, row.querySelector('[name="tmp_kode_lama[]"]')
                    ?.value || '');
                formData.append(`details[${i}][qty]`, row.querySelector('[name="tmp_qty[]"]')?.value || '');
                formData.append(`details[${i}][satuan]`, row.querySelector('[name="tmp_satuan[]"]')?.value || '');
                formData.append(`details[${i}][catatan]`, row.querySelector('[name="tmp_catatan[]"]')?.value || '');
                formData.append(`details[${i}][input_method]`, row.querySelector('[name="tmp_input_method[]"]')
                    ?.value || '');
            });

            // Get encrypted ID
            const encryptedId = '{{ $idencrypt }}';

            fetch("{{ URL::to($url_menu) }}/" + encryptedId, {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: formData,
                })
                .then(async response => {
                    const text = await response.text();

                    let data = null;

                    try {
                        data = JSON.parse(text);
                    } catch (e) {
                        // Kalau controller pakai dd(), error Laravel, atau response HTML
                        throw new Error(text);
                    }

                    if (response.status === 409) {
                        if (data.error_type === 'already_posted') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sudah Diposting!',
                                text: data.message || 'Transaksi ini sudah diposting.',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = "{{ url($url_menu) }}";
                            });

                            throw new Error('ALREADY_POSTED');
                        }

                        Swal.fire({
                            icon: 'warning',
                            title: 'Konflik Data!',
                            text: data.message || 'Data telah diubah oleh pengguna lain.',
                            confirmButtonText: 'Muat Ulang'
                        }).then(() => {
                            window.location.href = window.location.pathname +
                                (window.location.search ? window.location.search + '&' : '?') +
                                '_t=' + Date.now();
                        });

                        throw new Error('CONFLICT');
                    }

                    if (!response.ok) {
                        throw new Error(data.message || text || 'Request gagal');
                    }

                    return data;
                })
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Sukses',
                            text: 'Data Transaksi Berhasil Diupdate',
                            showConfirmButton: true,
                        }).then(() => {
                            window.location.href = "{{ url($url_menu) }}";
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Gagal!',
                            text: 'Gagal mengupdate data: ' + (data.message || 'Unknown error'),
                            confirmButtonText: 'OK'
                        });
                    }
                })
                .catch(err => {
                    console.error("Fetch error:", err);

                    if (err.message === 'CONFLICT' || err.message === 'ALREADY_POSTED') return;

                    Swal.fire({
                        icon: 'error',
                        title: 'Debug / Error',
                        html: `
            <div style="text-align:left; max-height:400px; overflow:auto; font-size:12px;">
                <pre>${escapeHtml(err.message)}</pre>
            </div>
        `,
                        width: '90%',
                        confirmButtonText: 'OK'
                    });
                });

            function escapeHtml(text) {
                return String(text)
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }
        }
    </script>
    <script>
        function validateQty(qtyInput) {
            const row = qtyInput.closest('tr');
            const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]').value;
            if (!barangId) return; // Jangan validasi jika belum pilih barang

            const stokHidden = row.querySelector('.stok-hidden');
            const stok = parseFloat(stokHidden.value) || 0;
            const qty = parseFloat(qtyInput.value) || 0;

            // Remove existing error message
            const existingError = row.querySelector('.qty-error');
            if (existingError) existingError.remove();

            // Reset background
            qtyInput.classList.remove('is-invalid');
        }
    </script>

    {{-- <script>
        // Scan Barcode functionality
        document.addEventListener('DOMContentLoaded', function() {
            const scanBarcodeModal = document.getElementById('scanBarcodeModal');
            const barcodeInput = document.getElementById('barcodeInput');
            const barcodeResult = document.getElementById('barcodeResult');
            const barcodeItemInfo = document.getElementById('barcodeItemInfo');
            const btnSubmitBarcode = document.getElementById('btnSubmitBarcode');

            let searchTimeout = null;
            let startTime = 0;
            let isPasteMode = false;
            let isScannerLikeInput = false;

            scanBarcodeModal.addEventListener('shown.bs.modal', () => {
                barcodeInput.value = '';
                barcodeInput.focus();
                barcodeResult.style.display = 'none';
                barcodeItemInfo.style.display = 'none';
                btnSubmitBarcode.disabled = true;
                scannedItemData = null;

                startTime = 0;
                keyCount = 0;
                isPasteMode = false;
            });

            barcodeInput.addEventListener('paste', function() {
                isPasteMode = true;
            });

            barcodeInput.addEventListener('keydown', function(e) {
                if (startTime === 0 && e.key !== 'Enter') {
                    startTime = Date.now();
                    isScannerLikeInput = false;
                }

                if (e.key === 'Enter') {
                    e.preventDefault();
                    clearTimeout(searchTimeout);

                    const kodeBaru = this.value.trim();
                    if (kodeBaru.length < 3) return;

                    const duration = Date.now() - startTime;
                    const avgTimePerChar = kodeBaru.length ? duration / kodeBaru.length : 999;

                    let method = 'manual';

                    if (!isPasteMode && avgTimePerChar < 70) {
                        method = 'scan';
                        isScannerLikeInput = true;
                    }

                    searchBarcode(kodeBaru, method);

                    startTime = 0;
                    isPasteMode = false;
                }
            });

            barcodeInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                const kodeBaru = this.value.trim();

                if (kodeBaru.length < 3) {
                    barcodeResult.style.display = 'none';
                    barcodeItemInfo.style.display = 'none';
                    btnSubmitBarcode.disabled = true;
                    scannedItemData = null;
                    return;
                }

                searchTimeout = setTimeout(() => {
                    if (!isScannerLikeInput) {
                        searchBarcode(kodeBaru, 'manual');
                    }
                }, 500);
            });

            function searchBarcode(kodeBaru, method = 'manual') {
                barcodeResult.className = 'alert alert-info';
                barcodeResult.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Mencari barang...';
                barcodeResult.style.display = 'block';
                barcodeItemInfo.style.display = 'none';
                btnSubmitBarcode.disabled = true;

                fetch("{{ URL::to($url_menu) }}/search-barcode", {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            kode_baru: kodeBaru,
                            input_method: method
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success && data.item) {
                            console.log('ll', data);
                            // Item ditemukan
                            barcodeResult.className = 'alert alert-success';
                            barcodeResult.innerHTML =
                                '<i class="fas fa-check-circle me-2"></i>Barang ditemukan!';

                            // Tampilkan info barang
                            document.getElementById('infoKodeBaru').textContent = data.item.kode_baru || '-';
                            document.getElementById('infoKodeLama').textContent = data.item.kode_lama || '-';
                            document.getElementById('infoNama').textContent = data.item.nama || '-';
                            document.getElementById('infoNamaLabel').textContent = data.item.nama_label || '-';
                            document.getElementById('infoKategori').textContent = data.item.kategori || '-';
                            document.getElementById('infoSatuan').textContent = data.item.satuan_nama || '-';
                            document.getElementById('infoStok').textContent = parseFloat(data.item.stok) || '0';
                            document.getElementById('infoMinStok').textContent = parseFloat(data.item
                                .min_stok) || '0';
                            document.getElementById('infoLokasi').textContent = data.item.lokasi || '-';

                            barcodeItemInfo.style.display = 'block';
                            btnSubmitBarcode.disabled = false;

                            // Simpan data item untuk digunakan saat submit
                            scannedItemData = data.item;
                            scannedItemData.input_method = (data.input_method === 'scan') ?
                                (data.ip_address || 'scan') :
                                'manual';
                        } else {
                            barcodeResult.className = 'alert alert-danger';
                            barcodeResult.innerHTML =
                                '<i class="fas fa-times-circle me-2"></i>Barang tidak ditemukan dengan kode: <strong>' +
                                kodeBaru + '</strong>';
                            barcodeItemInfo.style.display = 'none';
                            btnSubmitBarcode.disabled = true;
                            scannedItemData = null;
                        }
                    })
                    .catch(err => {
                        console.error('Error searching barcode:', err);
                        barcodeResult.className = 'alert alert-danger';
                        barcodeResult.innerHTML =
                            '<i class="fas fa-exclamation-triangle me-2"></i>Terjadi kesalahan saat mencari barang';
                        barcodeItemInfo.style.display = 'none';
                        btnSubmitBarcode.disabled = true;
                        scannedItemData = null;
                    });
            }

            // Submit barcode - tambahkan ke detail
            btnSubmitBarcode.addEventListener('click', () => {
                if (!scannedItemData) return;

                // Cek apakah barang sudah ada di detail
                if (isItemAlreadyInDetail(scannedItemData.kode_baru)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Barang Sudah Ada!',
                        text: 'Barang "' + scannedItemData.nama + '" sudah ada pada detail.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Tambahkan row baru dengan data barang
                addRowWithScannedData(scannedItemData);

                // Tutup modal
                bootstrap.Modal.getInstance(scanBarcodeModal).hide();

                // Tampilkan notifikasi
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Barang "' + scannedItemData.nama + '" ditambahkan ke detail',
                    timer: 2000,
                    showConfirmButton: false
                });
            });

            // Fungsi untuk menambahkan row dengan data hasil scan
            function addRowWithScannedData(item) {
                rowNo += 10;
                const i = addIdx++;

                const html = `
                <tr class="form-row" data-index="${i}">
                    <td class="text-center">${rowNo}
                    <input type="hidden" name="tmp_urut[]" value="${rowNo}">
                    </td>
                    <td class="text-center" style="white-space:nowrap;">
                    <button type="button" class="btn btn-danger btn-sm btn-cancel">
                        <i class="fas fa-trash"></i>
                    </button>
                    </td>
                    <td>
                    <div class="input-group input-group-sm">
                        <input name="tmp_nama_barang[]" class="form-control form-control-sm" value="${escapeHtml(item.nama)}" placeholder="Pilih Barang…" readonly required>
                        <input type="hidden" name="tmp_nama_barang_id[]" value="${item.kode_baru || ''}|${item.kode_lama || ''}">
                        <input type="hidden" name="tmp_kode_lama[]" value="${item.kode_lama || ''}">
                        <input type="hidden" name="tmp_kode_baru[]" value="${item.kode_baru || ''}">
                        <input type="hidden" name="tmp_input_method[]" value="${item.input_method || ''}">
                        <button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang">
                        <i class="fas fa-search"></i>
                        </button>
                    </div>
                    </td>
                    <td>
                    <input name="tmp_display_kode_lama[]" class="form-control form-control-sm" value="${escapeHtml(item.kode_lama || '')}" readonly>
                    </td>
                    <td>
                    <input name="tmp_display_kode_baru[]" class="form-control form-control-sm" value="${escapeHtml(item.kode_baru || '')}" readonly>
                    </td>
                    <td style="width:120px">
                    <input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" value="0" required>
                    <input type="hidden" name="tmp_stok[]" class="stok-hidden" value="${item.stok || 0}">
                    </td>
                    <td style="width:140px">
                    <input type="text" name="tmp_satuan[]" class="form-control form-control-sm" value="${escapeHtml(item.satuan_nama || '')}" disabled>
                    </td>
                    <td>
                    <div class="input-group input-group-sm">
                        <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan…" readonly required>
                        <input type="hidden" name="tmp_keperluan_id[]">
                        <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">
                        <i class="fas fa-search"></i>
                        </button>
                    </div>
                    </td>
                    <td>
                    <input name="tmp_catatan[]" class="form-control form-control-sm">
                    </td>
                </tr>
            `;

                const tbody = document.getElementById('tbody-detail');
                const addRow = document.getElementById('add-row');
                addRow.insertAdjacentHTML('beforebegin', html);

                // Attach event listener to new qty input
                const newRow = addRow.previousElementSibling;
                const newQtyInput = newRow.querySelector('.qty-input');
                newQtyInput.addEventListener('input', () => validateQty(newQtyInput));

                // Focus ke qty input
                newQtyInput.focus();
                newQtyInput.select();
            }

            // Helper function untuk escape HTML
            function escapeHtml(text) {
                if (!text) return '';
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        });
    </script> --}}
    <script>
        const barcodeDisplay = document.getElementById('barcodeDisplay');
        const barcodeScannerInput = document.getElementById('barcodeScannerInput');
        const barcodeHelpText = document.getElementById('barcodeHelpText');
        const barcodeResult = document.getElementById('barcodeResult');
        const barcodeItemInfo = document.getElementById('barcodeItemInfo');
        const btnSubmitBarcode = document.getElementById('btnSubmitBarcode');
        const scanBarcodeModal = document.getElementById('scanBarcodeModal');

        let scanStartTime = null;
        let lastKeyTime = null;
        let maxKeyGap = 0;

        const MAX_SCAN_DURATION = 2000;
        const MIN_BARCODE_LENGTH = 3;

        function focusScannerInput() {
            setTimeout(function() {
                barcodeScannerInput.focus();
            }, 100);
        }

        function resetScanBuffer() {
            scanStartTime = null;
            barcodeScannerInput.value = '';
        }

        function resetBarcodeScanForm() {
            barcodeDisplay.value = '';
            barcodeScannerInput.value = '';

            barcodeResult.style.display = 'none';
            barcodeItemInfo.style.display = 'none';
            btnSubmitBarcode.disabled = true;
            scannedItemData = null;

            if (barcodeHelpText) {
                barcodeHelpText.textContent = 'Arahkan scanner ke barcode';
            }

            resetScanBuffer();
            focusScannerInput();
        }

        barcodeScannerInput.addEventListener('input', function() {
            if (scanStartTime === null && this.value.length > 0) {
                scanStartTime = Date.now();
            }

            // Jangan isi barcodeDisplay di sini
            // barcodeDisplay baru diisi setelah data valid dari database
        });

        barcodeScannerInput.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
                e.preventDefault();
                resetScanBuffer();
                focusScannerInput();
                return;
            }

            if (e.key === 'Enter') {
                e.preventDefault();

                const kodeBaru = barcodeScannerInput.value.trim();
                const duration = scanStartTime ? Date.now() - scanStartTime : 0;

                console.log('SCAN VALUE:', kodeBaru);
                console.log('SCAN DURATION:', duration);

                if (kodeBaru.length < MIN_BARCODE_LENGTH) {
                    resetScanBuffer();
                    focusScannerInput();
                    return;
                }

                if (duration > MAX_SCAN_DURATION) {
                    resetScanBuffer();

                    Swal.fire({
                        icon: 'warning',
                        title: 'Input Manual Tidak Diizinkan',
                        text: 'Gunakan scanner barcode.',
                        confirmButtonColor: '#008284'
                    }).then(() => {
                        focusScannerInput();
                    });

                    return;
                }

                searchBarcode(kodeBaru, 'scan');

                resetScanBuffer();
                focusScannerInput();
            }
        });

        barcodeScannerInput.addEventListener('paste', function(e) {
            e.preventDefault();
            resetScanBuffer();
            focusScannerInput();
        });

        scanBarcodeModal.addEventListener('shown.bs.modal', function() {
            barcodeDisplay.readOnly = true;
            barcodeDisplay.setAttribute('readonly', true);
            barcodeDisplay.setAttribute('inputmode', 'none');
            barcodeDisplay.setAttribute('tabindex', '-1');

            barcodeScannerInput.setAttribute('inputmode', 'none');
            barcodeScannerInput.setAttribute('autocomplete', 'off');

            resetBarcodeScanForm();
        });

        scanBarcodeModal.addEventListener('hidden.bs.modal', function() {
            resetScanBuffer();
        });

        barcodeDisplay.addEventListener('focus', function(e) {
            barcodeDisplay.blur();
            focusScannerInput();
        });

        barcodeDisplay.addEventListener('click', function(e) {
            e.preventDefault();
            barcodeDisplay.blur();
            focusScannerInput();
        });

        barcodeDisplay.addEventListener('touchstart', function(e) {
            e.preventDefault();
            barcodeDisplay.blur();
            focusScannerInput();
        });

        function searchBarcode(kodeBaru, method = 'scan') {
            barcodeResult.className = 'alert alert-info';
            barcodeResult.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Mencari barang...';
            barcodeResult.style.display = 'block';
            barcodeItemInfo.style.display = 'none';
            btnSubmitBarcode.disabled = true;
            scannedItemData = null;

            fetch("{{ URL::to($url_menu) }}/search-barcode", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        kode_baru: kodeBaru,
                        input_method: method
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success && data.item) {
                        barcodeResult.className = 'alert alert-success';
                        barcodeResult.innerHTML =
                            '<i class="fas fa-check-circle me-2"></i>Barang ditemukan!';

                        // Display baru diisi kalau barang valid dari database
                        barcodeDisplay.value = data.item.kode_baru || kodeBaru;

                        document.getElementById('infoKodeBaru').textContent = data.item.kode_baru || '-';
                        document.getElementById('infoKodeLama').textContent = data.item.kode_lama || '-';
                        document.getElementById('infoNama').textContent = data.item.nama || '-';
                        document.getElementById('infoNamaLabel').textContent = data.item.nama_label || '-';
                        document.getElementById('infoKategori').textContent = data.item.kategori || '-';
                        document.getElementById('infoSatuan').textContent = data.item.satuan_nama || '-';
                        document.getElementById('infoStok').textContent = parseFloat(data.item.stok) || '0';
                        document.getElementById('infoMinStok').textContent = parseFloat(data.item.min_stok) || '0';
                        document.getElementById('infoLokasi').textContent = data.item.lokasi || '-';

                        barcodeItemInfo.style.display = 'block';
                        btnSubmitBarcode.disabled = false;

                        scannedItemData = data.item;
                        scannedItemData.input_method = 'scan';
                    } else {
                        barcodeDisplay.value = '';

                        barcodeResult.className = 'alert alert-danger';
                        barcodeResult.innerHTML =
                            '<i class="fas fa-times-circle me-2"></i>Barang tidak ditemukan dengan kode: <strong>' +
                            kodeBaru + '</strong>';

                        barcodeItemInfo.style.display = 'none';
                        btnSubmitBarcode.disabled = true;
                        scannedItemData = null;
                    }
                })
                .catch(err => {
                    console.error('Error searching barcode:', err);

                    barcodeDisplay.value = '';

                    barcodeResult.className = 'alert alert-danger';
                    barcodeResult.innerHTML =
                        '<i class="fas fa-exclamation-triangle me-2"></i>Terjadi kesalahan saat mencari barang';

                    barcodeItemInfo.style.display = 'none';
                    btnSubmitBarcode.disabled = true;
                    scannedItemData = null;
                });
        }

        btnSubmitBarcode.addEventListener('click', function() {
            if (!scannedItemData) return;

            if (isItemAlreadyInDetail(scannedItemData.kode_baru)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Barang Sudah Ada!',
                    text: 'Barang "' + scannedItemData.nama + '" sudah ada pada detail.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            addRowWithScannedData(scannedItemData);

            bootstrap.Modal.getInstance(scanBarcodeModal).hide();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: 'Barang "' + scannedItemData.nama + '" ditambahkan ke detail',
                timer: 2000,
                showConfirmButton: false
            });
        });

        function addRowWithScannedData(item) {
            rowNo += 10;

            const formRow =
                '<tr class="form-row">' +


                '  <td class="text-center">' + rowNo +
                '    <input type="hidden" name="tmp_urut[]" value="' + rowNo + '">' +
                '  </td>' +

                '  <td class="text-center" style="white-space:nowrap;">' +
                '    <button type="button" class="btn btn-danger btn-sm btn-cancel"><i class="fas fa-times"></i></button>' +
                '  </td>' +

                '  <td>' +
                '    <div class="input-group input-group-sm">' +
                '      <input name="tmp_nama_barang[]" class="form-control form-control-sm" placeholder="Pilih Barang…" readonly required value="' +
                escapeHtml(item.nama) + '">' +
                '      <input type="hidden" name="tmp_id_barang[]" value="' + escapeHtml(item.id || '') + '">' +
                '      <input type="hidden" name="tmp_nama_barang_id[]" value="' + escapeHtml((item.kode_baru || '') + '|' +
                    (item.kode_lama || '')) + '">' +
                '      <input type="hidden" name="tmp_kode_lama[]" value="' + escapeHtml(item.kode_lama || '') + '">' +
                '      <input type="hidden" name="tmp_kode_baru[]" value="' + escapeHtml(item.kode_baru || '') + '">' +
                '      <input type="hidden" name="tmp_input_method[]" value="' + escapeHtml(item.input_method || 'scan') +
                '">' +
                '      <button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang">' +
                '        <i class="fas fa-search"></i>' +
                '      </button>' +
                '    </div>' +
                '  </td>' +

                '  <td><input name="tmp_display_kode_lama[]" class="form-control form-control-sm" readonly value="' +
                escapeHtml(item.kode_lama || '') + '"></td>' +
                '  <td><input name="tmp_display_kode_baru[]" class="form-control form-control-sm" readonly value="' +
                escapeHtml(item.kode_baru || '') + '"></td>' +

                '  <td style="width:120px">' +
                '    <input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required value="0">' +
                '    <input type="hidden" name="tmp_stok[]" class="stok-hidden" value="' + escapeHtml(item.stok || 0) +
                '">' +
                '  </td>' +

                '  <td style="width:140px">' +
                '    <input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled value="' +
                escapeHtml(item.satuan_nama || '') + '">' +
                '  </td>' +

                '  <td>' +
                '    <div class="input-group input-group-sm">' +
                '      <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan" readonly required>' +
                '      <input type="hidden" name="tmp_keperluan_id[]">' +
                '      <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">' +
                '        <i class="fas fa-search"></i>' +
                '      </button>' +
                '    </div>' +
                '  </td>' +

                '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                '</tr>';

            const addRow = document.getElementById('add-row');
            addRow.insertAdjacentHTML('beforebegin', formRow);

            const newRow = addRow.previousElementSibling;
            const newQtyInput = newRow.querySelector('.qty-input');

            newQtyInput.addEventListener('input', function() {
                validateQty(newQtyInput);
            });

            newQtyInput.focus();
            newQtyInput.select();
        }

        function escapeHtml(text) {
            if (text === null || text === undefined) return '';

            const div = document.createElement('div');
            div.textContent = String(text);

            return div.innerHTML;
        }
    </script>
    <script>
        document.addEventListener('wheel', function(event) {
            if (event.target.matches('.qty-input')) event.preventDefault();
        }, { passive: false });
    </script>
@endpush