@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4" style="margin-bottom: 30px;">
        <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="card">
                    <div class="card-header py-2" style="margin-top: 20px;">
                        <h5 class="mb-0 pb-2">Header {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body py-3">
                        <form id="my-form" autocomplete="off">
                            @csrf
                            @if (isset($is_edit) && $is_edit)
                                <input type="hidden" name="edit_id" value="{{ $edit_id ?? '' }}">
                                <input type="hidden" name="is_edit" value="1">
                                <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 ?? '' }}">
                            @endif
                            <!-- ROW 1 -->
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="id_transaksi" class="form-label me-2" style="min-width:100px;">ID</label>
                                        <input type="text" class="form-control" id="id_transaksi" name="id_transaksi"
                                            value="{{ $list->id_transaksi ?? '' }}" placeholder="--" readonly>
                                    </div>
                                </div>
                                <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" required value="{{ $list->tanggal ?? date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="jenis" class="form-label me-2"
                                            style="min-width:100px;">Jenis Repair</label>
                                        <select id="jenis" name="jenis" class="form-control" required>
                                            <option value="">Pilih Jenis</option>
                                            @foreach($repair_options ?? [] as $option)
                                                <option value="{{ $option->value }}" {{ ($list->jenis ?? '') == $option->value ? 'selected' : '' }}>{{ $option->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="petugas" class="form-label me-2"
                                            style="min-width:100px;">Petugas</label>
                                        <select id="petugas" name="petugas" class="form-control" required>
                                            <option value="">Pilih Petugas</option>
                                            @foreach($petugas_options ?? [] as $option)
                                                <option value="{{ $option->value }}" {{ ($list->petugas ?? '') == $option->value ? 'selected' : '' }}>{{ $option->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" required>
                                            <option value="">Pilih Shift</option>
                                            @foreach($shift_options ?? [] as $option)
                                                <option value="{{ $option->value }}" {{ ($list->shift ?? '') == $option->value ? 'selected' : '' }}>{{ $option->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" required>
                                            <option value="">Pilih Group</option>
                                            @foreach($group_options ?? [] as $option)
                                                <option value="{{ $option->value }}" {{ ($list->group ?? '') == $option->value ? 'selected' : '' }}>{{ $option->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </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 py-2"><!-- header lebih rapat -->
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        <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;" id="th-lpb">No. LPB</th>
                                        <th style="text-align:center; border-color: #daecff;" id="th-supplier">Nama Supplier</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;">Catatan</th>
                                        <th style="text-align:center; border-color: #daecff;" id="th-gambar">Gambar</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-grpo">
                                    {{-- Row tombol tambah --}}
                                    <tr id="add-row">
                                        <td colspan="11" class="text-left">
                                            <button type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                <i class="fas fa-plus"></i> Tambah
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" id="supplierModal" 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 Supplier</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-suppliers" 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 ($supplier ?? [] as $s)
                                    <tr data-id="{{ $s->id }}" data-name="{{ $s->nama }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-supplier mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->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 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="{{ $s->nama }}"
                                        data-satuan="{{ $s->satuan }}" data-nama-satuan="{{ $s->nama_satuan }}">
                                        <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->nama_satuan }}</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>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <style>
            .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>

            $(document).ready(function() {
                const dtSupplier = $('#tbl-suppliers').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [1, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                        sProcessing: "Sedang memproses...",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan data yang sesuai",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        sInfoFiltered: "(disaring dari _MAX_ total data)",
                        sSearch: "Cari:",
                        oPaginate: {
                            sFirst: "Pertama",
                            sPrevious: "Sebelumnya",
                            sNext: "Selanjutnya",
                            sLast: "Terakhir"
                        },
                        oAria: {
                            sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                            sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
                        }
                    }
                });

                $('#supplierModal').on('shown.bs.modal', function() {
                    dtSupplier.columns.adjust().responsive.recalc();
                });

                const dtBarang = $('#tbl-barang').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [3, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                        sProcessing: "Sedang memproses...",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan data yang sesuai",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        sInfoFiltered: "(disaring dari _MAX_ total data)",
                        sSearch: "Cari:",
                        oPaginate: {
                            sFirst: "Pertama",
                            sPrevious: "Sebelumnya",
                            sNext: "Selanjutnya",
                            sLast: "Terakhir"
                        },
                        oAria: {
                            sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                            sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
                        }
                    }
                });

                $('#barangModal').on('shown.bs.modal', function() {
                    dtBarang.columns.adjust().responsive.recalc();
                    highlightSelectedBarang();
                });
            });

            // 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-grpo tr.form-row').forEach(row => {
                    const idVal = String(row.querySelector('[name="tmp_id_barang[]"]')?.value || '').trim();
                    const rawKode = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                    const kodeVal = rawKode.includes('|') ? rawKode.split('|')[0] : rawKode;

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

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

                // Tandai baris yang sudah dipilih (konversi ke string untuk perbandingan)
                $('#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');
                    }
                });
            }
        </script>
        <script>
            // Global variable to store complete data for saving
            let completeRepairData = [];
            const trsrepStorageBase = '{{ asset('storage') }}/';

            // Function to save all repair data
            function saveData(event) {
                event.preventDefault();

                // Collect all repair detail data
                const details = [];
                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');

                rows.forEach((row, index) => {
                    const noLpb = row.querySelector('[name="tmp_lpb_no[]"]')?.value?.trim();
                    const supplier = row.querySelector('[name="tmp_supplier[]"]')?.value?.trim();
                    const supplierId = row.querySelector('[name="tmp_supplier_id[]"]')?.value?.trim();
                    const namaBarang = row.querySelector('[name="tmp_nama_barang[]"]')?.value?.trim();
                    const idBarang = row.querySelector('[name="tmp_id_barang[]"]')?.value?.trim();
                    const kodeBaru = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value?.trim();
                    const kodeLama = row.querySelector('[name="tmp_kode_lama[]"]')?.value?.trim();
                    const qty = row.querySelector('[name="tmp_qty[]"]')?.value?.trim();
                    const satuan = row.querySelector('[name="tmp_satuan[]"]')?.value?.trim();
                    const satuanId = row.querySelector('[name="tmp_satuan_id[]"]')?.value?.trim();
                    const catatan = row.querySelector('[name="tmp_catatan[]"]')?.value?.trim();
                    const urut = row.querySelector('[name="tmp_urut[]"]')?.value?.trim();
                    const gambarExisting = row.querySelector('[name="tmp_gambar_existing[]"]')?.value?.trim();
                    const gambarFileInput = row.querySelector('[name="tmp_gambar_file[]"]');
                    const hasNewImage = !!(gambarFileInput && gambarFileInput.files && gambarFileInput.files.length > 0);

                    if (!namaBarang || !qty) {
                        return; // Skip invalid entries
                    }

                    details.push({
                        no_lpb: noLpb || '',
                        supplier: supplierId || '',
                        nama_barang: namaBarang,
                        id_barang: idBarang || null,
                        kode_baru: kodeBaru,
                        kode_lama: kodeLama,
                        qty: parseFloat(qty),
                        satuan: satuanId,
                        catatan: catatan || '',
                        urut: parseInt(urut) || (index + 1) * 10,
                        gambar_existing: gambarExisting || '',
                        gambar_file_index: index,
                        has_new_image: hasNewImage
                    });
                });

                if (details.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Belum ada data repair yang valid. Silakan isi minimal satu baris detail.',
                        confirmButtonText: 'Mengerti'
                    });
                    return;
                }

                // Show loading on save button
                const saveButton = document.getElementById('saveButton');
                const originalText = saveButton.innerHTML;
                saveButton.disabled = true;
                saveButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';

                const formData = new FormData(document.getElementById('my-form'));
                formData.append('details', JSON.stringify(details));

                rows.forEach((row, index) => {
                    const gambarFileInput = row.querySelector('[name="tmp_gambar_file[]"]');
                    if (gambarFileInput && gambarFileInput.files && gambarFileInput.files.length > 0) {
                        formData.append(`gambar_files[${index}]`, gambarFileInput.files[0]);
                    }
                });

                // Sertakan content hash untuk optimistic locking
                const contentHashEl = document.getElementById('content_hash');
                if (contentHashEl) {
                    formData.append('content_hash', contentHashEl.value);
                }

                fetch("{{ URL::to('/trsrep/save-data') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(response => {
                    if (response.status === 409) {
                        return response.json().then(data => {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Konflik Data!',
                                text: data.message || 'Data telah diubah oleh pengguna lain. Halaman akan dimuat ulang.',
                                confirmButtonText: 'Muat Ulang'
                            }).then(() => {
                                window.location.href = window.location.pathname + (window.location.search ? window.location.search + '&' : '?') + '_t=' + Date.now();
                            });
                            throw new Error('CONFLICT');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            html: '<strong>' + data.message + '</strong><br><br>Kode Transaksi: <strong>' + (data.id_transaksi || '-') + '</strong>',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            window.location.href = '{{ URL::to("/trsrep") }}';
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: data.message,
                            confirmButtonText: 'Tutup'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error saving data:', error);
                    if (error.message === 'CONFLICT') return;
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal menyimpan data. Silakan coba lagi.',
                        confirmButtonText: 'Tutup'
                    });
                })
                .finally(() => {
                    // Reset button
                    saveButton.disabled = false;
                    saveButton.innerHTML = originalText;
                });
            }

            // Initialize modal variables
            let activeRow = null;
            let rowIdx = 0;

            // Calculate initial rowIdx based on existing rows
            function calculateRowIdx() {
                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');
                rows.forEach((r, index) => {
                    const noCell = r.querySelector('.row-no');
                    if (noCell) {
                        noCell.textContent = String(index + 1);
                    }

                    const urutInput = r.querySelector('[name="tmp_urut[]"]');
                    if (urutInput) {
                        urutInput.value = String((index + 1) * 10);
                    }
                });

                rowIdx = rows.length * 10;
            }

            // Calculate initial rowIdx on page load
            calculateRowIdx();

            // Function to validate quantity
            // function validateQty(input) {
            //     const row = input.closest('tr');
            //     const stok = parseFloat(row.querySelector('.stok-hidden')?.value || 0);
            //     const qty = parseFloat(input.value || 0);

            //     if (qty > stok) {
            //         input.setCustomValidity('Jumlah melebihi stok tersedia (' + stok + ')');
            //         input.classList.add('is-invalid');
            //     } else {
            //         input.setCustomValidity('');
            //         input.classList.remove('is-invalid');
            //     }
            // }

            // Function to toggle LPB column visibility based on jenis repair (global scope)
            function toggleLpbColumn() {
                const jenisSelect = document.getElementById('jenis');
                const jenisValue = (jenisSelect.value || '').toUpperCase();
                const jenisText = jenisSelect.options[jenisSelect.selectedIndex]?.text?.toLowerCase() || '';
                const isPakai = jenisValue === 'GOP' || jenisText.includes('pakai');
                const isKirimVendor = jenisValue === 'GKV' || (jenisText.includes('kirim') && jenisText.includes('vendor'));

                const lpbLabel = isKirimVendor ? 'No. Surat Jalan' : 'No. LPB';
                const supplierLabel = isKirimVendor ? 'Nama Vendor' : 'Nama Supplier';

                const thLpb = document.getElementById('th-lpb');
                const thSupplier = document.getElementById('th-supplier');
                const thGambar = document.getElementById('th-gambar');
                if (thLpb) thLpb.textContent = lpbLabel;
                if (thSupplier) thSupplier.textContent = supplierLabel;
                
                // Hide LPB and Supplier columns if jenis contains 'pakai'
                if (isPakai) {
                    document.getElementById('th-lpb').style.display = 'none';
                    document.getElementById('th-supplier').style.display = 'none';
                    document.getElementById('th-gambar').style.display = 'none';
                    document.querySelectorAll('.td-lpb').forEach(td => {
                        td.style.display = 'none';
                        const input = td.querySelector('input[name="tmp_lpb_no[]"]');
                        if (input) input.removeAttribute('required');
                    });
                    document.querySelectorAll('.td-supplier').forEach(td => {
                        td.style.display = 'none';
                        const input = td.querySelector('input[name="tmp_supplier[]"]');
                        if (input) input.removeAttribute('required');
                    });
                    document.querySelectorAll('.td-gambar').forEach(td => {
                        td.style.display = 'none';
                        const input = td.querySelector('input[name="tmp_gambar_file[]"]');
                        if (input) input.removeAttribute('required');
                    });
                } else {
                    document.getElementById('th-lpb').style.display = '';
                    document.getElementById('th-supplier').style.display = '';
                    document.getElementById('th-gambar').style.display = isKirimVendor ? '' : 'none';
                    document.querySelectorAll('.td-lpb').forEach(td => {
                        td.style.display = '';
                        const input = td.querySelector('input[name="tmp_lpb_no[]"]');
                        if (input) input.placeholder = lpbLabel;
                        if (input) input.setAttribute('required', 'required');
                    });
                    document.querySelectorAll('.td-supplier').forEach(td => {
                        td.style.display = '';
                        const input = td.querySelector('input[name="tmp_supplier[]"]');
                        if (input) input.placeholder = 'Pilih ' + supplierLabel.toLowerCase() + '...';
                        if (input) input.setAttribute('required', 'required');
                    });
                    document.querySelectorAll('.td-gambar').forEach(td => {
                        td.style.display = isKirimVendor ? '' : 'none';
                        const input = td.querySelector('input[name="tmp_gambar_file[]"]');
                        const existing = td.querySelector('input[name="tmp_gambar_existing[]"]')?.value;
                        if (!input) return;
                        if (isKirimVendor && !existing) {
                            input.setAttribute('required', 'required');
                        } else {
                            input.removeAttribute('required');
                        }
                    });
                }
            }

            $(document).ready(function() {
                // Listen to jenis select change
                document.getElementById('jenis').addEventListener('change', toggleLpbColumn);

                // Check on page load
                toggleLpbColumn();

                // Function to add new row
                $('#btnAddRow').on('click', function() {
                    const tbody = document.getElementById('tbody-grpo');
                    const addRow = document.getElementById('add-row');

                    const formRow =
                        '<tr class="form-row">' +
                        '  <td class="text-center row-no">0<input type="hidden" name="tmp_urut[]" value="0"></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 class="td-lpb"><input name="tmp_lpb_no[]" class="form-control form-control-sm" required></td>' +
                        '  <td class="td-supplier">' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_supplier[]" class="form-control form-control-sm" placeholder="Pilih supplier…" readonly required>' +
                        '      <input type="hidden" name="tmp_supplier_id[]">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-supplier" title="Cari Supplier">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </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[]">' +
                        '      <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_kode_lama_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td><input name="tmp_kode_baru_display[]" 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><input type="hidden" name="tmp_satuan_id[]"></td>' +
                        '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                        '  <td class="td-gambar">' +
                        '    <div class="d-flex flex-column gap-1">' +
                        '      <input type="file" name="tmp_gambar_file[]" class="form-control form-control-sm" accept="image/*">' +
                        '      <input type="hidden" name="tmp_gambar_existing[]" value="">' +
                        '      <small class="text-xs text-secondary">Belum ada gambar</small>' +
                        '    </div>' +
                        '  </td>' +
                        '</tr>';

                    // Sisipkan sebelum tombol tambah
                    addRow.insertAdjacentHTML('beforebegin', formRow);

                    // Toggle LPB column visibility for new row
                    toggleLpbColumn();

                    // Reindex nomor baris agar selalu dinamis
                    calculateRowIdx();

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

                // Delegasi klik: Cancel, cari Supplier, cari Barang
                const tbody = document.getElementById('tbody-grpo');
                tbody.addEventListener('click', (e) => {
                    const tr = e.target.closest('tr.form-row');
                    if (!tr) return;

                    if (e.target.closest('.btn-cancel')) {
                        tr.remove();
                        // Recalculate rowIdx after deletion
                        calculateRowIdx();
                        // Refresh highlight pada modal barang
                        highlightSelectedBarang();
                        return;
                    }

                    if (e.target.closest('.btn-find-supplier')) {
                        activeRow = tr;
                        new bootstrap.Modal(document.getElementById('supplierModal')).show();
                        return;
                    }

                    if (e.target.closest('.btn-find-barang')) {
                        activeRow = tr;
                        new bootstrap.Modal(document.getElementById('barangModal')).show();
                        return;
                    }
                });

                document.getElementById('tbl-suppliers').addEventListener('click', (e) => {
                    const btn = e.target.closest('.choose-supplier');
                    if (!btn || !activeRow) return;

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

                    activeRow.querySelector('[name="tmp_supplier[]"]').value = name;
                    activeRow.querySelector('[name="tmp_supplier_id[]"]').value = id;

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

                document.getElementById('tbl-barang').addEventListener('click', (e) => {
                    const btn = e.target.closest('.choose-barang');
                    if (!btn || !activeRow) return;

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

                    const row = btn.closest('tr');
                    const idBarang = row.dataset.id || '';
                    const kodeBaru = row.dataset.kodeBaru || '';
                    const kodeLama = row.dataset.kodeLama || '';
                    const name = row.dataset.name || '';
                    const satuan = row.dataset.satuan || '';
                    const namaSatuan = row.dataset.namaSatuan || '';

                    activeRow.querySelector('[name="tmp_nama_barang[]"]').value = name;
                    activeRow.querySelector('[name="tmp_id_barang[]"]').value = idBarang;
                    activeRow.querySelector('[name="tmp_nama_barang_id[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_kode_baru_display[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama_display[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_satuan[]"]').value = namaSatuan;
                    activeRow.querySelector('[name="tmp_satuan_id[]"]').value = satuan;

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

                    bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
                    
                    // Update highlight setelah pilih barang
                    setTimeout(() => highlightSelectedBarang(), 100);
                });

                // Check if in edit mode and load existing data
                @if (isset($existing_details) && count($existing_details) > 0)
                    const existingDetails = @json($existing_details);
                    if (existingDetails.length > 0) {
                        renderRepairDetails(existingDetails);
                    }
                @endif
            });

            // Fungsi untuk escape karakter khusus HTML untuk atribut value
            function escapeAttr(text) {
                if (!text) return '';
                return String(text)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;');
            }

            function renderRepairDetails(details) {
                details.forEach((detail, index) => {
                    // Use existing urut from database or calculate new one
                    const urutValue = detail.urut || ((index + 1) * 10);

                    const tbody = document.getElementById('tbody-grpo');
                    const addRow = document.getElementById('add-row');

                    // Escape special characters untuk mencegah HTML injection di atribut value
                    const namaBarang = escapeAttr(detail.nama_barang || '');
                    const namaSupplier = escapeAttr(detail.nama_supplier || '');
                    const noLpb = escapeAttr(detail.no_lpb || '');
                    const catatan = escapeAttr(detail.catatan || '');
                    const satuanNama = escapeAttr(detail.satuan_nama || detail.satuan || '');
                    const gambarPath = escapeAttr(detail.gambar || '');
                    const gambarInfo = gambarPath
                        ? '<a href="' + trsrepStorageBase + gambarPath + '" target="_blank" class="text-xs">Lihat gambar</a>'
                        : '<small class="text-xs text-secondary">Belum ada gambar</small>';

                    const formRow =
                        '<tr class="form-row">' +
                        '  <td class="text-center row-no">0' +
                        '<input type="hidden" name="tmp_urut[]" value="' + urutValue + '"></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 class="td-lpb"><input name="tmp_lpb_no[]" class="form-control form-control-sm" value="' + noLpb + '"></td>' +
                        '  <td class="td-supplier">' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_supplier[]" class="form-control form-control-sm" value="' + namaSupplier + '" placeholder="Pilih supplier…" readonly>' +
                        '      <input type="hidden" name="tmp_supplier_id[]" value="' + (detail.supplier_id || '') + '">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-supplier" title="Cari Supplier">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </td>' +
                        '  <td>' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_nama_barang[]" class="form-control form-control-sm" value="' + namaBarang + '" 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 || '') + '">' +
                        '      <input type="hidden" name="tmp_kode_lama[]" value="' + (detail.kode_lama || '') + '">' +
                        '      <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_kode_lama_display[]" class="form-control form-control-sm" value="' + (detail.kode_lama || '') + '" readonly></td>' +
                        '  <td><input name="tmp_kode_baru_display[]" 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="' + (parseFloat(detail.qty) || '') + '" 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" value="' + satuanNama + '" disabled><input type="hidden" name="tmp_satuan_id[]" value="' + (detail.satuan || '') + '"></td>' +
                        '  <td><input name="tmp_catatan[]" class="form-control form-control-sm" value="' + catatan + '"></td>' +
                           '  <td class="td-gambar">' +
                           '    <div class="d-flex flex-column gap-1">' +
                           '      <input type="file" name="tmp_gambar_file[]" class="form-control form-control-sm" accept="image/*">' +
                           '      <input type="hidden" name="tmp_gambar_existing[]" value="' + gambarPath + '">' +
                               gambarInfo +
                           '    </div>' +
                           '  </td>' +
                        '</tr>';

                    // Sisipkan sebelum tombol tambah
                    addRow.insertAdjacentHTML('beforebegin', formRow);

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

                // Recalculate rowIdx after loading details
                calculateRowIdx();

                // Toggle LPB column visibility after loading details
                toggleLpbColumn();
                
                // Update highlight untuk barang yang sudah ada
                highlightSelectedBarang();
            }
        </script>
    @endpush