@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-update,
    tr.row-update:hover,
    tr.row-update:focus,
    tr.row-update:active {
        background-color: #ffce99 !important;
    }

    .table tbody tr td,
    .table thead tr th {
        vertical-align: middle !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-sap-check {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        transition: all 0.3s ease;
    }

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

    /* Badge Status */
    .badge-sap {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 20px;
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .badge-sap i {
        font-size: 1rem;
    }

    /* Checkbox styling */
    .vendor-check {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .vendor-check:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    #checkAll {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    /* Modal CEK SAP - Enhanced styling */
    #modalCekSAP .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    }

    #modalCekSAP h5.fw-bold {
        font-size: 1.4rem;
        color: #1a1a2e;
    }

    #modalCekSAP #sap-loading-subtitle {
        font-size: 1rem;
        font-weight: 600;
        color: #444;
    }

    #modalCekSAP #sap-progress-log {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        min-height: 28px;
    }

    #modalCekSAP #sap-progress-counter {
        font-size: 13px;
        font-weight: 600;
        color: #555;
    }

    #modalCekSAP #sap-summary-found {
        font-size: 1rem;
        font-weight: 700;
        color: #1a7a3c;
    }

    #modalCekSAP #sap-summary-notfound {
        font-size: 1rem;
        font-weight: 700;
        color: #b91c1c;
    }

    #modalCekSAP #sap-update-info {
        background-color: #f0f4ff !important;
        border-left: 4px solid #667eea;
        font-size: 14px;
        font-weight: 600;
    }

    #modalCekSAP #sap-update-info .fw-semibold {
        font-size: 0.95rem;
        color: #1a1a2e;
    }

    #modalCekSAP .btn-success {
        background: linear-gradient(135deg, #1a7a3c 0%, #28a745 100%);
        border: none;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 10px 30px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
    }

    #modalCekSAP .btn-secondary {
        font-weight: 700;
        font-size: 0.95rem;
        padding: 10px 30px;
        border-radius: 10px;
    }

    #sap-combined-list {
        scrollbar-width: thin;
        scrollbar-color: #c3c3c3 #f5f5f5;
        font-weight: 700;
    }

    #sap-combined-list::-webkit-scrollbar {
        width: 6px;
    }

    #sap-combined-list::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 10px;
    }

    #sap-combined-list::-webkit-scrollbar-thumb {
        background-color: #c3c3c3;
        border-radius: 10px;
    }
