@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-sm border-0 mx-4 mb-3">
        <div class="card-body p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'">
                    <i class="fas fa-circle-left me-1"></i><span class="fw-bold">Kembali</span>
                </button>

                @if (isset($authorize) && ($authorize->add ?? '0') == '1')
                    <button type="button" class="btn bg-primary text-light mb-0" onclick="confirmSave(event);">
                        <i class="fas fa-floppy-disk me-1"></i><span class="fw-bold">Simpan</span>
                    </button>
                @endif
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf

                        <div class="card-body p-4">
                            <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                                TAMBAH PERMINTAAN BARANG
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">ID</label>
                                    <input type="text" class="form-control" value="-" readonly>
                                    <small class="text-muted">ID akan terisi setelah disimpan</small>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Permintaan</label>
                                    <input type="date" class="form-control" name="tanggal_pengajuan"
                                        value="{{ old('tanggal_pengajuan', $tanggal_permintaan ?? date('Y-m-d')) }}"
                                        readonly>
                                </div>

                                @if (isset($is_super_admin) && $is_super_admin)
                                    <div class="col-md-6">
                                        <label class="form-label mb-1 fw-semibold">
                                            Pilih Departemen <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-group mb-0">
                                            <input type="text" id="selectedDepartemenNama" class="form-control bg-light"
                                                placeholder="Pilih Departemen..." readonly onfocus="focused(this)"
                                                onfocusout="defocused(this)" required>

                                            <span class="input-group-text bg-primary text-light btnOpenDeptModal"
                                                style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>

                                        <input type="hidden" name="departemen_id" id="selectedDepartemenId"
                                            value="{{ old('departemen_id') }}">

                                        @error('departemen_id')
                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label mb-1 fw-semibold">
                                            Pilih User <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-group mb-0">
                                            <input type="text" id="selectedUserNama" class="form-control bg-light"
                                                placeholder="Pilih User..." readonly onfocus="focused(this)"
                                                onfocusout="defocused(this)" required>

                                            <span class="input-group-text bg-primary text-light btnOpenUserModal"
                                                style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>

                                        <input type="hidden" name="user_id" id="selectedUserId"
                                            value="{{ old('user_id') }}">

                                        @error('user_id')
                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @php
                                        $deptJson = ($list_departemen ?? collect())
                                            ->map(fn($d) => ['id' => $d->id, 'nama' => $d->nama])
                                            ->values();
                                    @endphp
                                    <script id="deptListData" type="application/json">{!! json_encode($deptJson) !!}</script>
                                @else
                                    <div class="col-md-6">
                                        <label class="form-label mb-1 fw-semibold">Departemen</label>
                                        <input type="text" class="form-control" value="{{ $departemen_nama ?? '-' }}"
                                            readonly>
                                        <input type="hidden" name="departemen_id" value="{{ $departemen_id }}">
                                    </div>
                                @endif

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Status Pengajuan</label>
                                    <input type="text" class="form-control"
                                        value="{{ strtoupper($status_default ?? 'draft') }}" readonly>
                                    <input type="hidden" name="status" value="{{ $status_default ?? 'draft' }}">
                                </div>

                                <div class="mb-3">
                                    <button type="button" class="btn bg-primary text-light mb-0" id="btnAddRow">
                                        <i class="fas fa-plus me-1"></i> <span class="fw-bold">Tambah Barang</span>
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table align-middle table-hover" id="itemsTable">
                                        <thead style="background:#0a8f97; color:#fff;">
                                            <tr>
                                                <th class="th-action">Action</th>
                                                <th style="min-width:260px;">Nama Barang</th>
                                                <th style="min-width:220px;">Penerima</th>
                                                <th style="width:110px;">Jumlah</th>
                                                <th style="width:110px;">UOM</th>
                                                <th style="min-width:260px;">Keterangan</th>
                                            </tr>
                                        </thead>

                                        <tbody id="itemsTbody">
                                            @php $oldItems = old('item_id', [null]); @endphp
                                            @foreach ($oldItems as $i => $dummy)
                                                <tr class="item-row" data-row="{{ $i }}">
                                                    <td class="td-action">
                                                        <button type="button" class="btn btn-danger mb-0 btnDeleteRow"
                                                            title="Hapus">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </td>

                                                    <td>
                                                        <input type="hidden" name="item_id[]" class="item-id"
                                                            value="{{ old('item_id.' . $i) }}">
                                                        <input type="hidden" name="item_name[]" class="item-name-hidden"
                                                            value="{{ old('item_name.' . $i) }}">
                                                        <input type="hidden" name="item_detail[]"
                                                            class="item-detail-hidden"
                                                            value="{{ old('item_detail.' . $i) }}">

                                                        <div class="input-group mb-0">
                                                            <input type="text" class="form-control item-name"
                                                                value="{{ old('item_name.' . $i) }}"
                                                                placeholder="Pilih Barang..." readonly
                                                                onfocus="focused(this)" onfocusout="defocused(this)"
                                                                required>

                                                            <span
                                                                class="input-group-text bg-primary text-light btnOpenBarangModal"
                                                                style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                                                <i class="fas fa-search" aria-hidden="true"></i>
                                                            </span>
                                                        </div>

                                                        @error('item_id.' . $i)
                                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                        @enderror
                                                    </td>

                                                    <td>
                                                        <input type="hidden" name="penerima[]" class="penerima-hidden"
                                                            value="{{ old('penerima.' . $i, $default_penerima_nik ?? '') }}">
                                                        <div class="input-group flex-nowrap w-100 mb-0">
                                                            <input type="text" class="form-control penerima-display"
                                                                placeholder="Pilih Penerima..."
                                                                value="{{ old('penerima_display.' . $i, $default_penerima_nama ?? '') }}"
                                                                readonly onfocus="focused(this)" onfocusout="defocused(this)">
                                                            <span class="input-group-text bg-primary text-light btnOpenPenerimaModal"
                                                                style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;
                                                                {{ (isset($is_super_admin) && $is_super_admin) ? 'pointer-events:none; opacity:0.5;' : '' }}">
                                                                <i class="fas fa-search" aria-hidden="true"></i>
                                                            </span>
                                                        </div>
                                                        @error('penerima.' . $i)
                                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                        @enderror
                                                    </td>

                                                    <td>
                                                        <input type="number" min="1" name="jumlah[]"
                                                            class="form-control" value="{{ old('jumlah.' . $i, 1) }}">
                                                        @error('jumlah.' . $i)
                                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                        @enderror
                                                    </td>
                                                    <td>
                                                        <input type="text" name="uom[]"
                                                            class="form-control item-uom"
                                                            value="{{ old('uom.' . $i, '') }}" readonly>
                                                    </td>

                                                    <td>
                                                        <input type="text" name="keterangan_item[]"
                                                            class="form-control"
                                                            value="{{ old('keterangan_item.' . $i, '') }}"
                                                            placeholder="Keterangan">
                                                        @error('keterangan_item.' . $i)
                                                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                        @enderror
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <hr class="horizontal dark mb-0">
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="barangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST BARANG</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display" id="barangTable">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Nama Barang</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($list_barang ?? [] as $b)
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn bg-primary text-light fw-bold btnSelectBarang"
                                                data-id="{{ $b->id }}" data-name="{{ $b->name }}"
                                                data-detail="{{ $b->area ?? '' }}" data-uom="{{ $b->uom_name }}">
                                                Select
                                            </button>
                                        </td>
                                        <td>{{ $b->name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="penerimaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST PENERIMA</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-2 px-3">
                    <div class="mb-3">
                        <input type="text" id="searchPenerimaModal" class="form-control picker-search-input"
                            placeholder="Cari nama penerima..." autocomplete="off">
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:100px;">Action</th>
                                    <th>Nama Penerima</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="penerimaModalList">
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-3">Memuat...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@if (isset($is_super_admin) && $is_super_admin)
    <div class="modal fade" id="departemenModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST DEPARTEMEN</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-2 px-3">
                    <div class="mb-3">
                        <input type="text" id="searchDeptModal" class="form-control picker-search-input"
                            placeholder="Cari departemen..." autocomplete="off">
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:100px;">Action</th>
                                    <th>Nama Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="deptModalList">
                                <tr>
                                    <td colspan="2" class="text-center text-muted py-3">Memuat...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST USER</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-2 px-3">
                    <div class="mb-3">
                        <input type="text" id="searchUserModal" class="form-control picker-search-input"
                            placeholder="Cari nama / username..." autocomplete="off">
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:100px;">Action</th>
                                    <th>Nama User</th>
                                </tr>
                            </thead>
                            <tbody id="userModalList">
                                <tr>
                                    <td colspan="2" class="text-center text-muted py-3">Memuat...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endif

<style>
    #itemsTable {
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #itemsTable th,
    #itemsTable td {
        border: 1px solid #dee2e6 !important;
    }

    #itemsTable .th-action,
    #itemsTable .td-action {
        width: 90px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .picker-search-input {
        border-radius: .375rem !important;
    }

    .picker-list-item {
        padding: .5rem .75rem;
        cursor: pointer;
        font-size: .875rem;
        border-bottom: 1px solid #f0f0f0;
        transition: background .15s;
    }

    .picker-list-item:last-child {
        border-bottom: none;
    }

    .picker-list-item:hover {
        background: #0a8f9715;
        color: #0a8f97;
    }

    .picker-list-item .btn-select-item {
        min-width: 70px;
    }

    .picker-modal-body {
        max-height: 400px;
        overflow-y: auto;
    }

    .btnSelectBarang:disabled {
        cursor: not-allowed !important;
        opacity: 0.5 !important;
    }
</style>

@push('js')
    <script>
        let activeRowEl = null;
        const defaultPenerimaHidden  = @json($default_penerima_nik ?? '');
        const defaultPenerimaDisplay = @json($default_penerima_nama ?? '');

        function updateDeleteButtons() {
            const rows = document.querySelectorAll('#itemsTbody tr.item-row');
            rows.forEach((tr) => {
                const btn = tr.querySelector('.btnDeleteRow');
                if (btn) btn.disabled = (rows.length <= 1);
            });
        }

        function buildRow(index) {
            const isSuperAdmin = {{ (isset($is_super_admin) && $is_super_admin) ? 'true' : 'false' }};
            const deptIdEl    = document.getElementById('selectedDepartemenId');
            const deptPicked  = deptIdEl && deptIdEl.value;
            const penerimaDisabledStyle = (isSuperAdmin && !deptPicked)
                ? 'pointer-events:none; opacity:0.5;'
                : '';

            // Gunakan penerima dari user yang sudah dipilih (jika ada), fallback ke default PHP
            const currentPenerimaHidden  = (isSuperAdmin && document.getElementById('selectedUserId')?.value)
                ? (document.querySelector('#itemsTbody .penerima-hidden')?.value || defaultPenerimaHidden)
                : defaultPenerimaHidden;
            const currentPenerimaDisplay = (isSuperAdmin && document.getElementById('selectedUserId')?.value)
                ? (document.querySelector('#itemsTbody .penerima-display')?.value || defaultPenerimaDisplay)
                : defaultPenerimaDisplay;

            return `
            <tr class="item-row" data-row="${index}">
              <td class="td-action">
                <button type="button" class="btn btn-danger mb-0 btnDeleteRow" title="Hapus">
                  <i class="fas fa-times"></i>
                </button>
              </td>
              <td class="td-item-name">
                <input type="hidden" name="item_id[]"     class="item-id"           value="">
                <input type="hidden" name="item_name[]"   class="item-name-hidden"  value="">
                <input type="hidden" name="item_detail[]" class="item-detail-hidden" value="">
                <div class="input-group flex-nowrap w-100 mb-0">
                  <input type="text" class="form-control item-name" placeholder="Pilih Barang..."
                         value="" readonly required onfocus="focused(this)" onfocusout="defocused(this)">
                  <span class="input-group-text bg-primary text-light btnOpenBarangModal"
                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="text-danger text-xs mt-1 item-error d-none"></div>
              </td>
              <td>
                <input type="hidden" name="penerima[]" class="penerima-hidden" value="${currentPenerimaHidden}">
                <div class="input-group flex-nowrap w-100 mb-0">
                    <input type="text" class="form-control penerima-display" placeholder="Pilih Penerima..."
                        value="${currentPenerimaDisplay}" readonly onfocus="focused(this)" onfocusout="defocused(this)">
                    <span class="input-group-text bg-primary text-light btnOpenPenerimaModal"
                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer; ${penerimaDisabledStyle}">
                      <i class="fas fa-search" aria-hidden="true"></i>
                    </span>
                </div>
              </td>
              <td>
                <input type="number" min="1" name="jumlah[]" class="form-control" value="1">
              </td>
              <td>
                <input type="text" name="uom[]" class="form-control item-uom" value="" readonly>
              </td>
              <td>
                <input type="text" name="keterangan_item[]" class="form-control" value="" placeholder="Keterangan">
              </td>
            </tr>`;
        }

        @if (isset($is_super_admin) && $is_super_admin)
            (function() {
                const allDept    = JSON.parse(document.getElementById('deptListData').textContent);
                const selDeptId  = document.getElementById('selectedDepartemenId');
                const selDeptNama= document.getElementById('selectedDepartemenNama');
                const selUserId  = document.getElementById('selectedUserId');
                const selUserNama= document.getElementById('selectedUserNama');
                const btnOpenDept= document.querySelector('.btnOpenDeptModal');
                const btnOpenUser= document.querySelector('.btnOpenUserModal');

                btnOpenUser.style.pointerEvents = 'none';
                btnOpenUser.style.opacity        = '0.5';
                setPenerimaBtnsState(false);

                const deptModal = new bootstrap.Modal(document.getElementById('departemenModal'));

                btnOpenDept.addEventListener('click', function() {
                    renderDeptList(document.getElementById('searchDeptModal').value);
                    deptModal.show();
                });

                document.getElementById('searchDeptModal').addEventListener('input', function() {
                    renderDeptList(this.value);
                });

                function renderDeptList(q) {
                    const lower   = q.toLowerCase().trim();
                    const tbody   = document.getElementById('deptModalList');
                    const filtered= allDept.filter(d => !lower || d.nama.toLowerCase().includes(lower));
                    if (filtered.length === 0) {
                        tbody.innerHTML = '<tr><td class="text-center text-muted py-3">Departemen tidak ditemukan</td></tr>';
                        return;
                    }
                    tbody.innerHTML = filtered.map(d =>
                        `<tr class="picker-list-item" data-id="${d.id}" data-nama="${d.nama}">
                           <td><button type="button" class="btn btn-sm bg-primary text-light fw-bold btn-select-item mb-0">Pilih</button></td>
                           <td>${d.nama}</td>
                         </tr>`
                    ).join('');
                }

                document.getElementById('deptModalList').addEventListener('click', function(e) {
                    const tr = e.target.closest('[data-id]');
                    if (!tr) return;

                    selDeptId.value  = tr.dataset.id;
                    selDeptNama.value= tr.dataset.nama;

                    selUserId.value        = '';
                    selUserNama.value      = '';
                    selUserNama.placeholder= '-- Belum dipilih --';
                    penerimaCache          = null;

                    btnOpenUser.style.pointerEvents = 'auto';
                    btnOpenUser.style.opacity        = '1';
                    setPenerimaBtnsState(true);

                    deptModal.hide();
                });

                const userModal = new bootstrap.Modal(document.getElementById('userModal'));

                btnOpenUser.addEventListener('click', function() {
                    if (!selDeptId.value) {
                        Swal.fire('Perhatian', 'Pilih departemen terlebih dahulu.', 'warning');
                        return;
                    }
                    document.getElementById('searchUserModal').value = '';
                    loadUsers('');
                    userModal.show();
                });

                document.getElementById('searchUserModal').addEventListener('input', function() {
                    loadUsers(this.value);
                });

                function loadUsers(q) {
                    const tbody = document.getElementById('userModalList');
                    tbody.innerHTML = '<tr><td class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-1"></i> Memuat...</td></tr>';

                    $.ajax({
                        url: '{{ url('trptbr/get-users-by-dept') }}',
                        data: { departemen_id: selDeptId.value, _token: '{{ csrf_token() }}' },
                        success: function(users) {
                            const lower    = q.toLowerCase().trim();
                            const filtered = users.filter(u =>
                                !lower ||
                                (u.full_name || '').toLowerCase().includes(lower) ||
                                u.username.toLowerCase().includes(lower)
                            );
                            if (filtered.length === 0) {
                                tbody.innerHTML = '<tr><td class="text-center text-muted py-3">User tidak ditemukan</td></tr>';
                                return;
                            }
                            tbody.innerHTML = filtered.map(u => {
                                const nama  = (u.full_name && u.full_name.trim()) ? u.full_name.trim() : u.username;
                                const label = `${nama} (${u.username})`;
                                const hrisNama = (u.hris_nama && u.hris_nama.trim()) ? u.hris_nama.trim() : nama;
                                return `<tr class="picker-list-item" data-id="${u.id}" data-nama="${label}" data-username="${u.username}" data-full-name="${nama}" data-hris-nama="${hrisNama}">
                                          <td><button type="button" class="btn btn-sm bg-primary text-light fw-bold btn-select-item mb-0">Pilih</button></td>
                                          <td>${label}</td>
                                        </tr>`;
                            }).join('');
                        },
                        error: function() {
                            tbody.innerHTML = '<tr><td class="text-center text-danger py-3">Gagal memuat data user</td></tr>';
                        }
                    });
                }

                document.getElementById('userModalList').addEventListener('click', function(e) {
                    const tr = e.target.closest('[data-id]');
                    if (!tr) return;
                    selUserId.value  = tr.dataset.id;
                    selUserNama.value= tr.dataset.nama;

                    // Set semua baris penerima sesuai user yang dipilih
                    const nik      = tr.dataset.username  || '';
                    const namaHris = tr.dataset.hrisNama || tr.dataset.fullName  || tr.dataset.nama || '';
                    document.querySelectorAll('#itemsTbody .penerima-hidden').forEach(function(el) {
                        el.value = nik;
                    });
                    document.querySelectorAll('#itemsTbody .penerima-display').forEach(function(el) {
                        el.value = namaHris;
                    });

                    userModal.hide();
                });

                document.getElementById('{{ $dmenu }}-form').addEventListener('submit', function(e) {
                    if (!selUserId.value) {
                        e.preventDefault();
                        Swal.fire('Perhatian', 'Pilih departemen dan user terlebih dahulu.', 'warning');
                    }
                });

                function setPenerimaBtnsState(enabled) {
                    document.querySelectorAll('#itemsTbody .btnOpenPenerimaModal').forEach(btn => {
                        btn.style.pointerEvents = enabled ? 'auto'  : 'none';
                        btn.style.opacity        = enabled ? '1'     : '0.5';
                    });
                }
            })();
        @endif

        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#barangTable')) {
                $('#barangTable').DataTable().destroy();
            }
            $('#barangTable').DataTable({
                pageLength: 10,
                order: [],
                columnDefs: [{ orderable: false, targets: [0] }],
                language: {
                    lengthMenu : "Tampilkan _MENU_ baris",
                    search     : "Cari :",
                    info       : "Data _START_ - _END_ dari _TOTAL_",
                    paginate   : { previous: "Previous", next: "Next" },
                    zeroRecords: "Data tidak ditemukan",
                    emptyTable : "Tidak ada data"
                }
            });

            updateDeleteButtons();

            $('#btnAddRow').on('click', function() {
                const tbody = document.getElementById('itemsTbody');
                const idx   = tbody.querySelectorAll('tr.item-row').length;
                tbody.insertAdjacentHTML('beforeend', buildRow(idx));
                updateDeleteButtons();
            });

            $(document).on('click', '.btnOpenBarangModal', function() {
                activeRowEl = $(this).closest('tr.item-row');
                const modal = new bootstrap.Modal(document.getElementById('barangModal'));
                updateBarangButtonStates();
                modal.show();
            });

            function getSelectedBarangIds() {
                const currentItemId = activeRowEl ? activeRowEl.find('.item-id').val() : '';
                const ids = [];
                document.querySelectorAll('#itemsTbody tr.item-row .item-id').forEach(input => {
                    const v = input.value.trim();
                    if (v && v !== currentItemId) ids.push(v);
                });
                return ids;
            }

            function updateBarangButtonStates() {
                const selectedIds = getSelectedBarangIds();
                document.querySelectorAll('.btnSelectBarang').forEach(btn => {
                    const barangId = $(btn).data('id').toString();
                    const used     = selectedIds.includes(barangId);
                    btn.disabled   = used;
                    btn.classList.toggle('opacity-50', used);
                    btn.title      = used ? 'Barang sudah dipilih di baris lain' : '';
                });
            }

            $(document).on('click', '.btnSelectBarang', function() {
                if (!activeRowEl || this.disabled) {
                    if (this.disabled) Swal.fire('Perhatian', 'Barang ini sudah dipilih di baris lain.', 'warning');
                    return;
                }
                activeRowEl.find('.item-id').val($(this).data('id'));
                activeRowEl.find('.item-name').val($(this).data('name'));
                activeRowEl.find('.item-name-hidden').val($(this).data('name'));
                activeRowEl.find('.item-detail-hidden').val($(this).data('detail'));
                activeRowEl.find('.item-uom').val($(this).data('uom'));
                bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
            });

            $(document).on('click', '.btnDeleteRow', function() {
                const rows = document.querySelectorAll('#itemsTbody tr.item-row');
                if (rows.length <= 1) { updateDeleteButtons(); return; }
                $(this).closest('tr').remove();
                updateDeleteButtons();
            });
        });

        function confirmSave(event) {
            event.preventDefault();
            Swal.fire({
                title             : 'Konfirmasi',
                text              : 'Apakah Anda yakin ingin menyimpan data permintaan barang ini?',
                icon              : 'warning',
                showCancelButton  : true,
                confirmButtonText : 'Ya, Simpan',
                cancelButtonText  : 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('{{ $dmenu }}-form').submit();
                }
            });
        }

        let activePenerimaRowEl  = null;
        let penerimaModalInstance= null;
        let penerimaCache        = null;

        function loadPenerima(q) {
            const tbody = document.getElementById('penerimaModalList');
            const lower = (q || '').toLowerCase().trim();

            if (penerimaCache !== null) {
                renderPenerimaList(penerimaCache, lower);
                return;
            }

            tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">'
                + '<i class="fas fa-spinner fa-spin me-1"></i> Memuat...</td></tr>';

            const deptIdEl = document.getElementById('selectedDepartemenId');
            const deptId   = deptIdEl ? deptIdEl.value : null;

            $.ajax({
                url    : '{{ url('trptbr/get-penerima') }}',
                data   : deptId ? { departemen_id: deptId } : {},
                success: function(data) {
                    penerimaCache = data;
                    renderPenerimaList(data, lower);
                },
                error  : function() {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-3">Gagal memuat data penerima</td></tr>';
                }
            });
        }

        function renderPenerimaList(data, q) {
            const tbody    = document.getElementById('penerimaModalList');
            const filtered = q ? data.filter(p => p.nama.toLowerCase().includes(q)) : data;

            if (filtered.length === 0) {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">Penerima tidak ditemukan</td></tr>';
                return;
            }

            tbody.innerHTML = filtered.map(p =>
                `<tr class="picker-list-item" data-nik="${p.nik}" data-nama="${p.nama}">
                    <td><button type="button" class="btn btn-sm bg-primary text-light fw-bold btn-select-penerima mb-0">Pilih</button></td>
                    <td>${p.nama}</td>
                    <td class="text-muted">${p.nama_departemen ?? '-'}</td>
                </tr>`
            ).join('');
        }

        $(document).on('click', '.btnOpenPenerimaModal', function() {
            activePenerimaRowEl = $(this).closest('tr.item-row');
            if (!penerimaModalInstance) {
                penerimaModalInstance = new bootstrap.Modal(document.getElementById('penerimaModal'));
            }
            document.getElementById('searchPenerimaModal').value = '';
            loadPenerima('');
            penerimaModalInstance.show();
        });

        document.getElementById('searchPenerimaModal').addEventListener('input', function() {
            loadPenerima(this.value);
        });

        $(document).on('click', '.btn-select-penerima', function() {
            if (!activePenerimaRowEl) return;
            const row  = $(this).closest('tr');
            const nik  = row.data('nik');   
            const nama = row.data('nama');  

            activePenerimaRowEl.find('.penerima-display').val(nama); 
            activePenerimaRowEl.find('.penerima-hidden').val(nik);   
            penerimaModalInstance.hide();
        });
    </script>
@endpush