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

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

    @php
        $roleViewer  = strtolower(auth()->user()->idroles ?? '');
        $rolesViewer = array_filter(array_map('trim', explode(',', $roleViewer)));
        if (empty($rolesViewer)) {
            $rolesViewer = ['guests'];
        }

        $isViewerHead       = in_array('head.s', $rolesViewer);
        $isViewerAdmin      = in_array('itstaf', $rolesViewer);
        $isViewerSuperAdmin = in_array('admins', $rolesViewer);
        $isViewerGuest      = in_array('guests', $rolesViewer);

        $st = strtolower($peminjaman->status ?? '');
        $isEntry = $st === 'entry';
        $isProposed = $st === 'proposed';
        $isApprove = $st === 'approve';
        $isOnProgress = in_array($st, ['on_progress', 'onprogress']);
        $isBorrowed = $st === 'borrowed';
        $isCompleted = $st === 'completed';
        $isRejected = $st === 'rejected';
        $isRevisi = $st === 'revisi';

        $canApproveHead = ($isViewerHead || $isViewerSuperAdmin) && $isProposed;
        $canApproveAdmin = ($isViewerAdmin || $isViewerSuperAdmin) && $isApprove;

        $canReturn = ($isViewerAdmin || $isViewerSuperAdmin) && $isBorrowed;

        $showHead = $isApprove || $isOnProgress || $isBorrowed || $isCompleted || $isRejected;
        $showIT = $isOnProgress || $isBorrowed || $isCompleted || $isRejected;

        $statusLabel = strtoupper(str_replace('_', ' ', $peminjaman->status ?? '-'));
        $statusColor = '#6b7280';
        $statusIcon = 'fa-circle';
        if ($isEntry) {
            $statusColor = '#6b7280';
            $statusIcon = 'fa-pen';
        } elseif ($isProposed) {
            $statusColor = '#f59e0b';
            $statusIcon = 'fa-clock';
        } elseif ($isApprove) {
            $statusColor = '#3b82f6';
            $statusIcon = 'fa-thumbs-up';
        } elseif ($isOnProgress) {
            $statusColor = '#06b6d4';
            $statusIcon = 'fa-spinner';
        } elseif ($isBorrowed) {
            $statusColor = '#a21caf';
            $statusIcon = 'fa-hand-holding';
        } elseif ($isCompleted) {
            $statusColor = '#10b981';
            $statusIcon = 'fa-check-circle';
        } elseif ($isRejected) {
            $statusColor = '#ef4444';
            $statusIcon = 'fa-times-circle';
        } elseif ($isRevisi) {
            $statusColor = '#ef4444';
            $statusIcon = 'fa-redo';
        }
    @endphp



    <div class="prb-topbar mx-4 mb-3 mt-3">
        <div class="prb-topbar-left">
              
            <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
            </button>

            @if ($canApproveHead)
                <form action="{{ url($url_menu . '/approve/' . encrypt((string) $peminjaman->id)) }}" method="POST"
                    id="form-approve-head" class="mb-0">
                    @csrf
                    <button type="button" class="prb-btn prb-btn-approve" onclick="confirmApproveHead()">
                        <i class="fas fa-check"></i>
                        <span>Approve</span>
                    </button>
                </form>

                <button type="button" class="prb-btn prb-btn-reject" onclick="showRejectModal()">
                    <i class="fas fa-times"></i>
                    <span>Reject</span>
                </button>
            @endif

            @if ($canReturn)
                <button type="button" class="prb-btn prb-btn-return" onclick="submitReturn()">
                    <i class="fas fa-undo-alt"></i>
                    <span>Submit Return</span>
                </button>
            @endif
        </div>

        <div class="prb-status-pill" style="--sc: {{ $statusColor }}">
            <i class="fas {{ $statusIcon }}"></i>
            {{ $statusLabel }}
        </div>
    </div>

    @if ($canApproveAdmin)
        <form action="{{ url($url_menu . '/approve_admin/' . $idencrypt) }}" method="POST" id="form-approve-admin">
            @csrf
    @endif

    @if ($canReturn)
        <form action="{{ route('trpjbr.completeadmin', $idencrypt) }}" method="POST" id="form-return">
            @csrf
    @endif

    <div class="container-fluid py-2 mt-2">

        <div class="row g-3 mb-3">

            <div class="col-12 col-sm-6 col-xl-4">
                <div class="prb-card h-100">
                    <div class="prb-card-label">Informasi Pengajuan</div>

                    <div class="prb-field">
                        <span class="prb-field-key">ID Peminjaman</span>
                        <span class="prb-field-val">{{ $peminjaman->id ?? '-' }}</span>
                    </div>
                    <div class="prb-field">
                        <span class="prb-field-key">Tanggal Pengajuan</span>
                        <span class="prb-field-val">{{ $tanggal_pengajuan ?? '-' }}</span>
                    </div>
                    <div class="prb-field">
                        <span class="prb-field-key">Departemen</span>
                        <span class="prb-field-val">{{ $departemen_nama ?? '-' }}</span>
                    </div>
                    <div class="prb-field">
                        <span class="prb-field-key">Status</span>
                        <span class="prb-field-val">
                            <span class="prb-inline-badge" style="--sc: {{ $statusColor }}">
                                {{ $statusLabel }}
                            </span>
                        </span>
                    </div>

                    @if ($canApproveAdmin || $isViewerSuperAdmin || ($showIT && ($isViewerAdmin || $isViewerHead)))
                        <div class="prb-field">
                            <span class="prb-field-key">User Pengaju</span>
                            <span class="prb-field-val">{{ $user_pengaju_name ?? '-' }}</span>
                        </div>
                    @endif

                    <div class="prb-field">
                        <span class="prb-field-key"><i class="fas fa-network-wired me-1"></i> IP Address</span>
                        <span class="prb-field-val">{{ $submit_ip ?? '-' }}</span>
                    </div>

                    <div class="prb-field">
                        <span class="prb-field-key"><i class="fas fa-laptop me-1"></i> Perangkat</span>
                        <span class="prb-field-val" title="{{ $submit_device ?? '-' }}">{{ $submit_device ?? '-' }}</span>
                    </div>

                    @if (!empty($catatan_head) && !$canApproveAdmin)
                        <div class="mt-2">
                            <span class="prb-field-key d-block mb-1">Catatan SPV</span>
                            <p class="prb-note-text mb-0">{{ $catatan_head }}</p>
                        </div>
                    @endif
                </div>
            </div>

            @if ($canApproveAdmin || $showHead)
                <div class="col-12 col-sm-6 col-xl-4">
                    <div class="prb-card h-100">
                        <div class="prb-card-label">Approval SPV</div>

                        <div class="prb-field">
                            <span class="prb-field-key">Approver</span>
                            <span class="prb-field-val">{{ $approver_head_name ?? 'Pending' }}</span>
                        </div>
                        <div class="prb-field">
                            <span class="prb-field-key">Tgl Approve</span>
                            <span class="prb-field-val">{{ $tanggal_approve_head ?? '-' }}</span>
                        </div>

                        @if ($isViewerSuperAdmin && !$canApproveAdmin)
                            <div class="prb-field">
                                <span class="prb-field-key">User Pengaju</span>
                                <span class="prb-field-val">{{ $user_pengaju_name ?? '-' }}</span>
                            </div>
                        @endif

                        @if (!empty($catatan_head))
                            <div class="mt-2">
                                <span class="prb-field-key d-block mb-1">Catatan</span>
                                <p class="prb-note-text mb-0">{{ $catatan_head }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if ($showIT && !$canApproveAdmin)
                <div class="col-12 col-sm-6 col-xl-4">
                    <div class="prb-card h-100">
                        <div class="prb-card-label">Approval IT</div>

                        <div class="prb-field">
                            <span class="prb-field-key">Approver IT</span>
                            <span class="prb-field-val">{{ $approver_admin_name ?? 'Pending' }}</span>
                        </div>
                        <div class="prb-field">
                            <span class="prb-field-key">Tgl Approve IT</span>
                            <span class="prb-field-val">{{ $tanggal_approve_admin ?? '-' }}</span>
                        </div>

                        @if (!empty($catatan_admin))
                            <div class="mt-2">
                                <span class="prb-field-key d-block mb-1">Catatan Admin IT</span>
                                <p class="prb-note-text mb-0">{{ $catatan_admin }}</p>
                            </div>
                        @endif

                        @if (!empty($catatan_return))
                            <div class="mt-2">
                                <span class="prb-field-key d-block mb-1">Catatan Return</span>
                                <p class="prb-note-text mb-0">{{ $catatan_return }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif



        </div>

        <div class="row g-3">
            <div class="col-12 d-flex flex-column gap-3">
                <div class="prb-card flex-grow-1">
                    <div class="prb-card-label mb-2">Detail Item</div>

                    <div class="table-responsive">
                        <table class="table align-middle table-hover" id="itemsTable">
                            <thead style="background:#0a8f97; color:#fff;">
                                <tr>
                                    <th class="th-action">Action</th>
                                    <th style="min-width: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>
                                    @if ($canApproveAdmin)
                                        <th
                                            style="width:60px; text-align: center;
                                            vertical-align: middle;
                                            white-space: nowrap;">
                                            Stock</th>
                                        <th style="width:130px;">Qty Disetujui</th>
                                        <th style="width:110px;">Tanggal Pinjam</th>
                                        <th style="width:110px;">Tanggal Kembali</th>
                                        <th style="width:140px;">Status</th>
                                    @else
                                        <th style="width:130px;">Qty Disetujui</th>
                                        <th style="width:110px;">Tanggal Pinjam</th>
                                        <th style="width:110px;">Tanggal Kembali</th>
                                        <th style="width:140px;">Status</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @forelse(($items ?? []) as $idx => $it)
                                    @php
                                        $sit = strtolower($it->status_item ?? '');
                                        $itemBadge = 'bg-secondary';
                                        $itemText = strtoupper($it->status_item ?? '-');
                                        if ($sit === 'pending') {
                                            $itemBadge = 'bg-primary';
                                        } elseif (in_array($sit, ['approved', 'approve', 'acc', 'disetujui'])) {
                                            $itemBadge = 'bg-success';
                                        } elseif (in_array($sit, ['reject', 'rejected', 'ditolak'])) {
                                            $itemBadge = 'bg-danger';
                                        }
                                        // ── [TAMBAH] data perpanjangan per item ───────────────────
                                        $latestPerp = isset($perpanjangans[$it->id])
                                            ? $perpanjangans[$it->id]->sortByDesc('created_at')->first()
                                            : null;
                                        $perpStatus     = $latestPerp->status ?? null;
                                        $canAjukanPerp  = ($isViewerGuest || $isViewerHead)
                                                          && ($is_pengaju ?? false)
                                                          && $isBorrowed
                                                          && in_array($sit, ['approved', 'approve']);
                                        $canAdminActPerp= ($isViewerAdmin || $isViewerSuperAdmin)
                                                          && $isBorrowed
                                                          && $perpStatus === 'pending';
                                        $showPerpSection= $isBorrowed
                                                          && ($latestPerp || $canAjukanPerp);
                                        // ──────────────────────────────────────────────────────────
                                        $firstAsset = isset($assets[$it->id]) ? $assets[$it->id]->first() : null;

                                    @endphp

                                    <tr data-item-index="{{ $idx }}"
                                        data-nama-barang="{{ strtolower($it->nama_barang ?? '') }}"
                                        data-tanggal-pinjam="{{ $it->tanggal_pinjam ?? '' }}"
                                        data-tanggal-kembali="{{ $it->tanggal_kembali ?? '' }}">
                                        <td class="td-action">
                                            @if ($canApproveAdmin)
                                                <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>
                                            @else
                                                <button type="button" class="btn btn-secondary mb-0" disabled
                                                    title="Readonly">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            @endif
                                        </td>

                                        <td>
                                            <input type="text" class="form-control"
                                                value="{{ $it->nama_barang ?? '-' }}" readonly>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control"
                                                value="{{ $it->penerima ?? '-' }}" readonly>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control"
                                                value="{{ $it->keterangan ?? '-' }}" readonly>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control"
                                                value="{{ $it->qty_diminta ?? '-' }}" readonly>
                                        </td>

                                        @if ($canApproveAdmin)
                                            <td class="text-center">
                                                <input type="number" class="form-control stock-display mx-auto "
                                                    style="width:50px;"
                                                    data-nama="{{ strtolower($it->nama_barang ?? '') }}"
                                                    value="{{ $it->qty_stock ?? 0 }}" readonly>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control qty-disetujui"
                                                    name="items[{{ $idx }}][qty_disetujui]" value="0"
                                                    min="0" readonly
                                                    data-qty-diminta="{{ $it->qty_diminta ?? 0 }}"
                                                    data-qty-stock="{{ $it->qty_stock ?? 0 }}">
                                            </td>
                                        @else
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $it->qty_disetujui ?? '-' }}" readonly>
                                            </td>
                                        @endif
                                        <td>
                                            @if ($canApproveAdmin)
                                                <input type="date"
                                                    class="form-control item-tgl-pinjam"
                                                    name="items[{{ $idx }}][tanggal_pinjam]"
                                                    value="{{ !empty($it->tanggal_pinjam) ? \Carbon\Carbon::createFromFormat('d/m/Y', $it->tanggal_pinjam)->format('Y-m-d') : '' }}"
                                                    min="{{ \Carbon\Carbon::parse($peminjaman->tanggal_pengajuan)->format('Y-m-d') }}"
                                                    data-idx="{{ $idx }}">
                                            @else
                                                <input type="text" class="form-control"
                                                    value="{{ $it->tanggal_pinjam ?? '-' }}" readonly>
                                                @if(empty($it->tanggal_pinjam))
                                                    <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>
                                                            Jangka Panjang
                                                        </span>
                                                    </div>
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            @if ($canApproveAdmin)
                                                <input type="date"
                                                    class="form-control item-tgl-kembali"
                                                    name="items[{{ $idx }}][tanggal_kembali]"
                                                    value="{{ !empty($it->tanggal_kembali) ? \Carbon\Carbon::createFromFormat('d/m/Y', $it->tanggal_kembali)->format('Y-m-d') : '' }}"
                                                    min="{{ !empty($it->tanggal_pinjam) ? \Carbon\Carbon::createFromFormat('d/m/Y', $it->tanggal_pinjam)->format('Y-m-d') : \Carbon\Carbon::parse($peminjaman->tanggal_pengajuan)->format('Y-m-d') }}"
                                                    data-idx="{{ $idx }}">
                                                @if(empty($it->tanggal_kembali))
                                                    <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>
                                                            Jangka Panjang
                                                        </span>
                                                    </div>
                                                @endif
                                            @elseif ($canReturn)
                                                <!-- Tanggal kembali editable saat submit return  -->
                                                @php
                                                    $tglKembaliVal = !empty($it->tanggal_kembali)
                                                        ? \Carbon\Carbon::createFromFormat('d/m/Y', $it->tanggal_kembali)->format('Y-m-d')
                                                        : '';
                                                @endphp
                                                <input type="date"
                                                    class="form-control sr-tgl-kembali-input"
                                                    name="tgl_kembali_aktual[{{ $it->id }}]"
                                                    value="{{ old('tgl_kembali_aktual.' . $it->id, $tglKembaliVal) }}"
                                                    style="border-color:#f97316; background:#fff7ed; min-width:130px;"
                                                    required>
                                                @if(empty($it->tanggal_kembali))
                                                    <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>
                                                @endif
                                                @error('tgl_kembali_aktual.' . $it->id)
                                                    <div class="prb-field-error mt-1">{{ $message }}</div>
                                                @enderror
                                            @else
                                                <input type="text" class="form-control"
                                                    value="{{ $it->tanggal_kembali ?? '-' }}" readonly>
                                                @if(empty($it->tanggal_kembali))
                                                    <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>
                                                            Jangka Panjang
                                                        </span>
                                                    </div>
                                                @endif
                                            @endif
                                        </td>

                                        <td class="text-center">
                                            <span class="badge {{ $itemBadge }} px-3 py-2" style="min-width:120px;">
                                                {{ $itemText }}
                                            </span>
                                            {{-- ── [TAMBAH] Badge status perpanjangan di kolom status ── --}}
                                            @if ($isBorrowed && $latestPerp)
                                                <div class="mt-1">
                                                    @if ($perpStatus === 'pending')
                                                        <span style="display:inline-flex;align-items:center;gap:3px;
                                                                     padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                     font-weight:700;background:#fef9c3;color:#854d0e;
                                                                     border:1px solid #fde047;
                                                                     animation:perp-pulse 2s infinite;white-space:nowrap;">
                                                            <i class="fas fa-clock" style="font-size:.58rem;"></i>
                                                            Perpanjangan Pending
                                                        </span>
                                                    @elseif ($perpStatus === 'approved')
                                                        <span style="display:inline-flex;align-items:center;gap:3px;
                                                                     padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                     font-weight:700;background:#d1fae5;color:#065f46;
                                                                     border:1px solid #6ee7b7;white-space:nowrap;">
                                                            <i class="fas fa-check-circle" style="font-size:.58rem;"></i>
                                                            Diperpanjang
                                                        </span>
                                                    @elseif ($perpStatus === 'rejected')
                                                        <span style="display:inline-flex;align-items:center;gap:3px;
                                                                     padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                     font-weight:700;background:#fee2e2;color:#991b1b;
                                                                     border:1px solid #fca5a5;white-space:nowrap;">
                                                            <i class="fas fa-times-circle" style="font-size:.58rem;"></i>
                                                            Perp. Ditolak
                                                        </span>
                                                    @endif
                                                </div>
                                            @endif
                                            {{-- ────────────────────────────────────────────────────── --}}
                                        </td>
                                    </tr>

                                    @if ($canApproveAdmin)
                                        <tr class="row-pilih-barang" data-for-index="{{ $idx }}">
                                            <td colspan="10" class="p-0">
                                                <div class="pilih-barang-wrapper 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 btn-outline-teal mb-0 flex-shrink-0 btn-open-modal-barang"
                                                            style="border-color:#0a8f97; color:#0a8f97;"
                                                            data-index="{{ $idx }}"
                                                            data-nama-barang="{{ strtolower($it->nama_barang ?? '') }}"
                                                            data-bs-toggle="modal" data-bs-target="#barangItemModal">
                                                            <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">{{ $it->nama_barang ?? '-' }}</span>
                                                        </span>
                                                    </div>

                                                    @if ($errors->has("items.{$idx}.barang"))
                                                        <p class="text-danger mb-1" style="font-size: .75rem;">
                                                            <i
                                                                class="fas fa-exclamation-circle me-1"></i>{{ $errors->first("items.{$idx}.barang") }}
                                                        </p>
                                                    @endif

                                                    <div class="selected-barang-list"
                                                        id="selected-barang-list-{{ $idx }}">
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    @endif

                                    @if ($canApproveAdmin || $isOnProgress || $isBorrowed || $isCompleted)
                                        <tr class="row-barang-pendukung" data-barang-pendukung-for="{{ $idx }}">
                                            <td colspan="10" class="p-0">
                                                <div class="barang-pendukung-wrapper px-3 py-2"
                                                    style="background:#f8fffe; border-top:2px dashed #00b7bd;">

                                                    @foreach ($assets[$it->id] ?? [] as $assetItem)
                                                        @php
                                                            $assetId = $assetItem->id;
                                                            $bpAwalList = $itemBarangPendukungs[$assetId] ?? collect();
                                                            $bpKembaliList = $assetReturnData[$assetId] ?? collect();
                                                            $statusAsset = $assetStatusMap[$assetId] ?? null;

                                                            $assetSudahDicek = in_array($statusAsset, [
                                                                'approve',
                                                                'reject',
                                                            ]);
                                                            $assetSudahApprove = $statusAsset === 'approve';
                                                            $assetSudahReject = $statusAsset === 'reject';

                                                            $kondisiColor = match ($assetItem->kondisi_asset ?? '') {
                                                                'baik' => [
                                                                    'bg' => '#d1fae5',
                                                                    'text' => '#10b981',
                                                                    'border' => '#6ee7b7',
                                                                ],
                                                                'rusak_ringan' => [
                                                                    'bg' => '#fef3c7',
                                                                    'text' => '#f59e0b',
                                                                    'border' => '#fcd34d',
                                                                ],
                                                                'rusak_berat', 'hilang' => [
                                                                    'bg' => '#fee2e2',
                                                                    'text' => '#ef4444',
                                                                    'border' => '#fca5a5',
                                                                ],
                                                                'tidak_ada' => [
                                                                    'bg' => '#f1f5f9',
                                                                    'text' => '#6b7280',
                                                                    'border' => '#cbd5e1',
                                                                ],
                                                                default => [
                                                                    'bg' => '#f1f5f9',
                                                                    'text' => '#6b7280',
                                                                    'border' => '#cbd5e1',
                                                                ],
                                                            };

                                                            $statusAssetColor = match ($assetItem->status_asset ?? '') {
                                                                'borrowed' => [
                                                                    'bg' => '#f5d0fe',
                                                                    'text' => '#a21caf',
                                                                    'border' => '#e9d5ff',
                                                                ],
                                                                'approve' => [
                                                                    'bg' => '#d1fae5',
                                                                    'text' => '#10b981',
                                                                    'border' => '#6ee7b7',
                                                                ],
                                                                'reject' => [
                                                                    'bg' => '#fee2e2',
                                                                    'text' => '#ef4444',
                                                                    'border' => '#fca5a5',
                                                                ],
                                                                default => [
                                                                    'bg' => '#f1f5f9',
                                                                    'text' => '#6b7280',
                                                                    'border' => '#cbd5e1',
                                                                ],
                                                            };
                                                        @endphp


                                                        <div class="mt-2 pt-2" style="border-top:1px dashed #b2e0e2;">
                                                            <div
                                                                class="text-muted small fw-semibold mb-2 d-flex align-items-center flex-wrap gap-2">
                                                                <i class="fas fa-clipboard-list"
                                                                    style="color:#0a8f97;"></i>

                                                                @if ($assetSudahDicek || $canReturn)
                                                                    <span
                                                                        style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:#cffafe;color:#0e7490;border:1px solid #a5f3fc;white-space:nowrap;">
                                                                        <i class="fas fa-undo"
                                                                            style="font-size:.65rem;"></i> DATA RETURN
                                                                    </span>
                                                                @else
                                                                    <span
                                                                        style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;white-space:nowrap;">
                                                                        <i class="fas fa-boxes"
                                                                            style="font-size:.65rem;"></i> BARANG PENDUKUNG
                                                                    </span>
                                                                @endif

                                                                <span
                                                                    class="fw-bold text-dark">{{ $it->nama_barang ?? '-' }}</span>

                                                                <code class="text-muted"
                                                                    style="font-size:.78rem;">{{ $assetItem->kode_asset }}</code>
    <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail ms-2" data-kode="{{ $assetItem->kode_asset }}" data-value="{{ $assetItem->value }}"><i class="fas fa-info-circle"></i></button>

                                                                @if (!empty($assetItem->kondisi_asset))
                                                                    <span
                                                                        style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $kondisiColor['bg'] }};color:{{ $kondisiColor['text'] }};border:1px solid {{ $kondisiColor['border'] }};white-space:nowrap;">
                                                                        {{ strtoupper(str_replace('_', ' ', $assetItem->kondisi_asset)) }}
                                                                    </span>
                                                                @endif

                                                                @if (!empty($assetItem->status_asset) && $assetItem->status_asset !== 'ready')
                                                                    <span
                                                                        style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $statusAssetColor['bg'] }};color:{{ $statusAssetColor['text'] }};border:1px solid {{ $statusAssetColor['border'] }};white-space:nowrap;">
                                                                        {{ strtoupper($assetItem->status_asset) }}
                                                                    </span>
                                                                @endif
                                                                @if (!empty($it->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: {{ $it->tanggal_ambil }}
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>


                                                        @if (!$canReturn)
                                                            @if (!$assetSudahDicek)
                                                                @if ($bpAwalList->count() > 0)
                                                                    <div class="mb-3 pb-2"
                                                                        style="border-bottom: 1px dashed #b2e0e2;">


                                                                        @foreach ($bpAwalList as $bp)
                                                                            @php
                                                                                $kondisiColor = match (
                                                                                    $bp->kondisi_barang_pendukung ?? ''
                                                                                ) {
                                                                                    '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',
                                                                                    ],
                                                                                    default => [
                                                                                        'bg' => '#f1f5f9',
                                                                                        'text' => '#6b7280',
                                                                                        'border' => '#cbd5e1',
                                                                                        'icon' => 'fa-circle',
                                                                                    ],
                                                                                };
                                                                            @endphp
                                                                            <div class="bp-perbandingan-row 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>
                                                                                    {{ $bp->nama_barang_pendukung ?? '-' }}
                                                                                </div>
                                                                                <div class="p-2 rounded"
                                                                                    style="background:{{ $kondisiColor['bg'] }}; border:1px dashed {{ $kondisiColor['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 {{ $kondisiColor['icon'] }}"
                                                                                            style="color:{{ $kondisiColor['text'] }};"></i>
                                                                                        <span class="fw-bold"
                                                                                            style="color:{{ $kondisiColor['text'] }}; font-size:.82rem;">
                                                                                            {{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                        </span>
                                                                                    </div>
                                                                                    @if (!empty($bp->catatan))
                                                                                        <div class="text-muted fst-italic mt-1"
                                                                                            style="font-size:.72rem;">
                                                                                            <i
                                                                                                class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}
                                                                                        </div>
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                @else
                                                                    <div class="text-muted small fst-italic py-1 mb-2">
                                                                        <i class="fas fa-info-circle me-1"></i>Tidak ada
                                                                        data barang
                                                                        pendukung.
                                                                    </div>
                                                                @endif
                                                            @else
                                                                <div class="perbandingan-return-wrapper mb-3 p-3 rounded"
                                                                    style="background:{{ $assetSudahApprove ? '#f0fdf4' : '#fff8f8' }}; border:1.5px solid {{ $assetSudahApprove ? '#10b981' : '#ef4444' }};">

                                                                    <div class="d-flex align-items-center gap-2 mb-3">
                                                                        <span class="fw-bold"
                                                                            style="font-size:.8rem; color:{{ $assetSudahApprove ? '#059669' : '#dc2626' }};">
                                                                            <i
                                                                                class="fas {{ $assetSudahApprove ? 'fa-check-circle' : 'fa-times-circle' }} me-1"></i>
                                                                            Hasil Return Asset: <span
                                                                                style="text-transform:uppercase;">{{ $statusAsset }}</span>
                                                                        </span>
                                                                        @if (!empty($assetItem->catatan))
                                                                            <span class="text-muted small fst-italic">—
                                                                                {{ $assetItem->catatan }}</span>
                                                                        @endif
                                                                    </div>

                                                                    @if ($bpAwalList->count() > 0)
                                                                        <div class="text-muted small fw-semibold mb-2"
                                                                            style="font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;">
                                                                            <i class="fas fa-exchange-alt me-1"></i>
                                                                            Perbandingan Kondisi Barang Pendukung
                                                                        </div>

                                                                        @foreach ($bpAwalList as $bpAwal)
                                                                            @php
                                                                                $bpKembali = $bpKembaliList->firstWhere(
                                                                                    'nama_barang_pendukung',
                                                                                    $bpAwal->nama_barang_pendukung,
                                                                                );

                                                                                $kondisiAwalColor = match (
                                                                                    $bpAwal->kondisi_barang_pendukung ??
                                                                                        ''
                                                                                ) {
                                                                                    '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',
                                                                                    ],
                                                                                    default => [
                                                                                        'bg' => '#f1f5f9',
                                                                                        'text' => '#6b7280',
                                                                                        'border' => '#cbd5e1',
                                                                                        'icon' => 'fa-circle',
                                                                                    ],
                                                                                };

                                                                                $kondisiKembaliColor = $bpKembali
                                                                                    ? match (
                                                                                        $bpKembali->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    }
                                                                                    : null;

                                                                                $bpStatusKembali =
                                                                                    $bpKembali->status_barang_pendukung ??
                                                                                    null;
                                                                            @endphp

                                                                            <div class="bp-perbandingan-row mb-3 p-2 rounded"
                                                                                style="background:#fff; border:1px solid #e4e9f0;">
                                                                                <div class="fw-semibold mb-2"
                                                                                    style="font-size:.8rem; color:#374151;">
                                                                                    <i
                                                                                        class="fas fa-box me-1 text-muted"></i>
                                                                                    {{ $bpAwal->nama_barang_pendukung ?? '-' }}
                                                                                    @if ($bpStatusKembali)
                                                                                        <span class="ms-2 badge"
                                                                                            style="font-size:.68rem; background:{{ $bpStatusKembali === 'approve' ? '#059669' : '#dc2626' }};">
                                                                                            {{ strtoupper($bpStatusKembali) }}
                                                                                        </span>
                                                                                    @endif
                                                                                </div>

                                                                                <div class="row g-2">
                                                                                    <div class="col-md-6">
                                                                                        <div class="p-2 rounded h-100"
                                                                                            style="background:{{ $kondisiAwalColor['bg'] }}; border:1px dashed {{ $kondisiAwalColor['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 {{ $kondisiAwalColor['icon'] }}"
                                                                                                    style="color:{{ $kondisiAwalColor['text'] }};"></i>
                                                                                                <span class="fw-bold"
                                                                                                    style="color:{{ $kondisiAwalColor['text'] }}; font-size:.82rem;">
                                                                                                    {{ strtoupper(str_replace('_', ' ', $bpAwal->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                                </span>
                                                                                            </div>
                                                                                            @if (!empty($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>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="col-md-6">
                                                                                        @if ($bpKembali && $kondisiKembaliColor)
                                                                                            <div class="p-2 rounded h-100"
                                                                                                style="background:{{ $kondisiKembaliColor['bg'] }}; border:1px dashed {{ $kondisiKembaliColor['border'] }};">
                                                                                                <div class="text-muted small fw-semibold mb-1"
                                                                                                    style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">
                                                                                                    <i
                                                                                                        class="fas fa-undo-alt me-1"></i>Kondisi
                                                                                                    Kembali (Dicek Admin)
                                                                                                </div>
                                                                                                <div
                                                                                                    class="d-flex align-items-center gap-2">
                                                                                                    <i class="fas {{ $kondisiKembaliColor['icon'] }}"
                                                                                                        style="color:{{ $kondisiKembaliColor['text'] }};"></i>
                                                                                                    <span class="fw-bold"
                                                                                                        style="color:{{ $kondisiKembaliColor['text'] }}; font-size:.82rem;">
                                                                                                        {{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                                    </span>
                                                                                                </div>
                                                                                                @if (!empty($bpKembali->catatan))
                                                                                                    <div class="text-muted fst-italic mt-1"
                                                                                                        style="font-size:.72rem;">
                                                                                                        <i
                                                                                                            class="fas fa-sticky-note me-1"></i>{{ $bpKembali->catatan }}
                                                                                                    </div>
                                                                                                @endif
                                                                                            </div>
                                                                                        @else
                                                                                            <div class="p-2 rounded h-100 d-flex align-items-center justify-content-center"
                                                                                                style="background:#f9fafb; border:1px dashed #d1d5db;">
                                                                                                <span
                                                                                                    class="text-muted small fst-italic">Belum
                                                                                                    ada
                                                                                                    data kembali</span>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <div class="text-muted small fst-italic">
                                                                            <i class="fas fa-info-circle me-1"></i>Tidak
                                                                            ada barang
                                                                            pendukung pada asset ini.
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @else
                                                            @if ($assetSudahApprove)
                                                                @php
                                                                    $wrapperBg = '#f0fdf4';
                                                                    $wrapperBorder = '#10b981';
                                                                    $labelColor = '#059669';
                                                                    $inputBg = '#f0fdf4';
                                                                    $inputBorder = '#6ee7b7';
                                                                @endphp
                                                                <div class="return-asset-section mb-3 p-3 rounded"
                                                                    style="background:{{ $wrapperBg }}; border:1.5px solid {{ $wrapperBorder }};">
                                                                    <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                        style="color:{{ $labelColor }};">
                                                                        <i class="fas fa-check-circle"></i>
                                                                        Return Sudah Di-Approve —
                                                                        <strong>{{ $it->nama_barang ?? '-' }}
                                                                            ({{ $assetItem->kode_asset }})</strong>
                                                                    </div>

                                                                    <input type="hidden"
                                                                        name="assets[{{ $assetId }}][asset_id]"
                                                                        value="{{ $assetId }}">
                                                                    <input type="hidden"
                                                                        name="assets[{{ $assetId }}][kondisi_asset]"
                                                                        value="{{ $assetItem->kondisi_asset }}">
                                                                    <input type="hidden"
                                                                        name="assets[{{ $assetId }}][status_asset]"
                                                                        value="{{ $assetItem->status_asset }}">
                                                                    <input type="hidden"
                                                                        name="assets[{{ $assetId }}][catatan]"
                                                                        value="{{ $assetItem->catatan ?? '' }}">



                                                                    <div class="row g-2 mb-2">
                                                                        <div class="col-md-3">
                                                                            <label class="prb-form-label">Kondisi
                                                                                Asset</label>
                                                                            <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="{{ strtoupper(str_replace('_', ' ', $assetItem->kondisi_asset ?? '-')) }}"
                                                                                    readonly
                                                                                    style="background:{{ $inputBg }}; border-color:{{ $inputBorder }}; color:{{ $labelColor }}; font-weight:600;">
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <label class="prb-form-label">Status
                                                                                Return</label>
                                                                            <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="APPROVE" readonly
                                                                                    style="background:{{ $inputBg }}; border-color:{{ $inputBorder }}; color:{{ $labelColor }}; font-weight:700;">
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <label class="prb-form-label">Catatan</label>
                                                                            <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="{{ $assetItem->catatan ?? '-' }}"
                                                                                    readonly
                                                                                    style="background:{{ $inputBg }}; border-color:{{ $inputBorder }};">
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    @if ($bpAwalList->count() > 0)
                                                                        <div class="mt-3 pt-2"
                                                                            style="border-top:1px dashed #6ee7b7;">
                                                                            <div class="text-muted small fw-semibold mb-2"
                                                                                style="letter-spacing:.03em;">
                                                                                <i class="fas fa-boxes me-1"
                                                                                    style="color:#059669;"></i>
                                                                                Barang Pendukung
                                                                            </div>
                                                                            @foreach ($bpAwalList as $bp)
                                                                                @php
                                                                                    $bpKembali = $bpKembaliList->firstWhere(
                                                                                        'nama_barang_pendukung',
                                                                                        $bp->nama_barang_pendukung,
                                                                                    );
                                                                                    $bpStatusKembali =
                                                                                        $bpKembali->status_barang_pendukung ??
                                                                                        null;
                                                                                    $bpSudahApprove =
                                                                                        $bpStatusKembali === 'approve';

                                                                                    $bpKondisiAwalColor = match (
                                                                                        $bp->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    };
                                                                                @endphp

                                                                                @if ($bpSudahApprove)
                                                                                    <div class="return-bp-row p-2 mb-2 rounded"
                                                                                        style="background:#f0fdf4; border:1px solid #6ee7b7;">
                                                                                        <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                            style="color:#059669;">
                                                                                            <i
                                                                                                class="fas fa-check-circle"></i>
                                                                                            Barang Pendukung di-Approve
                                                                                        </div>
                                                                                        <input type="hidden"
                                                                                            name="barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                            value="{{ $bp->id }}">
                                                                                        <input type="hidden"
                                                                                            name="barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                            value="{{ $bpKembali->kondisi_barang_pendukung }}">
                                                                                        <input type="hidden"
                                                                                            name="barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                            value="{{ $bpKembali->status_barang_pendukung }}">
                                                                                        <input type="hidden"
                                                                                            name="barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                            value="{{ $bpKembali->catatan ?? '' }}">
                                                                                        @php
                                                                                            $bpKondisiKembaliColor = match (
                                                                                                $bpKembali->kondisi_barang_pendukung ??
                                                                                                    ''
                                                                                            ) {
                                                                                                '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',
                                                                                                ],
                                                                                                default => [
                                                                                                    'bg' => '#f1f5f9',
                                                                                                    'text' => '#6b7280',
                                                                                                    'border' =>
                                                                                                        '#cbd5e1',
                                                                                                    'icon' =>
                                                                                                        'fa-circle',
                                                                                                ],
                                                                                            };
                                                                                        @endphp
                                                                                        <div
                                                                                            class="row g-2 align-items-center mb-2">
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                        <i class="fas fa-arrow-right"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Awal Saat
                                                                                                            Dipinjam</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiAwalColor['text'] }};"><i
                                                                                                                class="fas {{ $bpKondisiAwalColor['icon'] }} me-1"></i>{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        @if (!empty($bp->catatan))
                                                                                                            <span
                                                                                                                class="d-block text-muted fst-italic"
                                                                                                                style="font-size:.72rem;"><i
                                                                                                                    class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}</span>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                        <i class="fas fa-undo-alt"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Kembali (Dicek
                                                                                                            Admin)</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};"><i
                                                                                                                class="fas {{ $bpKondisiKembaliColor['icon'] }} me-1"></i>{{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        @if (!empty($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>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div
                                                                                            class="row g-2 align-items-center">
                                                                                            <div class="col-md-3">
                                                                                                <label
                                                                                                    class="prb-form-label">Nama
                                                                                                    Barang Pendukung</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $bpKembali->nama_barang_pendukung ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-2">
                                                                                                <label
                                                                                                    class="prb-form-label">Kondisi</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? '-')) }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-2">
                                                                                                <label
                                                                                                    class="prb-form-label">Status</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="APPROVE"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; font-weight:700; color:#059669;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-5">
                                                                                                <label
                                                                                                    class="prb-form-label">Catatan</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $bpKembali->catatan ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @else
                                                                                    @php
                                                                                        $bpIsRejected =
                                                                                            $bpKembali &&
                                                                                            $bpKembali->status_barang_pendukung ===
                                                                                                'reject';
                                                                                        $bpWrapperBg = $bpIsRejected
                                                                                            ? '#fee2e2'
                                                                                            : '#fff8e1';
                                                                                        $bpWrapperBorder = $bpIsRejected
                                                                                            ? '#fca5a5'
                                                                                            : '#fcd34d';
                                                                                    @endphp
                                                                                    <div class="return-bp-row p-2 mb-2 rounded"
                                                                                        style="background:{{ $bpWrapperBg }}; border:1.5px solid {{ $bpWrapperBorder }};">

                                                                                        <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                            style="color:{{ $bpIsRejected ? '#991b1b' : '#d97706' }};">
                                                                                            <i
                                                                                                class="fas fa-{{ $bpIsRejected ? 'times-circle' : 'undo-alt' }}"></i>
                                                                                            {{ $bpIsRejected ? 'Barang Pendukung di-Reject' : 'Pengecekan Return Barang Pendukung' }}
                                                                                            <span class="badge ms-auto"
                                                                                                style="background:{{ $bpIsRejected ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                                                <i
                                                                                                    class="fas fa-pencil-alt me-1"></i>
                                                                                                {{ $bpIsRejected ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                                            </span>
                                                                                        </div>
                                                                                        <input type="hidden"
                                                                                            name="barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                            value="{{ $bp->id }}">
                                                                                        @php
                                                                                            $bpKondisiKembaliColor = $bpKembali
                                                                                                ? match (
                                                                                                    $bpKembali->kondisi_barang_pendukung ??
                                                                                                        ''
                                                                                                ) {
                                                                                                    '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',
                                                                                                    ],
                                                                                                    default => [
                                                                                                        'bg' =>
                                                                                                            '#f1f5f9',
                                                                                                        'text' =>
                                                                                                            '#6b7280',
                                                                                                        'border' =>
                                                                                                            '#cbd5e1',
                                                                                                        'icon' =>
                                                                                                            'fa-circle',
                                                                                                    ],
                                                                                                }
                                                                                                : null;
                                                                                        @endphp
                                                                                        <div
                                                                                            class="row g-2 align-items-center mb-2">
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                        <i class="fas fa-arrow-right"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Awal Saat
                                                                                                            Dipinjam</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiAwalColor['text'] }};"><i
                                                                                                                class="fas {{ $bpKondisiAwalColor['icon'] }} me-1"></i>{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        @if (!empty($bp->catatan))
                                                                                                            <span
                                                                                                                class="d-block text-muted fst-italic"
                                                                                                                style="font-size:.72rem;"><i
                                                                                                                    class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}</span>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                @if ($bpKembali && $bpKondisiKembaliColor)
                                                                                                    <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                        style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                        <div class="flex-shrink-0 mt-1"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                            <i class="fas fa-undo-alt"
                                                                                                                style="font-size:.8rem;"></i>
                                                                                                        </div>
                                                                                                        <div
                                                                                                            style="font-size:.75rem; line-height:1.5;">
                                                                                                            <span
                                                                                                                class="d-block fw-semibold text-muted"
                                                                                                                style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                                Kembali
                                                                                                                (Dicek
                                                                                                                Admin)
                                                                                                            </span>
                                                                                                            <span
                                                                                                                class="fw-bold"
                                                                                                                style="color:{{ $bpKondisiKembaliColor['text'] }};"><i
                                                                                                                    class="fas {{ $bpKondisiKembaliColor['icon'] }} me-1"></i>{{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                            @if (!empty($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>
                                                                                                            @endif
                                                                                                        </div>
                                                                                                    </div>
                                                                                                @else
                                                                                                    <div class="p-2 rounded h-100 d-flex align-items-center gap-2"
                                                                                                        style="background:#fffbeb; border:1px dashed #f59e0b;">
                                                                                                        <i class="fas fa-pencil-alt"
                                                                                                            style="color:#d97706; font-size:.85rem;"></i>
                                                                                                        <span
                                                                                                            class="small"
                                                                                                            style="color:#d97706; font-style:italic;">Belum
                                                                                                            diisi — silakan
                                                                                                            isi form di
                                                                                                            bawah</span>
                                                                                                    </div>
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                        <div
                                                                                            class="row g-2 align-items-center">
                                                                                            <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="{{ $bp->nama_barang_pendukung ?? '-' }}"
                                                                                                    readonly>
                                                                                            </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 @error('barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                    <option value="">
                                                                                                        -- Pilih --</option>
                                                                                                    @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                                        <option
                                                                                                            value="{{ $val }}"
                                                                                                            {{ old('barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung', $bpKembali->kondisi_barang_pendukung ?? ($bp->kondisi_barang_pendukung ?? '')) === $val ? 'selected' : '' }}>
                                                                                                            {{ $label }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id .
                                                                                                    '.kondisi_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </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 @error('barang_pendukung.' . $bp->id . '.status_barang_pendukung') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                    <option value="">
                                                                                                        -- Pilih --</option>
                                                                                                    <option value="approve"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                                        Approve
                                                                                                    </option>
                                                                                                    <option value="reject"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                                        Reject
                                                                                                    </option>
                                                                                                    <option
                                                                                                        value="borrowed"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                                        Borrowed</option>
                                                                                                </select>
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id .
                                                                                                    '.status_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </div>
                                                                                            <div class="col-md-5">
                                                                                                <label
                                                                                                    class="prb-form-label">Catatan</label>
                                                                                                <input type="text"
                                                                                                    class="form-control form-control-sm return-input @error('barang_pendukung.' . $bp->id . '.catatan') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    placeholder="Catatan (opsional)..."
                                                                                                    value="{{ old('barang_pendukung.' . $bp->id . '.catatan', $bpKembali->catatan ?? '') }}"
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id . '.catatan')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @endif
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @else
                                                                @php
                                                                    $isApproved = false;
                                                                    $isRejected = $assetSudahReject;
                                                                    $wrapperBg = $isApproved
                                                                        ? '#f0fdf4'
                                                                        : ($isRejected
                                                                            ? '#fee2e2'
                                                                            : '#fffbeb');
                                                                    $wrapperBorder = $isApproved
                                                                        ? '#10b981'
                                                                        : ($isRejected
                                                                            ? '#ef4444'
                                                                            : '#f59e0b');
                                                                    $labelColor = $isApproved
                                                                        ? '#059669'
                                                                        : ($isRejected
                                                                            ? '#991b1b'
                                                                            : '#d97706');
                                                                    $inputBg = $isApproved ? '#f0fdf4' : '#fff';
                                                                    $inputBorder = $isApproved ? '#6ee7b7' : '#dee2e6';
                                                                @endphp
                                                                <div class="return-asset-section mb-3 p-3 rounded"
                                                                    style="background:{{ $wrapperBg }}; border:{{ $isRejected ? '1.5px solid ' . $wrapperBorder : '1.5px solid ' . $wrapperBorder }};">
                                                                    <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                        style="color:{{ $labelColor }};">
                                                                        <i
                                                                            class="fas fa-{{ $isRejected ? 'times-circle' : 'undo-alt' }}"></i>
                                                                        @if ($isRejected)
                                                                            Return Di-Reject (Re-Submit) —
                                                                        @else
                                                                            Pengecekan Return Asset —
                                                                        @endif
                                                                        <strong>{{ $it->nama_barang ?? '-' }}
                                                                            ({{ $assetItem->kode_asset }})</strong>
                                                                        <span class="badge ms-auto"
                                                                            style="background:{{ $isRejected ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                            <i
                                                                                class="fas fa-pencil-alt me-1"></i>{{ $isRejected ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                        </span>
                                                                    </div>

                                                                    <input type="hidden"
                                                                        name="assets[{{ $assetId }}][asset_id]"
                                                                        value="{{ $assetId }}">



                                                                    <div class="row g-2 mb-2">
                                                                        <div class="col-md-3">
                                                                            <label class="prb-form-label">Kondisi Asset
                                                                                <span class="text-danger">*</span></label>
                                                                            <select
                                                                                class="form-select form-select-sm return-input @error('assets.' . $assetId . '.kondisi_asset') is-invalid @enderror"
                                                                                name="assets[{{ $assetId }}][kondisi_asset]"
                                                                                required
                                                                                style="background:{{ $inputBg }}; border-color:{{ $inputBorder }}; border-width:{{ $isRejected ? '1.5px' : '1px' }};">
                                                                                <option value="">-- Pilih Kondisi --
                                                                                </option>
                                                                                @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                    <option value="{{ $val }}"
                                                                                        {{ old('assets.' . $assetId . '.kondisi_asset', $assetItem->kondisi_asset ?? '') === $val ? 'selected' : '' }}>
                                                                                        {{ $label }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                            @error('assets.' . $assetId . '.kondisi_asset')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>

                                                                        <div class="col-md-2">
                                                                            <label class="prb-form-label">Status Return
                                                                                <span class="text-danger">*</span></label>
                                                                            <select
                                                                                class="form-select form-select-sm return-input @error('assets.' . $assetId . '.status_asset') is-invalid @enderror"
                                                                                name="assets[{{ $assetId }}][status_asset]"
                                                                                required
                                                                                style="background:{{ $inputBg }}; border-color:{{ $inputBorder }}; border-width:{{ $isRejected ? '1.5px' : '1px' }};">
                                                                                <option value="">-- Pilih Status --
                                                                                </option>
                                                                                <option value="approve"
                                                                                    {{ old('assets.' . $assetId . '.status_asset', $assetItem->status_asset ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                    Approve</option>
                                                                                <option value="reject"
                                                                                    {{ old('assets.' . $assetId . '.status_asset', $assetItem->status_asset ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                    Reject</option>
                                                                                <option value="borrowed"
                                                                                    {{ old('assets.' . $assetId . '.status_asset', $assetItem->status_asset ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                    Borrowed</option>
                                                                            </select>
                                                                            @error('assets.' . $assetId . '.status_asset')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>

                                                                        <div class="col-md-7">
                                                                            <label class="prb-form-label">Catatan</label>
                                                                            <input type="text"
                                                                                class="form-control form-control-sm return-input @error('assets.' . $assetId . '.catatan') is-invalid @enderror"
                                                                                name="assets[{{ $assetId }}][catatan]"
                                                                                placeholder="Catatan (opsional)..."
                                                                                value="{{ old('assets.' . $assetId . '.catatan', $assetItem->catatan ?? '') }}"
                                                                                style="background:{{ $inputBg }}; border-color:{{ $inputBorder }};">
                                                                            @error('assets.' . $assetId . '.catatan')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                                    @if ($bpAwalList->count() > 0)
                                                                        <div class="mt-3 pt-2"
                                                                            style="border-top:1px dashed {{ $wrapperBorder }};">
                                                                            <div class="text-muted small fw-semibold mb-2"
                                                                                style="letter-spacing:.03em; color:{{ $labelColor }};">
                                                                                <i class="fas fa-boxes me-1"
                                                                                    style="color:#d97706;"></i>
                                                                                Barang Pendukung
                                                                            </div>
                                                                            @foreach ($bpAwalList as $bpIdx => $bp)
                                                                                @php
                                                                                    $bpKembali = $bpKembaliList->firstWhere(
                                                                                        'nama_barang_pendukung',
                                                                                        $bp->nama_barang_pendukung,
                                                                                    );
                                                                                    $bpIsApproved =
                                                                                        $bpKembali &&
                                                                                        $bpKembali->status_barang_pendukung ===
                                                                                            'approve';
                                                                                    $bpIsRejected =
                                                                                        $bpKembali &&
                                                                                        $bpKembali->status_barang_pendukung ===
                                                                                            'reject';
                                                                                    $bpWrapperBg = $bpIsApproved
                                                                                        ? '#f0fdf4'
                                                                                        : ($bpIsRejected
                                                                                            ? '#fee2e2'
                                                                                            : '#fffbeb');
                                                                                    $bpWrapperBorder = $bpIsApproved
                                                                                        ? '#10b981'
                                                                                        : ($bpIsRejected
                                                                                            ? '#ef4444'
                                                                                            : '#f59e0b');

                                                                                    $bpKondisiAwalColor = match (
                                                                                        $bp->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    };
                                                                                @endphp

                                                                                <div class="return-bp-row p-2 mb-2 rounded"
                                                                                    style="background:{{ $bpWrapperBg }}; border:1.5px solid {{ $bpWrapperBorder }};">
                                                                                    <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                        style="color:{{ $bpIsApproved ? '#059669' : ($bpIsRejected ? '#991b1b' : '#d97706') }};">
                                                                                        <i
                                                                                            class="fas fa-{{ $bpIsApproved ? 'check-circle' : ($bpIsRejected ? 'times-circle' : 'undo-alt') }}"></i>
                                                                                        {{ $bpIsApproved ? 'Barang Pendukung di-Approve' : ($bpIsRejected ? 'Barang Pendukung di-Reject' : 'Pengecekan Return Barang Pendukung') }}
                                                                                        @if (!$bpIsApproved)
                                                                                            <span class="badge ms-auto"
                                                                                                style="background:{{ $bpIsRejected ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                                                <i
                                                                                                    class="fas fa-pencil-alt me-1"></i>{{ $bpIsRejected ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                                            </span>
                                                                                        @endif
                                                                                    </div>
                                                                                    <input type="hidden"
                                                                                        name="barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                        value="{{ $bp->id }}">

                                                                                    <div
                                                                                        class="row g-2 align-items-center mb-2">
                                                                                        <div class="col-md-6">
                                                                                            <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                <div class="flex-shrink-0 mt-1"
                                                                                                    style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                    <i class="fas fa-arrow-right"
                                                                                                        style="font-size:.8rem;"></i>
                                                                                                </div>
                                                                                                <div
                                                                                                    style="font-size:.75rem; line-height:1.5;">
                                                                                                    <span
                                                                                                        class="d-block fw-semibold text-muted"
                                                                                                        style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                        Awal Saat
                                                                                                        Dipinjam</span>
                                                                                                    <span class="fw-bold"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                    <span
                                                                                                        class="text-muted">—
                                                                                                        {{ $bp->nama_barang_pendukung ?? '-' }}</span>
                                                                                                    @if (!empty($bp->catatan))
                                                                                                        <span
                                                                                                            class="d-block text-muted fst-italic"
                                                                                                            style="font-size:.72rem;"><i
                                                                                                                class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}</span>
                                                                                                    @endif
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-6">
                                                                                            @if ($bpKembali)
                                                                                                @php
                                                                                                    $bpKondisiKembaliColor = match (
                                                                                                        $bpKembali->kondisi_barang_pendukung ??
                                                                                                            ''
                                                                                                    ) {
                                                                                                        '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',
                                                                                                        ],
                                                                                                        default => [
                                                                                                            'bg' =>
                                                                                                                '#f1f5f9',
                                                                                                            'text' =>
                                                                                                                '#6b7280',
                                                                                                            'border' =>
                                                                                                                '#cbd5e1',
                                                                                                            'icon' =>
                                                                                                                'fa-circle',
                                                                                                        ],
                                                                                                    };
                                                                                                @endphp
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                        <i class="fas fa-undo-alt"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Kembali (Dicek
                                                                                                            Admin)</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        @if (!empty($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>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            @else
                                                                                                <div class="p-2 rounded h-100 d-flex align-items-center gap-2"
                                                                                                    style="background:#fffbeb; border:1px dashed #f59e0b;">
                                                                                                    <i class="fas fa-pencil-alt"
                                                                                                        style="color:#d97706; font-size:.85rem;"></i>
                                                                                                    <span class="small"
                                                                                                        style="color:#d97706; font-style:italic;">Belum
                                                                                                        diisi — silakan isi
                                                                                                        form di bawah</span>
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>

                                                                                    <div
                                                                                        class="row g-2 align-items-center">
                                                                                        <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="{{ $bp->nama_barang_pendukung ?? '-' }}"
                                                                                                readonly
                                                                                                style="background:{{ $bpIsApproved ? '#f0fdf4' : '#E9ECFE' }}; border-color:{{ $bpIsApproved ? '#6ee7b7' : '#dee2e6' }};">
                                                                                        </div>

                                                                                        <div class="col-md-2">
                                                                                            <label
                                                                                                class="prb-form-label">Kondisi
                                                                                                <span
                                                                                                    class="text-danger">{{ $bpIsApproved ? '' : '*' }}</span></label>
                                                                                            @if ($bpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    value="{{ $bpKembali->kondisi_barang_pendukung }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? '-')) }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; color:#059669; font-weight:600;">
                                                                                                </div>
                                                                                            @else
                                                                                                <select
                                                                                                    class="form-select form-select-sm return-input @error('barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                    <option value="">
                                                                                                        -- Pilih Kondisi --
                                                                                                    </option>
                                                                                                    @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                                        <option
                                                                                                            value="{{ $val }}"
                                                                                                            {{ old('barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung', $bpKembali->kondisi_barang_pendukung ?? ($bp->kondisi_barang_pendukung ?? '')) === $val ? 'selected' : '' }}>
                                                                                                            {{ $label }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id .
                                                                                                    '.kondisi_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>

                                                                                        <div class="col-md-2">
                                                                                            <label
                                                                                                class="prb-form-label">Status
                                                                                                <span
                                                                                                    class="text-danger">{{ $bpIsApproved ? '' : '*' }}</span></label>
                                                                                            @if ($bpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    value="{{ $bpKembali->status_barang_pendukung }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="APPROVE"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; color:#059669; font-weight:700;">
                                                                                                </div>
                                                                                            @else
                                                                                                <select
                                                                                                    class="form-select form-select-sm return-input @error('barang_pendukung.' . $bp->id . '.status_barang_pendukung') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                    <option value="">
                                                                                                        -- Pilih Status --
                                                                                                    </option>
                                                                                                    <option value="approve"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                                        Approve</option>
                                                                                                    <option value="reject"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                                        Reject</option>
                                                                                                    <option
                                                                                                        value="borrowed"
                                                                                                        {{ old('barang_pendukung.' . $bp->id . '.status_barang_pendukung', $bpKembali->status_barang_pendukung ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                                        Borrowed</option>

                                                                                                </select>
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id .
                                                                                                    '.status_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>

                                                                                        <div class="col-md-5">
                                                                                            <label
                                                                                                class="prb-form-label">Catatan</label>
                                                                                            @if ($bpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    value="{{ $bpKembali->catatan ?? '' }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $bpKembali->catatan ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            @else
                                                                                                <input type="text"
                                                                                                    class="form-control form-control-sm return-input @error('barang_pendukung.' . $bp->id . '.catatan') is-invalid @enderror"
                                                                                                    name="barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    placeholder="Catatan (opsional)..."
                                                                                                    value="{{ old('barang_pendukung.' . $bp->id . '.catatan', $bpKembali->catatan ?? '') }}"
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                @error('barang_pendukung.' .
                                                                                                    $bp->id . '.catatan')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endif
                                                        @php

    $sit_asset = strtolower($it->status_item ?? '');

    $allPerpItem   = isset($perpanjangans[$it->id])
                     ? $perpanjangans[$it->id]
                     : collect();

    
    $isFirstAsset  = ($assets[$it->id] ?? collect())->first()?->id === $assetItem->id;

    
    $perpAsset     = $allPerpItem; 

    $latestPerpAsset  = $perpAsset->sortByDesc('created_at')->first();
    $perpStatusAsset  = $latestPerpAsset->status ?? null;

    $canAjukanPerpAsset  = ($isViewerGuest || $isViewerHead)
                           && ($is_pengaju ?? false)
                           && $isBorrowed
                           && in_array($sit_asset, ['approved', 'approve']);

    $canAdminActPerpAsset= ($isViewerAdmin || $isViewerSuperAdmin)
                           && $isBorrowed
                           && $perpStatusAsset === 'pending';

    $showPerpSectionAsset= $isBorrowed
                           && ($latestPerpAsset || $canAjukanPerpAsset)
                           && $isFirstAsset; 
@endphp
                                                        @if ($showPerpSectionAsset)
                                                            <div class="perpanjangan-wrapper px-3 py-2 mt-2"
                                                                style="background:#fdfaf0; border-top:2px dashed #f59e0b; border-radius:0 0 .5rem .5rem;">

                                                                {{-- Header label --}}
                                                                <div class="d-flex align-items-center flex-wrap 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;white-space:nowrap;">
                                                                        <i class="fas fa-calendar-plus" style="font-size:.65rem;"></i>
                                                                        PERPANJANGAN
                                                                    </span>

                                                                    {{-- Nama barang + kode asset --}}
                                                                    <span class="fw-bold text-dark" style="font-size:.82rem;">
                                                                        {{ $it->nama_barang ?? '-' }}
                                                                    </span>
                                                                    <code class="text-muted" style="font-size:.75rem;">{{ $assetItem->kode_asset }}</code>

                                                                    {{-- Badge status perpanjangan --}}
                                                                    @if ($perpStatusAsset === 'pending')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#fef9c3;color:#854d0e;
                                                                                    border:1px solid #fde047;
                                                                                    animation:perp-pulse 2s infinite;">
                                                                            <i class="fas fa-clock" style="font-size:.62rem;"></i>
                                                                            Menunggu Persetujuan Admin
                                                                        </span>
                                                                    @elseif ($perpStatusAsset === 'approved')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#d1fae5;color:#065f46;
                                                                                    border:1px solid #6ee7b7;">
                                                                            <i class="fas fa-check-circle" style="font-size:.62rem;"></i>
                                                                            Disetujui
                                                                        </span>
                                                                    @elseif ($perpStatusAsset === 'rejected')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#fee2e2;color:#991b1b;
                                                                                    border:1px solid #fca5a5;">
                                                                            <i class="fas fa-times-circle" style="font-size:.62rem;"></i>
                                                                            Ditolak
                                                                        </span>
                                                                    @endif

                                                                    {{-- Tanggal lama → baru --}}
                                                                    @if ($latestPerpAsset)
                                                                        <span class="text-muted" style="font-size:.75rem;">
                                                                            <span style="text-decoration:line-through;color:#9ca3af;">
                                                                                {{ $latestPerpAsset->tanggal_kembali_lama
                                                                                    ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_lama)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </span>
                                                                            <i class="fas fa-long-arrow-alt-right mx-1" style="color:#f59e0b;"></i>
                                                                            <strong style="color:#b45309;">
                                                                                {{ $latestPerpAsset->tanggal_kembali_baru
                                                                                    ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </strong>
                                                                        </span>
                                                                    @endif
                                                                </div>

                                                                {{-- [A] Guest: belum ada / rejected / approved → tombol ajukan --}}
                                                                @if ($canAjukanPerpAsset && ($perpStatusAsset === null || $perpStatusAsset === 'rejected' || $perpStatusAsset === 'approved'))
                                                                    @if ($perpStatusAsset === 'rejected')
                                                                        <div class="mb-2 p-2 rounded"
                                                                            style="background:#fee2e2;border:1px solid #fca5a5;font-size:.8rem;">
                                                                            <i class="fas fa-times-circle text-danger me-1"></i>
                                                                            <strong>Perpanjangan ditolak.</strong>
                                                                            @if (!empty($latestPerpAsset->catatan_admin))
                                                                                Alasan: <em>{{ $latestPerpAsset->catatan_admin }}</em>
                                                                            @endif
                                                                            Anda dapat mengajukan kembali.
                                                                        </div>
                                                                    @endif

                                                                    @if ($perpStatusAsset === 'approved')
                                                                        <div class="mb-2 p-2 rounded"
                                                                            style="background:#d1fae5;border:1px solid #6ee7b7;font-size:.8rem;">
                                                                            <i class="fas fa-check-circle text-success me-1"></i>
                                                                            <strong>Perpanjangan sebelumnya disetujui.</strong>
                                                                            Tanggal kembali:
                                                                            <strong>
                                                                                {{ $latestPerpAsset->tanggal_kembali_baru
                                                                                    ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </strong>
                                                                            Anda dapat mengajukan perpanjangan baru.
                                                                        </div>
                                                                    @endif

                                                                    @php
                                                                        // Untuk data-item-id: pakai encrypted asset ID agar route perpanjangan
                                                                        // bisa membedakan per asset. Sesuaikan dengan route Anda.
                                                                        $perpEncryptedId = encrypt((string) $assetItem->id);
                                                                    @endphp

                                                                    <button type="button"
                                                                            class="btn btn-sm mb-0 btn-ajukan-perpanjangan"
                                                                            style="background:#f59e0b;color:#fff;font-size:.8rem;
                                                                                border:none;border-radius:6px;padding:5px 14px;"
                                                                            data-item-id="{{ $perpEncryptedId }}"
                                                                            data-item-nama="{{ $it->nama_barang }} ({{ $assetItem->kode_asset }})"
                                                                            data-tanggal-kembali="{{ $it->tanggal_kembali }}"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#perpanjanganModal">
                                                                        <i class="fas fa-calendar-plus me-1"></i>
                                                                        @if ($perpStatusAsset === 'rejected')
                                                                            Ajukan Ulang Perpanjangan
                                                                        @elseif ($perpStatusAsset === 'approved')
                                                                            Ajukan Perpanjangan Baru
                                                                        @else
                                                                            Ajukan Perpanjangan
                                                                        @endif
                                                                    </button>

                                                                {{-- [B] Guest/Head: pending --}}
                                                                @elseif (($isViewerGuest || $isViewerHead) && $perpStatusAsset === 'pending')
                                                                    <div class="p-2 rounded"
                                                                        style="background:#fefce8;border:1px solid #fde047;font-size:.8rem;">
                                                                        <i class="fas fa-hourglass-half text-warning me-1"></i>
                                                                        Pengajuan perpanjangan Anda sedang menunggu persetujuan Admin IT.
                                                                        @if (!empty($latestPerpAsset->alasan_perpanjangan))
                                                                            <span class="text-muted ms-1">
                                                                                — Alasan: <em>{{ $latestPerpAsset->alasan_perpanjangan }}</em>
                                                                            </span>
                                                                        @endif
                                                                    </div>

                                                                {{-- [C] Guest/Head: approved --}}
                                                                @elseif (($isViewerGuest || $isViewerHead) && $perpStatusAsset === 'approved')
                                                                    <div class="p-2 rounded"
                                                                        style="background:#d1fae5;border:1px solid #6ee7b7;font-size:.8rem;">
                                                                        <i class="fas fa-check-circle text-success me-1"></i>
                                                                        Perpanjangan disetujui. Tanggal kembali baru:
                                                                        <strong>
                                                                            {{ $latestPerpAsset->tanggal_kembali_baru
                                                                                ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                : '-' }}
                                                                        </strong>
                                                                    </div>

                                                                {{-- [D] Admin: ada pending → form approve/reject --}}
                                                                @elseif ($canAdminActPerpAsset)
                                                                    <div class="perp-admin-card p-3 rounded"
                                                                        style="background:#fffbeb;border:1.5px solid #fcd34d;">

                                                                        <div class="row g-2 mb-3" style="font-size:.8rem;">
                                                                            <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">
                                                                                    {{ $latestPerpAsset->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;">
                                                                                    {{ $latestPerpAsset->tanggal_kembali_lama
                                                                                        ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_lama)->format('d/m/Y')
                                                                                        : '-' }}
                                                                                </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;">
                                                                                    {{ $latestPerpAsset->tanggal_kembali_baru
                                                                                        ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                        : '-' }}
                                                                                </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;">
                                                                                    {{ $latestPerpAsset->created_at
                                                                                        ? \Carbon\Carbon::parse($latestPerpAsset->created_at)->format('d/m/Y H:i')
                                                                                        : '-' }}
                                                                                </span>
                                                                            </div>
                                                                        </div>

                                                                        <div class="row g-2 align-items-end"
                                                                            id="perp-approve-wrapper-{{ $latestPerpAsset->id }}">
                                                                            <div class="col-md-4">
                                                                                <label class="prb-form-label">
                                                                                    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 perp-tgl-approve"
                                                                                    id="perp-tgl-{{ $latestPerpAsset->id }}"
                                                                                    value="{{ $latestPerpAsset->tanggal_kembali_baru ? \Carbon\Carbon::parse($latestPerpAsset->tanggal_kembali_baru)->format('Y-m-d') : '' }}"
                                                                                    min="{{ now()->format('Y-m-d') }}"
                                                                                    style="border-color:#f59e0b;">
                                                                            </div>
                                                                            <div class="col-md-5">
                                                                                <label class="prb-form-label">Catatan Admin</label>
                                                                                <input type="text"
                                                                                    class="form-control form-control-sm"
                                                                                    id="perp-catatan-{{ $latestPerpAsset->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 btn-perp-approve"
                                                                                        data-perp-id="{{ encrypt((string)$latestPerpAsset->id) }}"
                                                                                        data-tgl-input-id="perp-tgl-{{ $latestPerpAsset->id }}"
                                                                                        data-catatan-input-id="perp-catatan-{{ $latestPerpAsset->id }}"
                                                                                        data-url="{{ route('trpjbr.perpanjangan.approve', encrypt((string)$latestPerpAsset->id)) }}">
                                                                                    <i class="fas fa-check me-1"></i> Approve
                                                                                </button>
                                                                                <button type="button"
                                                                                        class="btn btn-danger btn-sm mb-0 flex-fill btn-perp-reject"
                                                                                        data-perp-id="{{ encrypt((string)$latestPerpAsset->id) }}"
                                                                                        data-bs-toggle="modal"
                                                                                        data-bs-target="#perpRejectModal">
                                                                                    <i class="fas fa-times me-1"></i> Reject
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                {{-- [E] Admin: lihat history (approved/rejected) --}}
                                                                @elseif (($isViewerAdmin || $isViewerSuperAdmin) && $latestPerpAsset && $perpStatusAsset !== 'pending')
                                                                    <div class="p-2 rounded" style="font-size:.8rem;
                                                                        background:{{ $perpStatusAsset === 'approved' ? '#f0fdf4' : '#fff8f8' }};
                                                                        border:1px solid {{ $perpStatusAsset === 'approved' ? '#6ee7b7' : '#fca5a5' }};">
                                                                        <i class="fas fa-{{ $perpStatusAsset === 'approved' ? 'check-circle text-success' : 'times-circle text-danger' }} me-1"></i>
                                                                        Perpanjangan <strong>{{ strtoupper($perpStatusAsset) }}</strong>
                                                                        @if (!empty($latestPerpAsset->catatan_admin))
                                                                            — <em class="text-muted">{{ $latestPerpAsset->catatan_admin }}</em>
                                                                        @endif
                                                                    </div>
                                                                @endif

                                                            </div>{{-- end perpanjangan-wrapper --}}
                                                            @endif
                                                    @endforeach

                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                 
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center text-muted">Tidak ada item.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if ($canApproveAdmin)
                    <div class="prb-card flex-grow-1" id="card-barang-opsional">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <div class="prb-card-label mb-0">Barang Tambahan (Opsional)</div>
                            <button type="button" class="btn btn-sm mb-0" id="btn-open-modal-opsional"
                                style="border:1.5px solid #0a8f97; color:#0a8f97;
                                background:#f0fffe; font-size:.8rem;"
                                data-bs-toggle="modal" data-bs-target="#barangModal">
                                <i class="fas fa-plus me-1"></i> Tambah Barang
                            </button>
                        </div>

                        <div class="table-responsive">
                            <table class="table align-middle table-hover" id="opsionalItemsTable">
                                <thead style="background:#0a8f97; color:#fff;">
                                    <tr>
                                        <th class="th-action">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="opsional-items-body">
                                    <tr id="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>
                @endif

                @if ($canApproveAdmin)
                    <div class="prb-card">
                        <div class="prb-card-label mb-2">Catatan Admin IT</div>
                        <textarea class="prb-input" name="catatan_admin" rows="3"
                            placeholder="Catatan umum untuk peminjaman ini (opsional)..."></textarea>

                        <div class="d-flex gap-2 justify-content-end mt-3">
                            <button type="button" class="prb-btn prb-btn-back"
                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                <i class="fas fa-times"></i> Batal
                            </button>
                            <button type="submit" class="prb-btn prb-btn-approve">
                                <i class="fas fa-check"></i> Submit Approve
                            </button>
                        </div>
                    </div>
                @endif

            </div>
        </div>

        @if (
            !$canApproveAdmin &&
                ($isOnProgress || $isCompleted || $isBorrowed || $isRejected) &&
                isset($opsionalItems) &&
                $opsionalItems->isNotEmpty())
            <div class="row g-3 mt-1">
                <div class="col-12">
                    <div class="prb-card">
                        <div class="prb-card-label mb-2">Barang Tambahan (Opsional)</div>

                        <div class="table-responsive">
                            <table class="table align-middle table-hover" id="opsionalViewTable">
                                <thead style="background:#0a8f97; color:#fff;">
                                    <tr>
                                        <th class="th-action">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="width:130px;">Qty Disetujui</th>
                                        <th style="width:110px;">Tanggal Pinjam</th>
                                        <th style="width:110px;">Tanggal Kembali</th>
                                        <th style="width:140px;">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($opsionalItems as $opsIdx => $ops)
                                        @php
                                            $sOps = strtolower($ops->status_item ?? '');
                                            $opsBadge = 'bg-secondary';
                                            if ($sOps === 'pending') {
                                                $opsBadge = 'bg-primary';
                                            } elseif (in_array($sOps, ['approved', 'approve', 'acc', 'disetujui'])) {
                                                $opsBadge = 'bg-success';
                                            } elseif (in_array($sOps, ['reject', 'rejected', 'ditolak'])) {
                                                $opsBadge = 'bg-danger';
                                            }
                                            // [TAMBAH] data perpanjangan per item opsional
                                            $latestPerpOps = isset($perpanjangans[$ops->id])
                                                ? $perpanjangans[$ops->id]->sortByDesc('created_at')->first()
                                                : null;
                                            $perpStatusOps     = $latestPerpOps->status ?? null;
                                            $canAjukanPerpOps  = ($isViewerGuest || $isViewerHead) && $isBorrowed
                                                                && in_array($sOps, ['approved', 'approve']);
                                            $canAdminActPerpOps= ($isViewerAdmin || $isViewerSuperAdmin)
                                                                && $isBorrowed
                                                                && $perpStatusOps === 'pending';
                                        @endphp

                                        <tr data-opsional-view-index="{{ $opsIdx }}">
                                            <td class="td-action">
                                                <button type="button" class="btn btn-secondary mb-0" disabled
                                                    title="Readonly">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->nama_barang ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->penerima ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->keterangan ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->qty_diminta ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->qty_disetujui ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->tanggal_pinjam ?? '-' }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    value="{{ $ops->tanggal_kembali ?? '-' }}" readonly>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge {{ $opsBadge }} px-3 py-2" style="min-width:120px;">
                                                    {{ strtoupper($ops->status_item ?? '-') }}
                                                </span>

                                                {{-- [TAMBAH] Badge status perpanjangan opsional --}}
                                                @if ($isBorrowed && $latestPerpOps)
                                                    <div class="mt-1">
                                                        @if ($perpStatusOps === 'pending')
                                                            <span style="display:inline-flex;align-items:center;gap:3px;
                                                                        padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                        font-weight:700;background:#fef9c3;color:#854d0e;
                                                                        border:1px solid #fde047;
                                                                        animation:perp-pulse 2s infinite;white-space:nowrap;">
                                                                <i class="fas fa-clock" style="font-size:.58rem;"></i>
                                                                Perpanjangan Pending
                                                            </span>
                                                        @elseif ($perpStatusOps === 'approved')
                                                            <span style="display:inline-flex;align-items:center;gap:3px;
                                                                        padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                        font-weight:700;background:#d1fae5;color:#065f46;
                                                                        border:1px solid #6ee7b7;white-space:nowrap;">
                                                                <i class="fas fa-check-circle" style="font-size:.58rem;"></i>
                                                                Diperpanjang
                                                            </span>
                                                        @elseif ($perpStatusOps === 'rejected')
                                                            <span style="display:inline-flex;align-items:center;gap:3px;
                                                                        padding:2px 7px;border-radius:20px;font-size:.62rem;
                                                                        font-weight:700;background:#fee2e2;color:#991b1b;
                                                                        border:1px solid #fca5a5;white-space:nowrap;">
                                                                <i class="fas fa-times-circle" style="font-size:.58rem;"></i>
                                                                Perp. Ditolak
                                                            </span>
                                                        @endif
                                                    </div>
                                                @endif
                                                {{-- -------------------------------------------------- --}}
                                            </td>
                                        </tr>

                                        <tr>
                                            <td colspan="9" class="p-0" style="border: 1px solid #dee2e6 !important;">
                                                <div class="barang-pendukung-wrapper px-3 py-2"
                                                    style="background:#f8fffe; border-top:2px dashed #00b7bd;">

                                                    @foreach ($opsionalAssets[$ops->id] ?? [] as $oa)
                                                        @php
                                                            $bpList = $opsionalConditions[$oa->id] ?? collect();

                                                            $oaAlreadyApproved =
                                                                isset($opsionalAssetStatusMap[$oa->id]) &&
                                                                $opsionalAssetStatusMap[$oa->id] === 'approve';
                                                            $oaAlreadyReturned =
                                                                isset($opsionalAssetStatusMap[$oa->id]) &&
                                                                in_array($opsionalAssetStatusMap[$oa->id], [
                                                                    'approve',
                                                                    'reject',
                                                                ]);
                                                            $oaBpKembaliList =
                                                                $opsionalAssetReturnData[$oa->id] ?? collect();
                                                        @endphp

                                                        @if ($canReturn)
                                                            <span
                                                                style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:#cffafe;color:#0e7490;border:1px solid #a5f3fc;white-space:nowrap;">
                                                                <i class="fas fa-undo" style="font-size:.65rem;"></i> DATA
                                                                RETURN
                                                            </span>
                                                            <span
                                                                class="fw-bold text-dark">{{ $ops->nama_barang ?? '-' }}</span>

                                                            <code class="text-muted"
                                                                style="font-size:.78rem;">{{ $oa->kode_asset }}</code>

                                                            @if (!empty($oa->kondisi_asset))
                                                                @php
                                                                    $kondisiColor = match ($oa->kondisi_asset) {
                                                                        'baik' => [
                                                                            'bg' => '#d1fae5',
                                                                            'text' => '#10b981',
                                                                            'border' => '#6ee7b7',
                                                                        ],
                                                                        'rusak_ringan' => [
                                                                            'bg' => '#fef3c7',
                                                                            'text' => '#f59e0b',
                                                                            'border' => '#fcd34d',
                                                                        ],
                                                                        'rusak_berat', 'hilang' => [
                                                                            'bg' => '#fee2e2',
                                                                            'text' => '#ef4444',
                                                                            'border' => '#fca5a5',
                                                                        ],
                                                                        default => [
                                                                            'bg' => '#f1f5f9',
                                                                            'text' => '#6b7280',
                                                                            'border' => '#cbd5e1',
                                                                        ],
                                                                    };
                                                                @endphp
                                                                <span
                                                                    style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $kondisiColor['bg'] }};color:{{ $kondisiColor['text'] }};border:1px solid {{ $kondisiColor['border'] }};white-space:nowrap;">
                                                                    {{ strtoupper(str_replace('_', ' ', $oa->kondisi_asset)) }}
                                                                </span>
                                                            @endif
                                                            @if (!empty($oa->status_asset) && $oa->status_asset !== 'ready')
                                                                @php
                                                                    $statusAssetColor = match ($oa->status_asset) {
                                                                        'borrowed' => [
                                                                            'bg' => '#f5d0fe',
                                                                            'text' => '#a21caf',
                                                                            'border' => '#e9d5ff',
                                                                        ],
                                                                        'approve' => [
                                                                            'bg' => '#d1fae5',
                                                                            'text' => '#10b981',
                                                                            'border' => '#6ee7b7',
                                                                        ],
                                                                        'reject' => [
                                                                            'bg' => '#fee2e2',
                                                                            'text' => '#ef4444',
                                                                            'border' => '#fca5a5',
                                                                        ],
                                                                        default => [
                                                                            'bg' => '#f1f5f9',
                                                                            'text' => '#6b7280',
                                                                            'border' => '#cbd5e1',
                                                                        ],
                                                                    };
                                                                @endphp
                                                                <span
                                                                    style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $statusAssetColor['bg'] }};color:{{ $statusAssetColor['text'] }};border:1px solid {{ $statusAssetColor['border'] }};white-space:nowrap;">
                                                                    {{ strtoupper($oa->status_asset) }}
                                                                </span>
                                                            @endif
                                                            <span
                                                                style="margin-left:auto; display:inline-flex; align-items:center; gap:4px;
                                                                padding:4px 10px; border-radius:8px; font-weight:700;
                                                                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>
                                                            @if ($oaAlreadyApproved)
                                                                <div class="return-asset-section mt-3 p-3 rounded"
                                                                    style="background:#f0fdf4; border:1.5px solid #10b981;">
                                                                    <div class="return-section-label mb-2"
                                                                        style="color:#059669;">
                                                                        <i class="fas fa-check-circle me-1"></i>
                                                                        Return Sudah Di-Approve —
                                                                        <strong>{{ $ops->nama_barang ?? '-' }}
                                                                            ({{ $oa->kode_asset }})
                                                                        </strong>
                                                                    </div>

                                                                    <input type="hidden"
                                                                        name="opsional_assets[{{ $oa->id }}][asset_id]"
                                                                        value="{{ $oa->id }}">
                                                                    <input type="hidden"
                                                                        name="opsional_assets[{{ $oa->id }}][kondisi_asset]"
                                                                        value="{{ $oa->kondisi_asset }}">
                                                                    <input type="hidden"
                                                                        name="opsional_assets[{{ $oa->id }}][status_asset]"
                                                                        value="{{ $oa->status_asset }}">
                                                                    <input type="hidden"
                                                                        name="opsional_assets[{{ $oa->id }}][catatan]"
                                                                        value="{{ $oa->catatan ?? '' }}">

                                                                    <div class="row g-2">
                                                                        <div class="col-md-3">
                                                                            <label
                                                                                class="prb-form-label text-muted">Kondisi
                                                                                Asset</label>
                                                                            <input type="text"
                                                                                class="form-control form-control-sm"
                                                                                value="{{ strtoupper(str_replace('_', ' ', $oa->kondisi_asset ?? '-')) }}"
                                                                                readonly
                                                                                style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <label class="prb-form-label text-muted">Status
                                                                                Return</label>
                                                                            <input type="text"
                                                                                class="form-control form-control-sm"
                                                                                value="APPROVE" readonly
                                                                                style="background:#f0fdf4; border-color:#6ee7b7; color:#059669; font-weight:700;">
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <label
                                                                                class="prb-form-label text-muted">Catatan</label>
                                                                            <input type="text"
                                                                                class="form-control form-control-sm"
                                                                                value="{{ $oa->catatan ?? '-' }}"
                                                                                readonly
                                                                                style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                        </div>
                                                                    </div>

                                                                    @if ($bpList->count() > 0)
                                                                        <div class="mt-3 pt-2"
                                                                            style="border-top:1px dashed #6ee7b7;">
                                                                            <div class="text-muted small fw-semibold mb-2"
                                                                                style="letter-spacing:.03em;">
                                                                                <i class="fas fa-boxes me-1"
                                                                                    style="color:#059669;"></i>
                                                                                Barang Pendukung
                                                                            </div>

                                                                            @foreach ($bpList as $bp)
                                                                                @php
                                                                                    $oaBpKembali = $oaBpKembaliList->firstWhere(
                                                                                        'nama_barang_pendukung',
                                                                                        $bp->nama_barang_pendukung,
                                                                                    );
                                                                                    $bpStatusKembali =
                                                                                        $oaBpKembali->status_barang_pendukung ??
                                                                                        null;
                                                                                    $bpSudahApprove =
                                                                                        $bpStatusKembali === 'approve';

                                                                                    $bpKondisiAwalColor = match (
                                                                                        $bp->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    };
                                                                                @endphp

                                                                                @if ($bpSudahApprove)
                                                                                    <div class="return-bp-row p-2 mb-2 rounded"
                                                                                        style="background:#f0fdf4; border:1px solid #6ee7b7;">
                                                                                        <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                            style="color:#059669;">
                                                                                            <i
                                                                                                class="fas fa-check-circle"></i>
                                                                                            Barang Pendukung di-Approve
                                                                                        </div>
                                                                                        <input type="hidden"
                                                                                            name="opsional_barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                            value="{{ $bp->id }}">
                                                                                        <input type="hidden"
                                                                                            name="opsional_barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                            value="{{ $oaBpKembali->kondisi_barang_pendukung }}">
                                                                                        <input type="hidden"
                                                                                            name="opsional_barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                            value="{{ $oaBpKembali->status_barang_pendukung }}">
                                                                                        <input type="hidden"
                                                                                            name="opsional_barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                            value="{{ $oaBpKembali->catatan ?? '' }}">

                                                                                        @php
                                                                                            $bpKondisiKembaliColor = match (
                                                                                                $oaBpKembali->kondisi_barang_pendukung ??
                                                                                                    ''
                                                                                            ) {
                                                                                                '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',
                                                                                                ],
                                                                                                default => [
                                                                                                    'bg' => '#f1f5f9',
                                                                                                    'text' => '#6b7280',
                                                                                                    'border' =>
                                                                                                        '#cbd5e1',
                                                                                                    'icon' =>
                                                                                                        'fa-circle',
                                                                                                ],
                                                                                            };
                                                                                        @endphp
                                                                                        <div
                                                                                            class="row g-2 align-items-center mb-2">
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                        <i class="fas fa-arrow-right"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Awal Saat
                                                                                                            Dipinjam</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiAwalColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        <span
                                                                                                            class="text-muted">—
                                                                                                            {{ $bp->nama_barang_pendukung ?? '-' }}</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                        <i class="fas fa-undo-alt"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Kembali (Dicek
                                                                                                            Admin)</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $oaBpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div
                                                                                            class="row g-2 align-items-center">
                                                                                            <div class="col-md-3">
                                                                                                <label
                                                                                                    class="prb-form-label text-muted">Nama
                                                                                                    Barang Pendukung</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $oaBpKembali->nama_barang_pendukung ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-2">
                                                                                                <label
                                                                                                    class="prb-form-label text-muted">Kondisi</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ strtoupper(str_replace('_', ' ', $oaBpKembali->kondisi_barang_pendukung ?? '-')) }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-2">
                                                                                                <label
                                                                                                    class="prb-form-label text-muted">Status</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="APPROVE"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; font-weight:700; color:#059669;">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-5">
                                                                                                <label
                                                                                                    class="prb-form-label text-muted">Catatan</label>
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $oaBpKembali->catatan ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @else
                                                                                    @php
                                                                                        $oaBpIsRejected =
                                                                                            $oaBpKembali &&
                                                                                            $oaBpKembali->status_barang_pendukung ===
                                                                                                'reject';
                                                                                        $oaBpWrapperBg = $oaBpIsRejected
                                                                                            ? '#fee2e2'
                                                                                            : '#fff8e1';
                                                                                        $oaBpWrapperBorder = $oaBpIsRejected
                                                                                            ? '#fca5a5'
                                                                                            : '#fcd34d';
                                                                                    @endphp
                                                                                    <div class="return-bp-row p-2 mb-2 rounded"
                                                                                        style="background:{{ $oaBpWrapperBg }}; border:1.5px solid {{ $oaBpWrapperBorder }};">
                                                                                        <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                            style="color:{{ $oaBpIsRejected ? '#991b1b' : '#d97706' }};">
                                                                                            <i
                                                                                                class="fas fa-{{ $oaBpIsRejected ? 'times-circle' : 'undo-alt' }}"></i>
                                                                                            {{ $oaBpIsRejected ? 'Barang Pendukung di-Reject' : 'Pengecekan Return Barang Pendukung' }}
                                                                                            <span class="badge ms-auto"
                                                                                                style="background:{{ $oaBpIsRejected ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                                                <i
                                                                                                    class="fas fa-pencil-alt me-1"></i>
                                                                                                {{ $oaBpIsRejected ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                                            </span>
                                                                                        </div>
                                                                                        <input type="hidden"
                                                                                            name="opsional_barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                            value="{{ $bp->id }}">
                                                                                        @php
                                                                                            $bpKondisiKembaliColor = $oaBpKembali
                                                                                                ? match (
                                                                                                    $oaBpKembali->kondisi_barang_pendukung ??
                                                                                                        ''
                                                                                                ) {
                                                                                                    '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',
                                                                                                    ],
                                                                                                    default => [
                                                                                                        'bg' =>
                                                                                                            '#f1f5f9',
                                                                                                        'text' =>
                                                                                                            '#6b7280',
                                                                                                        'border' =>
                                                                                                            '#cbd5e1',
                                                                                                        'icon' =>
                                                                                                            'fa-circle',
                                                                                                    ],
                                                                                                }
                                                                                                : null;
                                                                                        @endphp
                                                                                        <div
                                                                                            class="row g-2 align-items-center mb-2">
                                                                                            <div class="col-md-6">
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                        <i class="fas fa-arrow-right"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Awal Saat
                                                                                                            Dipinjam</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiAwalColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        <span
                                                                                                            class="text-muted">—
                                                                                                            {{ $bp->nama_barang_pendukung ?? '-' }}</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                @if ($oaBpKembali && $bpKondisiKembaliColor)
                                                                                                    <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                        style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                        <div class="flex-shrink-0 mt-1"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                            <i class="fas fa-undo-alt"
                                                                                                                style="font-size:.8rem;"></i>
                                                                                                        </div>
                                                                                                        <div
                                                                                                            style="font-size:.75rem; line-height:1.5;">
                                                                                                            <span
                                                                                                                class="d-block fw-semibold text-muted"
                                                                                                                style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                                Kembali
                                                                                                                (Dicek
                                                                                                                Admin)</span>
                                                                                                            <span
                                                                                                                class="fw-bold"
                                                                                                                style="color:{{ $bpKondisiKembaliColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $oaBpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                @else
                                                                                                    <div class="p-2 rounded h-100 d-flex align-items-center gap-2"
                                                                                                        style="background:#fffbeb; border:1px dashed #f59e0b;">
                                                                                                        <i class="fas fa-pencil-alt"
                                                                                                            style="color:#d97706; font-size:.85rem;"></i>
                                                                                                        <span
                                                                                                            class="small"
                                                                                                            style="color:#d97706; font-style:italic;">Belum
                                                                                                            diisi — silakan
                                                                                                            isi form di
                                                                                                            bawah</span>
                                                                                                    </div>
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                        <div
                                                                                            class="row g-2 align-items-center">
                                                                                            <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="{{ $bp->nama_barang_pendukung ?? '-' }}"
                                                                                                    readonly>
                                                                                            </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 @error('opsional_barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    required>
                                                                                                    <option value="">
                                                                                                        -- Pilih --</option>
                                                                                                    @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                                        <option
                                                                                                            value="{{ $val }}"
                                                                                                            {{ old('opsional_barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung', $oaBpKembali->kondisi_barang_pendukung ?? ($bp->kondisi_barang_pendukung ?? '')) === $val ? 'selected' : '' }}>
                                                                                                            {{ $label }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id .
                                                                                                    '.kondisi_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </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 @error('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    required>
                                                                                                    <option
                                                                                                        value="">--
                                                                                                        Pilih --</option>
                                                                                                    <option
                                                                                                        value="approve"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                                        Approve</option>
                                                                                                    <option value="reject"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                                        Reject</option>
                                                                                                    <option
                                                                                                        value="borrowed"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                                        Borrowed</option>
                                                                                                </select>
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id .
                                                                                                    '.status_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </div>
                                                                                            <div class="col-md-5">
                                                                                                <label
                                                                                                    class="prb-form-label">Catatan</label>
                                                                                                <input type="text"
                                                                                                    class="form-control form-control-sm return-input @error('opsional_barang_pendukung.' . $bp->id . '.catatan') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    placeholder="Catatan (opsional)..."
                                                                                                    value="{{ old('opsional_barang_pendukung.' . $bp->id . '.catatan', $oaBpKembali->catatan ?? '') }}">
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id . '.catatan')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @endif
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @else
                                                                <div class="return-asset-section mt-2 p-3 rounded"
                                                                    style="background:{{ $oaAlreadyReturned ? '#fee2e2' : '#fffbeb' }}; border:1.5px solid {{ $oaAlreadyReturned ? '#ef4444' : '#f59e0b' }};">
                                                                    <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                        style="color:{{ $oaAlreadyReturned ? '#991b1b' : '#d97706' }};">
                                                                        <i
                                                                            class="fas fa-{{ $oaAlreadyReturned ? 'times-circle' : 'undo-alt' }}"></i>
                                                                        @if ($oaAlreadyReturned)
                                                                            Re-Submit Return Asset Opsional (Sebelumnya
                                                                            Reject) —
                                                                        @else
                                                                            Pengecekan Return Asset Opsional —
                                                                        @endif
                                                                        <strong>{{ $ops->nama_barang ?? '-' }}
                                                                            ({{ $oa->kode_asset }})</strong>
                                                                        <span class="badge ms-auto"
                                                                            style="background:{{ $oaAlreadyReturned ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                            <i
                                                                                class="fas fa-pencil-alt me-1"></i>{{ $oaAlreadyReturned ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                        </span>
                                                                    </div>
                                                                    <input type="hidden"
                                                                        name="opsional_assets[{{ $oa->id }}][asset_id]"
                                                                        value="{{ $oa->id }}">

                                                                    <div class="row g-2">
                                                                        <div class="col-md-3">
                                                                            <label class="prb-form-label">Kondisi Asset
                                                                                <span class="text-danger">*</span></label>
                                                                            <select
                                                                                class="form-select form-select-sm return-input @error('opsional_assets.' . $oa->id . '.kondisi_asset') is-invalid @enderror"
                                                                                name="opsional_assets[{{ $oa->id }}][kondisi_asset]"
                                                                                required
                                                                                style="background:#fff; border-color:#dee2e6;">
                                                                                <option value="">-- Pilih --
                                                                                </option>
                                                                                @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                    <option value="{{ $val }}"
                                                                                        {{ old('opsional_assets.' . $oa->id . '.kondisi_asset', $oa->kondisi_asset ?? '') === $val ? 'selected' : '' }}>
                                                                                        {{ $label }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                            @error('opsional_assets.' . $oa->id .
                                                                                '.kondisi_asset')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <label class="prb-form-label">Status Return
                                                                                <span class="text-danger">*</span></label>
                                                                            <select
                                                                                class="form-select form-select-sm return-input @error('opsional_assets.' . $oa->id . '.status_asset') is-invalid @enderror"
                                                                                name="opsional_assets[{{ $oa->id }}][status_asset]"
                                                                                required
                                                                                style="background:#fff; border-color:#dee2e6;">
                                                                                <option value="">-- Pilih --
                                                                                </option>
                                                                                <option value="approve"
                                                                                    {{ old('opsional_assets.' . $oa->id . '.status_asset', $oa->status_asset ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                    Approve</option>
                                                                                <option value="reject"
                                                                                    {{ old('opsional_assets.' . $oa->id . '.status_asset', $oa->status_asset ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                    Reject</option>
                                                                                <option value="borrowed"
                                                                                    {{ old('opsional_assets.' . $oa->id . '.status_asset', $oa->status_asset ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                    Borrowed</option>
                                                                            </select>
                                                                            @error('opsional_assets.' . $oa->id .
                                                                                '.status_asset')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>
                                                                        <div class="col-md-7">
                                                                            <label class="prb-form-label">Catatan</label>
                                                                            <input type="text"
                                                                                class="form-control form-control-sm return-input @error('opsional_assets.' . $oa->id . '.catatan') is-invalid @enderror"
                                                                                name="opsional_assets[{{ $oa->id }}][catatan]"
                                                                                placeholder="Catatan kondisi asset (opsional)..."
                                                                                value="{{ old('opsional_assets.' . $oa->id . '.catatan', $oa->catatan ?? '') }}"
                                                                                style="background:#fff; border-color:#dee2e6;">
                                                                            @error('opsional_assets.' . $oa->id .
                                                                                '.catatan')
                                                                                <div class="prb-field-error">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                                    @if ($bpList->count() > 0)
                                                                        <div class="mt-3 pt-2"
                                                                            style="border-top:1px dashed #f59e0b;">
                                                                            <div class="text-muted small fw-semibold mb-2"
                                                                                style="letter-spacing:.03em;">
                                                                                <i class="fas fa-boxes me-1"
                                                                                    style="color:#d97706;"></i>
                                                                                Barang Pendukung Opsional
                                                                            </div>
                                                                            @foreach ($bpList as $bp)
                                                                                @php
                                                                                    $oaBpKembali = $oaBpKembaliList->firstWhere(
                                                                                        'nama_barang_pendukung',
                                                                                        $bp->nama_barang_pendukung,
                                                                                    );
                                                                                    $oaBpIsApproved =
                                                                                        $oaBpKembali &&
                                                                                        $oaBpKembali->status_barang_pendukung ===
                                                                                            'approve';
                                                                                    $oaBpIsRejected =
                                                                                        $oaBpKembali &&
                                                                                        $oaBpKembali->status_barang_pendukung ===
                                                                                            'reject';
                                                                                    $oaBpWrapperBg = $oaBpIsApproved
                                                                                        ? '#f0fdf4'
                                                                                        : ($oaBpIsRejected
                                                                                            ? '#fee2e2'
                                                                                            : '#fff8e1');
                                                                                    $oaBpWrapperBorder = $oaBpIsApproved
                                                                                        ? '#10b981'
                                                                                        : ($oaBpIsRejected
                                                                                            ? '#ef4444'
                                                                                            : '#f59e0b');

                                                                                    $bpKondisiAwalColor = match (
                                                                                        $bp->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    };
                                                                                @endphp
                                                                                <div class="return-bp-row p-2 mb-2 rounded"
                                                                                    style="background:{{ $oaBpWrapperBg }}; border:1.5px solid {{ $oaBpWrapperBorder }};">
                                                                                    <div class="return-section-label mb-2 d-flex align-items-center gap-2"
                                                                                        style="color:{{ $oaBpIsApproved ? '#059669' : ($oaBpIsRejected ? '#991b1b' : '#d97706') }};">
                                                                                        <i
                                                                                            class="fas fa-{{ $oaBpIsApproved ? 'check-circle' : ($oaBpIsRejected ? 'times-circle' : 'undo-alt') }}"></i>
                                                                                        {{ $oaBpIsApproved ? 'Barang Pendukung Opsional di-Approve' : ($oaBpIsRejected ? 'Barang Pendukung Opsional di-Reject' : 'Pengecekan Return Barang Pendukung Opsional') }}
                                                                                        @if (!$oaBpIsApproved)
                                                                                            <span class="badge ms-auto"
                                                                                                style="background:{{ $oaBpIsRejected ? '#ef4444' : '#f59e0b' }}; color:#fff; font-size:.7rem; font-weight:500;">
                                                                                                <i
                                                                                                    class="fas fa-pencil-alt me-1"></i>
                                                                                                {{ $oaBpIsRejected ? 'Bisa diisi ulang' : 'Perlu diisi' }}
                                                                                            </span>
                                                                                        @endif
                                                                                    </div>
                                                                                    <input type="hidden"
                                                                                        name="opsional_barang_pendukung[{{ $bp->id }}][bp_id]"
                                                                                        value="{{ $bp->id }}">
                                                                                    <div
                                                                                        class="row g-2 align-items-center mb-2">
                                                                                        <div class="col-md-6">
                                                                                            <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                style="background:{{ $bpKondisiAwalColor['bg'] }}; border:1px dashed {{ $bpKondisiAwalColor['border'] }};">
                                                                                                <div class="flex-shrink-0 mt-1"
                                                                                                    style="color:{{ $bpKondisiAwalColor['text'] }};">
                                                                                                    <i class="fas fa-arrow-right"
                                                                                                        style="font-size:.8rem;"></i>
                                                                                                </div>
                                                                                                <div
                                                                                                    style="font-size:.75rem; line-height:1.5;">
                                                                                                    <span
                                                                                                        class="d-block fw-semibold text-muted"
                                                                                                        style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                        Awal Saat
                                                                                                        Dipinjam</span>
                                                                                                    <span class="fw-bold"
                                                                                                        style="color:{{ $bpKondisiAwalColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                    <span
                                                                                                        class="text-muted">—
                                                                                                        {{ $bp->nama_barang_pendukung ?? '-' }}</span>
                                                                                                    @if (!empty($bp->catatan))
                                                                                                        <span
                                                                                                            class="d-block text-muted fst-italic"
                                                                                                            style="font-size:.72rem;">
                                                                                                            <i
                                                                                                                class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}
                                                                                                        </span>
                                                                                                    @endif
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-6">
                                                                                            @if ($oaBpKembali)
                                                                                                @php
                                                                                                    $bpKondisiKembaliColor = match (
                                                                                                        $oaBpKembali->kondisi_barang_pendukung ??
                                                                                                            ''
                                                                                                    ) {
                                                                                                        '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',
                                                                                                        ],
                                                                                                        default => [
                                                                                                            'bg' =>
                                                                                                                '#f1f5f9',
                                                                                                            'text' =>
                                                                                                                '#6b7280',
                                                                                                            'border' =>
                                                                                                                '#cbd5e1',
                                                                                                            'icon' =>
                                                                                                                'fa-circle',
                                                                                                        ],
                                                                                                    };
                                                                                                @endphp
                                                                                                <div class="d-flex align-items-start gap-2 p-2 rounded"
                                                                                                    style="background:{{ $bpKondisiKembaliColor['bg'] }}; border:1px dashed {{ $bpKondisiKembaliColor['border'] }};">
                                                                                                    <div class="flex-shrink-0 mt-1"
                                                                                                        style="color:{{ $bpKondisiKembaliColor['text'] }};">
                                                                                                        <i class="fas fa-undo-alt"
                                                                                                            style="font-size:.8rem;"></i>
                                                                                                    </div>
                                                                                                    <div
                                                                                                        style="font-size:.75rem; line-height:1.5;">
                                                                                                        <span
                                                                                                            class="d-block fw-semibold text-muted"
                                                                                                            style="font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;">Kondisi
                                                                                                            Kembali (Dicek
                                                                                                            Admin)</span>
                                                                                                        <span
                                                                                                            class="fw-bold"
                                                                                                            style="color:{{ $bpKondisiKembaliColor['text'] }};">{{ strtoupper(str_replace('_', ' ', $oaBpKembali->kondisi_barang_pendukung ?? 'N/A')) }}</span>
                                                                                                        @if (!empty($oaBpKembali->catatan))
                                                                                                            <span
                                                                                                                class="d-block text-muted fst-italic"
                                                                                                                style="font-size:.72rem;">
                                                                                                                <i
                                                                                                                    class="fas fa-sticky-note me-1"></i>{{ $oaBpKembali->catatan }}
                                                                                                            </span>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            @else
                                                                                                <div class="p-2 rounded h-100 d-flex align-items-center gap-2"
                                                                                                    style="background:#fffbeb; border:1px dashed #f59e0b;">
                                                                                                    <i class="fas fa-pencil-alt"
                                                                                                        style="color:#d97706; font-size:.85rem;"></i>
                                                                                                    <span class="small"
                                                                                                        style="color:#d97706; font-style:italic;">Belum
                                                                                                        diisi — silakan isi
                                                                                                        form di bawah</span>
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>
                                                                                    <div
                                                                                        class="row g-2 align-items-center">
                                                                                        <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="{{ $bp->nama_barang_pendukung ?? '-' }}"
                                                                                                readonly
                                                                                                style="background:{{ $oaBpIsApproved ? '#f0fdf4' : '#E9ECFE' }}; border-color:{{ $oaBpIsApproved ? '#6ee7b7' : '#dee2e6' }};">
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                            <label
                                                                                                class="prb-form-label">Kondisi
                                                                                                <span
                                                                                                    class="text-danger">{{ $oaBpIsApproved ? '' : '*' }}</span></label>
                                                                                            @if ($oaBpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    value="{{ $oaBpKembali->kondisi_barang_pendukung }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ strtoupper(str_replace('_', ' ', $oaBpKembali->kondisi_barang_pendukung ?? '-')) }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; color:#059669; font-weight:600;">
                                                                                                </div>
                                                                                            @else
                                                                                                <select
                                                                                                    class="form-select form-select-sm return-input @error('opsional_barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][kondisi_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6; border-width:1px;">
                                                                                                    <option
                                                                                                        value="">--
                                                                                                        Pilih Kondisi --
                                                                                                    </option>
                                                                                                    @foreach (['baik' => 'Baik', 'rusak_ringan' => 'Rusak Ringan', 'rusak_berat' => 'Rusak Berat', 'hilang' => 'Hilang', 'tidak_ada' => 'Tidak Ada'] as $val => $label)
                                                                                                        <option
                                                                                                            value="{{ $val }}"
                                                                                                            {{ old('opsional_barang_pendukung.' . $bp->id . '.kondisi_barang_pendukung', $oaBpKembali->kondisi_barang_pendukung ?? ($bp->kondisi_barang_pendukung ?? '')) === $val ? 'selected' : '' }}>
                                                                                                            {{ $label }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id .
                                                                                                    '.kondisi_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                            <label
                                                                                                class="prb-form-label">Status
                                                                                                <span
                                                                                                    class="text-danger">{{ $oaBpIsApproved ? '' : '*' }}</span></label>
                                                                                            @if ($oaBpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    value="{{ $oaBpKembali->status_barang_pendukung }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="APPROVE"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7; color:#059669; font-weight:700;">
                                                                                                </div>
                                                                                            @else
                                                                                                <select
                                                                                                    class="form-select form-select-sm return-input @error('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][status_barang_pendukung]"
                                                                                                    required
                                                                                                    style="background:#fff; border-color:#dee2e6; border-width:1px;">
                                                                                                    <option
                                                                                                        value="">--
                                                                                                        Pilih Status --
                                                                                                    </option>
                                                                                                    <option
                                                                                                        value="approve"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'approve' ? 'selected' : '' }}>
                                                                                                        Approve</option>
                                                                                                    <option value="reject"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'reject' ? 'selected' : '' }}>
                                                                                                        Reject</option>
                                                                                                    <option
                                                                                                        value="borrowed"
                                                                                                        {{ old('opsional_barang_pendukung.' . $bp->id . '.status_barang_pendukung', $oaBpKembali->status_barang_pendukung ?? '') === 'borrowed' ? 'selected' : '' }}>
                                                                                                        Borrowed</option>
                                                                                                </select>
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id .
                                                                                                    '.status_barang_pendukung')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>
                                                                                        <div class="col-md-5">
                                                                                            <label
                                                                                                class="prb-form-label">Catatan</label>
                                                                                            @if ($oaBpIsApproved)
                                                                                                <input type="hidden"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    value="{{ $oaBpKembali->catatan ?? '' }}">
                                                                                                <div
                                                                                                    class="input-group input-group-sm">
                                                                                                    <span
                                                                                                        class="input-group-text"
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                        <i class="fas fa-lock"
                                                                                                            style="font-size:.7rem; color:#059669;"></i>
                                                                                                    </span>
                                                                                                    <input type="text"
                                                                                                        class="form-control form-control-sm"
                                                                                                        value="{{ $oaBpKembali->catatan ?? '-' }}"
                                                                                                        readonly
                                                                                                        style="background:#f0fdf4; border-color:#6ee7b7;">
                                                                                                </div>
                                                                                            @else
                                                                                                <input type="text"
                                                                                                    class="form-control form-control-sm return-input @error('opsional_barang_pendukung.' . $bp->id . '.catatan') is-invalid @enderror"
                                                                                                    name="opsional_barang_pendukung[{{ $bp->id }}][catatan]"
                                                                                                    placeholder="Catatan (opsional)..."
                                                                                                    value="{{ old('opsional_barang_pendukung.' . $bp->id . '.catatan', $oaBpKembali->catatan ?? '') }}"
                                                                                                    style="background:#fff; border-color:#dee2e6;">
                                                                                                @error('opsional_barang_pendukung.'
                                                                                                    . $bp->id . '.catatan')
                                                                                                    <div
                                                                                                        class="prb-field-error">
                                                                                                        {{ $message }}
                                                                                                    </div>
                                                                                                @enderror
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @else
                                                            <div class="mt-2 pt-2"
                                                                style="border-top:1px dashed #b2e0e2;">
                                                                <div
                                                                    class="text-muted small fw-semibold mb-2 d-flex align-items-center flex-wrap gap-2">
                                                                    <i class="fas fa-clipboard-list"
                                                                        style="color:#0a8f97;"></i>

                                                                    @if ($oaAlreadyReturned)
                                                                        <span
                                                                            style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:#cffafe;color:#0e7490;border:1px solid #a5f3fc;white-space:nowrap;">
                                                                            <i class="fas fa-undo"
                                                                                style="font-size:.65rem;"></i> DATA RETURN
                                                                        </span>
                                                                    @else
                                                                        <span
                                                                            style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;white-space:nowrap;">
                                                                            <i class="fas fa-boxes"
                                                                                style="font-size:.65rem;"></i> BARANG
                                                                            PENDUKUNG
                                                                        </span>
                                                                    @endif

                                                                    <span
                                                                        class="fw-bold text-dark">{{ $ops->nama_barang ?? '-' }}</span>
                                                                    <code class="text-muted"
                                                                        style="font-size:.78rem;">{{ $oa->kode_asset }}</code>

                                                                    @if (!empty($oa->kondisi_asset))
                                                                        @php
                                                                            $kondisiColor = match ($oa->kondisi_asset) {
                                                                                'baik' => [
                                                                                    'bg' => '#d1fae5',
                                                                                    'text' => '#10b981',
                                                                                    'border' => '#6ee7b7',
                                                                                ],
                                                                                'rusak_ringan' => [
                                                                                    'bg' => '#fef3c7',
                                                                                    'text' => '#f59e0b',
                                                                                    'border' => '#fcd34d',
                                                                                ],
                                                                                'rusak_berat', 'hilang' => [
                                                                                    'bg' => '#fee2e2',
                                                                                    'text' => '#ef4444',
                                                                                    'border' => '#fca5a5',
                                                                                ],
                                                                                default => [
                                                                                    'bg' => '#f1f5f9',
                                                                                    'text' => '#6b7280',
                                                                                    'border' => '#cbd5e1',
                                                                                ],
                                                                            };
                                                                        @endphp
                                                                        <span
                                                                            style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $kondisiColor['bg'] }};color:{{ $kondisiColor['text'] }};border:1px solid {{ $kondisiColor['border'] }};white-space:nowrap;">
                                                                            {{ strtoupper(str_replace('_', ' ', $oa->kondisi_asset)) }}
                                                                        </span>
                                                                    @endif

                                                                    @if (!empty($oa->status_asset) && $oa->status_asset !== 'ready')
                                                                        @php
                                                                            $statusAssetColor = match (
                                                                                $oa->status_asset
                                                                            ) {
                                                                                'borrowed' => [
                                                                                    'bg' => '#f5d0fe',
                                                                                    'text' => '#a21caf',
                                                                                    'border' => '#e9d5ff',
                                                                                ],
                                                                                'approve' => [
                                                                                    'bg' => '#d1fae5',
                                                                                    'text' => '#10b981',
                                                                                    'border' => '#6ee7b7',
                                                                                ],
                                                                                'reject' => [
                                                                                    'bg' => '#fee2e2',
                                                                                    'text' => '#ef4444',
                                                                                    'border' => '#fca5a5',
                                                                                ],
                                                                                default => [
                                                                                    'bg' => '#f1f5f9',
                                                                                    'text' => '#6b7280',
                                                                                    'border' => '#cbd5e1',
                                                                                ],
                                                                            };
                                                                        @endphp
                                                                        <span
                                                                            style="display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:{{ $statusAssetColor['bg'] }};color:{{ $statusAssetColor['text'] }};border:1px solid {{ $statusAssetColor['border'] }};white-space:nowrap;">
                                                                            {{ strtoupper($oa->status_asset) }}
                                                                        </span>
                                                                    @endif

                                                                    @if (!empty($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>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            @if ($oaAlreadyReturned)
                                                                @php
                                                                    $oaBpAwalList = $opsionalConditions->get(
                                                                        (string) $oa->id,
                                                                        collect(),
                                                                    );
                                                                    $oaIsApproved =
                                                                        isset($opsionalAssetStatusMap[$oa->id]) &&
                                                                        $opsionalAssetStatusMap[$oa->id] === 'approve';
                                                                    $oaIsRejected =
                                                                        isset($opsionalAssetStatusMap[$oa->id]) &&
                                                                        $opsionalAssetStatusMap[$oa->id] === 'reject';
                                                                @endphp

                                                                <div class="perbandingan-return-wrapper mb-3 p-3 rounded"
                                                                    style="background:{{ $oaIsApproved ? '#f0fdf4' : '#fff8f8' }}; border:1.5px solid {{ $oaIsApproved ? '#10b981' : '#ef4444' }};">
                                                                    <div class="d-flex align-items-center gap-2 mb-3">
                                                                        <span class="fw-bold"
                                                                            style="font-size:.8rem; color:{{ $oaIsApproved ? '#059669' : '#dc2626' }};">
                                                                            <i
                                                                                class="fas {{ $oaIsApproved ? 'fa-check-circle' : 'fa-times-circle' }} me-1"></i>
                                                                            Hasil Return Asset:
                                                                            <span
                                                                                style="text-transform:uppercase;">{{ $oa->status_asset ?? '-' }}</span>
                                                                        </span>
                                                                        @if (!empty($oa->catatan))
                                                                            <span class="text-muted small fst-italic">—
                                                                                {{ $oa->catatan }}</span>
                                                                        @endif
                                                                    </div>

                                                                    @if ($oaBpAwalList->count() > 0)
                                                                        <div class="text-muted small fw-semibold mb-2"
                                                                            style="font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;">
                                                                            <i class="fas fa-exchange-alt me-1"></i>
                                                                            Perbandingan Kondisi Barang Pendukung
                                                                        </div>

                                                                        @foreach ($oaBpAwalList as $bpAwal)
                                                                            @php
                                                                                $bpKembali = $oaBpKembaliList->firstWhere(
                                                                                    'nama_barang_pendukung',
                                                                                    $bpAwal->nama_barang_pendukung,
                                                                                );
                                                                                $kondisiAwalColor = match (
                                                                                    $bpAwal->kondisi_barang_pendukung ??
                                                                                        ''
                                                                                ) {
                                                                                    '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',
                                                                                    ],
                                                                                    default => [
                                                                                        'bg' => '#f1f5f9',
                                                                                        'text' => '#6b7280',
                                                                                        'border' => '#cbd5e1',
                                                                                        'icon' => 'fa-circle',
                                                                                    ],
                                                                                };
                                                                                $kondisiKembaliColor = $bpKembali
                                                                                    ? match (
                                                                                        $bpKembali->kondisi_barang_pendukung ??
                                                                                            ''
                                                                                    ) {
                                                                                        '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',
                                                                                        ],
                                                                                        default => [
                                                                                            'bg' => '#f1f5f9',
                                                                                            'text' => '#6b7280',
                                                                                            'border' => '#cbd5e1',
                                                                                            'icon' => 'fa-circle',
                                                                                        ],
                                                                                    }
                                                                                    : null;
                                                                                $bpStatusKembali =
                                                                                    $bpKembali->status_barang_pendukung ??
                                                                                    null;
                                                                            @endphp
                                                                            <div class="bp-perbandingan-row mb-3 p-2 rounded"
                                                                                style="background:#fff; border:1px solid #e4e9f0;">
                                                                                <div class="fw-semibold mb-2"
                                                                                    style="font-size:.8rem; color:#374151;">
                                                                                    <i
                                                                                        class="fas fa-box me-1 text-muted"></i>
                                                                                    {{ $bpAwal->nama_barang_pendukung ?? '-' }}
                                                                                    @if ($bpStatusKembali)
                                                                                        <span class="ms-2 badge"
                                                                                            style="font-size:.68rem; background:{{ $bpStatusKembali === 'approve' ? '#059669' : '#dc2626' }};">
                                                                                            {{ strtoupper($bpStatusKembali) }}
                                                                                        </span>
                                                                                    @endif
                                                                                </div>
                                                                                <div class="row g-2">
                                                                                    <div class="col-md-6">
                                                                                        <div class="p-2 rounded h-100"
                                                                                            style="background:{{ $kondisiAwalColor['bg'] }}; border:1px dashed {{ $kondisiAwalColor['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 {{ $kondisiAwalColor['icon'] }}"
                                                                                                    style="color:{{ $kondisiAwalColor['text'] }};"></i>
                                                                                                <span class="fw-bold"
                                                                                                    style="color:{{ $kondisiAwalColor['text'] }}; font-size:.82rem;">
                                                                                                    {{ strtoupper(str_replace('_', ' ', $bpAwal->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                                </span>
                                                                                            </div>
                                                                                            @if (!empty($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>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-6">
                                                                                        @if ($bpKembali && $kondisiKembaliColor)
                                                                                            <div class="p-2 rounded h-100"
                                                                                                style="background:{{ $kondisiKembaliColor['bg'] }}; border:1px dashed {{ $kondisiKembaliColor['border'] }};">
                                                                                                <div class="text-muted small fw-semibold mb-1"
                                                                                                    style="font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;">
                                                                                                    <i
                                                                                                        class="fas fa-undo-alt me-1"></i>Kondisi
                                                                                                    Kembali (Dicek Admin)
                                                                                                </div>
                                                                                                <div
                                                                                                    class="d-flex align-items-center gap-2">
                                                                                                    <i class="fas {{ $kondisiKembaliColor['icon'] }}"
                                                                                                        style="color:{{ $kondisiKembaliColor['text'] }};"></i>
                                                                                                    <span class="fw-bold"
                                                                                                        style="color:{{ $kondisiKembaliColor['text'] }}; font-size:.82rem;">
                                                                                                        {{ strtoupper(str_replace('_', ' ', $bpKembali->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                                    </span>
                                                                                                </div>
                                                                                                @if (!empty($bpKembali->catatan))
                                                                                                    <div class="text-muted fst-italic mt-1"
                                                                                                        style="font-size:.72rem;">
                                                                                                        <i
                                                                                                            class="fas fa-sticky-note me-1"></i>{{ $bpKembali->catatan }}
                                                                                                    </div>
                                                                                                @endif
                                                                                            </div>
                                                                                        @else
                                                                                            <div class="p-2 rounded h-100 d-flex align-items-center gap-2"
                                                                                                style="background:#fffbeb; border:1px dashed #f59e0b;">
                                                                                                <i class="fas fa-pencil-alt"
                                                                                                    style="color:#d97706; font-size:.85rem;"></i>
                                                                                                <span class="small"
                                                                                                    style="color:#d97706; font-style:italic;">Belum
                                                                                                    diisi — silakan isi form
                                                                                                    di bawah</span>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <div class="text-muted small fst-italic">
                                                                            <i class="fas fa-info-circle me-1"></i>Tidak
                                                                            ada barang pendukung pada asset ini.
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @else
                                                                @forelse ($bpList as $bp)
                                                                    @php
                                                                        $kondisiColor = match (
                                                                            $bp->kondisi_barang_pendukung ?? ''
                                                                        ) {
                                                                            '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',
                                                                            ],
                                                                            default => [
                                                                                'bg' => '#f1f5f9',
                                                                                'text' => '#6b7280',
                                                                                'border' => '#cbd5e1',
                                                                                'icon' => 'fa-circle',
                                                                            ],
                                                                        };
                                                                    @endphp
                                                                    <div class="bp-perbandingan-row 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>
                                                                            {{ $bp->nama_barang_pendukung ?? '-' }}
                                                                        </div>
                                                                        <div class="p-2 rounded"
                                                                            style="background:{{ $kondisiColor['bg'] }}; border:1px dashed {{ $kondisiColor['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 {{ $kondisiColor['icon'] }}"
                                                                                    style="color:{{ $kondisiColor['text'] }};"></i>
                                                                                <span class="fw-bold"
                                                                                    style="color:{{ $kondisiColor['text'] }}; font-size:.82rem;">
                                                                                    {{ strtoupper(str_replace('_', ' ', $bp->kondisi_barang_pendukung ?? 'N/A')) }}
                                                                                </span>
                                                                            </div>
                                                                            @if (!empty($bp->catatan))
                                                                                <div class="text-muted fst-italic mt-1"
                                                                                    style="font-size:.72rem;">
                                                                                    <i
                                                                                        class="fas fa-sticky-note me-1"></i>{{ $bp->catatan }}
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                @empty
                                                                    <div class="text-muted small fst-italic py-1">
                                                                        <i class="fas fa-info-circle me-1"></i>Tidak ada
                                                                        data barang pendukung.
                                                                    </div>
                                                                @endforelse
                                                            @endif
                                                        @endif
                                                        {{-- [TAMBAH] Section perpanjangan untuk barang opsional --}}
                                                        @php
                                                            $allPerpOpsItem = isset($perpanjangans[$ops->id])
                                                                            ? $perpanjangans[$ops->id]
                                                                            : collect();

                                                            $isFirstOpsAsset = ($opsionalAssets[$ops->id] ?? collect())->first()?->id === $oa->id;

                                                            $latestPerpOpsAsset  = $allPerpOpsItem->sortByDesc('created_at')->first();
                                                            $perpStatusOpsAsset  = $latestPerpOpsAsset->status ?? null;

                                                            $canAjukanPerpOpsAsset   = ($isViewerGuest || $isViewerHead)
                                                                                    && $isBorrowed
                                                                                    && in_array($sOps, ['approved', 'approve']);

                                                            $canAdminActPerpOpsAsset = ($isViewerAdmin || $isViewerSuperAdmin)
                                                                                    && $isBorrowed
                                                                                    && $perpStatusOpsAsset === 'pending';

                                                            $showPerpSectionOpsAsset = $isBorrowed
                                                                                    && ($latestPerpOpsAsset || $canAjukanPerpOpsAsset)
                                                                                    && $isFirstOpsAsset;
                                                        @endphp

                                                        @if ($showPerpSectionOpsAsset)
                                                            <div class="perpanjangan-wrapper px-3 py-2 mt-2"
                                                                style="background:#fdfaf0; border-top:2px dashed #f59e0b; border-radius:0 0 .5rem .5rem;">

                                                                {{-- Header label --}}
                                                                <div class="d-flex align-items-center flex-wrap 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;white-space:nowrap;">
                                                                        <i class="fas fa-calendar-plus" style="font-size:.65rem;"></i>
                                                                        PERPANJANGAN
                                                                    </span>

                                                                    <span class="fw-bold text-dark" style="font-size:.82rem;">
                                                                        {{ $ops->nama_barang ?? '-' }}
                                                                    </span>
                                                                    <code class="text-muted" style="font-size:.75rem;">{{ $oa->kode_asset }}</code>

                                                                    {{-- Badge status --}}
                                                                    @if ($perpStatusOpsAsset === 'pending')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#fef9c3;color:#854d0e;
                                                                                    border:1px solid #fde047;
                                                                                    animation:perp-pulse 2s infinite;">
                                                                            <i class="fas fa-clock" style="font-size:.62rem;"></i>
                                                                            Menunggu Persetujuan Admin
                                                                        </span>
                                                                    @elseif ($perpStatusOpsAsset === 'approved')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#d1fae5;color:#065f46;
                                                                                    border:1px solid #6ee7b7;">
                                                                            <i class="fas fa-check-circle" style="font-size:.62rem;"></i>
                                                                            Disetujui
                                                                        </span>
                                                                    @elseif ($perpStatusOpsAsset === 'rejected')
                                                                        <span style="display:inline-flex;align-items:center;gap:4px;
                                                                                    padding:2px 9px;border-radius:20px;font-size:.68rem;
                                                                                    font-weight:700;background:#fee2e2;color:#991b1b;
                                                                                    border:1px solid #fca5a5;">
                                                                            <i class="fas fa-times-circle" style="font-size:.62rem;"></i>
                                                                            Ditolak
                                                                        </span>
                                                                    @endif

                                                                    {{-- Tanggal lama → baru --}}
                                                                    @if ($latestPerpOpsAsset)
                                                                        <span class="text-muted" style="font-size:.75rem;">
                                                                            <span style="text-decoration:line-through;color:#9ca3af;">
                                                                                {{ $latestPerpOpsAsset->tanggal_kembali_lama
                                                                                    ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_lama)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </span>
                                                                            <i class="fas fa-long-arrow-alt-right mx-1" style="color:#f59e0b;"></i>
                                                                            <strong style="color:#b45309;">
                                                                                {{ $latestPerpOpsAsset->tanggal_kembali_baru
                                                                                    ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </strong>
                                                                        </span>
                                                                    @endif
                                                                </div>

                                                                {{-- [A] Guest: ajukan / ajukan ulang --}}
                                                                @if ($canAjukanPerpOpsAsset && ($perpStatusOpsAsset === null || $perpStatusOpsAsset === 'rejected' || $perpStatusOpsAsset === 'approved'))
                                                                    @if ($perpStatusOpsAsset === 'rejected')
                                                                        <div class="mb-2 p-2 rounded"
                                                                            style="background:#fee2e2;border:1px solid #fca5a5;font-size:.8rem;">
                                                                            <i class="fas fa-times-circle text-danger me-1"></i>
                                                                            <strong>Perpanjangan ditolak.</strong>
                                                                            @if (!empty($latestPerpOpsAsset->catatan_admin))
                                                                                Alasan: <em>{{ $latestPerpOpsAsset->catatan_admin }}</em>
                                                                            @endif
                                                                            Anda dapat mengajukan kembali.
                                                                        </div>
                                                                    @endif

                                                                    @if ($perpStatusOpsAsset === 'approved')
                                                                        <div class="mb-2 p-2 rounded"
                                                                            style="background:#d1fae5;border:1px solid #6ee7b7;font-size:.8rem;">
                                                                            <i class="fas fa-check-circle text-success me-1"></i>
                                                                            <strong>Perpanjangan sebelumnya disetujui.</strong>
                                                                            Tanggal kembali:
                                                                            <strong>
                                                                                {{ $latestPerpOpsAsset->tanggal_kembali_baru
                                                                                    ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                    : '-' }}
                                                                            </strong>
                                                                            Anda dapat mengajukan perpanjangan baru.
                                                                        </div>
                                                                    @endif

                                                                    @php
                                                                        $perpOpsEncryptedId = encrypt((string) $oa->id);
                                                                    @endphp

                                                                    <button type="button"
                                                                            class="btn btn-sm mb-0 btn-ajukan-perpanjangan"
                                                                            style="background:#f59e0b;color:#fff;font-size:.8rem;
                                                                                border:none;border-radius:6px;padding:5px 14px;"
                                                                            data-item-id="{{ $perpOpsEncryptedId }}"
                                                                            data-item-nama="{{ $ops->nama_barang }} ({{ $oa->kode_asset }})"
                                                                            data-tanggal-kembali="{{ $ops->tanggal_kembali }}"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#perpanjanganModal">
                                                                        <i class="fas fa-calendar-plus me-1"></i>
                                                                        @if ($perpStatusOpsAsset === 'rejected')
                                                                            Ajukan Ulang Perpanjangan
                                                                        @elseif ($perpStatusOpsAsset === 'approved')
                                                                            Ajukan Perpanjangan Baru
                                                                        @else
                                                                            Ajukan Perpanjangan
                                                                        @endif
                                                                    </button>

                                                                {{-- [B] Guest/Head: pending --}}
                                                                @elseif (($isViewerGuest || $isViewerHead) && $perpStatusOpsAsset === 'pending')
                                                                    <div class="p-2 rounded"
                                                                        style="background:#fefce8;border:1px solid #fde047;font-size:.8rem;">
                                                                        <i class="fas fa-hourglass-half text-warning me-1"></i>
                                                                        Pengajuan perpanjangan Anda sedang menunggu persetujuan Admin IT.
                                                                        @if (!empty($latestPerpOpsAsset->alasan_perpanjangan))
                                                                            <span class="text-muted ms-1">
                                                                                — Alasan: <em>{{ $latestPerpOpsAsset->alasan_perpanjangan }}</em>
                                                                            </span>
                                                                        @endif
                                                                    </div>

                                                                {{-- [C] Guest/Head: approved --}}
                                                                @elseif (($isViewerGuest || $isViewerHead) && $perpStatusOpsAsset === 'approved')
                                                                    <div class="p-2 rounded"
                                                                        style="background:#d1fae5;border:1px solid #6ee7b7;font-size:.8rem;">
                                                                        <i class="fas fa-check-circle text-success me-1"></i>
                                                                        Perpanjangan disetujui. Tanggal kembali baru:
                                                                        <strong>
                                                                            {{ $latestPerpOpsAsset->tanggal_kembali_baru
                                                                                ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                : '-' }}
                                                                        </strong>
                                                                    </div>

                                                                {{-- [D] Admin: ada pending → form approve/reject --}}
                                                                @elseif ($canAdminActPerpOpsAsset)
                                                                    <div class="perp-admin-card p-3 rounded"
                                                                        style="background:#fffbeb;border:1.5px solid #fcd34d;">

                                                                        <div class="row g-2 mb-3" style="font-size:.8rem;">
                                                                            <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">
                                                                                    {{ $latestPerpOpsAsset->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;">
                                                                                    {{ $latestPerpOpsAsset->tanggal_kembali_lama
                                                                                        ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_lama)->format('d/m/Y')
                                                                                        : '-' }}
                                                                                </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;">
                                                                                    {{ $latestPerpOpsAsset->tanggal_kembali_baru
                                                                                        ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_baru)->format('d/m/Y')
                                                                                        : '-' }}
                                                                                </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;">
                                                                                    {{ $latestPerpOpsAsset->created_at
                                                                                        ? \Carbon\Carbon::parse($latestPerpOpsAsset->created_at)->format('d/m/Y H:i')
                                                                                        : '-' }}
                                                                                </span>
                                                                            </div>
                                                                        </div>

                                                                        <div class="row g-2 align-items-end">
                                                                            <div class="col-md-4">
                                                                                <label class="prb-form-label">
                                                                                    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 perp-tgl-approve"
                                                                                    id="perp-ops-tgl-{{ $latestPerpOpsAsset->id }}"
                                                                                    value="{{ $latestPerpOpsAsset->tanggal_kembali_baru ? \Carbon\Carbon::parse($latestPerpOpsAsset->tanggal_kembali_baru)->format('Y-m-d') : '' }}"
                                                                                    min="{{ now()->format('Y-m-d') }}"
                                                                                    style="border-color:#f59e0b;">
                                                                            </div>
                                                                            <div class="col-md-5">
                                                                                <label class="prb-form-label">Catatan Admin</label>
                                                                                <input type="text"
                                                                                    class="form-control form-control-sm"
                                                                                    id="perp-ops-catatan-{{ $latestPerpOpsAsset->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 btn-perp-approve"
                                                                                        data-perp-id="{{ encrypt((string)$latestPerpOpsAsset->id) }}"
                                                                                        data-tgl-input-id="perp-ops-tgl-{{ $latestPerpOpsAsset->id }}"
                                                                                        data-catatan-input-id="perp-ops-catatan-{{ $latestPerpOpsAsset->id }}"
                                                                                        data-url="{{ route('trpjbr.perpanjangan.approve', encrypt((string)$latestPerpOpsAsset->id)) }}">
                                                                                    <i class="fas fa-check me-1"></i> Approve
                                                                                </button>
                                                                                <button type="button"
                                                                                        class="btn btn-danger btn-sm mb-0 flex-fill btn-perp-reject"
                                                                                        data-perp-id="{{ encrypt((string)$latestPerpOpsAsset->id) }}"
                                                                                        data-bs-toggle="modal"
                                                                                        data-bs-target="#perpRejectModal">
                                                                                    <i class="fas fa-times me-1"></i> Reject
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                {{-- [E] Admin: lihat history (approved/rejected) --}}
                                                                @elseif (($isViewerAdmin || $isViewerSuperAdmin) && $latestPerpOpsAsset && $perpStatusOpsAsset !== 'pending')
                                                                    <div class="p-2 rounded" style="font-size:.8rem;
                                                                        background:{{ $perpStatusOpsAsset === 'approved' ? '#f0fdf4' : '#fff8f8' }};
                                                                        border:1px solid {{ $perpStatusOpsAsset === 'approved' ? '#6ee7b7' : '#fca5a5' }};">
                                                                        <i class="fas fa-{{ $perpStatusOpsAsset === 'approved' ? 'check-circle text-success' : 'times-circle text-danger' }} me-1"></i>
                                                                        Perpanjangan <strong>{{ strtoupper($perpStatusOpsAsset) }}</strong>
                                                                        @if (!empty($latestPerpOpsAsset->catatan_admin))
                                                                            — <em class="text-muted">{{ $latestPerpOpsAsset->catatan_admin }}</em>
                                                                        @endif
                                                                    </div>
                                                                @endif

                                                            </div>{{-- end perpanjangan-wrapper opsional --}}
                                                        @endif
                                                        {{-- ============================================================ --}}
                                                    @endforeach
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($canReturn)
            <div class="row g-3 mt-1">
                <div class="col-12">
                    <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 @error('catatan_return') is-invalid @enderror" name="catatan_return" rows="3"
                            placeholder="Catatan umum proses return barang (opsional)...">{{ old('catatan_return') }}</textarea>
                        @error('catatan_return')
                            <div class="prb-field-error mt-1">{{ $message }}</div>
                        @enderror
                        <div class="d-flex gap-2 justify-content-end mt-3">
                            <button type="button" class="prb-btn prb-btn-back"
                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                <i class="fas fa-times"></i> Batal
                            </button>
                            <button type="button" class="prb-btn prb-btn-return" onclick="submitReturn()">
                                <i class="fas fa-undo-alt"></i> Submit Return
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif


    </div>

    @if ($canApproveAdmin)
        </form>
    @endif

    @if ($canReturn)
        </form>
    @endif

    @if ($canApproveHead)
        <div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content prb-modal-content">
                    <form action="{{ url($url_menu . '/reject/' . encrypt((string) $peminjaman->id)) }}"
                        method="POST" id="form-reject">
                        @csrf
                        <div class="modal-header prb-modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-times-circle me-2 text-danger"></i>Reject Peminjaman
                            </h5>
                            <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 Reject <span class="text-danger">*</span>
                            </label>
                            <textarea class="prb-input" id="catatan_reject" name="catatan_reject" rows="4"
                                placeholder="Tuliskan alasan mengapa peminjaman ini ditolak..." required></textarea>
                            <div class="prb-form-hint">Catatan ini akan dilihat oleh pengaju.</div>
                        </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-reject" onclick="confirmRejectHead()">
                                <i class="fas fa-times me-1"></i> Reject
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
    {{-- ══════════════════════════════════════════════════════════════════
         [TAMBAH] MODAL: User ajukan perpanjangan
    ══════════════════════════════════════════════════════════════════ --}}
    <div class="modal fade" id="perpanjanganModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
            <div class="modal-content prb-modal-content">
                <form action="" method="POST" id="form-ajukan-perpanjangan">
                    @csrf
                    <div class="modal-header prb-modal-header">
                        <h6 class="modal-title mb-0">
                            <i class="fas fa-calendar-plus me-2" style="color:#f59e0b;"></i>
                            Ajukan Perpanjangan
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body px-4 py-3">
                        <div class="mb-3 p-2 rounded"
                             style="background:#fef3c7;border:1px solid #fcd34d;font-size:.82rem;">
                            <i class="fas fa-box me-1" style="color:#b45309;"></i>
                            <strong id="perp-modal-nama-barang">-</strong>
                            <span class="text-muted ms-2">
                                Tgl kembali saat ini:
                                <strong id="perp-modal-tgl-kembali-lama">-</strong>
                            </span>
                        </div>
                        <div class="mb-3">
                            <label class="prb-form-label">
                                Tanggal Kembali Baru <span class="text-danger">*</span>
                            </label>
                            <input type="date" id="perp-tgl-kembali-baru"
                                   name="tanggal_kembali_baru" class="prb-input" required>
                            <div class="prb-form-hint">
                                Masukkan estimasi tanggal pengembalian yang baru.
                            </div>
                        </div>
                        <div class="mb-1">
                            <label class="prb-form-label">
                                Alasan Perpanjangan <span class="text-danger">*</span>
                            </label>
                            <textarea name="alasan_perpanjangan" id="perp-alasan"
                                      class="prb-input" rows="3"
                                      placeholder="Jelaskan mengapa barang masih diperlukan..."
                                      required></textarea>
                        </div>
                    </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-return"
                                id="btn-submit-perpanjangan">
                            <i class="fas fa-paper-plane me-1"></i> Kirim Pengajuan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════
         [TAMBAH] MODAL: Admin reject perpanjangan
    ══════════════════════════════════════════════════════════════════ --}}
    <div class="modal fade" id="perpRejectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content prb-modal-content">
                <form action="" method="POST" id="form-perp-reject-admin">
                    @csrf
                    <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 name="catatan_admin" class="prb-input" rows="3"
                                  id="perp-reject-catatan"
                                  placeholder="Tuliskan alasan penolakan..." required></textarea>
                        <div class="prb-form-hint">
                            Catatan ini akan ditampilkan ke user pengaju.
                        </div>
                    </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-reject"
                                id="btn-confirm-perp-reject">
                            <i class="fas fa-times me-1"></i> Tolak Perpanjangan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Modal Konflik Perpanjangan --}}
    <div class="modal fade" id="konflikModal" 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="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="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="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="replacementModal" 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="btn-close-replacement"></button>
                </div>
                <div class="modal-body px-3 py-2" id="replacement-modal-body">
                </div>
                <div class="modal-footer prb-modal-footer">
                    <button type="button" class="prb-btn prb-btn-back" id="btn-back-replacement">
                        <i class="fas fa-arrow-left me-1"></i> Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>

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


    <!-- Asset Detail Modal -->
    <div class="modal fade" id="assetDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" style="color: white;" >Detail Asset</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3" id="assetDetailContent">
                    <!-- Content populated via AJAX -->
                    <div class="text-center" id="assetDetailLoading">Loading...</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="barangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small 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" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display" id="barangTable">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Nama Barang</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($list_barang ?? [] as $b)
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn bg-primary text-light fw-bold btnSelectBarang 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="qtyManualModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">
                        <i class="fas fa-box me-2"></i>
                        <span id="qty-manual-modal-title">Input Qty</span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="prb-form-label">
                            Qty Disetujui <span class="text-danger">*</span>
                        </label>
                        <input type="number" id="qty-manual-input" class="prb-input" min="1"
                            value="1" placeholder="Masukkan qty...">
                        <div class="prb-form-hint" id="qty-manual-hint"></div>
                    </div>
                </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="btn-confirm-qty-manual">
                        <i class="fas fa-check me-1"></i> Konfirmasi
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="tanggalOpsionalModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">
                        <i class="fas fa-calendar-alt me-2"></i>
                        Tentukan Tanggal — <span id="tanggal-opsional-nama-label">-</span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="prb-form-label">Tanggal Pinjam <span class="text-danger">*</span></label>
                        <input type="date" id="opsional-input-tanggal-pinjam" class="prb-input" required>
                    </div>

                    <div class="mb-3">
                        <label class="prb-form-label">Tanggal Kembali <span class="text-danger">*</span></label>
                        <input type="date" id="opsional-input-tanggal-kembali" class="prb-input" required>
                    </div>
                    <div class="mb-3">
                        <label class="prb-form-label">Tanggal Ambil <span class="text-danger">*</span></label>
                        <input type="datetime-local" id="opsional-input-tanggal-ambil" class="prb-input" required>
                    </div>
                </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="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="barangOpsionalModal" 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="barangOpsionalTable">
                            <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="barangOpsionalTableBody">
                                <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>

@endsection
<style>
    /* ── [TAMBAH] Animasi pulse untuk badge perpanjangan pending ── */
    @keyframes perp-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: .55; }
    }

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

    .perp-admin-card {
        position: relative;
    }
    .perp-admin-card::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: #f59e0b;
        border-radius: 4px 0 0 4px;
    }

    .row-perpanjangan td {
        padding: 0 !important;
    }
    /* ─────────────────────────────────────────────────────────── */
    #opsionalViewTable {
        font-size: 12px;
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #opsionalViewTable th {
        font-size: 12px;
        padding: 6px 8px;
    }

    #opsionalViewTable td {
        padding: 6px 8px;
        border: 1px solid #dee2e6 !important;
    }

    #opsionalViewTable input {
        font-size: 12px;
        padding: 4px 6px;
        height: 30px;
    }

    #opsionalViewTable .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    #opsionalViewTable th {
        border: 1px solid #dee2e6 !important;
    }

    #opsionalViewTable .barang-pendukung-wrapper {
        font-size: 12px;
    }

    #opsionalViewTable .barang-pendukung-wrapper .bp-perbandingan-row,
    #opsionalViewTable .barang-pendukung-wrapper .return-asset-section,
    #opsionalViewTable .barang-pendukung-wrapper .return-bp-row,
    #opsionalViewTable .barang-pendukung-wrapper .perbandingan-return-wrapper {
        font-size: 12px;
    }

    #opsionalViewTable .barang-pendukung-wrapper .fw-semibold,
    #opsionalViewTable .barang-pendukung-wrapper label,
    #opsionalViewTable .barang-pendukung-wrapper .prb-form-label {
        font-size: 12px !important;
    }

    #opsionalViewTable .barang-pendukung-wrapper input.form-control,
    #opsionalViewTable .barang-pendukung-wrapper input.form-control-sm,
    #opsionalViewTable .barang-pendukung-wrapper select.form-select-sm {
        font-size: 12px;
        padding: 4px 6px;
        height: 30px;
    }

    #opsionalViewTable .barang-pendukung-wrapper .return-section-label {
        font-size: 11px;
    }

    #opsionalViewTable .barang-pendukung-wrapper .badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    #opsionalViewTable .barang-pendukung-wrapper small,
    #opsionalViewTable .barang-pendukung-wrapper .text-muted,
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.7rem"],
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.68rem"],
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.72rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.7rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.68rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.72rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.75rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.82rem"],
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.75rem"],
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.82rem"],
    #opsionalViewTable .barang-pendukung-wrapper span[style*="font-size:.78rem"],
    #opsionalViewTable .barang-pendukung-wrapper div[style*="font-size:.78rem"] {
        font-size: 11px !important;
    }

    #opsionalViewTable .barang-pendukung-wrapper .input-group-text {
        font-size: 11px;
        padding: 3px 6px;
    }
    .prb-field-error {
        font-size: .74rem;
        color: #dc2626;
        margin-top: 3px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .prb-field-error::before {
        content: '\f071';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: .68rem;
    }

    .is-invalid {
        border-color: #dc2626 !important;
        background-image: none !important;
    }

    .is-invalid:focus {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18) !important;
    }

    #itemsTable {
        font-size: 12px;
    }

    #itemsTable th {
        font-size: 12px;
        padding: 6px 8px;
    }

    #itemsTable td {
        padding: 6px 8px;
    }

    #itemsTable input {
        font-size: 12px;
        padding: 4px 6px;
        height: 30px;
    }

    #itemsTable .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;
    }

    .prb-topbar,
    .prb-topbar~.container-fluid,
    .prb-topbar~form,
    .prb-topbar~form+.container-fluid {
        position: relative;
    }

    .main-content>*,
    .main-content-wrap>*,
    [class*="main-content"]>* {
        position: relative;
    }

    :root {
        --prb-bg: #f1f4f8;
        --prb-card-bg: #ffffff;
        --prb-border: #e4e9f0;
        --prb-text: #1e2533;
        --prb-muted: #7c8499;
        --prb-accent: #0a8f97;
        --prb-accent-dark: #076e75;
        --prb-radius: 10px;
        --prb-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    }

    .prb-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        background: var(--prb-card-bg);
        border: 1px solid var(--prb-border);
        border-radius: var(--prb-radius);
        padding: 10px 14px;
        box-shadow: var(--prb-shadow);
    }

    .prb-topbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .prb-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 16px;
        border-radius: 7px;
        border: none;
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        transition: filter .15s, transform .1s;
        white-space: nowrap;
    }

    .prb-btn:active {
        transform: scale(.97);
    }

    .prb-btn-back {
        background: #f1f4f8;
        color: #4a5568;
        border: 1px solid #dde3ec;
    }

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

    .prb-btn-approve {
        background: var(--prb-accent);
        color: #fff;
    }

    .prb-btn-approve:hover {
        background: var(--prb-accent-dark);
    }

    .prb-btn-reject {
        background: #ef4444;
        color: #fff;
    }

    .prb-btn-reject:hover {
        background: #dc2626;
    }

    .prb-btn-return {
        background: #f59e0b;
        color: #fff;
    }

    .prb-btn-return:hover {
        background: #d97706;
    }

    .prb-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 20px;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .04em;
        background: color-mix(in srgb, var(--sc) 12%, transparent);
        color: var(--sc);
        border: 1.5px solid color-mix(in srgb, var(--sc) 30%, transparent);
    }

    .prb-card {
        background: var(--prb-card-bg);
        border: 1px solid var(--prb-border);
        border-radius: var(--prb-radius);
        padding: 16px 18px;
        box-shadow: var(--prb-shadow);
    }

    .prb-card-label {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--prb-accent);
        border-left: 3px solid var(--prb-accent);
        padding-left: 8px;
        margin-bottom: 12px;
    }

    .prb-field {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 5px 0;
        border-bottom: 1px dashed #edf0f5;
        font-size: .83rem;
    }

    .prb-field:last-child {
        border-bottom: none;
    }

    .prb-field-key {
        flex: 0 0 120px;
        color: var(--prb-muted);
        font-weight: 500;
    }

    .prb-field-val {
        color: var(--prb-text);
        font-weight: 600;
        word-break: break-word;
    }

    .prb-inline-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: .72rem;
        font-weight: 700;
        background: color-mix(in srgb, var(--sc) 12%, transparent);
        color: var(--sc);
        border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent);
    }

    .prb-note-text {
        font-size: .83rem;
        color: #4a5568;
        background: #f8fafc;
        border-left: 3px solid #e2e8f0;
        padding: 8px 10px;
        border-radius: 0 6px 6px 0;
        margin: 0;
        line-height: 1.5;
    }

    .prb-form-label {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        color: var(--prb-text);
        margin-bottom: 4px;
    }

    .prb-input {
        width: 100%;
        padding: 7px 10px;
        border: 1px solid var(--prb-border);
        border-radius: 7px;
        font-size: .83rem;
        color: var(--prb-text);
        background: #fafdff;
        outline: none;
        transition: border-color .15s;
        resize: vertical;
    }

    .prb-input:focus {
        border-color: var(--prb-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--prb-accent) 12%, transparent);
    }

    .prb-form-hint {
        font-size: .76rem;
        color: var(--prb-muted);
        margin-top: 4px;
    }

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

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

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

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

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

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

    .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;
    }

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

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

    .return-asset-section[style*="#10b981"]::before,
    .return-asset-section[style*="#059669"]::before {
        background: #10b981;
    }

    .return-section-label {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #d97706;
    }

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

    .return-input:focus {
        border-color: #f59e0b !important;
        box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .2) !important;
    }

    .kondisi-awal-bp {
        font-size: .75rem;
        line-height: 1.5;
    }
</style>
@push('js')
    <script>
        $(document).ready(function() {
             // ═══════════════════════════════════════════════════════════
            // [TAMBAH] JAVASCRIPT FITUR PERPANJANGAN
            // ═══════════════════════════════════════════════════════════

            // -- User: isi modal saat klik tombol ajukan perpanjangan --
            $(document).on('click', '.btn-ajukan-perpanjangan', function () {
                const itemId     = $(this).data('item-id');
                const itemNama   = $(this).data('item-nama');
                const tglKembali = $(this).data('tanggal-kembali'); // d/m/Y

                $('#perp-modal-nama-barang').text(itemNama);
                $('#perp-modal-tgl-kembali-lama').text(tglKembali || '-');

                // Set action form ke URL perpanjangan item ini
                $('#form-ajukan-perpanjangan').attr(
                    'action',
                    '{{ url($url_menu . "/perpanjangan") }}/' + itemId
                );

                // Min tanggal = kembali lama + 1 hari
                let minDate = '';
                if (tglKembali) {
                    const parts = String(tglKembali).split('/');
                    if (parts.length === 3) {
                        const d = new Date(`${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}`);
                        d.setDate(d.getDate() + 1);
                        minDate = d.toISOString().split('T')[0];
                    } else {
                        const d = new Date(tglKembali);
                        d.setDate(d.getDate() + 1);
                        minDate = d.toISOString().split('T')[0];
                    }
                }
                $('#perp-tgl-kembali-baru').attr('min', minDate).val('');
                $('#perp-alasan').val('');
            });

            // -- User: submit ajukan perpanjangan --
            $('#btn-submit-perpanjangan').on('click', function () {
                const tgl    = $('#perp-tgl-kembali-baru').val();
                const alasan = $('#perp-alasan').val().trim();

                if (!tgl || !alasan) {
                    Swal.fire({
                        title: 'Lengkapi Form',
                        text: 'Tanggal kembali baru dan alasan wajib diisi.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Kirim Pengajuan?',
                    html: `Perpanjangan akan dikirim ke Admin IT untuk disetujui.<br>
                        <small class="text-muted">Tanggal baru: <strong>${tgl}</strong></small>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Kirim',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#f59e0b',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (!result.isConfirmed) return;

                    // Tutup modal
                    bootstrap.Modal.getInstance(
                        document.getElementById('perpanjanganModal')
                    )?.hide();

                    // Loading
                    Swal.fire({
                        title: 'Mengirim Pengajuan...',
                        text: 'Mohon tunggu sebentar.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                    });

                    const action = $('#form-ajukan-perpanjangan').attr('action');
                    const formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');
                    formData.append('tanggal_kembali_baru', tgl);
                    formData.append('alasan_perpanjangan', alasan);

                    fetch(action, {
                        method: 'POST',
                        body: formData
                    })
                    .then(res => res.json())
                    .then(data => {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: data.message ?? 'Pengajuan perpanjangan berhasil dikirim!',
                            icon: 'success',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        }).then(() => location.reload());
                    })
                    .catch(() => {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat mengirim pengajuan.',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    });
                });
            });

            

            // -- Admin: buka modal reject, set action form --
            $(document).on('click', '.btn-perp-reject', function () {
                const perpId = $(this).data('perp-id');
                $('#form-perp-reject-admin').attr(
                    'action',
                    '{{ url($url_menu . "/perpanjangan") }}/' + perpId + '/reject'
                );
                $('#perp-reject-catatan').val('');
            });

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

                Swal.fire({
                    title: 'Tolak Perpanjangan?',
                    text: 'Pengaju akan mendapat notifikasi bahwa perpanjangan ditolak.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Tolak',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc2626',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (result.isConfirmed) {
                        bootstrap.Modal.getInstance(
                            document.getElementById('perpRejectModal')
                        )?.hide();
                        document.getElementById('form-perp-reject-admin').submit();
                    }
                });
            });


            const selectedByItem = {};
            const selectedByOpsionalRow = {};
            let opsionalRowCount = 0;
            let activeOpsionalRowIdx = null;
            let activeItemIndex = null;
            let activeItemNama = null;
            let allStok = [];
            let stokTracker = {};
            let stokManualTracker = {};
            let bookingKonflik = [];
            let pendingManualBarang = null;
            let pendingOpsionalNama = null;
            let selectedNamaBarangOpsional = null;
            let opsionalTanggalPinjam = '';
            let opsionalTanggalAmbil = '';
            let opsionalTanggalKembali = '';
            let activePenerimaOpsionalIdx = null;
            let penerimaOpsionalModalInstance = null;
            let activePenerimaRowEl = null;
            let penerimaModalInstance = null;
            let penerimaCache = null;

            // Data pengaju untuk default penerima opsional
            const defaultPengajuNik  = '{{ $pengaju_nik  ?? "" }}';
            const defaultPengajuNama = '{{ $pengaju_nama ?? "" }}';

            const namaMap = {
                'laptop': 'notebook'
            };

            const phpErrors = @json($errors->toArray());

            function getPhpError(key) {
                const errs = phpErrors[key];
                return errs && errs.length ? errs[0] : null;
            }

            function errorHtml(key) {
                const msg = getPhpError(key);
                if (!msg) return '';
                return `<div class="prb-field-error" style="font-size:.73rem;color:#dc2626;margin-top:2px;">
                    <i class="fas fa-exclamation-circle me-1"></i>${msg}
                </div>`;
            }


            function toDatetimeLocalValue(ddmmyyyy, time) {
                if (!ddmmyyyy) return '';
                const parts = String(ddmmyyyy).trim().split('/');
                if (parts.length !== 3) return '';
                return `${parts[2]}-${parts[1].padStart(2,'0')}-${parts[0].padStart(2,'0')}T${time ?? '00:00'}`;
            }

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

            function parseDateStr(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');
            }

            function fmtDate(str) {
                if (!str) return '-';
                const d = parseDateStr(str);
                if (!d || isNaN(d)) return str;
                return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
            }

            function isDateOverlap(pinjamA, kembaliA, pinjamB, kembaliB) {
                const a1 = parseDateStr(pinjamA);
                const a2 = parseDateStr(kembaliA);
                const b1 = parseDateStr(pinjamB);
                const b2 = parseDateStr(kembaliB);
                if (!a1 || !a2 || !b1 || !b2) return false;
                return a1 <= b2 && a2 >= b1;
            }

            function getSelectedItemKodeWithDates() {
                const result = [];
                Object.entries(selectedByItem).forEach(([itemIdx, kodeSet]) => {
                    const $row = $(`tr[data-item-index="${itemIdx}"]`);
                    const tglPinjam = $row.data('tanggal-pinjam');
                    const tglKembali = $row.data('tanggal-kembali');
                    kodeSet.forEach(kode => result.push({
                        kode,
                        tglPinjam,
                        tglKembali
                    }));
                });
                return result;
            }

            function getStokSisaRealtime(namaBarang) {
                const nama = (namaBarang ?? '').toLowerCase();
                const stokAwal = stokManualTracker[nama] ?? 0;
                let terpakai = 0;
                Object.entries(selectedByItem).forEach(([, kodeSet]) => {
                    kodeSet.forEach(k => {
                        if (k.startsWith(`MANUAL-${nama}-`)) terpakai++;
                    });
                });
                Object.entries(selectedByOpsionalRow).forEach(([, usedKode]) => {
                    if (usedKode && String(usedKode).startsWith(`MANUAL-${nama}-`)) terpakai++;
                });
                return Math.max(0, stokAwal - terpakai);
            }

            function getQtyDiminta(itemIdx) {
                const $row = $(`tr[data-item-index="${itemIdx}"]`);
                return parseInt($row.find('.qty-disetujui').data('qty-diminta')) || 1;
            }

            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())}`;
            }

            function applyBackdateMinToShowForm() {
                $('#form-approve-admin .selected-barang-card').each(function() {
                    const itemIdx = $(this).data('item-idx');
                    if (itemIdx === undefined) return;

                    const $row = $(`tr[data-item-index="${itemIdx}"]`);
                    const tglPinjam = $row.data('tanggal-pinjam');
                    const tglKembali = $row.data('tanggal-kembali');

                    const minVal = toDatetimeLocalValue(tglPinjam, '00:00');
                    const maxVal = toDatetimeLocalValue(tglKembali, '23:59');

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

                $('#form-approve-admin .selected-opsional-list .selected-barang-card').each(function() {
                    const rowIdx = $(this).attr('id')?.replace('opsional-card-', '');
                    if (!rowIdx) return;

                    const $row = $(`tr[data-opsional-index="${rowIdx}"]`);
                    const tglPinjam = $row.data('tanggal-pinjam');
                    const tglKembali = $row.data('tanggal-kembali');

                    const minVal = toDatetimeLocalValue(tglPinjam, '00:00');
                    const maxVal = toDatetimeLocalValue(tglKembali, '23:59');

                    $(this).find('input[name*="[tanggal_ambil_asset]"]').each(function() {
                        if (!$(this).attr('readonly')) {
                            if (minVal) $(this).attr('min', minVal);
                            if (maxVal) $(this).attr('max', maxVal);
                        }
                    });
                });
            }

            function updatePilihBarangButton(itemIdx) {
                const qtyDiminta = getQtyDiminta(itemIdx);
                const terpilih = selectedByItem[itemIdx] ? selectedByItem[itemIdx].size : 0;
                const $btn = $(`.btn-open-modal-barang[data-index="${itemIdx}"]`);
                const statusItem = $(`tr[data-item-index="${itemIdx}"] .item-status`).val();
                if (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} dari ${qtyDiminta} barang`);
                } else {
                    $btn.prop('disabled', false).removeClass('disabled')
                        .css({
                            opacity: '',
                            pointerEvents: ''
                        })
                        .attr('title', `Pilih Barang (${terpilih}/${qtyDiminta})`);
                }
            }

            function refreshAllPilihBarangButtons() {
                $('tr[data-item-index]').each(function() {
                    const idx = $(this).data('item-index');
                    if (idx !== undefined) updatePilihBarangButton(idx);
                });
            }

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

            function loadPenerima(q) {
                const tbody = document.getElementById('penerimaModalList');
                const lower = (q || '').toLowerCase().trim();
                if (penerimaCache !== null) {
                    renderPenerimaList(penerimaCache, lower);
                    return;
                }
                tbody.innerHTML =
                    '<tr><td colspan="3" class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-1"></i> Memuat...</td></tr>';
                const deptId = '{{ $peminjaman->departemen_id ?? '' }}';
                $.ajax({
                    url: '{{ url('trpjbr/get-penerima') }}',
                    data: deptId ? {
                        departemen_id: deptId
                    } : {},
                    success: function(data) {
                        penerimaCache = data;
                        renderPenerimaList(data, lower);
                    },
                    error: function() {
                        tbody.innerHTML =
                            '<tr><td colspan="3" class="text-center text-danger py-3">Gagal memuat data penerima</td></tr>';
                    }
                });
            }

            function renderPenerimaList(data, q) {
                const tbody = document.getElementById('penerimaModalList');
                const filtered = q ? data.filter(p => p.nama.toLowerCase().includes(q)) : data;
                if (!filtered.length) {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">Penerima tidak ditemukan</td></tr>';
                    return;
                }
                tbody.innerHTML = filtered.map(p =>
                    `<tr class="picker-list-item" data-nik="${p.nik}" data-nama="${p.nama}">
                        <td><button type="button"
                            class="btn btn-sm bg-primary text-light fw-bold btn-select-penerima mb-0">
                            Pilih
                        </button></td>
                        <td>${p.nama}</td>
                        <td class="text-muted">${p.nama_departemen ?? '-'}</td>
                    </tr>`
                ).join('');
            }


            function buildBarangPendukungRow(itemIdx, barangIdx, barangPendukungIdx, isFirst) {
                const deleteBtn = isFirst ?
                    `<div style="width:32px;"></div>` :
                    `<button type="button"
                        class="btn btn-sm btn-outline-danger mb-0
                               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="barang-pendukung-row-barang d-flex align-items-start gap-2 mb-2"
                    data-barang-pendukung-idx="${barangPendukungIdx}"
                    data-item-idx="${itemIdx}"
                    data-barang-idx="${barangIdx}">
                    <div class="text-muted small mt-2 pt-1" style="min-width:20px;text-align:right;">
                        ${barangPendukungIdx + 1}.
                    </div>
                    ${deleteBtn}
                    <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>`;
            }

            function renderBarangPendukungForBarang(itemIdx, barangIdx, kodeAsset, namaBarang) {
                return `
                <div class="barang-pendukung-barang-section mt-2 pt-2"
                    id="barang-pendukung-barang-${itemIdx}-${barangIdx}"
                    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="barang-pendukung-list-barang"
                        id="barang-pendukung-list-barang-${itemIdx}-${barangIdx}">
                        ${buildBarangPendukungRow(itemIdx, barangIdx, 0, true)}
                    </div>
                    <button type="button"
                        class="btn btn-outline-primary btn-xs mb-0 mt-1 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 buildBpOpsionalRow(rowIdx, bpIdx, isFirst) {
                const delBtn = isFirst ?
                    `<div style="width:32px;"></div>` :
                    `<button type="button"
                        class="btn btn-sm btn-outline-danger mb-0
                               btn-remove-bp-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="bp-opsional-row d-flex align-items-start gap-2 mb-2"
                    data-bp-idx="${bpIdx}">
                    <div class="text-muted small mt-2 pt-1" style="min-width:20px;text-align:right;">
                        ${bpIdx + 1}.
                    </div>
                    ${delBtn}
                    <input type="hidden"
                        name="opsional[${rowIdx}][barang_pendukung][${bpIdx}][kondisi_barang_pendukung]"
                        value="baik">
                    <input type="text" class="form-control form-control-sm"
                        name="opsional[${rowIdx}][barang_pendukung][${bpIdx}][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[${rowIdx}][barang_pendukung][${bpIdx}][catatan]"
                        placeholder="Catatan (opsional)..."
                        style="min-width:200px;">
                </div>`;
            }
            function renderBarangItemTable() {
                if ($.fn.DataTable.isDataTable('#barangItemTable')) {
                    $('#barangItemTable').DataTable().clear().destroy();
                }

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

                const $itemRow      = $(`tr[data-item-index="${activeItemIndex}"]`);
                const tglPinjamStr  = $itemRow.data('tanggal-pinjam');
                const tglKembaliStr = $itemRow.data('tanggal-kembali');

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

                const manualItems = allStok.filter(b =>
                    (b.nama_barang ?? '').toLowerCase() === activeItemNama &&
                    parseInt(b.isactive) === 1 &&
                    b.kode_asset === null
                );

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

                    // ── Manual items ──
                    manualItems.forEach(item => {
                        const nama          = (item.nama_barang ?? '').toLowerCase();
                        const konflikManual = bookingKonflik.filter(k =>
                            k.tipe === 'manual' &&
                            (k.nama_barang ?? '').toLowerCase() === nama
                        );
                        const totalStok    = stokManualTracker[nama] ?? 0;
                        const unitKonflik  = konflikManual.length;
                        const sisaEfektif  = Math.max(0, totalStok - 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 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}"
                                data-is-manual="1">
                                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 &bull; ${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 pada tanggal ini
                                </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 efektif: ${sisaEfektif})</small></td>
                            <td><code class="text-muted">-</code></td>
                        </tr>`);
                    });

                    // ── Asset items ──
                    filtered.forEach(b => {
                        const alreadyInItem = Object.values(selectedByItem).some(s => s.has(b.kode_asset));

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

                        const konflikList = bookingKonflik.filter(k => k.kode_asset === b.kode_asset);
                        const adaKonflik  = konflikList.length > 0;

                        let btnHtml = '', warningHtml = '';

                        if (alreadyInItem) {
                            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;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    KONFLIK DENGAN BARANG OPSIONAL
                                </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>
                                        Dipinjam: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
                                        s/d <strong>${fmtDate(k.tanggal_kembali)}</strong>
                                </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;">
                                <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 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>`);
                    });
                }

                $('#barangItemTable').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 renderBarangItemTable() {
            //     console.group('=== RENDER BARANG ITEM TABLE ===');
            //     console.log('Active item index:', activeItemIndex);
            //     console.log('Active item nama:', activeItemNama);
            //     console.log('Total allStok:', allStok.length);
            //     console.log('bookingKonflik:', bookingKonflik);

            //     if ($.fn.DataTable.isDataTable('#barangItemTable')) {
            //         $('#barangItemTable').DataTable().clear().destroy();
            //     }

            //     const tbody = $('#barangItemTableBody');
            //     tbody.empty();

            //     const $itemRow = $(`tr[data-item-index="${activeItemIndex}"]`);
            //     const tglPinjamStr  = $itemRow.data('tanggal-pinjam');
            //     const tglKembaliStr = $itemRow.data('tanggal-kembali');

            //     const filtered = allStok.filter(b =>
            //         (b.nama_barang ?? '').toLowerCase() === activeItemNama &&
            //         parseInt(b.isactive) === 1 &&
            //         b.kode_asset !== null
            //     );

            //     const manualItems = allStok.filter(b =>
            //         (b.nama_barang ?? '').toLowerCase() === activeItemNama &&
            //         parseInt(b.isactive) === 1 &&
            //         b.kode_asset === null
            //     );

            //     console.log('Filtered asset items:', filtered.length);
            //     console.log('Manual items:', manualItems.length);

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

            //         // ── Manual items ──
            //         manualItems.forEach(item => {
            //             const nama = (item.nama_barang ?? '').toLowerCase();
            //             const konflikManual = bookingKonflik.filter(k => {
            //                 if (k.tipe !== 'manual') return false;
            //                 if ((k.nama_barang ?? '').toLowerCase() !== nama) return false;
            //                 return true;
            //             });
            //             const totalStok   = stokManualTracker[nama] ?? 0;
            //             const unitKonflik = konflikManual.length;
            //             const sisaStok    = getStokSisaRealtime(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 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}"
            //                     data-is-manual="1">
            //                     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 &bull; ${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 efektif: ${sisaEfektif})</small></td>
            //                 <td><code class="text-muted">-</code></td>
            //             </tr>`);
            //         });

            //         // ── Asset items ──
            //         filtered.forEach(b => {
            //             const alreadyInItem = Object.values(selectedByItem).some(s => s.has(b.kode_asset));

            //             const opsionalOverlapList = Object.entries(selectedByOpsionalRow)
            //                 .filter(([, usedKode]) => usedKode === b.kode_asset)
            //                 .filter(([rIdx]) => {
            //                     const $r = $(`tr[data-opsional-index="${rIdx}"]`);
            //                     return isDateOverlap(
            //                         $r.data('tanggal-pinjam'), $r.data('tanggal-kembali'),
            //                         tglPinjamStr, tglKembaliStr
            //                     );
            //                 });
            //             const alreadyInOpsionalOverlap = opsionalOverlapList.length > 0;

            //             // Cek konflik dari bookingKonflik
            //             const konflikList = bookingKonflik.filter(k => k.kode_asset === b.kode_asset);
            //             const adaKonflik  = konflikList.length > 0;

            //             console.log(`Kode: ${b.kode_asset}`, {
            //                 alreadyInItem,
            //                 alreadyInOpsionalOverlap,
            //                 adaKonflik,
            //                 konflikList,
            //             });

            //             let btnHtml = '', warningHtml = '';

            //             if (alreadyInItem) {
            //                 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;">
            //                         <i class="fas fa-exclamation-triangle me-1"></i>
            //                         KONFLIK DENGAN BARANG OPSIONAL
            //                     </div>
            //                 </div>`;

            //             } else if (adaKonflik) {
            //                 // ── Tetap tampilkan tapi disable + warning tanggal konflik ──
            //                 const konflikLines = konflikList.map(k =>
            //                     `<div style="font-size:.7rem;color:#dc2626;">
            //                         <i class="fas fa-calendar-times me-1"></i>
            //                         Dipinjam: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
            //                         s/d <strong>${fmtDate(k.tanggal_kembali)}</strong>
            //                     </div>`
            //                 ).join('');
            //                 btnHtml = `<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:#fff5f5;border:1px dashed #fca5a5;max-width:280px;">
            //                     <div style="font-size:.68rem;font-weight:600;color:#b91c1c;margin-bottom:3px;">
            //                         <i class="fas fa-exclamation-triangle me-1"></i>
            //                         SEDANG DIPINJAM
            //                     </div>
            //                     ${konflikLines}
            //                 </div>`;

            //             } else {
            //                 btnHtml = `<button type="button"
            //                     class="btn btn-primary btn-sm mb-0 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>`);
            //         });
            //     }

            //     console.groupEnd();

            //     $('#barangItemTable').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 renderBarangOpsionalTableNew() {
                const rowIdx     = activeOpsionalRowIdx;
                const tglPinjam  = opsionalTanggalPinjam;
                const tglKembali = opsionalTanggalKembali;

                const filtered = allStok.filter(b =>
                    (b.nama_barang ?? '').toLowerCase() === selectedNamaBarangOpsional &&
                    b.kode_asset !== null &&
                    parseInt(b.isactive) === 1
                );
                const manualItems = allStok.filter(b =>
                    (b.nama_barang ?? '').toLowerCase() === selectedNamaBarangOpsional &&
                    b.kode_asset === null &&
                    parseInt(b.isactive) === 1
                );

                if ($.fn.DataTable.isDataTable('#barangOpsionalTable')) {
                    $('#barangOpsionalTable').DataTable().clear().destroy();
                }

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

                function isKodeUsedByOtherOpsionalRow(kode) {
                    return Object.entries(selectedByOpsionalRow).some(([rIdx, usedKode]) => {
                        if (parseInt(rIdx) === rowIdx) return false;
                        if (usedKode !== kode) return false;
                        const $r = $(`tr[data-opsional-index="${rIdx}"]`);
                        return isDateOverlap(
                            $r.data('tanggal-pinjam'), $r.data('tanggal-kembali'),
                            tglPinjam, tglKembali
                        );
                    });
                }

                function isKodeUsedByItemRow(kode) {
                    return getSelectedItemKodeWithDates().some(it =>
                        it.kode === kode &&
                        isDateOverlap(it.tglPinjam, it.tglKembali, tglPinjam, tglKembali)
                    );
                }

                // ── Manual items ──
                manualItems.forEach(item => {
                    const nama          = (item.nama_barang ?? '').toLowerCase();
                    const konflikManual = bookingKonflik.filter(k =>
                        k.tipe === 'manual' &&
                        (k.nama_barang ?? '').toLowerCase() === nama
                    );
                    const totalStok   = stokManualTracker[nama] ?? 0;
                    const unitKonflik = konflikManual.length;
                    const sisaEfektif = Math.max(0, totalStok - unitKonflik);
                    const stokHabis   = sisaEfektif <= 0;
                    const manualKey   = `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 btn-select-opsional-manual-new"
                            data-kode="${manualKey}"
                            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 &bull; ${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 pada tanggal ini
                            </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>`);
                });

                // ── Asset items ──
                filtered.forEach(b => {
                    const dipilihDiRowIni     = selectedByOpsionalRow[rowIdx] === b.kode_asset;
                    const dipakaiOpsionalLain = isKodeUsedByOtherOpsionalRow(b.kode_asset);
                    const dipakaiItemReguler  = isKodeUsedByItemRow(b.kode_asset);
                    const konflikList         = bookingKonflik.filter(k => k.kode_asset === b.kode_asset);
                    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:280px;">
                            <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>
                                    Dipinjam: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
                                    s/d <strong>${fmtDate(k.tanggal_kembali)}</strong>
                            </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;">
                            <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 btn-select-opsional-asset-new"
                            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>`);
                });

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

                $('#barangOpsionalTable').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 openOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali) {
                activeOpsionalRowIdx       = rowIdx;
                selectedNamaBarangOpsional = namaMap[namaLower] ?? namaLower;
                opsionalTanggalPinjam      = tglPinjam;
                opsionalTanggalKembali     = tglKembali;

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

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

                function toYmd(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;
                }

                const tglPinjamYmd  = toYmd(tglPinjam);
                const tglKembaliYmd = toYmd(tglKembali);
                const params = new URLSearchParams({
                    tanggal_pinjam  : tglPinjamYmd,
                    tanggal_kembali : tglKembaliYmd,
                });

                $.getJSON(`{{ url($url_menu . '/stok-barang') }}?${params}`, function(res) {
                    allStok = res;

                    // Rebuild tracker dari response terbaru
                    stokTracker       = {};
                    stokManualTracker = {};
                    res.forEach(b => {
                        const nama = (b.nama_barang ?? '').toLowerCase();
                        if (b.kode_asset !== null) {
                            if (!stokTracker[nama]) stokTracker[nama] = 0;
                            stokTracker[nama]++;
                        } else {
                            if (!stokManualTracker[nama]) stokManualTracker[nama] = 0;
                            stokManualTracker[nama] += (parseInt(b.qty) || 0);
                        }
                    });

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

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

                    bookingKonflik = [];

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

                    $.ajax({
                        url: '{{ url('trpjbr/booking-konflik') }}',
                        method: 'GET',
                        data: {
                            kode_assets     : relevantKodes,
                            nama_barangs    : relevantNamaManual,
                            tanggal_pinjam  : tglPinjamYmd,
                            tanggal_kembali : tglKembaliYmd,
                        },
                        success: res => {
                            bookingKonflik = res;
                            renderBarangOpsionalTableNew();
                        },
                        error: () => {
                            bookingKonflik = [];
                            renderBarangOpsionalTableNew();
                        }
                    });
                });
            }


            function appendOpsionalSelectedCard(rowIdx, kode, nama, value, isManual) {
                const cardId = `opsional-card-${rowIdx}`;
                const cardHtml = `
                <div class="selected-barang-card border rounded p-2 mb-2"
                    id="${cardId}" data-kode="${kode}"
                    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 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>
                               <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail ms-1" data-kode="${kode}" data-value="${value}" title="Lihat detail asset" style="height:24px;width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;">
                                   <i class="fas fa-info-circle" style="font-size: .8rem;"></i>
                               </button>`}
                        <span class="text-muted small ms-1">(${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 tgl-ambil-opsional"
                                name="opsional[${rowIdx}][tanggal_ambil_asset]"
                                style="width:175px;font-size:.78rem;border-color:#0a8f97;background:#f0fffe;"
                                value="${opsionalTanggalAmbil}"
                                min="${opsionalTanggalPinjam ? opsionalTanggalPinjam + 'T00:00' : ''}"
                                max="${opsionalTanggalKembali ? opsionalTanggalKembali + 'T23:59' : ''}"
                                required>
                        </div>
                    </div>

                    <div class="mt-2 pt-2" id="bp-opsional-section-${rowIdx}"
                        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="bp-opsional-list-${rowIdx}">
                            ${buildBpOpsionalRow(rowIdx, 0, true)}
                        </div>
                        <button type="button"
                            class="btn btn-outline-primary btn-xs mb-0 mt-1 btn-add-bp-opsional"
                            style="font-size:.75rem; padding:2px 10px;"
                            data-row-idx="${rowIdx}">
                            <i class="fas fa-plus me-1"></i> Tambah Barang Pendukung
                        </button>
                    </div>
                </div>`;

                $(`#selected-opsional-list-${rowIdx}`).append(cardHtml);
                applyBackdateMinToShowForm();
            }
            $(document).on('change', '.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);
                $(`#opsional-tgl-kembali-${rowIdx}`).attr('min', val);
                const $tglAmbil = $(`#selected-opsional-list-${rowIdx} .tgl-ambil-opsional`);
                if ($tglAmbil.length) $tglAmbil.attr('min', val ? val + 'T00:00' : '');
            });

            $(document).on('change', '.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 = $(`#selected-opsional-list-${rowIdx} .tgl-ambil-opsional`);
                if ($tglAmbil.length) $tglAmbil.attr('max', val ? val + 'T23:59' : '');
            });


            @if ($errors->any())
                const $firstError = $('.is-invalid, .prb-field-error').first();
                if ($firstError.length) {
                    $('html, body').animate({
                        scrollTop: $firstError.offset().top - 120
                    }, 400);
                }
            @endif

            const oldAssets = @json($oldAssets ?? []);
            for (const [itemIdx, barangArray] of Object.entries(oldAssets)) {
                const idx = parseInt(itemIdx);
                selectedByItem[idx] = new Set();
                barangArray.forEach((barang, barangIdx) => {
                    const kode = barang.kode_asset;
                    const nama = barang.nama_barang || '';
                    selectedByItem[idx].add(kode);

                    const cardHtml = `
                    <div class="selected-barang-card border rounded p-2 mb-2"
                        id="selected-card-${idx}-${barangIdx}"
                        data-kode="${kode}" data-item-idx="${idx}" data-barang-idx="${barangIdx}"
                        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}">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <button type="button"
                                class="btn btn-sm btn-outline-danger mb-0 btn-remove-selected-barang flex-shrink-0"
                                style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                                data-unique-key="${kode}" data-item-idx="${idx}"
                                data-card-id="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>
                             <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail ms-1" data-kode="${kode}" data-value="${value}" title="Lihat detail asset" style="height:24px;width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;">
                                   <i class="fas fa-info-circle" style="font-size: .8rem;"></i>
                               </button>
                            <div class="d-flex align-items-center gap-1 ms-2">
                                <div>
                                    <label style="font-size:.78rem;font-weight:600;white-space:nowrap;color:#374151;">
                                        Tgl Ambil <span class="text-danger">*</span>
                                    </label>
                                    <input type="datetime-local"
                                        class="form-control form-control-sm tgl-ambil-barang
                                               ${getPhpError('items.' + idx + '.barang.' + barangIdx + '.tanggal_ambil') ? 'is-invalid' : ''}"
                                        name="items[${idx}][barang][${barangIdx}][tanggal_ambil]"
                                        style="width:180px; font-size:.78rem;"
                                        value="${barang.tanggal_ambil || ''}"
                                        required>
                                    ${errorHtml('items.' + idx + '.barang.' + barangIdx + '.tanggal_ambil')}
                                </div>
                            </div>
                        </div>
                        ${renderBarangPendukungForBarang(idx, barangIdx, kode, nama)}
                    </div>`;

                    $(`#selected-barang-list-${idx}`).append(cardHtml);

                    const bpList = barang.barang_pendukung || {};
                    const $bpContainer = $(`#barang-pendukung-list-barang-${idx}-${barangIdx}`);
                    if ($bpContainer.length && Object.keys(bpList).length > 0) {
                        $bpContainer.empty();
                        Object.entries(bpList).forEach(([, bp], i) => {
                            $bpContainer.append(buildBarangPendukungRow(idx, barangIdx, i, i ===
                                0));
                            const $lastRow = $bpContainer.find('.barang-pendukung-row-barang')
                                .last();
                            $lastRow.find(`input[name*="[nama_barang_pendukung]"]`).val(bp
                                .nama_barang_pendukung || '');
                            $lastRow.find(`input[name*="[catatan]"]`).val(bp.catatan || '');
                        });
                    }
                });

                $(`tr[data-item-index="${idx}"] .qty-disetujui`).val(selectedByItem[idx].size);
                const $row = $(`tr[data-item-index="${idx}"]`);
                $row.find('.item-status').val('approved');
                $row.find('.btn-approve-item').addClass('active btn-success').removeClass('btn-secondary');
                $row.find('.btn-reject-item').removeClass('active btn-danger').addClass('btn-secondary');
            }


            $('body').append(`
            <div id="stok-loading-overlay"
                style="position:fixed;inset:0;z-index:99999;background:rgba(255,255,255,0.82);
                       backdrop-filter:blur(3px);display:flex;flex-direction:column;
                       align-items:center;justify-content:center;gap:16px;">
                <div style="width:52px;height:52px;border-radius:50%;
                            border:5px solid #e0f2f2;border-top-color:#028284;
                            animation:stok-spin 0.8s linear infinite;"></div>
                <div style="text-align:center;">
                    <div style="font-size:1rem;font-weight:600;color:#028284;margin-bottom:4px;">Memuat Data Barang...</div>
                    <div style="font-size:.82rem;color:#6b7280;">Mohon tunggu, sedang mengambil data stok</div>
                </div>
            </div>
            <style>@keyframes stok-spin { to { transform: rotate(360deg); } }</style>`);

            function hideStokLoading() {
                $('#stok-loading-overlay').fadeOut(300, function() {
                    $(this).remove();
                });
            }

            $.getJSON('{{ url($url_menu . '/stok-barang-display') }}', function(res) {
                console.group('=== STOK BARANG LOAD AWAL ===');
                console.log('Total item dari server:', res.length);
                console.log('Raw data:', res);
                
                // cek per nama barang
                const grouped = {};
                res.forEach(b => {
                    const nama = (b.nama_barang ?? '').toLowerCase();
                    if (!grouped[nama]) grouped[nama] = { asset: [], manual: [] };
                    if (b.kode_asset) {
                        grouped[nama].asset.push(b.kode_asset);
                    } else {
                        grouped[nama].manual.push({ qty: b.qty });
                    }
                });
                console.log('Grouped by nama barang:', grouped);
                console.groupEnd();
                allStok = res;
                stokTracker = {};
                stokManualTracker = {};

                res.forEach(b => {
                    const nama = (b.nama_barang ?? '').toLowerCase();
                    if (b.kode_asset !== null) {
                        if (!stokTracker[nama]) stokTracker[nama] = 0;
                        stokTracker[nama]++;
                    } else {
                        if (!stokManualTracker[nama]) stokManualTracker[nama] = 0;
                        stokManualTracker[nama] += (parseInt(b.qty) || 0);
                    }
                });

                $('input.stock-display').each(function() {
                    const rawNama = $(this).data('nama');
                    const nama = namaMap[rawNama] ?? rawNama;
                    const count = (stokTracker[nama] ?? 0) + (stokManualTracker[nama] ?? 0);
                    $(this).val(count);
                    if (count === 0) {
                        const $row = $(this).closest('tr');
                        const index = $row.data('item-index');
                        if (index !== undefined) {
                            $row.find('.btn-reject-item').trigger('click');
                            $row.find('.btn-approve-item').prop('disabled', true).addClass(
                                'disabled');
                            $row.find('.btn-reject-item').prop('disabled', true).addClass(
                                'disabled');
                            $row.find('.item-status').val('rejected');
                        }
                    }
                });

                checkAllRejected();
                refreshAllPilihBarangButtons();
                hideStokLoading();

            }).fail(function() {
                $('#stok-loading-overlay').html(`
                <div style="text-align:center; padding:24px;">
                    <div style="font-size:2rem; margin-bottom:12px;">⚠️</div>
                    <div style="font-size:1rem;font-weight:600;color:#dc2626;margin-bottom:6px;">Gagal Memuat Data Barang</div>
                    <div style="font-size:.82rem;color:#6b7280;margin-bottom:16px;">
                        Terjadi kesalahan saat mengambil data stok.<br>Periksa koneksi Anda lalu coba lagi.
                    </div>
                    <button id="btn-retry-stok" class="btn btn-primary mb-0" style="background:#028284;border-color:#028284;">
                        <i class="fas fa-redo me-1"></i> Coba Lagi
                    </button>
                </div>`);
                $('#btn-retry-stok').on('click', function() {
                    location.reload();
                });
            });


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

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

                if (activePenerimaRowEl) {
                    activePenerimaRowEl.find('.penerima-display').val(nama);
                    activePenerimaRowEl.find('.penerima-hidden').val(nik);  
                    penerimaModalInstance?.hide();
                    activePenerimaRowEl = null;
                } else if (activePenerimaOpsionalIdx !== null) {
                    const idx = activePenerimaOpsionalIdx;
                    $(`#opsional-penerima-display-${idx}`).val(nama);
                    $(`#opsional-penerima-hidden-${idx}`).val(nik); 
                    penerimaOpsionalModalInstance?.hide();
                    activePenerimaOpsionalIdx = null;
                }
            });


            $(document).on('click', '[data-action="open-penerima-opsional"]', function() {
                activePenerimaOpsionalIdx = $(this).data('row-idx');
                if (!penerimaOpsionalModalInstance) {
                    penerimaOpsionalModalInstance = new bootstrap.Modal(document.getElementById(
                        'penerimaModal'));
                }
                penerimaCache = null;
                document.getElementById('searchPenerimaModal').value = '';
                loadPenerima('');
                penerimaOpsionalModalInstance.show();
            });


            $(document).on('click', '.btn-remove-selected-barang', function() {
                const uniqueKey = $(this).data('unique-key');
                const itemIdx = $(this).data('item-idx');
                const cardId = $(this).data('card-id');
                if (selectedByItem[itemIdx]) selectedByItem[itemIdx].delete(uniqueKey);
                $(`#${cardId}`).remove();
                $(`tr[data-item-index="${itemIdx}"] .qty-disetujui`)
                    .val(selectedByItem[itemIdx] ? selectedByItem[itemIdx].size : 0);
                $(`#selected-barang-list-${itemIdx} .selected-barang-card`).each(function(i) {
                    $(this).find('.badge').first().text(i + 1);
                });
                updatePilihBarangButton(itemIdx);
            });


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


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


            $(document).on('click', '.btn-open-opsional-asset-modal', function () {
                const rowIdx    = $(this).data('row-idx');
                const namaLower = $(this).data('nama-barang');

                const tglPinjam  = $(`#opsional-tgl-pinjam-${rowIdx}`).val()
                    || $(`tr[data-opsional-index="${rowIdx}"]`).data('tanggal-pinjam');
                const tglKembali = $(`#opsional-tgl-kembali-${rowIdx}`).val()
                    || $(`tr[data-opsional-index="${rowIdx}"]`).data('tanggal-kembali');

                opsionalTanggalPinjam  = tglPinjam;
                opsionalTanggalKembali = tglKembali;
                activeOpsionalRowIdx   = rowIdx;

                openOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali);
            });


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

                selectedByOpsionalRow[rowIdx] = kode;
                appendOpsionalSelectedCard(rowIdx, kode, nama, value, false);

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

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


            $(document).on('click', '.btn-select-opsional-manual-new', 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 = activeOpsionalRowIdx;

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

                const uniqueKey = `${kode}__${Date.now()}`;
                selectedByOpsionalRow[rowIdx] = uniqueKey;
                appendOpsionalSelectedCard(rowIdx, uniqueKey, nama, value, true);

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

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


            $(document).on('click', '.btn-add-bp-opsional', function() {
                const rowIdx = $(this).data('row-idx');
                const list = $(`#bp-opsional-list-${rowIdx}`);
                const next = list.find('.bp-opsional-row').length;
                list.append(buildBpOpsionalRow(rowIdx, next, false));
            });

            $(document).on('click', '.btn-remove-bp-opsional', function() {
                const $list = $(this).closest('[id^="bp-opsional-list-"]');
                $(this).closest('.bp-opsional-row').remove();
                $list.find('.bp-opsional-row').each(function(i) {
                    $(this).find('input').each(function() {
                        const n = ($(this).attr('name') || '').replace(
                            /\[barang_pendukung\]\[\d+\]/, `[barang_pendukung][${i}]`);
                        $(this).attr('name', n);
                    });
                    $(this).find('[style*="text-align:right"]').text(`${i + 1}.`);
                });
            });


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

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


            $(document).on('click', '.btn-reject-item', function() {
                const index = $(this).data('index');
                const $row = $(`tr[data-item-index="${index}"]`);
                $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 (selectedByItem[index]) selectedByItem[index].clear();
                $(`#selected-barang-list-${index}`).empty();
                $(`.btn-open-modal-barang[data-index="${index}"]`)
                    .prop('disabled', true).addClass('disabled')
                    .css({
                        opacity: 0.5,
                        pointerEvents: 'none'
                    });
                checkAllRejected();
            });

            $(document).on('click', '.btn-approve-item', function() {
                const index = $(this).data('index');
                const $row = $(`tr[data-item-index="${index}"]`);
                $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');
                checkAllRejected();
                updatePilihBarangButton(index);
            });


            // ── Ganti: bukan lagi dipanggil sekali saat load ─────────────────────
            // Sekarang dipanggil setiap kali modal dibuka, dengan tanggal item

            $(document).on('click', '.btn-open-modal-barang', function () {
                activeItemIndex = $(this).data('index');
                const rawNama   = $(this).data('nama-barang');
                activeItemNama  = namaMap[rawNama] ?? rawNama;

                const $row         = $(`tr[data-item-index="${activeItemIndex}"]`);
                const namaDisplay  = $row.find('td:nth-child(2) input').val() || activeItemNama;
                const tglPinjam    = $row.data('tanggal-pinjam');
                const tglKembali   = $row.data('tanggal-kembali');

                $('#modal-item-label').text(namaDisplay);
                if (!selectedByItem[activeItemIndex]) selectedByItem[activeItemIndex] = new Set();

                if ($.fn.DataTable.isDataTable('#barangItemTable')) {
                    $('#barangItemTable').DataTable().clear().destroy();
                }
                $('#barangItemTableBody').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>`);

                function toYmd(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;
                }

                const tglPinjamYmd  = toYmd(tglPinjam);
                const tglKembaliYmd = toYmd(tglKembali);
                const params = new URLSearchParams({
                    tanggal_pinjam  : tglPinjamYmd,
                    tanggal_kembali : tglKembaliYmd,
                });

                $.getJSON(`{{ url($url_menu . '/stok-barang') }}?${params}`, function(res) {
                    allStok = res;

                    // Rebuild tracker dari response terbaru
                    stokTracker       = {};
                    stokManualTracker = {};
                    res.forEach(b => {
                        const nama = (b.nama_barang ?? '').toLowerCase();
                        if (b.kode_asset !== null) {
                            if (!stokTracker[nama]) stokTracker[nama] = 0;
                            stokTracker[nama]++;
                        } else {
                            if (!stokManualTracker[nama]) stokManualTracker[nama] = 0;
                            stokManualTracker[nama] += (parseInt(b.qty) || 0);
                        }
                    });

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

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

                    bookingKonflik = [];

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

                    $.ajax({
                        url: '{{ url('trpjbr/booking-konflik') }}',
                        method: 'GET',
                        data: {
                            kode_assets     : relevantKodes,
                            nama_barangs    : relevantNamaManual,
                            tanggal_pinjam  : tglPinjamYmd,
                            tanggal_kembali : tglKembaliYmd,
                        },
                        success: res => {
                            bookingKonflik = res;
                            renderBarangItemTable();
                        },
                        error: () => {
                            bookingKonflik = [];
                            renderBarangItemTable();
                        }
                    });
                });
            });

            

            // Ganti handler item-tgl-pinjam yang sudah ada:
            $(document).on('change', '.item-tgl-pinjam', function () {
                const idx = $(this).data('idx');
                const val = $(this).val();

                // Update data attribute di <tr>
                $(`tr[data-item-index="${idx}"]`)
                    .data('tanggal-pinjam', val)
                    .attr('data-tanggal-pinjam', val);

                // Sync hidden input name agar terkirim ke controller
                $(`input[name="items[${idx}][tanggal_pinjam]"]`).val(val);

                const $tglKembali = $(`.item-tgl-kembali[data-idx="${idx}"]`);
                $tglKembali.attr('min', val);
                if ($tglKembali.val() && $tglKembali.val() < val) {
                    $tglKembali.val('');
                    $(`input[name="items[${idx}][tanggal_kembali]"]`).val('');
                }
            });

            $(document).on('change', '.item-tgl-kembali', function () {
                const idx = $(this).data('idx');
                const val = $(this).val();

                $(`tr[data-item-index="${idx}"]`)
                    .data('tanggal-kembali', val)
                    .attr('data-tanggal-kembali', val);

                // Sync hidden input
                $(`input[name="items[${idx}][tanggal_kembali]"]`).val(val);
            });
            $(document).on('click', '.btn-select-barang-item', function() {
                const kode = $(this).data('kode');
                const nama = $(this).data('nama');
                const value = $(this).data('value') ?? '';
                const idx = activeItemIndex;
                if (!selectedByItem[idx]) selectedByItem[idx] = new Set();
                const qtyDiminta = getQtyDiminta(idx);

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

                selectedByItem[idx].add(kode);
                const barangIdx = selectedByItem[idx].size - 1;
                const isFirst = barangIdx === 0;

                const cardHtml = `
                <div class="selected-barang-card border rounded p-2 mb-2"
                    id="selected-card-${idx}-${barangIdx}"
                    data-kode="${kode}" data-item-idx="${idx}" data-barang-idx="${barangIdx}"
                    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 btn-remove-selected-barang flex-shrink-0"
                            style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                            data-unique-key="${kode}" data-item-idx="${idx}"
                            data-card-id="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>
                         <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail ms-1" data-kode="${kode}" data-value="${value}" title="Lihat detail asset" style="height:24px;width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;">
                                   <i class="fas fa-info-circle" style="font-size: .8rem;"></i>
                               </button>
                        ${isFirst ? `
                                <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>
                    ${renderBarangPendukungForBarang(idx, barangIdx, kode, nama)}
                </div>`;

                $(`#selected-barang-list-${idx}`).append(cardHtml);
                $(`tr[data-item-index="${idx}"] .qty-disetujui`).val(selectedByItem[idx].size);
                updatePilihBarangButton(idx);
                applyBackdateMinToShowForm();

                if (selectedByItem[idx].size >= qtyDiminta) {
                    bootstrap.Modal.getInstance(document.getElementById('barangItemModal')).hide();
                } else {
                    renderBarangItemTable();
                }
            });


            $(document).on('click', '.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 = activeItemIndex;
                const qtyDiminta = getQtyDiminta(idx);

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

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

                pendingManualBarang = {
                    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 barangItemModalEl = document.getElementById('barangItemModal');
                if (barangItemModalEl._pendingQtyOpenBarang) {
                    barangItemModalEl.removeEventListener('hidden.bs.modal', barangItemModalEl
                        ._pendingQtyOpenBarang);
                }
                barangItemModalEl._pendingQtyOpenBarang = function openQtyModal() {
                    barangItemModalEl._pendingQtyOpenBarang = null;
                    new bootstrap.Modal(document.getElementById('qtyManualModal')).show();
                };
                barangItemModalEl.addEventListener('hidden.bs.modal', barangItemModalEl
                    ._pendingQtyOpenBarang, {
                        once: true
                    });
                bootstrap.Modal.getInstance(barangItemModalEl)?.hide();
            });

            $('#btn-confirm-qty-manual').on('click', function() {
                if (!pendingManualBarang) return;
                const {
                    kode,
                    nama,
                    value,
                    idx,
                    sisaStok,
                    qtyDiminta
                } = pendingManualBarang;
                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();

                const now = Date.now();
                const existingCount = selectedByItem[idx] ? selectedByItem[idx].size : 0;

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

                    const cardHtml = `
                    <div class="selected-barang-card border rounded p-2 mb-2"
                        id="selected-card-${idx}-${now}-${q}"
                        data-unique-key="${uniqueKey}" data-item-idx="${idx}" data-barang-idx="${barangIdx}"
                        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">
                            <!-- Asset detail button -->
                            <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail" data-kode="${kode}" data-value="${value}" title="Lihat detail asset" style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;">
                                <i class="fas fa-info-circle" style="font-size:.7rem;"></i>
                            </button>
                            <button type="button"
                                class="btn btn-sm btn-outline-danger mb-0 btn-remove-selected-barang flex-shrink-0"
                                style="height:28px;width:28px;padding:0;display:flex;align-items:center;justify-content:center;"
                                data-unique-key="${uniqueKey}" data-item-idx="${idx}"
                                data-card-id="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>
                            <code class="text-muted" style="font-size:.78rem;">${kode}</code>
                             <button type="button" class="btn btn-sm btn-outline-primary btn-view-asset-detail ms-1" data-kode="${kode}" data-value="${value}" title="Lihat detail asset" style="height:24px;width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;">
                                   <i class="fas fa-info-circle" style="font-size: .8rem;"></i>
                               </button>
                            <span class="badge bg-warning text-dark">Manual ${q + 1}/${qty}</span>
                            ${isFirst ? `
                                    <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>
                        ${renderBarangPendukungForBarang(idx, barangIdx, `MANUAL-${nama}-${q}`, nama)}
                    </div>`;

                    $(`#selected-barang-list-${idx}`).append(cardHtml);
                }

                $(`tr[data-item-index="${idx}"] .qty-disetujui`).val(selectedByItem[idx].size);
                updatePilihBarangButton(idx);
                applyBackdateMinToShowForm();
                pendingManualBarang = null;
            });

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


            $(document).on('click', '.btnSelectBarang', function() {
                pendingOpsionalNama = $(this).data('name');
                const namaLower = pendingOpsionalNama.toLowerCase();

                $('#tanggal-opsional-nama-label').text(pendingOpsionalNama);

                let tglPinjamAuto = '';
                let tglKembaliAuto = '';
                let found = false;

                $('tr[data-item-index]').each(function() {
                    const rowNama = ($(this).data('nama-barang') ?? '').toLowerCase();
                    if (rowNama === namaLower || (namaMap[rowNama] ?? rowNama) === namaLower) {
                        tglPinjamAuto = $(this).data('tanggal-pinjam') ?? '';
                        tglKembaliAuto = $(this).data('tanggal-kembali') ?? '';
                        found = true;
                        return false;
                    }
                });

                if (!found) {
                    const $first = $('tr[data-item-index]').first();
                    if ($first.length) {
                        tglPinjamAuto = $first.data('tanggal-pinjam') ?? '';
                        tglKembaliAuto = $first.data('tanggal-kembali') ?? '';
                    }
                }

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

                const nowDatetime = getNowLocalDatetimeValue();
                const nowDate = getNowLocalDateValue();
                $('#opsional-input-tanggal-pinjam').attr('min', nowDate);

                const minAmbil = tglPinjamAuto ? toDatetimeLocalValue(tglPinjamAuto, '00:00') : nowDatetime;
                $('#opsional-input-tanggal-ambil').attr('min', minAmbil);

                const minKembali = tglPinjamAuto ? toDateInputValue(tglPinjamAuto) : nowDate;
                $('#opsional-input-tanggal-kembali').attr('min', minKembali);

                if (tglKembaliAuto) {
                    $('#opsional-input-tanggal-ambil').attr('max', toDatetimeLocalValue(tglKembaliAuto,
                        '23:59'));
                }

                const barangModalEl = document.getElementById('barangModal');
                bootstrap.Modal.getInstance(barangModalEl).hide();
                barangModalEl.addEventListener('hidden.bs.modal', function openTanggal() {
                    barangModalEl.removeEventListener('hidden.bs.modal', openTanggal);
                    new bootstrap.Modal(document.getElementById('tanggalOpsionalModal')).show();
                });
            });


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

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


            $('#btn-confirm-tanggal-opsional').off('click').on('click', function() {
                const tglPinjam = $('#opsional-input-tanggal-pinjam').val();
                const tglAmbil = $('#opsional-input-tanggal-ambil').val();
                const tglKembali = $('#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;
                }

                opsionalTanggalPinjam = tglPinjam;
                opsionalTanggalAmbil = tglAmbil;
                opsionalTanggalKembali = tglKembali;

                const namaAsli = pendingOpsionalNama;
                const namaLower = namaAsli.toLowerCase();
                const mapped = namaMap[namaLower] ?? namaLower;
                const stokAwal = (stokTracker[mapped] ?? 0) + (stokManualTracker[mapped] ?? 0);

                const rowIdx = opsionalRowCount++;
                activeOpsionalRowIdx = rowIdx;
                selectedByOpsionalRow[rowIdx] = null;

                $('#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 class="td-action">
                        <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 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="opsional-penerima-hidden" id="opsional-penerima-hidden-${rowIdx}" value="${defaultPengajuNik}">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control opsional-penerima-display"
                                id="opsional-penerima-display-${rowIdx}"
                                placeholder="Pilih penerima..." readonly required
                                value="${defaultPengajuNama}">
                            <span class="input-group-text bg-primary text-light" style="cursor:pointer;"
                                data-action="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 opsional-tgl-pinjam-edit"
                            id="opsional-tgl-pinjam-${rowIdx}"
                            value="${tglPinjam}"
                            data-row-idx="${rowIdx}">
                    </td>
                    <td>
                        <input type="date"
                            class="form-control opsional-tgl-kembali-edit"
                            id="opsional-tgl-kembali-${rowIdx}"
                            value="${tglKembali}"
                            min="${tglPinjam}"
                            data-row-idx="${rowIdx}">
                    </td>
                </tr>

                <tr class="row-pilih-opsional" data-for-opsional="${rowIdx}">
                    <td colspan="8" class="p-0">
                        <div class="pilih-barang-wrapper 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 flex-shrink-0 btn-open-opsional-asset-modal"
                                    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">(${toDisplayDate(tglPinjam)} → ${toDisplayDate(tglKembali)})</span>
                                </span>
                            </div>
                            <div class="selected-opsional-list" id="selected-opsional-list-${rowIdx}"></div>
                        </div>
                    </td>
                </tr>`;

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

                const tanggalModalEl = document.getElementById('tanggalOpsionalModal');
                bootstrap.Modal.getInstance(tanggalModalEl).hide();
                tanggalModalEl.addEventListener('hidden.bs.modal', function openAsset() {
                    tanggalModalEl.removeEventListener('hidden.bs.modal', openAsset);
                    openOpsionalAssetModal(rowIdx, namaLower, tglPinjam, tglKembali);
                });
            });

            function toDisplayDate(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;
            }
            function autoApproveIfConditionGood() {
                $('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');
                });
                $('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');
                    });
                $('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');
                });
                $('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');
                });
            }
            autoApproveIfConditionGood();

            $(document).on('change', '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',
                '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', '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',
                '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');
                });


            $('#form-approve-admin')?.on('submit', function(e) {
                e.preventDefault();
                const self = this;
                let adaApprove = false,
                    adaReject = false,
                    adaItemTidakDiset = false;
                const errorMsg = [];

                $('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-APPROVE atau di-REJECT!');

                if (adaApprove) {
                    const $tglInputs = $('input.tgl-ambil-barang');
                    if ($tglInputs.length === 0) {
                        errorMsg.push('Pilih barang terlebih dahulu untuk item yang disetujui.');
                    } else {
                        let adaTglKosong = false;
                        $tglInputs.each(function() {
                            if (!$(this).val()) {
                                adaTglKosong = true;
                                return false;
                            }
                        });
                        if (adaTglKosong) errorMsg.push(
                            'Tanggal Ambil harus diisi untuk semua barang yang disetujui.');
                    }
                }

                const catatanAdmin = ($('textarea[name="catatan_admin"]').val() || '').trim();
                if (adaReject && !catatanAdmin) errorMsg.push(
                    'Ada item yang di-REJECT, maka Catatan Admin wajib diisi.');

                if (errorMsg.length) {
                    Swal.fire({
                        title: 'Validasi Gagal',
                        html: errorMsg.join('<br>'),
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const confirmText = (!adaApprove && adaReject) ?
                    'Semua item ditolak. Status akan langsung menjadi COMPLETED.' :
                    'Approve peminjaman ini? Barang akan diambil oleh user';

                Swal.fire({
                    title: 'Konfirmasi Approve',
                    text: confirmText,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Approve',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#19a974',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (result.isConfirmed) self.submit();
                });
            });


            window.confirmApproveHead = function() {
                Swal.fire({
                    title: 'Konfirmasi Approve',
                    text: 'Approve pengajuan ini? Pengajuan akan di ajukan ke Admin?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Approve',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#19a974',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (result.isConfirmed) document.getElementById('form-approve-head').submit();
                });
            };

            window.confirmRejectHead = function() {
                const catatan = document.getElementById('catatan_reject').value.trim();
                if (!catatan) {
                    Swal.fire({
                        title: 'Perhatian',
                        text: 'Alasan reject harus diisi!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
                Swal.fire({
                    title: 'Konfirmasi Reject',
                    text: 'Reject pengajuan ini? Pengajuan akan dikembali ke user.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Reject',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (result.isConfirmed) document.getElementById('form-reject').submit();
                });
            };

            window.showRejectModal = function() {
                new bootstrap.Modal(document.getElementById('rejectModal')).show();
            };

            window.submitReturn = function() {
                const $pendingPerp = $('.btn-perp-approve, .btn-perp-reject').filter(':visible');
                if ($pendingPerp.length > 0) {
                    Swal.fire({
                        title: 'Ada Perpanjangan Pending',
                        html: `Terdapat pengajuan perpanjangan yang belum diproses.<br>
                            <small class="text-muted">Harap approve atau reject perpanjangan tersebut sebelum submit return.</small>`,
                        icon: 'warning',
                        confirmButtonColor: '#f59e0b',
                        confirmButtonText: 'Mengerti'
                    });
                    return;
                }
                let emptyCount = 0;
                $('#form-return .return-input[required]').each(function() {
                    if (!$(this).val()) emptyCount++;
                });

                if (emptyCount > 0) {
                    Swal.fire({
                        title: 'Validasi Gagal',
                        html: `Masih ada <strong>${emptyCount}</strong> field yang belum diisi.<br>
                                Harap lengkapi semua field yang ditandai <span class="text-danger">*</span>.`,
                        icon: 'warning',
                        confirmButtonColor: '#f59e0b'
                    });
                    return;
                }

                const allStatusSelects = $('#form-return select[name*="[status_asset]"]');
                let totalAsset = allStatusSelects.length,
                    approvedAsset = 0,
                    borrowedAsset = 0;
                allStatusSelects.each(function() {
                    if ($(this).val() === 'approve') approvedAsset++;
                    if ($(this).val() === 'borrowed') borrowedAsset++;
                });

                const hiddenApproved = $(
                    '#form-return input[type="hidden"][name*="[status_asset]"][value="approve"]').length;
                const hiddenBorrowed = $(
                    '#form-return input[type="hidden"][name*="[status_asset]"][value="borrowed"]').length;
                const totalAll = totalAsset + hiddenApproved + hiddenBorrowed;
                const approvedAll = approvedAsset + hiddenApproved;
                const borrowedAll = borrowedAsset + hiddenBorrowed;

                const statusChange = approvedAll === totalAll ?
                    'Semua asset di-approve. Status peminjaman akan berubah menjadi <strong>COMPLETED</strong>.' :
                    borrowedAll > 0 ?
                    `${borrowedAll} dari ${totalAll} asset masih <strong>BORROWED</strong>. Status peminjaman akan tetap <strong>BORROWED</strong>.` :
                    `${approvedAll} dari ${totalAll} asset di-approve.`;

                Swal.fire({
                    title: 'Konfirmasi Submit Return',
                    html: `Proses return barang ini?<br><small class="text-muted">${statusChange}</small>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-undo-alt me-1"></i> Ya, Submit Return',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#f59e0b',
                    cancelButtonColor: '#6c757d'
                }).then(result => {
                    if (result.isConfirmed) document.getElementById('form-return').submit();
                });
            };


            const approveFormEl = document.getElementById('form-approve-admin');
            if (approveFormEl) {
                new MutationObserver(applyBackdateMinToShowForm)
                    .observe(approveFormEl, {
                        childList: true,
                        subtree: true
                    });
            }

            applyBackdateMinToShowForm();
            checkAllRejected();

            @php  
                // $rolesViewer sudah di-set di atas (termasuk expand mis.it)
                $isViewerGuest = in_array('guests', $rolesViewer); 
            @endphp
            @if (($isViewerGuest || $isViewerHead) && $isOnProgress)
                Swal.fire({
                    title: '<i class="fas fa-box-open me-2"></i>Peminjaman Disetujui',
                    html: `<div style="text-align:left; padding: 4px 0;">
                        <p class="mb-2">Peminjaman Anda telah disetujui. Silakan segera datang untuk mengambil barang pinjaman Anda.</p>
                        
                    </div>`,
                    icon: 'success',
                    confirmButtonText: '<i class="fas fa-check me-1"></i> Mengerti',
                    confirmButtonColor: '#028284',
                    allowOutsideClick: false,
                });
            @endif
            // State untuk modal konflik

            $(document).on('click', '.btn-perp-approve', function () {
                const tglInputId     = $(this).data('tgl-input-id');
                const catatanInputId = $(this).data('catatan-input-id');
                const url            = $(this).data('url');

                const tgl     = $(`#${tglInputId}`).val();
                const catatan = $(`#${catatanInputId}`).val();

                if (!tgl) {
                    Swal.fire({
                        title: 'Tanggal wajib diisi',
                        text: 'Masukkan tanggal kembali yang disetujui terlebih dahulu.',
                        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
                    _perpApprovePayload = { url, tgl, catatan };

                    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();
                            _replacementSelections = {}; // reset bersih karena ini konflik baru
                            _showKonflikModal(data);
                        } else {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: data.message ?? 'Perpanjangan berhasil disetujui.',
                                icon: 'success',
                                confirmButtonColor: '#028284'
                            }).then(() => location.reload());
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat approve perpanjangan.',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    });
                });
            });

            // ── State konflik modal ──────────────────────────────────────────────
            let _perpApprovePayload  = null;
            let _replacementSelections = {};
            let _activeKonflikAssetId  = null;
            let _konflikAssetNama      = null;
            let _konflikTglPinjam      = null;
            let _konflikTglKembali     = null;
            let _kodeAssetA            = null;
            let _tglPinjamA            = null;
            let _lastKonflikData       = null;
            let _konflikModalInstance  = null;
            let _replacementModalInstance = null;

            // ── Render body modal konflik ────────────────────────────────────────
            function _renderKonflikBody(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 secara otomatis.
                    </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 sebelum bisa approve.
                    </div>`;

                const konflikRows = data.konflik_assets.map((k) => {
                    const isAssetA   = _kodeAssetA && k.kode_asset === _kodeAssetA;
                    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 = _replacementSelections[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="konflik-asset-row 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 btn-pilih-replacement-modal"
                                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 class="replacement-display" style="font-size:.8rem;">${displayHtml}</div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-0 btn-unassign-modal"
                                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 btn-clear-modal"
                                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="konflik-counter-wrap" class="mt-2 p-2 rounded text-center" style="font-size:.82rem;border:1px solid #e2e8f0;">
                    <span id="konflik-counter-text"></span>
                </div>`;
            }

            // ── Buka modal konflik ───────────────────────────────────────────────
            function _showKonflikModal(data) {
                _lastKonflikData = data;
                _kodeAssetA      = data.kode_asset_a ?? null;
                _tglPinjamA      = data.tgl_pinjam_a ?? null;

                // Init selections hanya untuk asset yang belum ada di state
                data.konflik_assets.forEach(k => {
                    if (!(_replacementSelections.hasOwnProperty(k.asset_id))) {
                        _replacementSelections[k.asset_id] = null;
                    }
                });

                // Auto unassign jika tidak ada asset tersedia
                if (data.asset_tersedia.length === 0) {
                    data.konflik_assets.forEach(k => {
                        _replacementSelections[k.asset_id] = '__unassigned__';
                    });
                }

                const totalKonflik = data.konflik_assets.length;
                document.getElementById('konflik-modal-title').textContent =
                    `${totalKonflik} Konflik Asset Terdeteksi`;
                document.getElementById('konflik-modal-body').innerHTML = _renderKonflikBody(data);

                _updateKonflikCounter(totalKonflik);
                _updateConfirmButton(totalKonflik);
                _bindKonflikEvents(data, totalKonflik);

                if (!_konflikModalInstance) {
                    _konflikModalInstance = new bootstrap.Modal(document.getElementById('konflikModal'));
                }
                _konflikModalInstance.show();
            }

            // ── Re-render body tanpa reset state ────────────────────────────────
            function _rerenderKonflikBody() {
                if (!_lastKonflikData) return;
                const totalKonflik = _lastKonflikData.konflik_assets.length;
                document.getElementById('konflik-modal-body').innerHTML = _renderKonflikBody(_lastKonflikData);
                _updateKonflikCounter(totalKonflik);
                _updateConfirmButton(totalKonflik);
                _bindKonflikEvents(_lastKonflikData, totalKonflik);
            }

            // ── Bind events di dalam modal konflik ──────────────────────────────
            function _bindKonflikEvents(data, totalKonflik) {
                // Pilih asset pengganti → buka modal replacement
                document.querySelectorAll('.btn-pilih-replacement-modal').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _activeKonflikAssetId = parseInt(this.dataset.assetId);
                        _konflikAssetNama     = (this.dataset.namaBarang ?? '').toLowerCase();
                        _konflikTglPinjam     = this.dataset.tanggalPinjam;
                        _konflikTglKembali    = this.dataset.tanggalKembali;
                        _openReplacementModal();
                    });
                });

                // Unassign
                document.querySelectorAll('.btn-unassign-modal').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _replacementSelections[parseInt(this.dataset.assetId)] = '__unassigned__';
                        _rerenderKonflikBody();
                    });
                });

                // Reset / clear pilihan
                document.querySelectorAll('.btn-clear-modal').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _replacementSelections[parseInt(this.dataset.assetId)] = null;
                        _rerenderKonflikBody();
                    });
                });

                // Tombol confirm approve
                const $confirmBtn = document.getElementById('btn-confirm-konflik-approve');
                if ($confirmBtn) {
                    $confirmBtn.onclick = function () {
                        const belumDiproses = Object.entries(_replacementSelections)
                            .filter(([, v]) => v === null);
                        if (belumDiproses.length > 0) {
                            Swal.fire({
                                title: 'Belum lengkap',
                                text: `Masih ada ${belumDiproses.length} konflik yang belum ditentukan!`,
                                icon: 'warning',
                                confirmButtonColor: '#028284'
                            });
                            return;
                        }
                        _submitKonflikApprove();
                    };
                }
            }

            // ── Submit approve dengan replacement ───────────────────────────────
            function _submitKonflikApprove() {
                const replacements = [];
                Object.entries(_replacementSelections).forEach(([assetId, kode]) => {
                    replacements.push({
                        asset_id      : parseInt(assetId),
                        new_kode_asset: (kode === '__unassigned__') ? null : kode,
                    });
                });

                const { url, tgl, catatan } = _perpApprovePayload;

                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 => {
                    _konflikModalInstance?.hide();
                    Swal.fire({
                        title: 'Berhasil!',
                        text : data.message ?? 'Perpanjangan disetujui & asset pengganti diterapkan.',
                        icon : 'success',
                        confirmButtonColor: '#028284'
                    }).then(() => location.reload());
                })
                .catch(() => {
                    Swal.fire({
                        title: 'Gagal!',
                        text : 'Terjadi kesalahan saat memproses.',
                        icon : 'error',
                        confirmButtonColor: '#028284'
                    });
                });
            }

            // ── Update counter & tombol confirm ─────────────────────────────────
            function _updateKonflikCounter(totalKonflik) {
                const sudahDiproses = Object.values(_replacementSelections)
                    .filter(v => v !== null).length;
                const selesai = sudahDiproses >= totalKonflik;

                const $wrap = document.getElementById('konflik-counter-wrap');
                const $text = document.getElementById('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 (${sudahDiproses}/${totalKonflik})</strong>
                    — siap di-approve`
                    : `<i class="fas fa-exclamation-circle me-1" style="color:#d97706;"></i>
                    <strong style="color:#d97706;">${sudahDiproses} dari ${totalKonflik} konflik sudah ditentukan</strong>
                    — selesaikan semua sebelum approve`;
            }

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

            // ── Buka modal replacement ───────────────────────────────────────────
            function _openReplacementModal() {
                function toYmd(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;
                }

                const tglPinjamYmd  = toYmd(_konflikTglPinjam);
                const tglKembaliYmd = toYmd(_konflikTglKembali);
                const params = new URLSearchParams({
                    tanggal_pinjam  : tglPinjamYmd,
                    tanggal_kembali : tglKembaliYmd,
                });

                document.getElementById('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 (!_replacementModalInstance) {
                    _replacementModalInstance = new bootstrap.Modal(
                        document.getElementById('replacementModal')
                    );
                }

                // Tombol back & close → kembali ke konflik modal
                document.getElementById('btn-back-replacement').onclick = _closeReplacementGoBack;
                document.getElementById('btn-close-replacement').onclick = _closeReplacementGoBack;

                _replacementModalInstance.show();

                $.getJSON(`{{ url($url_menu . '/stok-barang') }}?${params}`, function (res) {
                    const relevantKodes = res.filter(b =>
                        (b.nama_barang ?? '').toLowerCase() === _konflikAssetNama &&
                        b.kode_asset !== null && parseInt(b.isactive) === 1
                    ).map(b => b.kode_asset);

                    if (!relevantKodes.length) {
                        _renderReplacementBody(res, [], tglPinjamYmd, tglKembaliYmd);
                        return;
                    }

                    $.ajax({
                        url: '{{ url('trpjbr/booking-konflik') }}',
                        method: 'GET',
                        data: {
                            kode_assets     : relevantKodes,
                            tanggal_pinjam  : tglPinjamYmd,
                            tanggal_kembali : tglKembaliYmd,
                        },
                        success: konflikRes => _renderReplacementBody(res, konflikRes, tglPinjamYmd, tglKembaliYmd),
                        error:   ()         => _renderReplacementBody(res, [],        tglPinjamYmd, tglKembaliYmd),
                    });
                }).fail(() => {
                    document.getElementById('replacement-modal-body').innerHTML =
                        `<div class="text-center text-danger py-3">Gagal memuat data asset.</div>`;
                });
            }

            function _closeReplacementGoBack() {
                _replacementModalInstance?.hide();
                // Tunggu animasi selesai lalu tampilkan kembali modal konflik
                document.getElementById('replacementModal').addEventListener('hidden.bs.modal', function once() {
                    document.getElementById('replacementModal').removeEventListener('hidden.bs.modal', once);
                    _rerenderKonflikBody();
                    _konflikModalInstance?.show();
                });
            }

            // ── Render isi modal replacement ─────────────────────────────────────
            function _renderReplacementBody(allStokRes, konflikRes, tglPinjam, tglKembali) {
                const filtered = allStokRes.filter(b =>
                    (b.nama_barang ?? '').toLowerCase() === _konflikAssetNama &&
                    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 = _kodeAssetA && b.kode_asset === _kodeAssetA;
                    const sudahDipilih = Object.entries(_replacementSelections).some(
                        ([aid, kode]) => parseInt(aid) !== _activeKonflikAssetId && 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 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>
                                    Dipinjam: <strong>${fmtDate(k.tanggal_pinjam)}</strong>
                                    s/d <strong>${fmtDate(k.tanggal_kembali)}</strong>
                            </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;">
                            <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 btn-confirm-replacement-modal"
                            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('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>${fmtDate(tglPinjam)}</strong> – <strong>${fmtDate(tglKembali)}</strong>
                    </div>
                    ${tableHtml}`;

                // Bind pilih
                document.querySelectorAll('.btn-confirm-replacement-modal').forEach(btn => {
                    btn.addEventListener('click', function () {
                        _replacementSelections[_activeKonflikAssetId] = this.dataset.kode;
                        _closeReplacementGoBack();
                    });
                });
            }
        });

        // ── Handler: Lihat Detail Asset ──────────────────────────────
        $(document).on('click', '.btn-view-asset-detail', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var kode  = $(this).data('kode');
            var value = $(this).data('value');

            if (!kode) {
                console.warn('btn-view-asset-detail: data-kode kosong');
                return;
            }

            var $content = $('#assetDetailContent');
            var $loading = $('#assetDetailLoading');

            // Reset & show loading
            $content.html('<div class="text-center py-4" id="assetDetailLoading"><i class="fas fa-spinner fa-spin me-2"></i> Memuat detail asset...</div>');

            // Show modal immediately
            var modalEl = document.getElementById('assetDetailModal');
            var modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            modalInstance.show();

            $.ajax({
                url: '{{ url("trpjbr/asset-detail") }}',
                method: 'GET',
                data: { kode_asset: kode, value: value },
                dataType: 'json',
                success: function(res) {
                    if (res.error) {
                        $content.html('<div class="alert alert-danger"><i class="fas fa-exclamation-triangle me-1"></i> ' + res.error + '</div>');
                        return;
                    }

                    var html = '';

                    // Gambar jika ada
                    if (res.image) {
                        // Menggunakan fungsi php str_replace untuk mengubah msjticket menjadi msjasset dari asset('/storage')
                        // var msjassetUrl = '{{ str_replace("msjticket", "msjasset", asset("/storage")) }}';
                        // var imgUrl = res.image.startsWith('http') ? res.image : msjassetUrl + '/' + res.image;
                        var msjassetUrl = @json(rtrim(env('MSJASSET_URL'), '/') . '/storage');                
                        var  imgUrl = /^https?:\/\//i.test(res.image)
                                ? res.image
                                : msjassetUrl + '/' + res.image.replace(/^\/+/, '');
                     
                        console.log('url', imgUrl);
                        console.log('res.image', res.image);
                        html += '<div class="text-center mb-3">';
                        html += '<img src="' + imgUrl + '" class="img-fluid rounded border" style="max-height:250px;" alt="Gambar Asset">';
                        html += '</div>';
                    } else {
                        html += '<div class="text-center mb-3 text-muted" style="border: 1px dashed #ccc; padding: 20px; background: #f8f9fa;">';
                        html += '<i class="fas fa-image fa-2x mb-2 text-secondary"></i><br><em>Asset ini tidak memiliki gambar di database.</em>';
                        html += '</div>';
                    }

                    // Tabel detail
                    html += '<table class="table table-bordered table-sm mb-0">';
                    html += '<tbody>';

                    if (res.kode_asset) html += '<tr><th style="width:35%;background:#f8f9fa;">Kode Asset</th><td><code>' + res.kode_asset + '</code></td></tr>';
                    if (res.kode_sap && res.kode_sap !== '-') html += '<tr><th style="background:#f8f9fa;">Kode SAP</th><td>' + res.kode_sap + '</td></tr>';
                    if (res.kategori) html += '<tr><th style="background:#f8f9fa;">Kategori</th><td>' + res.kategori + '</td></tr>';
                    if (res.merk && res.merk !== '-') html += '<tr><th style="background:#f8f9fa;">Merk</th><td>' + res.merk + '</td></tr>';
                    if (res.type && res.type !== '-') html += '<tr><th style="background:#f8f9fa;">Tipe</th><td>' + res.type + '</td></tr>';
                    if (res.sn && res.sn !== '-') html += '<tr><th style="background:#f8f9fa;">Serial Number</th><td>' + res.sn + '</td></tr>';
                    if (res.size && res.size !== '-') html += '<tr><th style="background:#f8f9fa;">Ukuran</th><td>' + res.size + '</td></tr>';
                    if (res.departemen && res.departemen !== '-') html += '<tr><th style="background:#f8f9fa;">Departemen</th><td>' + res.departemen + '</td></tr>';
                    if (res.user && res.user !== '-') html += '<tr><th style="background:#f8f9fa;">User</th><td>' + res.user + '</td></tr>';
                    if (res.lokasi && res.lokasi !== '-') html += '<tr><th style="background:#f8f9fa;">Lokasi</th><td>' + res.lokasi + '</td></tr>';
                    if (res.compname && res.compname !== '-') html += '<tr><th style="background:#f8f9fa;">Computer Name</th><td>' + res.compname + '</td></tr>';
                    if (res.ip && res.ip !== '-') html += '<tr><th style="background:#f8f9fa;">IP Address</th><td>' + res.ip + '</td></tr>';
                    if (res.keterangan && res.keterangan !== '-') html += '<tr><th style="background:#f8f9fa;">Keterangan</th><td>' + res.keterangan + '</td></tr>';
                    if (res.status && res.status !== '-') html += '<tr><th style="background:#f8f9fa;">Status</th><td>' + res.status + '</td></tr>';

                    html += '</tbody></table>';

                    $content.html(html);
                },
                error: function(xhr) {
                    var msg = 'Gagal memuat data detail asset.';
                    try {
                        var errData = JSON.parse(xhr.responseText);
                        if (errData.error) msg = errData.error;
                    } catch(e) {}
                    $content.html('<div class="alert alert-danger"><i class="fas fa-exclamation-triangle me-1"></i> ' + msg + '</div>');
                }
            });
        });

    </script>
@endpush