</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">List {{ $title_menu }}</h5>
                        </div>
                        <div class="col">
                            {{-- alert --}}
                            @include('components.alert')
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                {{-- button add --}}
                                <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                        class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</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)
                                        {{-- Checkbox Column --}}
                                        <th width="40" class="text-center">
                                            <input type="checkbox" id="checkAll" title="Pilih Semua">
                                        </th>
                                        {{-- Action Column First --}}
                                        <th width="110">Action</th>
                                        <th>No</th>
                                        <th>SAP Code Vendor</th>

                                        {{-- Vendor Information --}}
                                        <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> -->

                                        {{-- Note --}}
                                        <th>Note</th>

                                        {{-- Status & Approver --}}
                                        <th>Status</th>
                                        <th>Status Upload</th>
                                        @if(auth()->user()->idroles == 'msjits')
                                        <th>User Pengaju</th>
                                        <th>Waktu Pengajuan</th>
                                        @endif
                                        @else
                                        <th>No</th>
                                        {{-- For other menus, use default header --}}
                                        @foreach ($table_header as $header)
                                        <th>{{ $header->alias }}</th>
                                        @endforeach
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $recentUpdateLogs = (auth()->user()->idroles == 'msjits')
                                        ? DB::table('rp_vendor_log as r')
                                            ->leftJoin('users as u', 'r.username', '=', 'u.username')
                                            ->where('r.action', 'Update')
                                            ->orderBy('r.id', 'desc')
                                            ->limit(50)
                                            ->select('r.old_code_vendor', 'r.sap_code_vendor', 'r.name', 'r.username', 'r.created_at', 'u.firstname')
                                            ->get()
                                        : collect();
                                    @endphp
                                    {{-- 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 trvndr, use id directly since it has no sys_table primary key mapping
                                    if($dmenu) {
                                    $primary = $detail->id;
                                    }

                                    $vcount = $loop->iteration;

                                    // Get related data for trvndr
                                    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();
                                    $rejected_by = DB::table('users')->where('username', $detail->rejected_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 == 'Update' ? 'row-update' : '') 
                                    }}">
                                        @if($dmenu)
                                        {{-- Checkbox per row --}}
                                        <td class="text-center align-middle">
                                            @php
                                            $isCheckable = in_array($detail->id, $sapCheckVendorIds ?? []);
                                            @endphp
                                            <input type="checkbox"
                                                class="vendor-check"
                                                value="{{ $detail->id }}"
                                                {{ !$isCheckable ? 'disabled' : '' }}
                                                title="{{ !$isCheckable ? 'Vendor ini tidak dapat dipilih' : '' }}">
                                        </td>
                                        {{-- Action Dropdown Column First --}}
                                        <td class="text-sm font-weight-normal align-middle">
                                            @php
                                            $isProcessed = in_array($detail->id, $processedVendorIds ?? []) || (!empty($detail->sap_code_vendor) && in_array($detail->sap_code_vendor, $processedVendorCodes ?? []));
                                            @endphp
                                            @if($isProcessed)
                                            <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</span>
                                            </button>
                                            @else
                                            <form action="{{ route('trupdt.process', ['id' => encrypt($detail->id)]) }}" method="POST" style="display: inline; margin: 0;" class="process-form">
                                                @csrf
                                                <button class="btn btn-warning btn-sm mb-0 px-3" type="submit" title="Process Update" onclick="return confirmProcess(event, '{{ addslashes($detail->name) }}', {{ $detail->id }})">
                                                    <i class="fas fa-play"> </i><span class="font-weight-bold"> Process</span>
                                                </button>
                                            </form>
                                            @endif
                                        </td>

                                        <td>{{ $table_detail->firstItem() + $loop->index }}</td>
                                        <td class="text-sm">{{ $detail->sap_code_vendor ?? '-' }}</td>

                                        {{-- Vendor Information --}}
                                        <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> -->

                                        {{-- Note --}}
                                        <td class="text-sm">{{ $detail->note }}</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>

                                        {{-- User Pengaju & Waktu Pengajuan (role msjits) --}}
                                        @if(auth()->user()->idroles == 'msjits')
                                        @php
                                            $matchedLog = $recentUpdateLogs->first(function($log) use ($detail) {
                                                if (!empty($detail->old_code_vendor) && $log->old_code_vendor === $detail->old_code_vendor) return true;
                                                if (!empty($detail->sap_code_vendor) && $log->sap_code_vendor === $detail->sap_code_vendor) return true;
                                                if (!empty($detail->name) && $log->name === $detail->name) return true;
                                                return false;
                                            });
                                            $pengajuUpdate = $matchedLog ? ($matchedLog->firstname ?: $matchedLog->username) : '-';
                                            $waktuUpdate = ($matchedLog && !empty($matchedLog->created_at)) ? \Carbon\Carbon::parse($matchedLog->created_at)->format('d/m/Y H:i') : '-';
                                        @endphp
                                        <td class="text-sm font-weight-bold text-dark">{{ $pengajuUpdate }}</td>
                                        <td class="text-sm text-dark">{{ $waktuUpdate }}</td>
                                        @endif

                                        @else
                                        <td>{{ $table_detail->firstItem() + $loop->index }}</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>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    Data {{ $table_detail->firstItem() }} - {{ $table_detail->lastItem() }}
                                    dari {{ $table_detail->total() }} data.
                                </div>
                                <div>
                                    {{ $table_detail->appends(request()->query())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </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>

                                    <div style="display: flex; flex-direction: column; gap: 2px;">
                                        <div>
                                            <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                            Data Update Not Active
                                        </div>
                                        <div>
                                            <i aria-hidden="true" style="color: #ffce99;" class="fas fa-circle"></i>
                                            Data Update
                                        </div>
                                    </div>
                                </code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Search Vendor Modal -->
<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>
{{-- Modal Cek SAP --}}
<div class="modal fade" id="modalCekSAP" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-body p-4">

                {{-- STATE 1: Loading / Progress --}}
                <div id="sap-state-loading" class="text-center">
                    <h5 class="fw-bold mb-1">Memvalidasi Vendor</h5>
                    <p class="text-muted mb-3" id="sap-loading-subtitle">Sedang mengecek vendor di SAP</p>

                    <div class="progress mb-2" style="height: 28px; border-radius: 8px;">
                        <div id="sap-progress-bar"
                            class="progress-bar bg-success"
                            role="progressbar"
                            style="width: 0%; transition: width 0.4s ease; font-size: 13px; font-weight: 600;">
                            0%
                        </div>
                    </div>

                    <div id="sap-progress-log" class="text-start mt-2" style="font-size: 13px; color: #555; min-height: 24px;"></div>
                    <div class="text-muted mt-1" style="font-size: 12px;" id="sap-progress-counter"></div>
                </div>

                {{-- STATE 2: Hasil --}}
                <div id="sap-state-result" class="d-none">

                    {{-- Icon --}}
                    <div class="text-center mb-3">
                        <div id="sap-result-icon"></div>
                        <h5 class="fw-bold mt-2">Validasi Selesai</h5>
                    </div>

                    {{-- Summary --}}
                    <div class="text-center mb-3">
                        <div id="sap-summary-found" class="text-success fw-semibold"></div>
                        <div id="sap-summary-notfound" class="text-danger fw-semibold"></div>
                    </div>

                    {{-- List ditemukan dan tidak --}}
                    <div id="sap-combined-list" class="d-none mb-3"
                        style="max-height: 220px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 8px; padding: 8px; background:#fff;">
                    </div>

                    {{-- Proses Update Status --}}
                    <div id="sap-update-info" class="bg-light rounded p-3 mb-3" style="font-size: 13px;">
                        <div class="fw-semibold mb-1">Proses Update Status:</div>
                        <div id="sap-update-detail"></div>
                    </div>

                    {{-- Tombol --}}
                    <div class="d-flex justify-content-center gap-2">
                        <button id="btn-update-sap" class="btn btn-success px-4">Update Vendor</button>
                        <button class="btn btn-secondary px-4" data-bs-dismiss="modal">Batal</button>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!-- @if(isset($sapStatus))
<div class="mb-3">
    @if($sapStatus == 'Sudah Upload')
        <span class="badge bg-success badge-sap">
            <i class="fas fa-check-circle"></i> Sudah Upload ke SAP
        </span>
    @elseif($sapStatus == 'Proses')
        <span class="badge bg-warning badge-sap">
            <i class="fas fa-clock"></i> Dalam Proses
        </span>
    @else
        <span class="badge bg-secondary badge-sap">
            <i class="fas fa-info-circle"></i> Belum Upload
        </span>
    @endif
</div>
@endif -->

{{-- 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() {
        const sapStatus = "{{ $sapStatus ?? 'Belum Upload' }}";
        const vendorIds = @json($vendorIds ?? []);

        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: false,
        info: false,
        searching: true,
        responsive: true,
        order: [],
        language: {
            search: "Cari :",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)"
        },
        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>',
                @if(auth()->user()->idroles == 'msjits')
                className: "{{ $showExcel ? 'btn-excel' : 'd-none' }}",
                attr: {
                    id: 'btnExportExcel'
                },
                @else
                className: "btn-excel",
                @endif
                action: function(e, dt, node, config) {
                    const vendorIds = @json($vendorIds ?? []);

                    // Cek apakah ada data yang bisa di-export
                    if (vendorIds.length === 0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Tidak Ada Data',
                            text: 'Tidak ada vendor dengan status Approved dan SAP Status "Belum Upload"',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    // Cek konflik: apakah ada vendor yang sudah diproses oleh user IT lain?
                    fetch('{{ route("vendor.check.process.conflict.update") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({ vendor_ids: vendorIds })
                    })
                    .then(r => r.json())
                    .then(conflictData => {
                        if (conflictData.conflict) {
                            const names = conflictData.conflict_names.join(', ') +
                                (conflictData.conflict_count > 3 ? `, dan ${conflictData.conflict_count - 3} vendor lainnya` : '');
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sedang Diproses User Lain',
                                html: `<div class="text-start">
                                    <p>Sebagian vendor yang akan Anda download sedang dalam proses oleh <strong>${conflictData.processed_by}</strong>.</p>
                                    <p class="mt-2 text-muted small">Vendor: ${names}</p>
                                    <p class="mt-2">Mohon tunggu hingga proses selesai atau refresh halaman untuk melihat status terkini.</p>
                                </div>`,
                                confirmButtonColor: '#028284',
                                confirmButtonText: 'Mengerti'
                            }).then(() => location.reload());
                            return;
                        }

                        // Tidak ada konflik, lanjutkan download
                        Swal.fire({
                            title: 'Mengexport data...',
                            html: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            willOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Use fetch to download file
                        fetch("{{ url($url_menu) }}?export=excel&vendor_ids=" + encodeURIComponent(JSON.stringify(vendorIds)), {
                                method: 'GET',
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Export gagal');
                                }
                                return response.blob();
                            })
                            .then(blob => {
                                // Create download link
                                const url = window.URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = 'vendor upload.xls';
                                document.body.appendChild(a);
                                a.click();

                                // Cleanup
                                window.URL.revokeObjectURL(url);
                                document.body.removeChild(a);

                                // Show success and reload
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: 'File berhasil didownload',
                                    confirmButtonColor: '#028284',
                                    timer: 2000,
                                    showConfirmButton: false
                                }).then(() => {
                                    location.reload();
                                });
                            })
                            .catch(error => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal Export',
                                    text: error.message,
                                    confirmButtonColor: '#028284'
                                });
                            });
                    })
                    .catch(() => {
                        // Jika gagal cek konflik, tetap lanjutkan download
                        Swal.fire({
                            title: 'Mengexport data...',
                            html: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            willOpen: () => { Swal.showLoading(); }
                        });
                        fetch("{{ url($url_menu) }}?export=excel&vendor_ids=" + encodeURIComponent(JSON.stringify(vendorIds)), {
                            method: 'GET',
                            headers: { 'X-Requested-With': 'XMLHttpRequest' }
                        })
                        .then(response => {
                            if (!response.ok) throw new Error('Export gagal');
                            return response.blob();
                        })
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = 'vendor upload.xls';
                            document.body.appendChild(a);
                            a.click();
                            window.URL.revokeObjectURL(url);
                            document.body.removeChild(a);
                            Swal.fire({ icon: 'success', title: 'Berhasil', text: 'File berhasil didownload', confirmButtonColor: '#028284', timer: 2000, showConfirmButton: false }).then(() => { location.reload(); });
                        })
                        .catch(error => {
                            Swal.fire({ icon: 'error', title: 'Gagal Export', text: error.message, confirmButtonColor: '#028284' });
                        });
                    });
                }
            },
            @if(auth()->user()->idroles == 'msjits') {
                text: '<i class="fas fa-cloud-upload-alt me-1"></i><span class="font-weight-bold"> Sudah Update</span>',
                className: "{{ $showSapCheck ? 'btn-sap-check' : 'd-none' }}",
                attr: {
                    id: 'btnSapCheck'
                },
                action: function(e, dt, node, config) {
                    const sapCheckVendorIds = @json($sapCheckVendorIds ?? []);

                    if (sapCheckVendorIds.length === 0) {
                        Swal.fire('Peringatan', 'Tidak ada data vendor yang sedang diproses', 'warning');
                        return;
                    }

                    // ===== PERBAIKAN: Ambil hanya checkbox yang dicentang =====
                    const checkedIds = [];
                    $('.vendor-check:checked').each(function() {
                        const val = parseInt($(this).val());
                        // Pastikan ID ada di sapCheckVendorIds (hanya yang status Update)
                        if (sapCheckVendorIds.includes(val)) {
                            checkedIds.push(val);
                        }
                    });

                    if (checkedIds.length === 0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Pilih Vendor',
                            html: 'Silakan centang minimal <b>satu vendor</b> yang ingin dicek ke SAP.',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    // Reset modal ke state loading
                    document.getElementById('sap-state-loading').classList.remove('d-none');
                    document.getElementById('sap-state-result').classList.add('d-none');
                    document.getElementById('sap-loading-subtitle').textContent =
                        `Sedang mengecek ${checkedIds.length} vendor di SAP`;
                    document.getElementById('sap-progress-bar').style.width = '0%';
                    document.getElementById('sap-progress-bar').textContent = '0%';
                    document.getElementById('sap-progress-log').textContent = '';
                    document.getElementById('sap-progress-counter').textContent = '';
                    document.getElementById('sap-combined-list').classList.add('d-none');
                    document.getElementById('sap-combined-list').innerHTML = '';

                    // Tampilkan modal
                    const modal = new bootstrap.Modal(document.getElementById('modalCekSAP'));
                    modal.show();

                    // Panggil API dengan checkedIds (bukan sapCheckVendorIds)
                    fetch('{{ route("vendor.check.sap.update") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            },
                            body: JSON.stringify({
                                vendor_ids: checkedIds
                            })
                        })
                        .then(r => r.json())
                        .then(data => {
                            if (!data.success) {
                                Swal.fire('Error', data.message, 'error');
                                modal.hide();
                                return;
                            }
                            animateProgress(data.results, checkedIds.length, function() {
                                showSapResult(data, modal);
                            });
                        })
                        .catch(err => {
                            Swal.fire('Error', 'Gagal menghubungi server: ' + err.message, 'error');
                            modal.hide();
                        });
                }
            },
            @endif {
                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() {
                    window.location.href = "{{ url($url_menu) }}?export=pdf";
                }
            }
        ],
        initComplete: function() {
            var table = this.api();

            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');

            // Event handler untuk search
            $('#customSearch').on('keyup', function() {
                var searchValue = this.value;
                table.search(searchValue).draw();
            });

            // Set initial value if exists
            var initialSearch = "{{ request('search') }}";
            if (initialSearch) {
                $('#customSearch').val(initialSearch);
                table.search(initialSearch).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/transc/trupdt/list.blade.php</b> on line <b>1364</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trupdt/list.blade.php</b> on line <b>1364</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trupdt/list.blade.php</b> on line <b>1365</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trupdt/list.blade.php</b> on line <b>1365</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trupdt/list.blade.php</b> on line <b>1366</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trupdt/list.blade.php</b> on line <b>1366</b><br />

    // Disable #checkAll thead jika tidak ada satu pun checkbox yang bisa dipilih
    (function() {
        const enabledCount = $('.vendor-check:not(:disabled)').length;
        if (enabledCount === 0) {
            $('#checkAll').prop('disabled', true);
        }
    })();


    function openSearchVendorModal() {
        $('#vendorCode').val('');
        $('#searchResult').addClass('d-none').html('');
        $('#searchVendorModal').modal('show');
    }

    function searchVendor() {
        const code = $('#vendorCode').val().trim();

        if (!code) {
            Swal.fire({
                icon: 'warning',
                title: 'Perhatian',
                text: 'Kode vendor atau nama vendor harus diisi',
                confirmButtonColor: '#028284',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown animate__faster'
                }
            });
            return;
        }

        Swal.fire({
            title: '<i class="fas fa-spinner fa-spin text-info"></i>',
            html: '<div class="mt-3"><strong>Mencari Vendor...</strong><br><small class="text-muted">Mohon tunggu sebentar</small></div>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            customClass: {
                popup: 'animate__animated animate__zoomIn animate__faster'
            }
        });

        $.ajax({
            url: "{{ url('trvndr/search-vendor') }}",
            type: "GET",
            data: {
                code_vendor: code
            },
            success: function(res) {
                Swal.close();

                if (res.status) {
                    $('#searchResult')
                        .removeClass('d-none')
                        .hide()
                        .html(`
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-check-circle fa-2x me-3 text-success"></i>
                                <strong class="fs-5">Vendor Ditemukan!</strong>
                            </div>
                            <hr class="my-3">
                            <div class="vendor-result-card">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-building text-primary me-2 mt-1"></i>
                                            <div class="flex-grow-1">
                                                <small class="text-muted d-block">Nama Vendor</small>
                                                <strong class="text-dark">${res.data.name}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-barcode text-info me-2 mt-1"></i>
                                            <div class="flex-grow-1">
                                                <small class="text-muted d-block">Kode Vendor</small>
                                                <strong class="text-dark">${res.data.code_vendor}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-industry text-secondary me-2 mt-1"></i>
                                            <div class="flex-grow-1">
                                                <small class="text-muted d-block">Corporation</small>
                                                <strong class="text-dark">${res.data.corp}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-flag text-warning me-2 mt-1"></i>
                                            <div class="flex-grow-1">
                                                <small class="text-muted d-block">Status</small>
                                                <span class="badge ${res.data.status === 'Approved' ? 'bg-success' : 
                                                    res.data.status === 'Proposed' ? 'bg-info' : 
                                                    res.data.status === 'Rejected' ? 'bg-danger' : 'bg-warning'}">
                                                    <i class="fas fa-circle me-1" style="font-size: 0.5rem;"></i>${res.data.status}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="alert"></button>
                        </div>
                    `)
                        .fadeIn(400);

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        html: '<strong>' + res.data.corp + ' ' + res.data.name + '</strong><br><small>' + res.data.code_vendor + '</small>',
                        timer: 2000,
                        showConfirmButton: false,
                        showClass: {
                            popup: 'animate__animated animate__bounceIn animate__faster'
                        }
                    });
                } else {
                    $('#searchResult')
                        .removeClass('d-none')
                        .hide()
                        .html(`
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-times-circle fa-2x me-3 text-danger"></i>
                                <strong class="fs-5">Tidak Ditemukan</strong>
                            </div>
                            <hr class="my-3">
                            <div class="text-center py-3">
                                <i class="fas fa-search fa-3x text-muted mb-3 opacity-50"></i>
                                <p class="mb-2">Vendor dengan kode/nama</p>
                                <h5 class="text-danger">"${code}"</h5>
                                <p class="text-muted mb-0">${res.message}</p>
                            </div>
                            <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="alert"></button>
                        </div>
                    `)
                        .fadeIn(400);

                    Swal.fire({
                        icon: 'info',
                        title: 'Tidak Ditemukan',
                        text: res.message,
                        confirmButtonColor: '#028284',
                        showClass: {
                            popup: 'animate__animated animate__shakeX animate__faster'
                        }
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.close();

                let errorMessage = 'Terjadi kesalahan saat mencari vendor';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }

                $('#searchResult')
                    .removeClass('d-none')
                    .hide()
                    .html(`
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-exclamation-triangle fa-2x me-3 text-danger"></i>
                            <strong class="fs-5">Error!</strong>
                        </div>
                        <hr class="my-3">
                        <div class="text-center py-2">
                            <p class="mb-0">${errorMessage}</p>
                        </div>
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="alert"></button>
                    </div>
                `)
                    .fadeIn(400);

                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: errorMessage,
                    confirmButtonColor: '#028284',
                    showClass: {
                        popup: 'animate__animated animate__shakeX'
                    }
                });
            }
        });
    }

    $(document).on('click', '#btnUpdateStatus', function() {
        const status = $(this).data('status');
        updateSapStatus(vendorIds, status);
    });

    // Sudah benar, pastikan tetap seperti ini:
    $(document).on('change', '#checkAll', function() {
        $('.vendor-check:not(:disabled)').prop('checked', $(this).is(':checked'));
    });

    $(document).on('change', '.vendor-check', function() {
        const total = $('.vendor-check:not(:disabled)').length;
        const checked = $('.vendor-check:not(:disabled):checked').length;
        $('#checkAll').prop('indeterminate', checked > 0 && checked < total);
        $('#checkAll').prop('checked', checked === total && total > 0);
    });

    // Function to reset modal state
    function resetModalState() {
        $('#loadingState').removeClass('d-none');
        $('#successState').addClass('d-none');
        $('#errorState').addClass('d-none');
        $('#btnUpdateStatus').addClass('d-none');
    }

    function checkSapStatus(vendorIds) {
        $.ajax({
            url: "{{ route('vendor.check.sap.update') }}",
            method: 'POST',
            data: {
                vendor_ids: vendorIds,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                $('#loadingState').addClass('d-none');

                if (response.success && response.found) {
                    // Vendor ditemukan di SAP
                    $('#vendorCodeDisplay').text(response.vendor_code || 'N/A');
                    $('#successState').removeClass('d-none');
                    $('#btnUpdateStatus')
                        .removeClass('d-none btn-danger')
                        .addClass('btn-success')
                        .html('<i class="fas fa-check me-2"></i>Update Status')
                        .off('click')
                        .on('click', function() {
                            updateSapStatus(vendorIds, 'Sudah Upload', true);
                        });
                } else {
                    // Vendor tidak ditemukan di SAP
                    $('#errorState').removeClass('d-none');
                    $('#btnUpdateStatus')
                        .removeClass('d-none btn-success')
                        .addClass('btn-danger')
                        .html('<i class="fas fa-exclamation-circle me-2"></i>Tandai Belum Upload')
                        .off('click')
                        .on('click', function() {
                            updateSapStatus(vendorIds, 'Belum Upload', false);
                        });
                }
            },
            error: function(xhr, status, error) {
                $('#loadingState').addClass('d-none');
                $('#errorState').removeClass('d-none');

                let errorMessage = 'Gagal menghubungi SAP';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }

                $('#errorState').find('.alert-danger').html(
                    '<i class="fas fa-exclamation-triangle me-2"></i>' + errorMessage
                );

                $('#btnUpdateStatus')
                    .removeClass('d-none btn-success')
                    .addClass('btn-danger')
                    .html('<i class="fas fa-exclamation-circle me-2"></i>Tandai Belum Upload')
                    .off('click')
                    .on('click', function() {
                        updateSapStatus(vendorIds, 'Belum Upload', false);
                    });
            }
        });
    }

    function updateSapStatus(vendorIds, sapStatus, found) {
        Swal.fire({
            title: 'Mengupdate status...',
            html: 'Mohon tunggu sebentar',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('vendor.update.sap.update') }}",
            method: 'POST',
            data: {
                vendor_ids: vendorIds,
                sap_status: sapStatus,
                found: found,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                Swal.close();
                $('#sapCheckModal').modal('hide');

                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        html: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.close();
                let errorMessage = 'Gagal mengupdate status';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: errorMessage,
                    confirmButtonColor: '#028284'
                });
            }
        });
    }

    // 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);
            }
        });

        // Animasi saat modal dibuka
        $('#searchVendorModal').on('shown.bs.modal', function() {
            $('#vendorCode').focus();
            $('#vendorCode').addClass('animate__animated animate__fadeInUp');
        });
    });

    // Animasi saat modal dibuka
    $('#searchVendorModal').on('shown.bs.modal', function() {
        $('#vendorCode').focus();
        $('#vendorCode').addClass('animate__animated animate__fadeInUp');
    });

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

    function animateProgress(results, total, onDone) {
        let i = 0;
        const bar = document.getElementById('sap-progress-bar');
        const log = document.getElementById('sap-progress-log');
        const counter = document.getElementById('sap-progress-counter');

        function step() {
            if (i >= results.length) {
                bar.style.width = '100%';
                bar.textContent = '100%';
                setTimeout(onDone, 400);
                return;
            }

            const item = results[i];
            const pct = Math.round(((i + 1) / total) * 100);
            bar.style.width = pct + '%';
            bar.textContent = pct + '%';
            counter.textContent = `${i + 1} dari ${total}`;

            let icon, cls, statusText;
            if (!item.found) {
                icon = '✗';
                cls = 'text-danger';
                statusText = 'Tidak ditemukan di SAP';
            } else if (item.found && !item.all_updated_synced) {
                icon = '⚠';
                cls = 'text-warning';
                const mismatchCount = (item.field_mismatches || []).length;
                statusText = `${mismatchCount} field belum sinkron di SAP`;
            } else {
                icon = '✓';
                cls = 'text-success';
                statusText = 'Semua perubahan sudah tersinkron';
            }

            log.innerHTML = `<span class="${cls}">${icon} ${item.old_code_vendor}</span> — ${statusText}`;
            i++;
            setTimeout(step, 400);
        }
        step();
    }

    function showSapResult(data, modal) {
        document.getElementById('sap-state-loading').classList.add('d-none');
        document.getElementById('sap-state-result').classList.remove('d-none');

        const results = data.results;
        const fullySynced = results.filter(r => r.found && r.all_updated_synced);
        const hasMismatch = results.filter(r => r.found && !r.all_updated_synced);
        const notFound = results.filter(r => !r.found);

        // ── Icon berdasarkan kondisi ──────────────────────────────────
        const iconEl = document.getElementById('sap-result-icon');
        if (notFound.length === 0 && hasMismatch.length === 0) {
            iconEl.innerHTML = `
                <div style="width:64px;height:64px;border-radius:50%;border:3px solid #28a745;
                            display:flex;align-items:center;justify-content:center;margin:auto;">
                    <span style="color:#28a745;font-size:28px;">✓</span>
                </div>`;
        } else if (hasMismatch.length > 0) {
            iconEl.innerHTML = `
                <div style="width:64px;height:64px;border-radius:50%;border:3px solid #ffc107;
                            display:flex;align-items:center;justify-content:center;margin:auto;">
                    <span style="color:#ffc107;font-size:28px;">⚠</span>
                </div>`;
        } else {
            iconEl.innerHTML = `
                <div style="width:64px;height:64px;border-radius:50%;border:3px solid #dc3545;
                            display:flex;align-items:center;justify-content:center;margin:auto;">
                    <span style="color:#dc3545;font-size:28px;">✗</span>
                </div>`;
        }

        // ── Summary teks ─────────────────────────────────────────────
        document.getElementById('sap-summary-found').textContent =
            `✓ ${fullySynced.length} vendor sudah tersinkron di SAP`;

        let ppnSummaryEl = document.getElementById('sap-summary-ppn');
        if (!ppnSummaryEl) {
            ppnSummaryEl = document.createElement('div');
            ppnSummaryEl.id = 'sap-summary-ppn';
            ppnSummaryEl.style.fontSize = '1rem';
            ppnSummaryEl.style.fontWeight = '700';
            document.getElementById('sap-summary-found').after(ppnSummaryEl);
        }
        ppnSummaryEl.style.color = '#b45309';
        ppnSummaryEl.textContent = hasMismatch.length > 0 ?
            `⚠ ${hasMismatch.length} vendor ada perubahan belum sinkron di SAP` :
            '';

        document.getElementById('sap-summary-notfound').textContent =
            notFound.length > 0 ? `✗ ${notFound.length} vendor tidak ditemukan di SAP` : '';

        // ── Daftar detail per vendor ──────────────────────────────────
        const combinedEl = document.getElementById('sap-combined-list');
        const allItems = [];

        // Vendor dengan mismatch — tampilkan detail field
        if (hasMismatch.length > 0) {
            const mismatchRows = hasMismatch.map(r => {
                const mismatches = r.field_mismatches || [];

                const mismatchDetail = mismatches.length > 0 ?
                    mismatches.map(m => {
                        // Khusus field PPKP/PPN, tampilkan pesan yang lebih mudah dipahami
                        let localDisplay = escapeHtml(String(m.local_value));
                        let sapDisplay = escapeHtml(String(m.sap_value));
                        let actionHint = '';

                        if (m.field === 'note') {
                            // Tentukan dari local_value (data sistem) apa yang seharusnya
                            const rawLocal = String(m.local_value ?? '');
                            if (rawLocal.includes('PPKP') && !rawLocal.includes('Non')) {
                                // Sistem = PPKP → harusnya dicentang di SAP
                                localDisplay = '✔ Liable for VAT (PPKP)';
                                sapDisplay = '✘ Belum dicentang di SAP';
                                actionHint = `
                                    <div style="margin-top:6px;padding:5px 10px;background:#fffbeb;
                                                border-radius:4px;font-size:11px;color:#92400e;font-style:italic;">
                                        💡 Harap <strong>centang</strong> "Liable for VAT" pada data vendor di SAP
                                    </div>`;
                            } else {
                                // Sistem = Non PPKP → harusnya tidak dicentang di SAP
                                localDisplay = '✘ Non PPKP (Tidak Kena PPN)';
                                sapDisplay = '✔ Masih tercentang di SAP';
                                actionHint = `
                                    <div style="margin-top:6px;padding:5px 10px;background:#fffbeb;
                                                border-radius:4px;font-size:11px;color:#92400e;font-style:italic;">
                                        💡 Harap <strong>hapus centang</strong> "Liable for VAT" pada data vendor di SAP
                                    </div>`;
                            }
                        }

                        if (m.field === 'isactive') {
                            const sapLabels = {
                                XDELE: {
                                    label: 'Archiving Flag',
                                    path: 'General Data > Status'
                                },
                                XBLCK: {
                                    label: 'Central Block',
                                    path: 'General Data > Status'
                                },
                                NOT_RELEASED: {
                                    label: 'Not Released',
                                    path: 'General Data > Status'
                                },
                                SPERR: {
                                    label: 'Company Code',
                                    path: 'Company Code > Vendor Status'
                                },
                                NODEL: {
                                    label: 'CoCd Del.block',
                                    path: 'Company Code > Vendor Status'
                                },
                                LOEVM: {
                                    label: 'Co.cde deletion flag',
                                    path: 'Company Code > Vendor Status'
                                },
                                IA3: {
                                    label: 'Del. flag POrg.',
                                    path: 'Purchasing > Purchasing Data'
                                },
                                IA1: {
                                    label: 'Purch. block',
                                    path: 'Purchasing > Purchasing Data'
                                },
                                IA2: {
                                    label: 'Pur. block POrg',
                                    path: 'Purchasing > Purchasing Data'
                                },
                            };
                            const allFields = Object.keys(sapLabels);

                            const rawSap = String(m.sap_value);
                            const xMatch = rawSap.match(/\[([^\]]+)\]\s*=\s*X/);
                            const emptyMatch = rawSap.match(/\[([^\]]+)\]\s*=\s*kosong/);

                            const isInconsistent = xMatch || emptyMatch;

                            localDisplay = escapeHtml(String(m.local_value));

                            if (isInconsistent) {
                                // ── Kondisi inkonsisten (sebagian X, sebagian kosong) ──
                                const fieldsX = xMatch ? xMatch[1].split(',').map(f => f.trim()) : [];
                                const fieldsEmpty = emptyMatch ? emptyMatch[1].split(',').map(f => f.trim()) : [];

                                sapDisplay = `Status Inkonsisten di SAP`;

                                const rowsX = fieldsX.map(f => {
                                    const info = sapLabels[f] || {
                                        label: f,
                                        path: '-'
                                    };
                                    return `<tr>
                                        <td style="padding:4px 8px;border:1px solid #fca5a5;font-weight:700;color:#dc2626;font-size:11px;">${f}</td>
                                        <td style="padding:4px 8px;border:1px solid #fca5a5;font-size:11px;">${escapeHtml(info.label)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fca5a5;font-size:11px;color:#6b7280;">${escapeHtml(info.path)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fca5a5;text-align:center;">
                                            <span style="background:#fee2e2;color:#dc2626;border-radius:4px;padding:1px 8px;font-size:10px;font-weight:700;">✓ X</span>
                                        </td>
                                    </tr>`;
                                }).join('');

                                const rowsEmpty = fieldsEmpty.map(f => {
                                    const info = sapLabels[f] || {
                                        label: f,
                                        path: '-'
                                    };
                                    return `<tr>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-weight:700;color:#d97706;font-size:11px;">${f}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-size:11px;">${escapeHtml(info.label)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-size:11px;color:#6b7280;">${escapeHtml(info.path)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;text-align:center;">
                                            <span style="background:#fef3c7;color:#d97706;border-radius:4px;padding:1px 8px;font-size:10px;font-weight:700;">✗ Kosong</span>
                                        </td>
                                    </tr>`;
                                }).join('');

                                actionHint = `
                                    <div style="margin-top:8px;">
                                        ${rowsX ? `
                                        <div style="margin-bottom:6px;">
                                            <div style="font-size:11px;font-weight:700;color:#dc2626;margin-bottom:3px;">
                                                ✓ Field sudah di-set X (sudah benar):
                                            </div>
                                            <table style="width:100%;border-collapse:collapse;">
                                                <thead><tr style="background:#fee2e2;">
                                                    <th style="padding:4px 8px;border:1px solid #fca5a5;color:#991b1b;font-size:10px;">Field</th>
                                                    <th style="padding:4px 8px;border:1px solid #fca5a5;color:#991b1b;font-size:10px;">Label SAP</th>
                                                    <th style="padding:4px 8px;border:1px solid #fca5a5;color:#991b1b;font-size:10px;">Lokasi di SAP</th>
                                                    <th style="padding:4px 8px;border:1px solid #fca5a5;color:#991b1b;font-size:10px;">Status</th>
                                                </tr></thead>
                                                <tbody>${rowsX}</tbody>
                                            </table>
                                        </div>` : ''}
                                        ${rowsEmpty ? `
                                        <div>
                                            <div style="font-size:11px;font-weight:700;color:#d97706;margin-bottom:3px;">
                                                ⚠ Field belum di-set X (perlu diupdate di SAP):
                                            </div>
                                            <table style="width:100%;border-collapse:collapse;">
                                                <thead><tr style="background:#fef3c7;">
                                                    <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Field</th>
                                                    <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Label SAP</th>
                                                    <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Lokasi di SAP</th>
                                                    <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Status</th>
                                                </tr></thead>
                                                <tbody>${rowsEmpty}</tbody>
                                            </table>
                                            <div style="margin-top:6px;padding:5px 10px;background:#fffbeb;border-radius:4px;
                                                        font-size:11px;color:#92400e;font-style:italic;">
                                                💡 Set semua field di atas menjadi <strong>X (centang)</strong> di SAP agar vendor benar-benar Nonaktif
                                            </div>
                                        </div>` : ''}
                                    </div>`;

                            } else {
                                // ── TAMBAHAN: Kondisi konsisten tapi beda (semua kosong vs Nonaktif, atau semua X vs Aktif) ──
                                const localIsNonaktif = String(m.local_value).toLowerCase().includes('nonaktif');

                                // Tentukan field mana yang perlu diubah
                                const needSetX = localIsNonaktif; // lokal Nonaktif → SAP semua kosong → perlu set X semua
                                const needClearX = !localIsNonaktif; // lokal Aktif → SAP semua X → perlu hapus X semua

                                sapDisplay = needSetX ?
                                    'Aktif di SAP (semua field kosong)' :
                                    'Nonaktif di SAP (semua field = X)';

                                const rowsAll = allFields.map(f => {
                                    const info = sapLabels[f] || {
                                        label: f,
                                        path: '-'
                                    };
                                    return `<tr>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-weight:700;
                                                    color:#d97706;font-size:11px;">${f}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-size:11px;">
                                            ${escapeHtml(info.label)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;font-size:11px;
                                                    color:#6b7280;">${escapeHtml(info.path)}</td>
                                        <td style="padding:4px 8px;border:1px solid #fde68a;text-align:center;">
                                            <span style="background:#fef3c7;color:#d97706;border-radius:4px;
                                                        padding:1px 8px;font-size:10px;font-weight:700;">
                                                ${needSetX ? '✗ Kosong → Perlu X' : '✓ X → Perlu Hapus'}
                                            </span>
                                        </td>
                                    </tr>`;
                                }).join('');

                                actionHint = `
                                    <div style="margin-top:8px;">
                                        <div style="font-size:11px;font-weight:700;color:#d97706;margin-bottom:3px;">
                                            ${needSetX
                                                ? '⚠ Semua field berikut perlu di-set X di SAP:'
                                                : '⚠ Semua field berikut perlu dihapus X-nya di SAP:'}
                                        </div>
                                        <table style="width:100%;border-collapse:collapse;">
                                            <thead><tr style="background:#fef3c7;">
                                                <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Field</th>
                                                <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Label SAP</th>
                                                <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Lokasi di SAP</th>
                                                <th style="padding:4px 8px;border:1px solid #fde68a;color:#92400e;font-size:10px;">Aksi</th>
                                            </tr></thead>
                                            <tbody>${rowsAll}</tbody>
                                        </table>
                                        <div style="margin-top:6px;padding:5px 10px;background:#fffbeb;border-radius:4px;
                                                    font-size:11px;color:#92400e;font-style:italic;">
                                            💡 ${needSetX
                                                ? 'Set <strong>semua</strong> field di atas menjadi <strong>X (centang)</strong> di SAP agar vendor Nonaktif'
                                                : 'Hapus <strong>semua</strong> X (centang) pada field di atas di SAP agar vendor kembali Aktif'}
                                        </div>
                                    </div>`;
                            }
                        }

                        return `
                            <div style="margin-top:6px;padding:8px 10px;background:#fff8e1;border-radius:6px;
                                        border-left:3px solid #ffc107;font-size:12px;">
                                <div style="font-weight:700;color:#92400e;margin-bottom:4px;">
                                    📋 ${m.field === 'note' ? 'Liable for VAT (PPKP/PPN)' : escapeHtml(m.label)}
                                </div>
                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                                    <div style="background:#dcfce7;padding:5px 8px;border-radius:4px;">
                                        <div style="font-size:10px;color:#166534;font-weight:600;margin-bottom:2px;">
                                            SEHARUSNYA (SISTEM)
                                        </div>
                                        <div style="color:#16a34a;font-weight:700;word-break:break-all;">
                                            ${localDisplay}
                                        </div>
                                    </div>
                                    <div style="background:#fee2e2;padding:5px 8px;border-radius:4px;">
                                        <div style="font-size:10px;color:#991b1b;font-weight:600;margin-bottom:2px;">
                                            KONDISI SAP SAAT INI
                                        </div>
                                        <div style="color:#dc2626;font-weight:700;word-break:break-all;">
                                            ${sapDisplay}
                                        </div>
                                    </div>
                                </div>
                                ${actionHint}
                            </div>`;
                    }).join('') :
                    `<div style="margin-top:6px;padding:6px 10px;background:#f0fff4;border-radius:6px;
                                border-left:3px solid #28a745;font-size:12px;color:#1a7a3c;font-weight:600;">
                        ✓ Tidak ada perbedaan yang terdeteksi
                    </div>`;

                return `
                    <div style="border:1px solid #fde68a;border-radius:8px;padding:12px;
                                margin-bottom:10px;background:#fffbeb;">
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
                            <span style="background:#fef3c7;border:1px solid #fbbf24;border-radius:20px;
                                        padding:2px 10px;font-size:11px;font-weight:700;color:#92400e;">
                                ${escapeHtml(r.old_code_vendor)}
                            </span>
                            <span style="font-weight:700;color:#78350f;font-size:13px;">
                                ${escapeHtml(r.vendor_name)}
                            </span>
                        </div>
                        <div style="font-size:11px;color:#b45309;margin-bottom:8px;">
                            ⚠ ${mismatches.length} field perlu disesuaikan di SAP
                        </div>
                        ${mismatchDetail}
                    </div>`;
            }).join('');

            allItems.push(`
                <div style="font-size:13px;font-weight:700;color:#b45309;padding:4px 4px 6px 4px;
                            margin-bottom:4px;border-bottom:1px solid #fde68a;">
                    ⚠ Perubahan belum sinkron di SAP (${hasMismatch.length})
                </div>
                ${mismatchRows}
            `);
        }

        // Vendor tidak ditemukan
        if (notFound.length > 0) {
            allItems.push(`
                <div style="font-size:13px;font-weight:700;color:#b91c1c;padding:4px 4px 6px 4px;
                            margin-bottom:4px;border-bottom:1px solid #f5c6cb;
                            ${hasMismatch.length > 0 ? 'margin-top:10px;' : ''}">
                    ✗ Tidak ditemukan di SAP (${notFound.length})
                </div>
                ${notFound.map(r => `
                    <div style="border:1px solid #f5c6cb;border-radius:6px;padding:8px 12px;
                                margin-bottom:6px;background:#fff5f5;">
                        <div style="font-weight:700;color:#b91c1c;font-size:13px;">
                            ✗ ${escapeHtml(r.old_code_vendor)}
                        </div>
                        <div style="font-size:12px;color:#888;">${escapeHtml(r.vendor_name ?? '')}</div>
                    </div>`).join('')}
            `);
        }

        // Vendor tersinkron
        if (fullySynced.length > 0) {
            allItems.push(`
                <div style="font-size:13px;font-weight:700;color:#1a7a3c;padding:4px 4px 6px 4px;
                            margin-bottom:4px;border-bottom:1px solid #c3e6cb;
                            ${(hasMismatch.length > 0 || notFound.length > 0) ? 'margin-top:10px;' : ''}">
                    ✓ Sudah tersinkron (${fullySynced.length})
                </div>
                ${fullySynced.map(r => {
                    // Cari info isactive dari field_matches
                    const isactiveMatch = (r.field_matches || []).find(m => m.field === 'isactive');
                    const isActiveLabel = isactiveMatch ? isactiveMatch.value : null;
                    
                    // Badge warna sesuai status aktif/nonaktif
                    const activeBadge = isActiveLabel
                        ? `<span style="display:inline-block;margin-top:4px;padding:2px 10px;border-radius:12px;
                                    font-size:11px;font-weight:700;
                                    background:${isActiveLabel === 'Aktif' ? '#d1fae5' : '#fee2e2'};
                                    color:${isActiveLabel === 'Aktif' ? '#065f46' : '#991b1b'};">
                            ${isActiveLabel === 'Aktif' ? '● Aktif' : '● Nonaktif'}
                        </span>`
                        : '';

                    // Field tersinkron selain isactive
                    const otherMatches = (r.field_matches || []).filter(m => m.field !== 'isactive');

                    return `
                        <div style="border:1px solid #c3e6cb;border-radius:6px;padding:8px 12px;
                                    margin-bottom:6px;background:#f5fff8;">
                            <div style="font-weight:700;color:#1a7a3c;font-size:13px;">
                                ✓ ${escapeHtml(r.old_code_vendor)}
                            </div>
                            <div style="font-size:12px;color:#888;">${escapeHtml(r.vendor_name ?? '')}</div>
                            ${activeBadge}
                            ${otherMatches.length > 0 ? `
                            <div style="font-size:11px;color:#6b7280;margin-top:4px;">
                                Field tersinkron: ${otherMatches.map(m => m.label).join(', ')}
                            </div>` : ''}
                        </div>`;
                }).join('')}
            `);
        }

        if (allItems.length > 0) {
            combinedEl.classList.remove('d-none');
            combinedEl.innerHTML = allItems.join('');
        }

        // ── Info update status & tombol ───────────────────────────────
        const canUpdate = fullySynced.length > 0; // hanya vendor yang sudah sinkron bisa diupdate
        const hasAnyAction = fullySynced.length > 0 || notFound.length > 0;

        // GANTI bagian lines.push yang lama
        const lines = [];
        if (fullySynced.length > 0) {
            lines.push(`
                <div style="display:flex;align-items:center;gap:8px;padding:6px 0;">
                    <span style="width:24px;height:24px;background:#d1fae5;border-radius:50%;
                                display:flex;align-items:center;justify-content:center;
                                font-size:13px;flex-shrink:0;">✓</span>
                    <span style="color:#065f46;">
                        <strong>${fullySynced.length} vendor</strong> akan diubah → 
                        <span style="background:#d1fae5;padding:2px 8px;border-radius:10px;
                                    font-size:11px;font-weight:700;">Sudah Upload + Finish</span>
                    </span>
                </div>`);
        }
        if (notFound.length > 0) {
            lines.push(`
                <div style="display:flex;align-items:center;gap:8px;padding:6px 0;">
                    <span style="width:24px;height:24px;background:#fee2e2;border-radius:50%;
                                display:flex;align-items:center;justify-content:center;
                                font-size:13px;flex-shrink:0;">✗</span>
                    <span style="color:#991b1b;">
                        <strong>${notFound.length} vendor</strong> akan diubah → 
                        <span style="background:#fee2e2;padding:2px 8px;border-radius:10px;
                                    font-size:11px;font-weight:700;">Belum Upload</span>
                    </span>
                </div>`);
        }
        if (hasMismatch.length > 0) {
            lines.push(`
                <div style="display:flex;align-items:center;gap:8px;padding:6px 0;">
                    <span style="width:24px;height:24px;background:#fef3c7;border-radius:50%;
                                display:flex;align-items:center;justify-content:center;
                                font-size:13px;flex-shrink:0;">⚠</span>
                    <span style="color:#92400e;">
                        <strong>${hasMismatch.length} vendor</strong> tidak dapat diupdate — 
                        <em style="font-size:12px;">sesuaikan data di SAP terlebih dahulu</em>
                    </span>
                </div>`);
        }
        document.getElementById('sap-update-detail').innerHTML =
            `<div style="display:flex;flex-direction:column;gap:2px;">${lines.join('')}</div>`;

        // ── Tombol Update: DISABLE jika masih ada mismatch ────────────
        const btnUpdate = document.getElementById('btn-update-sap');

        if (hasMismatch.length > 0) {
            // Ada vendor yang belum tersinkron → DISABLE tombol
            btnUpdate.disabled = true;
            btnUpdate.style.opacity = '0.5';
            btnUpdate.style.cursor = 'not-allowed';
            btnUpdate.title = 'Tidak dapat diupdate: terdapat perubahan yang belum tersinkron di SAP. ' +
                'Pastikan data di SAP sudah diperbarui sesuai perubahan di sistem.';
            btnUpdate.innerHTML = '<i class="fas fa-lock me-1"></i> Update Tidak Tersedia';
        } else if (!hasAnyAction) {
            btnUpdate.disabled = true;
            btnUpdate.style.opacity = '0.5';
            btnUpdate.innerHTML = 'Tidak Ada Aksi';
        } else {
            // Semua sudah sinkron → ENABLE tombol
            btnUpdate.disabled = false;
            btnUpdate.style.opacity = '1';
            btnUpdate.style.cursor = 'pointer';
            btnUpdate.title = '';
            btnUpdate.innerHTML = '<i class="fas fa-check me-1"></i> Update Vendor';

            btnUpdate.onclick = function() {
                // ── Loading state ─────────────────────────────────────────────
                btnUpdate.disabled = true;
                btnUpdate.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...';
                btnUpdate.style.opacity = '0.8';
                btnUpdate.style.cursor = 'not-allowed';

                // Sembunyikan tombol Batal saat proses berjalan
                const btnBatal = btnUpdate.nextElementSibling;
                if (btnBatal) {
                    btnBatal.disabled = true;
                    btnBatal.style.opacity = '0.5';
                }

                // Tampilkan progress info
                const updateInfoEl = document.getElementById('sap-update-info');
                const processingBanner = document.createElement('div');
                processingBanner.id = 'sap-processing-banner';
                processingBanner.style.cssText = `
                    background:#e0f2fe;border-left:4px solid #0284c7;border-radius:6px;
                    padding:10px 14px;margin-bottom:12px;font-size:13px;font-weight:600;color:#0369a1;
                    display:flex;align-items:center;gap:8px;
                `;
                processingBanner.innerHTML = `
                    <i class="fas fa-spinner fa-spin" style="font-size:16px;"></i>
                    <span>Sedang mengupdate status vendor...</span>
                `;
                updateInfoEl.before(processingBanner);

                fetch('{{ route("vendor.update.sap.update") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                        body: JSON.stringify({
                            results: results
                        })
                    })
                    .then(r => r.json())
                    .then(res => {
                        // Hapus banner processing
                        const banner = document.getElementById('sap-processing-banner');
                        if (banner) banner.remove();

                        modal.hide();
                        Swal.fire({
                            icon: res.success ? 'success' : 'error',
                            title: res.success ? 'Berhasil!' : 'Gagal!',
                            text: res.message,
                            timer: 2500,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    })
                    .catch(err => {
                        // Restore button jika error
                        const banner = document.getElementById('sap-processing-banner');
                        if (banner) banner.remove();

                        btnUpdate.disabled = false;
                        btnUpdate.innerHTML = '<i class="fas fa-check me-1"></i> Update Vendor';
                        btnUpdate.style.opacity = '1';
                        btnUpdate.style.cursor = 'pointer';

                        if (btnBatal) {
                            btnBatal.disabled = false;
                            btnBatal.style.opacity = '1';
                        }

                        Swal.fire('Error', 'Gagal update: ' + err.message, 'error');
                    });
            };
        }
    }

    // Helper: escape HTML untuk mencegah XSS
    function escapeHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    function confirmProcess(event, name, vendorId) {
        event.preventDefault();
        const form = event.target.closest('form');

        const doConfirm = () => {
            Swal.fire({
                title: 'Konfirmasi Proses',
                text: `Apakah Anda yakin ingin memproses update untuk vendor "${name}"?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Proses',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#fb8c00',
                cancelButtonColor: '#90a4ae'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        };

        if (vendorId) {
            Swal.fire({
                title: 'Mengecek Status...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => { Swal.showLoading(); }
            });

            fetch('{{ route("vendor.check.process.conflict.update") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ vendor_ids: [vendorId] })
            })
            .then(r => r.json())
            .then(conflictData => {
                Swal.close();
                if (conflictData.conflict) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Sedang Diproses User Lain',
                        html: `<div class="text-start">
                            <p>Vendor <strong>${escapeHtml(name)}</strong> sedang dalam proses oleh <strong>${escapeHtml(conflictData.processed_by)}</strong>.</p>
                            <p class="mt-2 text-muted small">Mohon tunggu hingga proses selesai atau refresh halaman untuk melihat status terkini.</p>
                        </div>`,
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'Mengerti'
                    }).then(() => location.reload());
                    return;
                }
                doConfirm();
            })
            .catch(() => {
                Swal.close();
                doConfirm();
            });
        } else {
            doConfirm();
        }

        return false;
    }
</script>
@endpush