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

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

    <div class="container-fluid py-3">

        @if (isset($authorize) && $authorize->add == '1')
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body d-flex gap-2">
                    <button class="btn btn-teal px-3 shadow-sm mb-0"
                        onclick="window.location='{{ url($url_menu . '/add') }}'">
                        <i class="fas fa-plus me-1"></i> ADD
                    </button>
                    <button type="button" class="btn btn-teal px-3 shadow-sm mb-0"
                        onclick="generateLinkPeminjaman()">
                        <i class="fas fa-paperclip me-1"></i> GENERATE LINK
                    </button>
                </div>
            </div>
        @endif

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body">
                <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                    FILTER PEMINJAMAN BARANG
                </div>
                <form method="GET" action="{{ url($url_menu) }}">
                    <div class="row align-items-end g-3">
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">Date</label>
                            <div class="d-flex gap-2">
                                <input type="date" name="date_from" class="form-control"
                                    value="{{ $filters['date_from'] ?? '' }}">
                                <input type="date" name="date_to" class="form-control"
                                    value="{{ $filters['date_to'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 fw-semibold">ID</label>
                            <input type="text" name="id" class="form-control" placeholder="ID / Nomor Pengajuan"
                                value="{{ $filters['id'] ?? '' }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 fw-semibold">Status</label>
                            <select name="status" class="form-select">
                                @foreach ($status_list ?? [] as $val => $label)
                                    <option value="{{ $val }}"
                                        {{ ($filters['status'] ?? '') === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-teal w-100 shadow-sm mb-0" type="submit">
                                <i class="fas fa-search me-1"></i> Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="col">
                    @include('components.alert')
                </div>
                @php
                    $currentRole   = strtolower(auth()->user()->idroles ?? '');
                    $currentRoles  = array_filter(array_map('trim', explode(',', $currentRole)));
                    if (empty($currentRoles)) { $currentRoles = ['guests']; }

                    $isHeadSView        = in_array('head.s', $currentRoles);
                    $isItstafGuestsView = in_array('itstaf', $currentRoles) && in_array('guests', $currentRoles);
                    $isItstafHeadSView  = in_array('itstaf', $currentRoles) && in_array('head.s', $currentRoles);
                    $showTabs           = $isHeadSView || $isItstafGuestsView || $isItstafHeadSView;
                    $hasThreeTabs       = $has_three_tabs ?? false;

                    $tabUserLabel = $isItstafHeadSView
                        ? 'Approve IT'
                        : ($isItstafGuestsView ? 'Approval IT' : 'Approval SPV');
                @endphp

                @if ($showTabs)
                    <ul class="nav nav-tabs mb-3" id="headTabs" role="tablist">
                        {{-- Tab 1: Pengajuan Saya --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active fw-semibold" id="tab-saya-tab"
                                data-bs-toggle="tab" data-bs-target="#tab-saya"
                                type="button" role="tab">
                                <i class="fas fa-user me-1"></i> Pengajuan Saya
                                @if (($own_requests ?? collect())->count() > 0)
                                    <span class="badge bg-secondary ms-1">{{ ($own_requests ?? collect())->count() }}</span>
                                @endif
                            </button>
                        </li>

                        {{-- Tab 2: Approve IT / IT Staf / Pengajuan User --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-semibold" id="tab-user-tab"
                                data-bs-toggle="tab" data-bs-target="#tab-user"
                                type="button" role="tab">
                                <i class="fas fa-users me-1"></i> {{ $tabUserLabel }}
                                @if (($requests ?? collect())->count() > 0)
                                    <span class="badge bg-danger ms-1">{{ ($requests ?? collect())->count() }}</span>
                                @endif
                            </button>
                        </li>

                        @if ($hasThreeTabs)
                        {{-- Tab 3: Pengajuan User/SPV (hanya untuk itstaf+head.s) --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-semibold" id="tab-spv-tab"
                                data-bs-toggle="tab" data-bs-target="#tab-spv"
                                type="button" role="tab">
                                <i class="fas fa-user-tie me-1"></i> Approval SPV
                                @if (($spv_requests ?? collect())->count() > 0)
                                    <span class="badge bg-warning ms-1">{{ ($spv_requests ?? collect())->count() }}</span>
                                @endif
                            </button>
                        </li>
                        @endif
                    </ul>

                    <div class="tab-content" id="headTabsContent">
                        {{-- Tab: Pengajuan Saya --}}
                        <div class="tab-pane fade show active" id="tab-saya" role="tabpanel">
                            <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                                LIST PENGAJUAN SAYA
                            </div>
                            <div class="table-responsive">
                                <table class="table align-middle table-hover display" id="list_{{ $dmenu ?? 'peminjaman' }}_saya">
                                    @include('transc.trpjbr._list_table_head')
                                    <tbody>
                                        @foreach ($own_requests ?? [] as $r)
                                            @include('transc.trpjbr._list_table_row', ['r' => $r])
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- Tab: Approve IT / IT Staf / Pengajuan User --}}
                        <div class="tab-pane fade" id="tab-user" role="tabpanel">
                            <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                                {{ $tabUserLabel }}
                            </div>
                            <div class="table-responsive">
                                <table class="table align-middle table-hover display" id="list_{{ $dmenu ?? 'peminjaman' }}_user">
                                    @include('transc.trpjbr._list_table_head')
                                    <tbody>
                                        @foreach ($requests ?? [] as $r)
                                            @include('transc.trpjbr._list_table_row', ['r' => $r])
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        @if ($hasThreeTabs)
                        {{-- Tab: Pengajuan User (head.s scope) --}}
                        <div class="tab-pane fade" id="tab-spv" role="tabpanel">
                            <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                                LIST PENGAJUAN USER
                            </div>
                            <div class="table-responsive">
                                <table class="table align-middle table-hover display" id="list_{{ $dmenu ?? 'peminjaman' }}_spv">
                                    @include('transc.trpjbr._list_table_head')
                                    <tbody>
                                        @foreach ($spv_requests ?? [] as $r)
                                            @include('transc.trpjbr._list_table_row', ['r' => $r])
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endif
                    </div>
                @else
                    {{-- Tampilan biasa: hanya itstaf atau hanya guests --}}
                    <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                        LIST PEMINJAMAN BARANG
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover display" id="list_{{ $dmenu ?? 'peminjaman' }}">
                            @include('transc.trpjbr._list_table_head')
                            <tbody>
                                @foreach ($requests ?? [] as $r)
                                    @include('transc.trpjbr._list_table_row', ['r' => $r])
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalHeadApprove" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <div>
                        <h5 class="modal-title mb-0 text-success">
                            <i class="fas fa-check-circle me-1"></i> Approve Peminjaman
                        </h5>
                        <small class="text-muted" id="mha-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">ID Peminjaman</label>
                            <input type="text" class="form-control" id="mha-id" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">Tanggal Pengajuan</label>
                            <input type="text" class="form-control" id="mha-tanggal" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">Departemen</label>
                            <input type="text" class="form-control" id="mha-departemen" readonly>
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">Detail Item</div>
                    <div id="mha-loading" class="text-center py-4">
                        <div class="spinner-border text-teal" role="status"></div>
                        <div class="text-muted mt-2 small">Memuat data item...</div>
                    </div>
                    <div id="mha-error" class="alert alert-danger d-none">Gagal memuat data. Silakan coba lagi.</div>
                    <div id="mha-table-wrap" class="table-responsive d-none">
                        <table class="table align-middle table-hover modal-item-table">
                            <thead style="background:#0a8f97; color:#fff;">
                                <tr>
                                    <th style="min-width:240px;">Nama Barang</th>
                                    <th style="min-width:200px;">Penerima</th>
                                    <th style="min-width:220px;">Keterangan</th>
                                    <th style="width:110px;">Qty Diminta</th>
                                    <th style="width:110px;">Tanggal Pinjam</th>
                                    <th style="width:110px;">Tanggal Kembali</th>
                                </tr>
                            </thead>
                            <tbody id="mha-items-body"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> Batal
                    </button>
                    <button type="button" class="btn btn-success" onclick="submitHeadApprove()">
                        <i class="fas fa-check me-1"></i> Ya, Approve
                    </button>
                </div>
                <form id="form-head-approve" method="POST" class="d-none">@csrf</form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalHeadReject" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <div>
                        <h5 class="modal-title mb-0 text-danger">
                            <i class="fas fa-times-circle me-1"></i> Reject Peminjaman
                        </h5>
                        <small class="text-muted" id="mhr-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">ID Peminjaman</label>
                            <input type="text" class="form-control" id="mhr-id" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">Tanggal Pengajuan</label>
                            <input type="text" class="form-control" id="mhr-tanggal" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 fw-semibold">Departemen</label>
                            <input type="text" class="form-control" id="mhr-departemen" readonly>
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">Detail Item</div>
                    <div id="mhr-loading" class="text-center py-4">
                        <div class="spinner-border text-teal" role="status"></div>
                        <div class="text-muted mt-2 small">Memuat data item...</div>
                    </div>
                    <div id="mhr-error" class="alert alert-danger d-none">Gagal memuat data. Silakan coba lagi.</div>
                    <div id="mhr-table-wrap" class="table-responsive d-none">
                        <table class="table align-middle table-hover modal-item-table">
                            <thead style="background:#0a8f97; color:#fff;">
                                <tr>
                                    <th style="min-width:240px;">Nama Barang</th>
                                    <th style="min-width:200px;">Penerima</th>
                                    <th style="min-width:220px;">Keterangan</th>
                                    <th style="width:110px;">Qty Diminta</th>
                                    <th style="width:110px;">Tanggal Pinjam</th>
                                    <th style="width:110px;">Tanggal Kembali</th>
                                </tr>
                            </thead>
                            <tbody id="mhr-items-body"></tbody>
                        </table>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">Alasan Reject</div>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label mb-1 fw-semibold">
                                Alasan <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" id="mhr-catatan" rows="4"
                                placeholder="Tuliskan alasan mengapa peminjaman ini ditolak..."></textarea>
                            <div class="form-text">Catatan ini akan dilihat oleh pengaju.</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> Batal
                    </button>
                    <button type="button" class="btn btn-danger" onclick="submitHeadReject()">
                        <i class="fas fa-times me-1"></i> Ya, Reject
                    </button>
                </div>
                <form id="form-head-reject" method="POST" class="d-none">
                    @csrf
                    <input type="hidden" name="catatan_reject" id="mhr-hidden-catatan">
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade modal-admin-approve" id="modalAdminApprove" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <div>
                        <h5 class="modal-title mb-0 text-success">
                            <i class="fas fa-check-circle me-1"></i> Proses Peminjaman (Admin IT)
                        </h5>
                        <small class="text-muted" id="maa-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="form-admin-approve" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label class="form-label mb-1 fw-semibold">ID Peminjaman</label>
                                <input type="text" class="form-control" id="maa-id" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label mb-1 fw-semibold">Tanggal Pengajuan</label>
                                <input type="text" class="form-control" id="maa-tanggal" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label mb-1 fw-semibold">Departemen</label>
                                <input type="text" class="form-control" id="maa-departemen" readonly>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">Detail Item</div>
                        <div id="maa-loading" class="text-center py-4">
                            <div class="spinner-border text-teal" role="status"></div>
                            <div class="text-muted mt-2 small">Memuat data item...</div>
                        </div>
                        <div id="maa-error" class="alert alert-danger d-none">Gagal memuat data. Silakan coba lagi.</div>
                        <div id="maa-table-wrap" class="table-responsive d-none">
                            <table class="table align-middle table-hover modal-item-table">
                                <thead style="background:#0a8f97; color:#fff;">
                                    <tr>
                                        <th style="width:120px;">Action</th>
                                        <th style="min-width:150px;">Nama Barang</th>
                                        <th style="min-width:150px;">Penerima</th>
                                        <th style="min-width:150px;">Keterangan</th>
                                        <th style="width:110px;">Qty Diminta</th>
                                        <th style="min-width:60px;">Stock</th>
                                        <th style="width:130px;">Qty Disetujui</th>
                                        <th style="width:130px;">Tanggal Pinjam</th>
                                        <th style="width:130px;">Tanggal Kembali</th>
                                    </tr>
                                </thead>
                                <tbody id="maa-items-body"></tbody>
                            </table>
                        </div>
                        <hr class="horizontal dark my-3">

                        <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">Catatan Admin IT
                        </div>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label mb-1 fw-semibold">Catatan</label>
                                <textarea class="form-control" name="catatan_admin" id="maa-catatan" rows="3"
                                    placeholder="Catatan umum (opsional)..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer pt-0">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-arrow-left me-1"></i> Batal
                        </button>
                        <button type="button" class="btn btn-success" onclick="submitAdminApprove()">
                            <i class="fas fa-check me-1"></i> Submit Approve
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="maaBarangItemModal" 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 fw-bold" style="letter-spacing:.06em;">
                        <i class="fas fa-box me-2 text-teal"></i>
                        PILIH BARANG — <span id="maa-modal-item-label">-</span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle" id="maaBarangItemTable">
                            <thead style="background:#0a8f9722;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Nama Barang</th>
                                    <th>Kode Asset</th>
                                </tr>
                            </thead>
                            <tbody id="maaBarangItemTableBody">
                                <tr>
                                    <td colspan="3" class="text-center text-muted">Memuat data...</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="modalBorrowedAsset" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <div>
                        <h5 class="modal-title mb-0" style="color:#ed85ff;">
                            <i class="fas fa-check-circle me-1"></i> Konfirmasi Pengambilan Barang
                        </h5>
                        <small class="text-muted" id="mba-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="mba-loading" class="text-center py-4">
                        <div class="spinner-border text-teal" role="status"></div>
                        <div class="text-muted mt-2 small">Memuat data asset...</div>
                    </div>
                    <div id="mba-error" class="alert alert-danger d-none"></div>
                    <div id="mba-content" class="d-none">
                        <div class="alert alert-info py-2 small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            Centang barang yang <strong>sudah diambil</strong> oleh user. Status global berubah ke
                            <strong>BORROWED</strong> setelah semua barang dicentang.
                        </div>
                        <div id="mba-asset-list"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="maaBarangOpsionalModal" 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 fw-bold" style="letter-spacing:.06em;">
                        <i class="fas fa-boxes me-2 text-teal"></i>
                        PILIH BARANG TAMBAHAN
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle" id="maaBarangOpsionalTable">
                            <thead style="background:#0a8f9722;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Value / Tipe</th>
                                    <th>Nama Barang</th>
                                    <th>Kode Asset</th>
                                </tr>
                            </thead>
                            <tbody id="maaBarangOpsionalTableBody">
                                <tr>
                                    <td colspan="4" class="text-center text-muted">Memuat data...</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="maaBarangNamaModal" 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 fw-bold" style="letter-spacing:.06em;">
                        <i class="fas fa-list me-2 text-teal"></i>
                        LIST BARANG — PILIH NAMA BARANG
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display" id="maaBarangNamaTable">
                            <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 maa-btnSelectBarangNama mb-0"
                                                data-name="{{ $b->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="maaListPenerimaModal" 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"></button>
                </div>
                <div class="modal-body py-2 px-3">
                    <div class="mb-3">
                        <input type="text" id="maaSearchPenerima" class="form-control"
                            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="maaPenerimaList">
                                <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>
    <div class="modal fade" id="qtyManualModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <h6 class="modal-title fw-semibold" id="qty-manual-modal-title">
                        Input Qty
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold mb-1">
                            Qty <span class="text-danger">*</span>
                        </label>
                        <input type="number" class="form-control" id="qty-manual-input" min="1" value="1">
                        <div class="form-text text-muted mt-1" id="qty-manual-hint"></div>
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                        Batal
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-confirm-qty-manual">
                        <i class="fas fa-check me-1"></i> Konfirmasi
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="maaTanggalOpsionalModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <h6 class="modal-title fw-semibold">
                        <i class="fas fa-calendar-alt me-2"></i>
                        Tentukan Tanggal — <span id="maa-tanggal-opsional-nama-label">-</span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold mb-1">Tanggal Pinjam <span
                                class="text-danger">*</span></label>
                        <input type="date" id="maa-opsional-input-tanggal-pinjam" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold mb-1">Tanggal Kembali <span
                                class="text-danger">*</span></label>
                        <input type="date" id="maa-opsional-input-tanggal-kembali" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold mb-1">Tanggal Ambil <span
                                class="text-danger">*</span></label>
                        <input type="datetime-local" id="maa-opsional-input-tanggal-ambil" class="form-control">
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary btn-sm" id="maa-btn-confirm-tanggal-opsional">
                        <i class="fas fa-arrow-right me-1"></i> Lanjut Pilih Barang
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalSubmitReturn" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content prb-modal-content">
                <form action="{{ url($url_menu . '/complete_admin') }}" method="POST" id="form-submit-return">
                    @csrf
                    <input type="hidden" id="sr-id-encrypt" name="id_encrypt">

                    <div class="modal-header prb-modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-undo-alt me-2" style="color:#f59e0b;"></i>Submit Return Barang
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        
                        <div id="sr-loading" class="text-center py-4">
                            <div class="spinner-border text-teal" role="status"></div>
                            <div class="text-muted mt-2 small">Memuat data...</div>
                        </div>
                        <div id="sr-error" class="alert alert-danger d-none"></div>
                        <div id="sr-content" class="d-none">
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label mb-1 fw-semibold">ID Peminjaman</label>
                                    <input type="text" class="form-control" id="sr-nomor" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1 fw-semibold">Departemen</label>
                                    <input type="text" class="form-control" id="sr-departemen" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Pengajuan</label>
                                    <input type="text" class="form-control" id="sr-tanggal" readonly>
                                </div>
                            </div>

                            <hr class="horizontal dark my-3">

                            <div id="sr-form-content">
                            </div>

                            <hr class="horizontal dark my-3">

                            <div class="prb-card" style="border-color:#f59e0b; background:#fffdf5;">
                                <div class="prb-card-label mb-2" style="color:#d97706; border-left-color:#d97706;">
                                    <i class="fas fa-undo-alt me-1"></i> Catatan Return
                                </div>
                                <textarea class="prb-input" name="catatan_return" rows="3"
                                    placeholder="Catatan umum proses return barang (opsional)..."></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer prb-modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-warning" id="sr-submit-btn" onclick="submitModalReturn()">
                            <i class="fas fa-undo-alt me-1"></i> Submit Return
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="perpRejectModalList" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content prb-modal-content">
                <div class="modal-header prb-modal-header">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-times-circle me-2 text-danger"></i>
                        Tolak Perpanjangan
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <label class="prb-form-label">
                        Alasan Penolakan <span class="text-danger">*</span>
                    </label>
                    <textarea class="prb-input" rows="3"
                        id="perp-list-reject-catatan"
                        placeholder="Tuliskan alasan penolakan..."></textarea>
                </div>
                <div class="modal-footer prb-modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger btn-sm"
                        id="btn-confirm-perp-reject-list">
                        <i class="fas fa-times me-1"></i> Tolak Perpanjangan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Konflik Perpanjangan --}}
    <div class="modal fade" id="srKonflikModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content prb-modal-content">
                <div class="modal-header prb-modal-header">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2 text-warning"></i>
                        <span id="sr-konflik-modal-title">Konflik Asset Terdeteksi</span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3" id="sr-konflik-modal-body"></div>
                <div class="modal-footer prb-modal-footer">
                    <button type="button" class="prb-btn prb-btn-back" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="prb-btn prb-btn-approve" id="sr-btn-confirm-konflik-approve">
                        <i class="fas fa-check me-1"></i> Approve &amp; Terapkan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pilih Asset Pengganti --}}
    <div class="modal fade" id="srReplacementModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content prb-modal-content">
                <div class="modal-header prb-modal-header">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-box me-2" style="color:#0a8f97;"></i>
                        Pilih Asset Pengganti
                    </h6>
                    <button type="button" class="btn-close" id="sr-btn-close-replacement"></button>
                </div>
                <div class="modal-body px-3 py-2" id="sr-replacement-modal-body"></div>
                <div class="modal-footer prb-modal-footer">
                    <button type="button" class="prb-btn prb-btn-back" id="sr-btn-back-replacement">
                        <i class="fas fa-arrow-left me-1"></i> Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@php
    function statusBadge($status)
    {
        $status = strtolower($status);
        return match ($status) {
            'rejected' => '<span class="badge badge-status badge-rejected">REJECTED</span>',
            'completed' => '<span class="badge badge-status badge-complete">COMPLETE</span>',
            'approve' => '<span class="badge badge-status badge-approve">APPROVE</span>',
            'borrowed' => '<span class="badge badge-status badge-borrowed">BORROWED</span>',
            'on_progress' => '<span class="badge badge-status badge-onprogress">ONPROGRESS</span>',
            'proposed' => '<span class="badge badge-status badge-proposed">PROPOSED</span>',
            'entry' => '<span class="badge badge-status badge-entry">ENTRY</span>',
            'revisi' => '<span class="badge badge-status badge-rejected">REVISI</span>',
            default => '<span class="badge badge-status badge-entry">' . e(strtoupper($status ?: '-')) . '</span>',
        };
    }
@endphp

<style>
    /* Base Button */
    .prb-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 18px;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s ease;
        min-width: 140px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Hover Effect */
    .prb-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* Active Click */
    .prb-btn:active {
        transform: scale(0.98);
    }

    /* Back / Cancel Button */
    .prb-btn-back {
        background: #ca3131ff;
        color: #ffffffff;
        border: 1px solid #cbd5e1;
    }

    .prb-btn-back:hover {
        background: #e2e8f0;
        color: #334155;
    }

    /* Approve Button */
    .prb-btn-approve {
        background: linear-gradient(135deg, #16a34a, #22c55e);
        color: #ffffff;
    }

    .prb-btn-approve:hover {
        background: linear-gradient(135deg, #15803d, #16a34a);
    }

    /* Icon Styling */
    .prb-btn i {
        font-size: 13px;
    }

    /* Responsive */
    @media (max-width: 576px) {
        .prb-btn {
            width: 100%;
            min-width: unset;
        }
    }
    @keyframes perp-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: .55; }
    }
    #modalAdminApprove .modal-item-table {
        font-size: 12px;
    }

    #modalAdminApprove .modal-item-table th {
        font-size: 12px;
        padding: 6px 8px;
    }

    #modalAdminApprove .modal-item-table td {
        padding: 6px 8px;
    }

    #modalAdminApprove .modal-item-table input {
        font-size: 12px;
        padding: 4px 6px;
        height: 30px;
    }

    #modalAdminApprove .modal-item-table .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    .barang-pendukung-row select.form-select-sm {
        height: 32px;
        font-size: .82rem;
    }

    .barang-pendukung-row input.form-control-sm {
        height: 32px;
    }

    .barang-pendukung-row select:focus,
    .barang-pendukung-row input:focus {
        border-color: #028284;
        box-shadow: 0 0 0 .2rem rgba(2, 130, 132, .15);
    }

    .row-barang-pendukung td {
        padding: 0 !important;
    }

    .barang-pendukung-wrapper {
        border-radius: 0 0 .5rem .5rem;
    }

    .modal-dialog-scrollable .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .btn-teal {
        background: #028284 !important;
        color: #fff !important;
        border: none !important;
    }

    .btn-borrowed {
        background: #ed85ff !important;
        color: #fff !important;
        border: none !important;
    }

    .btn-teal:hover {
        filter: brightness(.95);
    }

    .text-teal {
        color: #028284 !important;
    }

    .spinner-border.text-teal {
        border-color: #028284;
        border-right-color: transparent;
    }

    .badge-status {
        padding: .45rem .7rem;
        border-radius: .5rem;
        font-weight: 700;
        font-size: .72rem;
        letter-spacing: .03em;
    }

    .badge-complete {
        background: #028284;
        color: #fff;
    }

    .badge-approve {
        background: #028284;
        color: #fff;
    }

    .badge-onprogress {
        background: #22c1c3;
        color: #083344;
    }

    .badge-proposed {
        background: #ffc107;
        color: #fff;
    }

    .badge-entry {
        background: #6b7280;
        color: #fff;
    }

    .badge-rejected {
        background: #ef4444;
        color: #fff;
    }

    .badge-borrowed {
        background: #ed85ff;
        color: #fff;
    }

    .badge-revisi {
        background: #ef4444;
        color: #fff;
    }

    .row-revisi {
        background: #ffe4e8 !important;
    }

    .modal-item-table th,
    .modal-item-table td {
        border: 1px solid #dee2e6 !important;
    }

    .btn-approve-item.active {
        background-color: #19a974 !important;
        border-color: #19a974 !important;
    }

    .btn-reject-item.active {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }

    .btn-borrowed-item.active {
        background-color: #ed85ff !important;
        border-color: #e46bf9 !important;
        color: #fff !important;
    }

    .prb-modal-content {
        border-radius: 12px;
        border: 1px solid var(--prb-border, #e5e7eb);
        overflow: hidden;
    }

    .prb-modal-header {
        background: #fafbfc;
        border-bottom: 1px solid var(--prb-border, #e5e7eb);
        padding: 14px 18px;
    }

    .prb-modal-footer {
        background: #fafbfc;
        border-top: 1px solid var(--prb-border, #e5e7eb);
        padding: 10px 16px;
    }

    .prb-card {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        background: #ffffff;
    }

    .prb-card-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid;
    }

    .prb-form-label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 4px;
    }

    .prb-input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 0.875rem;
        font-family: inherit;
    }

    .prb-input:focus {
        outline: none;
        border-color: #0a8f97;
        box-shadow: 0 0 0 2px rgba(10, 143, 151, 0.1);
    }

    .return-asset-section {
        position: relative;
    }

    .return-asset-section::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 0 0 0 8px;
        background: #f59e0b;
    }

    .return-section-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #d97706;
        padding-left: 8px;
    }

    .return-bp-row {
        position: relative;
    }

    .return-input:focus {
        border-color: #f59e0b;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
    }
