@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    /* ── Modal centering fix ── */
    .modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
    }

    @media (min-width: 576px) {
        .modal-dialog-centered {
            min-height: calc(100% - 3.5rem);
        }
    }

    /* ── Row status ── */
    tr.row-inactive,
    tr.row-inactive:hover {
        background-color: #ffe9ed !important;
    }

    tr.row-generated-ready,
    tr.row-generated-ready:hover {
        background-color: #e3f2fd !important;
    }

    /* ── Toolbar buttons ── */
    .btn-generate-outstanding-pr {
        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
        color: white !important;
        border: none !important;
        transition: all .3s ease;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3) !important;
    }

    .btn-generate-outstanding-pr:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(74, 144, 226, .5) !important;
        color: white !important;
    }

    .btn-generate-ready-po {
        background: linear-gradient(135deg, #46c4b3 0%, #0d9488 100%) !important;
        color: white !important;
        border: none !important;
        transition: all .3s ease;
        box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3) !important;
    }

    .btn-generate-ready-po:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(45, 212, 191, .5) !important;
        color: white !important;
    }

    /* ── Shared modal styles ── */
    .gen-modal .modal-dialog {
        max-width: 96vw !important;
        width: 96vw !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        padding: 20px !important;
    }

    .gen-modal .modal-content {
        border: none;
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: auto;
        transition: max-height 0.3s ease;
    }

    .gen-modal .modal-content.is-loading {
        max-height: 260px !important;
    }

    .gen-modal .modal-content.is-loaded {
        max-height: 95vh !important;
    }

    .gen-modal .modal-header {
        position: relative;
        z-index: 1071;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 14px 14px 0 0;
        flex-shrink: 0;
    }

    .gen-modal .modal-header .modal-title {
        font-weight: 700;
        font-size: .97rem;
        color: white;
    }

    .gen-modal .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: .85;
    }

    .gen-modal .modal-body {
        padding: 0;
        flex: 1;
        overflow-y: auto;
        position: relative;
        min-height: 200px;
    }

    .gen-modal .modal-footer {
        border-top: 1px solid #e9ecef;
        background: #f8f9fa;
        padding: 1rem 1.2rem;
        gap: .5rem;
        flex-wrap: wrap;
        border-radius: 0 0 14px 14px;
        flex-shrink: 0;
    }

    /* header gradient per modal */
    #modalOutstandingPR .modal-header {
        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    }

    #modalReadyPO .modal-header {
        background: linear-gradient(135deg, #46c4b3 0%, #0d9488 100%);
    }

    /* -- Loading Overlay -- */
    .gen-loading {
        position: absolute;
        top: calc(60px + 1rem);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1070;
        backdrop-filter: blur(0.5px);
    }

    .gen-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #4a90e2;
        border-radius: 50%;
        animation: genSpin 0.8s linear infinite;
        margin-bottom: 18px;
    }

    #modalOutstandingPR .gen-spinner {
        border-top-color: #4a90e2;
    }

    #modalReadyPO .gen-spinner {
        border-top-color: #46c4b3;
    }

    @keyframes genSpin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ── Summary chips ── */
    .gen-summary-bar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .gen-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: .79rem;
        font-weight: 600;
        border: 1.5px solid;
        white-space: nowrap;
    }

    .gen-chip.total {
        border-color: #ced4da;
        background: #f8f9fa;
        color: #495057;
    }

    .gen-chip.new-data {
        border-color: #b7dfb8;
        background: #eafbea;
        color: #1e7e34;
    }

    .gen-chip.exists {
        border-color: #ffd97d;
        background: #fffbf0;
        color: #856404;
    }

    .gen-chip .cnum {
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1;
    }

    /* ── Filter row ── */
    .gen-filter-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 16px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    .gen-filter-btn,
    .gen-filter-row .btn {
        border-radius: 50px !important;
        padding: 0 12px !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border-width: 2px !important;
        transition: all 0.2s;
    }

    .gen-filter-btn.active {
        background-color: #4a90e2 !important;
        color: white !important;
        border-color: #4a90e2 !important;
    }

    .gen-search {
        margin-left: auto;
        border-radius: 20px;
        border: 1.5px solid #dee2e6;
        padding: 4px 14px;
        font-size: .79rem;
        min-width: 230px;
        transition: all .15s;
    }

    .gen-search:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 .15rem rgba(74, 144, 226, .2);
        outline: none;
    }

    /* ── Table scroll ── */
    .gen-table-scroll {
        max-height: 60vh;
        overflow: auto;
        flex: 1;
    }

    .gen-table {
        font-size: .73rem;
        margin-bottom: 0;
        min-width: 2200px;
        table-layout: auto;
    }

    .gen-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #34495e;
        color: white;
        font-weight: 600;
        white-space: nowrap;
        padding: 8px 9px;
        border: none;
    }

    .gen-table thead th small {
        display: block;
        opacity: .7;
        font-weight: 400;
        font-size: .64rem;
        margin-top: 1px;
    }

    .gen-table tbody tr:hover {
        background: #f5f3ff !important;
    }

    .gen-table td {
        padding: 5px 8px;
        vertical-align: middle;
        white-space: nowrap;
        border-color: #eee;
    }

    .gen-table td.td-trunc {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gen-table tr.row-new>td:first-child {
        border-left: 3px solid #28a745;
    }

    .gen-table tr.row-exists>td:first-child {
        border-left: 3px solid #e6a817;
    }

    /* input dalam tabel modal */
    .gen-table .inp-row {
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 3px 7px;
        font-size: .72rem;
        width: 100%;
        min-width: 100px;
    }

    .gen-table .inp-row:focus {
        outline: none;
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, .15);
    }

    .gen-table .inp-row.is-invalid {
        border-color: #dc3545;
        background: #fff5f5;
    }

    .gen-table .inp-col-user {
        background: #f0fff0 !important;
    }

    .gen-table .inp-col-req {
        background: #9ED3DC !important;
    }

    /* ── Badges ── */
    .b-new {
        background: #d4edda;
        color: #155724;
        border-radius: 5px;
        padding: 2px 7px;
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .b-exists {
        background: #fff3cd;
        color: #856404;
        border-radius: 5px;
        padding: 2px 7px;
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .b-pend {
        background: #cfe2ff;
        color: #084298;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: .67rem;
        font-weight: 700;
    }

    .b-proc {
        background: #cff4fc;
        color: #055160;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: .67rem;
        font-weight: 700;
    }

    .b-ok {
        background: #d1e7dd;
        color: #0f5132;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: .67rem;
        font-weight: 700;
    }

    .b-fail {
        background: #f8d7da;
        color: #842029;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: .67rem;
        font-weight: 700;
    }

    /* ── Checkbox ── */
    .gen-chk,
    #opr-selectAll,
    #rpo-selectAll {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #4a90e2;
    }

    /* ── Pagination row ── */
    .gen-pag-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border-top: 1px solid #eee;
        background: #fafafa;
        font-size: .77rem;
        color: #6c757d;
    }

    .rpg-btn {
        border: 1.5px solid #dee2e6;
        background: white;
        border-radius: 6px;
        padding: 2px 11px;
        font-size: .77rem;
        cursor: pointer;
        transition: all .13s;
    }

    .rpg-btn:hover:not(:disabled) {
        border-color: #4a90e2;
        color: #4a90e2;
    }

    .rpg-btn:disabled {
        opacity: .35;
        cursor: default;
    }

    /* ── Insert/save button ── */
    .btn-do-insert {
        background-color: #2F6B3F !important;
        color: white !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        padding: 0 15px !important;
        line-height: 1 !important;
        gap: 10px !important;
        vertical-align: middle !important;
    }

    .btn-do-insert i {
        font-size: 0.9rem !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
    }

    .sel-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        color: #28a745 !important;
        font-weight: 800 !important;
        font-size: 0.75rem !important;
        min-width: 22px !important;
        height: 22px !important;
        border-radius: 6px !important;
        padding: 0 5px !important;
        line-height: 1 !important;
    }

    .btn-do-insert:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(40, 167, 69, .4);
        color: white !important;
    }

    .btn-do-insert:disabled {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
    }

    .sel-count {
        display: none;
        background: white;
        color: #28a745;
        border-radius: 6px;
        padding: 0 6px;
        font-weight: 800;
        font-size: .72rem;
        margin-left: 8px;
        line-height: 1.5;
    }

    .sel-info.has-sel {
        color: #1e7e34;
        font-weight: 600;
    }

    /* ── Input step-2 modal ── */
    #modalInputOPR .modal-header {
        background: linear-gradient(135deg, #4a90e2, #357abd);
        border-radius: 14px 14px 0 0;
        border: none;
        padding: 1rem 1.5rem;
    }

    #modalInputOPR .modal-content,
    #modalInputRPO .modal-content {
        border-radius: 14px;
        border: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
        position: relative;
        overflow: hidden;
        min-height: 40vh !important;
        max-height: 95vh;
        display: flex;
        flex-direction: column;
    }

    #modalInputOPR .modal-body,
    #modalInputRPO .modal-body {
        flex: 1;
        max-height: 75vh !important;
        overflow-y: auto;
        padding: 20px !important;
    }

    #modalInputOPR .modal-footer {
        border-radius: 0 0 14px 14px;
        background: #f8f9fa;
        flex-shrink: 0;
        padding: 1rem 1.2rem;
    }

    #modalInputRPO .modal-header {
        background: linear-gradient(135deg, #46c4b3, #0d9488);
        border-radius: 14px 14px 0 0;
        border: none;
        padding: 1rem 1.5rem;
    }

    #modalInputRPO .modal-footer {
        border-radius: 0 0 14px 14px;
        background: #f8f9fa;
        flex-shrink: 0;
        padding: 1rem 1.2rem;
    }

    /* tabel input step-2 OPR */
    #tblInputOPR {
        font-size: .72rem;
        min-width: 1600px;
    }

    #tblInputOPR thead th {
        background: #34495e;
        color: white;
        padding: 7px 8px;
        white-space: nowrap;
        font-size: .7rem;
    }

    #tblInputOPR td,
    #tblInputRPO td {
        padding: 4px 7px;
        vertical-align: middle;
        border-color: #eee;
        overflow: visible !important;
        position: relative;
    }

    .opr-inp {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 3px 7px;
        font-size: .71rem;
        width: 100%;
    }

    .opr-inp:focus {
        outline: none;
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, .15);
    }

    .opr-inp.is-invalid {
        border-color: #dc3545;
        background: #fff5f5;
    }

    /* tabel review step-2 RPO */
    #tblInputRPO {
        font-size: .72rem;
        min-width: 1400px;
    }

    #tblInputRPO thead th {
        background: #34495e;
        color: white;
        padding: 7px 8px;
        white-space: nowrap;
        font-size: .7rem;
    }

    .rpo-inp {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 3px 7px;
        font-size: .71rem;
        width: 100%;
    }

    .rpo-inp:focus {
        outline: none;
        border-color: #46c4b3;
        box-shadow: 0 0 0 2px rgba(192, 132, 252, .15);
    }

    .rpo-inp.is-invalid {
        border-color: #dc3545;
        background: #fff5f5;
    }

    .table-responsive-modal {
        max-height: 450px;
        overflow: visible !important;
        border: 1px solid #e9ecef;
        border-radius: 8px;
    }

    /* Style untuk dropdown autocomplete vendor */
    .autocomplete-results {
        position: absolute;
        z-index: 9999 !important;
        background: white;
        border: 1px solid #d1d5db;
        width: 100%;
        min-width: 250px;
        max-height: 106px;
        overflow-y: auto;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    .autocomplete-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 0.75rem;
    }

    .autocomplete-item:hover {
        background-color: #f1f1f1;
    }

    .autocomplete-item.active {
        background-color: #e9ecef !important;
        color: #0d6efd !important;
        font-weight: bold;
    }

    .autocomplete-results::-webkit-scrollbar {
        width: 6px;
    }

    .autocomplete-results::-webkit-scrollbar-thumb {
        background-color: #cbd5e0;
        border-radius: 10px;
    }

    /* ── Header textarea per vendor ── */
    .rpo-header-ta {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 5px 8px;
        font-size: .71rem;
        width: 100%;
        min-width: 180px;
        resize: vertical;
        min-height: 60px;
        background: #fffde7;
        transition: border-color .15s, box-shadow .15s;
    }

    .rpo-header-ta:focus {
        outline: none;
        border-color: #46c4b3;
        box-shadow: 0 0 0 2px rgba(70, 196, 179, .18);
        background: #f0fdf4;
    }

    .rpo-header-ta.is-synced {
        background: #d4edda;
        transition: background .4s;
    }

    td.td-header-merge {
        vertical-align: top !important;
        background: #fffef0 !important;
        border-left: 3px solid #ffd97d !important;
    }

    /* ── Quick Action Buttons ── */
    .btn-quick-pull {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(249, 115, 22, .35) !important;
        transition: all .3s ease;
    }

    .btn-quick-pull:hover {
        transform: translateY(-2px);
        color: white !important;
        box-shadow: 0 5px 15px rgba(249, 115, 22, .55) !important;
    }

    .btn-quick-generate {
        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, .35) !important;
        transition: all .3s ease;
    }

    .btn-quick-generate:hover {
        transform: translateY(-2px);
        color: white !important;
        box-shadow: 0 5px 15px rgba(139, 92, 246, .55) !important;
    }

    .btn-quick-generate:disabled {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none !important;
    }

    /* ── Inline editable ── */
    .inline-inp {
        border: 1px solid transparent;
        border-radius: 5px;
        padding: 2px 6px;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        color: inherit;
        line-height: inherit;
        width: 100%;
        background: transparent;
        transition: border-color .15s, background .15s;
    }

    .inline-inp:hover {
        border-color: #ced4da;
        background: #fff;
    }

    .inline-inp:focus {
        border-color: #4a90e2;
        background: #fff;
        outline: none;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, .15);
    }

    .inline-inp[readonly] {
        background: transparent !important;
        color: inherit !important;
        cursor: default !important;
        border-color: transparent !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    .inline-inp.text-end {
        text-align: right;
    }

    /* ── Row checkbox ── */
    .row-check,
    #tbl-selectAll {
        cursor: pointer;
        width: 15px;
        height: 15px;
        accent-color: #0d9488;
    }

    /* ── Sticky selection bar ── */
    #quick-sel-bar {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: #e8faf8;
        border-top: 2px solid #0d9488;
        border-radius: 0 0 8px 8px;
        padding: 8px 16px;
        display: none;
        align-items: center;
        gap: 10px;
        font-size: .82rem;
    }

    #quick-sel-bar.visible {
        display: flex;
    }

    /* ── Inline vendor autocomplete ── */
    #list_ {
            {
            $dmenu
        }
    }

    td {
        vertical-align: middle !important;
    }

    /* Wrap vendor agar flex dan center */
    .inline-vendor-wrap {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Tombol search & save ukurannya konsisten */
    .inline-vendor-wrap .btn,
    .btn-save-row {
        flex-shrink: 0;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .72rem !important;
        border-radius: 6px !important;
        line-height: 1 !important;
    }

    .inline-autocomplete {
        position: absolute;
        z-index: 9999;
        background: white;
        border: 1px solid #d1d5db;
        width: 280px;
        max-height: 140px;
        overflow-y: auto;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
        border-radius: 6px;
        top: 100%;
        left: 0;
        display: none;
    }

    .inline-autocomplete-item {
        padding: 6px 10px;
        cursor: pointer;
        font-size: .73rem;
    }

    .inline-autocomplete-item:hover,
    .inline-autocomplete-item.active {
        background: #eff6ff;
        color: #1d4ed8;
    }

    /* ── Save flash animation ── */
    @keyframes inlineSaved {
        0% {
            background-color: #d4edda !important;
        }

        100% {
            background-color: inherit;
        }
    }

    .inline-saved-flash {
        animation: inlineSaved .7s ease;
    }

    tr.row-overdue,
    tr.row-overdue:hover {
        background-color: #ffe0e0 !important;
    }

    tr.row-incomplete td.cell-incomplete,
    tr.row-overdue td.cell-incomplete {
        background-color: #fff9c4 !important;
    }
</style>

@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">

                    {{-- Card Header --}}
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">{{ $title_menu }}</h5>
                        </div>
                        <div class="col">@include('components.alert')</div>
                    </div>
                    <hr class="horizontal dark mt-0">

                    {{-- Table --}}
                    <div class="row px-4 py-2">
                        <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color:#00b7bd4f;">
                                    <tr>
                                        <th width="42" style="text-align:center;">
                                            <input type="checkbox" id="tbl-selectAll" title="Pilih semua" onchange="tblSelectAll(this)">
                                        </th>
                                        <th>No</th>
                                        <th>Date PR</th>
                                        <th>No PR</th>
                                        <th style="white-space:normal; min-width:40px; max-width:55px;">No<br>Item</th>
                                        <th>Material Code</th>
                                        <th>Item Name</th>
                                        <th>Quantity</th>
                                        <th>UOM</th>
                                        <th>Price</th>
                                        <th>Delivery Date</th>
                                        <th style="min-width:220px;">Vendor Name</th>
                                        <th>SAP Code Vendor</th>
                                        <th width="60" style="text-align:center;">Save</th>
                                        <th style="white-space:normal; min-width:55px; max-width:70px;">Request<br>By</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($table_detail as $detail)
                                    @php
                                    $primary = $detail->id;
                                    $isIncomplete = empty($detail->sap_code_vendor)
                                    || empty($detail->vendor_name)
                                    || empty($detail->quantity)
                                    || empty($detail->price)
                                    || empty($detail->delivery_date);

                                    $rowClass = '';
                                    if ($detail->status == 'Closed' || $detail->isactive == '0') {
                                    $rowClass = 'row-inactive';
                                    } elseif ($detail->isreadypo == '1') {
                                    $rowClass = 'row-generated-ready';
                                    } elseif (!empty($detail->date_pr) && \Carbon\Carbon::parse($detail->date_pr)->diffInDays(now(), false) > 3) {
                                    $rowClass = 'row-overdue';
                                    } elseif ($isIncomplete && $detail->isreadypo == '0' && $detail->isactive == '1' && $detail->status == 'Open') {
                                    $rowClass = 'row-incomplete';
                                    }
                                    @endphp
                                    <tr class="{{ $rowClass }}"
                                        data-id="{{ $primary }}"
                                        data-no-pr="{{ $detail->no_pr }}"
                                        data-no-item="{{ $detail->no_item }}">

                                        {{-- Checkbox (ganti Action) --}}
                                        <td style="text-align:center; vertical-align:middle;">
                                            @php
                                            $isIncomplete = empty($detail->sap_code_vendor)
                                            || empty($detail->vendor_name)
                                            || empty($detail->quantity)
                                            || empty($detail->price)
                                            || empty($detail->delivery_date);
                                            @endphp

                                            @if($detail->isreadypo == '0' && $detail->isactive == '1' && $detail->status == 'Open')
                                            <input type="checkbox" class="row-check"
                                                data-id="{{ $primary }}"
                                                data-no-pr="{{ $detail->no_pr }}"
                                                data-no-item="{{ $detail->no_item }}"
                                                onchange="tblRowCheck(this)"
                                                @if($isIncomplete) disabled title="Lengkapi SAP Code Vendor, Vendor Name, Quantity, Price, dan Delivery Date terlebih dahulu" @endif>
                                            @else
                                            <input type="checkbox" class="row-check" disabled
                                                title="{{ $detail->isreadypo == '1' ? 'Sudah Ready PO' : 'Tidak aktif/Closed' }}">
                                            @endif
                                        </td>

                                        <td>{{ $loop->iteration }}</td>
                                        <td class="text-sm">{{ $detail->date_pr }}</td>
                                        <td class="text-sm font-weight-bold text-dark {{ ($isIncomplete && $detail->isreadypo == '0' && $detail->isactive == '1' && $detail->status == 'Open') ? 'cell-incomplete' : '' }}">{{ $detail->no_pr }}</td>
                                        <td class="text-sm">{{ $detail->no_item }}</td>

                                        <td class="text-sm">{{ $detail->material_code }}</td>
                                        <td class="text-sm" style="white-space:nowrap;" title="{{ $detail->item_name }}">{{ $detail->item_name }}</td>

                                        {{-- Quantity — editable --}}
                                        <td class="text-sm {{ ($isIncomplete && ($detail->isreadypo == '0') && ($detail->isactive == '1') && ($detail->status == 'Open') && ($detail->quantity == '0')) ? 'cell-incomplete' : '' }}" data-order="{{ $detail->quantity }}">
                                            <input type="text"
                                                class="inline-inp text-end price-format-inline"
                                                data-field="quantity"
                                                data-row-id="{{ $primary }}"
                                                value="{{ number_format($detail->quantity, 2, ',', '.') }}"
                                                style="min-width:80px;"
                                                @if($detail->isreadypo == '1' || $detail->isactive == '0') readonly @endif>
                                        </td>

                                        <td class="text-sm">{{ $detail->uom }}</td>

                                        {{-- Price — editable --}}
                                        <td class="text-sm {{ ($isIncomplete && ($detail->isreadypo == '0') && ($detail->isactive == '1') && ($detail->status == 'Open') && ($detail->price == '0')) ? 'cell-incomplete' : '' }}" data-order="{{ $detail->price }}">
                                            <input type="text"
                                                class="inline-inp text-end price-format-inline"
                                                data-field="price"
                                                data-row-id="{{ $primary }}"
                                                value="{{ number_format($detail->price, 2, ',', '.') }}"
                                                style="min-width:90px;"
                                                @if($detail->isreadypo == '1' || $detail->isactive == '0') readonly @endif>
                                        </td>

                                        {{-- Delivery Date — editable --}}
                                        <td class="text-sm {{ ($isIncomplete && ($detail->isreadypo == '0') && ($detail->isactive == '1') && ($detail->status == 'Open') && empty($detail->delivery_date)) ? 'cell-incomplete' : '' }}" data-order="{{ $detail->delivery_date }}">
                                            <input type="date"
                                                class="inline-inp"
                                                data-field="delivery_date"
                                                data-row-id="{{ $primary }}"
                                                value="{{ $detail->delivery_date }}"
                                                style="min-width:130px;"
                                                @if($detail->isreadypo == '1' || $detail->isactive == '0') readonly @endif>
                                        </td>

                                        {{-- Vendor Name — readonly, diisi otomatis --}}
                                        <td class="text-sm {{ ($isIncomplete && ($detail->isreadypo == '0') && ($detail->isactive == '1') && ($detail->status == 'Open') && empty($detail->vendor_name)) ? 'cell-incomplete' : '' }}" style="min-width:160px;" data-order="{{ $detail->vendor_name ?? '' }}">
                                            <input type="text"
                                                class="inline-inp"
                                                data-field="vendor_name"
                                                data-row-id="{{ $primary }}"
                                                value="{{ $detail->vendor_name ?? '' }}"
                                                readonly
                                                title="{{ $detail->vendor_name }}">
                                        </td>

                                        {{-- SAP Code Vendor — editable + autocomplete --}}
                                        <td class="text-sm {{ ($isIncomplete && ($detail->isreadypo == '0') && ($detail->isactive == '1') && ($detail->status == 'Open') && empty($detail->sap_code_vendor)) ? 'cell-incomplete' : '' }}" style="position:relative;" data-order="{{ $detail->sap_code_vendor ?? '' }}">
                                            <div class="inline-vendor-wrap" style="display:flex; gap:4px; align-items:center;">
                                                <div style="flex-grow:1; position:relative;">
                                                    <input type="text"
                                                        class="inline-inp inline-vendor-input"
                                                        data-row-id="{{ $primary }}"
                                                        value="{{ $detail->sap_code_vendor ?? '' }}"
                                                        placeholder="Ketik/Cari vendor..."
                                                        style="min-width:90px;"
                                                        @if($detail->isreadypo == '1' || $detail->isactive == '0') readonly @endif
                                                    autocomplete="off">
                                                    <div class="inline-autocomplete"></div>
                                                </div>
                                                @if($detail->isreadypo == '0' && $detail->isactive == '1')
                                                <button type="button"
                                                    class="btn btn-sm btn-outline-primary mb-0"
                                                    style="flex-shrink:0;"
                                                    onclick="openVendorPickerFor(this)">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                                @endif
                                            </div>
                                        </td>

                                        {{-- Save button --}}
                                        <td style="text-align:center; vertical-align:middle;">
                                            @if($detail->isreadypo == '0' && $detail->isactive == '1')
                                            <button type="button"
                                                class="btn btn-sm btn-outline-success mb-0 btn-save-row"
                                                data-id="{{ $primary }}"
                                                title="Simpan perubahan"
                                                onclick="saveInlineRow(this)">
                                                <i class="fas fa-save"></i>
                                            </button>
                                            @endif
                                        </td>

                                        <td class="text-sm">{{ $detail->request_by }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            <div class="mt-2 text-muted" style="font-size: 0.95rem;">
                                Total: {{ $table_detail->count() }} data
                            </div>
                        </div>
                        <div id="quick-sel-bar">
                            <i class="fas fa-tasks" style="color:#0d9488;"></i>
                            <span id="quick-sel-count" style="font-weight:700;color:#0d9488;">0 item selected</span>
                            <button type="button"
                                class="btn btn-sm btn-generate-ready-po mb-0"
                                style="border-radius:8px;padding:0 14px;height:30px;font-size:.8rem;font-weight:600;"
                                onclick="quickGenerateSelected()">
                                <i class="fas fa-sync-alt me-1"></i> Generate Ready PO
                            </button>
                            <button type="button"
                                class="btn btn-sm btn-outline-secondary mb-0 ms-auto"
                                style="border-radius:8px;padding:0 12px;height:30px;font-size:.8rem;"
                                onclick="tblClearAll()">
                                <i class="fas fa-times me-1"></i> Clear
                            </button>
                        </div>
                    </div>

                    {{-- Legend --}}
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <code style="display:flex;align-items:flex-start;">
                                <span style="margin-right:8px;">Note :</span>
                                <div style="display: flex; flex-direction: column; gap: 2px;">
                                    <div>
                                        <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                        Date PR more than 3 days
                                    </div>
                                    <div>
                                        <i aria-hidden="true" style="color: #fff9c4; border: 1px solid #e8dfb9ff; border-radius: 100%;" class="fas fa-circle"></i>
                                        Data incomplete
                                    </div>
                                    <!-- <div>
                                        <i aria-hidden="true" style="color: #e3f2fd;" class="fas fa-circle"></i>
                                        Data generated as Ready PO
                                    </div> -->
                                </div>
                            </code>
                        </div>
                    </div>
                </div>{{-- /card --}}
            </div>
        </div>
    </div>
</div>


{{-- ════════════════════════════════════════════════════════════
     MODAL 1 — Pull Outstanding PR (data dari SAP)
════════════════════════════════════════════════════════════ --}}
<div class="modal fade gen-modal" id="modalOutstandingPR" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-cloud-download-alt me-2"></i>Pull Outstanding PR from SAP</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            {{-- Loading --}}
            <div class="gen-loading" id="opr-loading">
                <div class="gen-spinner"></div>
                <p style="font-weight:600;color:#555;margin:0 0 4px;">Mengambil data dari SAP&hellip;</p>
                <small style="color:#888;">Mohon tunggu sebentar</small>
            </div>

            <div class="modal-body">
                {{-- Error --}}
                <div id="opr-errBox" style="display:none;" class="p-3">
                    <div class="alert alert-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i><span id="opr-errMsg"></span>
                    </div>
                </div>

                <div id="opr-emptyState" style="display:none;" class="p-4 text-center">
                    <div style="font-size:3rem;margin-bottom:12px;">📭</div>
                    <p style="font-weight:600;color:#555;margin-bottom:4px;">Data SAP tidak tersedia</p>
                    <small style="color:#888;">Tidak ada data outstanding PR yang bisa ditampilkan saat ini.</small>
                    <div class="mt-3">
                        <button class="btn btn-sm btn-outline-primary" onclick="fetchOPR()">
                            <i class="fas fa-sync-alt me-1"></i> Coba Lagi
                        </button>
                    </div>
                </div>

                {{-- Summary --}}
                <div class="gen-summary-bar" id="opr-summaryBar" style="display:none;">
                    <div class="gen-chip total">
                        <div>
                            <div class="cnum" id="opr-chipTotal">0</div>
                            <div style="font-size:.67rem;color:#6c757d;">Total SAP</div>
                        </div>
                    </div>
                    <div class="gen-chip new-data"><i class="fas fa-plus-circle"></i>
                        <div>
                            <div class="cnum" id="opr-chipNew">0</div>
                            <div style="font-size:.67rem;">Data New</div>
                        </div>
                    </div>
                    <div class="gen-chip exists"><i class="fas fa-check-circle"></i>
                        <div>
                            <div class="cnum" id="opr-chipExists">0</div>
                            <div style="font-size:.67rem;">Exist</div>
                        </div>
                    </div>
                    <span class="ms-auto" style="font-size:.72rem;color:#6c757d;"><i class="fas fa-info-circle me-1"></i>New data is automatically selected.</span>
                </div>

                {{-- Filter --}}
                <div class="gen-filter-row" id="opr-filterRow" style="display:none;">
                    <button class="btn btn-sm btn-outline-secondary gen-filter-btn active" data-ns="opr" data-filter="all">All <span id="opr-tabAll">0</span></button>
                    <button class="btn btn-sm btn-outline-success   gen-filter-btn" data-ns="opr" data-filter="new"><i class="fas fa-plus me-1"></i>New <span id="opr-tabNew">0</span></button>
                    <button class="btn btn-sm btn-outline-warning   gen-filter-btn" data-ns="opr" data-filter="exists"><i class="fas fa-check me-1"></i>Exist <span id="opr-tabExists">0</span></button>
                    <button class="btn btn-sm" style="border:1.5px solid #667eea;color:#667eea;border-radius:20px;font-size:.76rem;padding:3px 13px;" onclick="genSelectAll('opr',true)"><i class="fas fa-check-square me-1"></i>Check All</button>
                    <button class="btn btn-sm" style="border:1.5px solid #dc3545;color:#dc3545;border-radius:20px;font-size:.76rem;padding:3px 13px;" onclick="genSelectAll('opr',false)"><i class="fas fa-square me-1"></i>Uncheck All</button>
                    <input type="text" class="gen-search" id="opr-search" placeholder="🔍 Search No PR / material / item..." oninput="genSearch('opr',this.value)">
                </div>

                {{-- Table --}}
                <div class="gen-table-scroll" id="opr-tableScroll" style="display:none;">
                    <table class="table table-bordered gen-table" id="opr-table">
                        <thead>
                            <tr>
                                <th style="width:32px;text-align:center;"><input type="checkbox" id="opr-selectAll" onchange="genSelectAllPage('opr',this)"></th>
                                <th>Status<small>DB</small></th>
                                <th>No PR<small>no_pr</small></th>
                                <th>No Item<small>no_item</small></th>
                                <th>Mat. Group<small>material_group</small></th>
                                <th>Mat. Code<small>material_code</small></th>
                                <th>Item Name<small>item_name</small></th>
                                <th>Qty<small>quantity</small></th>
                                <th>UOM<small>uom</small></th>
                                <th>Date PR<small>date_pr</small></th>
                                <th>Released Date<small>released_date</small></th>
                                <th>Request By<small>dari SAP</small></th>
                                <th class="inp-col-req">SAP Code Vendor ★<small>wajib</small></th>
                                <th class="inp-col-req">Vendor Name ★<small>wajib</small></th>
                                <th class="inp-col-req">Price ★<small>wajib</small></th>
                                <th class="inp-col-req">Delivery Date ★<small>wajib</small></th>
                            </tr>
                        </thead>
                        <tbody id="opr-tbody"></tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="gen-pag-row" id="opr-pagRow" style="display:none;">
                    <span id="opr-pagInfo"></span>
                    <div style="display:flex;gap:5px;align-items:center;">
                        <button class="rpg-btn" id="opr-btnPrev" onclick="genChangePage('opr',-1)" disabled>&#8249; Prev</button>
                        <span id="opr-pagLabel"></span>
                        <button class="rpg-btn" id="opr-btnNext" onclick="genChangePage('opr',1)">Next &#8250;</button>
                    </div>
                </div>
            </div>{{-- /modal-body --}}

            <div class="modal-footer d-flex flex-wrap align-items-center justify-content-end">
                <div id="opr-selInfo" class="sel-info me-auto" style="font-size:.8rem;">
                    <i class="fas fa-info-circle me-1"></i>Pilih data yang ingin dimasukkan ke Outstanding PR.
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm mb-0"
                    style="border-radius:9px;height:34px;padding:0 16px;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;"
                    onclick="fetchOPR()">
                    <i class="fas fa-sync-alt me-1"></i> Refresh SAP Data
                </button>
                <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal"
                    style="border-radius:9px;height:34px;padding:0 16px;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;">
                    <i class="fas fa-times me-1"></i> Close
                </button>
                <button type="button" id="opr-btnLanjut" class="btn btn-do-insert mb-0" disabled onclick="oprOpenInput()">
                    <i class="fas fa-arrow-right"></i><span>Next Input Data</span><span class="sel-count" id="opr-selCount">0</span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ════════════════════════════════════════════════════════════
     MODAL 1b — Input per-row untuk Outstanding PR
     (muncul setelah klik "Lanjut Input Data")
════════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalInputOPR" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="max-width:94vw;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color:white;font-weight:700;font-size:.95rem;">
                    <i class="fas fa-table me-2"></i>Input Data per Item — Outstanding PR
                </h5>
            </div>
            <div class="modal-body p-3">
                <div class="alert alert-info py-2 px-3 mb-3" style="font-size:.79rem;border-radius:8px;border-left:4px solid #0dcaf0;">
                    <i class="fas fa-info-circle me-1"></i>
                    Kolom <span class="badge" style="background:#fffde7;color:#856404;border:1px solid #ffd97d;">★ kuning</span>
                    wajib diisi. Kolom <span class="badge" style="background:#f0fff0;color:#1e7e34;border:1px solid #b7dfb8;">hijau</span>
                    bisa dikosongkan. Jumlah item: <strong id="opr-inputCount">0</strong>
                </div>
                <div class="table-responsive-modal">
                    <table class="table table-bordered" id="tblInputOPR">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>No PR</th>
                                <th>No Item</th>
                                <th>Mat. Code</th>
                                <th>Item Name</th>
                                <th>Request By</th>
                                <th style="background:#8CC0EB!important;">Quantity ★</th>
                                <th>UOM</th>
                                <th style="background:#8CC0EB!important;">SAP Code Vendor ★</th>
                                <th style="background:#8CC0EB!important;">Vendor Name ★</th>
                                <th style="background:#8CC0EB!important;">Price ★</th>
                                <th style="background:#8CC0EB!important;">Delivery Date ★</th>
                            </tr>
                        </thead>
                        <tbody id="tblInputOPR-tbody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm mb-0"
                    style="border-radius:9px;padding:0 16px;height:34px;font-size:.84rem;font-weight:600;"
                    onclick="oprBackToMain()">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </button>
                <button type="button" id="oprBtnSimpan" class="btn btn-success btn-sm mb-0"
                    style="border-radius:9px;padding:0 20px;height:34px;font-size:.84rem;font-weight:600;"
                    onclick="oprSubmit()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ════════════════════════════════════════════════════════════
     MODAL 2 — Generate Ready PO (data dari ls_outstanding_pr)
════════════════════════════════════════════════════════════ --}}
<div class="modal fade gen-modal" id="modalReadyPO" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-sync-alt me-2"></i>Generate Ready PO from Outstanding PR</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            {{-- Loading --}}
            <div class="gen-loading" id="rpo-loading">
                <div class="gen-spinner"></div>
                <p style="font-weight:600;color:#555;margin:0 0 4px;">Mengambil data dari Outstanding PR&hellip;</p>
                <small style="color:#888;">Mohon tunggu sebentar</small>
            </div>

            <div class="modal-body">
                {{-- Error --}}
                <div id="rpo-errBox" style="display:none;" class="p-3">
                    <div class="alert alert-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i><span id="rpo-errMsg"></span>
                    </div>
                </div>

                <div id="rpo-emptyState" style="display:none;" class="p-4 text-center">
                    <div style="font-size:3rem;margin-bottom:12px;">📭</div>
                    <p style="font-weight:600;color:#555;margin-bottom:4px;">Data Outstanding PR tidak tersedia</p>
                    <small style="color:#888;">Tidak ada data yang bisa di-generate ke Ready PO saat ini.</small>
                    <div class="mt-3">
                        <button class="btn btn-sm btn-outline-primary" onclick="fetchRPO()">
                            <i class="fas fa-sync-alt me-1"></i> Coba Lagi
                        </button>
                    </div>
                </div>

                {{-- Summary --}}
                <div class="gen-summary-bar" id="rpo-summaryBar" style="display:none;">
                    <div class="gen-chip total">
                        <div>
                            <div class="cnum" id="rpo-chipTotal">0</div>
                            <div style="font-size:.67rem;color:#6c757d;">Total Outstanding</div>
                        </div>
                    </div>
                    <div class="gen-chip new-data"><i class="fas fa-plus-circle"></i>
                        <div>
                            <div class="cnum" id="rpo-chipNew">0</div>
                            <div style="font-size:.67rem;">UnReady PO</div>
                        </div>
                    </div>
                    <div class="gen-chip exists"><i class="fas fa-check-circle"></i>
                        <div>
                            <div class="cnum" id="rpo-chipExists">0</div>
                            <div style="font-size:.67rem;">Ready PO</div>
                        </div>
                    </div>
                    <span class="ms-auto" style="font-size:.72rem;color:#6c757d;">
                        <i class="fas fa-info-circle me-1"></i>New data is automatically selected.
                    </span>
                </div>

                {{-- Filter --}}
                <div class="gen-filter-row" id="rpo-filterRow" style="display:none;">
                    <button class="btn btn-sm btn-outline-secondary gen-filter-btn active" data-ns="rpo" data-filter="all">All <span id="rpo-tabAll">0</span></button>
                    <button class="btn btn-sm btn-outline-success   gen-filter-btn" data-ns="rpo" data-filter="new"><i class="fas fa-plus me-1"></i>Unready PO <span id="rpo-tabNew">0</span></button>
                    <button class="btn btn-sm btn-outline-warning   gen-filter-btn" data-ns="rpo" data-filter="exists"><i class="fas fa-check me-1"></i>Ready PO <span id="rpo-tabExists">0</span></button>
                    <button class="btn btn-sm" style="border:1.5px solid #667eea;color:#667eea;border-radius:20px;font-size:.76rem;padding:3px 13px;" onclick="genSelectAll('rpo',true)"><i class="fas fa-check-square me-1"></i>Check All</button>
                    <button class="btn btn-sm" style="border:1.5px solid #dc3545;color:#dc3545;border-radius:20px;font-size:.76rem;padding:3px 13px;" onclick="genSelectAll('rpo',false)"><i class="fas fa-square me-1"></i>Uncheck All</button>
                    <input type="text" class="gen-search" id="rpo-search" placeholder="🔍 Search No PR / material / item..." oninput="genSearch('rpo',this.value)">
                </div>

                {{-- Table --}}
                <div class="gen-table-scroll" id="rpo-tableScroll" style="display:none;">
                    <table class="table table-bordered gen-table" id="rpo-table">
                        <thead>
                            <tr>
                                <th style="width:32px;text-align:center;"><input type="checkbox" id="rpo-selectAll" onchange="genSelectAllPage('rpo',this)"></th>
                                <th>Status<small>Ready PO</small></th>
                                <th>No PR<small>no_pr</small></th>
                                <th>No Item<small>no_item</small></th>
                                <th>Mat. Code<small>material_code</small></th>
                                <th>Item Name<small>item_name</small></th>
                                <th>Qty<small>quantity</small></th>
                                <th>SAP Code Vendor<small>dari outstanding</small></th>
                                <th>Vendor Name<small>dari outstanding</small></th>
                                <th>Price<small>dari outstanding</small></th>
                                <th>Delivery Date<small>dari outstanding</small></th>
                                <th>Status PO<small>po_status</small></th>
                            </tr>
                        </thead>
                        <tbody id="rpo-tbody"></tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="gen-pag-row" id="rpo-pagRow" style="display:none;">
                    <span id="rpo-pagInfo"></span>
                    <div style="display:flex;gap:5px;align-items:center;">
                        <button class="rpg-btn" id="rpo-btnPrev" onclick="genChangePage('rpo',-1)" disabled>&#8249; Prev</button>
                        <span id="rpo-pagLabel"></span>
                        <button class="rpg-btn" id="rpo-btnNext" onclick="genChangePage('rpo',1)">Next &#8250;</button>
                    </div>
                </div>
            </div>{{-- /modal-body --}}

            <div class="modal-footer d-flex flex-wrap align-items-center justify-content-end">
                <div id="rpo-selInfo" class="sel-info me-auto" style="font-size:.8rem;">
                    <i class="fas fa-info-circle me-1"></i>Select data you want to generate into Ready PO.
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm mb-0"
                    style="border-radius:9px;height:34px;padding:0 16px;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;"
                    onclick="fetchRPO()">
                    <i class="fas fa-sync-alt me-1"></i> Refresh Data
                </button>
                <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal"
                    style="border-radius:9px;height:34px;padding:0 16px;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;">
                    <i class="fas fa-times me-1"></i> Close
                </button>
                <button type="button" id="rpo-btnLanjut" class="btn btn-do-insert mb-0"
                    style="background:linear-gradient(135deg,#99f6e4,#46c4b3)!important;"
                    disabled onclick="rpoOpenInput()">
                    <i class="fas fa-arrow-right me-1"></i><span>Review &amp; Save</span><span class="sel-count" id="rpo-selCount"></span>
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ════════════════════════════════════════════════════════════
     MODAL 2b — Review + input data per-row untuk Ready PO
     (tampil data dari ls_outstanding_pr, kolom bisa diubah)
