@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    tr.row-inactive,
    tr.row-inactive:hover,
    tr.row-inactive:focus,
    tr.row-inactive:active {
        background-color: #ffe9ed !important;
    }

    tr.row-proses,
    tr.row-proses:hover,
    tr.row-proses:focus,
    tr.row-proses:active {
        background-color: #fff9c4 !important;
    }

    tr.row-update,
    tr.row-update:hover,
    tr.row-update:focus,
    tr.row-update:active {
        background-color: #ffce99 !important;
    }

    tr.row-update-ppn,
    tr.row-update-ppn:hover,
    tr.row-update-ppn:focus,
    tr.row-update-ppn:active {
        background-color: #e3f2fd !important;
    }

    /* Center modal vertically */
    .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
    }

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

    /* Smooth modal animation */
    .modal.fade .modal-dialog {
        transition: transform 0.3s ease-out;
        transform: translate(0, -50px);
    }

    .modal.show .modal-dialog {
        transform: none;
    }

    /* Better document preview styling */
    .document-preview-container {
        max-height: 70vh;
        overflow-y: auto;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
    }

    .document-preview-container img {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    .document-preview-container embed {
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    /* Badge styling */
    .cert-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    /* Animasi untuk modal search */
    #searchVendorModal .modal-content {
        border: none;
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    #searchVendorModal .modal-header {
        background: linear-gradient(135deg, #028284 0%, #00b7bd 100%);
        color: white;
        border-radius: 15px 15px 0 0;
        border: none;
    }

    #searchVendorModal .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    /* Input vendor code styling */
    #vendorCode {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 12px 15px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    #vendorCode:focus {
        border-color: #028284;
        box-shadow: 0 0 0 0.2rem rgba(2, 130, 132, 0.25);
        transform: translateY(-2px);
    }

    /* Search result animations */
    #searchResult {
        animation: slideIn 0.4s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Alert styling dengan animasi */
    .alert {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        animation: fadeInScale 0.4s ease-out;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .alert-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        border-left: 4px solid #28a745;
    }

    .alert-danger {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        border-left: 4px solid #dc3545;
    }

    /* Button styling */
    #searchVendorModal .btn {
        border-radius: 10px;
        padding: 10px 25px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #searchVendorModal .btn-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
    }

    #searchVendorModal .btn-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    }

    #searchVendorModal .btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        border: none;
    }

    #searchVendorModal .btn-secondary:hover {
        transform: translateY(-2px);
    }

    /* Loading spinner custom */
    .swal2-loader {
        border-color: #028284 transparent #028284 transparent !important;
    }

    /* Result card styling */
    .vendor-result-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .vendor-result-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    /* Icon animations */
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .fa-spinner {
        animation: rotate 1s linear infinite;
    }

    /* Pulse animation for icons */
    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    .alert i {
        animation: pulse 1s ease-in-out;
    }

    /* Button SAP Check Styling */
    .btn-sync-sap {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        transition: all 0.3s ease;
    }

    .btn-sync-sap:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
        color: white !important;
    }

    #sapPreviewModal .modal-dialog {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 1rem auto !important;
    }

    #sapPreviewModal .modal-content {
        border: none;
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
        position: relative;
        overflow: visible;
        /* penting: jangan hidden agar overlay tampil */
    }

    #sapPreviewModal .modal-header {
        background: linear-gradient(135deg, #028284 0%, #00b7bd 100%);
        color: white;
        border: none;
        padding: .9rem 1.4rem;
        border-radius: 14px 14px 0 0;
    }

    #sapPreviewModal .modal-header .modal-title {
        font-weight: 700;
        font-size: .97rem;
    }

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

    #sapPreviewModal .modal-body {
        padding: 0;
    }

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

    /* ── Loading overlay ──────────────────────────────────────────── */
    #sapLoadingOverlay {
        position: absolute;
        top: 56px;
        /* tinggi header */
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, .97);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        border-radius: 0 0 14px 14px;
        min-height: 180px;
    }

    .sap-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #e0e0e0;
        border-top-color: #028284;
        border-radius: 50%;
        animation: sapSpin .75s linear infinite;
        margin-bottom: 14px;
    }

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

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

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

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

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

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

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

    .sap-chip.changed {
        border-color: #f5c2c7;
        background: #fff5f6;
        color: #842029;
    }

    .sap-tab.changed {
        border-color: #dc3545;
        color: #dc3545;
    }

    .sap-tab.changed.active {
        background: #dc3545;
        border-color: #dc3545;
    }

    .cell-diff-old {
        color: #842029;
        text-decoration: line-through;
        font-size: .68rem;
    }

    .cell-diff-new {
        color: #155724;
        font-weight: 700;
    }

    /* ── Filter row ───────────────────────────────────────────────── */
    #sapFilterRow {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    .sap-tab {
        border-radius: 20px;
        padding: 3px 13px;
        font-size: .76rem;
        font-weight: 600;
        border: 2px solid;
        background: transparent;
        cursor: pointer;
        transition: all .15s;
        line-height: 1.5;
    }

    .sap-tab.all {
        border-color: #adb5bd;
        color: #6c757d;
    }

    .sap-tab.new {
        border-color: #28a745;
        color: #28a745;
    }

    .sap-tab.exists {
        border-color: #e6a817;
        color: #c88a00;
    }

    .sap-tab.active {
        color: white !important;
    }

    .sap-tab.all.active {
        background: #6c757d;
        border-color: #6c757d;
    }

    .sap-tab.new.active {
        background: #28a745;
        border-color: #28a745;
    }

    .sap-tab.exists.active {
        background: #e6a817;
        border-color: #e6a817;
    }

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

    #sapSearchBox:focus {
        border-color: #028284;
        box-shadow: 0 0 0 .15rem rgba(2, 130, 132, .2);
        outline: none;
    }

    /* ── Table ────────────────────────────────────────────────────── */
    #sapTableScroll {
        max-height: 55vh;
        overflow: auto;
    }

    #sapPreviewTable {
        font-size: .74rem;
        margin-bottom: 0;
        min-width: 2000px;
        table-layout: auto;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-left: 1px solid #dee2e6 !important;
        border-top: 1px solid #dee2e6 !important;
    }

    #sapPreviewTable thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #026d6f;
        color: white;
        font-weight: 600;
        white-space: nowrap;
        padding: 8px 9px;
        border-bottom: 2px solid #014d4e !important;
        border-right: 1px solid #014d4e !important;
    }

    #sapPreviewTable thead th small {
        display: block;
        opacity: .7;
        font-weight: 400;
        font-size: .66rem;
        margin-top: 1px;
    }

    #sapPreviewTable tbody tr {
        transition: background .1s;
    }

    #sapPreviewTable tbody tr:hover {
        background: #f0fafa !important;
    }

    #sapPreviewTable td {
        padding: 5px 9px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid #dee2e6 !important;
        border-right: 1px solid #dee2e6 !important;
    }

    #sapPreviewTable td.td-trunc {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Sticky Checkbox Column ────────────────────────── */
    #sapPreviewTable th:nth-child(1),
    #sapPreviewTable td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 12;
        text-align: center;
        border-right: 2px solid #ccc !important;
        background-clip: padding-box;
    }

    /* Header background for sticky checkbox */
    #sapPreviewTable thead th:nth-child(1) {
        background: #026d6f !important;
        z-index: 15;
        border-right: 2px solid #ccc !important;
    }

    /* Body cell default background */
    #sapPreviewTable tbody td:nth-child(1) {
        background-color: #ffffff !important;
    }

    /* State-based backgrounds for sticky checkbox cell */
    #sapPreviewTable tbody tr.row-changed td:nth-child(1) {
        background-color: #fff5f6 !important;
    }

    #sapPreviewTable tbody tr.row-nonactive td:nth-child(1) {
        background-color: #f8f9fa !important;
    }

    #sapPreviewTable tbody tr.row-sap-inactive td:nth-child(1) {
        background-color: #fff5f5 !important;
    }

    /* Hover background for sticky checkbox cell */
    #sapPreviewTable tbody tr:hover td:nth-child(1) {
        background-color: #f0fafa !important;
    }

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

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

    /* ── Row nonaktif di tabel SAP preview ─────────────────────────── */
    #sapPreviewTable tr.row-sap-inactive>td:first-child {
        border-left: 3px solid #dc3545;
    }

    #sapPreviewTable tr.row-sap-inactive {
        background-color: #fff5f5;
        color: #6c757d;
    }

    .b-inactive {
        background: #f8d7da;
        color: #721c24;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .b-active {
        background: #d4edda;
        color: #155724;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
    }

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

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

    .b-pkp {
        background: #d4edda;
        color: #155724;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .67rem;
        font-weight: 700;
    }

    .b-nonpkp {
        background: #f8d7da;
        color: #721c24;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .67rem;
        font-weight: 700;
    }

    /* ── Checkbox ─────────────────────────────────────────────────── */
    #sapSelectAll,
    .sap-chk {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #028284;
    }

    .sap-chk:disabled {
        opacity: .35;
        cursor: default;
    }

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

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

    .spg-btn:hover:not(:disabled) {
        border-color: #028284;
        color: #028284;
    }

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

    #sapPagLabel {
        font-weight: 700;
        color: #028284;
    }

    /* ── Error ────────────────────────────────────────────────────── */
    #sapErrBox {
        padding: 18px;
    }

    /* ── Insert button ────────────────────────────────────────────── */
    #btnDoInsert {
        background: linear-gradient(135deg, #028284, #00b7bd);
        border: none;
        color: white;
        font-weight: 600;
        padding: 7px 20px;
        border-radius: 9px;
        transition: all .22s;
        box-shadow: 0 4px 12px rgba(2, 130, 132, .28);
        white-space: nowrap;
        font-size: .84rem;
    }

    #btnDoInsert:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(2, 130, 132, .4);
        color: white;
    }

    #btnDoInsert:disabled {
        opacity: .48;
        cursor: not-allowed;
    }

    #sapSelCount {
        display: inline-block;
        background: white;
        color: #028284;
        border-radius: 9px;
        padding: 1px 7px;
        font-weight: 700;
        font-size: .77rem;
        margin-left: 4px;
    }

    #sapSelInfo {
        font-size: .8rem;
        color: #495057;
    }

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

    .b-inconsistent {
        background: #fff3cd;
        color: #856404;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
        border: 1px solid #ffc107;
    }

    .b-changed {
        background: #f8d7da;
        color: #842029;
        border-radius: 5px;
        padding: 2px 8px;
        font-size: .68rem;
        font-weight: 700;
        white-space: nowrap;
    }

    #sapPreviewTable tr.row-changed>td:first-child {
        border-left: 3px solid #dc3545;
    }

    #sapPreviewTable tr.row-changed {
        background-color: #fff5f6;
    }

    .b-nonactive {
        background: #e2e3e5;
        color: #495057;
        border-radius: 5px;
        padding: 2px 8px;
        font-size: .68rem;
        font-weight: 700;
        white-space: nowrap;
    }

    #sapPreviewTable tr.row-nonactive>td:first-child {
        border-left: 3px solid #6c757d;
    }

    #sapPreviewTable tr.row-nonactive {
        background-color: #f8f9fa;
    }

    .cell-diff-old {
        color: #842029;
        text-decoration: line-through;
        font-size: .72rem;
        background: #fff5f5;
        border-radius: 3px;
        padding: 0px 4px;
        display: inline-block;
    }

    .cell-diff-new {
        color: #155724;
        font-weight: 700;
        font-size: .72rem;
        background: #f0fff4;
        border-radius: 3px;
        padding: 0px 4px;
        display: inline-block;
    }