</style>
@push('js')
    <script>
        $(document).ready(function() {

            let maaAllStok = [];
            let maaStokDisplay = [];  
            let maaSelectedByItem = {};
            let maaSelectedOpsionalByRow = {};
            let maaOpsionalRowCount = 0;
            let maaActiveOpsionalRowIdx = null;
            let maaActiveItemIndex = null;
            let maaActiveItemNama = null;
            let maaStokTracker = {};
            let maaStokManualTracker = {};
            let maaPendingManualBarang = null;
            let maaOpsionalTanggalPinjam = '';
            let maaCurrentPengajuNik  = '';
            let maaCurrentPengajuNama = '';
            let maaOpsionalTanggalAmbil = '';
            let maaOpsionalTanggalKembali = '';
            let maaPendingOpsionalNama = null;
            let maaBookingKonflik = [];
            let maaCurrentDeptId = null;

            function maaToDateInputVal(str) {
                if (!str) return '';
                const s = String(str).trim();
                const parts = s.split('/');
                if (parts.length === 3)
                    return `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}`;
                return s.split('T')[0];
            }

            function maaToDatetimeLocalVal(str, time) {
                const d = maaToDateInputVal(str);
                if (!d) return '';
                return `${d}T${time ?? '00:00'}`;
            }

            $('#maaBarangItemModal, #maaBarangOpsionalModal').on('show.bs.modal', function() {
                $(this).css('z-index', 1060);
                setTimeout(() => {
                    $('.modal-backdrop').not(':first').css('z-index', 1055);
                }, 10);
            });

            $('#maaBarangItemModal, #maaBarangOpsionalModal').on('hidden.bs.modal', function() {
                if ($('#modalAdminApprove').hasClass('show')) {
                    $('body').addClass('modal-open');
                    if (!$('.modal-backdrop').length) {
                        $('<div class="modal-backdrop fade show"></div>').appendTo('body');
                    }
                }
            });

            function maaGetQtyDiminta(idx) {
                return parseInt($(`.maa-btn-open-modal-barang[data-index="${idx}"]`).data('qty-diminta')) || 1;
            }

            function maaUpdatePilihBarangButton(idx) {
                const qtyDiminta = maaGetQtyDiminta(idx);
                const terpilih = maaSelectedByItem[idx] ? maaSelectedByItem[idx].size : 0;
                const $btn = $(`.maa-btn-open-modal-barang[data-index="${idx}"]`);
                const statusItem = $(`#maa-items-body tr[data-item-index="${idx}"] .item-status`).val();
                const stok = parseInt($(`#maa-items-body tr[data-item-index="${idx}"] .maa-stock-display`).val()) ||
                    0;

                $(`.maa-counter-val-${idx}`).text(terpilih);

                if (stok === 0 || statusItem === 'rejected') {
                    $btn.prop('disabled', true).addClass('disabled').css({
                        opacity: 0.5,
                        pointerEvents: 'none'
                    });
                    return;
                }

                if (terpilih >= qtyDiminta) {
                    $btn.prop('disabled', true).addClass('disabled')
                        .css({
                            opacity: 0.5,
                            pointerEvents: 'none'
                        })
                        .attr('title', `Sudah memilih ${terpilih}/${qtyDiminta} barang`);
                } else {
                    $btn.prop('disabled', false).removeClass('disabled')
                        .css({
                            opacity: '',
                            pointerEvents: ''
                        })
                        .attr('title', `Pilih Barang (${terpilih}/${qtyDiminta})`);
                }
            }

            function updateMaaStockDisplay() {
                $('.maa-stock-display').each(function() {
                    const nama = $(this).data('nama');
                    const idx = $(this).data('item-index');

                    // Pakai maaStokDisplay, bukan maaAllStok
                    const normalCount = maaStokDisplay.filter(b =>
                        b.nama_barang.toLowerCase() === nama &&
                        parseInt(b.isactive) === 1 &&
                        b.kode_asset !== null
                    ).length;

                    const manualCount = maaStokDisplay
                        .filter(b =>
                            b.nama_barang.toLowerCase() === nama &&
                            parseInt(b.isactive) === 1 &&
                            b.kode_asset === null
                        )
                        .reduce((sum, b) => sum + (parseInt(b.qty) || 0), 0);

                    const count = normalCount + manualCount;
                    $(this).val(count);
                    $(`#maa-items-body tr[data-item-index="${idx}"] .qty-disetujui`).data('qty-stock', count);
                });

                maaUpdateStockAndAutoReject();
            }

            function maaUpdateStockAndAutoReject() {
                $('.maa-stock-display').each(function() {
                    const idx = $(this).data('item-index');
                    if (idx === undefined) return;

                    const count = parseInt($(this).val()) || 0;
                    const $row = $(`#maa-items-body tr[data-item-index="${idx}"]`);
                    const statusVal = $row.find('.item-status').val();

                    if (count === 0) {
                        if (statusVal !== 'rejected') {
                            $row.find('.item-status').val('rejected');
                            $row.find('.btn-reject-item').addClass('active btn-danger').removeClass(
                                'btn-secondary');
                            $row.find('.btn-approve-item').removeClass('active btn-success').addClass(
                                'btn-secondary');
                            $row.find('.qty-disetujui').val(0).prop('readonly', true);

                            if (maaSelectedByItem[idx]) maaSelectedByItem[idx].clear();
                            $(`#maa-selected-barang-list-${idx}`).empty();
                        }

                        $row.find('.btn-approve-item, .btn-reject-item').prop('disabled', true).addClass(
                            'disabled');
                        $(`.maa-btn-open-modal-barang[data-index="${idx}"]`)
                            .prop('disabled', true).addClass('disabled')
                            .css({
                                opacity: 0.5,
                                pointerEvents: 'none'
                            });
                        $(`.maa-stok-kosong-label-${idx}`).removeClass('d-none');
                    } else {
                        $row.find('.btn-approve-item, .btn-reject-item').prop('disabled', false)
                            .removeClass('disabled');
                        maaUpdatePilihBarangButton(idx);
                    }
                });

                checkAllRejectedAdmin();
            }

            function maaGetAllSelectedKode() {
                const all = new Set();
                Object.values(maaSelectedByItem).forEach(s => s.forEach(k => all.add(k)));
                Object.values(maaSelectedOpsionalByRow).forEach(s => s.forEach(k => all.add(k)));
                return all;
            }

            function maaGetStokSisaRealtime(namaBarang) {
                const nama = (namaBarang ?? '').toLowerCase();

                const stokAwal = maaStokDisplay
                    .filter(b =>
                        parseInt(b.isactive) === 1 &&
                        b.kode_asset === null &&
                        (b.nama_barang ?? '').toLowerCase() === nama
                    )
                    .reduce((sum, b) => sum + (parseInt(b.qty) || 0), 0);

                let terpakai = 0;

                Object.entries(maaSelectedByItem).forEach(([, kodeSet]) => {
                    kodeSet.forEach(uniqueKey => {
                        if (uniqueKey.startsWith(`MANUAL-${nama}-`)) terpakai++;
                    });
                });

                Object.values(maaSelectedOpsionalByRow).forEach(kodeSet => {
                    kodeSet.forEach(uniqueKey => {
                        if (uniqueKey.startsWith(`MANUAL-${nama}-`)) terpakai++;
                    });
                });

                return Math.max(0, stokAwal - terpakai);
            }

            window.openModalAdminApprove = function(data) {
                maaCurrentDeptId = data.departemen_id ?? null;
                maaCurrentPengajuNik  = data.pengaju_nik  ?? '';
                maaCurrentPengajuNama = data.pengaju_nama ?? '';
                maaPenerimaCache = null;
                maaSelectedByItem = {};
                maaSelectedOpsionalByRow = {};
                maaOpsionalRowCount = 0;
                maaActiveOpsionalRowIdx = null;
                maaActiveItemIndex = null;
                maaActiveItemNama = null;
                maaOpsionalTanggalPinjam = '';
                maaOpsionalTanggalAmbil = '';
                maaOpsionalTanggalKembali = '';
                maaPendingOpsionalNama = null;
                maaBookingKonflik = [];

                fillInfo('maa', data);
                $('#maa-tanggal-ambil').val('');
                $('#maa-catatan').val('');
                resetModal({
                    loadId: 'maa-loading',
                    wrapId: 'maa-table-wrap',
                    errId: 'maa-error',
                    bodyId: 'maa-items-body'
                });

                $('#maa-card-barang-opsional').remove();

                document.getElementById('form-admin-approve').action =
                    '{{ url($url_menu) }}/approve_admin/' + data.encId;

                new bootstrap.Modal(document.getElementById('modalAdminApprove')).show();

                let itemsResult = null;
                let stokReady = maaAllStok.length > 0;

                const tryRender = () => {
                    if (itemsResult !== null && (stokReady || maaAllStok.length > 0)) {
                        if (!tryRender._called) {
                            tryRender._called = true;
                            renderInteractive(itemsResult);
                        }
                    }
                };
                tryRender._called = false;

                fetchItems(data.id,
                    items => {
                        itemsResult = items;
                        tryRender();
                    },
                    () => {
                        $('#maa-loading').addClass('d-none');
                        $('#maa-error').removeClass('d-none');
                    }
                );

                // Load stok untuk stock display (angka di kolom stock)
                if (!maaStokDisplay.length) {
                    $.getJSON('{{ url($url_menu . '/stok-barang-display') }}', function(res) {
                        maaStokDisplay = res;
                        stokDisplayReady = true;
                        tryRender();
                    });
                }

                // Load semua kode asset untuk modal pilih barang
                if (!maaAllStok.length) {
                    $.getJSON('{{ url($url_menu . '/stok-barang') }}', function(res) {
                        maaAllStok = res;
                        maaStokTracker = {};
                        maaStokManualTracker = {};
                        res.forEach(b => {
                            const nama = (b.nama_barang ?? '').toLowerCase();
                            if (b.kode_asset !== null) {
                                if (!maaStokTracker[nama]) maaStokTracker[nama] = 0;
                                maaStokTracker[nama]++;
                            } else {
                                if (!maaStokManualTracker[nama]) maaStokManualTracker[nama] = 0;
                                maaStokManualTracker[nama] += (parseInt(b.qty) || 0);
                            }
                        });
                        stokReady = true;
                        tryRender();
                    });
                }
            };

            // Helper: parse tanggal "dd/mm/yyyy" atau "yyyy-mm-dd" ke format "yyyy-mm-dd" untuk input[type=date]
            // (fungsi maaToDateInputVal sudah didefinisikan di atas)

            function renderInteractive(items) {
                let html = !items.length ?
                    '<tr><td colspan="9" class="text-center text-muted">Tidak ada item.</td></tr>' :
                    items.map((it, idx) => {
                        const tglPinjamVal  = maaToDateInputVal(it.tanggal_pinjam);
                        const tglKembaliVal = maaToDateInputVal(it.tanggal_kembali);
                        const jangkaPanjangPinjam  = !it.tanggal_pinjam  ? `<div class="mt-1"><span style="display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:.62rem;font-weight:700;background:#fef3c7;color:#d97706;border:1px solid #fcd34d;white-space:nowrap;"><i class="fas fa-infinity" style="font-size:.58rem;"></i> Jangka Panjang</span></div>` : '';
                        const jangkaPanjangKembali = !it.tanggal_kembali ? `<div class="mt-1"><span style="display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:.62rem;font-weight:700;background:#fef3c7;color:#d97706;border:1px solid #fcd34d;white-space:nowrap;"><i class="fas fa-infinity" style="font-size:.58rem;"></i> Jangka Panjang</span></div>` : '';
                        return `
                    <tr data-item-index="${idx}" data-qty-diminta="${it.qty_diminta ?? 1}">
                        <td style="text-align:center;white-space:nowrap;">
                            <input type="hidden" name="items[${idx}][item_id]" value="${it.id}">
                            <input type="hidden" name="items[${idx}][status]" value="approved" class="item-status">
                            <button type="button" class="btn btn-success mb-0 btn-approve-item" data-index="${idx}" title="Approve">
                                <i class="fas fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-secondary mb-0 btn-reject-item" data-index="${idx}" title="Reject">
                                <i class="fas fa-times"></i>
                            </button>
                        </td>
                        <td><input type="text"   class="form-control" value="${esc(it.nama_barang)}" readonly></td>
                        <td><input type="text"   class="form-control" value="${esc(it.penerima)}"    readonly></td>
                        <td><input type="text"   class="form-control" value="${esc(it.keterangan)}"  readonly></td>
                        <td><input type="number" class="form-control" value="${it.qty_diminta ?? 0}" readonly></td>
                        <td>
                            <input type="number" class="form-control maa-stock-display"
                                data-nama="${(it.nama_barang ?? '').toLowerCase()}"
                                data-item-index="${idx}"
                                value="0" readonly>
                        </td>
                        <td>
                            <input type="number" class="form-control qty-disetujui"
                                name="items[${idx}][qty_disetujui]"
                                value="0" min="0"
                                data-qty-diminta="${it.qty_diminta ?? 0}"
                                data-qty-stock="0" readonly>
                        </td>
                        <td>
                            <input type="date"
                                class="form-control maa-tgl-pinjam"
                                name="items[${idx}][tanggal_pinjam]"
                                value="${tglPinjamVal}"
                                data-idx="${idx}"
                                style="min-width:130px;">
                            ${jangkaPanjangPinjam}
                        </td>
                        <td>
                            <input type="date"
                                class="form-control maa-tgl-kembali"
                                name="items[${idx}][tanggal_kembali]"
                                value="${tglKembaliVal}"
                                data-idx="${idx}"
                                style="min-width:130px;">
                            ${jangkaPanjangKembali}
                        </td>
                    </tr>

                    <tr class="maa-row-pilih-barang" data-for-index="${idx}">
                        <td colspan="9" class="p-0">
                            <div class="px-3 py-2" style="background:#f0fffe; border-top:2px dashed #0a8f97;">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <button type="button"
                                        class="btn btn-sm mb-0 maa-btn-open-modal-barang"
                                        style="border:1px solid #0a8f97; color:#0a8f97; background:#fff;"
                                        data-index="${idx}"
                                        data-qty-diminta="${it.qty_diminta ?? 1}"
                                        data-nama-barang="${(it.nama_barang ?? '').toLowerCase()}">
                                        <i class="fas fa-box me-1"></i> Pilih Barang
                                    </button>
                                    <span class="text-muted small fw-semibold maa-pilih-counter-${idx}" style="letter-spacing:.04em;">
                                        Barang dipilih: <span class="fw-bold text-dark maa-counter-val-${idx}">0</span>/<span class="fw-bold">${it.qty_diminta ?? 1}</span>
                                    </span>
                                    <span class="text-danger small fw-semibold maa-stok-kosong-label-${idx} d-none">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Stok kosong — item otomatis di-reject
                                    </span>
                                </div>
                                <div class="maa-selected-barang-list" id="maa-selected-barang-list-${idx}"></div>
                            </div>
                        </td>
                    </tr>

                    <tr class="maa-row-barang-pendukung" data-barang-pendukung-for="${idx}">
                        <td colspan="9" class="p-0"></td>
                    </tr>`;
                    }).join('');

                $('#maa-items-body').html(html);
                $('#maa-loading').addClass('d-none');
                $('#maa-table-wrap').removeClass('d-none');

                const opsionalCard = `
                    <div class="mt-3" id="maa-card-barang-opsional">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <div class="text-uppercase text-muted small fw-bold" style="letter-spacing:.06em;">
                                Barang Tambahan (Opsional)
                            </div>
                            <button type="button" class="btn btn-sm mb-0 maa-btn-open-modal-nama-barang"
                                style="border:1px solid #0a8f97; color:#0a8f97; font-size:.8rem;">
                                <i class="fas fa-plus me-1"></i> Tambah Barang
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table align-middle table-hover modal-item-table" id="maa-opsional-items-table">
                                <thead style="background:#0a8f97; color:#fff;">
                                    <tr>
                                        <th style="width:80px;">Action</th>
                                        <th style="min-width:150px;">Nama Barang</th>
                                        <th style="min-width:150px;">Penerima</th>
                                        <th style="min-width:150px;">Keterangan</th>
                                        <th style="width:80px; text-align:center;">Qty</th>
                                        <th style="width:60px; text-align:center;">Stock</th>
                                        <th style="width:110px;">Tgl Pinjam</th>
                                        <th style="width:110px;">Tgl Kembali</th>
                                    </tr>
                                </thead>
                                <tbody id="maa-opsional-items-body">
                                    <tr id="maa-opsional-empty-row">
                                        <td colspan="8" class="text-center text-muted fst-italic py-3">
                                            <i class="fas fa-info-circle me-1"></i>Belum ada barang tambahan.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>`;
                $('#maa-table-wrap').after(opsionalCard);

                updateMaaStockDisplay();
            }

            $(document).on('click', '.maa-btn-open-modal-nama-barang', function() {
                if (!$.fn.DataTable.isDataTable('#maaBarangNamaTable')) {
                    $('#maaBarangNamaTable').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"
                        }
                    });
                }

                const maaBarangNamaModalEl = document.getElementById('maaBarangNamaModal');
                $(maaBarangNamaModalEl).css('z-index', 1060);
                setTimeout(() => {
                    $('.modal-backdrop').not(':first').css('z-index', 1055);
                }, 10);
                new bootstrap.Modal(maaBarangNamaModalEl).show();
            });

            $(document).on('click', '.maa-btnSelectBarangNama', function() {
                maaPendingOpsionalNama = $(this).data('name');
                $('#maa-tanggal-opsional-nama-label').text(maaPendingOpsionalNama);

                $('#maa-opsional-input-tanggal-pinjam').val('');
                $('#maa-opsional-input-tanggal-ambil').val('');
                $('#maa-opsional-input-tanggal-kembali').val('');

                let tglPinjamAuto = '';
                let tglKembaliAuto = '';
                let found = false;
                const namaLowerOps = maaPendingOpsionalNama.toLowerCase();

                $('#maa-items-body tr[data-item-index]').each(function() {
                    const $row = $(this);
                    const rowNama = $row.find('input[type="text"]').eq(0).val()?.toLowerCase() ??
                        '';
                    const tglP = $row.find('input.maa-tgl-pinjam').val()  ?? '';
                    const tglK = $row.find('input.maa-tgl-kembali').val() ?? '';
                    if (rowNama === namaLowerOps && tglP && tglK) {
                        tglPinjamAuto = tglP;
                        tglKembaliAuto = tglK;
                        found = true;
                        return false;
                    }
                });

                if (!found) {
                    const $first = $('#maa-items-body tr[data-item-index]').first();
                    if ($first.length) {
                        tglPinjamAuto = $first.find('input.maa-tgl-pinjam').val()  ?? '';
                        tglKembaliAuto = $first.find('input.maa-tgl-kembali').val() ?? '';
                    }
                }

                $('#maa-opsional-input-tanggal-pinjam').val(maaToDateInputVal(tglPinjamAuto));
                $('#maa-opsional-input-tanggal-kembali').val(maaToDateInputVal(tglKembaliAuto));
                $('#maa-opsional-input-tanggal-ambil').val('');

                $('#maa-opsional-input-tanggal-pinjam').attr('min', getNowLocalDateValue());
                const minAmbil = tglPinjamAuto ? maaToDatetimeLocalVal(tglPinjamAuto, '00:00') :
                    getNowLocalDatetimeValue();
                $('#maa-opsional-input-tanggal-ambil').attr('min', minAmbil);
                if (tglKembaliAuto) {
                    $('#maa-opsional-input-tanggal-ambil').attr('max', maaToDatetimeLocalVal(tglKembaliAuto,
                        '23:59'));
                }
                const minKembali = tglPinjamAuto ? maaToDateInputVal(tglPinjamAuto) :
                    getNowLocalDateValue();
                $('#maa-opsional-input-tanggal-kembali').attr('min', minKembali);

                const namaModalEl = document.getElementById('maaBarangNamaModal');
                const namaModalInstance = bootstrap.Modal.getInstance(namaModalEl);
                if (namaModalInstance) {
                    namaModalEl.addEventListener('hidden.bs.modal', function openTanggal() {
                        namaModalEl.removeEventListener('hidden.bs.modal', openTanggal);
                        const tanggalModal = new bootstrap.Modal(document.getElementById(
                            'maaTanggalOpsionalModal'));
                        $('#maaTanggalOpsionalModal').css('z-index', 1060);
                        setTimeout(() => {
                            $('.modal-backdrop').last().css('z-index', 1055);
                        }, 10);
                        tanggalModal.show();
                    });
                    namaModalInstance.hide();
                } else {
                    const tanggalModal = new bootstrap.Modal(document.getElementById(
                        'maaTanggalOpsionalModal'));
                    $('#maaTanggalOpsionalModal').css('z-index', 1060);
                    setTimeout(() => {
                        $('.modal-backdrop').last().css('z-index', 1055);
                    }, 10);
                    tanggalModal.show();
                }
            });

            $(document).on('click', '.maa-btn-open-modal-barang', function() {
                maaActiveItemIndex = $(this).data('index');
                maaActiveItemNama = $(this).data('nama-barang');

                if (!maaSelectedByItem[maaActiveItemIndex]) {
                    maaSelectedByItem[maaActiveItemIndex] = new Set();
                }

                $('#maa-modal-item-label').text($(this).data('nama-barang'));

                const $itemRow      = $(`#maa-items-body tr[data-item-index="${maaActiveItemIndex}"]`);
                const tglPinjamVal  = $itemRow.find('input.maa-tgl-pinjam').val()  ?? '';
                const tglKembaliVal = $itemRow.find('input.maa-tgl-kembali').val() ?? '';

                const relevantKodes = maaAllStok
                    .filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === maaActiveItemNama &&
                        b.kode_asset !== null &&
                        parseInt(b.isactive) === 1
                    ).map(b => b.kode_asset);

                const relevantNamaManual = maaAllStok
                    .filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === maaActiveItemNama &&
                        b.kode_asset === null &&
                        parseInt(b.isactive) === 1
                    ).map(b => (b.nama_barang ?? '').toLowerCase())
                    .filter((v, i, a) => a.indexOf(v) === i);

                maaBookingKonflik = [];

                if ($.fn.DataTable.isDataTable('#maaBarangItemTable')) {
                    $('#maaBarangItemTable').DataTable().clear().destroy();
                }
                $('#maaBarangItemTableBody').html(
                    `<tr><td colspan="3" class="text-center text-muted py-3">
                        <i class="fas fa-spinner fa-spin me-1"></i> Mengecek ketersediaan barang...
                    </td></tr>`
                );

                const openModal = () => {
                    new bootstrap.Modal(document.getElementById('maaBarangItemModal')).show();
                    renderMaaBarangItemTable();
                };

                if (relevantKodes.length === 0 && relevantNamaManual.length === 0) {
                    openModal();
                    return;
                }

                $.ajax({
                    url: '{{ url($url_menu . '/booking-konflik') }}',
                    method: 'GET',
                    data: {
                        kode_assets     : relevantKodes,
                        nama_barangs    : relevantNamaManual,
                        tanggal_pinjam  : tglPinjamVal,
                        tanggal_kembali : tglKembaliVal,
                    },
                    success: function(res) {
                        maaBookingKonflik = res;
                        openModal();
                    },
                    error: function() {
                        maaBookingKonflik = [];
                        openModal();
                    }
                });
            });

            function renderMaaBarangOpsionalTableFiltered(namaBarang) {
                if ($.fn.DataTable.isDataTable('#maaBarangOpsionalTable')) {
                    $('#maaBarangOpsionalTable').DataTable().clear().destroy();
                }

                const filtered = maaAllStok.filter(b =>
                    parseInt(b.isactive) === 1 &&
                    b.kode_asset !== null &&
                    (!namaBarang || (b.nama_barang ?? '').toLowerCase() === namaBarang.toLowerCase())
                );

                const manualItems = maaStokDisplay.filter(b =>
                    parseInt(b.isactive) === 1 &&
                    b.kode_asset === null &&
                    (!namaBarang || (b.nama_barang ?? '').toLowerCase() === namaBarang.toLowerCase())
                );

                const tbody = $('#maaBarangOpsionalTableBody').empty();

                const parseDate = (str) => {
                    if (!str) return null;
                    const s = String(str).trim();
                    const parts = s.split('/');
                    if (parts.length === 3) {
                        return new Date(
                            `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}T00:00:00`);
                    }
                    const dateOnly = s.split(' ')[0].split('T')[0];
                    return new Date(dateOnly + 'T00:00:00');
                };
                const fmtDate = (str) => {
                    if (!str) return '-';
                    const d = parseDate(str);
                    if (!d || isNaN(d)) return str;
                    return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
                };
                const isOverlap = (p1, k1, p2, k2) => {
                    const a1 = parseDate(p1), a2 = parseDate(k1);
                    const b1 = parseDate(p2), b2 = parseDate(k2);
                    if (!a1 || !a2 || !b1 || !b2) return false;
                    return a1 <= b2 && a2 >= b1;
                };

                const tglPinjam  = maaOpsionalTanggalPinjam;
                const tglKembali = maaOpsionalTanggalKembali;
                const mulaiB  = parseDate(tglPinjam);
                const selesaiB = parseDate(tglKembali);
                const rowIdx  = maaActiveOpsionalRowIdx;

                if (!filtered.length && !manualItems.length) {
                    tbody.html(
                        `<tr><td colspan="4" class="text-center text-muted fst-italic">Tidak ada barang tersedia untuk "${namaBarang}".</td></tr>`
                    );
                } else {

                    manualItems.forEach((item) => {
                        const nama = (item.nama_barang ?? '').toLowerCase();

                        const konflikManual = maaBookingKonflik.filter(k => {
                            if (k.tipe !== 'manual') return false;
                            if ((k.nama_barang ?? '').toLowerCase() !== nama) return false;
                            if (!mulaiB || !selesaiB) return false;
                            const mulaiA  = parseDate(k.tanggal_pinjam);
                            const selesaiA = parseDate(k.tanggal_kembali);
                            if (!mulaiA || !selesaiA) return false;
                            return mulaiB <= selesaiA && selesaiB >= mulaiA;
                        });

                        const totalStok = maaStokDisplay
                            .filter(b =>
                                parseInt(b.isactive) === 1 &&
                                b.kode_asset === null &&
                                (b.nama_barang ?? '').toLowerCase() === nama
                            )
                            .reduce((sum, b) => sum + (parseInt(b.qty) || 0), 0);

                        const unitKonflik  = konflikManual.length;
                        const sisaStok     = maaGetStokSisaRealtime(nama);
                        const sisaEfektif  = Math.max(0, sisaStok - unitKonflik);
                        const stokHabis    = sisaEfektif <= 0;
                        const manualBaseKey = `MANUAL-${nama}-${item.id}`;

                        let btnHtml = '', warningHtml = '';

                        if (stokHabis) {
                            btnHtml = `<button class="btn btn-danger btn-sm mb-0" disabled><i class="fas fa-ban me-1"></i>Tidak Tersedia</button>`;
                        } else {
                            btnHtml = `<button type="button"
                                class="btn btn-warning btn-sm mb-0 maa-btn-select-barang-opsional-manual"
                                data-kode="${manualBaseKey}" data-nama="${item.nama_barang}"
                                data-value="${item.value ?? ''}" data-item-id="${item.id}"
                                data-sisa-stok="${sisaEfektif}">Select (Sisa: ${sisaEfektif})</button>`;
                        }

                        if (unitKonflik > 0) {
                            const konflikLines = konflikManual.map(k =>
                                `<div style="font-size:.7rem; color:#b45309;"><i class="fas fa-calendar-times me-1"></i>1 unit · ${fmtDate(k.tanggal_pinjam)} – ${fmtDate(k.tanggal_kembali)}</div>`
                            ).join('');
                            warningHtml = `<div class="mt-1 p-1 rounded" style="background:#fffbeb; border:1px dashed #fcd34d; max-width:280px;">
                                <div style="font-size:.68rem; font-weight:600; color:#b45309; margin-bottom:2px;"><i class="fas fa-exclamation-triangle me-1"></i>${unitKonflik} dari ${totalStok} unit sedang dipinjam</div>
                                ${konflikLines}</div>`;
                        }

                        tbody.append(`<tr>
                            <td>${btnHtml}${warningHtml}</td>
                            <td>${item.value ?? '-'}</td>
                            <td><span class="badge bg-warning text-dark">Manual</span> ${item.nama_barang} <small class="text-muted">(Sisa: ${sisaEfektif})</small></td>
                            <td><code class="text-muted">-</code></td>
                        </tr>`);
                    });

                    filtered.forEach(b => {
                        const dipilihDiRowIni = maaSelectedOpsionalByRow[rowIdx]?.has(b.kode_asset);

                        const dipakaiOpsionalLain = Object.entries(maaSelectedOpsionalByRow).some(([rIdx, kodeSet]) => {
                            if (parseInt(rIdx) === rowIdx) return false;
                            if (!kodeSet.has(b.kode_asset)) return false;
                            const $r = $(`tr[data-opsional-index="${rIdx}"]`);
                            const tglP = $r.data('tanggal-pinjam');
                            const tglK = $r.data('tanggal-kembali');
                            return isOverlap(tglP, tglK, tglPinjam, tglKembali);
                        });

                        const dipakaiItemReguler = Object.entries(maaSelectedByItem).some(([iIdx, kodeSet]) => {
                            if (!kodeSet.has(b.kode_asset)) return false;
                            const $r = $(`#maa-items-body tr[data-item-index="${iIdx}"]`);
                            const tglP = $r.find('input.maa-tgl-pinjam').val();
                            const tglK = $r.find('input.maa-tgl-kembali').val();
                            return isOverlap(tglP, tglK, tglPinjam, tglKembali);
                        });

                        const konflikList = maaBookingKonflik.filter(k => {
                            if (k.kode_asset !== b.kode_asset) return false;
                            if (!mulaiB) return false;

                            const mulaiA = parseDate(k.tanggal_pinjam);
                            if (!mulaiA) return false;

                            if (!selesaiB) {
                                const selesaiA = parseDate(k.tanggal_kembali);
                                if (!selesaiA) return true;
                                return selesaiA >= mulaiB;
                            }

                            const selesaiA = parseDate(k.tanggal_kembali);
                            if (!selesaiA) return mulaiA <= mulaiB;

                            return mulaiB <= selesaiA && selesaiB >= mulaiA;
                        });
                        const adaKonflik = konflikList.length > 0;

                        let btnHtml = '', warningHtml = '';

                        if (dipilihDiRowIni) {
                            btnHtml = `<button class="btn btn-secondary btn-sm mb-0" disabled><i class="fas fa-check me-1"></i>Dipilih</button>`;
                        } else if (dipakaiOpsionalLain || dipakaiItemReguler) {
                            btnHtml = `<button class="btn btn-danger btn-sm mb-0" disabled><i class="fas fa-ban me-1"></i>Tidak Tersedia</button>`;
                            warningHtml = `
                            <div class="mt-1 p-1 rounded" style="background:#f5f3ff; border:1px dashed #c4b5fd; max-width:260px;">
                                <div style="font-size:.68rem; font-weight:600; color:#7c3aed;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    ${dipakaiOpsionalLain ? 'KONFLIK DENGAN OPSIONAL LAIN' : 'KONFLIK DENGAN ITEM REGULER'}
                                </div>
                            </div>`;
                        } else if (adaKonflik) {
                            const isJangkaPanjang = konflikList.some(k => k.is_jangka_panjang == 1);

                            const konflikLines = konflikList.map(k =>
                                k.is_jangka_panjang == 1
                                ? `<div style="font-size:.7rem;color:#7c3aed;">
                                        <i class="fas fa-infinity me-1"></i>
                                        Dipinjam sejak: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
                                        — <strong>tanpa batas waktu</strong>
                                </div>`
                                : `<div style="font-size:.7rem;color:#dc2626;">
                                        <i class="fas fa-calendar-times me-1"></i>
                                        ${fmtDate(k.tanggal_pinjam)} – ${fmtDate(k.tanggal_kembali)}
                                </div>`
                            ).join('');

                            btnHtml = isJangkaPanjang
                                ? `<button class="btn btn-sm mb-0" disabled
                                        style="background:#f5f3ff;color:#7c3aed;border:1px solid #c4b5fd;">
                                        <i class="fas fa-infinity me-1"></i>Dipinjam Tanpa Batas
                                </button>`
                                : `<button class="btn btn-danger btn-sm mb-0" disabled>
                                        <i class="fas fa-ban me-1"></i>Sedang Dipinjam
                                </button>`;

                            warningHtml = `
                            <div class="mt-1 p-1 rounded" style="
                                background:${isJangkaPanjang ? '#f5f3ff' : '#fff5f5'};
                                border:1px dashed ${isJangkaPanjang ? '#c4b5fd' : '#fca5a5'};
                                max-width:260px;">
                                <div style="font-size:.68rem;font-weight:600;
                                    color:${isJangkaPanjang ? '#7c3aed' : '#b91c1c'};margin-bottom:2px;">
                                    <i class="fas fa-${isJangkaPanjang ? 'infinity' : 'exclamation-triangle'} me-1"></i>
                                    ${isJangkaPanjang ? 'DIPINJAM JANGKA PANJANG (TANPA BATAS)' : 'SEDANG DIPINJAM'}
                                </div>
                                ${konflikLines}
                            </div>`;
                        } else {
                            btnHtml = `<button type="button"
                                class="btn btn-primary btn-sm mb-0 maa-btn-select-barang-opsional"
                                data-kode="${b.kode_asset}" data-nama="${b.nama_barang}" data-value="${b.value ?? ''}">
                                <i class="fas fa-check me-1"></i>Select</button>`;
                        }

                        tbody.append(`<tr>
                            <td>${btnHtml}${warningHtml}</td>
                            <td>${b.value ?? '-'}</td>
                            <td>${b.nama_barang ?? '-'}</td>
                            <td><code>${b.kode_asset ?? '-'}</code></td>
                        </tr>`);
                    });
                }

                $('#maaBarangOpsionalTable').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"
                    }
                });
            }

            function renderMaaBarangItemTable() {
                if ($.fn.DataTable.isDataTable('#maaBarangItemTable')) {
                    $('#maaBarangItemTable').DataTable().clear().destroy();
                }

                const filtered = maaAllStok.filter(b =>
                    b.nama_barang.toLowerCase() === maaActiveItemNama &&
                    // (!b.ket || b.ket === '' || b.ket === null) &&
                    parseInt(b.isactive) === 1 &&
                    b.kode_asset !== null
                );

                const manualItems = maaAllStok.filter(b =>
                    b.nama_barang.toLowerCase() === maaActiveItemNama &&
                    parseInt(b.isactive) === 1 &&
                    b.kode_asset === null 
                    // (!b.ket || b.ket === '' || b.ket === null)
                );

                const tbody = $('#maaBarangItemTableBody').empty();

                const parseDate = (str) => {
                    if (!str) return null;
                    const s = String(str).trim();
                    const parts = s.split('/');
                    if (parts.length === 3) {
                        return new Date(
                            `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}T00:00:00`);
                    }
                    const dateOnly = s.split(' ')[0].split('T')[0];
                    return new Date(dateOnly + 'T00:00:00');
                };
                const fmtDate = (str) => {
                    if (!str) return '-';
                    const d = parseDate(str);
                    if (!d || isNaN(d)) return str;
                    return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
                };
                const isOverlap = (p1, k1, p2, k2) => {
                    const a1 = parseDate(p1),
                        a2 = parseDate(k1);
                    const b1 = parseDate(p2),
                        b2 = parseDate(k2);
                    if (!a1 || !a2 || !b1 || !b2) return false;
                    return a1 <= b2 && a2 >= b1;
                };

                const $itemRow = $(`#maa-items-body tr[data-item-index="${maaActiveItemIndex}"]`);
                const tglPinjamStr = $itemRow.find('input.maa-tgl-pinjam').val();
                const tglKembaliStr = $itemRow.find('input.maa-tgl-kembali').val();
                const mulaiB = parseDate(tglPinjamStr);
                const selesaiB = parseDate(tglKembaliStr);

                if (!filtered.length && !manualItems.length) {
                    tbody.html(
                        `<tr><td colspan="3" class="text-center text-muted fst-italic">Tidak ada barang tersedia untuk "${maaActiveItemNama}".</td></tr>`
                    );
                } else {

                    manualItems.forEach((item) => {
                        const nama = (item.nama_barang ?? '').toLowerCase();
                        const konflikManual = maaBookingKonflik.filter(k => {
                            if (k.tipe !== 'manual') return false;
                            if ((k.nama_barang ?? '').toLowerCase() !== nama) return false;
                            if (!mulaiB || !selesaiB) return false;
                            const mulaiA = parseDate(k.tanggal_pinjam);
                            const selesaiA = parseDate(k.tanggal_kembali);
                            if (!mulaiA || !selesaiA) return false;
                            return mulaiB <= selesaiA && selesaiB >= mulaiA;
                        });

                        const totalStok = maaStokManualTracker[nama] ?? 0;
                        const unitKonflik = konflikManual.length;
                        const sisaStok = maaGetStokSisaRealtime(nama);
                        const sisaEfektif = Math.max(0, sisaStok - unitKonflik);
                        const stokHabis = sisaEfektif <= 0;
                        const manualBaseKey = `MANUAL-${nama}-${item.id}`;

                        let btnHtml = '',
                            warningHtml = '';

                        if (stokHabis) {
                            btnHtml =
                                `<button class="btn btn-danger btn-sm mb-0" disabled><i class="fas fa-ban me-1"></i>Tidak Tersedia</button>`;
                        } else {
                            btnHtml = `<button type="button"
                                class="btn btn-warning btn-sm mb-0 maa-btn-select-barang-item-manual"
                                data-kode="${manualBaseKey}" data-nama="${item.nama_barang}"
                                data-value="${item.value ?? ''}" data-item-id="${item.id}"
                                data-sisa-stok="${sisaEfektif}">Select (Sisa: ${sisaEfektif})</button>`;
                        }

                        if (unitKonflik > 0) {
                            const konflikLines = konflikManual.map(k =>
                                `<div style="font-size:.7rem; color:#b45309;"><i class="fas fa-calendar-times me-1"></i>1 unit · ${fmtDate(k.tanggal_pinjam)} – ${fmtDate(k.tanggal_kembali)}</div>`
                            ).join('');
                            warningHtml = `<div class="mt-1 p-1 rounded" style="background:#fffbeb; border:1px dashed #fcd34d; max-width:280px;">
                                <div style="font-size:.68rem; font-weight:600; color:#b45309; margin-bottom:2px;"><i class="fas fa-exclamation-triangle me-1"></i>${unitKonflik} dari ${totalStok} unit sedang dipinjam</div>
                                ${konflikLines}</div>`;
                        }

                        tbody.append(`<tr>
                            <td>${btnHtml}${warningHtml}</td>
                            <td><span class="badge bg-warning text-dark">Manual</span> ${item.nama_barang} <small class="text-muted">(Sisa: ${sisaEfektif})</small></td>
                            <td><code class="text-muted">-</code></td>
                        </tr>`);
                    });

                    filtered.forEach(b => {
                        const alreadyInItem = Object.entries(maaSelectedByItem).some(([iIdx, kodeSet]) => {
                            if (parseInt(iIdx) === maaActiveItemIndex) return false;
                            return kodeSet.has(b.kode_asset);
                        });

                        const dipilihDiItemIni = maaSelectedByItem[maaActiveItemIndex]?.has(b.kode_asset);

                        const opsionalOverlapList = Object.entries(maaSelectedOpsionalByRow)
                            .filter(([, kodeSet]) => kodeSet.has(b.kode_asset))
                            .filter(([rIdx]) => {
                                const $r = $(`tr[data-opsional-index="${rIdx}"]`);
                                const tglP = $r.data('tanggal-pinjam');
                                const tglK = $r.data('tanggal-kembali');
                                return isOverlap(tglP, tglK, tglPinjamStr, tglKembaliStr);
                            });
                        const alreadyInOpsionalOverlap = opsionalOverlapList.length > 0;

                        const itemOverlapList = Object.entries(maaSelectedByItem)
                            .filter(([iIdx, kodeSet]) => {
                                if (parseInt(iIdx) === maaActiveItemIndex) return false;
                                return kodeSet.has(b.kode_asset);
                            })
                            .filter(([iIdx]) => {
                                const $r = $(`#maa-items-body tr[data-item-index="${iIdx}"]`);
                                const tglP = $r.find('input.maa-tgl-pinjam').val();
                                const tglK = $r.find('input.maa-tgl-kembali').val();
                                return isOverlap(tglP, tglK, tglPinjamStr, tglKembaliStr);
                            });
                        const alreadyInItemOverlap = itemOverlapList.length > 0;

                        const konflikList = maaBookingKonflik.filter(k => {
                            if (k.kode_asset !== b.kode_asset) return false;
                            if (!mulaiB) return false;

                            const mulaiA = parseDate(k.tanggal_pinjam);
                            if (!mulaiA) return false;

                            // C jangka panjang (selesaiB null) → konflik jika A mulai sebelum/sama tgl pinjam C
                            if (!selesaiB) {
                                const selesaiA = parseDate(k.tanggal_kembali);
                                if (!selesaiA) return true;
                                return selesaiA >= mulaiB;
                            }

                            // A jangka panjang (selesaiA null) → konflik jika A mulai sebelum/sama tgl pinjam C
                            const selesaiA = parseDate(k.tanggal_kembali);
                            if (!selesaiA) return mulaiA <= mulaiB;

                            // Normal overlap
                            return mulaiB <= selesaiA && selesaiB >= mulaiA;
                        });
                        const adaKonflik = konflikList.length > 0;

                        let btnHtml = '',
                            warningHtml = '';

                        if (dipilihDiItemIni) {
                            btnHtml =
                                `<button class="btn btn-secondary btn-sm mb-0" disabled><i class="fas fa-check me-1"></i>Dipilih</button>`;
                        } else if (alreadyInOpsionalOverlap) {
                            btnHtml =
                                `<button class="btn btn-danger btn-sm mb-0" disabled><i class="fas fa-ban me-1"></i>Tidak Tersedia</button>`;
                            warningHtml = `
                            <div class="mt-1 p-1 rounded" style="background:#f5f3ff; border:1px dashed #c4b5fd; max-width:280px;">
                                <div style="font-size:.68rem; font-weight:600; color:#7c3aed; margin-bottom:2px;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>KONFLIK DENGAN BARANG OPSIONAL
                                </div>
                            </div>`;
                        } else if (alreadyInItemOverlap) {
                            btnHtml =
                                `<button class="btn btn-danger btn-sm mb-0" disabled><i class="fas fa-ban me-1"></i>Tidak Tersedia</button>`;
                            warningHtml = `
                            <div class="mt-1 p-1 rounded" style="background:#f5f3ff; border:1px dashed #c4b5fd; max-width:280px;">
                                <div style="font-size:.68rem; font-weight:600; color:#7c3aed; margin-bottom:2px;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>KONFLIK DENGAN ITEM REGULER LAIN
                                </div>
                            </div>`;
                        } else if (adaKonflik) {
                            const isJangkaPanjang = konflikList.some(k => k.is_jangka_panjang == 1);

                            const konflikLines = konflikList.map(k =>
                                k.is_jangka_panjang == 1
                                ? `<div style="font-size:.7rem;color:#7c3aed;">
                                        <i class="fas fa-infinity me-1"></i>
                                        Dipinjam sejak: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
                                        — <strong>tanpa batas waktu</strong>
                                </div>`
                                : `<div style="font-size:.7rem;color:#dc2626;">
                                        <i class="fas fa-calendar-times me-1"></i>
                                        ${fmtDate(k.tanggal_pinjam)} – ${fmtDate(k.tanggal_kembali)}
                                </div>`
                            ).join('');

                            btnHtml = isJangkaPanjang
                                ? `<button class="btn btn-sm mb-0" disabled
                                        style="background:#f5f3ff;color:#7c3aed;border:1px solid #c4b5fd;">
                                        <i class="fas fa-infinity me-1"></i>Dipinjam Tanpa Batas
                                </button>`
                                : `<button class="btn btn-danger btn-sm mb-0" disabled>
                                        <i class="fas fa-ban me-1"></i>Sedang Dipinjam
                                </button>`;

                            warningHtml = `
                            <div class="mt-1 p-1 rounded" style="
                                background:${isJangkaPanjang ? '#f5f3ff' : '#fff5f5'};
                                border:1px dashed ${isJangkaPanjang ? '#c4b5fd' : '#fca5a5'};
                                max-width:260px;">
                                <div style="font-size:.68rem;font-weight:600;
                                    color:${isJangkaPanjang ? '#7c3aed' : '#b91c1c'};margin-bottom:2px;">
                                    <i class="fas fa-${isJangkaPanjang ? 'infinity' : 'exclamation-triangle'} me-1"></i>
                                    ${isJangkaPanjang ? 'DIPINJAM JANGKA PANJANG (TANPA BATAS)' : 'SEDANG DIPINJAM'}
                                </div>
                                ${konflikLines}
                            </div>`;
                        } else {
                            btnHtml = `<button type="button"
                                class="btn btn-primary btn-sm mb-0 maa-btn-select-barang-item"
                                data-kode="${b.kode_asset}" data-nama="${b.nama_barang}" data-value="${b.value ?? ''}">
                                <i class="fas fa-check me-1"></i>Select</button>`;
                        }

                        tbody.append(`<tr>
                            <td>${btnHtml}${warningHtml}</td>
                            <td>${b.nama_barang ?? '-'}</td>
                            <td><code>${b.kode_asset ?? '-'}</code></td>
                        </tr>`);
                    });
                }

                $('#maaBarangItemTable').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"
                    }
                });
            }

            $(document).on('click', '.maa-btn-select-barang-item', function() {
                const kode = $(this).data('kode');
                const nama = $(this).data('nama');
                const value = $(this).data('value') ?? '';
                const idx = maaActiveItemIndex;

                if (!maaSelectedByItem[idx]) maaSelectedByItem[idx] = new Set();

                const qtyDiminta = maaGetQtyDiminta(idx);

                if (maaSelectedByItem[idx].size >= qtyDiminta) {
                    Swal.fire({
                        title: 'Batas Pilihan Tercapai',
                        text: `Qty diminta hanya ${qtyDiminta}.`,
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                maaSelectedByItem[idx].add(kode);
                const barangIdx = maaSelectedByItem[idx].size - 1;

                const sudahAdaTglAmbil = $(`#maa-selected-barang-list-${idx} .tgl-ambil-barang`).length > 0;
                const isFirstOfItem = !sudahAdaTglAmbil;

                $(`#maa-selected-barang-list-${idx}`).append(`
                    <div class="selected-barang-card border rounded p-2 mb-2"
                        id="maa-selected-card-${idx}-${barangIdx}"
                        data-kode="${kode}"
                        style="background:#fff; border-color:#c3e6e7 !important;">
                        <input type="hidden" name="items[${idx}][barang][${barangIdx}][kode_asset]" value="${kode}">
                        <input type="hidden" name="items[${idx}][barang][${barangIdx}][nama_barang]" value="${nama}">
                        <input type="hidden" name="items[${idx}][barang][${barangIdx}][value]" value="${value}">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <button type="button"
                                class="btn btn-sm btn-outline-danger mb-0 maa-btn-remove-selected-barang flex-shrink-0"
                                style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                                data-kode="${kode}" data-item-idx="${idx}"
                                data-card-id="maa-selected-card-${idx}-${barangIdx}" title="Hapus">
                                <i class="fas fa-times" style="font-size:.7rem;"></i>
                            </button>
                            <span class="badge" style="background:#0a8f97;">${barangIdx + 1}</span>
                            <strong style="font-size:.85rem;">${nama}</strong>
                            <code class="text-muted" style="font-size:.78rem;">${kode}</code>
                            ${isFirstOfItem ? `
                                        <div class="ms-auto d-inline-flex align-items-center gap-1 px-2 py-1 rounded"
                                            style="background:linear-gradient(135deg,#e0fdf4,#cffafe); border:1.5px solid #0a8f97;">
                                            <i class="fas fa-calendar-check" style="color:#0a8f97; font-size:.8rem;"></i>
                                            <label style="font-size:.75rem; font-weight:700; color:#065f46; margin:0; white-space:nowrap;">
                                                Tgl Ambil <span style="color:#dc2626;">*</span>
                                            </label>
                                            <input type="datetime-local"
                                                class="form-control form-control-sm tgl-ambil-barang"
                                                name="items[${idx}][barang][0][tanggal_ambil]"
                                                style="width:175px; font-size:.78rem; border-color:#0a8f97; background:#f0fffe;"
                                                required>
                                        </div>` : ''}
                        </div>
                        ${maaRenderBarangPendukungForBarang(idx, barangIdx, kode, nama)}
                        
                    </div>`);

                $(`#maa-items-body tr[data-item-index="${idx}"] .qty-disetujui`).val(maaSelectedByItem[idx]
                    .size);
                maaUpdatePilihBarangButton(idx);
                maaUpdateKodeAssetDisplay(idx);

                const terpilih = maaSelectedByItem[idx].size;
                if (terpilih >= qtyDiminta) {
                    bootstrap.Modal.getInstance(document.getElementById('maaBarangItemModal')).hide();
                } else {
                    renderMaaBarangItemTable();
                }

                setTimeout(applyBackdateMinToAdminApproveModal, 100);
            });

            $(document).on('click', '.maa-btn-remove-selected-barang', function() {
                const kode = $(this).data('kode');
                const itemIdx = $(this).data('item-idx');
                const cardId = $(this).data('card-id');

                if (maaSelectedByItem[itemIdx]) maaSelectedByItem[itemIdx].delete(kode);
                $(`#${cardId}`).remove();
                $(`#maa-items-body tr[data-item-index="${itemIdx}"] .qty-disetujui`)
                    .val(maaSelectedByItem[itemIdx] ? maaSelectedByItem[itemIdx].size : 0);

                maaUpdatePilihBarangButton(itemIdx);
                maaUpdateKodeAssetDisplay(itemIdx);
            });

            // Update tampilan kode asset di kolom tabel setelah pilih/hapus barang
            function maaUpdateKodeAssetDisplay(idx) {
                const $display = $(`#maa-kode-asset-display-${idx}`);
                if (!$display.length) return;
                const kodes = maaSelectedByItem[idx] ? [...maaSelectedByItem[idx]] : [];
                if (!kodes.length) {
                    $display.html('<span class="text-muted fst-italic">—</span>');
                    return;
                }
                const html = kodes.map(k => {
                    const isManual = k.startsWith('MANUAL-');
                    if (isManual) {
                        const parts = k.split('-');
                        const nama = parts.slice(1, -1).join('-');
                        return `<span class="badge" style="background:#f59e0b;color:#fff;font-size:.7rem;margin-bottom:2px;display:inline-block;">
                            <i class="fas fa-box me-1"></i>${nama} (Manual)
                        </span>`;
                    }
                    return `<code style="display:block;font-size:.78rem;color:#0a8f97;background:#f0fffe;border:1px solid #b2e0e2;border-radius:4px;padding:1px 6px;margin-bottom:2px;">${k}</code>`;
                }).join('');
                $display.html(html);
            }

            // Event: tanggal pinjam/kembali diubah → re-fetch konflik & re-render tabel barang jika modal terbuka
            $(document).on('change', '#maa-items-body .maa-tgl-pinjam, #maa-items-body .maa-tgl-kembali', function() {
                const idx = parseInt($(this).data('idx'));

                const $row       = $(`#maa-items-body tr[data-item-index="${idx}"]`);
                const tglPinjam  = $row.find('input.maa-tgl-pinjam').val();
                const tglKembali = $row.find('input.maa-tgl-kembali').val();

                if (tglPinjam) {
                    $row.find('input.maa-tgl-kembali').attr('min', tglPinjam);
                    if (tglKembali && tglKembali < tglPinjam) {
                        $row.find('input.maa-tgl-kembali').val(tglPinjam);
                    }
                }

                if (maaActiveItemIndex === idx && $('#maaBarangItemModal').hasClass('show')) {
                    const relevantKodes = maaAllStok
                        .filter(b =>
                            (b.nama_barang ?? '').toLowerCase() === maaActiveItemNama &&
                            b.kode_asset !== null &&
                            parseInt(b.isactive) === 1
                        ).map(b => b.kode_asset);

                    const relevantNamaManual = maaAllStok
                        .filter(b =>
                            (b.nama_barang ?? '').toLowerCase() === maaActiveItemNama &&
                            b.kode_asset === null &&
                            parseInt(b.isactive) === 1
                        ).map(b => (b.nama_barang ?? '').toLowerCase())
                        .filter((v, i, a) => a.indexOf(v) === i);

                    if (!relevantKodes.length && !relevantNamaManual.length) {
                        renderMaaBarangItemTable();
                        return;
                    }

                    $.ajax({
                        url: '{{ url($url_menu . '/booking-konflik') }}',
                        method: 'GET',
                        data: {
                            kode_assets     : relevantKodes,
                            nama_barangs    : relevantNamaManual,
                            tanggal_pinjam  : tglPinjam,
                            tanggal_kembali : tglKembali,
                        },
                        success: function(res) { maaBookingKonflik = res; renderMaaBarangItemTable(); },
                        error: function()      { maaBookingKonflik = []; renderMaaBarangItemTable(); }
                    });
                }
            });

            function maaRenderBarangPendukungForBarang(itemIdx, barangIdx, kodeAsset, namaBarang) {
                return `
                    <div class="maa-barang-pendukung-barang-section mt-2 pt-2"
                        style="border-top:1px dashed #cce; padding-left:4px;">
                        <div class="text-muted small fw-semibold mb-1">
                            <i class="fas fa-clipboard-list me-1 text-teal"></i>
                            Barang Pendukung: <span class="text-dark">${namaBarang}</span>
                            <span class="text-muted">(${kodeAsset})</span>
                        </div>
                        <div class="maa-barang-pendukung-list-barang" id="maa-barang-pendukung-list-barang-${itemIdx}-${barangIdx}">
                            ${maaBuildBarangPendukungRow(itemIdx, barangIdx, 0, true)}
                        </div>
                        <button type="button"
                            class="btn btn-outline-primary btn-xs mb-0 mt-1 maa-btn-add-barang-pendukung-barang"
                            style="font-size:.75rem; padding:2px 10px;"
                            data-item-idx="${itemIdx}" data-barang-idx="${barangIdx}">
                            <i class="fas fa-plus me-1"></i> Tambah Barang Pendukung
                        </button>
                    </div>`;
            }

            function maaBuildBarangPendukungRow(itemIdx, barangIdx, barangPendukungIdx, isFirst) {
                const delBtn = isFirst ?
                    `<div style="width:32px;"></div>` :
                    `<button type="button"
                        class="btn btn-sm btn-outline-danger mb-0 maa-btn-remove-barang-pendukung-barang flex-shrink-0"
                        style="height:32px;width:32px;padding:0;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-times"></i></button>`;
                return `
                    <div class="maa-barang-pendukung-row-barang d-flex align-items-start gap-2 mb-2">
                        <div class="text-muted small mt-2 pt-1" style="min-width:20px;text-align:right;">${barangPendukungIdx + 1}.</div>
                        ${delBtn}
                        <input type="hidden" name="items[${itemIdx}][barang][${barangIdx}][barang_pendukung][${barangPendukungIdx}][kondisi_barang_pendukung]" value="baik">
                        <input type="text" class="form-control form-control-sm"
                            name="items[${itemIdx}][barang][${barangIdx}][barang_pendukung][${barangPendukungIdx}][nama_barang_pendukung]"
                            placeholder="Nama Barang Pendukung, cth: Layar, Keyboard..." style="min-width:160px;">
                        <input type="text" class="form-control form-control-sm"
                            name="items[${itemIdx}][barang][${barangIdx}][barang_pendukung][${barangPendukungIdx}][catatan]"
                            placeholder="Catatan (opsional)..." style="min-width:200px;">
                    </div>`;
            }

            $(document).on('click', '.maa-btn-add-barang-pendukung-barang', function() {
                const itemIdx = $(this).data('item-idx');
                const barangIdx = $(this).data('barang-idx');
                const list = $(`#maa-barang-pendukung-list-barang-${itemIdx}-${barangIdx}`);
                list.append(maaBuildBarangPendukungRow(itemIdx, barangIdx, list.find(
                    '.maa-barang-pendukung-row-barang').length, false));
            });

            $(document).on('click', '.maa-btn-remove-barang-pendukung-barang', function() {
                const list = $(this).closest('.maa-barang-pendukung-list-barang');
                $(this).closest('.maa-barang-pendukung-row-barang').remove();
                list.find('.maa-barang-pendukung-row-barang').each(function(i) {
                    $(this).find('input').each(function() {
                        $(this).attr('name', ($(this).attr('name') || '').replace(
                            /\[barang_pendukung\]\[\d+\]/,
                            `[barang_pendukung][${i}]`));
                    });
                });
            });


            $(document).on('click', '.maa-btn-select-barang-opsional', function() {
                const kode = $(this).data('kode');
                const nama = $(this).data('nama');
                const value = $(this).data('value') ?? '';
                const rowIdx = maaActiveOpsionalRowIdx;

                if (!maaSelectedOpsionalByRow[rowIdx]) maaSelectedOpsionalByRow[rowIdx] = new Set();
                maaSelectedOpsionalByRow[rowIdx].add(kode);

                maaAppendOpsionalCard(rowIdx, kode, nama, value, false);

                $(`.maa-btn-open-modal-opsional-asset[data-row-idx="${rowIdx}"]`)
                    .prop('disabled', true).addClass('disabled')
                    .css({
                        opacity: 0.5,
                        pointerEvents: 'none'
                    });

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

            $(document).on('click', '.maa-btn-select-barang-opsional-manual', function() {
                const kode = $(this).data('kode');
                const nama = $(this).data('nama');
                const value = $(this).data('value') ?? '';
                const sisaStok = parseInt($(this).data('sisa-stok')) || 0;
                const rowIdx = maaActiveOpsionalRowIdx;

                if (sisaStok <= 0) {
                    Swal.fire({
                        title: 'Stok Habis',
                        text: 'Stok tidak mencukupi.',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const uniqueKey = `${kode}__${Date.now()}`;
                if (!maaSelectedOpsionalByRow[rowIdx]) maaSelectedOpsionalByRow[rowIdx] = new Set();
                maaSelectedOpsionalByRow[rowIdx].add(uniqueKey);

                maaAppendOpsionalCard(rowIdx, uniqueKey, nama, value, true);

                $(`.maa-btn-open-modal-opsional-asset[data-row-idx="${rowIdx}"]`)
                    .prop('disabled', true).addClass('disabled')
                    .css({
                        opacity: 0.5,
                        pointerEvents: 'none'
                    });

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

            function maaBuildOpsionalBarangPendukungRow(opsIdx, barangPendukungIdx, isFirst) {
                const delBtn = isFirst ?
                    `<div style="width:32px;"></div>` :
                    `<button type="button"
                        class="btn btn-sm btn-outline-danger mb-0 maa-btn-remove-barang-pendukung-opsional flex-shrink-0"
                        style="height:32px;width:32px;padding:0;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-times"></i></button>`;
                return `
                    <div class="maa-barang-pendukung-row-opsional d-flex align-items-start gap-2 mb-2">
                        <div class="text-muted small mt-2 pt-1" style="min-width:20px;text-align:right;">${barangPendukungIdx + 1}.</div>
                        ${delBtn}
                        <input type="hidden" name="opsional[${opsIdx}][barang_pendukung][${barangPendukungIdx}][kondisi_barang_pendukung]" value="baik">
                        <input type="text" class="form-control form-control-sm"
                            name="opsional[${opsIdx}][barang_pendukung][${barangPendukungIdx}][nama_barang_pendukung]"
                            placeholder="Nama Barang Pendukung, cth: Layar, Keyboard..." style="min-width:160px;">
                        <input type="text" class="form-control form-control-sm"
                            name="opsional[${opsIdx}][barang_pendukung][${barangPendukungIdx}][catatan]"
                            placeholder="Catatan (opsional)..." style="min-width:200px;">
                    </div>`;
            }

            $(document).on('click', '.maa-btn-add-barang-pendukung-opsional', function() {
                const opsIdx = $(this).data('opsional-idx');
                const list = $(`#maa-barang-pendukung-list-opsional-${opsIdx}`);
                list.append(maaBuildOpsionalBarangPendukungRow(opsIdx, list.find(
                    '.maa-barang-pendukung-row-opsional').length, false));
            });

            $(document).on('click', '.maa-btn-remove-barang-pendukung-opsional', function() {
                const list = $(this).closest('[id^="maa-barang-pendukung-list-opsional-"]');
                $(this).closest('.maa-barang-pendukung-row-opsional').remove();
                list.find('.maa-barang-pendukung-row-opsional').each(function(i) {
                    $(this).find('input').each(function() {
                        $(this).attr('name', ($(this).attr('name') || '').replace(
                            /\[barang_pendukung\]\[\d+\]/,
                            `[barang_pendukung][${i}]`));
                    });
                });
            });


            function maaAppendOpsionalCard(rowIdx, kode, nama, value, isManual) {
                const cardId = `maa-opsional-card-${rowIdx}-${Date.now()}`;
                const $row = $(`tr[data-opsional-index="${rowIdx}"]`);
                const tglPinjam = $row.data('tanggal-pinjam') ?? '';
                const tglKembali = $row.data('tanggal-kembali') ?? '';

                const minAmbil = tglPinjam ? tglPinjam + 'T00:00' : getNowLocalDatetimeValue();
                const maxAmbil = tglKembali ? tglKembali + 'T23:59' : '';

                const cardHtml = `
                <div class="selected-barang-card border rounded p-2 mb-2"
                    id="${cardId}" data-kode="${kode}"
                    data-tgl-pinjam="${tglPinjam}" data-tgl-kembali="${tglKembali}"
                    style="background:#fff; border-color:#c3e6e7 !important;">

                    <input type="hidden" name="opsional[${rowIdx}][kode_asset]" value="${isManual ? '' : kode}">
                    <input type="hidden" name="opsional[${rowIdx}][value]"      value="${value}">

                    <div class="d-flex align-items-center gap-2 mb-1">
                        <button type="button"
                            class="btn btn-sm btn-outline-danger mb-0 maa-btn-remove-opsional-card flex-shrink-0"
                            style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                            data-kode="${kode}" data-row-idx="${rowIdx}" data-card-id="${cardId}" title="Hapus">
                            <i class="fas fa-times" style="font-size:.7rem;"></i>
                        </button>

                        <strong style="font-size:.85rem;">${nama}</strong>

                        ${isManual
                            ? `<span class="badge bg-warning text-dark">Manual</span>`
                            : `<code class="text-muted" style="font-size:.78rem;">${kode}</code>`}
                        <span class="text-muted small">(${value})</span>

                        <div class="ms-auto d-inline-flex align-items-center gap-1 px-2 py-1 rounded"
                            style="background:linear-gradient(135deg,#e0fdf4,#cffafe); border:1.5px solid #0a8f97;">
                            <i class="fas fa-calendar-check" style="color:#0a8f97; font-size:.8rem;"></i>
                            <label style="font-size:.75rem; font-weight:700; color:#065f46; margin:0; white-space:nowrap;">
                                Tgl Ambil <span style="color:#dc2626;">*</span>
                            </label>
                            <input type="datetime-local"
                                class="form-control form-control-sm maa-tgl-ambil-opsional"
                                name="opsional[${rowIdx}][tanggal_ambil_asset]"
                                style="width:175px; font-size:.78rem; border-color:#0a8f97; background:#f0fffe;"
                                min="${minAmbil}" ${maxAmbil ? `max="${maxAmbil}"` : ''}
                                value="${maaOpsionalTanggalAmbil}"
                                required>
                        </div>
                    </div>

                    <div class="mt-2 pt-2" style="border-top:1px dashed #cce; padding-left:4px;">
                        <div class="text-muted small fw-semibold mb-1">
                            <i class="fas fa-clipboard-list me-1" style="color:#0a8f97;"></i>
                            Barang Pendukung: <span class="text-dark">${nama}</span>
                            ${!isManual ? `<code class="text-muted ms-1" style="font-size:.78rem;">${kode}</code>` : ''}
                        </div>
                        <div id="maa-barang-pendukung-list-opsional-${rowIdx}">
                            ${maaBuildOpsionalBarangPendukungRow(rowIdx, 0, true)}
                        </div>
                        <button type="button"
                            class="btn btn-outline-primary btn-xs mb-0 mt-1 maa-btn-add-barang-pendukung-opsional"
                            style="font-size:.75rem; padding:2px 10px;"
                            data-opsional-idx="${rowIdx}">
                            <i class="fas fa-plus me-1"></i> Tambah Barang Pendukung
                        </button>
                    </div>
                </div>`;

                $(`#maa-selected-opsional-list-${rowIdx}`).append(cardHtml);
                setTimeout(applyBackdateMinToAdminApproveModal, 100);
            }


            $(document).on('click', '.maa-btn-remove-opsional-card', function() {
                const kode = $(this).data('kode');
                const rowIdx = $(this).data('row-idx');
                const cardId = $(this).data('card-id');
                if (maaSelectedOpsionalByRow[rowIdx]) maaSelectedOpsionalByRow[rowIdx].delete(kode);
                $(`#${cardId}`).remove();
                $(`.maa-btn-open-modal-opsional-asset[data-row-idx="${rowIdx}"]`)
                    .prop('disabled', false).removeClass('disabled')
                    .css({
                        opacity: '',
                        pointerEvents: ''
                    });
            });


            $(document).on('click', '.maa-btn-remove-opsional-row', function() {
                const rowIdx = $(this).data('row-idx');
                delete maaSelectedOpsionalByRow[rowIdx];
                $(`tr[data-opsional-index="${rowIdx}"]`).remove();
                $(`tr[data-for-opsional="${rowIdx}"]`).remove();
                if ($('#maa-opsional-items-body tr[data-opsional-index]').length === 0) {
                    $('#maa-opsional-empty-row').show();
                }
            });

            $(document).on('click', '.maa-btn-open-modal-opsional-asset', function() {
                const rowIdx = $(this).data('row-idx');
                const namaLower = $(this).data('nama-barang');
                const $row = $(`tr[data-opsional-index="${rowIdx}"]`);
                const tglPinjam = $row.data('tanggal-pinjam');
                const tglKembali = $row.data('tanggal-kembali');
                maaOpenOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali);
            });

            function maaOpenOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali) {
                maaActiveOpsionalRowIdx    = rowIdx;
                maaOpsionalTanggalPinjam   = tglPinjam;
                maaOpsionalTanggalKembali  = tglKembali;

                const relevantKodes = maaAllStok
                    .filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === namaLower &&
                        b.kode_asset !== null && parseInt(b.isactive) === 1
                    ).map(b => b.kode_asset);

                const relevantNamaManual = maaAllStok
                    .filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === namaLower &&
                        b.kode_asset === null && parseInt(b.isactive) === 1
                    ).map(b => (b.nama_barang ?? '').toLowerCase())
                    .filter((v, i, a) => a.indexOf(v) === i);

                maaBookingKonflik = [];

                if ($.fn.DataTable.isDataTable('#maaBarangOpsionalTable')) {
                    $('#maaBarangOpsionalTable').DataTable().clear().destroy();
                }
                $('#maaBarangOpsionalTableBody').html(`
                    <tr><td colspan="4" class="text-center text-muted py-3">
                        <i class="fas fa-spinner fa-spin me-1"></i> Mengecek ketersediaan...
                    </td></tr>`);

                $('#maaBarangOpsionalModal').css('z-index', 1060);
                setTimeout(() => {
                    $('.modal-backdrop').last().css('z-index', 1055);
                }, 10);
                new bootstrap.Modal(document.getElementById('maaBarangOpsionalModal')).show();

                if (relevantKodes.length === 0 && relevantNamaManual.length === 0) {
                    renderMaaBarangOpsionalTableFiltered(namaLower);
                    return;
                }

                $.ajax({
                    url: '{{ url($url_menu . '/booking-konflik') }}',
                    method: 'GET',
                    data: {
                        kode_assets     : relevantKodes,
                        nama_barangs    : relevantNamaManual,
                        tanggal_pinjam  : tglPinjam,
                        tanggal_kembali : tglKembali,
                    },
                    success: res => {
                        maaBookingKonflik = res;
                        renderMaaBarangOpsionalTableFiltered(namaLower);
                    },
                    error: () => {
                        maaBookingKonflik = [];
                        renderMaaBarangOpsionalTableFiltered(namaLower);
                    }
                });
            }


            let maaActivePenerimaOpsIdx = null;
            let maaPenerimaModalInstance = null;
            let maaPenerimaCache = null;

            $(document).on('click', '[data-action="maa-open-penerima-opsional"]', function() {
                maaActivePenerimaOpsIdx = $(this).data('row-idx');
                if (!maaPenerimaModalInstance) {
                    maaPenerimaModalInstance = new bootstrap.Modal(document.getElementById(
                        'maaListPenerimaModal'));
                }
                maaPenerimaCache = null;
                document.getElementById('maaSearchPenerima').value = '';
                maaLoadPenerima('');
                $('#maaListPenerimaModal').css('z-index', 1070);
                setTimeout(() => {
                    $('.modal-backdrop').last().css('z-index', 1065);
                }, 10);
                maaPenerimaModalInstance.show();
            });

            document.getElementById('maaSearchPenerima').addEventListener('input', function() {
                maaLoadPenerima(this.value);
            });

            function maaLoadPenerima(q) {
                const lower = (q || '').toLowerCase().trim();

                if (maaPenerimaCache !== null) {
                    maaRenderPenerima(maaPenerimaCache, lower);
                    return;
                }

                document.getElementById('maaPenerimaList').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>';

                $.ajax({
                    url: '{{ url($url_menu) }}/get-penerima',
                    data: {
                        departemen_id: maaCurrentDeptId
                    },
                    success: function(data) {
                        maaPenerimaCache = data;
                        maaRenderPenerima(data, lower);
                    },
                    error: function() {
                        document.getElementById('maaPenerimaList').innerHTML =
                            '<tr><td colspan="3" class="text-center text-danger py-3">Gagal memuat data</td></tr>';
                    }
                });
            }

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

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

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

            $(document).on('click', '.maa-btn-pilih-penerima', function() {
                if (maaActivePenerimaOpsIdx === null) return;
                const nik = $(this).closest('tr').data('nik');
                const nama = $(this).closest('tr').data('nama');
                $(`#maa-opsional-penerima-display-${maaActivePenerimaOpsIdx}`).val(nama);
                $(`#maa-opsional-penerima-hidden-${maaActivePenerimaOpsIdx}`).val(nik);
                maaPenerimaModalInstance?.hide();
                maaActivePenerimaOpsIdx = null;
            });


            $(document).on('click', '.btn-approve-item', function() {
                const idx = $(this).data('index');
                const row = $(`#maa-items-body tr[data-item-index="${idx}"]`);
                const stok = parseInt(row.find('.maa-stock-display').val()) || 0;
                if (stok === 0) return;
                row.find('.item-status').val('approved');
                $(this).addClass('active btn-success').removeClass('btn-secondary');
                row.find('.btn-reject-item').removeClass('active btn-danger').addClass('btn-secondary');
                maaUpdatePilihBarangButton(idx);
                checkAllRejectedAdmin();
            });

            $(document).on('click', '.btn-reject-item', function() {
                const idx = $(this).data('index');
                const row = $(`#maa-items-body tr[data-item-index="${idx}"]`);
                const stok = parseInt(row.find('.maa-stock-display').val()) || 0;
                if (stok === 0) return;
                row.find('.item-status').val('rejected');
                $(this).addClass('active btn-danger').removeClass('btn-secondary');
                row.find('.btn-approve-item').removeClass('active btn-success').addClass('btn-secondary');
                row.find('.qty-disetujui').val(0).prop('readonly', true);
                if (maaSelectedByItem[idx]) maaSelectedByItem[idx].clear();
                $(`#maa-selected-barang-list-${idx}`).empty();
                $(`.maa-btn-open-modal-barang[data-index="${idx}"]`)
                    .prop('disabled', true).addClass('disabled')
                    .css({
                        opacity: 0.5,
                        pointerEvents: 'none'
                    });
                maaUpdatePilihBarangButton(idx);
                checkAllRejectedAdmin();
            });

            function checkAllRejectedAdmin() {
                let allRejected = true,
                    hasItems = false;
                $('#maa-items-body tr[data-item-index]').each(function() {
                    hasItems = true;
                    if ($(this).find('.item-status').val() === 'approved') {
                        allRejected = false;
                        return false;
                    }
                });
                if (hasItems && allRejected) {
                    $('#maa-tanggal-ambil').removeAttr('required');
                    $('#maa-label-required').hide();
                    $('#maa-tanggal-note').text('Tidak wajib diisi karena semua item ditolak');
                } else {
                    $('#maa-tanggal-ambil').attr('required', 'required');
                    $('#maa-label-required').show();
                    $('#maa-tanggal-note').text('Tentukan tanggal dan waktu pengambilan barang');
                }
            }


            window.submitAdminApprove = function() {
                let adaApprove = false,
                    adaReject = false,
                    adaItemTidakDiset = false;
                const errorMsg = [];

                $('#maa-items-body tr[data-item-index]').each(function() {
                    const s = $(this).find('.item-status').val();
                    if (s === 'approved') adaApprove = true;
                    if (s === 'rejected') adaReject = true;
                    if (!s || (s !== 'approved' && s !== 'rejected')) adaItemTidakDiset = true;
                });

                if (adaItemTidakDiset)
                    errorMsg.push(
                        'Ada item yang belum di-<strong>APPROVE</strong> atau di-<strong>REJECT</strong>.');
                if (adaReject && !$('#maa-catatan').val().trim())
                    errorMsg.push('<strong>Catatan Admin</strong> wajib diisi karena ada item yang di-reject.');

                $('#maa-items-body tr[data-item-index]').each(function() {
                    const idx = $(this).data('item-index');
                    const status = $(this).find('.item-status').val();
                    if (status !== 'approved') return;

                    const namaBarang = $(this).find('input[type="text"]').eq(0).val() ||
                        `Item #${idx + 1}`;

                    const jumlahDipilih = maaSelectedByItem[idx] ? maaSelectedByItem[idx].size : 0;
                    if (jumlahDipilih === 0) {
                        errorMsg.push(
                            `<strong>${namaBarang}</strong>: Barang belum dipilih (kode asset kosong).`
                        );
                        return;
                    }

                    const $tglAmbil = $(`#maa-selected-barang-list-${idx}`).find(
                        'input.tgl-ambil-barang');
                    if ($tglAmbil.length === 0 || !$tglAmbil.val()) {
                        errorMsg.push(`<strong>${namaBarang}</strong>: Tanggal Ambil wajib diisi.`);
                    }
                });

                let opsionalErrors = [];
                $('#maa-opsional-items-body tr[data-opsional-index]').each(function() {
                    const rowIdx = $(this).data('opsional-index');
                    const namaAsli = $(this).data('nama-barang-asli') || `Row #${rowIdx + 1}`;

                    const penerima = $(`#maa-opsional-penerima-hidden-${rowIdx}`).val()?.trim();
                    const keterangan = $(this).find(`input[name="opsional[${rowIdx}][keterangan]"]`)
                        .val()?.trim();
                    const sudahPilih = maaSelectedOpsionalByRow[rowIdx] && maaSelectedOpsionalByRow[
                        rowIdx].size > 0;

                    const $tglAmbilOps = $(`#maa-selected-opsional-list-${rowIdx}`)
                        .find('input.maa-tgl-ambil-opsional');
                    const tglAmbilKosong = $tglAmbilOps.length === 0 ||
                        $tglAmbilOps.toArray().some(el => !$(el).val());

                    if (!penerima) opsionalErrors.push(
                        `<strong>${namaAsli}</strong>: Penerima wajib diisi.`);
                    if (!keterangan) opsionalErrors.push(
                        `<strong>${namaAsli}</strong>: Keterangan wajib diisi.`);
                    if (!sudahPilih) opsionalErrors.push(
                        `<strong>${namaAsli}</strong>: Barang belum dipilih (kode asset kosong).`);
                    if (tglAmbilKosong) opsionalErrors.push(
                        `<strong>${namaAsli}</strong>: Tanggal Ambil wajib diisi.`);
                });

                if (opsionalErrors.length) errorMsg.push(...opsionalErrors);

                if (errorMsg.length) {
                    Swal.fire({
                        title: 'Validasi Gagal',
                        html: '<ul style="text-align:left; padding-left:1.2em; margin:0;">' + errorMsg
                            .map(m => `<li class="mb-1">${m}</li>`).join('') + '</ul>',
                        icon: 'warning',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'Mengerti',
                        timer: 6000,
                        timerProgressBar: true,
                        showCloseButton: true,
                    });
                    return;
                }

                const confirmText = (!adaApprove && adaReject) ?
                    'Semua item ditolak. Status akan langsung menjadi COMPLETED.' :
                    'Approve peminjaman ini? Status akan berubah menjadi ON PROGRESS.';

                Swal.fire({
                    title: 'Konfirmasi Approve',
                    text: confirmText,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Approve',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#19a974',
                    cancelButtonColor: '#6c757d'
                }).then(r => {
                    if (r.isConfirmed) document.getElementById('form-admin-approve').submit();
                });
            };

            $('#maa-btn-confirm-tanggal-opsional').on('click', function() {
                const tglPinjam = $('#maa-opsional-input-tanggal-pinjam').val();
                const tglAmbil = $('#maa-opsional-input-tanggal-ambil').val();
                const tglKembali = $('#maa-opsional-input-tanggal-kembali').val();

                if (!tglPinjam || !tglAmbil || !tglKembali) {
                    Swal.fire({
                        title: 'Lengkapi Tanggal',
                        text: 'Semua tanggal wajib diisi.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
                if (new Date(tglKembali) < new Date(tglPinjam)) {
                    Swal.fire({
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal kembali tidak boleh sebelum tanggal pinjam.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
                if (new Date(tglAmbil) > new Date(tglKembali + 'T23:59')) {
                    Swal.fire({
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal ambil tidak boleh melebihi tanggal kembali.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                maaOpsionalTanggalPinjam = tglPinjam;
                maaOpsionalTanggalAmbil = tglAmbil;
                maaOpsionalTanggalKembali = tglKembali;

                const namaAsli = maaPendingOpsionalNama;
                const namaLower = namaAsli.toLowerCase();
                const stokNormal = (maaStokTracker[namaLower] ?? 0);
                const stokManual = (maaStokManualTracker[namaLower] ?? 0);
                const stokAwal = maaStokDisplay
                    .filter(b =>
                        parseInt(b.isactive) === 1 &&
                        (b.nama_barang ?? '').toLowerCase() === namaLower
                    )
                    .reduce((sum, b) => {
                        if (b.kode_asset !== null) return sum + 1;
                        return sum + (parseInt(b.qty) || 0);
                    }, 0);

                const rowIdx = maaOpsionalRowCount++;
                maaActiveOpsionalRowIdx = rowIdx;
                maaSelectedOpsionalByRow[rowIdx] = new Set();

                $('#maa-opsional-empty-row').hide();

                const rowHtml = `
                <tr data-opsional-index="${rowIdx}"
                    data-nama-barang="${namaLower}"
                    data-nama-barang-asli="${namaAsli}"
                    data-tanggal-pinjam="${tglPinjam}"
                    data-tanggal-kembali="${tglKembali}">

                    <td style="text-align:center;">
                        <input type="hidden" name="opsional[${rowIdx}][nama_barang]"     value="${namaAsli}">
                        <input type="hidden" name="opsional[${rowIdx}][tanggal_pinjam]"  value="${tglPinjam}">
                        <input type="hidden" name="opsional[${rowIdx}][tanggal_ambil]"   value="${tglAmbil}">
                        <input type="hidden" name="opsional[${rowIdx}][tanggal_kembali]" value="${tglKembali}">
                        <button type="button" class="btn btn-danger btn-sm mb-0 maa-btn-remove-opsional-row"
                            data-row-idx="${rowIdx}" title="Hapus">
                            <i class="fas fa-times"></i>
                        </button>
                    </td>

                    <td><input type="text" class="form-control" value="${namaAsli}" readonly></td>

                    <td>
                        <input type="hidden" name="opsional[${rowIdx}][penerima]"
                            class="maa-opsional-penerima-hidden" id="maa-opsional-penerima-hidden-${rowIdx}" value="${maaCurrentPengajuNik}">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control maa-opsional-penerima-display"
                                id="maa-opsional-penerima-display-${rowIdx}"
                                placeholder="Pilih penerima..." readonly required
                                value="${maaCurrentPengajuNama}">
                            <span class="input-group-text bg-primary text-light"
                                style="cursor:pointer;"
                                data-action="maa-open-penerima-opsional"
                                data-row-idx="${rowIdx}">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </td>

                    <td>
                        <input type="text" class="form-control form-control-sm"
                            name="opsional[${rowIdx}][keterangan]" placeholder="Keterangan..." required>
                    </td>

                    <td class="text-center">
                        <input type="hidden" name="opsional[${rowIdx}][qty_diminta]" value="1">
                        <input type="text" class="form-control" value="1" readonly>
                    </td>

                    <td class="text-center">
                        <input type="number" class="form-control mx-auto" style="width:50px;" value="${stokAwal}" readonly>
                    </td>

                    <td>
                        <input type="date"
                            class="form-control maa-opsional-tgl-pinjam-edit"
                            id="maa-opsional-tgl-pinjam-${rowIdx}"
                            value="${tglPinjam}"
                            data-row-idx="${rowIdx}">
                    </td>
                    <td>
                        <input type="date"
                            class="form-control maa-opsional-tgl-kembali-edit"
                            id="maa-opsional-tgl-kembali-${rowIdx}"
                            value="${tglKembali}"
                            min="${tglPinjam}"
                            data-row-idx="${rowIdx}">
                    </td>
                </tr>

                <tr class="maa-row-pilih-opsional" data-for-opsional="${rowIdx}">
                    <td colspan="8" class="p-0">
                        <div class="px-3 py-2" style="background:#f0fffe; border-top:2px dashed #0a8f97;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <button type="button"
                                    class="btn btn-sm mb-0 maa-btn-open-modal-opsional-asset"
                                    style="border:1.5px solid #0a8f97; color:#0a8f97; background:#fff;"
                                    data-row-idx="${rowIdx}"
                                    data-nama-barang="${namaLower}">
                                    <i class="fas fa-box me-1"></i> Pilih Barang
                                </button>
                                <span class="text-muted small fw-semibold" style="letter-spacing:.04em;">
                                    Barang dipilih untuk:
                                    <span class="fw-bold text-dark">${namaAsli}</span>
                                    <span class="text-muted ms-1">(${maaToDisplayDate(tglPinjam)} → ${maaToDisplayDate(tglKembali)})</span>
                                </span>
                            </div>
                            <div class="maa-selected-opsional-list" id="maa-selected-opsional-list-${rowIdx}"></div>
                        </div>
                    </td>
                </tr>`;

                $('#maa-opsional-items-body').append(rowHtml);

                const tanggalModalEl = document.getElementById('maaTanggalOpsionalModal');
                bootstrap.Modal.getInstance(tanggalModalEl).hide();
                tanggalModalEl.addEventListener('hidden.bs.modal', function openAsset() {
                    tanggalModalEl.removeEventListener('hidden.bs.modal', openAsset);
                    maaOpenOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali);
                });
            });
            $(document).on('change', '.maa-opsional-tgl-pinjam-edit', function() {
                const rowIdx = $(this).data('row-idx');
                const val = $(this).val();
                $(`tr[data-opsional-index="${rowIdx}"] input[name="opsional[${rowIdx}][tanggal_pinjam]"]`).val(val);
                $(`tr[data-opsional-index="${rowIdx}"]`).data('tanggal-pinjam', val).attr('data-tanggal-pinjam', val);
                $(`#maa-opsional-tgl-kembali-${rowIdx}`).attr('min', val);
                const $tglAmbil = $(`#maa-selected-opsional-list-${rowIdx} .maa-tgl-ambil-opsional`);
                if ($tglAmbil.length) $tglAmbil.attr('min', val ? val + 'T00:00' : '');
            });

            $(document).on('change', '.maa-opsional-tgl-kembali-edit', function() {
                const rowIdx = $(this).data('row-idx');
                const val = $(this).val();
                $(`tr[data-opsional-index="${rowIdx}"] input[name="opsional[${rowIdx}][tanggal_kembali]"]`).val(val);
                $(`tr[data-opsional-index="${rowIdx}"]`).data('tanggal-kembali', val).attr('data-tanggal-kembali', val);
                const $tglAmbil = $(`#maa-selected-opsional-list-${rowIdx} .maa-tgl-ambil-opsional`);
                if ($tglAmbil.length) $tglAmbil.attr('max', val ? val + 'T23:59' : '');
            });

            function maaToDisplayDate(str) {
                if (!str) return '-';
                if (/^\d{2}\/\d{2}\/\d{4}$/.test(str)) return str;
                const parts = str.split('-');
                if (parts.length === 3) return `${parts[2]}/${parts[1]}/${parts[0]}`;
                return str;
            }

            $('#maa-opsional-input-tanggal-pinjam').on('change', function() {
                const val = $(this).val();
                if (!val) return;
                $('#maa-opsional-input-tanggal-ambil').attr('min', val + 'T00:00');
                $('#maa-opsional-input-tanggal-kembali').attr('min', val);
                const curAmbil = $('#maa-opsional-input-tanggal-ambil').val();
                const curKembali = $('#maa-opsional-input-tanggal-kembali').val();
                if (curAmbil && curAmbil < val + 'T00:00') $('#maa-opsional-input-tanggal-ambil').val('');
                if (curKembali && curKembali < val) $('#maa-opsional-input-tanggal-kembali').val('');
            });

            $('#maa-opsional-input-tanggal-kembali').on('change', function() {
                const val = $(this).val();
                if (!val) return;
                $('#maa-opsional-input-tanggal-ambil').attr('max', val + 'T23:59');
                const curAmbil = $('#maa-opsional-input-tanggal-ambil').val();
                if (curAmbil && curAmbil > val + 'T23:59') $('#maa-opsional-input-tanggal-ambil').val('');
            });


            $(document).on('click', '.maa-btn-select-barang-item-manual', function() {
                const kode = $(this).data('kode');
                const nama = $(this).data('nama');
                const value = $(this).data('value') ?? '';
                const sisaStok = parseInt($(this).data('sisa-stok')) || 0;
                const idx = maaActiveItemIndex;
                const qtyDiminta = maaGetQtyDiminta(idx);

                if (sisaStok <= 0) {
                    Swal.fire({
                        title: 'Stok Habis',
                        text: 'Stok barang ini sudah tidak mencukupi.',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                maaPendingManualBarang = {
                    kode,
                    nama,
                    value,
                    idx,
                    sisaStok,
                    qtyDiminta
                };
                const maxQty = Math.min(sisaStok, qtyDiminta);
                $('#qty-manual-modal-title').text(`Input Qty — ${nama}`);
                $('#qty-manual-input').val(1).attr('max', maxQty).attr('min', 1);
                $('#qty-manual-hint').html(
                    `Stok tersedia: <strong>${sisaStok}</strong> | Qty diminta: <strong>${qtyDiminta}</strong> | Maks input: <strong>${maxQty}</strong>`
                );

                const maaBarangItemModalEl = document.getElementById('maaBarangItemModal');
                maaBarangItemModalEl._pendingQtyOpen && maaBarangItemModalEl.removeEventListener(
                    'hidden.bs.modal', maaBarangItemModalEl._pendingQtyOpen);
                maaBarangItemModalEl._pendingQtyOpen = function() {
                    maaBarangItemModalEl._pendingQtyOpen = null;
                    new bootstrap.Modal(document.getElementById('qtyManualModal')).show();
                };
                maaBarangItemModalEl.addEventListener('hidden.bs.modal', maaBarangItemModalEl
                    ._pendingQtyOpen, {
                        once: true
                    });
                bootstrap.Modal.getInstance(maaBarangItemModalEl)?.hide();
            });

            $('#btn-confirm-qty-manual').on('click', function() {
                if (!maaPendingManualBarang) return;
                const {
                    kode,
                    nama,
                    value,
                    idx,
                    sisaStok,
                    qtyDiminta
                } = maaPendingManualBarang;
                let qty = parseInt($('#qty-manual-input').val()) || 1;
                const maxQty = Math.min(sisaStok, qtyDiminta);

                if (qty < 1 || qty > maxQty) {
                    Swal.fire({
                        title: 'Qty tidak valid',
                        text: `Qty harus antara 1 dan ${maxQty}.`,
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                bootstrap.Modal.getInstance(document.getElementById('qtyManualModal'))?.hide();

                if (!maaSelectedByItem[idx]) maaSelectedByItem[idx] = new Set();

                const now = Date.now();
                const existingCount = maaSelectedByItem[idx].size;
                const sudahAdaTglAmbil = $(`#maa-selected-barang-list-${idx} .tgl-ambil-barang`).length > 0;

                for (let q = 0; q < qty; q++) {
                    const uniqueKey = `${kode}__${q}_${now}`;
                    maaSelectedByItem[idx].add(uniqueKey);
                    const barangIdx = existingCount + q;
                    const isFirstOfItem = (existingCount === 0 && q === 0) && !sudahAdaTglAmbil;

                    $(`#maa-selected-barang-list-${idx}`).append(`
                        <div class="selected-barang-card border rounded p-2 mb-2"
                            id="maa-selected-card-${idx}-${now}-${q}"
                            data-kode="${uniqueKey}"
                            style="background:#fff; border-color:#c3e6e7 !important;">
                            <input type="hidden" name="items[${idx}][barang][${barangIdx}][kode_asset]" value="">
                            <input type="hidden" name="items[${idx}][barang][${barangIdx}][nama_barang]" value="${nama}">
                            <input type="hidden" name="items[${idx}][barang][${barangIdx}][value]" value="${value}">
                            <input type="hidden" name="items[${idx}][barang][${barangIdx}][qty_disetujui]" value="1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <button type="button"
                                    class="btn btn-sm btn-outline-danger mb-0 maa-btn-remove-selected-barang flex-shrink-0"
                                    style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                                    data-kode="${uniqueKey}" data-item-idx="${idx}"
                                    data-card-id="maa-selected-card-${idx}-${now}-${q}" title="Hapus">
                                    <i class="fas fa-times" style="font-size:.7rem;"></i>
                                </button>
                                <span class="badge" style="background:#0a8f97;">${barangIdx + 1}</span>
                                <strong style="font-size:.85rem;">${nama}</strong>
                                <span class="badge bg-warning text-dark">Manual ${q + 1}/${qty}</span>
                                ${isFirstOfItem ? `
                                            <div class="ms-auto d-inline-flex align-items-center gap-1 px-2 py-1 rounded"
                                                style="background:linear-gradient(135deg,#e0fdf4,#cffafe); border:1.5px solid #0a8f97;">
                                                <i class="fas fa-calendar-check" style="color:#0a8f97; font-size:.8rem;"></i>
                                                <label style="font-size:.75rem; font-weight:700; color:#065f46; margin:0; white-space:nowrap;">
                                                    Tgl Ambil <span style="color:#dc2626;">*</span>
                                                </label>
                                                <input type="datetime-local"
                                                    class="form-control form-control-sm tgl-ambil-barang"
                                                    name="items[${idx}][barang][0][tanggal_ambil]"
                                                    style="width:175px; font-size:.78rem; border-color:#0a8f97; background:#f0fffe;"
                                                    required>
                                            </div>` : ''}
                            </div>
                            ${maaRenderBarangPendukungForBarang(idx, barangIdx, `MANUAL-${nama}-${q}`, nama)}
                        </div>`);
                }

                $(`#maa-items-body tr[data-item-index="${idx}"] .qty-disetujui`).val(maaSelectedByItem[idx]
                    .size);
                maaUpdatePilihBarangButton(idx);
                maaUpdateKodeAssetDisplay(idx);
                maaPendingManualBarang = null;
                setTimeout(applyBackdateMinToAdminApproveModal, 100);
            });


            $('#qtyManualModal').on('hidden.bs.modal', function() {
                if ($('#modalAdminApprove').hasClass('show')) {
                    $('body').addClass('modal-open');
                    if (!$('.modal-backdrop').length) $('<div class="modal-backdrop fade show"></div>')
                        .appendTo('body');
                }
            });
            $('#maaTanggalOpsionalModal').on('hidden.bs.modal', function() {
                if ($('#modalAdminApprove').hasClass('show')) {
                    $('body').addClass('modal-open');
                    if (!$('.modal-backdrop').length) $('<div class="modal-backdrop fade show"></div>')
                        .appendTo('body');
                }
            });


            $('#modalAdminApprove').on('shown.bs.modal', function() {
                applyBackdateMinToAdminApproveModal();
            });

            const backdate_observer = new MutationObserver(function() {
                applyBackdateMinToAdminApproveModal();
            });
            backdate_observer.observe(document.getElementById('maa-items-body') || document.body, {
                childList: true,
                subtree: true
            });

            function applyBackdateMinToAdminApproveModal() {
                $('#modalAdminApprove .maa-selected-barang-list').each(function() {
                    const $list = $(this);
                    const listId = $list.attr('id');
                    const idx = listId?.replace('maa-selected-barang-list-', '');
                    if (idx === undefined) return;

                    const $itemRow = $(`#maa-items-body tr[data-item-index="${idx}"]`);
                    const tglPinjam  = $itemRow.find('input.maa-tgl-pinjam').val()  ?? '';
                    const tglKembali = $itemRow.find('input.maa-tgl-kembali').val() ?? '';

                    const minVal = tglPinjam ? maaToDatetimeLocalVal(tglPinjam, '00:00') :
                        getNowLocalDatetimeValue();
                    const maxVal = tglKembali ? maaToDatetimeLocalVal(tglKembali, '23:59') : '';

                    $list.find('input.tgl-ambil-barang').each(function() {
                        if (!$(this).attr('readonly')) {
                            $(this).attr('min', minVal);
                            if (maxVal) $(this).attr('max', maxVal);
                        }
                    });
                });

                $('#maa-card-barang-opsional .selected-barang-card').each(function() {
                    const tglPinjam = $(this).data('tgl-pinjam') ?? '';
                    const tglKembali = $(this).data('tgl-kembali') ?? '';
                    const minVal = tglPinjam ? tglPinjam + 'T00:00' : getNowLocalDatetimeValue();
                    const maxVal = tglKembali ? tglKembali + 'T23:59' : '';

                    $(this).find('input.maa-tgl-ambil-opsional').each(function() {
                        if (!$(this).attr('readonly')) {
                            $(this).attr('min', minVal);
                            if (maxVal) $(this).attr('max', maxVal);
                        }
                    });
                });
            }

            $(document).on('click', '.maa-btn-select-barang-opsional, .maa-btn-select-barang-item', function() {
                setTimeout(applyBackdateMinToAdminApproveModal, 100);
            });


            let mbaCurrentEncId = null;

            window.openModalBorrowedAsset = function(data) {
                mbaCurrentEncId = data.encId;
                $('#mba-subtitle').text('ID: ' + data.nomor + ' | ' + data.departemen);
                $('#mba-loading').removeClass('d-none');
                $('#mba-error').addClass('d-none');
                $('#mba-content').addClass('d-none');
                $('#mba-asset-list').empty();

                new bootstrap.Modal(document.getElementById('modalBorrowedAsset')).show();

                $.ajax({
                    url: '{{ url($url_menu) }}/get-borrowed-asset-list/' + data.encId,
                    method: 'GET',
                    success: function(res) {
                        if (!res.success) {
                            $('#mba-loading').addClass('d-none');
                            $('#mba-error').removeClass('d-none').text(res.message ||
                                'Gagal memuat data.');
                            return;
                        }
                        renderMbaAssetList(res.data);
                        $('#mba-loading').addClass('d-none');
                        $('#mba-content').removeClass('d-none');
                    },
                    error: function() {
                        $('#mba-loading').addClass('d-none');
                        $('#mba-error').removeClass('d-none').text(
                            'Terjadi kesalahan saat memuat data.');
                    }
                });
            };

            function renderMbaAssetList(assets) {
                const $list = $('#mba-asset-list').empty();

                if (!assets || !assets.length) {
                    $list.html(
                        '<div class="text-muted text-center py-3 fst-italic">Tidak ada asset ditemukan.</div>');
                    return;
                }

                assets.forEach(function(asset) {
                    const isBorrowed = asset.status_asset === 'borrowed';
                    const opsionalLabel = asset.is_opsional == '1' ?
                        '<span class="badge bg-secondary ms-1" style="font-size:.68rem;">Opsional</span>' :
                        '';

                    let bpHtml = '';
                    if (asset.barang_pendukung && asset.barang_pendukung.length) {
                        bpHtml =
                            '<ul class="mb-0 mt-1" style="font-size:.8rem; color:#6b7280; padding-left:1.4rem;">';
                        asset.barang_pendukung.forEach(function(bp) {
                            bpHtml +=
                                `<li><i class="fas fa-paperclip me-1" style="font-size:.7rem;"></i>${bp.nama} <span class="text-muted">(${(bp.kondisi || '-').replace(/_/g,' ')})</span></li>`;
                        });
                        bpHtml += '</ul>';
                    }

                    const tglAmbilInfo = asset.tanggal_ambil ?
                        `<span class="badge ms-2" style="background:#e0f2fe; color:#0369a1; font-size:.7rem; font-weight:500;"><i class="fas fa-calendar me-1"></i>Tgl Ambil: ${asset.tanggal_ambil}</span>` :
                        '';

                    const cardBg = isBorrowed ? '#f0fdf4' : '#fff';
                    const cardBorder = isBorrowed ? '#10b981' : '#e5e7eb';
                    const btnHtml = isBorrowed ?
                        `<button class="btn btn-sm btn-success mb-0 flex-shrink-0" disabled style="min-width:120px;"><i class="fas fa-check-circle me-1"></i> Sudah Diambil</button>` :
                        `<button type="button"
                            class="btn btn-sm mb-0 flex-shrink-0 mba-btn-confirm-borrowed"
                            style="background:#ed85ff; color:#fff; border:none; min-width:120px;"
                            data-asset-id="${asset.asset_id}"
                            data-nama="${asset.nama_barang}"
                            data-kode="${asset.kode_asset || '-'}">
                            <i class="fas fa-check me-1"></i> Tandai Diambil</button>`;

                    $list.append(`
                        <div class="d-flex align-items-start gap-3 p-3 mb-2 rounded"
                            id="mba-card-${asset.asset_id}"
                            style="background:${cardBg}; border:1.5px solid ${cardBorder};">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center flex-wrap gap-1 mb-1">
                                    <strong style="font-size:.9rem;">${asset.nama_barang}</strong>
                                    ${opsionalLabel}${tglAmbilInfo}
                                </div>
                                <div style="font-size:.8rem; color:#6b7280;"><code>${asset.kode_asset || '-'}</code></div>
                                ${bpHtml}
                            </div>
                            <div id="mba-btn-wrap-${asset.asset_id}">${btnHtml}</div>
                        </div>`);
                });
            }

            $(document).on('click', '.mba-btn-confirm-borrowed', function() {
                const assetId = $(this).data('asset-id');
                const nama = $(this).data('nama');
                const kode = $(this).data('kode');

                Swal.fire({
                    title: 'Konfirmasi Pengambilan',
                    html: `Apakah barang berikut sudah diambil oleh user?<br><br><strong>${nama}</strong><br><code style="font-size:.85rem;">${kode}</code>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Sudah Diambil',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#ed85ff',
                    cancelButtonColor: '#6c757d',
                }).then(function(result) {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        url: '{{ url($url_menu) }}/borrowed_asset',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            enc_id: mbaCurrentEncId,
                            asset_id: assetId
                        },
                        success: function(res) {
                            if (!res.success) {
                                Swal.fire('Gagal', res.message || 'Terjadi kesalahan.',
                                    'error');
                                return;
                            }

                            $(`#mba-card-${assetId}`).css({
                                background: '#f0fdf4',
                                border: '1.5px solid #10b981'
                            });
                            $(`#mba-btn-wrap-${assetId}`).html(
                                `<button class="btn btn-sm btn-success mb-0 flex-shrink-0" disabled style="min-width:120px;"><i class="fas fa-check-circle me-1"></i> Sudah Diambil</button>`
                            );

                            if (res.all_borrowed) {
                                Swal.fire({
                                    title: 'Semua Barang Diambil!',
                                    text: 'Status peminjaman berubah menjadi BORROWED.',
                                    icon: 'success',
                                    confirmButtonColor: '#028284',
                                    timer: 2500,
                                    timerProgressBar: true
                                }).then(() => location.reload());
                            } else {
                                Swal.fire({
                                    title: 'Berhasil',
                                    text: res.message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284',
                                    timer: 1800,
                                    timerProgressBar: true,
                                    showConfirmButton: false
                                });
                            }
                        },
                        error: function() {
                            Swal.fire('Error', 'Terjadi kesalahan server.', 'error');
                        }
                    });
                });
            });


            let srCurrentEncId = null;

            window.openModalSubmitReturn = function(data) {
                srCurrentEncId = data.encId;
                $('#sr-nomor').val(data.nomor || '-');
                $('#sr-departemen').val(data.departemen || '-');
                $('#sr-tanggal').val(data.tanggal || '-');
                $('#sr-id-encrypt').val(data.encId);
                $('#sr-loading').removeClass('d-none');
                $('#sr-error').addClass('d-none');
                $('#sr-content').addClass('d-none');
                $('#sr-form-content').empty();

                // [TAMBAH] reset & load perpanjangan section
                $('#sr-perp-section').addClass('d-none');
                $('#sr-perp-list').empty();

                new bootstrap.Modal(document.getElementById('modalSubmitReturn')).show();
                fetchSubmitReturnData(data.id);

                // [TAMBAH] load perpanjangan jika ada
                if (data.hasPendingPerp) {
                    $('#sr-perp-section').removeClass('d-none');
                    $('#sr-perp-loading').removeClass('d-none');
                    loadSrPerpanjangan(data.encId);
                }
            };
            // [TAMBAH] Load perpanjangan pending dalam modal submit return
            function loadSrPerpanjangan(encId) {
                $.ajax({
                    url: '{{ url($url_menu) }}/get-perpanjangan-pending/' + encId,
                    method: 'GET',
                    success: function(res) {
                        $('#sr-perp-loading').addClass('d-none');
                        if (!res.success || !res.data || !res.data.length) {
                            $('#sr-perp-section').addClass('d-none');
                            return;
                        }
                        renderSrPerpanjanganList(res.data);
                    },
                    error: function() {
                        $('#sr-perp-loading').addClass('d-none');
                        $('#sr-perp-list').html(
                            '<div class="text-danger small"><i class="fas fa-exclamation-circle me-1"></i>Gagal memuat perpanjangan.</div>'
                        );
                    }
                });
            }

            function renderSrPerpanjanganList(items) {
                let html = '';
                items.forEach(function(p) {
                    html += `
                    <div class="p-3 mb-2 rounded" id="sr-perp-card-${p.id}"
                        style="background:#fff; border:1px solid #fcd34d;">
                        <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                            <strong style="font-size:.85rem;">${p.nama_barang || '-'}</strong>
                            <code class="text-muted" style="font-size:.75rem;">${p.kode_asset || '-'}</code>
                            <span class="text-muted" style="font-size:.78rem;">
                                <span style="text-decoration:line-through;color:#9ca3af;">
                                    ${p.tanggal_kembali_lama || '-'}
                                </span>
                                <i class="fas fa-long-arrow-alt-right mx-1" style="color:#f59e0b;"></i>
                                <strong style="color:#b45309;">${p.tanggal_kembali_baru || '-'}</strong>
                            </span>
                            <span class="badge ms-auto"
                                style="background:#fef9c3;color:#854d0e;border:1px solid #fde047;
                                    font-size:.68rem;animation:perp-pulse 2s infinite;">
                                Pending
                            </span>
                        </div>
                        <div class="text-muted small mb-2">
                            <i class="fas fa-comment-alt me-1"></i>
                            Alasan: <em>${p.alasan_perpanjangan || '-'}</em>
                        </div>
                        <div class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label style="font-size:.78rem;font-weight:600;display:block;margin-bottom:3px;">
                                    Tgl Kembali Disetujui <span class="text-danger">*</span>
                                    <span class="text-muted fw-normal">(bisa diubah)</span>
                                </label>
                                <input type="date"
                                    class="form-control form-control-sm"
                                    id="sr-perp-tgl-${p.id}"
                                    value="${p.tanggal_kembali_baru_ymd || ''}"
                                    min="{{ now()->format('Y-m-d') }}"
                                    style="border-color:#f59e0b;">
                            </div>
                            <div class="col-md-5">
                                <label style="font-size:.78rem;font-weight:600;display:block;margin-bottom:3px;">
                                    Catatan Admin
                                </label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="sr-perp-catatan-${p.id}"
                                    placeholder="Catatan (opsional)..."
                                    style="border-color:#f59e0b;">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button"
                                    class="btn btn-success btn-sm mb-0 flex-fill sr-perp-btn-approve"
                                    data-perp-id="${p.id_encrypt}"
                                    data-tgl-id="sr-perp-tgl-${p.id}"
                                    data-catatan-id="sr-perp-catatan-${p.id}"
                                    data-card-id="sr-perp-card-${p.id}"
                                    data-url="{{ url($url_menu . '/perpanjangan') }}/${p.id_encrypt}/approve">
                                    <i class="fas fa-check me-1"></i> Approve
                                </button>
                                <button type="button"
                                    class="btn btn-danger btn-sm mb-0 flex-fill sr-perp-btn-reject"
                                    data-perp-id="${p.id_encrypt}"
                                    data-card-id="sr-perp-card-${p.id}"
                                    data-url="{{ url($url_menu . '/perpanjangan') }}/${p.id_encrypt}/reject">
                                    <i class="fas fa-times me-1"></i> Reject
                                </button>
                            </div>
                        </div>
                    </div>`;
                });
                $('#sr-perp-list').html(html);
            }

            // [TAMBAH] Handler approve perpanjangan dalam modal submit return
            $(document).on('click', '.sr-perp-btn-approve', function() {
                const url     = $(this).data('url');
                const tglId   = $(this).data('tgl-id');
                const catId   = $(this).data('catatan-id');
                const cardId  = $(this).data('card-id');
                const tgl     = $(`#${tglId}`).val();
                const catatan = $(`#${catId}`).val();

                if (!tgl) {
                    Swal.fire({
                        title: 'Tanggal wajib diisi',
                        text: 'Masukkan tanggal kembali yang disetujui.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Approve Perpanjangan?',
                    html: `Tanggal kembali akan diubah ke <strong>${tgl}</strong>.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Approve',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#19a974',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (!result.isConfirmed) return;

                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                    });

                    // Simpan payload untuk digunakan ulang jika ada konflik
                    _srPerpApprovePayload = { url, tgl, catatan, cardId };

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            tanggal_kembali_disetujui: tgl,
                            catatan_admin: catatan,
                            force: false,
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.has_conflict) {
                            Swal.close();
                            _srReplacementSelections = {};
                            _srShowKonflikModal(data);
                            return;
                        }
                        _srMarkApproved(cardId, data.message ?? 'Perpanjangan disetujui.');
                    })
                    .catch(() => {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat approve.',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    });
                });
            });

            // ── Helper: tandai card sebagai approved ────────────────────────────
            function _srMarkApproved(cardId, message) {
                $(`#${cardId}`).css({
                    background: '#f0fdf4',
                    border: '1px solid #10b981'
                }).find('.sr-perp-btn-approve, .sr-perp-btn-reject').prop('disabled', true);

                $(`#${cardId} .badge`).css({
                    background: '#d1fae5',
                    color: '#065f46',
                    border: '1px solid #6ee7b7',
                    animation: 'none'
                }).html('<i class="fas fa-check-circle me-1"></i>Disetujui');

                const sisaPending = $('#sr-perp-list .badge').filter(function() {
                    return $(this).text().trim().includes('Pending');
                }).length;
                if (sisaPending === 0) {
                    setTimeout(() => { $('#sr-perp-section').slideUp(300); }, 800);
                }
                Swal.fire({
                    title: 'Berhasil!',
                    text: message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 2000,
                    timerProgressBar: true,
                    showConfirmButton: false
                });
            }

            // ── State konflik perpanjangan (list) ───────────────────────────────
            let _srPerpApprovePayload    = null;
            let _srReplacementSelections = {};
            let _srActiveKonflikAssetId  = null;
            let _srKonflikAssetNama      = null;
            let _srKonflikTglPinjam      = null;
            let _srKonflikTglKembali     = null;
            let _srKodeAssetA            = null;
            let _srLastKonflikData       = null;
            let _srKonflikModalInstance  = null;
            let _srReplacementModalInstance = null;

            function _srFmtDate(str) {
                if (!str) return '-';
                const s = String(str).trim();
                const parts = s.split('/');
                let d;
                if (parts.length === 3) {
                    d = new Date(`${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}T00:00:00`);
                } else {
                    d = new Date(s.split(' ')[0].split('T')[0] + 'T00:00:00');
                }
                if (!d || isNaN(d)) return str;
                return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
            }

            function _srToYmd(str) {
                if (!str) return '';
                const parts = String(str).split('/');
                if (parts.length === 3) return `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}`;
                return str;
            }

            function _srRenderKonflikBody(data) {
                const totalKonflik = data.konflik_assets.length;
                const noReplacement = data.asset_tersedia.length === 0
                    ? `<div class="p-2 rounded mb-3" style="background:#fef3c7;border:1px solid #fcd34d;font-size:.82rem;">
                            <i class="fas fa-exclamation-circle me-1" style="color:#d97706;"></i>
                            <strong>Tidak ada asset pengganti tersedia.</strong> Semua asset konflik akan di-unassign.
                       </div>`
                    : `<div class="p-2 rounded mb-3" style="background:#fffbeb;border:1px solid #fcd34d;font-size:.82rem;">
                            <i class="fas fa-info-circle me-1" style="color:#d97706;"></i>
                            Setiap konflik <strong>wajib</strong> dipilihkan asset pengganti atau di-unassign.
                       </div>`;

                const konflikRows = data.konflik_assets.map((k) => {
                    const isAssetA   = _srKodeAssetA && k.kode_asset === _srKodeAssetA;
                    const rowBg      = isAssetA ? '#fffbeb' : '#fff8f8';
                    const rowBorder  = isAssetA ? '#fcd34d' : '#fca5a5';
                    const labelColor = isAssetA ? '#b45309' : '#991b1b';
                    const badgeBg    = isAssetA ? '#d97706' : '#991b1b';
                    const labelText  = isAssetA
                        ? `<i class="fas fa-user-clock me-1"></i>Asset User A (Diperpanjang)`
                        : `<i class="fas fa-exclamation-triangle me-1"></i>Konflik`;
                    const tglDisplay = isAssetA
                        ? `${data.tgl_pinjam_a} – ${data.tgl_disetujui}`
                        : `${k.tanggal_pinjam} – ${k.tanggal_kembali}`;
                    const sel = _srReplacementSelections[k.asset_id];
                    const sudahDipilihKode = sel && sel !== '__unassigned__';
                    const sudahUnassign    = sel === '__unassigned__';
                    let displayHtml = '', unassignShow = 'inline-flex', clearShow = 'none';
                    if (sudahDipilihKode) {
                        displayHtml  = `<i class="fas fa-check-circle me-1" style="color:#059669;"></i><strong style="color:#059669;">${sel}</strong>`;
                        unassignShow = 'none'; clearShow = 'inline-flex';
                    } else if (sudahUnassign) {
                        displayHtml  = `<span style="color:#6b7280;"><i class="fas fa-unlink me-1"></i><em>Akan di-unassign</em></span>`;
                        unassignShow = 'none'; clearShow = 'inline-flex';
                    } else {
                        displayHtml  = `<span class="text-muted fst-italic" style="font-size:.8rem;"><i class="fas fa-exclamation-circle me-1" style="color:#f59e0b;"></i>Belum dipilih</span>`;
                    }
                    return `<div class="p-3 mb-2 rounded" data-asset-id="${k.asset_id}"
                        style="background:${rowBg};border:1.5px solid ${rowBorder};">
                        <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                            <span style="font-size:.75rem;font-weight:700;color:${labelColor};">${labelText}</span>
                            <code style="font-size:.8rem;">${k.kode_asset}</code>
                            <span class="text-muted" style="font-size:.78rem;">${k.nama_barang} &bull; ${tglDisplay}</span>
                            <span class="ms-auto badge" style="background:${badgeBg};font-size:.7rem;">Peminjaman #${k.peminjaman_id}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <button type="button" class="btn btn-sm mb-0 sr-btn-pilih-replacement"
                                style="font-size:.78rem;${isAssetA ? 'border:1px solid #d97706;color:#d97706;background:#fffbeb;' : 'border:1px solid #3b82f6;color:#3b82f6;background:#fff;'}"
                                data-asset-id="${k.asset_id}" data-nama-barang="${k.nama_barang}"
                                data-tanggal-pinjam="${k.tanggal_pinjam}" data-tanggal-kembali="${k.tanggal_kembali}">
                                <i class="fas fa-box me-1"></i>${sudahDipilihKode ? 'Ganti Asset' : 'Pilih Asset Pengganti'}
                            </button>
                            <div style="font-size:.8rem;">${displayHtml}</div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-0 sr-btn-unassign"
                                data-asset-id="${k.asset_id}" style="font-size:.75rem;display:${unassignShow};">
                                <i class="fas fa-unlink me-1"></i> Unassign
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger mb-0 sr-btn-clear"
                                data-asset-id="${k.asset_id}" style="font-size:.75rem;display:${clearShow};">Reset</button>
                        </div>
                    </div>`;
                }).join('');

                return `<div class="p-2 rounded mb-3" style="background:#fef2f2;border:1px solid #fca5a5;font-size:.82rem;">
                    <i class="fas fa-calendar-times me-1 text-danger"></i>
                    Perpanjangan hingga <strong>${data.tgl_disetujui}</strong>
                    menyebabkan <strong>${totalKonflik} konflik</strong> dengan peminjaman lain.
                </div>
                ${noReplacement}${konflikRows}
                <div id="sr-konflik-counter-wrap" class="mt-2 p-2 rounded text-center" style="font-size:.82rem;border:1px solid #e2e8f0;">
                    <span id="sr-konflik-counter-text"></span>
                </div>`;
            }

            function _srShowKonflikModal(data) {
                _srLastKonflikData = data;
                _srKodeAssetA      = data.kode_asset_a ?? null;
                data.konflik_assets.forEach(k => {
                    if (!_srReplacementSelections.hasOwnProperty(k.asset_id)) {
                        _srReplacementSelections[k.asset_id] = null;
                    }
                });
                if (data.asset_tersedia.length === 0) {
                    data.konflik_assets.forEach(k => { _srReplacementSelections[k.asset_id] = '__unassigned__'; });
                }
                const totalKonflik = data.konflik_assets.length;
                document.getElementById('sr-konflik-modal-title').textContent = `${totalKonflik} Konflik Asset Terdeteksi`;
                document.getElementById('sr-konflik-modal-body').innerHTML = _srRenderKonflikBody(data);
                _srUpdateKonflikCounter(totalKonflik);
                _srUpdateConfirmButton(totalKonflik);
                _srBindKonflikEvents(data, totalKonflik);
                if (!_srKonflikModalInstance) {
                    _srKonflikModalInstance = new bootstrap.Modal(document.getElementById('srKonflikModal'));
                }
                _srKonflikModalInstance.show();
            }

            function _srRerenderKonflikBody() {
                if (!_srLastKonflikData) return;
                const totalKonflik = _srLastKonflikData.konflik_assets.length;
                document.getElementById('sr-konflik-modal-body').innerHTML = _srRenderKonflikBody(_srLastKonflikData);
                _srUpdateKonflikCounter(totalKonflik);
                _srUpdateConfirmButton(totalKonflik);
                _srBindKonflikEvents(_srLastKonflikData, totalKonflik);
            }

            function _srBindKonflikEvents(data, totalKonflik) {
                document.querySelectorAll('.sr-btn-pilih-replacement').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _srActiveKonflikAssetId = parseInt(this.dataset.assetId);
                        _srKonflikAssetNama     = (this.dataset.namaBarang ?? '').toLowerCase();
                        _srKonflikTglPinjam     = this.dataset.tanggalPinjam;
                        _srKonflikTglKembali    = this.dataset.tanggalKembali;
                        _srOpenReplacementModal();
                    });
                });
                document.querySelectorAll('.sr-btn-unassign').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _srReplacementSelections[parseInt(this.dataset.assetId)] = '__unassigned__';
                        _srRerenderKonflikBody();
                    });
                });
                document.querySelectorAll('.sr-btn-clear').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _srReplacementSelections[parseInt(this.dataset.assetId)] = null;
                        _srRerenderKonflikBody();
                    });
                });
                const $confirmBtn = document.getElementById('sr-btn-confirm-konflik-approve');
                if ($confirmBtn) {
                    $confirmBtn.onclick = function () {
                        const belum = Object.entries(_srReplacementSelections).filter(([, v]) => v === null);
                        if (belum.length > 0) {
                            Swal.fire({ title: 'Belum lengkap', text: `Masih ada ${belum.length} konflik yang belum ditentukan!`, icon: 'warning', confirmButtonColor: '#028284' });
                            return;
                        }
                        _srSubmitKonflikApprove();
                    };
                }
            }

            function _srSubmitKonflikApprove() {
                const replacements = [];
                Object.entries(_srReplacementSelections).forEach(([assetId, kode]) => {
                    replacements.push({ asset_id: parseInt(assetId), new_kode_asset: (kode === '__unassigned__') ? null : kode });
                });
                const { url, tgl, catatan, cardId } = _srPerpApprovePayload;
                Swal.fire({ title: 'Memproses Approve...', allowOutsideClick: false, allowEscapeKey: false, didOpen: () => Swal.showLoading() });
                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: JSON.stringify({ tanggal_kembali_disetujui: tgl, catatan_admin: catatan, force: true, replacement_assets: replacements })
                })
                .then(res => res.json())
                .then(data => {
                    _srKonflikModalInstance?.hide();
                    _srMarkApproved(cardId, data.message ?? 'Perpanjangan disetujui & asset pengganti diterapkan.');
                })
                .catch(() => {
                    Swal.fire({ title: 'Gagal!', text: 'Terjadi kesalahan saat memproses.', icon: 'error', confirmButtonColor: '#028284' });
                });
            }

            function _srUpdateKonflikCounter(totalKonflik) {
                const sudah = Object.values(_srReplacementSelections).filter(v => v !== null).length;
                const selesai = sudah >= totalKonflik;
                const $wrap = document.getElementById('sr-konflik-counter-wrap');
                const $text = document.getElementById('sr-konflik-counter-text');
                if (!$wrap || !$text) return;
                $wrap.style.background  = selesai ? '#f0fdf4' : '#fef9c3';
                $wrap.style.borderColor = selesai ? '#6ee7b7' : '#fde047';
                $text.innerHTML = selesai
                    ? `<i class="fas fa-check-circle me-1" style="color:#059669;"></i><strong style="color:#059669;">Semua konflik sudah ditentukan (${sudah}/${totalKonflik})</strong> — siap di-approve`
                    : `<i class="fas fa-exclamation-circle me-1" style="color:#d97706;"></i><strong style="color:#d97706;">${sudah} dari ${totalKonflik} konflik sudah ditentukan</strong> — selesaikan semua sebelum approve`;
            }

            function _srUpdateConfirmButton(totalKonflik) {
                const sudah = Object.values(_srReplacementSelections).filter(v => v !== null).length;
                const selesai = sudah >= totalKonflik;
                const $btn = document.getElementById('sr-btn-confirm-konflik-approve');
                if (!$btn) return;
                $btn.disabled = !selesai;
                $btn.style.opacity = selesai ? '' : '0.45';
                $btn.style.cursor  = selesai ? '' : 'not-allowed';
            }

            function _srOpenReplacementModal() {
                const tglPinjamYmd  = _srToYmd(_srKonflikTglPinjam);
                const tglKembaliYmd = _srToYmd(_srKonflikTglKembali);
                const params = new URLSearchParams({ tanggal_pinjam: tglPinjamYmd, tanggal_kembali: tglKembaliYmd });
                document.getElementById('sr-replacement-modal-body').innerHTML =
                    `<div class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin me-1"></i> Mengecek ketersediaan asset...</div>`;
                if (!_srReplacementModalInstance) {
                    _srReplacementModalInstance = new bootstrap.Modal(document.getElementById('srReplacementModal'));
                }
                document.getElementById('sr-btn-back-replacement').onclick  = _srCloseReplacementGoBack;
                document.getElementById('sr-btn-close-replacement').onclick = _srCloseReplacementGoBack;
                _srReplacementModalInstance.show();
                $.getJSON(`{{ url($url_menu . '/stok-barang') }}?${params}`, function (res) {
                    const relevantKodes = res.filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === _srKonflikAssetNama &&
                        b.kode_asset !== null && parseInt(b.isactive) === 1
                    ).map(b => b.kode_asset);
                    if (!relevantKodes.length) { _srRenderReplacementBody(res, [], tglPinjamYmd, tglKembaliYmd); return; }
                    $.ajax({
                        url: '{{ url('trpjbr/booking-konflik') }}',
                        method: 'GET',
                        data: { kode_assets: relevantKodes, tanggal_pinjam: tglPinjamYmd, tanggal_kembali: tglKembaliYmd },
                        success: konflikRes => _srRenderReplacementBody(res, konflikRes, tglPinjamYmd, tglKembaliYmd),
                        error:   ()         => _srRenderReplacementBody(res, [],        tglPinjamYmd, tglKembaliYmd),
                    });
                }).fail(() => {
                    document.getElementById('sr-replacement-modal-body').innerHTML =
                        `<div class="text-center text-danger py-3">Gagal memuat data asset.</div>`;
                });
            }

            function _srCloseReplacementGoBack() {
                _srReplacementModalInstance?.hide();
                document.getElementById('srReplacementModal').addEventListener('hidden.bs.modal', function once() {
                    document.getElementById('srReplacementModal').removeEventListener('hidden.bs.modal', once);
                    _srRerenderKonflikBody();
                    _srKonflikModalInstance?.show();
                });
            }

            function _srRenderReplacementBody(allStokRes, konflikRes, tglPinjam, tglKembali) {
                const filtered = allStokRes.filter(b =>
                    (b.nama_barang ?? '').toLowerCase() === _srKonflikAssetNama &&
                    b.kode_asset !== null && parseInt(b.isactive) === 1
                );
                const rows = filtered.map(b => {
                    const konflikList  = konflikRes.filter(k => k.kode_asset === b.kode_asset);
                    const adaKonflik   = konflikList.length > 0;
                    const isUserAAsset = _srKodeAssetA && b.kode_asset === _srKodeAssetA;
                    const sudahDipilih = Object.entries(_srReplacementSelections).some(
                        ([aid, kode]) => parseInt(aid) !== _srActiveKonflikAssetId && kode === b.kode_asset
                    );
                    let btnHtml = '', warningHtml = '';
                    if (sudahDipilih) {
                        btnHtml = `<button class="btn btn-secondary btn-sm mb-0" disabled><i class="fas fa-check me-1"></i>Dipakai</button>`;
                    } else if (isUserAAsset) {
                        btnHtml = `<button class="btn btn-sm mb-0" disabled style="background:#fef3c7;color:#b45309;border:1px solid #fcd34d;cursor:not-allowed;"><i class="fas fa-user-clock me-1"></i>Dipakai User A</button>`;
                        warningHtml = `<div class="mt-1 p-1 rounded" style="background:#fffbeb;border:1px dashed #fcd34d;max-width:300px;font-size:.72rem;color:#b45309;"><i class="fas fa-info-circle me-1"></i>Asset sedang diperpanjang (User A)</div>`;
                    } else if (adaKonflik) {
                        const isJangkaPanjang = konflikList.some(k => k.is_jangka_panjang == 1);

                        const konflikLines = konflikList.map(k =>
                            k.is_jangka_panjang == 1
                            ? `<div><i class="fas fa-infinity me-1"></i>
                                Dipinjam sejak: <strong>${_srFmtDate(k.tanggal_pinjam)}</strong>
                                — <strong>tanpa batas waktu</strong>
                            </div>`
                            : `<div><i class="fas fa-calendar-times me-1"></i>
                                ${_srFmtDate(k.tanggal_pinjam)} – ${_srFmtDate(k.tanggal_kembali)}
                            </div>`
                        ).join('');

                        btnHtml = isJangkaPanjang
                            ? `<button class="btn btn-sm mb-0" disabled
                                    style="background:#f5f3ff;color:#7c3aed;border:1px solid #c4b5fd;">
                                    <i class="fas fa-infinity me-1"></i>Dipinjam Tanpa Batas
                            </button>`
                            : `<button class="btn btn-danger btn-sm mb-0" disabled>
                                    <i class="fas fa-ban me-1"></i>Sedang Dipinjam
                            </button>`;

                        warningHtml = `
                        <div class="mt-1 p-1 rounded" style="
                            background:${isJangkaPanjang ? '#f5f3ff' : '#fff5f5'};
                            border:1px dashed ${isJangkaPanjang ? '#c4b5fd' : '#fca5a5'};
                            max-width:280px;font-size:.72rem;
                            color:${isJangkaPanjang ? '#7c3aed' : '#b91c1c'};">
                            ${isJangkaPanjang
                                ? '<i class="fas fa-infinity me-1"></i>DIPINJAM JANGKA PANJANG (TANPA BATAS)'
                                : '<i class="fas fa-exclamation-triangle me-1"></i>SEDANG DIPINJAM'
                            }
                            ${konflikLines}
                        </div>`;
                    } else {
                        btnHtml = `<button type="button" class="btn btn-primary btn-sm mb-0 sr-btn-confirm-replacement" data-kode="${b.kode_asset}"><i class="fas fa-check me-1"></i>Pilih</button>`;
                    }
                    return `<tr><td>${btnHtml}${warningHtml}</td><td>${b.nama_barang ?? '-'}</td><td><code>${b.kode_asset ?? '-'}</code></td><td class="text-muted" style="font-size:.8rem;">${b.value ?? '-'}</td></tr>`;
                }).join('');

                const tableHtml = filtered.length === 0
                    ? `<div class="text-center text-muted fst-italic py-3">Tidak ada asset tersedia</div>`
                    : `<div class="table-responsive"><table class="table table-hover align-middle" style="font-size:.82rem;">
                        <thead style="background:#0a8f97;color:#fff;"><tr>
                            <th style="width:130px;">Action</th><th>Nama Barang</th><th>Kode Asset</th><th>Value</th>
                        </tr></thead><tbody>${rows}</tbody></table></div>`;

                document.getElementById('sr-replacement-modal-body').innerHTML = `
                    <div class="p-2 rounded mb-3" style="background:#e0f2fe;border:1px solid #bae6fd;font-size:.82rem;">
                        <i class="fas fa-info-circle me-1" style="color:#0369a1;"></i>
                        Pilih asset pengganti untuk rentang <strong>${_srFmtDate(tglPinjam)}</strong> – <strong>${_srFmtDate(tglKembali)}</strong>
                    </div>${tableHtml}`;

                document.querySelectorAll('.sr-btn-confirm-replacement').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _srReplacementSelections[_srActiveKonflikAssetId] = this.dataset.kode;
                        _srCloseReplacementGoBack();
                    });
                });
            }

            // [TAMBAH] Handler reject perpanjangan dalam modal submit return
            let _srPerpRejectUrl = null;
            let _srPerpRejectCardId = null;

            $(document).on('click', '.sr-perp-btn-reject', function() {
                _srPerpRejectUrl    = $(this).data('url');
                _srPerpRejectCardId = $(this).data('card-id');
                $('#perp-list-reject-catatan').val('');
                new bootstrap.Modal(document.getElementById('perpRejectModalList')).show();
            });

            $('#btn-confirm-perp-reject-list').on('click', function() {
                const catatan = $('#perp-list-reject-catatan').val().trim();
                if (!catatan) {
                    Swal.fire({
                        title: 'Alasan wajib diisi',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                bootstrap.Modal.getInstance(document.getElementById('perpRejectModalList'))?.hide();

                Swal.fire({
                    title: 'Memproses...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

                fetch(_srPerpRejectUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ catatan_admin: catatan })
                })
                .then(res => res.json())
                .then(data => {
                    // Tandai card sebagai rejected
                    $(`#${_srPerpRejectCardId}`).css({
                        background: '#fff8f8',
                        border: '1px solid #fca5a5'
                    }).find('.sr-perp-btn-approve, .sr-perp-btn-reject').prop('disabled', true);

                    $(`#${_srPerpRejectCardId} .badge`).css({
                        background: '#fee2e2',
                        color: '#991b1b',
                        border: '1px solid #fca5a5',
                        animation: 'none'
                    }).html('<i class="fas fa-times-circle me-1"></i>Ditolak');

                    const sisaPending = $('#sr-perp-list .badge').filter(function() {
                        return $(this).text().trim().includes('Pending');
                    }).length;

                    if (sisaPending === 0) {
                        setTimeout(() => {
                            $('#sr-perp-section').slideUp(300);
                        }, 800);
                    }

                    Swal.fire({
                        title: 'Berhasil!',
                        text: data.message ?? 'Perpanjangan ditolak.',
                        icon: 'success',
                        confirmButtonColor: '#028284',
                        timer: 2000,
                        timerProgressBar: true,
                        showConfirmButton: false
                    });
                })
                .catch(() => {
                    Swal.fire({
                        title: 'Gagal!',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                });
            });
            function fetchSubmitReturnData(id) {
                $.ajax({
                    url: '{{ url($url_menu) }}/get-submit-return-detail/' + id,
                    method: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            renderSubmitReturnForm(response.data);
                            $('#sr-loading').addClass('d-none');
                            $('#sr-content').removeClass('d-none');
                        } else {
                            showSubmitReturnError(response.message || 'Gagal memuat data');
                        }
                    },
                    error: function() {
                        showSubmitReturnError('Terjadi kesalahan saat memuat data');
                    }
                });
            }

            function renderSubmitReturnForm(data) {
                let html = '';

                if (data.items && data.items.length > 0) {
                    html +=
                        `<div class="prb-card"><div class="prb-card-label mb-3" style="color:#d97706; border-left-color:#d97706;"><i class="fas fa-boxes me-1"></i> Pengecekan Return Asset</div>`;

                    data.items.forEach((item) => {
                        if (!item.assets || item.assets.length === 0) return;

                        // ── Tabel ringkasan item (seperti di show blade) ──────────
                        const sitBadge = (() => {
                            const s = (item.status_item || '').toLowerCase();
                            if (s === 'approved' || s === 'approve') return `<span class="badge bg-success" style="font-size:.7rem;">${item.status_item}</span>`;
                            if (s === 'rejected' || s === 'reject') return `<span class="badge bg-danger" style="font-size:.7rem;">${item.status_item}</span>`;
                            return `<span class="badge bg-secondary" style="font-size:.7rem;">${item.status_item || '-'}</span>`;
                        })();
                        const tglPinjam  = item.tanggal_pinjam  && item.tanggal_pinjam  !== '-' ? item.tanggal_pinjam  : `<span class="text-muted fst-italic" style="font-size:.72rem;">Jangka Panjang</span>`;
                        // parse ke format Y-m-d untuk value input
                        const tglKembaliVal = (() => {
                            const raw = item.tanggal_kembali;
                            if (!raw || raw === '-') return '';
                            // format dari server: dd/mm/yyyy atau raw datetime
                            const parts = String(raw).split('/');
                            if (parts.length === 3) return `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}`;
                            return String(raw).split(' ')[0].split('T')[0];
                        })();

                        const tglKembali = `
                            <input type="date"
                                class="form-control form-control-sm sr-tgl-kembali-input"
                                name="tgl_kembali_aktual[${item.id}]"
                                data-item-id="${item.id}"
                                value="${tglKembaliVal}"
                                style="min-width:130px; border-color:#f97316; background:#fff7ed;"
                                required>
                            ${!tglKembaliVal ? `<div class="mt-1">
                                <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
                                    border-radius:20px;font-size:.7rem;font-weight:700;
                                    background:#fef3c7;color:#d97706;border:1px solid #fcd34d;">
                                    <i class="fas fa-infinity" style="font-size:.65rem;"></i>
                                    Wajib diisi
                                </span>
                            </div>` : ''}
                            `;
                        const kodeAssets = item.assets.map(a => `<code style="font-size:.75rem;display:block;">${a.kode_asset || '-'}</code>`).join('');

                        html += `
<div class="mb-3 mt-2">
    <div class="table-responsive mb-2">
        <table class="table align-middle table-hover" style="font-size:12px; border-collapse:separate; border-spacing:0;">
            <thead style="background:#0a8f97; color:#fff;">
                <tr>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Nama Barang</th>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Penerima</th>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Keterangan</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Qty Diminta</th>
                    <th style="width:130px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Qty Disetujui</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Tgl Pinjam</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Tgl Kembali</th>
                    <th style="width:140px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${item.nama_barang || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${item.penerima || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${item.keterangan || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${item.qty_diminta ?? 0}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${item.qty_disetujui ?? 0}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${tglPinjam}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${tglKembali}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${sitBadge}</td>
                </tr>
            </tbody>
        </table>
    </div>`;

                        item.assets.forEach((asset) => {
                            const isApproved = asset.status_asset === 'approve';
                            const isRejected = asset.status_asset === 'reject';
                            const isReadonly = isApproved;
                            const wrapperBg = isApproved ? '#f0fdf4' : (isRejected ? '#fee2e2' :
                                '#fffbeb');
                            const wrapperBorder = isApproved ? '#10b981' : (isRejected ? '#ef4444' :
                                '#f59e0b');
                            const labelColor = isApproved ? '#059669' : (isRejected ? '#991b1b' :
                                '#d97706');
                            const inputBg = isApproved ? '#f0fdf4' : (isRejected ? '#fee2e2' :
                                '#fff');
                            const inputBorder = isApproved ? '#6ee7b7' : (isRejected ? '#fca5a5' :
                                '#dee2e6');

                            html += `
<div class="return-asset-section mt-3 p-3 rounded" style="background:${wrapperBg}; border:1.5px solid ${wrapperBorder};">
    <div class="return-section-label mb-2 d-flex align-items-center flex-wrap gap-2" style="color:${labelColor};">
        <i class="fas fa-${isApproved ? 'check-circle' : (isRejected ? 'times-circle' : 'undo-alt')}"></i>
        ${isApproved ? 'Return Sudah Di-Approve' : (isRejected ? 'Return Di-Reject' : 'Pengecekan Return Asset')}
        — <strong>${item.nama_barang || '-'} (${asset.kode_asset})</strong>
        ${!isReadonly ? `<span class="badge" style="background:#f59e0b; color:#fff; font-size:.7rem; font-weight:500;"><i class="fas fa-pencil-alt me-1"></i>Perlu diisi</span>` : ''}
        ${item.tanggal_ambil && item.tanggal_ambil !== '-' ? `
        <span class="ms-auto d-inline-flex align-items-center gap-1 px-2 py-1 rounded fw-bold"
            style="background:linear-gradient(135deg,#e0fdf4,#cffafe);
                   border:1.5px solid #0a8f97;
                   color:#065f46;
                   font-size:.72rem;
                   white-space:nowrap;">
            <i class="fas fa-calendar-check" style="color:#0a8f97; font-size:.7rem;"></i>
            Tgl Ambil: ${item.tanggal_ambil}
        </span>` : ''}
    </div>
    <input type="hidden" name="assets[${asset.id}][asset_id]" value="${asset.id}">
    <div class="row g-2 mb-2">
        <div class="col-md-3">
            <label class="prb-form-label">Kondisi Asset ${!isReadonly ? '<span class="text-danger">*</span>' : ''}</label>
            ${isReadonly ? `
                        <input type="hidden" name="assets[${asset.id}][kondisi_asset]" value="${asset.kondisi_asset}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" value="${(asset.kondisi_asset || '-').toUpperCase().replace(/_/g, ' ')}" readonly style="background:${inputBg}; border-color:${inputBorder}; color:${labelColor}; font-weight:600;">
                        </div>` : `
                        <select class="form-select form-select-sm return-input" name="assets[${asset.id}][kondisi_asset]" required style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                            <option value="">-- Pilih Kondisi --</option>
                            <option value="baik" ${asset.kondisi_asset === 'baik' ? 'selected' : ''}>Baik</option>
                            <option value="rusak_ringan" ${asset.kondisi_asset === 'rusak_ringan' ? 'selected' : ''}>Rusak Ringan</option>
                            <option value="rusak_berat" ${asset.kondisi_asset === 'rusak_berat' ? 'selected' : ''}>Rusak Berat</option>
                            <option value="hilang" ${asset.kondisi_asset === 'hilang' ? 'selected' : ''}>Hilang</option>
                            <option value="tidak_ada" ${asset.kondisi_asset === 'tidak_ada' ? 'selected' : ''}>Tidak Ada</option>
                        </select>`}
        </div>
        <div class="col-md-2">
            <label class="prb-form-label">Status Return ${!isReadonly ? '<span class="text-danger">*</span>' : ''}</label>
            ${isReadonly ? `
                        <input type="hidden" name="assets[${asset.id}][status_asset]" value="${asset.status_asset}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" value="${asset.status_asset === 'approve' ? 'APPROVE' : (asset.status_asset === 'reject' ? 'REJECT' : 'BORROWED')}" style="background:${inputBg}; border-color:${inputBorder}; color:${labelColor}; font-weight:700;">
                        </div>` : `
                        <select class="form-select form-select-sm return-input" name="assets[${asset.id}][status_asset]" required style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                            <option value="">-- Pilih Status --</option>
                            <option value="approve" ${asset.status_asset === 'approve' ? 'selected' : ''}>Approve</option>
                            <option value="reject" ${asset.status_asset === 'reject' ? 'selected' : ''}>Reject</option>
                            <option value="borrowed" ${asset.status_asset === 'borrowed' ? 'selected' : ''}>Borrowed</option>
                        </select>`}
        </div>
        <div class="col-md-7">
            <label class="prb-form-label">Catatan</label>
            ${isReadonly ? `
                        <input type="hidden" name="assets[${asset.id}][catatan]" value="${asset.catatan || ''}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" value="${asset.catatan || '-'}" readonly style="background:${inputBg}; border-color:${inputBorder};">
                        </div>` : `
                        <input type="text" class="form-control form-control-sm return-input" name="assets[${asset.id}][catatan]" placeholder="Catatan (opsional)..." value="${asset.catatan || ''}" style="background:#fff; border-color:#dee2e6;">`}
        </div>
    </div>
    ${renderBarangPendukung(asset.id, asset.kondisi_awal || [], asset.kondisi_kembali || [], false)}
    ${renderSrPerpanjanganInline(asset.perpanjangan_pending || [])}
</div>`;
                        });
                        html += `</div>`; // tutup wrapper item
                    });
                    html += '</div>';
                }

                if (data.opsionalItems && data.opsionalItems.length > 0) {
                    html +=
                        `<div class="prb-card mt-3"><div class="prb-card-label mb-3" style="color:#d97706; border-left-color:#d97706;"><i class="fas fa-boxes me-1"></i> Pengecekan Return Barang Opsional</div>`;

                    data.opsionalItems.forEach((ops) => {
                        if (!ops.assets || ops.assets.length === 0) return;

                        // ── Tabel ringkasan item opsional ─────────────────────────
                        const opsBadge = (() => {
                            const s = (ops.status_item || '').toLowerCase();
                            if (s === 'approved' || s === 'approve') return `<span class="badge bg-success" style="font-size:.7rem;">${ops.status_item}</span>`;
                            if (s === 'rejected' || s === 'reject') return `<span class="badge bg-danger" style="font-size:.7rem;">${ops.status_item}</span>`;
                            return `<span class="badge bg-secondary" style="font-size:.7rem;">${ops.status_item || '-'}</span>`;
                        })();
                        const opsTglPinjam  = ops.tanggal_pinjam  && ops.tanggal_pinjam  !== '-' ? ops.tanggal_pinjam  : `<span class="text-muted fst-italic" style="font-size:.72rem;">Jangka Panjang</span>`;
                        const opsTglKembali = ops.tanggal_kembali && ops.tanggal_kembali !== '-' ? ops.tanggal_kembali : `<span class="text-muted fst-italic" style="font-size:.72rem;">Jangka Panjang</span>`;
                        const opsKodeAssets = ops.assets.map(a => `<code style="font-size:.75rem;display:block;">${a.kode_asset || '-'}</code>`).join('');

                        html += `
<div class="mb-3 mt-2">
    <div class="table-responsive mb-2">
        <table class="table align-middle table-hover" style="font-size:12px; border-collapse:separate; border-spacing:0;">
            <thead style="background:#0a8f97; color:#fff;">
                <tr>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Nama Barang</th>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Penerima</th>
                    <th style="min-width:150px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Keterangan</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Qty Diminta</th>
                    <th style="width:130px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Qty Disetujui</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Tgl Pinjam</th>
                    <th style="width:110px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Tgl Kembali</th>
                    <th style="width:140px; font-size:12px; padding:6px 8px; border:1px solid #dee2e6;">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${ops.nama_barang || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${ops.penerima || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${ops.keterangan || '-'}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${ops.qty_diminta ?? 0}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${ops.qty_disetujui ?? 0}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${opsTglPinjam}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6;">${opsTglKembali}</td>
                    <td style="padding:6px 8px; border:1px solid #dee2e6; text-align:center;">${opsBadge}</td>
                </tr>
            </tbody>
        </table>
    </div>`;

                        ops.assets.forEach((oa) => {
                            const isApproved = oa.status_asset === 'approve';
                            const isRejected = oa.status_asset === 'reject';
                            const isReadonly = isApproved;
                            const wrapperBg = isApproved ? '#f0fdf4' : (isRejected ? '#fee2e2' :
                                '#fffbeb');
                            const wrapperBord = isApproved ? '#10b981' : (isRejected ? '#ef4444' :
                                '#f59e0b');
                            const labelColor = isApproved ? '#059669' : (isRejected ? '#991b1b' :
                                '#d97706');
                            const inputBg = isApproved ? '#f0fdf4' : (isRejected ? '#fee2e2' :
                                '#fff');
                            const inputBorder = isApproved ? '#6ee7b7' : (isRejected ? '#fca5a5' :
                                '#dee2e6');

                            html += `
<div class="return-asset-section mt-3 p-3 rounded" style="background:${wrapperBg}; border:1.5px solid ${wrapperBord};">
    <div class="return-section-label mb-2 d-flex align-items-center flex-wrap gap-2" style="color:${labelColor};">
        <i class="fas fa-${isApproved ? 'check-circle' : (isRejected ? 'times-circle' : 'undo-alt')}"></i>
        ${isApproved ? 'Return Sudah Di-Approve' : (isRejected ? 'Return Di-Reject' : 'Pengecekan Return Asset Opsional')}
        — <strong>${ops.nama_barang || '-'} (${oa.kode_asset})</strong>
        ${!isReadonly ? '<span class="badge" style="background:' + (isRejected ? '#ef4444' : '#f59e0b') + '; color:#fff; font-size:.7rem;"><i class="fas fa-pencil-alt me-1"></i>' + (isRejected ? 'Bisa diisi ulang' : 'Perlu diisi') + '</span>' : ''}
        ${ops.tanggal_ambil && ops.tanggal_ambil !== '-' ? `
        <span class="ms-auto d-inline-flex align-items-center gap-1 px-2 py-1 rounded fw-bold"
            style="background:linear-gradient(135deg,#e0fdf4,#cffafe);
                   border:1.5px solid #0a8f97;
                   color:#065f46;
                   font-size:.72rem;
                   white-space:nowrap;">
            <i class="fas fa-calendar-check" style="color:#0a8f97; font-size:.7rem;"></i>
            Tgl Ambil: ${ops.tanggal_ambil}
        </span>` : ''}
    </div>
    <input type="hidden" name="opsional_assets[${oa.id}][asset_id]" value="${oa.id}">
    <div class="row g-2 mb-2">
        <div class="col-md-3">
            <label class="prb-form-label">Kondisi Asset ${!isReadonly ? '<span class="text-danger">*</span>' : ''}</label>
            ${isReadonly ? `
                        <input type="hidden" name="opsional_assets[${oa.id}][kondisi_asset]" value="${oa.kondisi_asset || ''}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" readonly value="${(oa.kondisi_asset || '-').toUpperCase().replace(/_/g, ' ')}" style="background:${inputBg}; border-color:${inputBorder}; color:${labelColor}; font-weight:600;">
                        </div>` : `
                        <select class="form-select form-select-sm return-input" name="opsional_assets[${oa.id}][kondisi_asset]" required style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                            <option value="">-- Pilih Kondisi --</option>
                            <option value="baik" ${oa.kondisi_asset === 'baik' ? 'selected' : ''}>Baik</option>
                            <option value="rusak_ringan" ${oa.kondisi_asset === 'rusak_ringan' ? 'selected' : ''}>Rusak Ringan</option>
                            <option value="rusak_berat" ${oa.kondisi_asset === 'rusak_berat' ? 'selected' : ''}>Rusak Berat</option>
                            <option value="hilang" ${oa.kondisi_asset === 'hilang' ? 'selected' : ''}>Hilang</option>
                            <option value="tidak_ada" ${oa.kondisi_asset === 'tidak_ada' ? 'selected' : ''}>Tidak Ada</option>
                        </select>`}
        </div>
        <div class="col-md-2">
            <label class="prb-form-label">Status Return ${!isReadonly ? '<span class="text-danger">*</span>' : ''}</label>
            ${isReadonly ? `
                        <input type="hidden" name="opsional_assets[${oa.id}][status_asset]" value="${oa.status_asset || ''}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" readonly value="${oa.status_asset === 'approve' ? 'APPROVE' : (oa.status_asset === 'reject' ? 'REJECT' : 'BORROWED')}" style="background:${inputBg}; border-color:${inputBorder}; color:${labelColor}; font-weight:700;">
                        </div>` : `
                        <select class="form-select form-select-sm return-input" name="opsional_assets[${oa.id}][status_asset]" required style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                            <option value="">-- Pilih Status --</option>
                            <option value="approve" ${oa.status_asset === 'approve' ? 'selected' : ''}>Approve</option>
                            <option value="reject" ${oa.status_asset === 'reject' ? 'selected' : ''}>Reject</option>
                            <option value="borrowed" ${oa.status_asset === 'borrowed' ? 'selected' : ''}>Borrowed</option>
                        </select>`}
        </div>
        <div class="col-md-7">
            <label class="prb-form-label">Catatan</label>
            ${isReadonly ? `
                        <input type="hidden" name="opsional_assets[${oa.id}][catatan]" value="${oa.catatan || ''}">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:${inputBg}; border-color:${inputBorder};"><i class="fas fa-lock" style="font-size:.7rem; color:${labelColor};"></i></span>
                            <input type="text" class="form-control form-control-sm" readonly value="${oa.catatan || '-'}" style="background:${inputBg}; border-color:${inputBorder};">
                        </div>` : `
                        <input type="text" class="form-control form-control-sm return-input" name="opsional_assets[${oa.id}][catatan]" placeholder="Catatan (opsional)..." value="${oa.catatan || ''}" style="background:#fff; border-color:#dee2e6;">`}
        </div>
    </div>
    ${renderBarangPendukung(oa.id, oa.kondisi_awal || [], oa.kondisi_kembali || [], true)}
    ${renderSrPerpanjanganInline(oa.perpanjangan_pending || [])}
</div>`;
                        });
                        html += `</div>`; // tutup wrapper opsional item
                    });
                    html += '</div>';
                }

                $('#sr-form-content').html(html);
                autoApproveIfConditionGoodForSubmitReturn();
            }
            

            function autoApproveIfConditionGoodForSubmitReturn() {
                $('#sr-form-content').find(
                    'select[name*="assets"][name*="[kondisi_asset]"]:not([name*="opsional"])').each(function() {
                    const assetId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-asset-section').find(
                        `select[name="assets[${assetId}][status_asset]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });
                $('#sr-form-content').find('select[name*="opsional_assets"][name*="[kondisi_asset]"]').each(
                    function() {
                        const oaId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                        const $st = $(this).closest('.return-asset-section').find(
                            `select[name="opsional_assets[${oaId}][status_asset]"]`);
                        if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                    });
                $('#sr-form-content').find(
                    'select[name*="barang_pendukung"][name*="[kondisi_barang_pendukung]"]:not([name*="opsional"])'
                ).each(function() {
                    const bpId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-bp-row').find(
                        `select[name="barang_pendukung[${bpId}][status_barang_pendukung]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });
                $('#sr-form-content').find(
                    'select[name*="opsional_barang_pendukung"][name*="[kondisi_barang_pendukung]"]').each(
                    function() {
                        const bpId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                        const $st = $(this).closest('.return-bp-row').find(
                            `select[name="opsional_barang_pendukung[${bpId}][status_barang_pendukung]"]`);
                        if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                    });
            }

            $(document).on('change',
                '#sr-form-content select[name*="assets"][name*="[kondisi_asset]"]:not([name*="opsional"])',
                function() {
                    const assetId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-asset-section').find(
                        `select[name="assets[${assetId}][status_asset]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });
            $(document).on('change', '#sr-form-content select[name*="opsional_assets"][name*="[kondisi_asset]"]',
                function() {
                    const oaId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-asset-section').find(
                        `select[name="opsional_assets[${oaId}][status_asset]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });
            $(document).on('change',
                '#sr-form-content select[name*="barang_pendukung"][name*="[kondisi_barang_pendukung]"]:not([name*="opsional"])',
                function() {
                    const bpId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-bp-row').find(
                        `select[name="barang_pendukung[${bpId}][status_barang_pendukung]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });
            $(document).on('change',
                '#sr-form-content select[name*="opsional_barang_pendukung"][name*="[kondisi_barang_pendukung]"]',
                function() {
                    const bpId = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    const $st = $(this).closest('.return-bp-row').find(
                        `select[name="opsional_barang_pendukung[${bpId}][status_barang_pendukung]"]`);
                    if ($(this).val() === 'baik' && $st.length) $st.val('approve').trigger('change');
                });

            function renderSrPerpanjanganInline(perpList) {
                if (!perpList || !perpList.length) return '';

                let html = `
                <div class="sr-perp-inline-section mt-3 pt-2" style="border-top:2px dashed #f59e0b;">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span style="display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
                                    border-radius:20px;font-size:.7rem;font-weight:700;
                                    background:#fef3c7;color:#b45309;border:1px solid #fcd34d;
                                    animation:perp-pulse 2s infinite;white-space:nowrap;">
                            <i class="fas fa-calendar-plus" style="font-size:.65rem;"></i>
                            PERPANJANGAN PENDING
                        </span>
                        <span class="text-muted" style="font-size:.78rem;">
                            Selesaikan sebelum submit return
                        </span>
                    </div>`;

                perpList.forEach(function(p) {
                    html += `
                    <div class="p-3 mb-2 rounded sr-perp-card" id="sr-perp-card-${p.id}"
                        style="background:#fffbeb; border:1.5px solid #fcd34d;">

                        {{-- Info perpanjangan --}}
                        <div class="row g-2 mb-2" style="font-size:.82rem;">
                            <div class="col-md-4">
                                <span class="text-muted d-block"
                                    style="font-size:.7rem;font-weight:600;
                                        text-transform:uppercase;letter-spacing:.04em;">
                                    Alasan Pengajuan
                                </span>
                                <span class="fw-semibold text-dark">${p.alasan_perpanjangan || '-'}</span>
                            </div>
                            <div class="col-md-3">
                                <span class="text-muted d-block"
                                    style="font-size:.7rem;font-weight:600;
                                        text-transform:uppercase;letter-spacing:.04em;">
                                    Tgl Kembali Lama
                                </span>
                                <span class="fw-semibold"
                                    style="text-decoration:line-through;color:#9ca3af;">
                                    ${p.tanggal_kembali_lama || '-'}
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span class="text-muted d-block"
                                    style="font-size:.7rem;font-weight:600;
                                        text-transform:uppercase;letter-spacing:.04em;">
                                    Tgl Kembali Baru (Diminta)
                                </span>
                                <strong style="color:#b45309;">
                                    ${p.tanggal_kembali_baru || '-'}
                                </strong>
                            </div>
                            <div class="col-md-2">
                                <span class="text-muted d-block"
                                    style="font-size:.7rem;font-weight:600;
                                        text-transform:uppercase;letter-spacing:.04em;">
                                    Diajukan
                                </span>
                                <span class="text-muted" style="font-size:.75rem;">
                                    ${p.created_at || '-'}
                                </span>
                            </div>
                        </div>

                        {{-- Form approve/reject --}}
                        <div class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label style="font-size:.78rem;font-weight:600;
                                            display:block;margin-bottom:3px;">
                                    Tgl Kembali Disetujui
                                    <span class="text-danger">*</span>
                                    <span class="text-muted fw-normal"
                                        style="font-size:.7rem;">(Admin bisa ubah)</span>
                                </label>
                                <input type="date"
                                    class="form-control form-control-sm sr-perp-tgl-input"
                                    id="sr-perp-tgl-${p.id}"
                                    value="${p.tanggal_kembali_baru_ymd || ''}"
                                    min="{{ now()->format('Y-m-d') }}"
                                    style="border-color:#f59e0b;">
                            </div>
                            <div class="col-md-5">
                                <label style="font-size:.78rem;font-weight:600;
                                            display:block;margin-bottom:3px;">
                                    Catatan Admin
                                </label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="sr-perp-catatan-${p.id}"
                                    placeholder="Catatan (opsional)..."
                                    style="border-color:#f59e0b;">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button"
                                    class="btn btn-success btn-sm mb-0 flex-fill sr-perp-btn-approve"
                                    data-perp-id="${p.id_encrypt}"
                                    data-tgl-id="sr-perp-tgl-${p.id}"
                                    data-catatan-id="sr-perp-catatan-${p.id}"
                                    data-card-id="sr-perp-card-${p.id}"
                                    data-url="{{ url($url_menu . '/perpanjangan') }}/${p.id_encrypt}/approve">
                                    <i class="fas fa-check me-1"></i> Approve
                                </button>
                                <button type="button"
                                    class="btn btn-danger btn-sm mb-0 flex-fill sr-perp-btn-reject"
                                    data-perp-id="${p.id_encrypt}"
                                    data-card-id="sr-perp-card-${p.id}"
                                    data-url="{{ url($url_menu . '/perpanjangan') }}/${p.id_encrypt}/reject">
                                    <i class="fas fa-times me-1"></i> Reject
                                </button>
                            </div>
                        </div>
                    </div>`;
                });

                html += `</div>`;
                return html;
            }

            function renderBarangPendukung(assetId, kondisiAwal, kondisiKembali, isOpsional = false) {
    if (!kondisiAwal || kondisiAwal.length === 0) return '';

    const fieldPrefix = isOpsional ? `opsional_barang_pendukung` : `barang_pendukung`;
    let html = '<div class="mt-3 pt-2" style="border-top:1px dashed #f59e0b;">';
    html += '<div class="text-muted small fw-semibold mb-2"><i class="fas fa-boxes me-1" style="color:#d97706;"></i>' +
        (isOpsional ? 'Barang Pendukung Opsional' : 'Barang Pendukung') + '</div>';

    kondisiAwal.forEach((bpAwal, bpAwalIdx) => {
        let bpKembali = kondisiKembali.find(bp =>
            bp.nama_barang_pendukung?.toLowerCase().trim()
            === bpAwal.nama_barang_pendukung?.toLowerCase().trim()
        );
        if (!bpKembali && kondisiKembali[bpAwalIdx]) {
            bpKembali = kondisiKembali[bpAwalIdx];
        }

        const fp = `${fieldPrefix}[${bpAwal.id}]`;
        const isApproved = bpKembali?.status_barang_pendukung === 'approve';
        const isRejected = bpKembali?.status_barang_pendukung === 'reject';
        const wrapperBg     = isApproved ? '#f0fdf4' : (isRejected ? '#fee2e2' : '#fffbeb');
        const wrapperBorder = isApproved ? '#10b981' : (isRejected ? '#ef4444' : '#f59e0b');
        const labelColor    = isApproved ? '#059669' : (isRejected ? '#991b1b' : '#d97706');
        const inputBg       = isApproved ? '#f0fdf4' : '#fff';
        const inputBorder   = isApproved ? '#6ee7b7' : '#dee2e6';
        const bpLabel       = isOpsional ? 'Barang Pendukung Opsional' : 'Barang Pendukung';
        const awalColor     = getKondisiColor(bpAwal.kondisi_barang_pendukung || '');

        if (isApproved && bpKembali) {
            // ── APPROVED: tampilkan perbandingan readonly ──────────────────────
            const kembaliColor = getKondisiColor(bpKembali.kondisi_barang_pendukung || '');
            html += `
<div class="return-bp-row p-2 mb-2 rounded" style="background:${wrapperBg}; border:1.5px solid ${wrapperBorder};">
    <div class="mb-2 d-flex align-items-center gap-2" style="color:${labelColor}; font-size:.85rem; font-weight:600;">
        <i class="fas fa-check-circle"></i> ${bpLabel} di-Approve
    </div>
    <input type="hidden" name="${fp}[bp_id]" value="${bpAwal.id}">
    <input type="hidden" name="${fp}[kondisi_barang_pendukung]" value="${bpKembali.kondisi_barang_pendukung}">
    <input type="hidden" name="${fp}[status_barang_pendukung]" value="${bpKembali.status_barang_pendukung}">
    <input type="hidden" name="${fp}[catatan]" value="${bpKembali.catatan || ''}">
    <div class="row g-2">
        <div class="col-md-6">
            <div class="d-flex align-items-start gap-2 p-2 rounded" style="background:${awalColor.bg}; border:1px dashed ${awalColor.border};">
                <i class="fas fa-arrow-right mt-1" style="font-size:.8rem; color:${awalColor.text};"></i>
                <div style="font-size:.75rem; line-height:1.5;">
                    <span class="d-block fw-semibold text-muted" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">Kondisi Awal (Saat Dipinjam)</span>
                    <span class="fw-bold" style="color:${awalColor.text};">${(bpAwal.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}</span>
                    <span class="text-muted"> — ${bpAwal.nama_barang_pendukung || '-'}</span>
                    ${bpAwal.catatan ? `<span class="d-block text-muted fst-italic" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>${bpAwal.catatan}</span>` : ''}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-start gap-2 p-2 rounded" style="background:${kembaliColor.bg}; border:1px dashed ${kembaliColor.border};">
                <i class="fas fa-undo-alt mt-1" style="font-size:.8rem; color:${kembaliColor.text};"></i>
                <div style="font-size:.75rem; line-height:1.5;">
                    <span class="d-block fw-semibold text-muted" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">Kondisi Kembali (Dicek Admin)</span>
                    <span class="fw-bold" style="color:${kembaliColor.text};">${(bpKembali.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}</span>
                    ${bpKembali.catatan ? `<span class="d-block text-muted fst-italic" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>${bpKembali.catatan}</span>` : ''}
                </div>
            </div>
        </div>
    </div>
</div>`;

        } else {
            // ── BELUM DICEK atau REJECTED: tampilkan form editable ───────────
            const statusIcon  = isRejected ? 'fa-times-circle' : 'fa-undo-alt';
            const statusLabel = isRejected ? `${bpLabel} di-Reject` : `Pengecekan Return ${bpLabel}`;
            const badgeBg     = isRejected ? '#ef4444' : '#f59e0b';
            const badgeText   = isRejected ? 'Bisa diisi ulang' : 'Perlu diisi';

            // Blok kondisi kembali sebelumnya (hanya muncul jika rejected)
            const prevKembaliBlock = (isRejected && bpKembali) ? (() => {
                const kc = getKondisiColor(bpKembali.kondisi_barang_pendukung || '');
                return `<div class="p-2 mb-2 rounded" style="background:#fee2e2; border:1px dashed #fca5a5;">
                    <div class="text-muted small fw-semibold mb-1" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">
                        <i class="fas fa-times-circle text-danger me-1"></i>Kondisi Kembali Sebelumnya (Reject)
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas ${kc.icon}" style="color:${kc.text};"></i>
                        <span class="fw-bold" style="color:${kc.text}; font-size:.82rem;">
                            ${(bpKembali.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}
                        </span>
                    </div>
                    ${bpKembali.catatan ? `<div class="text-muted fst-italic mt-1" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>Catatan: ${bpKembali.catatan}</div>` : ''}
                </div>`;
            })() : '';

            // Perbandingan kondisi awal vs kembali (untuk rejected)
            const compareBlock = (isRejected && bpKembali) ? (() => {
                const kc = getKondisiColor(bpKembali.kondisi_barang_pendukung || '');
                return `<div class="row g-2 mb-2">
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-2 p-2 rounded" style="background:${awalColor.bg}; border:1px dashed ${awalColor.border};">
                            <i class="fas fa-arrow-right mt-1" style="font-size:.8rem; color:${awalColor.text};"></i>
                            <div style="font-size:.75rem; line-height:1.5;">
                                <span class="d-block fw-semibold text-muted" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">Kondisi Awal Saat Dipinjam</span>
                                <span class="fw-bold" style="color:${awalColor.text};">${(bpAwal.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}</span>
                                ${bpAwal.catatan ? `<span class="d-block text-muted fst-italic" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>${bpAwal.catatan}</span>` : ''}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-2 p-2 rounded" style="background:${kc.bg}; border:1px dashed ${kc.border};">
                            <i class="fas fa-undo-alt mt-1" style="font-size:.8rem; color:${kc.text};"></i>
                            <div style="font-size:.75rem; line-height:1.5;">
                                <span class="d-block fw-semibold text-muted" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">Kondisi Kembali (Dicek Admin)</span>
                                <span class="fw-bold" style="color:${kc.text};">${(bpKembali.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}</span>
                                ${bpKembali.catatan ? `<span class="d-block text-muted fst-italic" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>${bpKembali.catatan}</span>` : ''}
                            </div>
                        </div>
                    </div>
                </div>`;
            })() : `<div class="mb-2 p-2 rounded" style="background:#fff; border:1px solid #e4e9f0;">
                <div class="fw-semibold mb-1" style="font-size:.8rem; color:#374151;">
                    <i class="fas fa-box me-1 text-muted"></i>${bpAwal.nama_barang_pendukung || '-'}
                </div>
                <div class="p-2 rounded" style="background:${awalColor.bg}; border:1px dashed ${awalColor.border};">
                    <div class="text-muted small fw-semibold mb-1" style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">
                        <i class="fas fa-arrow-right me-1"></i>Kondisi Awal (Saat Dipinjam)
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas ${awalColor.icon}" style="color:${awalColor.text};"></i>
                        <span class="fw-bold" style="color:${awalColor.text}; font-size:.82rem;">
                            ${(bpAwal.kondisi_barang_pendukung || 'N/A').toUpperCase().replace(/_/g,' ')}
                        </span>
                    </div>
                    ${bpAwal.catatan ? `<div class="text-muted fst-italic mt-1" style="font-size:.72rem;"><i class="fas fa-sticky-note me-1"></i>${bpAwal.catatan}</div>` : ''}
                </div>
            </div>`;

            html += `
<div class="return-bp-row p-2 mb-2 rounded" style="background:${wrapperBg}; border:1.5px solid ${wrapperBorder};">
    <div class="mb-2 d-flex align-items-center gap-2" style="color:${labelColor}; font-size:.85rem; font-weight:600;">
        <i class="fas ${statusIcon}"></i> ${statusLabel}
        <span class="badge ms-auto" style="background:${badgeBg}; color:#fff; font-size:.7rem; font-weight:500;">
            <i class="fas fa-pencil-alt me-1"></i>${badgeText}
        </span>
    </div>
    <input type="hidden" name="${fp}[bp_id]" value="${bpAwal.id}">
    ${compareBlock}
    <div class="row g-2 align-items-end">
        <div class="col-md-3">
            <label class="prb-form-label text-muted">Nama Barang Pendukung</label>
            <input type="text" class="form-control form-control-sm" value="${bpAwal.nama_barang_pendukung || '-'}" readonly
                style="background:#f9fafb; border-color:${inputBorder};">
        </div>
        <div class="col-md-2">
            <label class="prb-form-label">Kondisi <span class="text-danger">*</span></label>
            <select class="form-select form-select-sm return-input" name="${fp}[kondisi_barang_pendukung]" required
                style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                <option value="">-- Pilih --</option>
                <option value="baik"         ${bpKembali?.kondisi_barang_pendukung === 'baik'         || (!bpKembali && bpAwal.kondisi_barang_pendukung === 'baik')         ? 'selected' : ''}>Baik</option>
                <option value="rusak_ringan" ${bpKembali?.kondisi_barang_pendukung === 'rusak_ringan' || (!bpKembali && bpAwal.kondisi_barang_pendukung === 'rusak_ringan') ? 'selected' : ''}>Rusak Ringan</option>
                <option value="rusak_berat"  ${bpKembali?.kondisi_barang_pendukung === 'rusak_berat'  || (!bpKembali && bpAwal.kondisi_barang_pendukung === 'rusak_berat')  ? 'selected' : ''}>Rusak Berat</option>
                <option value="hilang"       ${bpKembali?.kondisi_barang_pendukung === 'hilang'       || (!bpKembali && bpAwal.kondisi_barang_pendukung === 'hilang')       ? 'selected' : ''}>Hilang</option>
                <option value="tidak_ada"    ${bpKembali?.kondisi_barang_pendukung === 'tidak_ada'    || (!bpKembali && bpAwal.kondisi_barang_pendukung === 'tidak_ada')    ? 'selected' : ''}>Tidak Ada</option>
            </select>
        </div>
        <div class="col-md-2">
            <label class="prb-form-label">Status <span class="text-danger">*</span></label>
            <select class="form-select form-select-sm return-input" name="${fp}[status_barang_pendukung]" required
                style="background:#fff; border-color:#f59e0b; border-width:1.5px;">
                <option value="">-- Pilih --</option>
                <option value="approve" ${bpKembali?.status_barang_pendukung === 'approve' ? 'selected' : ''}>Approve</option>
                <option value="reject"  ${bpKembali?.status_barang_pendukung === 'reject'  ? 'selected' : ''}>Reject</option>
                <option value="borrowed"${bpKembali?.status_barang_pendukung === 'borrowed'? 'selected' : ''}>Borrowed</option>
            </select>
        </div>
        <div class="col-md-5">
            <label class="prb-form-label">Catatan</label>
            <input type="text" class="form-control form-control-sm return-input" name="${fp}[catatan]"
                placeholder="Catatan (opsional)..." value="${bpKembali?.catatan || ''}"
                style="background:#fff; border-color:#dee2e6;">
        </div>
    </div>
</div>`;
        }
    });

    html += '</div>';
    return html;
}

            function getKondisiColor(kondisi) {
                return {
                    'baik': {
                        bg: '#d1fae5',
                        text: '#10b981',
                        border: '#6ee7b7',
                        icon: 'fa-check-circle'
                    },
                    'rusak_ringan': {
                        bg: '#fef3c7',
                        text: '#f59e0b',
                        border: '#fcd34d',
                        icon: 'fa-exclamation-triangle'
                    },
                    'rusak_berat': {
                        bg: '#fee2e2',
                        text: '#ef4444',
                        border: '#fca5a5',
                        icon: 'fa-times-circle'
                    },
                    'hilang': {
                        bg: '#fee2e2',
                        text: '#ef4444',
                        border: '#fca5a5',
                        icon: 'fa-question-circle'
                    },
                    'tidak_ada': {
                        bg: '#f1f5f9',
                        text: '#6b7280',
                        border: '#cbd5e1',
                        icon: 'fa-minus-circle'
                    }
                } [kondisi] || {
                    bg: '#f1f5f9',
                    text: '#6b7280',
                    border: '#cbd5e1',
                    icon: 'fa-circle'
                };
            }

            function showSubmitReturnError(message) {
                $('#sr-loading').addClass('d-none');
                $('#sr-error').removeClass('d-none').text(message);
            }

            window.submitModalReturn = function() {
                const form = document.getElementById('form-submit-return');
                const idEncrypt = document.getElementById('sr-id-encrypt').value;
                if (!idEncrypt) {
                    alert('ID Peminjaman tidak ditemukan!');
                    return;
                }

                // [TAMBAH] Cek apakah masih ada perpanjangan pending yang belum diproses
                const pendingCards = $('#sr-form-content .sr-perp-card').filter(function() {
                    // Card yang masih pending: tombol approve/reject masih enabled
                    return $(this).find('.sr-perp-btn-approve:not(:disabled)').length > 0
                        || $(this).find('.sr-perp-btn-reject:not(:disabled)').length > 0;
                });

                if (pendingCards.length > 0) {
                    Swal.fire({
                        title: 'Ada Perpanjangan Pending!',
                        html: `Terdapat <strong>${pendingCards.length}</strong> perpanjangan yang belum diproses.<br>
                            <small class="text-muted">
                                Harap <strong>approve</strong> atau <strong>reject</strong>
                                semua perpanjangan terlebih dahulu sebelum submit return.
                            </small>`,
                        icon: 'warning',
                        confirmButtonColor: '#f59e0b',
                        confirmButtonText: '<i class="fas fa-arrow-down me-1"></i> Lihat Perpanjangan',
                    }).then(() => {
                        // Scroll ke perpanjangan pertama yang masih pending
                        const firstPending = pendingCards.first();
                        if (firstPending.length) {
                            const modalBody = document.querySelector('#modalSubmitReturn .modal-body');
                            if (modalBody) {
                                modalBody.scrollTo({
                                    top: firstPending[0].offsetTop - 20,
                                    behavior: 'smooth'
                                });
                            }
                            // Highlight card
                            firstPending.css({
                                'box-shadow': '0 0 0 3px #f59e0b',
                                'transition': 'box-shadow 0.3s'
                            });
                            setTimeout(() => {
                                firstPending.css('box-shadow', '');
                            }, 2000);
                        }
                    });
                    return; // [PENTING] stop di sini
                }

                Swal.fire({
                    title: 'Konfirmasi Submit Return',
                    text: 'Kirim data pengecekan return barang?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Submit',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#f59e0b',
                    cancelButtonColor: '#6c757d'
                }).then(r => {
                    if (r.isConfirmed) {
                        form.action = '{{ url($url_menu . '/complete_admin') }}/' + idEncrypt;
                        form.submit();
                    }
                });
            };


            function getNowLocalDatetimeValue() {
                const now = new Date();
                const pad = n => String(n).padStart(2, '0');
                return `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
            }

            function getNowLocalDateValue() {
                const now = new Date();
                const pad = n => String(n).padStart(2, '0');
                return `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}`;
            }

            // Init semua tabel (termasuk tab-tab jika ada)
            const dtConfig = {
                order: [],
                columnDefs: [{ orderable: false, targets: [0, 5, 6] }],
                pageLength: 10,
                autoWidth: false,
                language: {
                    emptyTable: "Tidak ada data yang tersedia pada tabel ini",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(difilter dari _MAX_ total data)",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    loadingRecords: "Memuat...",
                    processing: "Memproses...",
                    search: "Cari :",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        first: "Pertama", last: "Terakhir",
                        next: "Selanjutnya", previous: "Sebelumnya"
                    }
                }
            };

            [
                '#list_{{ $dmenu ?? 'peminjaman' }}',
                '#list_{{ $dmenu ?? 'peminjaman' }}_user',
                '#list_{{ $dmenu ?? 'peminjaman' }}_spv',
                '#list_{{ $dmenu ?? 'peminjaman' }}_saya',
            ].forEach(function(tId) {
                if ($(tId).length) {
                    if ($.fn.DataTable.isDataTable(tId)) $(tId).DataTable().destroy();
                    $(tId).DataTable(dtConfig);
                }
            });

            // Re-init saat tab diklik (pane tersembunyi perlu adjust)
            $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                const target = $(e.target).data('bs-target');
                $(target).find('table.display').each(function() {
                    const tId = '#' + $(this).attr('id');
                    if ($.fn.DataTable.isDataTable(tId)) {
                        $(tId).DataTable().columns.adjust().draw();
                    } else {
                        $(tId).DataTable(dtConfig);
                    }
                });
            });

            window.confirmEntry = function(fId, isHead) {
                const msg = isHead
                    ? 'Pengajuan ini akan langsung diteruskan ke Admin (tanpa perlu approval SPV).'
                    : 'Apakah anda yakin ingin mengajukan peminjaman barang ini ke SPV Departemen?';
                const btnText = isHead ? 'Ya, Kirim ke Admin' : 'Proposed';
                Swal.fire({
                        title: 'Konfirmasi Send',
                        text: msg,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: btnText,
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284'
                    })
                    .then(r => {
                        if (r.isConfirmed) document.getElementById(fId).submit();
                    });
            };
            window.confirmDelete = function(fId, nomor) {
                Swal.fire({
                        title: 'Konfirmasi Delete',
                        text: `Apakah Anda yakin ingin menghapus peminjaman ${nomor}?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Delete',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) document.getElementById(fId).submit();
                    });
            };
            window.confirmBorrowed = function(fId) {
                Swal.fire({
                        title: 'Konfirmasi Borrowed',
                        text: 'Tandai peminjaman ini, Bahwa Barang Sudah Diambil User',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Borrowed',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#19a974',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) document.getElementById(fId).submit();
                    });
            };
            window.confirmComplete = function(fId) {
                Swal.fire({
                        title: 'Konfirmasi Complete',
                        text: 'Tandai peminjaman ini sebagai selesai? Stock barang akan dikurangi!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Complete',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#19a974',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) document.getElementById(fId).submit();
                    });
            };
            window.confirmUncomplete = function(fId) {
                Swal.fire({
                        title: 'Konfirmasi Unprogress',
                        text: 'Batalkan proses dan memilih kembali barang peminjaman yang telah dipilih?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Unprogress',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#f0ad4e',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) document.getElementById(fId).submit();
                    });
            };

            function esc(str) {
                return String(str ?? '-').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;');
            }

            function renderReadonly(cfg, items) {
                const html = !items.length ?
                    '<tr><td colspan="5" class="text-center text-muted">Tidak ada item.</td></tr>' :
                    items.map(it => `<tr>
                        <td><input type="text" class="form-control" value="${esc(it.nama_barang)}"     readonly></td>
                        <td><input type="text" class="form-control" value="${esc(it.penerima)}"        readonly></td>
                        <td><input type="text" class="form-control" value="${esc(it.keterangan)}"      readonly></td>
                        <td><input type="text" class="form-control" value="${esc(it.qty_diminta)}"     readonly></td>
                        <td><input type="text" class="form-control" value="${esc(it.tanggal_pinjam)}"  readonly></td>
                        <td><input type="text" class="form-control" value="${esc(it.tanggal_kembali)}" readonly></td>
                    </tr>`).join('');
                $(`#${cfg.bodyId}`).html(html);
                $(`#${cfg.loadId}`).addClass('d-none');
                $(`#${cfg.wrapId}`).removeClass('d-none');
            }

            function fetchItems(rawId, onSuccess, onError) {
                $.ajax({
                    url: '{{ url($url_menu) }}/get-detail/' + rawId,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: res => onSuccess(res.items || []),
                    error: () => onError()
                });
            }

            function fillInfo(prefix, data) {
                $(`#${prefix}-id`).val(data.nomor);
                // maa-tanggal adalah input type="text" → tampilkan d/m/Y H:i
                // mha/mhr-tanggal adalah input type="datetime-local" → butuh Y-m-dTH:i
                const $tglEl = $(`#${prefix}-tanggal`);
                if ($tglEl.attr('type') === 'datetime-local') {
                    $tglEl.val(data.tanggal); // sudah format Y-m-dTH:i
                } else {
                    // Convert Y-m-dTH:i atau Y-m-d H:i:s -> d/m/Y
                    const raw = data.tanggal || '';
                    const datePart = raw.split('T')[0].split(' ')[0];

                    if (datePart) {
                        const ymd = datePart.split('-');
                        $tglEl.val(`${ymd[2]}/${ymd[1]}/${ymd[0]}`);
                    } else {
                        $tglEl.val('');
                    }
                }
                $(`#${prefix}-departemen`).val(data.departemen);
                $(`#${prefix}-subtitle`).text(`ID: ${data.nomor} | ${data.departemen}`);
            }

            function resetModal(cfg) {
                $(`#${cfg.loadId}`).removeClass('d-none');
                $(`#${cfg.wrapId}`).addClass('d-none');
                $(`#${cfg.errId}`).addClass('d-none');
                $(`#${cfg.bodyId}`).empty();
            }

            let headApproveEncId = null;

            window.openModalHeadApprove = function(data) {
                headApproveEncId = data.encId;
                fillInfo('mha', data);
                resetModal({
                    loadId: 'mha-loading',
                    wrapId: 'mha-table-wrap',
                    errId: 'mha-error',
                    bodyId: 'mha-items-body'
                });
                new bootstrap.Modal(document.getElementById('modalHeadApprove')).show();
                fetchItems(data.id,
                    items => renderReadonly({
                        bodyId: 'mha-items-body',
                        loadId: 'mha-loading',
                        wrapId: 'mha-table-wrap'
                    }, items),
                    () => {
                        $('#mha-loading').addClass('d-none');
                        $('#mha-error').removeClass('d-none');
                    }
                );
            };

            window.submitHeadApprove = function() {
                Swal.fire({
                        title: 'Konfirmasi Approve',
                        text: 'Approve pengajuan ini? Pengajuan akan diajukan ke Admin',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Approve',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#19a974',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) {
                            const form = document.getElementById('form-head-approve');
                            form.action = '{{ url($url_menu) }}/approve/' + headApproveEncId;
                            form.submit();
                        }
                    });
            };

            let headRejectEncId = null;

            window.openModalHeadReject = function(data) {
                headRejectEncId = data.encId;
                fillInfo('mhr', data);
                $('#mhr-catatan').val('');
                resetModal({
                    loadId: 'mhr-loading',
                    wrapId: 'mhr-table-wrap',
                    errId: 'mhr-error',
                    bodyId: 'mhr-items-body'
                });
                new bootstrap.Modal(document.getElementById('modalHeadReject')).show();
                fetchItems(data.id,
                    items => renderReadonly({
                        bodyId: 'mhr-items-body',
                        loadId: 'mhr-loading',
                        wrapId: 'mhr-table-wrap'
                    }, items),
                    () => {
                        $('#mhr-loading').addClass('d-none');
                        $('#mhr-error').removeClass('d-none');
                    }
                );
            };

            window.submitHeadReject = function() {
                const catatan = $('#mhr-catatan').val().trim();
                if (!catatan) {
                    Swal.fire({
                        title: 'Perhatian',
                        text: 'Alasan reject harus diisi!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
                Swal.fire({
                        title: 'Konfirmasi Reject',
                        text: 'Peminjaman ini akan ditolak. Pengaju akan mendapat catatan alasan penolakan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Reject',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d'
                    })
                    .then(r => {
                        if (r.isConfirmed) {
                            $('#mhr-hidden-catatan').val(catatan);
                            const form = document.getElementById('form-head-reject');
                            form.action = '{{ url($url_menu) }}/reject/' + headRejectEncId;
                            form.submit();
                        }
                    });
            };

            let adminRejectEncId = null;
            window.openModalAdminReject = function(data) {
                adminRejectEncId = data.encId;
                fillInfo('mar', data);
                $('#mar-catatan').val('');
                resetModal({
                    loadId: 'mar-loading',
                    wrapId: 'mar-table-wrap',
                    errId: 'mar-error',
                    bodyId: 'mar-items-body'
                });
                new bootstrap.Modal(document.getElementById('modalAdminReject')).show();
                fetchItems(data.id,
                    items => renderReadonly({
                        bodyId: 'mar-items-body',
                        loadId: 'mar-loading',
                        wrapId: 'mar-table-wrap'
                    }, items),
                    () => {
                        $('#mar-loading').addClass('d-none');
                        $('#mar-error').removeClass('d-none');
                    }
                );
            };

            @if ($errors->any())
                Swal.fire({
                    title: 'Validasi Gagal',
                    html: '<ul style="text-align:left; padding-left:1.2em; margin:0;">' +
                        `{!! collect($errors->all())->map(fn($e) => '<li class="mb-1">' . e($e) . '</li>')->implode('') !!}` +
                        '</ul>',
                    icon: 'warning',
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK',
                    timer: 10000,
                    timerProgressBar: true,
                    showCloseButton: true,
                });
            @endif

            // Generate link peminjaman
            window.generateLinkPeminjaman = function () {
                const linkUrl = '{{ url('/peminjaman-barang/link') }}';

                Swal.fire({
                    icon: 'success',
                    title: 'Link Peminjaman Barang Siap!',
                    html: `
                        <div class="input-group my-3">
                            <input type="text" class="form-control" id="peminjaman-link-input" value="${linkUrl}" readonly style="height: 38px;">
                            <button class="btn btn-teal mb-0" style="padding: 0.5rem 1rem;" onclick="copyLinkPeminjaman()">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>
                        <small class="text-muted">Bagikan link ini kepada user. Setiap submit akan membuat peminjaman baru secara otomatis.</small>
                    `,
                    showConfirmButton: false,
                    showCloseButton: true
                });
            };

            window.copyLinkPeminjaman = function () {
                const linkInput = document.getElementById('peminjaman-link-input');
                linkInput.select();
                linkInput.setSelectionRange(0, 99999);

                navigator.clipboard.writeText(linkInput.value).then(function() {
                    Swal.fire({
                        icon: 'success',
                        title: 'Copied!',
                        text: 'Link berhasil disalin ke clipboard',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }, function(err) {
                    console.error('Copy failed:', err);
                    alert('Gagal copy link. Silakan copy manual.');
                });
            };

        });
    </script>
@endpush