════════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalInputRPO" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="max-width:94vw;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color:white;font-weight:700;font-size:.95rem;">
                    <i class="fas fa-edit me-2"></i>Review &amp; Update Data — Ready PO
                </h5>
            </div>
            <div class="modal-body p-3">
                <div class="alert alert-warning py-2 px-3 mb-3" style="font-size:.79rem;border-radius:8px;border-left:4px solid #ffc107;">
                    <i class="fas fa-exclamation-circle me-1"></i>
                    Data di bawah diambil dari <strong>Outstanding PR</strong>.
                    Kolom <span class="badge" style="background:#fffde7;color:#856404;border:1px solid #ffd97d;">★ kuning</span>
                    bisa diubah sebelum disimpan ke <strong>List Ready PO</strong>.
                    Item yang <span class="badge" style="background:#fff3cd;color:#856404;">sudah ada</span> akan <strong>diperbarui</strong>.
                    Jumlah item: <strong id="rpo-inputCount">0</strong>
                </div>
                <div class="table-responsive-modal">
                    <table class="table table-bordered" id="tblInputRPO">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Status</th>
                                <th>No PR</th>
                                <th>No Item</th>
                                <th>Material Code</th>
                                <th>Item Name</th>
                                <th style="background:#8CC0EB!important;">Quantity ★</th>
                                <th style="background:#8CC0EB!important;">SAP Code Vendor ★</th>
                                <th style="background:#8CC0EB!important;">Vendor Name ★</th>
                                <th style="background:#8CC0EB!important;">Price ★</th>
                                <th style="background:#8CC0EB!important;">Delivery Date ★</th>
                                <th style="background:#8CC0EB!important;min-width:200px;">Header (Per Vendor)</th>
                            </tr>
                        </thead>
                        <tbody id="tblInputRPO-tbody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm mb-0"
                    style="border-radius:9px;padding:0 16px;height:34px;font-size:.84rem;font-weight:600;"
                    onclick="rpoBackToMain()">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </button>
                <button type="button" id="rpoBtnSimpan" class="btn btn-success btn-sm mb-0"
                    style="border-radius:9px;padding:0 20px;height:34px;font-size:.84rem;font-weight:600;"
                    onclick="rpoSubmit()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ════════════════════════════════════════════════════
     MODAL VENDOR PICKER
