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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</span></button>
                                    @endif
                                    @php
                                        $users_rules = $users_rules ?? [];
                                        $topIsSpvView = in_array('spv', $users_rules);
                                    @endphp
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            @php
                                $users_rules = $users_rules ?? [];
                                $isSpvView = in_array('spv', $users_rules);
                                $isPpicView = in_array('ppic', $users_rules) || in_array('admins', $users_rules);
                                $canHeaderApprove =
                                    in_array('head', $users_rules) ||
                                    in_array('ppic', $users_rules) ||
                                    in_array('admins', $users_rules);

                                $uniqueDepts = [];
                                if ($isPpicView) {
                                    $uniqueDepts = collect($headers)
                                        ->pluck('nama_departemen')
                                        ->filter(fn($val) => !empty($val) && $val !== '-')
                                        ->unique()
                                        ->values();

                                    $deptNotifCounts = collect($headers)
                                        ->groupBy(fn($header) => $header->nama_departemen ?: '-')
                                        ->map(fn($items) => $items->count());
                                }
                            @endphp

                            @if ($isPpicView && count($uniqueDepts) > 0)
                                <div class="col-12 mb-3">
                                    <ul class="nav nav-tabs" id="deptTabs" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active font-weight-bold" id="tab-all"
                                                data-bs-toggle="tab" data-bs-target="#pane-all" type="button"
                                                role="tab" onclick="filterTableByDept('')">Semua Departemen
                                                <span class="badge rounded-pill bg-info text-white ms-2">{{ count($headers) }}</span>
                                            </button>
                                        </li>
                                        @foreach ($uniqueDepts as $idx => $dept)
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link font-weight-bold" id="tab-{{ $idx }}"
                                                    data-bs-toggle="tab" data-bs-target="#pane-{{ $idx }}"
                                                    type="button" role="tab"
                                                    onclick="filterTableByDept('{{ addslashes($dept) }}')">{{ $dept }}
                                                    <span class="badge rounded-pill bg-danger text-white ms-2">{{ $deptNotifCounts[$dept] ?? 0 }}</span>
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="table-responsive">
                                <table class="table display nowrap" id="list_{{ $dmenu }}"
                                    style="width:100%;">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="font-weight-bolder">No</th>
                                            <th class="font-weight-bolder">No PRA PR</th>
                                            <th class="font-weight-bolder">Pemohon</th>
                                            <th class="font-weight-bolder">Departemen</th>
                                            <th class="font-weight-bolder">Tgl Pengajuan</th>
                                            @if ($isSpvView || in_array('admins', $users_rules))
                                                <th class="font-weight-bolder">Status</th>
                                            @endif
                                            <th class="font-weight-bolder">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $rowNum = 1; @endphp
                                        @foreach ($headers as $header)
                                            @php
                                                $detailCollection = collect($header->details ?? []);
                                                $statusColors = [
                                                    'entry' => '#6c757d',
                                                    'pending' => '#ffc107',
                                                    'finish' => '#28a745',
                                                    'parsial' => '#17a2b8',
                                                    'approve' => '#28a745',
                                                    'reject' => '#dc3545',
                                                    'cancel' => '#6c757d',
                                                    'draft' => '#6c757d',
                                                ];
                                                $draftCount = $detailCollection
                                                    ->filter(function ($d) {
                                                        return in_array($d->status ?? '', ['draft', 'entry', '-', '']);
                                                    })
                                                    ->count();
                                                $headRejectCount = $detailCollection
                                                    ->filter(function ($d) {
                                                        return ($d->status ?? '') === 'reject' &&
                                                            !empty($d->appr_head_by) &&
                                                            empty($d->appr_ppic_by);
                                                    })
                                                    ->count();
                                                $headerDisplayStatus = $header->status ?? 'entry';

                                                $statusColor = $statusColors[$headerDisplayStatus] ?? '#6c757d';

                                                $canEditSpv =
                                                    $isSpvView &&
                                                    $authorize->edit == '1' &&
                                                    ($draftCount > 0 || $headRejectCount > 0);

                                                $actionableDetails = collect();
                                                if ($canHeaderApprove && !$isSpvView) {
                                                    if (in_array('admins', $users_rules)) {
                                                        $actionableDetails = $detailCollection->reject(function ($d) {
                                                            $normalizedStatus = strtolower(
                                                                trim((string) ($d->status ?? '')),
                                                            );
                                                            return in_array(
                                                                $normalizedStatus,
                                                                ['approve', 'reject', 'cancel', 'draft', '-', ''],
                                                                true,
                                                            );
                                                        });
                                                    } elseif (in_array('ppic', $users_rules)) {
                                                        $actionableDetails = $detailCollection->filter(function ($d) {
                                                            $normalizedStatus = strtolower(
                                                                trim((string) ($d->status ?? '')),
                                                            );
                                                            return in_array(
                                                                $normalizedStatus,
                                                                ['pending ppic', 'parsial'],
                                                                true,
                                                            );
                                                        });
                                                    } elseif (in_array('head', $users_rules)) {
                                                        $actionableDetails = $detailCollection->filter(function ($d) {
                                                            $normalizedStatus = strtolower(
                                                                trim((string) ($d->status ?? '')),
                                                            );
                                                            return $normalizedStatus === 'pending head';
                                                        });
                                                    }
                                                }

                                                $actionablePayload = $actionableDetails
                                                    ->map(function ($d) {
                                                        return [
                                                            'id' => (int) $d->id,
                                                            'nama_barang' => $d->nama_barang,
                                                            'qty' => $d->qty,
                                                            'satuan' => $d->satuan_nama ?? ($d->satuan ?? ''),
                                                            'status' => $d->status ?? '',
                                                        ];
                                                    })
                                                    ->values();
                                                $canShowApprovalButtons = $actionablePayload->count() > 0;
                                            @endphp
                                            <tr>
                                                <td>
                                                    <span class="font-weight-bold">{{ $rowNum++ }}</span>
                                                </td>
                                                <td>
                                                    <span class="font-weight-bold">{{ $header->no_prapr }}</span>
                                                </td>
                                                <td>
                                                    <span>{{ $header->user?->full_name ?? '-' }}</span>
                                                </td>
                                                <td>
                                                    <span>{{ $header->nama_departemen ?? '-' }}</span>
                                                </td>
                                                <td>
                                                    <span>{{ date('d M y', strtotime($header->tanggal_pengajuan)) }}</span>
                                                </td>
                                                @if ($isSpvView || in_array('admins', $users_rules))
                                                    <td>
                                                        <span class="badge badge-sm"
                                                            style="background-color: {{ $statusColor }}; color: #ffffff;">{{ strtoupper($headerDisplayStatus) }}</span>
                                                    </td>
                                                @endif
                                                <td>
                                                    <div class="d-flex justify-content-start gap-2 flex-wrap">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . $header->id) }}'">
                                                            <i class="fas fa-eye me-1"></i>
                                                            <span class="font-weight-bold"> View</span>
                                                        </button>

                                                        @if ($canEditSpv)
                                                            <button type="button" class="btn btn-sm btn-warning mb-0 px-3"
                                                                title="Edit Data"
                                                                onclick="window.location='{{ url($url_menu . '/edit/' . $header->id) }}'">
                                                                <i class="fas fa-edit me-1"></i>
                                                                <span class="font-weight-bold"> Edit</span>
                                                            </button>
                                                        @endif

                                                        @php
                                                            $postingDetails = $detailCollection
                                                                ->filter(fn($d) => ($d->isactive ?? '1') === '1')
                                                                ->map(function ($d) {
                                                                    $status = (string) ($d->status ?? '');
                                                                    $normalizedStatus = strtolower(trim($status));
                                                                    $isDraftLike = in_array(
                                                                        $normalizedStatus,
                                                                        ['draft', 'entry', '-', ''],
                                                                        true,
                                                                    );
                                                                    $isHeadRejected =
                                                                        $status === 'reject' &&
                                                                        !empty($d->appr_head_by) &&
                                                                        empty($d->appr_ppic_by);

                                                                    return [
                                                                        'id' => (int) $d->id,
                                                                        'nama_barang' => $d->nama_barang,
                                                                        'qty' => $d->qty,
                                                                        'satuan' => $d->satuan_nama,
                                                                        'status' => $status,
                                                                        'revisable' => $isDraftLike || $isHeadRejected,
                                                                    ];
                                                                })
                                                                ->values();
                                                        @endphp

                                                        @php
                                                            $canShowPostingButton = $postingDetails->contains(
                                                                fn($d) => !empty($d['revisable']),
                                                            );
                                                        @endphp

                                                        @if ($isSpvView && $postingDetails->count() > 0 && $canShowPostingButton)
                                                            <button type="button"
                                                                class="btn btn-sm btn-success mb-0 px-3 open-posting-modal"
                                                                title="Posting Item" data-header-id="{{ $header->id }}"
                                                                data-no-order="{{ $header->no_prapr }}"
                                                                data-details='@json($postingDetails)'>
                                                                <i class="fas fa-paper-plane me-1"></i>
                                                                <span class="font-weight-bold"> Posting</span>
                                                            </button>
                                                        @endif

                                                        @if (!$isSpvView && $canHeaderApprove && $canShowApprovalButtons)
                                                            @if (($header->pending_count ?? 0) > 0)
                                                            <button type="button"
                                                                    class="btn btn-sm btn-warning mb-0 px-3 open-approval-modal"
                                                                    title="Review Items"
                                                                    data-header-id="{{ $header->id }}"
                                                                    data-no-prapr="{{ $header->no_prapr }}"
                                                                    data-details='@json($actionablePayload)'>
                                                                    <i class="fas fa-clipboard-check me-1"></i>
                                                                    <span class="font-weight-bold"> Approval
                                                                        ({{ $header->pending_count }})</span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @php $isSpvView = in_array('spv', $users_rules ?? []); @endphp
    @if ($isSpvView)
        <div class="modal fade" id="spvPostingModal" tabindex="-1" aria-labelledby="spvPostingModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <form id="spvPostingForm" method="POST" action="#">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="spvPostingModalLabel">Posting Item PR</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2 text-sm">No PRA PR: <strong id="spvPostingNoOrder">-</strong></p>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="spvSelectAllPosting">
                                <label class="form-check-label" for="spvSelectAllPosting">Pilih semua item</label>
                            </div>
                            <div id="spvPostingItems" class="vstack gap-2"></div>
                            <small class="text-muted d-block mt-2">Item dicentang akan diposting ke Head. Item tidak
                                dicentang akan tetap draft.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-paper-plane me-1"></i> Simpan Posting
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @else
        <div class="modal fade" id="headerApprovalModal" tabindex="-1" aria-labelledby="headerApprovalModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <form id="headerApprovalForm" method="POST" action="#">
                        @csrf
                        <input type="hidden" id="headerApprovalAction" value="approve">
                        <div class="modal-header">
                            <h5 class="modal-title" id="headerApprovalModalLabel">Review Item PR</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2 text-sm">No PRA PR: <strong id="headerApprovalNoPrapr">-</strong></p>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="headerApprovalSelectAll">
                                <label class="form-check-label" for="headerApprovalSelectAll">Pilih semua item</label>
                            </div>
                            <div id="headerApprovalItems" class="vstack gap-2"></div>
                            <small class="text-muted d-block mt-2">Item dicentang akan diproses sesuai aksi.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            @if (in_array('head', $users_rules ?? []))
                                <button type="submit" class="btn btn-warning" id="headerApprovalCancel"
                                    onclick="document.getElementById('headerApprovalAction').value='cancel'">
                                    <i class="fas fa-ban me-1"></i> Cancel
                                </button>
                            @endif
                            <button type="submit" class="btn btn-danger" id="headerApprovalReject"
                                onclick="document.getElementById('headerApprovalAction').value='reject'">
                                <i class="fas fa-times me-1"></i> Reject
                            </button>
                            <button type="submit" class="btn btn-success" id="headerApprovalApprove"
                                onclick="document.getElementById('headerApprovalAction').value='approve'">
                                <i class="fas fa-check me-1"></i> Approve
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('js')
    <script>
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: "{{ session('error') }}",
                confirmButtonColor: '#dc3545'
            });
        @endif

        @php
            $users_rules = $users_rules ?? [];
            $isSpvView = in_array('spv', $users_rules);
            $canExportExcel = ($authorize->excel ?? '0') == '1' || in_array('head', $users_rules);
            $canExportPdf = ($authorize->pdf ?? '0') == '1' || in_array('head', $users_rules);
            $canExportPrint = ($authorize->print ?? '0') == '1' || in_array('head', $users_rules);
        @endphp

        @if (!$isSpvView)
            async function handleBulkApproveReject(action, detailIds) {
                if (!detailIds.length) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum ada item',
                        text: 'Pilih minimal 1 item untuk diproses.'
                    });
                    return;
                }

                const configMap = {
                    approve: {
                        title: `Approve ${detailIds.length} item?`,
                        text: 'Semua item terpilih akan disetujui.',
                        icon: 'question',
                        confirmButtonText: 'Ya, Approve All',
                        confirmButtonColor: '#198754',
                        requireNote: false,
                        noteLabel: '',
                        notePlaceholder: '',
                        successText: 'Semua item terpilih berhasil diapprove.',
                        failedText: 'Terjadi kesalahan saat memproses approve all.'
                    },
                    reject: {
                        title: `Tolak ${detailIds.length} item?`,
                        text: 'Semua item terpilih akan ditolak.',
                        icon: 'warning',
                        confirmButtonText: 'Ya, Reject All',
                        confirmButtonColor: '#dc3545',
                        requireNote: true,
                        noteLabel: 'penolakan',
                        notePlaceholder: 'Tuliskan alasan penolakan untuk semua item terpilih...',
                        successText: 'Semua item terpilih berhasil ditolak.',
                        failedText: 'Terjadi kesalahan saat memproses reject all.'
                    },
                    cancel: {
                        title: `Cancel ${detailIds.length} item?`,
                        text: 'Semua item terpilih akan dibatalkan dan tidak dilanjutkan ke PPIC.',
                        icon: 'warning',
                        confirmButtonText: 'Ya, Cancel All',
                        confirmButtonColor: '#6c757d',
                        requireNote: true,
                        noteLabel: 'cancel',
                        notePlaceholder: 'Tuliskan alasan cancel untuk semua item terpilih...',
                        successText: 'Semua item terpilih berhasil dicancel.',
                        failedText: 'Terjadi kesalahan saat memproses cancel all.'
                    }
                };

                const current = configMap[action] || configMap.approve;
                const swalConfig = {
                    title: current.title,
                    text: current.text,
                    icon: current.icon,
                    showCancelButton: true,
                    confirmButtonText: current.confirmButtonText,
                    cancelButtonText: 'Batal',
                    confirmButtonColor: current.confirmButtonColor,
                    cancelButtonColor: '#6c757d'
                };

                if (current.requireNote) {
                    swalConfig.input = 'textarea';
                    swalConfig.inputLabel = 'Alasan ' + current.noteLabel;
                    swalConfig.inputPlaceholder = current.notePlaceholder;
                    swalConfig.inputValidator = (value) => {
                        if (!value || !value.trim()) {
                            return 'Alasan ' + current.noteLabel + ' wajib diisi';
                        }
                    };
                }

                const result = await Swal.fire(swalConfig);
                if (!result.isConfirmed) {
                    return;
                }

                Swal.fire({
                    title: 'Memproses...',
                    text: 'Sedang memproses semua item terpilih.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

                const resetBulkCheckboxes = () => {
                    const allCheckboxes = Array.from(document.querySelectorAll(
                        '#list_{{ $dmenu }} tbody .bulk-checkbox'));

                    allCheckboxes.forEach((checkbox) => {
                        if (checkbox.checked) {
                            checkbox.checked = false;
                        }
                        if (checkbox.disabled) {
                            checkbox.checked = false;
                        }
                    });

                    const selectAll = document.getElementById('bulk-select-all');
                    if (selectAll) {
                        selectAll.checked = false;
                        selectAll.indeterminate = false;
                    }
                };

                try {
                    for (const detailId of detailIds) {
                        const formData = new FormData();
                        formData.append('action', action);
                        formData.append('_method', 'PUT');
                        if (current.requireNote) {
                            formData.append('catatan', result.value ? result.value.trim() : '');
                        }

                        const response = await fetch(`{{ url($url_menu) }}/${detailId}`, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            }
                        });

                        const data = await response.json();
                        if (!response.ok || !data.success) {
                            throw new Error(data.message || `Gagal memproses item ID ${detailId}`);
                        }
                    }

                    resetBulkCheckboxes();

                    await Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: current.successText,
                        confirmButtonColor: '#198754'
                    });
                    window.location.reload();
                } catch (error) {
                    resetBulkCheckboxes();

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: error.message || current.failedText
                    });
                }
            }
        @endif

        $(document).ready(function() {
            // Check if DataTable is already initialized and destroy it
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            // Konfigurasi urutan awal
            const initialOrder = [
                [0, 'asc']
            ];

            // Kolom non-orderable: ACTION (paling kanan)
            const columnDefs = [{
                targets: -1,
                orderable: false
            }];

            const dt = $('#list_{{ $dmenu }}').DataTable({
                order: initialOrder,
                pageLength: 25,
                responsive: false,
                scrollX: true,
                autoWidth: false,
                columnDefs: columnDefs,
                dom: '<"row d-flex justify-content-between align-items-center mb-3"<"col-lg-12 d-flex justify-content-between align-items-center"<"d-flex align-items-center gap-3"Bl>f>>rtip',
                buttons: [
                    @if ($canExportExcel)
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            titleAttr: 'Export to Excel',
                            className: 'btn btn-secondary mb-0',
                            exportOptions: {
                                columns: ':visible:not(:last-child)'
                            }
                        },
                    @endif
                    @if ($canExportPdf)
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            titleAttr: 'Export to PDF',
                            className: 'btn btn-secondary mb-0',
                            orientation: 'landscape',
                            pageSize: 'LEGAL',
                            exportOptions: {
                                columns: ':visible:not(:last-child)'
                            }
                        },
                    @endif
                    @if ($canExportPrint)
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-primary"></i><span class="font-weight-bold"> Print</span>',
                            titleAttr: 'Print',
                            className: 'btn btn-secondary mb-0',
                            exportOptions: {
                                columns: ':visible:not(:last-child)'
                            }
                        }
                    @endif
                ],
                language: {
                    search: 'Cari :',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)',
                    paginate: {
                        first: 'Awal',
                        last: 'Akhir',
                        next: 'Selanjutnya',
                        previous: 'Sebelumnya'
                    }
                }
            });

            // Set color button datatables like in master
            $('.dt-button').removeClass('dt-button');

            // Paksa DataTables menghitung ulang lebar kolom di awal
            dt.columns.adjust().draw(false);

            window.filterTableByDept = function(dept) {
                if (dept === '') {
                    dt.column(3).search('').draw();
                } else {
                    var escaped = $.fn.dataTable.util.escapeRegex(dept);
                    dt.column(3).search('^' + escaped + '$', true, false).draw();
                }
            };

            @php
                $canBulkApproveJS = in_array('head', $users_rules ?? []) || in_array('ppic', $users_rules ?? []) || in_array('admins', $users_rules ?? []);
            @endphp
            @if ($canBulkApproveJS && !$isSpvView)
                const approvalModalEl = document.getElementById('headerApprovalModal');
                const approvalForm = document.getElementById('headerApprovalForm');
                const approvalItemsContainer = document.getElementById('headerApprovalItems');
                const approvalNoPrapr = document.getElementById('headerApprovalNoPrapr');
                const approvalSelectAll = document.getElementById('headerApprovalSelectAll');
                const approvalActionInput = document.getElementById('headerApprovalAction');
                const approvalSubmit = document.getElementById('headerApprovalSubmit');
                const approvalModal = approvalModalEl ? new bootstrap.Modal(approvalModalEl) : null;

                function renderApprovalItems(details) {
                    if (!approvalItemsContainer) return;
                    approvalItemsContainer.innerHTML = '';

                    if (!details.length) {
                        approvalItemsContainer.innerHTML =
                            '<div class="text-muted text-sm">Tidak ada item untuk diproses.</div>';
                        return;
                    }

                    details.forEach((detail, idx) => {
                        const itemId = Number(detail.id || 0);
                        if (!itemId) return;

                        const qty = detail.qty ?? '-';
                        const satuan = (detail.satuan || '').toString().toUpperCase();
                        const namaBarang = (detail.nama_barang || '-').toString().toUpperCase();
                        const status = (detail.status || '').toString();

                        const row = document.createElement('div');
                        row.className = 'border rounded px-3 py-2';
                        row.innerHTML = `
                            <div class="form-check d-flex align-items-start gap-2">
                                <input class="form-check-input mt-1 header-approval-item" type="checkbox" name="detail_ids[]" value="${itemId}" id="header-approval-item-${itemId}">
                                <label class="form-check-label w-100" for="header-approval-item-${itemId}">
                                    <span class="text-sm fw-bold">${idx + 1}. ${namaBarang}</span>
                                    <div class="text-xs text-muted">QTY: ${qty} ${satuan} | STATUS: ${status}</div>
                                </label>
                            </div>`;
                        approvalItemsContainer.appendChild(row);
                    });
                }

                document.querySelectorAll('.open-approval-modal').forEach((btn) => {
                    btn.addEventListener('click', function() {
                        const noPrapr = this.getAttribute('data-no-prapr') || '-';
                        const rawDetails = this.getAttribute('data-details') || '[]';
                        let details = [];
                        try {
                            details = JSON.parse(rawDetails);
                        } catch (e) {
                            details = [];
                        }

                        if (approvalNoPrapr) approvalNoPrapr.textContent = noPrapr;
                        if (approvalSelectAll) approvalSelectAll.checked = false;

                        renderApprovalItems(details);
                        approvalModal?.show();
                    });
                });

                approvalSelectAll?.addEventListener('change', function() {
                    document.querySelectorAll('.header-approval-item').forEach((checkbox) => {
                        checkbox.checked = this.checked;
                    });
                });

                approvalForm?.addEventListener('submit', function(event) {
                    event.preventDefault();
                    const action = approvalActionInput?.value || 'approve';
                    const selectedIds = Array.from(document.querySelectorAll('.header-approval-item'))
                        .filter((checkbox) => checkbox.checked)
                        .map((checkbox) => Number(checkbox.value))
                        .filter((id) => Number.isInteger(id) && id > 0);

                    approvalModal?.hide();
                    handleBulkApproveReject(action, selectedIds);
                });
            @endif

            @if ($isSpvView)
                const postingModalEl = document.getElementById('spvPostingModal');
                const postingForm = document.getElementById('spvPostingForm');
                const postingItemsContainer = document.getElementById('spvPostingItems');
                const postingNoOrder = document.getElementById('spvPostingNoOrder');
                const postingSelectAll = document.getElementById('spvSelectAllPosting');
                const postingModal = postingModalEl ? new bootstrap.Modal(postingModalEl) : null;

                function renderPostingItems(details) {
                    if (!postingItemsContainer) return;
                    postingItemsContainer.innerHTML = '';

                    details.forEach((detail, idx) => {
                        const itemId = Number(detail.id || 0);
                        if (!itemId) return;

                        const status = (detail.status || 'draft').toString();
                        const statusLower = status.toLowerCase();
                        const isDraftLike = ['draft', 'entry', '-', ''].includes(statusLower);
                        const isRevisable = Boolean(detail.revisable);
                        const disabledAttr = isRevisable ? '' : 'disabled';
                        const checkedAttr = ''; // Default tidak ada yang tercentang otomatis
                        const qty = detail.qty ?? '-';
                        const satuan = (detail.satuan || '').toString().toUpperCase();
                        const namaBarang = (detail.nama_barang || '-').toString().toUpperCase();

                        const row = document.createElement('div');
                        row.className = 'border rounded px-3 py-2';
                        row.innerHTML = `
                            <div class="form-check d-flex align-items-start gap-2">
                                <input class="form-check-input mt-1 spv-posting-item" type="checkbox" name="detail_ids[]" value="${itemId}" id="spv-posting-item-${itemId}" ${checkedAttr} ${disabledAttr}>
                                <label class="form-check-label w-100" for="spv-posting-item-${itemId}">
                                    <span class="text-sm fw-bold">${idx + 1}. ${namaBarang}</span>
                                    <div class="text-xs text-muted">QTY: ${qty} ${satuan} | STATUS: ${status}</div>
                                </label>
                            </div>`;
                        postingItemsContainer.appendChild(row);
                    });
                }

                document.querySelectorAll('.open-posting-modal').forEach((btn) => {
                    btn.addEventListener('click', function() {
                        const headerId = this.getAttribute('data-header-id');
                        const noOrder = this.getAttribute('data-no-order') || '-';
                        const rawDetails = this.getAttribute('data-details') || '[]';
                        let details = [];
                        try {
                            details = JSON.parse(rawDetails);
                        } catch (e) {
                            details = [];
                        }

                        if (postingNoOrder) postingNoOrder.textContent = noOrder;
                        if (postingForm) postingForm.action =
                            `{{ url($url_menu) }}/posting/${headerId}`;
                        if (postingSelectAll) postingSelectAll.checked = false;
                        renderPostingItems(details);
                        postingModal?.show();
                    });
                });

                postingSelectAll?.addEventListener('change', function() {
                    document.querySelectorAll('.spv-posting-item').forEach((checkbox) => {
                        if (!checkbox.disabled) {
                            checkbox.checked = this.checked;
                        }
                    });
                });
            @endif
        });
    </script>
@endpush