</style>
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- PDF.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">{{ $title_menu }}</h5>
                        </div>
                        <div class="col">
                            {{-- alert --}}
                            @include('components.alert')
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                {{-- button add --}}
                                <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                        class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        @if($dmenu)
                                        {{-- Action Column First --}}
                                        <th width="110">Action</th>
                                        <th>No</th>

                                        {{-- Vendor Information --}}
                                        <th>Old Code Vendor</th>
                                        <th>SAP Code Vendor</th>
                                        <th>Corporation</th>
                                        <th>Vendor Name</th>
                                        <th>Address 1</th>
                                        <th>Address 2</th>
                                        <th>Address 3</th>
                                        <th>City</th>

                                        {{-- Contact Persons --}}
                                        <th>Contact Persons</th>

                                        {{-- Directors --}}
                                        <!-- <th>Directors</th> -->

                                        {{-- Bank Accounts --}}
                                        <!-- <th>Bank Accounts</th> -->

                                        {{-- Quality Environment --}}
                                        <!-- <th>Quality Env</th> -->

                                        {{-- Agreement Document --}}
                                        <!-- <th>Agreement Doc</th> -->

                                        {{-- Status & Approver --}}
                                        <th>Status</th>
                                        <th>Status Upload</th>
                                        @else
                                        <th>No</th>
                                        {{-- For other menus, use default header --}}
                                        @foreach ($table_header as $header)
                                        <th>{{ $header->alias }}</th>
                                        @endforeach
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail as $detail)
                                    @php
                                    $primary = '';
                                    foreach ($table_primary as $p) {
                                    $primary == ''
                                    ? ($primary = $detail->{$p->field})
                                    : ($primary = $primary . ':' . $detail->{$p->field});
                                    }

                                    // For lsvndr, use id directly since it has no sys_table primary key mapping
                                    if($dmenu) {
                                    $primary = $detail->id;
                                    }

                                    $vcount = $loop->iteration;

                                    // Get related data for lsvndr
                                    if($dmenu) {
                                    $contacts = DB::table('tr_contact_person')->where('vendor_id', $detail->id)->get();
                                    $directors = DB::table('tr_director')->where('vendor_id', $detail->id)->get();
                                    $banks = DB::table('tr_bank')->where('vendor_id', $detail->id)->get();
                                    $qualityEnvs = DB::table('tr_vendor_quality_environment')->where('vendor_id', $detail->id)->get();
                                    $approved_by = DB::table('users')->where('username', $detail->approved_by)->first();
                                    $approver = DB::table('users')->where('username', $detail->approver)->first();
                                    }
                                    @endphp
                                    <tr class="{{ 
                                        $detail->isactive == '0' || $detail->status == 'Rejected' 
                                        ? 'row-inactive'
                                        : ($detail->sap_status == 'Proses' ? 'row-proses' 
                                        : ($detail->sap_status == 'Update' ? 'row-update' 
                                        : ($detail->sap_status == 'Update PPN' ? 'row-update-ppn' : ''))) 
                                    }}">
                                        @if($dmenu)
                                        {{-- Action Dropdown Column First --}}
                                        <td class="text-sm font-weight-normal">
                                            <div class="btn-group">
                                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                    title="View Data"
                                                    onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                    <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                </button>
                                                <button type="button"
                                                    class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    {{-- check authorize edit --}}
                                                    @if ($authorize->edit == '1')
                                                    {{-- check status active --}}
                                                    @if ($detail->isactive == 1)
                                                    {{-- ===== TAMBAHAN: Cek status untuk disable edit button ===== --}}
                                                    @php
                                                    $canEdit = !(
                                                    in_array($detail->status, ['Proposed', 'Approved']) &&
                                                    in_array($detail->sap_status, ['Belum Upload', 'Proses', 'Update PPN', 'Update'])
                                                    );
                                                    @endphp

                                                    @if($canEdit)
                                                    {{-- button edit --}}
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                        title="Edit Data"
                                                        onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                        <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                            Edit</span>
                                                    </button>
                                                    @else
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                        title="Tidak dapat diedit"
                                                        disabled>
                                                        <i class="fas fa-lock"></i><span class="font-weight-bold">
                                                            Edit</span>
                                                    </button>
                                                    @endif
                                                    @endif
                                                    @endif

                                                    {{-- button propose --}}
                                                    @if($detail->status == 'Pending' && $detail->isactive == 1)
                                                    <form action="{{ url($url_menu . '/propose/' . encrypt($detail->id)) }}"
                                                        method="POST" style="display: inline">
                                                        @csrf
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <button type="submit"
                                                            class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                            title="Propose Data"
                                                            onclick="return proposeData(event, '{{ $detail->name }}')">
                                                            <i class="fas fa-paper-plane"></i><span
                                                                class="font-weight-bold">
                                                                Propose</span>
                                                        </button>
                                                    </form>
                                                    @endif

                                                    {{-- check authorize delete and data primary key not "msjit" --}}
                                                    @if ($authorize->delete == '1' && $primary != 'msjit')
                                                    {{-- ===== TAMBAHAN: Cek status untuk disable delete button ===== --}}
                                                    @php
                                                    $canDelete = !(
                                                    in_array($detail->status, ['Proposed', 'Approved']) &&
                                                    in_array($detail->sap_status, ['Belum Upload', 'Proses', 'Update PPN', 'Update'])
                                                    );
                                                    @endphp

                                                    @if($canDelete)
                                                    <form
                                                        action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                        method="POST" style="display: inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        {{-- button delete --}}
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <button type="submit"
                                                            class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                            title="Hapus Data"
                                                            onclick="return deleteData(event, '{{ $detail->name }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                            <i class="fas fa-random"></i><span
                                                                class="font-weight-bold">
                                                                {{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                        </button>
                                                    </form>
                                                    @else
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                        title="Tidak dapat dinonaktifkan"
                                                        disabled>
                                                        <i class="fas fa-lock"></i><span
                                                            class="font-weight-bold">
                                                            Non Aktifkan</span>
                                                    </button>
                                                    @endif
                                                    @endif
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>

                                        <td>{{ $loop->iteration }}</td>

                                        {{-- Vendor Information --}}
                                        <td class="text-sm">{{ $detail->old_code_vendor }}</td>
                                        <td class="text-sm">{{ $detail->sap_code_vendor ?? '-' }}</td>
                                        <td class="text-sm">
                                            {{ $detail->corp }}
                                        </td>
                                        <td class="text-sm font-weight-bold text-dark">{{ $detail->name }}</td>
                                        <td class="text-sm">{{ $detail->office_address1 }}</td>
                                        <td class="text-sm">{{ $detail->office_address2 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->office_address3 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->city_name ?? '-' }}</td>

                                        {{-- Contact Persons --}}
                                        <td class="text-sm align-middle text-center">
                                            @if($contacts->count() > 0)
                                            <button type="button" class="btn btn-sm btn-info mb-0"
                                                data-bs-toggle="modal"
                                                data-bs-target="#contactModal{{ $detail->id }}">
                                                <i class="fas fa-users"></i> {{ $contacts->count() }} Person(s)
                                            </button>

                                            <!-- Contact Modal -->
                                            <div class="modal fade" id="contactModal{{ $detail->id }}" tabindex="-1">
                                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header" style="background-color: #00b7bd4f;">
                                                            <h5 class="modal-title">Contact Persons - {{ $detail->corp }} {{ $detail->name }}</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Full Name</th>
                                                                            <th>Position</th>
                                                                            <th>Telephone</th>
                                                                            <th>Mobile</th>
                                                                            <th>Email</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($contacts as $contact)
                                                                        <tr>
                                                                            <td>{{ $contact->fullname }}</td>
                                                                            <td>{{ $contact->position ? $contact->position : '-' }}</td>
                                                                            <td>{{ $contact->telp ? $contact->telp : '-' }}</td>
                                                                            <td>{{ $contact->mobile ? $contact->mobile : '-' }}</td>
                                                                            <td>{{ $contact->email ? $contact->email : '-' }}</td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                            <span class="badge bg-secondary">No Data</span>
                                            @endif
                                        </td>

                                        {{-- Directors --}}
                                        <!-- <td class="text-sm">
                                            @if($directors->count() > 0)
                                            <button type="button" class="btn btn-sm btn-warning"
                                                data-bs-toggle="modal"
                                                data-bs-target="#directorModal{{ $detail->id }}">
                                                <i class="fas fa-user-tie"></i> {{ $directors->count() }} Director(s)
                                            </button>

                                            <div class="modal fade" id="directorModal{{ $detail->id }}" tabindex="-1">
                                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header" style="background-color: #00b7bd4f;">
                                                            <h5 class="modal-title">Directors/Commissioners - {{ $detail->corp }} {{ $detail->name }}</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Full Name</th>
                                                                            <th>NIK</th>
                                                                            <th>Position</th>
                                                                            <th>Email</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($directors as $director)
                                                                        <tr>
                                                                            <td>{{ $director->fullname ?? '-' }}</td>
                                                                            <td>{{ $director->nik ?? '-' }}</td>
                                                                            <td>{{ $director->position ?? '-' }}</td>
                                                                            <td>{{ $director->email ?? '-' }}</td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                            <span class="badge bg-secondary">No Data</span>
                                            @endif
                                        </td> -->

                                        {{-- Bank Accounts --}}
                                        <!-- <td class="text-sm">
                                            @if($banks->count() > 0)
                                            <button type="button" class="btn btn-sm btn-success"
                                                data-bs-toggle="modal"
                                                data-bs-target="#bankModal{{ $detail->id }}">
                                                <i class="fas fa-university"></i> {{ $banks->count() }} Bank(s)
                                            </button>

                                            <div class="modal fade" id="bankModal{{ $detail->id }}" tabindex="-1">
                                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header" style="background-color: #00b7bd4f;">
                                                            <h5 class="modal-title">Bank Accounts - {{ $detail->corp }} {{ $detail->name }}</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Bank Name</th>
                                                                            <th>Address</th>
                                                                            <th>Account No</th>
                                                                            <th>Account Holder</th>
                                                                            <th>Account Name</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($banks as $bank)
                                                                        <tr>
                                                                            <td>{{ $bank->name ?? '-' }}</td>
                                                                            <td>{{ $bank->address ?? '-' }}</td>
                                                                            <td>{{ $bank->account_no ?? '-' }}</td>
                                                                            <td>{{ $bank->account_holder ?? '-' }}</td>
                                                                            <td>{{ $bank->account_name ?? '-' }}</td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                            <span class="badge bg-secondary">No Data</span>
                                            @endif
                                        </td> -->

                                        {{-- Quality Environment --}}
                                        <!-- <td class="text-sm">
                                            @php
                                            $qualityEnvs = isset($vendorQualityEnvs[$detail->id])
                                            ? $vendorQualityEnvs[$detail->id]
                                            : collect();
                                            @endphp

                                            @if($qualityEnvs->count() > 0)
                                            <button type="button" class="btn btn-sm btn-primary cert-badge"
                                                data-bs-toggle="modal"
                                                data-bs-target="#qeModal{{ $detail->id }}">
                                                <i class="fas fa-certificate"></i> {{ $qualityEnvs->count() }} Cert(s)
                                            </button>

                                            <div class="modal fade" id="qeModal{{ $detail->id }}" tabindex="-1">
                                                <div class="modal-dialog modal-xl modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header" style="background-color: #00b7bd4f;">
                                                            <h5 class="modal-title">
                                                                <i class="fas fa-certificate me-2"></i>Quality Environments - {{ $detail->name }}
                                                            </h5>
                                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-hover">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                            <th width="40">#</th>
                                                                            <th>Certification Name</th>
                                                                            <th width="150">Version</th>
                                                                            <th width="150" class="text-center">Document</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($qualityEnvs as $index => $qe)
                                                                        <tr>
                                                                            <td>{{ $index + 1 }}</td>
                                                                            <td>
                                                                                @php
                                                                                $qeName = DB::table('ms_quality_environment')
                                                                                ->where('id', $qe->quality_environment_id)
                                                                                ->value('name');
                                                                                @endphp
                                                                                <strong>{{ $qeName ?? $qe->other_quality_environment }}</strong>
                                                                                @if($qe->other_quality_environment && $qeName)
                                                                                <br><small class="text-muted">({{ $qe->other_quality_environment }})</small>
                                                                                @endif
                                                                            </td>
                                                                            <td>
                                                                                <span class="badge bg-info">{{ $qe->version }}</span>
                                                                            </td>
                                                                            <td class="text-center">
                                                                                @if($qe->document)
                                                                                <a href="{{ route('storage.file', ['path' => $qe->document]) }}"
                                                                                    target="_blank"
                                                                                    class="btn btn-sm btn-outline-primary">
                                                                                    <i class="fas fa-file-pdf me-1"></i>View Document
                                                                                </a>
                                                                                @else
                                                                                <span class="badge bg-secondary">No File</span>
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                            <span class="badge bg-secondary">No Data</span>
                                            @endif
                                        </td> -->

                                        {{-- Agreement Document --}}
                                        <!-- <td class="text-sm">
                                            @if($detail->agreement_document)
                                            <a href="{{ route('storage.file', ['path' => $detail->agreement_document]) }}"
                                                target="_blank"
                                                class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-file-contract me-1"></i>View Agreement
                                            </a>
                                            @else
                                            <span class="badge bg-secondary">No File</span>
                                            @endif
                                        </td> -->

                                        {{-- Status --}}
                                        <td class="text-sm">
                                            @if($detail->status == 'Pending')
                                            <span class="badge bg-warning">Pending</span>
                                            @elseif($detail->status == 'Proposed')
                                            <span class="badge bg-info">Proposed</span>
                                            @elseif($detail->status == 'Approved')
                                            <span class="badge bg-success">Approved</span>
                                            @elseif($detail->status == 'Rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                            @elseif($detail->status == 'Finish')
                                            <span class="badge bg-primary">Finish</span>
                                            @endif
                                        </td>

                                        {{-- SAP Status --}}
                                        <td class="text-sm">
                                            @if($detail->sap_status == 'Belum Upload')
                                            <span class="badge bg-warning">Belum Upload</span>
                                            @elseif($detail->sap_status == 'Proses')
                                            <span class="badge bg-info">Proses</span>
                                            @elseif($detail->sap_status == 'Sudah Upload')
                                            <span class="badge bg-success">Sudah Upload</span>
                                            @elseif($detail->sap_status == 'Update PPN')
                                            <span class="badge bg-danger">Update PPN</span>
                                            @elseif($detail->sap_status == 'Update')
                                            <span class="badge bg-danger">Update</span>
                                            @endif
                                        </td>

                                        @else
                                        <td>{{ $loop->iteration }}</td>
                                        {{-- For other menus, use default foreach --}}
                                        @foreach ($table_header as $field)
                                        @php
                                        $string = $field->field;
                                        @endphp
                                        {{-- Keep existing logic for other menus --}}
                                        @if ($field->type == 'enum')
                                        <td class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{-- Existing enum logic --}}
                                        </td>
                                        @elseif ($field->type == 'file')
                                        <td class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{-- Existing file logic --}}
                                        </td>
                                        @else
                                        <td class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{ $detail->$string }}
                                        </td>
                                        @endif
                                        @endforeach
                                        @endif
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- Paging & info dihandle oleh DataTables secara client-side -->
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper" id="noted">
                                <code style="display: flex; align-items: flex-start;">
                                    <!-- Label Note -->
                                    <span style="margin-right: 8px;">Note :</span>

                                    <!-- Daftar Status (Berjejer ke bawah) -->
                                    <div style="display: flex; flex-direction: column; gap: 2px;">
                                        <div>
                                            <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                            Data not active
                                        </div>
                                        <div>
                                            <i aria-hidden="true" style="color: #fff9c4; background-color: #fff9c4; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i>
                                            Data Proses
                                        </div>
                                        <div>
                                            <i aria-hidden="true" style="color: #ffce99; background-color: #ffce99; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i>
                                            Data Update
                                        </div>
                                        <div>
                                            <i aria-hidden="true" style="color: #e3f2fd; background-color: #e3f2fd; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i>
                                            Data Update PPN
                                        </div>

                                        <!-- @if($sap_status)
                                            <div>
                                                @if(is_array($sap_status) ? in_array('Proses', $sap_status) : $sap_status == 'Proses')
                                                    <span style="display: inline-block; margin-right: 10px;">
                                                        <i aria-hidden="true" style="color: #fff9c4; background-color: #fff9c4; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i> 
                                                        Data Proses
                                                    </span>
                                                @endif
                                            </div>
                                        @endif -->
                                    </div>
                                </code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="searchVendorModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color: white;">
                    <i class="fas fa-search me-2" style="color: white;"></i>Search Vendor
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label">Vendor Code / Name</label>
                        <div class="input-group mb-2">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text"
                                id="vendorCode"
                                class="form-control"
                                placeholder="Masukkan kode atau nama vendor (contoh: 100567 atau Multi Spunindo)">
                        </div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Anda bisa mencari berdasarkan kode vendor atau nama vendor
                        </small>
                    </div>
                </div>

                <div id="searchResult" class="mt-3 d-none"></div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Close
                </button>
                <button class="btn btn-info" onclick="searchVendor()">
                    <i class="fas fa-search me-1"></i>Search
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="sapPreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            {{-- Header (selalu tampil) --}}
            <div class="modal-header">
                <h5 class="modal-title" style="color:white;">
                    <i class="fas fa-sync-alt me-2"></i>
                    Preview &amp; Sinkronisasi Data Vendor SAP
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            {{-- Loading Overlay (di dalam modal-content, di bawah header) --}}
            <div id="sapLoadingOverlay">
                <div class="sap-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>

            {{-- Body --}}
            <div class="modal-body">

                {{-- Error box --}}
                <div id="sapErrBox" style="display:none;">
                    <div class="alert alert-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <span id="sapErrMsg">Terjadi kesalahan.</span>
                    </div>
                </div>

                {{-- Summary --}}
                <div id="sapSummaryBar" style="display:none;">
                    <div class="sap-chip total">
                        <div>
                            <div class="cnum" id="chipTotal">0</div>
                            <div style="font-size:.67rem;color:#6c757d;">Total SAP</div>
                        </div>
                    </div>
                    <div class="sap-chip new">
                        <i class="fas fa-plus-circle"></i>
                        <div>
                            <div class="cnum" id="chipNew">0</div>
                            <div style="font-size:.67rem;">Vendor Baru</div>
                        </div>
                    </div>
                    <div class="sap-chip exists">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <div class="cnum" id="chipExists">0</div>
                            <div style="font-size:.67rem;">Sudah Ada di DB</div>
                        </div>
                    </div>
                    <div class="sap-chip changed">
                        <i class="fas fa-edit"></i>
                        <div>
                            <div class="cnum" id="chipChanged">0</div>
                            <div style="font-size:.67rem;">Perlu Update</div>
                        </div>
                    </div>
                    <span class="ms-auto" style="font-size:.73rem;color:#6c757d;">
                        <i class="fas fa-info-circle me-1"></i>
                        Vendor baru otomatis tercentang. Hapus centang bila tidak ingin diinsert.
                    </span>
                </div>

                {{-- Filter + Search --}}
                <div id="sapFilterRow" style="display:none;">
                    <button class="sap-tab all active" onclick="sapSetFilter('all')">
                        Semua&nbsp;<span id="tabCountAll">0</span>
                    </button>
                    <button class="sap-tab new" onclick="sapSetFilter('new')">
                        <i class="fas fa-plus me-1"></i>Baru&nbsp;<span id="tabCountNew">0</span>
                    </button>
                    <button class="sap-tab exists" onclick="sapSetFilter('exists')">
                        <i class="fas fa-check me-1"></i>Sudah Ada&nbsp;<span id="tabCountExists">0</span>
                    </button>
                    </button>
                    <button class="sap-tab changed" onclick="sapSetFilter('exists_changed')">
                        <i class="fas fa-edit me-1"></i>Perlu Update&nbsp;<span id="tabCountChanged">0</span>
                    </button>
                    <button class="sap-tab" onclick="sapSelectAllPages(true)"
                        style="border-color:#028284;color:#028284;margin-left:4px;"
                        title="Centang semua vendor baru di semua halaman">
                        <i class="fas fa-check-square me-1"></i>Check All
                    </button>
                    <button class="sap-tab" onclick="sapSelectAllPages(false)"
                        style="border-color:#dc3545;color:#dc3545;margin-left:4px;"
                        title="Batalkan semua centang di semua halaman">
                        <i class="fas fa-square me-1"></i>Uncheck All
                    </button>
                    <input type="text" id="sapSearchBox"
                        placeholder="🔍 Cari kode / nama / kota..."
                        oninput="sapOnSearch(this.value)">
                </div>

                {{-- Table --}}
                <div id="sapTableScroll" style="display:none;">
                    <table class="table table-bordered" id="sapPreviewTable">
                        <thead>
                            <tr>
                                <th style="width:32px;text-align:center;">
                                    <input type="checkbox" id="sapSelectAll"
                                        title="Pilih/batal semua vendor baru di halaman ini"
                                        onchange="sapSelectAllChange(this)">
                                </th>
                                <th>Status</th>
                                <th>Old Code<small>BPEXT</small></th>
                                <th>SAP Code<small>LIFNR</small></th>
                                <th>Corp<small>ANRED</small></th>
                                <th>Nama 1<small>NAME1</small></th>
                                <th>Nama 2<small>NAME2</small></th>
                                <th>Search Term<small>SORTL</small></th>
                                <th>Alamat<small>STRAS</small></th>
                                <th>Alamat 2<small>STR_SUPPL1</small></th>
                                <th>Alamat 3<small>STR_SUPPL2</small></th>
                                <th>Kode Pos<small>POST_CODE1</small></th>
                                <th>Kota<small>MCOD3</small></th>
                                <th>Negara<small>LAND1</small></th>
                                <th>Region<small>REGIO</small></th>
                                <th>Telepon<small>TEL_NUMBER</small></th>
                                <th>Mobile<small>R3_USER</small></th>
                                <th>Fax<small>FAX_NUMBER</small></th>
                                <th>Email<small>SMTP_ADDR</small></th>
                                <th>NPWP<small>STCD1</small></th>
                                <th>Note<small>STKZU</small></th>
                                <th>Payment Term<small>ZTERM</small></th>
                                <th>Currency<small>WAERS</small></th>
                                <th>Sales Person<small>VERKF</small></th>
                                <th>Telp LFM1<small>TELF1</small></th>
                                <th>Status Aktif<small>9 Field</small></th>
                                <th>Archiving Flag<small>XDELE</small></th>
                                <th>Central Block<small>XBLCK</small></th>
                                <th>Not Released<small>NOT_RELEASED</small></th>
                                <th>Company Code<small>SPERR</small></th>
                                <th>CoCd Del.block<small>NODEL</small></th>
                                <th>Co.cde Del Flag<small>LOEVM</small></th>
                                <th>Del. flag POrg.<small>IA3</small></th>
                                <th>Purch. block<small>IA1</small></th>
                                <th>Pur. block POrg<small>IA2</small></th>
                            </tr>
                        </thead>
                        <tbody id="sapTbody"></tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div id="sapPagRow" style="display:none;">
                    <span id="sapPagInfo"></span>
                    <div style="display:flex;gap:5px;align-items:center;">
                        <button class="spg-btn" id="sapBtnPrev"
                            onclick="sapChangePage(-1)" disabled>&#8249; Prev</button>
                        <span id="sapPagLabel"></span>
                        <button class="spg-btn" id="sapBtnNext"
                            onclick="sapChangePage(1)">Next &#8250;</button>
                    </div>
                </div>

            </div>{{-- /modal-body --}}

            {{-- Footer --}}
            <div class="modal-footer" style="display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:.7rem 1.2rem;">
                <span id="sapSelInfo" class="me-auto" style="font-size:.8rem;color:#495057;">
                    <i class="fas fa-info-circle me-1"></i>
                    Pilih vendor baru yang ingin dimasukkan ke database.
                </span>
                <button type="button" class="btn btn-secondary btn-sm"
                    data-bs-dismiss="modal"
                    style="height:34px; padding:0 16px; font-size:.84rem; font-weight:600; border-radius:9px; display:inline-flex; align-items:center; margin:0;">
                    <i class="fas fa-times me-1"></i>Tutup
                </button>
                <button type="button" id="btnDoInsert"
                    disabled onclick="sapDoInsert()"
                    style="height:34px; padding:0 20px; font-size:.84rem; border-radius:9px; display:inline-flex; align-items:center; margin:0;">
                    <i class="fas fa-database me-1"></i>Insert ke Database
                    <span id="sapSelCount" style="display:none; background:white; color:#028284; border-radius:9px; padding:1px 7px; font-weight:700; font-size:.77rem; margin-left:4px;"></span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@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>
    let columnAbjad = '';
    $(document).ready(function() {
        let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
        let columnNames = '';
        for (let index = 0; index < numColumns; index++) {
            columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
            if (columnNames == 'Status' || columnNames == 'status') {
                columnAbjad = String.fromCharCode(65 + index);
            }
        }
        //check note
        if ($('*').hasClass('exp')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
        }
        if ($('*').hasClass('stock')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
        }
        if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
        }
    });
    //set table into datatables
    $('#list_{{ $dmenu }}').DataTable({
        paging: true,
        info: true,
        searching: true,
        responsive: true,
        order: [],
        search: {
            search: "{{ request('search') }}"
        },
        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)"
        },
        responsive: true,
        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>',
                action: function() {
                    var search = $('#customSearch').val();
                    window.location.href = "{{ url($url_menu) }}?export=excel" + (search ? "&search=" + encodeURIComponent(search) : "");
                }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                action: function() {
                    var search = $('#customSearch').val();
                    window.location.href = "{{ url($url_menu) }}?export=pdf" + (search ? "&search=" + encodeURIComponent(search) : "");
                }
            },
            {
                text: '<i class="fas fa-sync-alt me-1 text-lg"></i><span class="font-weight-bold"> Sinkron SAP</span>',
                className: 'btn-sync-sap',
                action: function() {
                    syncFromSAP();
                }
            }
        ],
        initComplete: function() {
            var searchBarHtml = `
                <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();
            $(searchBarHtml).insertAfter('.dt-buttons');

            $('#customSearch').on('input keyup', function() {
                var searchValue = $(this).val();
                $('#list_{{ $dmenu }}').DataTable().search(searchValue).draw();
            });
        }
    });
    //set color button datatables
    $('.dt-button').addClass('btn btn-secondary');
    $('.dt-button').removeClass('dt-button');
    //check authorize button datatables
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1775</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1775</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1776</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1776</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1777</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1777</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1778</b><br />
<br />
<b>Warning</b>:  Attempt to read property "value" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/pages/lsvndr/list.blade.php</b> on line <b>1778</b><br />

    // Event listener untuk Enter key dengan animasi
    $(document).ready(function() {
        $('#vendorCode').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                $(this).addClass('animate__animated animate__pulse');
                setTimeout(() => {
                    $(this).removeClass('animate__animated animate__pulse');
                    searchVendor();
                }, 300);
            }
        });
    });

    /* Mapping field SAP → lokasi & label di SAP GUI */
    var SAP_BLOCK_LABELS = {
        XDELE: {
            section: 'General Data > Status',
            label: 'Archiving Flag'
        },
        XBLCK: {
            section: 'General Data > Status',
            label: 'Central Block'
        },
        NOT_RELEASED: {
            section: 'General Data > Status',
            label: 'Not Released'
        },
        SPERR: {
            section: 'Company Code > Vendor Status',
            label: 'Company Code'
        },
        NODEL: {
            section: 'Company Code > Vendor Status',
            label: 'CoCd Del.block'
        },
        LOEVM: {
            section: 'Company Code > Vendor Status',
            label: 'Co.cde deletion flag'
        },
        IA3: {
            section: 'Purchasing > Purchasing Data',
            label: 'Del. flag POrg.'
        },
        IA1: {
            section: 'Purchasing > Purchasing Data',
            label: 'Purch. block'
        },
        IA2: {
            section: 'Purchasing > Purchasing Data',
            label: 'Pur. block POrg'
        },
    };

    /* ── STATE ──────────────────────────────────────────────────────────── */
    var SAPDATA = {
        all: [],
        filtered: [],
        filter: 'all',
        search: '',
        page: 1,
        perPage: 50,
        selected: {},
        selectedUpdate: {}
    };

    /* ── HELPERS ────────────────────────────────────────────────────────── */
    function sg(id) {
        return document.getElementById(id);
    }

    function sapToggleEl(id, show) {
        var el = sg(id);
        if (el) el.style.display = show ? '' : 'none';
    }

    function sapCell(val) {
        var s = (val === null || val === undefined) ? '' : String(val).trim();
        if (!s) return '<span style="color:#ccc;font-size:.72rem;">—</span>';
        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    function sapAttr(val) {
        if (!val) return '';
        return String(val).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    /* ── ENTRY POINT ────────────────────────────────────────────────────── */
    function syncFromSAP() {
        /* reset state */
        SAPDATA.all = [];
        SAPDATA.filtered = [];
        SAPDATA.filter = 'all';
        SAPDATA.search = '';
        SAPDATA.page = 1;
        SAPDATA.selected = {};

        /* reset UI */
        sapToggleEl('sapLoadingOverlay', true);
        ['sapSummaryBar', 'sapFilterRow', 'sapTableScroll', 'sapPagRow', 'sapErrBox']
        .forEach(function(id) {
            sapToggleEl(id, false);
        });

        var tb = sg('sapTbody');
        if (tb) tb.innerHTML = '';
        var sb = sg('sapSearchBox');
        if (sb) sb.value = '';
        var btn = sg('btnDoInsert');
        if (btn) btn.disabled = true;
        sapToggleEl('sapSelCount', false);
        sapSelInfoReset();

        /* reset tab */
        document.querySelectorAll('.sap-tab').forEach(function(t) {
            t.classList.remove('active');
        });
        var allTab = document.querySelector('.sap-tab.all');
        if (allTab) allTab.classList.add('active');

        /* buka modal */
        var modalEl = sg('sapPreviewModal');
        var modal = new bootstrap.Modal(modalEl);
        modal.show();

        /* fetch */
        var csrfMeta = document.querySelector('meta[name="csrf-token"]');
        var csrf = csrfMeta ? csrfMeta.content : '';

        fetch("{{ url($url_menu . '/sync-sap/preview') }}", {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf
                }
            })
            .then(function(r) {
                return r.text().then(function(txt) {
                    var json;
                    try {
                        json = JSON.parse(txt);
                    } catch (e) {
                        throw new Error('Response bukan JSON (HTTP ' + r.status + '). Cek Laravel log.');
                    }
                    if (!r.ok) throw new Error(json.message || 'HTTP ' + r.status);
                    return json;
                });
            })
            .then(function(res) {
                sapToggleEl('sapLoadingOverlay', false);
                if (!res.success) throw new Error(res.message || 'Gagal mengambil data SAP.');
                if (!res.data || !res.data.length) throw new Error('Data SAP kosong.');

                SAPDATA.all = res.data;
                sapRenderStats();
                sapApplyFilter();
                ['sapSummaryBar', 'sapFilterRow', 'sapTableScroll', 'sapPagRow']
                .forEach(function(id) {
                    sapToggleEl(id, true);
                });
            })
            .catch(function(err) {
                sapToggleEl('sapLoadingOverlay', false);
                sapToggleEl('sapErrBox', true);
                var errEl = sg('sapErrMsg');
                if (errEl) errEl.textContent = err.message;
            });
    }

    /* ── STATS ──────────────────────────────────────────────────────────── */
    function sapRenderStats() {
        var total = SAPDATA.all.length;
        var newCnt = SAPDATA.all.filter(v => v._status === 'new').length;
        var changedCnt = SAPDATA.all.filter(v => v._status === 'exists_changed').length;
        var exCnt = SAPDATA.all.filter(v => v._status === 'exists_unchanged').length;

        sg('chipTotal').textContent = total;
        sg('chipNew').textContent = newCnt;
        sg('chipChanged').textContent = changedCnt;
        sg('chipExists').textContent = exCnt;
        sg('tabCountAll').textContent = total;
        sg('tabCountNew').textContent = newCnt;
        sg('tabCountChanged').textContent = changedCnt;
        sg('tabCountExists').textContent = exCnt; // exists_unchanged

        // Auto-select semua vendor baru untuk insert
        SAPDATA.selected = {};
        SAPDATA.all.forEach(v => {
            if (v._status === 'new') SAPDATA.selected[v.BPEXT] = true;
        });

        // Auto-select semua yang berubah untuk update
        SAPDATA.selectedUpdate = {};
        SAPDATA.all.forEach(v => {
            if (v._status === 'exists_changed') SAPDATA.selectedUpdate[v.BPEXT] = true;
        });

        sapUpdateInsertBtn();
    }

    /* ── FILTER TAB ─────────────────────────────────────────────────────── */
    function sapSetFilter(f) {
        SAPDATA.filter = f;
        SAPDATA.page = 1;
        document.querySelectorAll('.sap-tab').forEach(function(t) {
            t.classList.remove('active');
        });
        var tab = document.querySelector('.sap-tab.' + f);
        if (tab) tab.classList.add('active');
        sapApplyFilter();
    }

    /* ── SEARCH ─────────────────────────────────────────────────────────── */
    function sapOnSearch(val) {
        SAPDATA.search = val.trim();
        SAPDATA.page = 1;
        sapApplyFilter();
    }

    /* ── APPLY FILTER + SEARCH ──────────────────────────────────────────── */
    function sapApplyFilter() {
        var q = SAPDATA.search.toLowerCase();
        SAPDATA.filtered = SAPDATA.all.filter(function(v) {
            if (SAPDATA.filter === 'exists' && v._status !== 'exists_unchanged') return false;
            else if (SAPDATA.filter !== 'all' && SAPDATA.filter !== 'exists' && v._status !== SAPDATA.filter) return false;
            if (q) {
                var hay = [
                    v.BPEXT, v.LIFNR, v.NAME1, v.NAME2, v.NAME3, v.NAME4,
                    v.ANRED, v.SORTL, v.STRAS, v.MCOD3, v.LAND1, v.REGIO,
                    v.STCD1, v.SMTP_ADDR, v.ZTERM
                ].join(' ').toLowerCase();
                if (hay.indexOf(q) === -1) return false;
            }
            return true;
        });
        sapRenderPage();
    }

    /* ── RENDER PAGE ────────────────────────────────────────────────────── */
    // IA cell helper
    function iaCell(val) {
        var v2 = String(val || '').trim().toUpperCase();
        if (v2 === 'X') return '<span class="b-inactive" title="Diblokir">X</span>';
        return '<span style="color:#ccc;font-size:.72rem;">—</span>';
    }

    function sapRenderPage() {
        var total = SAPDATA.filtered.length;
        var pages = Math.max(1, Math.ceil(total / SAPDATA.perPage));
        SAPDATA.page = Math.min(SAPDATA.page, pages);

        var start = (SAPDATA.page - 1) * SAPDATA.perPage;
        var slice = SAPDATA.filtered.slice(start, start + SAPDATA.perPage);
        var tbody = sg('sapTbody');
        if (!tbody) return;
        var rows = [];

        if (!slice.length) {
            rows.push('<tr><td colspan="25" 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) {
                var isNew = v._status === 'new';
                var isChanged = v._status === 'exists_changed';
                var isUnchanged = v._status === 'exists_unchanged';

                function diffCellContact(v) {
                    if (!isChanged || !v._diffs || !v._diffs['contact_persons']) {
                        return sapCell(v.VERKF);
                    }
                    var d = v._diffs['contact_persons'];
                    return `<div style="line-height:1.6;">
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin-bottom:1px;">
                            <i class="fas fa-database" style="font-size:.6rem;"></i> Sistem
                        </div>
                        <div class="cell-diff-old">${sapCell(d.db_value) || '—'}</div>
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin:2px 0 1px;">
                            <i class="fas fa-cloud-download-alt" style="font-size:.6rem;"></i> SAP
                        </div>
                        <div class="cell-diff-new">${sapCell(d.sap_value) || '—'}</div>
                    </div>`;
                }

                function diffCellPhone(v) {
                    if (!isChanged || !v._diffs || !v._diffs['contact_phone']) {
                        return sapCell(v.TELF1);
                    }
                    var d = v._diffs['contact_phone'];
                    return `<div style="line-height:1.6;">
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin-bottom:1px;">
                            <i class="fas fa-database" style="font-size:.6rem;"></i> Sistem
                        </div>
                        <div class="cell-diff-old">${sapCell(d.db_value) || '—'}</div>
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin:2px 0 1px;">
                            <i class="fas fa-cloud-download-alt" style="font-size:.6rem;"></i> SAP
                        </div>
                        <div class="cell-diff-new">${sapCell(d.sap_value) || '—'}</div>
                    </div>`;
                }

                var isInactive = v._isactive === '0';
                var isInconsistent = v._inconsistent === true;
                var activeBadge;
                if (isInconsistent) {
                    activeBadge = '<span class="b-inconsistent" title="Data tidak konsisten"><i class="fas fa-exclamation-triangle me-1"></i>Inconsistent</span>';
                } else if (isChanged && v._diffs && v._diffs['isactive']) {
                    activeBadge = diffCell('isactive', v._isactive === '1' ? 'Active' : 'Non Active');
                } else if (isInactive) {
                    activeBadge = '<span class="b-nonactive" title="Tidak aktif"><i class="fas fa-ban me-1"></i>Non Active</span>';
                } else {
                    activeBadge = '<span class="b-active" title="Aktif"><i class="fas fa-check-circle me-1"></i>Active</span>';
                }

                var rowClass = isNew ? 'row-new' :
                    isChanged ? 'row-changed' :
                    'row-exists';
                if (isInactive) rowClass += ' row-sap-inactive';

                var badge = isNew ? '<span class="b-new"><i class="fas fa-plus me-1"></i>Baru</span>' :
                    isChanged ? '<span class="b-changed"><i class="fas fa-edit me-1"></i>Perlu Update</span>' :
                    '<span class="b-exists"><i class="fas fa-check me-1"></i>Sama</span>';

                // Checkbox: new → insert checkbox, changed → update checkbox
                var chk;
                if (isNew) {
                    chk = `<input type="checkbox" class="sap-chk" data-code="${sapAttr(v.BPEXT)}" data-mode="insert"
                      ${SAPDATA.selected[v.BPEXT] ? 'checked' : ''}
                      onchange="sapToggle(this)">`;
                } else if (isChanged) {
                    chk = `<input type="checkbox" class="sap-chk sap-chk-update" data-code="${sapAttr(v.BPEXT)}" data-mode="update"
                      ${SAPDATA.selectedUpdate[v.BPEXT] ? 'checked' : ''}
                      onchange="sapToggleUpdate(this)">`;
                } else {
                    chk = `<input type="checkbox" class="sap-chk" disabled title="Tidak ada perubahan">`;
                }

                // Untuk kolom yang ada diff, tampilkan old vs new
                // Ganti fungsi diffCell di dalam sapRenderPage() → slice.forEach:
                function diffCell(fieldKey, rawVal) {
                    if (!isChanged || !v._diffs || !v._diffs[fieldKey]) {
                        return sapCell(rawVal);
                    }
                    var d = v._diffs[fieldKey];
                    return `<div style="line-height:1.6;">
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin-bottom:1px;">
                            <i class="fas fa-database" style="font-size:.6rem;"></i> Sistem
                        </div>
                        <div class="cell-diff-old">${sapCell(d.db_value) || '—'}</div>
                        <div style="font-size:.65rem;color:#6c757d;font-weight:600;margin:2px 0 1px;">
                            <i class="fas fa-cloud-download-alt" style="font-size:.6rem;"></i> SAP
                        </div>
                        <div class="cell-diff-new">${sapCell(d.sap_value) || '—'}</div>
                    </div>`;
                }

                rows.push(
                    `<tr class="${rowClass}">
                        <td style="text-align:center;">${chk}</td>
                        <td>${badge}</td>
                        <td><strong>${sapCell(v.BPEXT)}</strong></td>
                        <td>${diffCell('sap_code_vendor', v.LIFNR)}</td>
                        <td>${diffCell('corp', v.ANRED)}</td>
                        <td class="td-trunc" title="${sapAttr(v.NAME1)}${v.NAME2 ? ' ' + sapAttr(v.NAME2) : ''}"><strong>${diffCell('name', v.NAME1)}</strong></td>
                        <td>${sapCell(v.NAME2)}</td>
                        <td>${sapCell(v.SORTL)}</td>
                        <td class="td-trunc">${diffCell('office_address1', v.STRAS)}</td>
                        <td class="td-trunc">${diffCell('office_address2', v.STR_SUPPL1)}</td>
                        <td class="td-trunc">${diffCell('office_address3', v.STR_SUPPL2)}</td>
                        <td>${diffCell('post_code', v.POST_CODE1)}</td>
                        <td>${diffCell('office_city_id', v.MCOD3)}</td>
                        <td>${diffCell('country_id', v.LAND1)}</td>
                        <td>${diffCell('region_id', v.REGIO)}</td>
                        <td>${diffCell('office_telp', v.TEL_NUMBER)}</td>
                        <td>${diffCell('office_mobile', v.R3_USER)}</td>
                        <td>${diffCell('office_fax', v.FAX_NUMBER)}</td>
                        <td class="td-trunc">${diffCell('office_email', v.SMTP_ADDR)}</td>
                        <td>${diffCell('npwp_no', v.STCD1)}</td>
                        <td>${diffCell('note', (String(v.STKZU||'').toUpperCase()==='X') ? 'PPKP' : 'Non PPKP')}</td>
                        <td>${diffCell('payment_term_id', v.ZTERM)}</td>
                        <td>${diffCell('currency_id', v.WAERS)}</td>
                        <td>${diffCellContact(v)}</td>
                        <td>${diffCellPhone(v)}</td>
                        <td>${activeBadge}</td>
                        <td>${iaCell(v.XDELE)}</td>
                        <td>${iaCell(v.XBLCK)}</td>
                        <td>${iaCell(v.NOT_RELEASED)}</td>
                        <td>${iaCell(v.SPERR)}</td>
                        <td>${iaCell(v.NODEL)}</td>
                        <td>${iaCell(v.LOEVM)}</td>
                        <td>${iaCell(v.IA3)}</td>
                        <td>${iaCell(v.IA1)}</td>
                        <td>${iaCell(v.IA2)}</td>
                    </tr>`
                );
            });
        }
        tbody.innerHTML = rows.join('');

        // Aktifkan tooltip Bootstrap untuk badge inkonsisten
        setTimeout(function() {
            var tooltipEls = document.querySelectorAll('#sapTbody [data-bs-toggle="tooltip"]');
            tooltipEls.forEach(function(el) {
                var existing = bootstrap.Tooltip.getInstance(el);
                if (existing) existing.dispose();
                new bootstrap.Tooltip(el, {
                    html: true,
                    trigger: 'click hover'
                });
            });
        }, 50);

        /* pagination */
        var from = total === 0 ? 0 : start + 1;
        var to = Math.min(start + SAPDATA.perPage, total);
        var pi = sg('sapPagInfo');
        if (pi) pi.textContent = 'Menampilkan ' + from + '–' + to + ' dari ' + total + ' vendor';
        var pl = sg('sapPagLabel');
        if (pl) pl.textContent = 'Hal ' + SAPDATA.page + ' / ' + pages;
        var bp = sg('sapBtnPrev');
        if (bp) bp.disabled = SAPDATA.page <= 1;
        var bn = sg('sapBtnNext');
        if (bn) bn.disabled = SAPDATA.page >= pages;

        sapSyncSelectAll();
    }

    function sapChangePage(dir) {
        SAPDATA.page += dir;
        sapRenderPage();
    }

    /* ── CHECKBOX ───────────────────────────────────────────────────────── */
    function sapToggle(chk) {
        if (chk.checked) {
            SAPDATA.selected[chk.dataset.code] = true;
        } else {
            delete SAPDATA.selected[chk.dataset.code];
        }
        sapSyncSelectAll();
        sapUpdateInsertBtn();
    }

    function sapSelectAllPages(select) {
        SAPDATA.all.forEach(function(v) {
            if (v._status === 'new') {
                if (select) SAPDATA.selected[v.BPEXT] = true;
                else delete SAPDATA.selected[v.BPEXT];
            }
            if (v._status === 'exists_changed') {
                if (select) SAPDATA.selectedUpdate[v.BPEXT] = true;
                else delete SAPDATA.selectedUpdate[v.BPEXT];
            }
        });
        sapRenderPage();
        sapUpdateInsertBtn();
    }

    function sapSelectAllChange(chk) {
        var pageVendors = SAPDATA.filtered.slice(
            (SAPDATA.page - 1) * SAPDATA.perPage,
            SAPDATA.page * SAPDATA.perPage
        );

        var newOnPage = pageVendors.filter(function(v) {
            return v._status === 'new';
        });
        newOnPage.forEach(function(v) {
            if (chk.checked) SAPDATA.selected[v.BPEXT] = true;
            else delete SAPDATA.selected[v.BPEXT];
        });

        var changedOnPage = pageVendors.filter(function(v) {
            return v._status === 'exists_changed';
        });
        changedOnPage.forEach(function(v) {
            if (chk.checked) SAPDATA.selectedUpdate[v.BPEXT] = true;
            else delete SAPDATA.selectedUpdate[v.BPEXT];
        });

        sapRenderPage();
        sapUpdateInsertBtn();
    }

    function sapSyncSelectAll() {
        var pageVendors = SAPDATA.filtered.slice(
            (SAPDATA.page - 1) * SAPDATA.perPage,
            SAPDATA.page * SAPDATA.perPage
        );

        var checkableOnPage = pageVendors.filter(function(v) {
            return v._status === 'new' || v._status === 'exists_changed';
        });

        var sa = sg('sapSelectAll');
        if (!sa) return;

        if (checkableOnPage.length === 0) {
            sa.checked = false;
            sa.indeterminate = false;
            return;
        }

        var allChk = checkableOnPage.every(function(v) {
            if (v._status === 'new') return !!SAPDATA.selected[v.BPEXT];
            if (v._status === 'exists_changed') return !!SAPDATA.selectedUpdate[v.BPEXT];
            return false;
        });

        var someChk = checkableOnPage.some(function(v) {
            if (v._status === 'new') return !!SAPDATA.selected[v.BPEXT];
            if (v._status === 'exists_changed') return !!SAPDATA.selectedUpdate[v.BPEXT];
            return false;
        });

        sa.checked = allChk;
        sa.indeterminate = !allChk && someChk;
    }

    function sapToggleUpdate(chk) {
        if (chk.checked) {
            SAPDATA.selectedUpdate[chk.dataset.code] = true;
        } else {
            delete SAPDATA.selectedUpdate[chk.dataset.code];
        }
        sapUpdateInsertBtn();
    }

    function sapUpdateInsertBtn() {
        var insertCodes = Object.keys(SAPDATA.selected).filter(k => SAPDATA.selected[k]);
        var updateCodes = Object.keys(SAPDATA.selectedUpdate).filter(k => SAPDATA.selectedUpdate[k]);
        var totalN = insertCodes.length + updateCodes.length;

        var btn = sg('btnDoInsert');
        if (btn) btn.disabled = totalN === 0;

        if (totalN > 0) {
            sapToggleEl('sapSelCount', true);
            var parts = [];
            if (insertCodes.length) parts.push(insertCodes.length + ' insert');
            if (updateCodes.length) parts.push(updateCodes.length + ' update');
            sg('sapSelCount').textContent = parts.join(', ');

            var si = sg('sapSelInfo');
            si.innerHTML = `<i class="fas fa-check-circle me-1 text-success"></i>
                        <strong>${insertCodes.length}</strong> insert + 
                        <strong>${updateCodes.length}</strong> update dipilih`;
            si.className = 'me-auto has-sel';
        } else {
            sapToggleEl('sapSelCount', false);
            sapSelInfoReset();
        }
    }

    function sapSelInfoReset() {
        var si = sg('sapSelInfo');
        if (si) {
            si.innerHTML = '<i class="fas fa-info-circle me-1"></i>Pilih vendor baru yang ingin dimasukkan ke database.';
            si.className = 'me-auto';
        }
    }

    /* ── INSERT ─────────────────────────────────────────────────────────── */
    function sapDoInsert() {
        var insertCodes = Object.keys(SAPDATA.selected).filter(k => SAPDATA.selected[k]);
        var updateCodes = Object.keys(SAPDATA.selectedUpdate).filter(k => SAPDATA.selectedUpdate[k]);

        if (!insertCodes.length && !updateCodes.length) return;

        Swal.fire({
            title: 'Konfirmasi Insert & Update',
            html: `<div class="text-start">
            <p>Anda akan:</p>
            <ul>
                <li>Insert <strong class="text-success">${insertCodes.length} vendor baru</strong></li>
                <li>Update <strong class="text-warning">${updateCodes.length} vendor</strong> yang datanya berbeda dari SAP</li>
            </ul>
            <div class="alert alert-info py-2 px-3 mb-0" style="font-size:.82rem;border-radius:8px;">
                <i class="fas fa-info-circle me-1"></i>
                Update hanya mengubah field trigger SAP (alamat, telepon, email, NPWP, dll).
            </div>
        </div>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: `<i class="fas fa-database me-1"></i> Proses`,
            cancelButtonText: `<i class="fas fa-times me-1"></i> Batal`,
            confirmButtonColor: '#028284',
            cancelButtonColor: '#6c757d',
            showLoaderOnConfirm: true,
            preConfirm: function() {
                var csrf = document.querySelector('meta[name="csrf-token"]').content;

                var payload = {
                    selected_codes: insertCodes,
                    selected_update_codes: updateCodes
                };

                return fetch("{{ url($url_menu . '/sync-sap/insert') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrf
                        },
                        body: JSON.stringify(payload)
                    }).then(r => r.json())
                    .catch(e => {
                        Swal.showValidationMessage('Error: ' + e.message);
                    });
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then(result => {
            if (!result.isConfirmed || !result.value) return;
            var res = result.value;
            bootstrap.Modal.getInstance(sg('sapPreviewModal'))?.hide();

            var errHtml = '';
            if (res.errors && res.errors.length) {
                errHtml = `<div class="mt-2 p-2 rounded" style="background:#f8d7da;font-size:.78rem;max-height:140px;overflow-y:auto;text-align:left;">
                    <strong style="color:#842029;"><i class="fas fa-exclamation-circle me-1"></i>Gagal (${res.errors.length}):</strong>
                    <ul class="mb-0 mt-1 ps-3">
                        ${res.errors.map(e => `<li>${e}</li>`).join('')}
                    </ul>
                </div>`;
            }
            var skipHtml = (res.skipped > 0)
                ? `<div style="font-size:.78rem;color:#6c757d;margin-top:4px;"><i class="fas fa-forward me-1"></i>Dilewati: <strong>${res.skipped}</strong> (sudah ada / tidak ditemukan di SAP)</div>`
                : '';

            Swal.fire({
                title: 'Selesai!',
                html: `<div class="text-start">
                <div class="row g-2 mb-2">
                    <div class="col-6">
                        <div class="p-2 rounded" style="background:#d4edda;">
                            <small>Berhasil Diinsert</small>
                            <strong class="text-success d-block" style="font-size:1.2rem;">${res.added || 0}</strong>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 rounded" style="background:#fff3cd;">
                            <small>Berhasil Diupdate</small>
                            <strong class="text-warning d-block" style="font-size:1.2rem;">${res.updated || 0}</strong>
                        </div>
                    </div>
                </div>
                ${skipHtml}
                ${errHtml}
            </div>`,
                icon: (res.errors && res.errors.length) ? 'warning' : 'success',
                confirmButtonColor: '#028284',
                confirmButtonText: 'OK, Muat Ulang'
            }).then(() => location.reload());
        });
    }

    //function delete
    // function deleteData(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((result) => {
    //         if (result.isConfirmed) {
    //             event.target.closest('form').submit();
    //         }
    //     });
    // }
    function deleteData(event, name, msg) {
        event.preventDefault();

        const isDeactivating = msg === 'Non Aktifkan';
        const form = event.target.closest('form');

        if (isDeactivating) {
            // Step 1: Cek tagihan
            Swal.fire({
                title: 'Cek Tagihan Vendor',
                html: `Apakah vendor <strong>${name}</strong> masih memiliki tagihan yang menggantung?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-exclamation-circle me-1"></i> Ya, Ada Tagihan',
                cancelButtonText: '<i class="fas fa-check-circle me-1"></i> Lunas, Tidak Ada Tagihan',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#028284',
                reverseButtons: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    // Klik "Ya, Ada Tagihan" → blokir
                    Swal.fire({
                        title: 'Tidak Dapat Dinonaktifkan',
                        html: `Vendor <strong>${name}</strong> tidak dapat dinonaktifkan.<br>Pastikan tagihan telah <strong>Lunas</strong>!`,
                        icon: 'error',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'Mengerti',
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    // Klik "Lunas, Tidak Ada Tagihan" → lanjut konfirmasi nonaktifkan
                    Swal.fire({
                        title: 'Konfirmasi',
                        text: `Apakah Anda Yakin Non Aktifkan Data ${name} ini?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Non Aktifkan',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284',
                    }).then((result2) => {
                        if (result2.isConfirmed) {
                            form.submit();
                        }
                    });
                }
            });
        } else {
            // Aksi Aktifkan → langsung konfirmasi biasa
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }
    }

    //function propose
    function proposeData(event, name) {
        event.preventDefault();

        const form = event.target.closest('form');

        Swal.fire({
            title: 'Konfirmasi Pengajuan',
            text: `Apakah Anda yakin ingin mengajukan vendor "${name}" untuk persetujuan?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, Ajukan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#17a2b8'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    }
</script>
@endpush