════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalVendorPicker" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:700px;">
        <div class="modal-content" style="border-radius:14px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div class="modal-header" style="background:linear-gradient(135deg,#4a90e2,#357abd);border-radius:14px 14px 0 0;border:none;">
                <h5 class="modal-title" style="color:white;font-weight:700;font-size:.95rem;">
                    <i class="fas fa-search me-2"></i>Cari Vendor
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    style="filter:brightness(0) invert(1);"></button>
            </div>
            <div class="modal-body p-3">
                {{-- Search bar --}}
                <div class="mb-3 d-flex gap-2">
                    <input type="text" id="vendorPickerSearch"
                        class="form-control form-control-sm"
                        style="border-radius:20px;border:1.5px solid #dee2e6;font-size:.82rem;"
                        placeholder="🔍 Cari SAP Code atau Nama Vendor..."
                        oninput="vendorPickerSearch(this.value)">
                    <button type="button" class="btn btn-sm btn-outline-secondary mb-0"
                        style="border-radius:20px;font-size:.8rem;white-space:nowrap;"
                        onclick="vendorPickerSearch(document.getElementById('vendorPickerSearch').value)">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                </div>

                {{-- Loading --}}
                <div id="vendorPickerLoading" style="display:none;text-align:center;padding:30px 0;">
                    <div style="width:36px;height:36px;border:3px solid #f3f3f3;border-top:3px solid #4a90e2;
                                border-radius:50%;animation:genSpin .8s linear infinite;margin:0 auto 10px;"></div>
                    <small style="color:#888;">Memuat data vendor...</small>
                </div>

                {{-- Error --}}
                <div id="vendorPickerErr" style="display:none;background:#f8d7da;color:#842029;border:1px solid #f5c2c7;border-radius:6px;padding:8px 12px;margin-bottom:8px;font-size:.8rem;">
                    <i class="fas fa-exclamation-triangle me-1"></i><span id="vendorPickerErrMsg"></span>
                </div>

                {{-- Table --}}
                <div style="max-height:380px;overflow:auto;">
                    <table class="table table-bordered table-hover mb-0" id="tblVendorPicker"
                        style="font-size:.76rem;min-width:500px;">
                        <thead>
                            <tr>
                                <th style="background:#34495e;color:white;padding:7px 10px;white-space:nowrap;width:90px;">Action</th>
                                <th style="background:#34495e;color:white;padding:7px 10px;white-space:nowrap;">SAP Code Vendor</th>
                                <th style="background:#34495e;color:white;padding:7px 10px;">Vendor Name</th>
                            </tr>
                        </thead>
                        <tbody id="tblVendorPicker-tbody">
                            <tr>
                                <td colspan="3" class="text-center py-3 text-muted">
                                    <i class="fas fa-search me-1"></i>Ketik untuk mencari vendor...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- Count info --}}
                <div id="vendorPickerInfo" class="mt-2" style="font-size:.75rem;color:#6c757d;"></div>
            </div>
            <div class="modal-footer" style="border-radius:0 0 14px 14px;background:#f8f9fa;">
                <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal"
                    style="border-radius:9px;padding:0 16px;height:34px;font-size:.84rem;font-weight:600;">
                    <i class="fas fa-times me-1"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>


@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs') @include('js.' . $dmenu) @endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection

@push('js')
<script>
    var _oprClosedByStep2 = false;
    var _rpoClosedByStep2 = false;

    $(document).ready(function() {

        /* ── Tooltip ── */
        [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            .forEach(function(el) {
                new bootstrap.Tooltip(el);
            });

        if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
            $('#list_{{ $dmenu }}').DataTable().destroy();
        }

        var dtTable = $('#list_{{ $dmenu }}').DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            order: [],
            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)'
            },
            dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
            buttons: [{
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                    className: 'buttons-excel',
                    action: function() {
                        window.location.href = "{{ url($url_menu) }}?export=excel";
                    }
                },
                {
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                    className: 'buttons-pdf',
                    action: function() {
                        window.location.href = "{{ url($url_menu) }}?export=pdf";
                    }
                },
                // {
                //     text: '<i class="fas fa-cloud-download-alt me-1 text-lg"></i><span class="font-weight-bold"> Pull Outstanding PR</span>',
                //     className: 'btn-generate-outstanding-pr',
                //     action: function() {
                //         openModalOPR();
                //     }
                // },
                // {
                //     text: '<i class="fas fa-sync-alt me-1 text-lg"></i><span class="font-weight-bold"> Generate Ready PO</span>',
                //     className: 'btn-generate-ready-po',
                //     action: function() {
                //         openModalRPO();
                //     }
                // },
                {
                    text: '<i class="fas fa-cloud-download-alt me-1 text-lg"></i><span class="font-weight-bold"> Pull Outstanding PR</span>',
                    className: 'btn-generate-outstanding-pr',
                    action: function() {
                        quickPullPR();
                    }
                },
            ],
            initComplete: function() {
                var table = this.api();
                var html = '<div class="dataTables_filter d-flex justify-content-end">' +
                    '<div class="d-flex align-items-center">' +
                    '<input type="text" id="customSearch" class="form-control me-2" placeholder="Search..." value="{{ request('
                search ') }}">' +
                    '</div></div>';
                $('.dataTables_filter').remove();
                $(html).insertAfter('.dt-buttons');
                $('#customSearch').on('keyup', function() {
                    table.search(this.value).draw();
                });
                var init = "{{ request('search') }}";
                if (init) {
                    $('#customSearch').val(init);
                    table.search(init).draw();
                }
            }
        });

        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1715</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1715</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1716</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1716</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1717</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsospr/list.blade.php</b> on line <b>1717</b><br />

        window.deleteData = function(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, ' + msg,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then(function(result) {
                if (result.isConfirmed) event.target.closest('form').submit();
            });
        };

        /* ── Filter tab clicks (shared) ── */
        $(document).on('click', '.gen-filter-btn', function() {
            var ns = $(this).data('ns');
            var f = $(this).data('filter');
            $('.gen-filter-btn[data-ns="' + ns + '"]').removeClass('active');
            $(this).addClass('active');
            GEN[ns].filter = f;
            GEN[ns].page = 1;
            genApplyFilter(ns);
        });

        $('#modalOutstandingPR').on('hidden.bs.modal', function() {
            if (_oprClosedByStep2) {
                _oprClosedByStep2 = false;
                return;
            }
            _vendorPickerCache = null;
            genReset('opr');
        });

        $('#modalReadyPO').on('hidden.bs.modal', function() {
            if (_rpoClosedByStep2) {
                _rpoClosedByStep2 = false;
                return;
            }
            genReset('rpo');
        });

        $('#list_{{ $dmenu }} tbody tr').each(function() {
            var row = $(this);
            var id = row.data('id');
            if (!id) return;

            row.find('.inline-inp:not([readonly]), .inline-vendor-input').each(function() {
                $(this).data('original-value', $(this).val());
            });
        });

        $(document).on('input change',
            '.inline-inp:not([readonly]), .inline-vendor-input',
            function() {
                var row = $(this).closest('tr');
                var chk = row.find('.row-check');
                if (!chk.length) return;

                var hasChange = false;
                row.find('.inline-inp:not([readonly]), .inline-vendor-input').each(function() {
                    if ($(this).val() !== $(this).data('original-value')) {
                        hasChange = true;
                        return false;
                    }
                });

                if (hasChange) {
                    if (!chk.prop('disabled')) {
                        chk.prop('disabled', true)
                            .prop('checked', false)
                            .attr('title', 'Ada perubahan yang belum disimpan. Klik Save terlebih dahulu.');

                        var id = chk.data('id');
                        if (id) delete _selectedRows[String(id)];
                        tblSyncMaster();
                        tblUpdateSelBar();
                    }
                } else {
                    var sapCode = row.find('.inline-vendor-input').val() || '';
                    var vendName = row.find('[data-field="vendor_name"]').val() || '';
                    var qty = getRawInlineVal(row.find('[data-field="quantity"]')[0]);
                    var price = getRawInlineVal(row.find('[data-field="price"]')[0]);
                    var delivery = row.find('[data-field="delivery_date"]').val() || '';

                    var isComplete = sapCode.trim() !== '' &&
                        vendName.trim() !== '' &&
                        qty > 0 &&
                        price > 0 &&
                        delivery !== '';

                    chk.prop('disabled', !isComplete)
                        .attr('title', isComplete ?
                            '' :
                            'Lengkapi SAP Code Vendor, Vendor Name, Quantity, Price, dan Delivery Date terlebih dahulu'
                        );
                }
            }
        );
    });

    /* ════════════════════════════════════════════════════════════
       SHARED STATE — satu namespace per modal ('opr' | 'rpo')
    ════════════════════════════════════════════════════════════ */
    var GEN = {
        opr: {
            all: [],
            filtered: [],
            filter: 'all',
            search: '',
            page: 1,
            perPage: 100,
            selected: {}
        },
        rpo: {
            all: [],
            filtered: [],
            filter: 'all',
            search: '',
            page: 1,
            perPage: 100,
            selected: {}
        }
    };

    /* Utility */
    function g(id) {
        return document.getElementById(id);
    }

    function gShow(id, v) {
        var el = g(id);
        if (el) el.style.display = v ? '' : 'none';
    }

    function gEsc(s) {
        return s == null ? '' : String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    function gAttr(s) {
        return s == null ? '' : String(s).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function gFmt(n) {
        return parseFloat(n || 0).toLocaleString('id-ID', {
            minimumFractionDigits: 2
        });
    }

    function csrf() {
        return (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    }

    function gBadge(status, ns, v) {
        if (ns === 'opr') {
            if (status === 'new') {
                if (v && v.status_pr === 'p') {
                    return '<span class="b-exists" style="background:#fff3cd;color:#7d6000;">' +
                        '<i class="fas fa-code-branch me-1"></i>Partial PO</span>';
                }
                return '<span class="b-new"><i class="fas fa-plus me-1"></i>New</span>';
            } else if (status === 'exists_ready') {
                var poInfo = v && v.db_po_status ? ' (' + v.db_po_status + ')' : '';
                return '<span class="b-exists" style="background:#fff3cd;color:#856404;" title="PO Status: ' + (v && v.db_po_status || '-') + '">' +
                    '<i class="fas fa-check-double me-1"></i>Ready PO' + poInfo + '</span>';
            } else if (status === 'exists_outstanding') {
                return '<span class="b-exists" style="background:#e3f2fd;color:#0d47a1;">' +
                    '<i class="fas fa-info-circle me-1"></i>In Outstanding</span>';
            }
        }
        // rpo
        return status === 'new' ?
            '<span class="b-new"><i class="fas fa-plus me-1"></i>UnReady PO</span>' :
            '<span class="b-exists"><i class="fas fa-check-double me-1"></i>Ready PO</span>';
    }

    function gPoBadge(s) {
        var m = {
            'Pending': '<span class="b-pend">Pending</span>',
            'Processed': '<span class="b-proc">Processed</span>',
            'Success': '<span class="b-ok">Success</span>',
            'Failed': '<span class="b-fail">Failed</span>'
        };
        return m[s] || gEsc(s);
    }

    /* ════════════════════════════════════════════════════════════
       OPEN MODALS
    ════════════════════════════════════════════════════════════ */
    function openModalOPR() {
        new bootstrap.Modal(g('modalOutstandingPR')).show();
        fetchOPR();
    }

    function openModalRPO() {
        new bootstrap.Modal(g('modalReadyPO')).show();
        fetchRPO();
    }

    /* ════════════════════════════════════════════════════════════
       FETCH
    ════════════════════════════════════════════════════════════ */
    function fetchOPR() {
        genReset('opr');
        var modalContent = document.querySelector('#modalOutstandingPR .modal-content');
        if (modalContent) {
            modalContent.classList.remove('is-loaded');
            modalContent.classList.add('is-loading');
        }
        gShow('opr-loading', true);
        fetch("{{ route('lsospr.sap') }}", {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                }
            })
            .then(function(r) {
                return r.json().then(function(j) {
                    if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                    return j;
                });
            })
            .then(function(res) {
                gShow('opr-loading', false);
                if (modalContent) {
                    modalContent.classList.remove('is-loading');
                    modalContent.classList.add('is-loaded');
                }
                if (!res.success) throw new Error(res.message || 'Gagal mengambil data dari SAP.');
                if (!res.data || !res.data.length) {
                    gShow('opr-emptyState', true);
                    return;
                }
                GEN.opr.all = res.data;
                genRenderStats('opr');
                genApplyFilter('opr');
                ['opr-summaryBar', 'opr-filterRow', 'opr-tableScroll', 'opr-pagRow'].forEach(function(id) {
                    gShow(id, true);
                });

                enrichOprWithHistory(GEN.opr.all);
            })
            .catch(function(err) {
                gShow('opr-loading', false);
                if (modalContent) {
                    modalContent.classList.remove('is-loading');
                    modalContent.classList.add('is-loaded');
                }
                gShow('opr-errBox', true);
                var e = g('opr-errMsg');
                if (e) e.innerHTML = '<strong>Gagal memuat data SAP.</strong><br><small>' + gEsc(err.message) + '</small>' +
                    '<div class="mt-2"><button class="btn btn-sm btn-outline-danger" onclick="fetchOPR()">' +
                    '<i class="fas fa-sync-alt me-1"></i>Coba Lagi</button></div>';
            });
    }

    function enrichOprWithHistory(items) {
        var pending = items.filter(function(v) {
            return v._status === 'new';
        });

        if (!pending.length) return;

        var completed = 0;
        var total = pending.length;

        pending.forEach(function(v) {
            if (!v.material_code) {
                completed++;
                if (completed === total) genApplyFilter('opr');
                return;
            }

            var sapVendor = v.sap_code_vendor || '';
            var url = "{{ route('lsospr.historyPO') }}?material_code=" + encodeURIComponent(v.material_code);
            if (sapVendor) url += "&sap_code_vendor=" + encodeURIComponent(sapVendor);

            fetch(url, {
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                .then(function(r) {
                    return r.json();
                })
                .then(function(res) {
                    if (res.success) {
                        if (!v.sap_code_vendor && res.sap_code_vendor) {
                            v.sap_code_vendor = res.sap_code_vendor;
                        }
                        if (!v.vendor_name && res.vendor_name) {
                            v.vendor_name = res.vendor_name;
                        }
                        if ((!v.price || v.price <= 0) && res.price > 0) {
                            v.price = res.price;
                        }
                    }
                })
                .catch(function(err) {
                    console.warn('History PO fetch error for', v.material_code, ':', err.message);
                })
                .finally(function() {
                    completed++;
                    if (completed % 5 === 0 || completed === total) {
                        genApplyFilter('opr');
                    }
                });
        });
    }

    function fetchRPO() {
        genReset('rpo');
        var modalContent = document.querySelector('#modalReadyPO .modal-content');
        if (modalContent) {
            modalContent.classList.remove('is-loaded');
            modalContent.classList.add('is-loading');
        }
        gShow('rpo-loading', true);
        fetch("{{ route('lsospr.generate') }}", {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                }
            })
            .then(function(r) {
                return r.json().then(function(j) {
                    if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                    return j;
                });
            })
            .then(function(res) {
                gShow('rpo-loading', false);
                if (modalContent) {
                    modalContent.classList.remove('is-loading');
                    modalContent.classList.add('is-loaded');
                }
                if (!res.success) throw new Error(res.message || 'Gagal mengambil data dari SAP.');
                if (!res.data || !res.data.length) {
                    gShow('rpo-emptyState', true);
                    return;
                }
                GEN.rpo.all = res.data;
                genRenderStats('rpo');
                genApplyFilter('rpo');
                ['rpo-summaryBar', 'rpo-filterRow', 'rpo-tableScroll', 'rpo-pagRow'].forEach(function(id) {
                    gShow(id, true);
                });
            })
            .catch(function(err) {
                gShow('rpo-loading', false);
                if (modalContent) {
                    modalContent.classList.remove('is-loading');
                    modalContent.classList.add('is-loaded');
                }
                gShow('rpo-errBox', true);
                var e = g('rpo-errMsg');
                if (e) e.innerHTML = '<strong>Gagal memuat data SAP.</strong><br><small>' + gEsc(err.message) + '</small>' +
                    '<div class="mt-2"><button class="btn btn-sm btn-outline-danger" onclick="fetchRPO()">' +
                    '<i class="fas fa-sync-alt me-1"></i>Coba Lagi</button></div>';
            });
    }

    /* ════════════════════════════════════════════════════════════
       STATS
    ════════════════════════════════════════════════════════════ */
    function genRenderStats(ns) {
        var d = GEN[ns];
        var total = d.all.length;
        var newCnt = d.all.filter(function(v) {
            return v._status === 'new';
        }).length;
        var exCnt = ns === 'opr' ?
            d.all.filter(function(v) {
                return v._status === 'exists_ready' || v._status === 'exists_outstanding';
            }).length :
            d.all.filter(function(v) {
                return v._status === 'exists';
            }).length;
        var s = function(id, v) {
            var e = g(id);
            if (e) e.textContent = v;
        };
        s(ns + '-chipTotal', total);
        s(ns + '-tabAll', total);
        s(ns + '-chipNew', newCnt);
        s(ns + '-tabNew', newCnt);
        s(ns + '-chipExists', exCnt);
        s(ns + '-tabExists', exCnt);
        /* auto-select data baru */
        d.selected = {};
        d.all.forEach(function(v) {
            if (v._status === 'new') d.selected[v._key] = true;
        });
        genUpdateBtn(ns);
    }

    /* ════════════════════════════════════════════════════════════
       FILTER + SEARCH
    ════════════════════════════════════════════════════════════ */
    function genSearch(ns, val) {
        GEN[ns].search = val.trim();
        GEN[ns].page = 1;
        genApplyFilter(ns);
    }

    function genApplyFilter(ns) {
        var d = GEN[ns],
            q = d.search.toLowerCase();

        d.filtered = d.all.filter(function(v) {
            if (d.filter !== 'all' && v._status !== d.filter) return false;
            if (q) {
                var hay = [v.no_pr, v.no_item, v.material_code, v.item_name, v.material_group, v.sap_code_vendor, v.vendor_name].join(' ').toLowerCase();
                if (hay.indexOf(q) === -1) return false;
            }
            return true;
        });

        d.filtered.sort(function(a, b) {
            if (ns === 'rpo') {
                var statusWeight = {
                    'new': 1,
                    'exists': 2
                };
                var swA = statusWeight[a._status] || 99;
                var swB = statusWeight[b._status] || 99;
                if (swA !== swB) return swA - swB;

                var vendorCmp = (a.sap_code_vendor || '').localeCompare(b.sap_code_vendor || '');
                if (vendorCmp !== 0) return vendorCmp;
                return (a.no_pr || '').localeCompare(b.no_pr || '');
            }

            var weight = {
                'new': 1,
                'exists_outstanding': 2,
                'exists_ready': 3
            };
            var weightA = weight[a._status] || 99;
            var weightB = weight[b._status] || 99;
            if (weightA !== weightB) return weightA - weightB;
            return b.no_pr.localeCompare(a.no_pr);
        });

        genRenderPage(ns);
    }

    /* ════════════════════════════════════════════════════════════
       RENDER PAGE — berbeda per namespace
    ════════════════════════════════════════════════════════════ */
    function genRenderPage(ns) {
        var d = GEN[ns];
        var total = d.filtered.length,
            pages = Math.max(1, Math.ceil(total / d.perPage));
        d.page = Math.min(d.page, pages);
        var start = (d.page - 1) * d.perPage;
        var slice = d.filtered.slice(start, start + d.perPage);
        var tbody = g(ns + '-tbody');
        if (!tbody) return;
        var rows = [];

        if (!slice.length) {
            var cols = ns === 'opr' ? 16 : 13;
            rows.push('<tr><td colspan="' + cols + '" class="text-center py-4 text-muted"><i class="fas fa-inbox me-2"></i>Tidak ada data.</td></tr>');
        } else {
            slice.forEach(function(v) {
                if (ns === 'opr') rows.push(renderOPRRow(v));
                else rows.push(renderRPORow(v));
            });
        }
        tbody.innerHTML = rows.join('');

        var from = total === 0 ? 0 : start + 1,
            to = Math.min(start + d.perPage, total);
        var pi = g(ns + '-pagInfo');
        if (pi) pi.textContent = 'Menampilkan ' + from + '–' + to + ' dari ' + total + ' data';
        var pl = g(ns + '-pagLabel');
        if (pl) pl.innerHTML = '<strong style="color:#003366;">Hal ' + d.page + ' / ' + pages + '</strong>';
        var bp = g(ns + '-btnPrev');
        if (bp) bp.disabled = d.page <= 1;
        var bn = g(ns + '-btnNext');
        if (bn) bn.disabled = d.page >= pages;
        genSyncSelectAll(ns);
    }

    function renderOPRRow(v) {
        var isNew = v._status === 'new';
        var rowClass = isNew ? 'row-new' : 'row-exists';
        var chk = isNew ?
            '<input type="checkbox" class="gen-chk" data-ns="opr" data-key="' + gAttr(v._key) + '" ' +
            (GEN.opr.selected[v._key] ? 'checked' : '') + ' onchange="genToggle(\'opr\',this)">' :
            '<input type="checkbox" class="gen-chk" disabled title="Data sudah ada di database">';

        return '<tr class="' + rowClass + '">' +
            '<td style="text-align:center;">' + chk + '</td>' +
            '<td>' + gBadge(v._status, 'opr', v) + '</td>' +
            '<td><strong>' + gEsc(v.no_pr) + '</strong></td>' +
            '<td>' + gEsc(v.no_item) + '</td>' +
            '<td>' + gEsc(v.material_group) + '</td>' +
            '<td>' + gEsc(v.material_code) + '</td>' +
            '<td class="td-trunc" title="' + gAttr(v.item_name) + '">' + gEsc(v.item_name) + '</td>' +
            '<td class="text-end">' + gFmt(v.quantity) + (v.status_pr === 'p' ?
                '<br><small style="color:#856404;font-size:.62rem;">sisa dari ' + gFmt(v.menge) + '</small>' : '') +
            '</td>' +
            '<td>' + gEsc(v.uom) + '</td>' +
            '<td>' + gEsc(v.date_pr) + '</td>' +
            '<td>' + gEsc(v.released_date) + '</td>' +
            '<td>' + gEsc(v.request_by) + '</td>' +
            '<td class="inp-col-req">' + (v.sap_code_vendor ? gEsc(v.sap_code_vendor) : '<span style="color:#454040;font-size:.69rem;">★ wajib</span>') + '</td>' +
            '<td class="inp-col-req">' + (v.vendor_name ? gEsc(v.vendor_name) : '<span style="color:#454040;font-size:.69rem;">★ wajib</span>') + '</td>' +
            '<td class="inp-col-req">' + (v.price ? gFmt(v.price) : '<span style="color:#454040;font-size:.69rem;">★ wajib</span>') + '</td>' +
            '<td class="inp-col-req">' + (v.delivery_date ? gEsc(v.delivery_date) : '<span style="color:#454040;font-size:.69rem;">★ wajib</span>') + '</td>' +
            '</tr>';
    }

    function renderRPORow(v) {
        var isNew = v._status === 'new';
        var rowClass = isNew ? 'row-new' : 'row-exists';

        // exists (isreadypo='1') tidak bisa dipilih ulang
        var chk = isNew ?
            '<input type="checkbox" class="gen-chk" data-ns="rpo" data-key="' + gAttr(v._key) + '" ' +
            (GEN.rpo.selected[v._key] ? 'checked' : '') + ' onchange="genToggle(\'rpo\',this)">' :
            '<input type="checkbox" class="gen-chk" disabled title="Sudah di-generate ke Ready PO">';

        return '<tr class="' + rowClass + '">' +
            '<td style="text-align:center;">' + chk + '</td>' +
            '<td>' + gBadge(v._status, 'rpo') + '</td>' +
            '<td><strong>' + gEsc(v.no_pr) + '</strong></td>' +
            '<td>' + gEsc(v.no_item) + '</td>' +
            '<td>' + gEsc(v.material_code) + '</td>' +
            '<td class="td-trunc" title="' + gAttr(v.item_name) + '">' + gEsc(v.item_name) + '</td>' +
            '<td class="text-end">' + gFmt(v.quantity) + '</td>' +
            '<td>' + gEsc(v.sap_code_vendor) + '</td>' +
            '<td class="td-trunc">' + gEsc(v.vendor_name) + '</td>' +
            '<td class="text-end">' + gFmt(v.price) + '</td>' +
            '<td>' + gEsc(v.delivery_date) + '</td>' +
            '<td>' + gPoBadge(v.po_status) + '</td>' +
            '</tr>';
    }

    function genChangePage(ns, dir) {
        GEN[ns].page += dir;
        genRenderPage(ns);
    }

    /* ════════════════════════════════════════════════════════════
       CHECKBOX
    ════════════════════════════════════════════════════════════ */
    function genToggle(ns, chk) {
        if (chk.checked) GEN[ns].selected[chk.dataset.key] = true;
        else delete GEN[ns].selected[chk.dataset.key];
        genSyncSelectAll(ns);
        genUpdateBtn(ns);
    }

    function genSelectAllPage(ns, chk) {
        var d = GEN[ns];
        var onPage = d.filtered.slice((d.page - 1) * d.perPage, d.page * d.perPage);
        var eligible = onPage.filter(function(v) {
            return v._status === 'new';
        });
        eligible.forEach(function(v) {
            if (chk.checked) d.selected[v._key] = true;
            else delete d.selected[v._key];
        });
        genRenderPage(ns);
        genUpdateBtn(ns);
    }

    function genSelectAll(ns, select) {
        var d = GEN[ns];
        var eligible = d.all.filter(function(v) {
            return v._status === 'new';
        });
        eligible.forEach(function(v) {
            if (select) d.selected[v._key] = true;
            else delete d.selected[v._key];
        });
        genRenderPage(ns);
        genUpdateBtn(ns);
    }

    function genSyncSelectAll(ns) {
        var d = GEN[ns];
        var onPage = d.filtered.slice((d.page - 1) * d.perPage, d.page * d.perPage);
        var eligible = onPage.filter(function(v) {
            return v._status === 'new';
        });
        var sa = g(ns + '-selectAll');
        if (!sa) return;
        var allChk = eligible.length > 0 && eligible.every(function(v) {
            return d.selected[v._key];
        });
        var someChk = eligible.some(function(v) {
            return d.selected[v._key];
        });
        sa.checked = allChk;
        sa.indeterminate = !allChk && someChk;
    }

    function genUpdateBtn(ns) {
        var n = Object.keys(GEN[ns].selected).filter(function(k) {
            return GEN[ns].selected[k];
        }).length;
        var btn = g(ns + '-btnLanjut');
        if (btn) btn.disabled = n === 0;
        var sc = g(ns + '-selCount');
        var si = g(ns + '-selInfo');
        if (n > 0) {
            if (sc) {
                sc.textContent = n;
                sc.style.display = 'inline-block';
            }
            if (si) {
                si.innerHTML = '<i class="fas fa-check-circle me-1 text-success"></i><strong>' + n + '</strong> data selected';
                si.className = 'sel-info me-auto has-sel';
            }
        } else {
            if (sc) sc.style.display = 'none';
            var msg = ns === 'opr' ? 'Pilih data yang ingin dimasukkan ke Outstanding PR.' : 'Pilih data yang ingin di-generate ke Ready PO.';
            if (si) {
                si.innerHTML = '<i class="fas fa-info-circle me-1"></i>' + msg;
                si.className = 'sel-info me-auto';
            }
        }
    }

    /* ════════════════════════════════════════════════════════════
       OUTSTANDING PR — STEP 2 (input per-row)
    ════════════════════════════════════════════════════════════ */
    var OPR_PENDING_ITEMS = [];

    function oprOpenInput() {
        var keys = Object.keys(GEN.opr.selected).filter(function(k) {
            return GEN.opr.selected[k];
        });
        if (!keys.length) return;

        var el = g('opr-inputCount');
        if (el) el.textContent = keys.length;

        OPR_PENDING_ITEMS = [];
        keys.forEach(function(k) {
            var v = GEN.opr.all.find(function(x) {
                return x._key === k;
            });
            if (v) OPR_PENDING_ITEMS.push(v);
        });

        console.log('OPR_PENDING_ITEMS:', OPR_PENDING_ITEMS); // debug

        var tbody = g('tblInputOPR-tbody');
        if (!tbody) return;
        var rows = [];
        OPR_PENDING_ITEMS.forEach(function(v, i) {
            rows.push(
                '<tr data-idx="' + i + '">' + // ✅ gunakan index, bukan key dengan '|'
                '<td style="text-align:center;">' + (i + 1) + '</td>' +
                '<td><strong>' + gEsc(v.no_pr) + '</strong></td>' +
                '<td>' + gEsc(v.no_item) + '</td>' +
                '<td>' + gEsc(v.material_code) + '</td>' +
                '<td class="td-trunc" title="' + gAttr(v.item_name) + '">' + gEsc(v.item_name) + '</td>' +
                '<td>' + gEsc(v.request_by) + '</td>' +
                '<td style="background:#fffde7;">' +
                '<input class="opr-inp price-format" data-field="quantity" type="text" ' +
                'value="' + (v.quantity ? gFmt(v.quantity) : '') + '" ' +
                'style="min-width:80px;">' +
                '</td>' +
                '<td>' + gEsc(v.uom) + '</td>' +
                '<td style="background:#fffde7; position:relative;">' +
                '<div style="display:flex;gap:4px;align-items:center;">' +
                '<div style="flex-grow:1; position:relative;">' +
                '<input class="opr-inp vendor-search-input" data-field="sap_code_vendor" type="text" ' +
                'value="' + gAttr(v.sap_code_vendor || '') + '" ' +
                'placeholder="Ketik/Cari vendor..." ' +
                'style="background:#fff; min-width:100px;" autocomplete="off">' +
                '<div class="autocomplete-results" style="display:none;"></div>' +
                '</div>' +
                '<button type="button" class="btn btn-sm btn-outline-primary mb-0 px-2" ' +
                'style="white-space:nowrap;font-size:.7rem;height:28px;border-radius:6px;" ' +
                'onclick="openVendorPickerFor(this)">' +
                '<i class="fas fa-search"></i>' +
                '</button>' +
                '</div>' +
                '</td>' +
                '<td style="background:#fffde7;">' +
                '<input class="opr-inp" data-field="vendor_name" type="text" ' +
                'value="' + gAttr(v.vendor_name || '') + '" ' +
                'placeholder="Nama vendor" readonly ' +
                'style="background:#f5f5f5;color:#555;min-width:160px;">' +
                '</td>' +
                '<td style="background:#fffde7;min-width:120px;">' +
                '<input class="opr-inp price-format" data-field="price" type="text" ' +
                'value="' + (v.price ? gFmt(v.price) : '') + '" placeholder="0,00">' +
                '</td>' +
                '<td style="background:#fffde7;"><input class="opr-inp" data-field="delivery_date" type="date" value="' + gAttr(v.delivery_date || '') + '"></td>' +
                '</tr>'
            );
        });
        tbody.innerHTML = rows.join('');
        document.querySelectorAll('#tblInputOPR-tbody [data-field="delivery_date"]').forEach(function(inp) {
            inp.addEventListener('change', function() {
                var val = this.value;
                if (!val) return;
                document.querySelectorAll('#tblInputOPR-tbody [data-field="delivery_date"]').forEach(function(other) {
                    if (other !== inp) {
                        other.value = val;
                    }
                });
            });
        });

        setTimeout(function() {
            document.querySelectorAll('#tblInputOPR-tbody tr').forEach(function(row) {
                fillHistoryAndAutofill(row, true);
            });
        }, 100);

        _oprClosedByStep2 = true;
        var m1 = bootstrap.Modal.getInstance(g('modalOutstandingPR'));
        if (m1) m1.hide();
        setTimeout(function() {
            new bootstrap.Modal(g('modalInputOPR')).show();
        }, 300);
    }

    function oprBackToMain() {
        var m = bootstrap.Modal.getInstance(g('modalInputOPR'));
        if (m) m.hide();
        setTimeout(function() {
            new bootstrap.Modal(g('modalOutstandingPR')).show();
        }, 300);
    }

    function oprSubmit() {
        console.log('=== oprSubmit ===');
        console.log('OPR_PENDING_ITEMS:', OPR_PENDING_ITEMS);

        var allRows = document.querySelectorAll('#tblInputOPR-tbody tr');
        console.log('Rows found:', allRows.length);

        var items = [];
        var valid = true;

        OPR_PENDING_ITEMS.forEach(function(v, i) {
            var row = null;
            allRows.forEach(function(r) {
                if (r.getAttribute('data-idx') === String(i)) row = r;
            });

            console.log('Processing idx:', i, '| row found:', !!row);

            if (!row) return;

            var qtyRaw = row.querySelector('[data-field="quantity"]').value.trim();
            var qty = getRawPrice(qtyRaw);
            var maxQty = parseFloat(v.quantity || 0);
            var sapVendor = row.querySelector('[data-field="sap_code_vendor"]').value.trim();
            var vendorName = row.querySelector('[data-field="vendor_name"]').value.trim();
            var priceRaw = row.querySelector('[data-field="price"]').value.trim();
            var priceValue = getRawPrice(priceRaw);
            var delivery = row.querySelector('[data-field="delivery_date"]').value.trim();

            console.log('Values:', {
                sapVendor,
                vendorName,
                priceValue,
                delivery
            });

            function setInv(field, inv) {
                var inp = row.querySelector('[data-field="' + field + '"]');
                if (inp) inv ? inp.classList.add('is-invalid') : inp.classList.remove('is-invalid');
            }

            var rowValid = true;

            if (isNaN(qty) || qty <= 0) {
                setInv('quantity', true);
                rowValid = false;
            } else if (qty > maxQty) {
                setInv('quantity', true);
                Swal.fire(
                    'Validasi Gagal',
                    'Quantity tidak boleh melebihi sisa (' + gFmt(maxQty) + ') pada ' + v.no_pr + '-' + v.no_item,
                    'warning'
                );
                rowValid = false;
            } else {
                setInv('quantity', false);
            }

            if (!delivery || isNaN(new Date(delivery).getTime())) {
                setInv('delivery_date', true);
                rowValid = false;
            } else {
                setInv('delivery_date', false);
            }

            if (priceRaw === '' || isNaN(priceValue) || priceValue < 0) {
                setInv('price', true);
                rowValid = false;
            } else {
                setInv('price', false);
            }

            if (!rowValid) {
                valid = false;
                return;
            }

            items.push(Object.assign({}, v, {
                quantity: qty,
                price: priceValue,
                delivery_date: delivery,
                sap_code_vendor: sapVendor || null,
                vendor_name: vendorName || null,
            }));
        });

        console.log('Items to submit:', items);
        console.log('Valid:', valid);

        if (!valid) {
            Swal.fire({
                title: 'Validasi Gagal',
                text: 'Harap lengkapi semua field wajib (★) untuk setiap baris.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        if (!items.length) {
            Swal.fire({
                title: 'Tidak ada data',
                text: 'Tidak ada item yang valid untuk disimpan.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        var inputModal = bootstrap.Modal.getInstance(g('modalInputOPR'));
        if (inputModal) inputModal.hide();

        Swal.fire({
            title: 'Menyimpan...',
            html: '<i class="fas fa-spinner fa-spin me-2"></i>Mohon tunggu.',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: function() {
                Swal.showLoading();
            }
        });

        fetch("{{ route('lsospr.storeBatch') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                },
                body: JSON.stringify({
                    items: items
                })
            })
            .then(function(r) {
                return r.json().then(function(j) {
                    if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                    return j;
                });
            })
            .then(function(res) {
                var errs = res.errors || [];
                var errHtml = errs.length ?
                    '<div class="alert alert-warning text-start py-2 px-3 mt-2" style="font-size:.79rem;border-radius:8px;">' +
                    '<strong>' + errs.length + ' data gagal:</strong><ul class="mb-0 mt-1 ps-3">' +
                    errs.slice(0, 5).map(function(e) {
                        return '<li>' + gEsc(e) + '</li>';
                    }).join('') +
                    (errs.length > 5 ? '<li>...dan ' + (errs.length - 5) + ' lainnya</li>' : '') +
                    '</ul></div>' : '';
                Swal.fire({
                    title: errs.length ? 'Selesai (ada peringatan)' : '<i class="fas fa-check-circle text-success me-1"></i>Berhasil!',
                    html: '<p>' + gEsc(res.message) + '</p>' +
                        '<div class="d-flex gap-2 justify-content-center mt-2">' +
                        '<div class="p-2 rounded text-center" style="background:#d4edda;min-width:90px;">' +
                        '<small>Tersimpan</small><br>' +
                        '<strong class="text-success" style="font-size:1.2rem;">' + (res.inserted || 0) + '</strong>' +
                        '</div></div>' + errHtml,
                    icon: errs.length ? 'warning' : 'success',
                    confirmButtonColor: '#028284',
                    confirmButtonText: '<i class="fas fa-sync-alt me-1"></i>OK, Muat Ulang'
                }).then(function() {
                    location.reload();
                });
            })
            .catch(function(err) {
                Swal.fire({
                    title: 'Gagal',
                    text: err.message,
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            });
    }

    /* ════════════════════════════════════════════════════════════
       READY PO — STEP 2 (review + input per-row)
    ════════════════════════════════════════════════════════════ */
    var RPO_PENDING_ITEMS = [];
    var RPO_HEADER_MAP = {};

    function rpoOpenInput() {
        var keys = Object.keys(GEN.rpo.selected).filter(function(k) {
            return GEN.rpo.selected[k];
        });
        if (!keys.length) return;

        var el = g('rpo-inputCount');
        if (el) el.textContent = keys.length;

        RPO_PENDING_ITEMS = [];
        RPO_HEADER_MAP = {};
        keys.forEach(function(k) {
            var v = GEN.rpo.all.find(function(x) {
                return String(x._key) === String(k);
            });
            if (v) RPO_PENDING_ITEMS.push(v);
        });

        console.log('RPO_PENDING_ITEMS:', RPO_PENDING_ITEMS);

        rpoRenderInputTable();

        _rpoClosedByStep2 = true;
        var m1 = bootstrap.Modal.getInstance(g('modalReadyPO'));
        if (m1) m1.hide();
        setTimeout(function() {
            new bootstrap.Modal(g('modalInputRPO')).show();
        }, 300);
    }

    function rpoRenderInputTable() {
        var tbody = g('tblInputRPO-tbody');
        if (!tbody) return;

        // ── Simpan nilai header yang sudah diketik (jika re-render) ──
        document.querySelectorAll('#tblInputRPO-tbody .rpo-header-ta').forEach(function(ta) {
            var vk = ta.getAttribute('data-vendor-key');
            if (vk != null) RPO_HEADER_MAP[vk] = ta.value;
        });

        // Buat urutan grup vendor (pertahankan urutan kemunculan pertama)
        var vendorOrder = [];
        var vendorGroups = {};

        RPO_PENDING_ITEMS.forEach(function(v, i) {
            var vk = (v._currentVendor != null) ? v._currentVendor : (v.sap_code_vendor || '__NOVENDOR__');
            if (!vendorGroups[vk]) {
                vendorGroups[vk] = [];
                vendorOrder.push(vk);
            }
            vendorGroups[vk].push({
                item: v,
                idx: i
            });
        });

        var rows = [];

        vendorOrder.forEach(function(vk) {
            var group = vendorGroups[vk];
            var groupSize = group.length;

            group.forEach(function(entry, groupIdx) {
                var v = entry.item;
                var i = entry.idx;
                var isFirst = groupIdx === 0;
                var isExists = v._status === 'exists';
                var statusBadge = isExists ?
                    '<span class="b-exists" style="font-size:.67rem;">Update</span>' :
                    '<span class="b-new"    style="font-size:.67rem;">Insert</span>';

                // Kolom Header — hanya muncul di baris pertama per grup (rowspan)
                var headerTd = '';
                if (isFirst) {
                    var savedHeader = RPO_HEADER_MAP[vk] != null ?
                        RPO_HEADER_MAP[vk] :
                        (v.header || '');
                    headerTd =
                        '<td class="td-header-merge" rowspan="' + groupSize + '">' +
                        '<textarea class="rpo-header-ta" ' +
                        'data-field="header" ' +
                        'data-vendor-key="' + gAttr(vk) + '" ' +
                        'rows="' + Math.max(3, groupSize * 2) + '" ' +
                        'placeholder="Catatan/header untuk vendor ini (berlaku untuk semua item vendor yang sama)...">' +
                        gEsc(savedHeader) +
                        '</textarea>' +
                        '<div style="font-size:.65rem;color:#856404;margin-top:4px;">' +
                        '<i class="fas fa-info-circle me-1"></i>' +
                        'Berlaku untuk <strong>' + groupSize + '</strong> item vendor ini.' +
                        '</div>' +
                        '</td>';
                }
                // Jika bukan baris pertama, TIDAK tambahkan <td> header (karena rowspan)

                rows.push(
                    '<tr data-idx="' + i + '" data-vendor-key="' + gAttr(vk) + '">' +
                    '<td style="text-align:center;">' + (i + 1) + '</td>' +
                    '<td>' + statusBadge + '</td>' +
                    '<td><strong>' + gEsc(v.no_pr) + '</strong></td>' +
                    '<td>' + gEsc(v.no_item) + '</td>' +
                    '<td>' + gEsc(v.material_code) + '</td>' +
                    '<td class="td-trunc" title="' + gAttr(v.item_name) + '">' + gEsc(v.item_name) + '</td>' +
                    '<td style="background:#fffde7;min-width:90px;">' +
                    '<input class="rpo-inp price-format" data-field="quantity" type="text" ' +
                    'value="' + (v.quantity ? gFmt(v.quantity) : '') + '" ' +
                    'style="min-width:80px;">' +
                    '</td>' +

                    /* SAP Code Vendor + picker button */
                    '<td style="background:#fffde7; position:relative;">' +
                    '<div style="display:flex;gap:4px;align-items:center;">' +
                    '<div style="flex-grow:1; position:relative;">' +
                    '<input class="rpo-inp vendor-search-input" data-field="sap_code_vendor" type="text" ' +
                    'value="' + gAttr(v.sap_code_vendor || '') + '" ' +
                    'placeholder="Ketik/Cari vendor..." ' +
                    'style="background:#fff; min-width:100px;" autocomplete="off">' +
                    '<div class="autocomplete-results" style="display:none;"></div>' +
                    '</div>' +
                    '<button type="button" class="btn btn-sm btn-outline-primary mb-0 px-2" ' +
                    'style="white-space:nowrap;font-size:.7rem;height:28px;border-radius:6px;" ' +
                    'onclick="openVendorPickerFor(this)">' +
                    '<i class="fas fa-search"></i>' +
                    '</button>' +
                    '</div>' +
                    '</td>' +

                    /* Vendor Name (readonly) */
                    '<td style="background:#fffde7;">' +
                    '<input class="rpo-inp" data-field="vendor_name" type="text" ' +
                    'value="' + gAttr(v.vendor_name || '') + '" ' +
                    'placeholder="Nama vendor" readonly ' +
                    'style="background:#f5f5f5;color:#555;min-width:160px;">' +
                    '</td>' +

                    /* Price */
                    '<td style="background:#fffde7;min-width:120px;">' +
                    '<input class="rpo-inp price-format" data-field="price" type="text" ' +
                    'value="' + (v.price ? gFmt(v.price) : '') + '" placeholder="0,00">' +
                    '</td>' +

                    /* Delivery Date */
                    '<td style="background:#fffde7;">' +
                    '<input class="rpo-inp" data-field="delivery_date" type="date" ' +
                    'value="' + gAttr(v.delivery_date || '') + '">' +
                    '</td>' +

                    headerTd + // kosong string jika bukan baris pertama grup
                    '</tr>'
                );
            });
        });

        tbody.innerHTML = rows.join('');

        // ── Re-attach delivery date sync listener ──
        document.querySelectorAll('#tblInputRPO-tbody [data-field="delivery_date"]').forEach(function(inp) {
            inp.addEventListener('change', function() {
                var val = this.value;
                if (!val) return;
                document.querySelectorAll('#tblInputRPO-tbody [data-field="delivery_date"]').forEach(function(other) {
                    if (other !== inp) other.value = val;
                });
            });
        });

        // ── Listener: jika vendor diketik manual (bukan via picker), update _currentVendor & re-render ──
        document.querySelectorAll('#tblInputRPO-tbody [data-field="sap_code_vendor"]').forEach(function(inp) {
            inp.addEventListener('change', function() {
                var row = this.closest('tr');
                if (!row) return;
                var idx = parseInt(row.getAttribute('data-idx'));
                if (isNaN(idx) || !RPO_PENDING_ITEMS[idx]) return;
                var newVendor = this.value.trim() || '__NOVENDOR__';
                RPO_PENDING_ITEMS[idx]._currentVendor = newVendor;
                RPO_PENDING_ITEMS[idx].sap_code_vendor = this.value.trim();
                // vendor_name diambil dari kolom sebelahnya
                var vnInp = row.querySelector('[data-field="vendor_name"]');
                if (vnInp) RPO_PENDING_ITEMS[idx].vendor_name = vnInp.value.trim();
                rpoRenderInputTable(); // re-render dengan grouping baru
            });
        });

        setTimeout(function() {
            document.querySelectorAll('#tblInputRPO-tbody tr').forEach(function(row) {
                var rawPrice = getRawPrice($(row).find('[data-field="price"]').val() || '0');
                if (!rawPrice || rawPrice <= 0) {
                    fillHistoryAndAutofill(row, true);
                }
            });
        }, 100);
    }

    function rpoBackToMain() {
        var m = bootstrap.Modal.getInstance(g('modalInputRPO'));
        if (m) m.hide();
        setTimeout(function() {
            new bootstrap.Modal(g('modalReadyPO')).show();
        }, 300);
    }

    function rpoSubmit() {
        console.log('=== rpoSubmit ===');

        document.querySelectorAll('#tblInputRPO-tbody .rpo-header-ta').forEach(function(ta) {
            var vk = ta.getAttribute('data-vendor-key');
            if (vk != null) RPO_HEADER_MAP[vk] = ta.value;
        });

        var allRows = document.querySelectorAll('#tblInputRPO-tbody tr');
        var items = [];
        var valid = true;

        RPO_PENDING_ITEMS.forEach(function(v, i) {
            var row = null;
            allRows.forEach(function(r) {
                if (r.getAttribute('data-idx') === String(i)) row = r;
            });
            if (!row) return;

            var qtyInp = row.querySelector('[data-field="quantity"]');
            var qty = qtyInp ? getRawPrice(qtyInp.value.trim()) : v.quantity;
            var sapVendor = row.querySelector('[data-field="sap_code_vendor"]').value.trim();
            var vendorName = row.querySelector('[data-field="vendor_name"]').value.trim();
            var priceRaw = row.querySelector('[data-field="price"]').value.trim();
            var priceValue = getRawPrice(priceRaw);
            var delivery = row.querySelector('[data-field="delivery_date"]').value.trim();

            var vk = row.getAttribute('data-vendor-key') || '__NOVENDOR__';
            var headerValue = (RPO_HEADER_MAP[vk] != null) ? RPO_HEADER_MAP[vk].trim() : '';

            function setInv(field, inv) {
                var inp = row.querySelector('[data-field="' + field + '"]');
                if (inp) inv ? inp.classList.add('is-invalid') : inp.classList.remove('is-invalid');
            }

            var rowValid = true;

            if (!delivery || isNaN(new Date(delivery).getTime())) {
                setInv('delivery_date', true);
                rowValid = false;
            } else {
                setInv('delivery_date', false);
            }

            if (priceRaw === '' || isNaN(priceValue) || priceValue < 0) {
                setInv('price', true);
                rowValid = false;
            } else {
                setInv('price', false);
            }

            if (!rowValid) {
                valid = false;
                return;
            }

            items.push({
                id: v.id,
                quantity: isNaN(qty) ? v.quantity : qty,
                sap_code_vendor: sapVendor || null,
                vendor_name: vendorName || null,
                price: priceValue,
                delivery_date: delivery,
                header: headerValue || null,
            });
        });

        if (!valid) {
            Swal.fire({
                title: 'Validasi Gagal',
                text: 'Harap periksa field Delivery Date dan Price untuk setiap baris.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        if (!items.length) {
            Swal.fire({
                title: 'Tidak ada data',
                text: 'Tidak ada item yang valid untuk disimpan.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        var inputModal = bootstrap.Modal.getInstance(g('modalInputRPO'));
        if (inputModal) inputModal.hide();

        Swal.fire({
            title: 'Menyimpan...',
            html: '<i class="fas fa-spinner fa-spin me-2"></i>Mohon tunggu.',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: function() {
                Swal.showLoading();
            }
        });

        fetch("{{ route('lsospr.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                },
                body: JSON.stringify({
                    items: items
                })
            })
            .then(function(r) {
                return r.json().then(function(j) {
                    if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                    return j;
                });
            })
            .then(function(res) {
                var errs = res.errors || [];
                var errHtml = errs.length ?
                    '<div class="alert alert-warning text-start py-2 px-3 mt-2" style="font-size:.79rem;border-radius:8px;">' +
                    '<strong>' + errs.length + ' data gagal:</strong><ul class="mb-0 mt-1 ps-3">' +
                    errs.slice(0, 5).map(function(e) {
                        return '<li>' + gEsc(e) + '</li>';
                    }).join('') +
                    (errs.length > 5 ? '<li>...dan ' + (errs.length - 5) + ' lainnya</li>' : '') +
                    '</ul></div>' :
                    '';
                Swal.fire({
                    title: errs.length ?
                        'Selesai (ada peringatan)' : '<i class="fas fa-check-circle text-success me-1"></i>Berhasil!',
                    html: '<p>' + gEsc(res.message) + '</p>' +
                        '<div class="d-flex gap-2 justify-content-center mt-2">' +
                        '<div class="p-2 rounded text-center" style="background:#fff3cd;min-width:90px;">' +
                        '<small>Generated</small><br>' +
                        '<strong class="text-warning" style="font-size:1.2rem;">' + (res.updated || 0) + '</strong>' +
                        '</div></div>' + errHtml,
                    icon: errs.length ? 'warning' : 'success',
                    confirmButtonColor: '#028284',
                    confirmButtonText: '<i class="fas fa-sync-alt me-1"></i>OK, Muat Ulang'
                }).then(function() {
                    location.reload();
                });
            })
            .catch(function(err) {
                Swal.fire({
                    title: 'Gagal',
                    text: err.message,
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            });
    }

    /* ════════════════════════════════════════════════════════════
       RESET
    ════════════════════════════════════════════════════════════ */
    function genReset(ns) {
        GEN[ns].all = [];
        GEN[ns].filtered = [];
        GEN[ns].selected = {};
        GEN[ns].filter = 'all';
        GEN[ns].search = '';
        GEN[ns].page = 1;
        [ns + '-summaryBar', ns + '-filterRow', ns + '-tableScroll', ns + '-pagRow', ns + '-errBox']
        .forEach(function(id) {
            gShow(id, false);
        });
        gShow(ns + '-loading', false);
        gShow(ns + '-emptyState', false);
        var tb = g(ns + '-tbody');
        if (tb) tb.innerHTML = '';
        var sb = g(ns + '-search');
        if (sb) sb.value = '';
        var btn = g(ns + '-btnLanjut');
        if (btn) btn.disabled = true;
        var sc = g(ns + '-selCount');
        if (sc) sc.style.display = 'none';
        var si = g(ns + '-selInfo');
        if (si) {
            var msg = ns === 'opr' ? 'Pilih data yang ingin dimasukkan ke Outstanding PR.' : 'Pilih data yang ingin di-generate ke Ready PO.';
            si.innerHTML = '<i class="fas fa-info-circle me-1"></i>' + msg;
            si.className = 'sel-info me-auto';
        }
        document.querySelectorAll('.gen-filter-btn[data-ns="' + ns + '"]').forEach(function(b) {
            b.classList.remove('active');
        });
        var ab = document.querySelector('.gen-filter-btn[data-ns="' + ns + '"][data-filter="all"]');
        if (ab) ab.classList.add('active');
        var sa = g(ns + '-selectAll');
        if (sa) {
            sa.checked = false;
            sa.indeterminate = false;
        }
    }

    /* ════════════════════════════════════════════════════════════
   VENDOR PICKER
════════════════════════════════════════════════════════════ */
    var _vendorPickerTriggerBtn = null; // tombol yang membuka picker
    var _vendorPickerCache = null; // cache semua vendor
    var _vendorPickerTimer = null; // debounce timer
    var _parentModalInstance = null; // simpan parent modal untuk di-restore
    var _vendorPickerTargetIdx = null;

    function openVendorPickerFor(triggerBtn) {
        _vendorPickerTriggerBtn = triggerBtn;

        var row = triggerBtn.closest('tr');
        _vendorPickerTargetIdx = row ? parseInt(row.getAttribute('data-idx')) : null;

        var parentModalEl = triggerBtn.closest('.modal');
        if (parentModalEl) {
            _parentModalInstance = bootstrap.Modal.getInstance(parentModalEl);
            if (_parentModalInstance) _parentModalInstance.hide();
        }

        setTimeout(function() {
            var vendorPickerModal = document.getElementById('modalVendorPicker');
            if (!vendorPickerModal) return;

            function onModalShown() {
                var searchInput = document.getElementById('vendorPickerSearch');
                if (searchInput) searchInput.value = '';
                var errBox = document.getElementById('vendorPickerErr');
                if (errBox) errBox.style.display = 'none';
                var infoDiv = document.getElementById('vendorPickerInfo');
                if (infoDiv) infoDiv.textContent = '';
                var tbody = document.getElementById('tblVendorPicker-tbody');

                if (_vendorPickerCache) {
                    vendorPickerRender(_vendorPickerCache);
                } else {
                    if (tbody) tbody.innerHTML = '<tr><td colspan="3" class="text-center py-3"><small style="color:#888;">Memuat data...</small></td></tr>';
                    vendorPickerFetch('');
                }
                vendorPickerModal.removeEventListener('shown.bs.modal', onModalShown);
            }

            vendorPickerModal.addEventListener('shown.bs.modal', onModalShown);
            new bootstrap.Modal(vendorPickerModal).show();
        }, 300);
    }

    function vendorPickerSearch(val) {
        var vendorPickerModal = document.getElementById('modalVendorPicker');
        if (!vendorPickerModal) {
            console.error('Vendor picker modal not found');
            return;
        }

        clearTimeout(_vendorPickerTimer);
        _vendorPickerTimer = setTimeout(function() {
            vendorPickerFetch(val);
        }, 300);
    }

    function vendorPickerFetch(search) {
        // Selalu ambil elemen fresh — jangan cache di variable lokal
        var loading = document.getElementById('vendorPickerLoading');
        var errBox = document.getElementById('vendorPickerErr');
        var tbody = document.getElementById('tblVendorPicker-tbody');

        console.log('vendorPickerFetch | loading:', !!loading, '| errBox:', !!errBox, '| tbody:', !!tbody);

        // Tidak ada retry loop — kalau element tidak ada, berarti modal belum siap
        // Ini seharusnya tidak terjadi karena dipanggil dari shown.bs.modal
        if (!loading || !errBox || !tbody) {
            console.error('Elemen vendor picker tidak ditemukan. Modal mungkin belum fully shown.');
            return;
        }

        loading.style.display = 'block';
        errBox.style.display = 'none';
        tbody.innerHTML = '';

        fetch("{{ route('lsospr.vendorList') }}?search=" + encodeURIComponent(search || ''), {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                }
            })
            .then(function(r) {
                return r.json();
            })
            .then(function(res) {
                document.getElementById('vendorPickerLoading').style.display = 'none';

                if (!res.success) throw new Error(res.message || 'Gagal memuat vendor.');

                if (!res.data || !res.data.length) {
                    var eb = document.getElementById('vendorPickerErr');
                    var em = document.getElementById('vendorPickerErrMsg');
                    if (eb) eb.style.display = 'block';
                    if (em) em.textContent = 'Tidak ada data vendor.';
                    return;
                }

                _vendorPickerCache = res.data;
                vendorPickerRender(res.data);
            })
            .catch(function(err) {
                console.error('Vendor fetch error:', err.message);
                var ld = document.getElementById('vendorPickerLoading');
                var eb = document.getElementById('vendorPickerErr');
                var em = document.getElementById('vendorPickerErrMsg');
                if (ld) ld.style.display = 'none';
                if (eb) eb.style.display = 'block';
                if (em) em.textContent = err.message;
            });
    }

    function vendorPickerRender(list) {
        var tbody = document.getElementById('tblVendorPicker-tbody');
        var info = document.getElementById('vendorPickerInfo');

        console.log('vendorPickerRender called with', list.length, 'vendors');

        if (!tbody) {
            console.error('tblVendorPicker-tbody not found');
            return;
        }

        if (!list || !list.length) {
            tbody.innerHTML =
                '<tr><td colspan="3" class="text-center py-3 text-muted">' +
                '<i class="fas fa-inbox me-1"></i>Tidak ada vendor ditemukan.</td></tr>';
            if (info) info.textContent = '';
            return;
        }

        var rows = list.map(function(v, idx) {
            console.log('Rendering vendor:', v.sap_code_vendor, '-', v.name);
            return '<tr style="cursor:pointer;" data-vendor-idx="' + idx + '" onclick="vendorPickerSelect(' + idx + ')">' +
                '<td style="text-align:center;">' +
                '<button type="button" class="btn btn-sm btn-primary mb-0 px-3" ' +
                'style="font-size:.7rem;height:26px;border-radius:6px;line-height:1;" ' +
                'data-vendor-idx="' + idx + '" ' +
                'onclick="event.stopPropagation();vendorPickerSelect(' + idx + ')">' +
                '<i class="fas fa-check me-1"></i>Select' +
                '</button>' +
                '</td>' +
                '<td><strong>' + gEsc(v.sap_code_vendor) + '</strong></td>' +
                '<td>' + gEsc(v.name) + '</td>' +
                '</tr>';
        });

        tbody.innerHTML = rows.join('');
        console.log('Rendered', rows.length, 'rows');
        if (info) info.textContent = 'Menampilkan ' + list.length + ' vendor.';
    }

    function vendorPickerSelect(vendorIdx) {
        if (!_vendorPickerCache || !_vendorPickerCache[vendorIdx]) {
            console.error('Vendor not found at index', vendorIdx);
            return;
        }

        var vendor = _vendorPickerCache[vendorIdx];
        var sapCode = vendor.sap_code_vendor;
        var vendorName = vendor.name;
        var savedIdx = _vendorPickerTargetIdx; // Store immediately before modal.hide() triggers event that sets _vendorPickerTargetIdx to null

        // Sync ke RPO_PENDING_ITEMS jika ada idx yang valid
        if (savedIdx !== null && RPO_PENDING_ITEMS[savedIdx]) {
            var newVk = sapCode || '__NOVENDOR__';
            RPO_PENDING_ITEMS[savedIdx]._currentVendor = newVk;
            RPO_PENDING_ITEMS[savedIdx].sap_code_vendor = sapCode || '';
            RPO_PENDING_ITEMS[savedIdx].vendor_name = vendorName || '';
        }

        // Sync ke OPR_PENDING_ITEMS jika ada
        if (savedIdx !== null && OPR_PENDING_ITEMS[savedIdx]) {
            OPR_PENDING_ITEMS[savedIdx].sap_code_vendor = sapCode || '';
            OPR_PENDING_ITEMS[savedIdx].vendor_name = vendorName || '';
        }

        // Tutup modal picker
        var vendorPickerModal = document.getElementById('modalVendorPicker');
        var modal = vendorPickerModal ? bootstrap.Modal.getInstance(vendorPickerModal) : null;
        if (document.activeElement && typeof document.activeElement.blur === 'function') {
            document.activeElement.blur();
        }
        if (modal) modal.hide();

        setTimeout(function() {
            // Restore parent modal
            if (_parentModalInstance) {
                _parentModalInstance.show();
                _parentModalInstance = null;
            }

            // Jika di tabel RPO → re-render lalu set nilai ke row yang benar
            if (_vendorPickerTriggerBtn && _vendorPickerTriggerBtn.closest('#tblInputRPO')) {
                rpoRenderInputTable();
                setTimeout(function() {
                    var freshRow = document.querySelector('#tblInputRPO-tbody tr[data-idx="' + savedIdx + '"]');
                    if (freshRow) {
                        var inpCode = freshRow.querySelector('[data-field="sap_code_vendor"]');
                        var inpName = freshRow.querySelector('[data-field="vendor_name"]');
                        if (inpCode) inpCode.value = sapCode || '';
                        if (inpName) inpName.value = vendorName || '';
                        fillPriceFromHistory(freshRow);
                    }
                }, 80);
                return;
            }

            // Jika di tabel OPR → langsung set nilai ke row
            if (_vendorPickerTriggerBtn && _vendorPickerTriggerBtn.closest('#tblInputOPR')) {
                var oprRow = document.querySelector('#tblInputOPR-tbody tr[data-idx="' + savedIdx + '"]');
                if (oprRow) {
                    var inpCode = oprRow.querySelector('[data-field="sap_code_vendor"]');
                    var inpName = oprRow.querySelector('[data-field="vendor_name"]');
                    if (inpCode) inpCode.value = sapCode || '';
                    if (inpName) inpName.value = vendorName || '';
                    fillPriceFromHistory(oprRow);
                }
                return;
            }

            // Fallback: tabel utama (inline edit)
            if (_vendorPickerTriggerBtn) {
                var mainRow = _vendorPickerTriggerBtn.closest('tr');
                if (mainRow) {
                    var inpCode = mainRow.querySelector('[data-field="sap_code_vendor"], .inline-vendor-input');
                    var inpName = mainRow.querySelector('[data-field="vendor_name"]');
                    if (inpCode) inpCode.value = sapCode || '';
                    if (inpName) inpName.value = vendorName || '';
                    var matCode = (mainRow.querySelectorAll('td')[5] || {}).textContent || '';
                    if (matCode.trim()) fetchInlineHistory(mainRow, matCode.trim(), sapCode, false);
                }
            }
        }, 300);
    }

    $(document).on('blur', '.vendor-search-input', function() {
        let row = $(this).closest('tr');
        setTimeout(() => {
            let currentVal = $(this).val();
            if (currentVal.length > 3) {
                fillPriceFromHistory(row);
            }
        }, 300);
    });

    function fillHistoryAndAutofill(rowElement, fillVendor) {
        // Normalkan ke plain DOM element
        var rowEl = (rowElement instanceof jQuery) ? rowElement[0] : rowElement;
        var row = $(rowEl);
        var idx = parseInt(rowEl.getAttribute('data-idx'));

        if (isNaN(idx)) return;

        // Deteksi tabel
        var tableEl = rowEl.closest('table');
        var tableId = tableEl ? tableEl.id : '';
        var materialCode = null;

        if (tableId === 'tblInputOPR' && OPR_PENDING_ITEMS[idx]) {
            materialCode = OPR_PENDING_ITEMS[idx].material_code;
        } else if (tableId === 'tblInputRPO' && RPO_PENDING_ITEMS[idx]) {
            materialCode = RPO_PENDING_ITEMS[idx].material_code;
        }

        if (!materialCode) {
            console.warn('fillHistoryAndAutofill: materialCode not found for idx', idx, 'tableId', tableId);
            return;
        }

        var sapVendor = row.find('[data-field="sap_code_vendor"]').val() || '';
        var url = "{{ route('lsospr.historyPO') }}?material_code=" + encodeURIComponent(materialCode);
        if (sapVendor) url += "&sap_code_vendor=" + encodeURIComponent(sapVendor);

        console.log('fillHistoryAndAutofill | idx:', idx, '| material:', materialCode, '| vendor:', sapVendor, '| fillVendor:', fillVendor);

        fetch(url, {
                headers: {
                    'Accept': 'application/json'
                }
            })
            .then(function(r) {
                return r.json();
            })
            .then(function(res) {
                console.log('History PO response:', res);
                if (!res.success) return;

                var priceInp = row.find('[data-field="price"]');
                var codeInp = row.find('[data-field="sap_code_vendor"]');
                var nameInp = row.find('[data-field="vendor_name"]');

                if (fillVendor && !codeInp.val() && res.sap_code_vendor) {
                    codeInp.val(res.sap_code_vendor);
                    nameInp.val(res.vendor_name || '');

                    if (tableId === 'tblInputRPO' && RPO_PENDING_ITEMS[idx]) {
                        RPO_PENDING_ITEMS[idx].sap_code_vendor = res.sap_code_vendor;
                        RPO_PENDING_ITEMS[idx].vendor_name = res.vendor_name || '';
                        RPO_PENDING_ITEMS[idx]._currentVendor = res.sap_code_vendor;
                    }
                    if (tableId === 'tblInputOPR' && OPR_PENDING_ITEMS[idx]) {
                        OPR_PENDING_ITEMS[idx].sap_code_vendor = res.sap_code_vendor;
                        OPR_PENDING_ITEMS[idx].vendor_name = res.vendor_name || '';
                    }

                    codeInp.css('background-color', '#d4edda');
                    nameInp.css('background-color', '#d4edda');
                    setTimeout(function() {
                        codeInp.css('background-color', '');
                        nameInp.css('background-color', '');
                    }, 1500);
                }

                if (res.price > 0) {
                    var formatted = new Intl.NumberFormat('id-ID', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }).format(res.price);
                    priceInp.val(formatted);
                    priceInp.css('background-color', '#d4edda');
                    setTimeout(function() {
                        priceInp.css('background-color', '#fffde7');
                    }, 1500);
                }
            })
            .catch(function(err) {
                console.error("History PO error:", err);
            });
    }

    function fillPriceFromHistory(rowElement) {
        fillHistoryAndAutofill(rowElement, false);
    }

    document.getElementById('modalVendorPicker').addEventListener('hidden.bs.modal', function() {
        if (_parentModalInstance) {
            _parentModalInstance.show();
            _parentModalInstance = null;
        }
        _vendorPickerTargetIdx = null;
    });

    $(document).on('keydown', '.vendor-search-input', function(e) {
        let container = $(this).siblings('.autocomplete-results');
        let items = container.find('.autocomplete-item');
        let active = container.find('.autocomplete-item.active');
        let index = items.index(active);

        if (e.key === "ArrowDown") {
            e.preventDefault();
            if (items.length > 0) {
                index++;
                if (index >= items.length) index = 0;
                items.removeClass('active');
                let current = items.eq(index);
                current.addClass('active');

                current[0].scrollIntoView({
                    block: 'nearest',
                    behavior: 'smooth'
                });
            }
        } else if (e.key === "ArrowUp") {
            e.preventDefault();
            if (items.length > 0) {
                index--;
                if (index < 0) index = items.length - 1;
                items.removeClass('active');
                let current = items.eq(index);
                current.addClass('active');

                current[0].scrollIntoView({
                    block: 'nearest',
                    behavior: 'smooth'
                });
            }
        } else if (e.key === "Enter") {
            if (active.length > 0) {
                e.preventDefault();
                active.click();
            }
        }
    });

    $(document).on('keyup', '.vendor-search-input', function(e) {
        if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) return;

        let input = $(this);
        let query = input.val();
        let resultContainer = input.siblings('.autocomplete-results');

        if (query.length < 2) {
            resultContainer.hide();
            return;
        }

        $.ajax({
            url: "{{ route('lsospr.vendorList') }}",
            data: {
                search: query
            },
            success: function(res) {
                if (res.success && res.data.length > 0) {
                    let html = '';
                    res.data.forEach((v, i) => {
                        // Beri class active pada item pertama secara default (opsional)
                        let activeClass = (i === 0) ? 'active' : '';
                        html += `<div class="autocomplete-item ${activeClass}" data-code="${v.sap_code_vendor}" data-name="${v.name}">
                                <strong>${v.sap_code_vendor}</strong> - ${v.name}
                             </div>`;
                    });
                    resultContainer.html(html).show();
                } else {
                    resultContainer.hide();
                }
            }
        });
    });

    $(document).on('click', '.autocomplete-item', function() {
        var code = $(this).data('code');
        var name = $(this).data('name');
        var container = $(this).closest('.autocomplete-results');
        var row = $(this).closest('tr');

        // Set ke field sap_code_vendor dan vendor_name di baris yang sama
        row.find('[data-field="sap_code_vendor"]').val(code);
        row.find('[data-field="vendor_name"]').val(name).attr('title', name);
        container.hide();

        var idxAttr = parseInt(row.attr('data-idx'));

        // Sync ke RPO_PENDING_ITEMS
        if (!isNaN(idxAttr) && RPO_PENDING_ITEMS[idxAttr]) {
            var newVk = code || '__NOVENDOR__';
            RPO_PENDING_ITEMS[idxAttr]._currentVendor = newVk;
            RPO_PENDING_ITEMS[idxAttr].sap_code_vendor = code || '';
            RPO_PENDING_ITEMS[idxAttr].vendor_name = name || '';
            rpoRenderInputTable();
            setTimeout(function() {
                var freshRow = document.querySelector('#tblInputRPO-tbody tr[data-idx="' + idxAttr + '"]');
                if (freshRow) {
                    // Set ulang setelah re-render
                    var inpCode = freshRow.querySelector('[data-field="sap_code_vendor"]');
                    var inpName = freshRow.querySelector('[data-field="vendor_name"]');
                    if (inpCode) inpCode.value = code || '';
                    if (inpName) inpName.value = name || '';
                    fillPriceFromHistory(freshRow);
                }
            }, 80);
            return;
        }

        // Sync ke OPR_PENDING_ITEMS
        if (!isNaN(idxAttr) && OPR_PENDING_ITEMS[idxAttr]) {
            OPR_PENDING_ITEMS[idxAttr].sap_code_vendor = code || '';
            OPR_PENDING_ITEMS[idxAttr].vendor_name = name || '';
            fillPriceFromHistory(row[0]);
            return;
        }

        // Fallback tabel utama (inline)
        fillPriceFromHistory(row[0]);
    });

    // Klik di luar untuk tutup dropdown
    $(document).click(function(e) {
        if (!$(e.target).closest('.autocomplete-results, .vendor-search-input').length) {
            $('.autocomplete-results').hide();
        }
    });

    $(document).on('input', '.price-format', function() {
        // 1. Ambil semua digit angka
        let val = this.value.replace(/\D/g, '');

        // 2. Jika kosong, bersihkan input
        if (val === "") {
            this.value = "";
            return;
        }

        // 3. Logika Pencegahan Bug Backspace:
        // Jika input sudah memiliki format ",00", maka regex \D tadi 
        // akan mengambil dua nol terakhir sebagai bagian dari angka.
        // Kita buang 2 nol terakhir tersebut agar Backspace berfungsi normal.
        let isFormatted = this.value.includes(',');
        let actualNumber = isFormatted ? val.slice(0, -2) : val;

        if (actualNumber === "" || actualNumber === "0") {
            this.value = "";
            return;
        }

        // 4. Format angka utama dengan titik sebagai pemisah ribuan
        let formatted = new Intl.NumberFormat('id-ID').format(actualNumber);

        // 5. Backkan ke input dengan akhiran ,00
        this.value = formatted + ",00";

        // 6. Atur posisi kursor agar selalu di depan koma (opsional)
        let pos = this.value.length - 3;
        this.setSelectionRange(pos, pos);
    });

    // Tambahan: Cegah kursor diklik ke arah belakang desimal ,00
    $(document).on('click', '.price-format', function() {
        if (this.value.includes(',')) {
            let pos = this.value.length - 3;
            if (this.selectionStart > pos) {
                this.setSelectionRange(pos, pos);
            }
        }
    });

    function getRawPrice(formattedVal) {
        if (!formattedVal) return 0;

        // Ambil hanya bagian sebelum koma (angka utamanya saja)
        let mainPart = formattedVal.split(',')[0];

        // Hapus semua titik, lalu ubah ke angka murni
        return parseFloat(mainPart.replace(/\./g, '')) || 0;
    }

    /* ============================================================
   QUICK PULL PR — langsung sync SAP tanpa modal
============================================================ */
    function quickPullPR() {
        Swal.fire({
            title: 'Pull Outstanding PR',
            html: '<p style="font-size:.88rem;">Mengambil data SAP & menyimpan ke database <strong>tanpa preview</strong>.</p>' +
                '<p style="font-size:.82rem;color:#856404;background:#fffde7;border-radius:6px;padding:8px 12px;margin:0;">' +
                '<i class="fas fa-info-circle me-1"></i>PR baru dan partial akan disimpan.</p>',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-bolt me-1"></i> Ya, Lanjutkan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#ea580c',
        }).then(function(result) {
            if (!result.isConfirmed) return;
            Swal.fire({
                title: 'Mengambil data dari SAP...',
                html: '<i class="fas fa-spinner fa-spin me-2"></i>Mohon tunggu.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: function() {
                    Swal.showLoading();
                }
            });
            fetch("{{ route('lsospr.sync') }}", {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf()
                    }
                })
                .then(function(r) {
                    return r.json().then(function(j) {
                        if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                        return j;
                    });
                })
                .then(function(res) {
                    if (!res.success) throw new Error(res.message || 'Gagal sync.');
                    Swal.fire({
                        title: '<i class="fas fa-check-circle text-success me-1"></i>Berhasil!',
                        html: '<p>' + gEsc(res.message) + '</p>' +
                            '<div class="p-2 rounded d-inline-block mt-1" style="background:#d4edda;min-width:90px;text-align:center;">' +
                            '<small>Data Baru</small><br><strong class="text-success" style="font-size:1.3rem;">' + (res.count || 0) + '</strong></div>',
                        icon: 'success',
                        confirmButtonColor: '#028284',
                        confirmButtonText: '<i class="fas fa-sync-alt me-1"></i> OK, Muat Ulang'
                    }).then(function() {
                        location.reload();
                    });
                })
                .catch(function(err) {
                    Swal.fire({
                        title: 'Gagal',
                        text: err.message,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                });
        });
    }

    /* ============================================================
       CHECKBOX LOGIC — tabel utama
    ============================================================ */
    var _selectedRows = {};

    function tblSelectAll(masterChk) {
        document.querySelectorAll('.row-check:not([disabled])').forEach(function(chk) {
            chk.checked = masterChk.checked;
            var id = chk.getAttribute('data-id');
            if (masterChk.checked) {
                _selectedRows[id] = {
                    id: id,
                    no_pr: chk.getAttribute('data-no-pr'),
                    no_item: chk.getAttribute('data-no-item')
                };
            } else {
                delete _selectedRows[id];
            }
        });
        tblUpdateSelBar();
    }

    function tblRowCheck(chk) {
        var id = chk.getAttribute('data-id');
        if (chk.checked) {
            _selectedRows[id] = {
                id: id,
                no_pr: chk.getAttribute('data-no-pr'),
                no_item: chk.getAttribute('data-no-item')
            };
        } else {
            delete _selectedRows[id];
        }
        tblSyncMaster();
        tblUpdateSelBar();
    }

    function tblClearAll() {
        _selectedRows = {};
        document.querySelectorAll('.row-check').forEach(function(c) {
            c.checked = false;
        });
        var sa = document.getElementById('tbl-selectAll');
        if (sa) {
            sa.checked = false;
            sa.indeterminate = false;
        }
        tblUpdateSelBar();
    }

    function tblSyncMaster() {
        var all = document.querySelectorAll('.row-check:not([disabled])');
        var checked = document.querySelectorAll('.row-check:not([disabled]):checked');
        var sa = document.getElementById('tbl-selectAll');
        if (!sa) return;
        sa.checked = all.length > 0 && checked.length === all.length;
        sa.indeterminate = checked.length > 0 && checked.length < all.length;
    }

    function tblUpdateSelBar() {
        var n = Object.keys(_selectedRows).length;
        var bar = document.getElementById('quick-sel-bar');
        var cnt = document.getElementById('quick-sel-count');
        if (cnt) cnt.textContent = n + ' item selected';
        if (bar) bar.classList.toggle('visible', n > 0);
    }

    /* ============================================================
       QUICK GENERATE READY PO — dari checkbox, tanpa modal
    ============================================================ */
    function quickGenerateSelected() {
        var ids = Object.keys(_selectedRows);
        if (!ids.length) {
            Swal.fire({
                title: 'Perhatian',
                text: 'Pilih minimal 1 baris data terlebih dahulu.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        var uniqueVendors = {};
        var uniqueVendorKeys = [];

        ids.forEach(function(id) {
            var row = document.querySelector('tr[data-id="' + id + '"]');
            if (row) {
                var code = ((row.querySelector('.inline-vendor-input') || {}).value || '').trim();
                var name = ((row.querySelector('[data-field="vendor_name"]') || {}).value || '').trim();
                var key = code || '__NOVENDOR__';
                if (!uniqueVendors[key]) {
                    uniqueVendors[key] = {
                        code: code,
                        name: name || 'Tanpa Vendor',
                        itemsCount: 0
                    };
                    uniqueVendorKeys.push(key);
                }
                uniqueVendors[key].itemsCount++;
            }
        });

        var vendorsHtml = '';
        uniqueVendorKeys.forEach(function(key) {
            var v = uniqueVendors[key];
            var label = v.code ? ('[' + gEsc(v.code) + '] ' + gEsc(v.name)) : gEsc(v.name);
            vendorsHtml +=
                '<div class="mb-3 text-start">' +
                '<label class="form-label mb-1" style="font-weight:600;font-size:.78rem;color:#555;">Header untuk ' + label + ' (' + v.itemsCount + ' item)</label>' +
                '<textarea class="form-control form-control-sm quick-rpo-header-ta" data-vendor-key="' + gAttr(key) + '" rows="2" style="font-size:.75rem;border-radius:6px;" placeholder="Optional: Header Text..."></textarea>' +
                '</div>';
        });

        var listHtml = ids.slice(0, 10).map(function(id) {
            var r = _selectedRows[id];
            return '<li><strong>' + gEsc(r.no_pr) + '</strong> — Item ' + gEsc(r.no_item) + '</li>';
        }).join('');
        if (ids.length > 10) listHtml += '<li>...dan ' + (ids.length - 10) + ' lainnya</li>';

        Swal.fire({
            title: 'Generate Ready PO',
            html: '<p style="font-size:.87rem;margin-bottom:8px;"><strong>' + ids.length + '</strong> item akan di-generate ke Ready PO.</p>' +
                '<ul class="text-start" style="font-size:.8rem;max-height:100px;overflow:auto;background:#f8f9fa;border-radius:6px;padding:8px 12px;margin-bottom:15px;">' + listHtml + '</ul>' +
                '<hr style="margin:10px 0;">' +
                '<p style="font-size:.82rem;font-weight:700;text-align:left;margin-bottom:8px;"><i class="fas fa-file-alt me-1"></i>Input Header Text (Optional):</p>' +
                '<div style="max-height:180px;overflow-y:auto;padding-right:4px;">' +
                vendorsHtml +
                '</div>',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-magic me-1"></i> Generate Sekarang',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#6d28d9',
            preConfirm: function() {
                var headers = {};
                var textareas = Swal.getHtmlContainer().querySelectorAll('.quick-rpo-header-ta');
                textareas.forEach(function(ta) {
                    var vk = ta.getAttribute('data-vendor-key');
                    if (vk) {
                        headers[vk] = ta.value.trim();
                    }
                });
                return headers;
            }
        }).then(function(result) {
            if (!result.isConfirmed) return;

            var headers = result.value || {};

            Swal.fire({
                title: 'Memproses...',
                html: '<i class="fas fa-spinner fa-spin me-2"></i>Mohon tunggu.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: function() {
                    Swal.showLoading();
                }
            });

            var items = ids.map(function(id) {
                var row = document.querySelector('tr[data-id="' + id + '"]');
                if (!row) return {
                    id: id
                };
                var code = ((row.querySelector('.inline-vendor-input') || {}).value || '').trim();
                var key = code || '__NOVENDOR__';
                var headerVal = headers[key] || '';
                return {
                    id: id,
                    sap_code_vendor: code || null,
                    vendor_name: (row.querySelector('[data-field="vendor_name"]') || {}).value || '',
                    quantity: getRawInlineVal(row.querySelector('[data-field="quantity"]')),
                    price: getRawInlineVal(row.querySelector('[data-field="price"]')),
                    delivery_date: (row.querySelector('[data-field="delivery_date"]') || {}).value || '',
                    header: headerVal || null,
                };
            });

            fetch("{{ route('lsospr.store') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf()
                    },
                    body: JSON.stringify({
                        items: items
                    })
                })
                .then(function(r) {
                    return r.json().then(function(j) {
                        if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                        return j;
                    });
                })
                .then(function(res) {
                    var errs = res.errors || [];
                    Swal.fire({
                        title: errs.length ? 'Selesai (ada peringatan)' : '<i class="fas fa-check-circle text-success me-1"></i>Berhasil!',
                        html: '<p>' + gEsc(res.message) + '</p>' +
                            '<div class="p-2 rounded d-inline-block mt-1" style="background:#ede9fe;min-width:90px;text-align:center;">' +
                            '<small>Generated</small><br><strong style="color:#6d28d9;font-size:1.3rem;">' + (res.updated || 0) + '</strong></div>' +
                            (errs.length ? '<div class="alert alert-warning text-start mt-2 py-2 px-3" style="font-size:.79rem;">' +
                                errs.slice(0, 5).map(function(e) {
                                    return '<li>' + gEsc(e) + '</li>';
                                }).join('') + '</div>' : ''),
                        icon: errs.length ? 'warning' : 'success',
                        confirmButtonColor: '#028284',
                        confirmButtonText: '<i class="fas fa-sync-alt me-1"></i> OK, Muat Ulang'
                    }).then(function() {
                        location.reload();
                    });
                })
                .catch(function(err) {
                    Swal.fire({
                        title: 'Gagal',
                        text: err.message,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                });
        });
    }

    /* ============================================================
       INLINE SAVE PER ROW
    ============================================================ */
    function saveInlineRow(btn) {
        var id = btn.getAttribute('data-id');
        var row = document.querySelector('tr[data-id="' + id + '"]');
        if (!row) return;

        var sapCode = (row.querySelector('.inline-vendor-input') || {}).value || '';
        var vendName = (row.querySelector('[data-field="vendor_name"]') || {}).value || '';
        var qty = getRawInlineVal(row.querySelector('[data-field="quantity"]'));
        var price = getRawInlineVal(row.querySelector('[data-field="price"]'));
        var delivery = (row.querySelector('[data-field="delivery_date"]') || {}).value || '';

        var err = [];
        if (!delivery || isNaN(new Date(delivery).getTime())) err.push('Delivery Date');
        if (price === null || isNaN(price) || price < 0) err.push('Price');
        if (!qty || isNaN(qty) || qty <= 0) err.push('Quantity');

        if (err.length) {
            Swal.fire({
                title: 'Validasi Gagal',
                html: 'Field tidak valid: <strong>' + err.join(', ') + '</strong>',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch("{{ route('lsospr.inlineSave') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf()
                },
                body: JSON.stringify({
                    id: id,
                    sap_code_vendor: sapCode || null,
                    vendor_name: vendName || null,
                    quantity: qty,
                    price: price,
                    delivery_date: delivery
                })
            })
            .then(function(r) {
                return r.json().then(function(j) {
                    if (!r.ok) throw new Error(j.message || 'HTTP ' + r.status);
                    return j;
                });
            })
            .then(function(res) {
                if (!res.success) throw new Error(res.message);
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check text-success"></i>';
                row.querySelectorAll('.inline-inp:not([readonly]), .inline-vendor-input').forEach(function(inp) {
                    $(inp).data('original-value', $(inp).val());
                });
                setTimeout(function() {
                    btn.innerHTML = '<i class="fas fa-save"></i>';
                }, 1800);
                row.querySelectorAll('td').forEach(function(td) {
                    td.classList.add('inline-saved-flash');
                });
                setTimeout(function() {
                    row.querySelectorAll('td').forEach(function(td) {
                        td.classList.remove('inline-saved-flash');
                    });
                }, 700);

                // ── Refresh checkbox state setelah save ──
                var chk = row.querySelector('.row-check');
                if (chk) {
                    var sapCode = (row.querySelector('.inline-vendor-input') || {}).value || '';
                    var vendName = (row.querySelector('[data-field="vendor_name"]') || {}).value || ''; // ✅ .value bukan .textContent
                    var qty = getRawInlineVal(row.querySelector('[data-field="quantity"]'));
                    var price = getRawInlineVal(row.querySelector('[data-field="price"]'));
                    var delivery = (row.querySelector('[data-field="delivery_date"]') || {}).value || '';

                    var isComplete = sapCode.trim() !== '' &&
                        vendName.trim() !== '' &&
                        qty > 0 &&
                        price > 0 &&
                        delivery !== '';

                    chk.disabled = !isComplete;
                    chk.title = isComplete ?
                        '' :
                        'Lengkapi SAP Code Vendor, Vendor Name, Quantity, Price, dan Delivery Date terlebih dahulu';
                }

                // ── Refresh cell-incomplete highlight setelah save ──
                var sapCodeVal = (row.querySelector('.inline-vendor-input') || {}).value || '';
                var vendNameVal = (row.querySelector('[data-field="vendor_name"]') || {}).value || '';
                var qtyVal = getRawInlineVal(row.querySelector('[data-field="quantity"]'));
                var priceVal = getRawInlineVal(row.querySelector('[data-field="price"]'));
                var deliveryVal = (row.querySelector('[data-field="delivery_date"]') || {}).value || '';

                var nowComplete = sapCodeVal.trim() !== '' &&
                    vendNameVal.trim() !== '' &&
                    qtyVal > 0 &&
                    priceVal > 0 &&
                    deliveryVal !== '';

                if (nowComplete) {
                    row.querySelectorAll('td.cell-incomplete').forEach(function(td) {
                        td.classList.remove('cell-incomplete');
                    });
                } else {
                    var cells = {
                        'quantity': qtyVal <= 0,
                        'price': priceVal <= 0,
                        'delivery_date': deliveryVal === '',
                        'vendor_name': vendNameVal.trim() === '',
                        'sap_code_vendor': sapCodeVal.trim() === '',
                    };

                    var noprTd = row.querySelector('td.font-weight-bold');
                    if (noprTd) {
                        noprTd.classList.toggle('cell-incomplete', true);
                    }
                    row.querySelectorAll('td[class*="text-sm"]').forEach(function(td) {
                        var inp = td.querySelector('[data-field]');
                        if (!inp) {
                            var vendInp = td.querySelector('.inline-vendor-input');
                            if (vendInp) {
                                td.classList.toggle('cell-incomplete', sapCodeVal.trim() === '');
                            }
                            return;
                        }
                        var field = inp.getAttribute('data-field');
                        if (field in cells) {
                            td.classList.toggle('cell-incomplete', cells[field]);
                        }
                    });
                }
            })
            .catch(function(err) {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-save"></i>';
                Swal.fire({
                    title: 'Gagal Menyimpan',
                    text: err.message,
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            });
    }

    /* ============================================================
       INLINE VENDOR AUTOCOMPLETE — tabel utama
    ============================================================ */
    var _inlineVendorTimer = null;

    $(document).on('keyup', '.inline-vendor-input', function(e) {
        if (['ArrowUp', 'ArrowDown', 'Enter', 'Escape'].includes(e.key)) return;
        var input = this;
        var dropdown = $(this).siblings('.inline-autocomplete');
        var q = $(this).val().trim();
        clearTimeout(_inlineVendorTimer);
        if (q.length < 2) {
            dropdown.hide();
            return;
        }
        _inlineVendorTimer = setTimeout(function() {
            $.ajax({
                url: "{{ route('lsospr.vendorList') }}",
                data: {
                    search: q
                },
                success: function(res) {
                    if (!res.success || !res.data.length) {
                        dropdown.hide();
                        return;
                    }
                    dropdown.html(res.data.map(function(v) {
                        return '<div class="inline-autocomplete-item" data-code="' + gAttr(v.sap_code_vendor) + '" data-name="' + gAttr(v.name) + '">' +
                            '<strong>' + gEsc(v.sap_code_vendor) + '</strong> — ' + gEsc(v.name) + '</div>';
                    }).join('')).show();
                }
            });
        }, 280);
    });

    $(document).on('keydown', '.inline-vendor-input', function(e) {
        var dropdown = $(this).siblings('.inline-autocomplete');
        var items = dropdown.find('.inline-autocomplete-item');
        var idx = items.index(items.filter('.active'));
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            idx = (idx + 1) % items.length;
            items.removeClass('active').eq(idx).addClass('active')[0].scrollIntoView({
                block: 'nearest'
            });
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            idx = idx <= 0 ? items.length - 1 : idx - 1;
            items.removeClass('active').eq(idx).addClass('active')[0].scrollIntoView({
                block: 'nearest'
            });
        } else if (e.key === 'Enter') {
            var active = items.filter('.active');
            if (active.length) {
                e.preventDefault();
                active.click();
            }
        } else if (e.key === 'Escape') {
            dropdown.hide();
        }
    });

    $(document).on('blur', '.inline-vendor-input', function() {
        var inp = this,
            row = this.closest('tr');
        if (!row || inp.value.trim().length < 2) return;
        var matCode = (row.querySelectorAll('td')[5] || {}).textContent || '';
        if (matCode.trim()) {
            setTimeout(function() {
                fetchInlineHistory(row, matCode.trim(), inp.value.trim(), false);
            }, 280);
        }
    });

    $(document).on('click', '.inline-autocomplete-item', function() {
        var code = $(this).data('code'),
            name = $(this).data('name');
        var row = $(this).closest('tr');
        row.find('.inline-vendor-input').val(code);
        row.find('[data-field="vendor_name"]').val(name).attr('title', name);
        $(this).closest('.inline-autocomplete').hide();
        var matCode = (row.find('td').eq(5).text() || '').trim();
        if (matCode) fetchInlineHistory(row[0], matCode, code, false);
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.inline-vendor-wrap').length) $('.inline-autocomplete').hide();
    });

    function fetchInlineHistory(rowEl, matCode, sapVendor, fillVendor) {
        var url = "{{ route('lsospr.historyPO') }}?material_code=" + encodeURIComponent(matCode);
        if (sapVendor) url += "&sap_code_vendor=" + encodeURIComponent(sapVendor);
        fetch(url, {
                headers: {
                    'Accept': 'application/json'
                }
            })
            .then(function(r) {
                return r.json();
            })
            .then(function(res) {
                if (!res.success) return;
                var row = $(rowEl);
                if (res.price > 0) {
                    // source 'sap' → price dari NETPR, perlu cek waers
                    // source 'db'  → price sudah tersimpan final (sudah dikonversi)
                    var finalPrice = res.price;
                    if (res.source === 'sap' && res.waers && res.waers.toUpperCase() === 'IDR') {
                        finalPrice = res.price * 100;
                    }
                    var fmt = new Intl.NumberFormat('id-ID', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }).format(finalPrice);
                    var pi = row.find('[data-field="price"]');
                    if (pi.length && !pi.prop('readonly')) {
                        pi.val(fmt).css('background', '#d4edda');
                        setTimeout(function() {
                            pi.css('background', '');
                        }, 1500);
                    }
                }
                if (fillVendor && res.sap_code_vendor) {
                    row.find('.inline-vendor-input').val(res.sap_code_vendor);
                    row.find('[data-field="vendor_name"]').val(res.vendor_name || '');
                }
            }).catch(function() {});
    }

    /* ============================================================
       PRICE FORMAT — tabel utama (sama dengan logic modal)
    ============================================================ */
    $(document).on('input', '.price-format-inline', function() {
        var val = this.value.replace(/\D/g, '');
        if (!val) {
            this.value = '';
            return;
        }
        var isFormatted = this.value.includes(',');
        var num = isFormatted ? val.slice(0, -2) : val;
        if (!num || num === '0') {
            this.value = '';
            return;
        }
        this.value = new Intl.NumberFormat('id-ID').format(num) + ',00';
        var pos = this.value.length - 3;
        this.setSelectionRange(pos, pos);
    });
    $(document).on('click', '.price-format-inline', function() {
        if (this.value.includes(',')) {
            var pos = this.value.length - 3;
            if (this.selectionStart > pos) this.setSelectionRange(pos, pos);
        }
    });

    function getRawInlineVal(inp) {
        if (!inp || !inp.value.trim()) return 0;
        return parseFloat(inp.value.split(',')[0].replace(/\./g, '')) || 0;
    }
</script>
@endpush