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

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

    tr.row-warning,
    tr.row-warning:hover,
    tr.row-warning:focus,
    tr.row-warning:active {
        background-color: #e3f2fd !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);
    }

    @keyframes gentleShake {
        0%, 100% { transform: translateX(0); }
        20%       { transform: translateX(-6px); }
        40%       { transform: translateX(5px); }
        60%       { transform: translateX(-3px); }
        80%       { transform: translateX(2px); }
    }

    .gentle-shake {
        animation: gentleShake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

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

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

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

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

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

    #checkAllVendor:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    /* Mass Action Button Styling */
    .btn-mass-propose-vndr {
        background-color: #2dce89 !important;
        border-color: #2dce89 !important;
        color: #ffffff !important;
    }

    .btn-mass-propose-vndr:hover {
        background-color: #26af74 !important;
        border-color: #26af74 !important;
        color: #ffffff !important;
    }

    .btn-mass-activate-vndr {
        background-color: #2dce89 !important;
        border-color: #2dce89 !important;
        color: #ffffff !important;
    }

    .btn-mass-activate-vndr:hover {
        background-color: #26af74 !important;
        border-color: #26af74 !important;
        color: #ffffff !important;
    }

    .btn-mass-deactivate-vndr {
        background-color: #f5365c !important;
        border-color: #f5365c !important;
        color: #ffffff !important;
    }

    .btn-mass-deactivate-vndr:hover {
        background-color: #ec0c38 !important;
        border-color: #ec0c38 !important;
        color: #ffffff !important;
    }

    /* Preview Modal Table Styling */
    #massPreviewTableVndr {
        border-collapse: collapse !important;
    }

    #massPreviewTableVndr th,
    #massPreviewTableVndr td {
        padding: 0.55rem 0.75rem !important;
        vertical-align: middle !important;
        border: 1px solid #dee2e6 !important;
    }

    #massPreviewTableVndr thead th {
        border-bottom: 2px solid #b8c1ca !important;
    }
</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">
                            @php
                                $showSapColumn = $table_detail->contains(function($item) {
                                    return in_array($item->sap_status, ['Update PPN']);
                                });
                            @endphp
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        @if($dmenu)
                                        {{-- Checkbox Column --}}
                                        @if(auth()->user()->idroles != 'msjits')
                                        <th width="40" class="text-center">
                                            <input type="checkbox" id="checkAllVendor" title="Pilih Semua">
                                        </th>
                                        @endif
                                        {{-- Action Column First --}}
                                        <th width="110">Action</th>
                                        <th>No</th>
                                        @if($showSapColumn)
                                        <th>SAP Code Vendor</th>
                                        @endif

                                        {{-- Vendor Information --}} 
                                        <th>Corporation</th>
                                        <th>Vendor Name</th>

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

                                        <th>Address 1</th>
                                        <!-- <th>Address 2</th>
                                        <th>Address 3</th> -->
                                        <th>City</th>

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

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

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

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

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

                                        {{-- Status & Approver --}}
                                        <th>Status</th>
                                        <th>Status Upload</th>
                                        @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>
                                    {{-- 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();
                                    }

                                    $canDelete = !(
                                        in_array($detail->status, ['Proposed', 'Approved']) && 
                                        in_array($detail->sap_status, ['Belum Upload', 'Proses', 'Update PPN', 'Update'])
                                    );
                                    $isCheckable = ($detail->status != 'Proposed') && ($detail->status == 'Pending' || $canDelete);
                                    @endphp
                                    <tr class="{{ 
                                        $detail->isactive == '0' || $detail->status == 'Rejected' 
                                        ? 'row-inactive'
                                        : ($detail->sap_status == 'Proses' && $detail->note == 'Non PPKP' ? 'row-proses' : 
                                        (($detail->sap_status == 'Proses' || $detail->sap_status == 'Update PPN') && $detail->note == 'PPKP' ? 'row-warning' : '')) 
                                    }}">
                                        @if($dmenu)
                                        {{-- Checkbox Column --}}
                                        @if(auth()->user()->idroles != 'msjits')
                                        <td class="text-center align-middle">
                                            <input type="checkbox" class="vendor-check"
                                                value="{{ encrypt($detail->id) }}"
                                                data-corp="{{ addslashes($detail->corp) }}"
                                                data-name="{{ addslashes($detail->name) }}"
                                                data-status="{{ $detail->status }}"
                                                data-isactive="{{ $detail->isactive }}"
                                                {{ !$isCheckable ? 'disabled' : '' }}
                                                title="{{ !$isCheckable ? ($detail->status == 'Proposed' ? 'Data berstatus Proposed sedang dalam proses approval dan tidak dapat dipilih' : 'Data tidak dapat dipilih') : '' }}">
                                        </td>
                                        @endif
                                        {{-- Action Dropdown Column First --}}
                                        <td class="text-sm font-weight-normal align-middle">
                                            <div class="btn-group">
                                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                    title="View Data"
                                                    onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                    <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                </button>
                                                <button type="button"
                                                    class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    {{-- check authorize edit --}}
                                                    @if ($authorize->edit == '1')
                                                    {{-- check status active --}}
                                                    @if ($detail->isactive == '1')
                                                    {{-- ===== TAMBAHAN: Cek status untuk disable edit button ===== --}}
                                                    @php
                                                        $canEdit = !(
                                                            in_array($detail->status, ['Proposed', 'Approved']) && 
                                                            in_array($detail->sap_status, ['Belum Upload', 'Proses', 'Update PPN', 'Update'])
                                                        );
                                                    @endphp
                                                    
                                                    @if($canEdit)
                                                    {{-- button edit --}}
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                        title="Edit Data"
                                                        onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                        <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                            Edit</span>
                                                    </button>
                                                    @else
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                        title="Tidak dapat diedit"
                                                        disabled>
                                                        <i class="fas fa-lock"></i><span class="font-weight-bold">
                                                            Edit</span>
                                                    </button>
                                                    @endif
                                                    @endif
                                                    @endif

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

                                                    {{-- check authorize delete and data primary key not "msjit" --}}
                                                    @if ($authorize->delete == '1' && $primary != 'msjit')
                                                    {{-- ===== TAMBAHAN: Cek status untuk disable delete button ===== --}}
                                                    @php
                                                        $canDelete = !(
                                                            in_array($detail->status, ['Proposed', 'Approved']) && 
                                                            in_array($detail->sap_status, ['Belum Upload', 'Proses', 'Update PPN', 'Update'])
                                                        );
                                                    @endphp
                                                    
                                                    @if($canDelete)
                                                    <form
                                                        action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                        method="POST" style="display: inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        {{-- button delete --}}
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <button type="submit"
                                                            class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                            title="Hapus Data"
                                                            onclick="return deleteData(event, '{{ $detail->name }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                            <i class="fas fa-random"></i><span
                                                                class="font-weight-bold">
                                                                {{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                        </button>
                                                    </form>
                                                    @else
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                        title="Tidak dapat dinonaktifkan"
                                                        disabled>
                                                        <i class="fas fa-lock"></i><span
                                                            class="font-weight-bold">
                                                            Nonaktifkan</span>
                                                    </button>
                                                    @endif
                                                    @endif
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>

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

                                        {{-- Vendor Information --}}
                                        <td class="text-sm">{{ $detail->corp }}</td>
                                        <td class="text-sm font-weight-bold text-dark">{{ $detail->name }}</td>
                                        {{-- Note --}}
                                        <td class="text-sm">{{ $detail->note }}</td>

                                        <td class="text-sm">{{ $detail->office_address1 }}</td>
                                        <!-- <td class="text-sm">{{ $detail->office_address2 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->office_address3 ?? '-' }}</td> -->
                                        <td class="text-sm">{{ $detail->city_name ?? '-' }}</td>

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

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

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

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

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

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

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

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

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

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

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

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

                                        {{-- User Pengaju & Waktu Pengajuan (role msjits) --}}
                                        @if(auth()->user()->idroles == 'msjits')
                                        @php
                                            $pengajuFirstname = !empty($detail->proposed_by) 
                                                ? DB::table('users')->where('username', $detail->proposed_by)->value('firstname') 
                                                : null;
                                            $waktuPengajuan = !empty($detail->approved_at) 
                                                ? \Carbon\Carbon::parse($detail->approved_at)->format('d/m/Y H:i') 
                                                : '-';
                                        @endphp
                                        <td class="text-sm font-weight-bold text-dark">{{ $pengajuFirstname ?: ($detail->proposed_by ?: '-') }}</td>
                                        <td class="text-sm text-dark">{{ $waktuPengajuan }}</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>

                                    <!-- Daftar Status (Berjejer ke bawah) -->
                                    <div style="display: flex; flex-direction: column; gap: 2px;">
                                        @if(auth()->user()->idroles != 'msjits')
                                        <div>
                                            <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> 
                                            Data Rejected
                                        </div>
                                        @endif

                                        @if(auth()->user()->idroles == 'msjits')
                                        <!-- @if($sap_status)
                                            <div>
                                                @if(is_array($sap_status) ? in_array('Proses', $sap_status) : $sap_status == 'Proses')
                                                    <span style="display: inline-block; margin-right: 10px;">
                                                        <i aria-hidden="true" style="color: #fff9c4; background-color: #fff9c4; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i> 
                                                        Data Proses
                                                    </span>
                                                @endif
                                            </div>
                                        @endif -->
                                        <div>
                                            <span style="display: inline-block; margin-right: 10px;">
                                                <i aria-hidden="true" style="color: #fff9c4; background-color: #fff9c4; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i> 
                                                Data Proses
                                            </span>
                                        </div>
                                        <div>
                                            <span style="display: inline-block; margin-right: 10px;">
                                                <i aria-hidden="true" style="color: #e3f2fd; background-color: #e3f2fd; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i> 
                                                Data Note PPKP (Ber-PPN)
                                            </span>
                                        </div>
                                        @endif
                                    </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: 260207L001 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

{{-- ===== MASS ACTION MODAL (trvndr) ===== --}}
<div class="modal fade" id="massActionModalVndr" tabindex="-1" aria-labelledby="massActionModalVndrLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="massActionModalVndrLabel">
                    <i class="fas fa-list me-2"></i><span id="massModalTitleVndr">Konfirmasi Aksi Massal</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3" id="massModalDescVndr"></p>
                <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                    <table class="table table-bordered table-sm table-hover mb-0" id="massPreviewTableVndr" style="font-size: 0.9rem;">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="50" class="text-center">No</th>
                                <th>Corporation</th>
                                <th>Vendor Name</th>
                                <th width="120" class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody id="massPreviewBodyVndr"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Batal
                </button>
                <button type="button" class="btn btn-primary" id="btnConfirmMassVndr" onclick="submitMassActionVndr()">
                    <i class="fas fa-check me-1"></i> <span id="btnConfirmTextVndr">Konfirmasi</span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Hidden form untuk mass action trvndr --}}
<form id="formMassActionVndr" method="POST" action="">
    @csrf
    <div id="massIdsContainerVndr"></div>
</form>

@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: [
            @if(auth()->user()->idroles == 'msjits')
            {
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                className: "{{ $showExcel ? 'btn-excel' : 'd-none' }}",
                attr: { id: 'btnExportExcel' },
                action: function(e, dt, node, config) {
                    const vendorIds = @json($vendorIds ?? []);
                    
                    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") }}', {
                        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(); }
                        });
                        
                        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');
                            const disposition = response.headers.get('Content-Disposition');
                            let filename = '';
                            if (disposition) {
                                const match = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                                if (match && match[1]) {
                                    filename = match[1].replace(/['"]/g, '').trim();
                                }
                            }
                            if (!filename) {
                                const now = new Date();
                                const pad = (n) => String(n).padStart(2, '0');
                                const ts = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
                                filename = `Upload Vendor ${ts}.xlsx`;
                            }
                            return response.blob().then(blob => ({ blob, filename }));
                        })
                        .then(({ blob, filename }) => {
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = filename;
                            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'
                            });
                        });
                    })
                    .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');
                            const disposition = response.headers.get('Content-Disposition');
                            let filename = '';
                            if (disposition) {
                                const match = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                                if (match && match[1]) {
                                    filename = match[1].replace(/['"]/g, '').trim();
                                }
                            }
                            if (!filename) {
                                const now = new Date();
                                const pad = (n) => String(n).padStart(2, '0');
                                const ts = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
                                filename = `Upload Vendor ${ts}.xlsx`;
                            }
                            return response.blob().then(blob => ({ blob, filename }));
                        })
                        .then(({ blob, filename }) => {
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = filename;
                            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' });
                        });
                    });
                }
            },
            @else
            {
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                className: 'btn-excel',
                autoFilter: true,
                sheetName: 'Exported data',
                customize: function(xlsx) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                        let cell = row.querySelector('is t');
                        if (cell && cell.textContent === 'Not Active') {
                            row.setAttribute('s', '10');
                        }
                    });
                },
                exportOptions: {
                    columns: ':visible:not(:last-child)'
                },
            },
            @endif
            @if(auth()->user()->idroles == 'msjits')
            {
                text: '<i class="fas fa-cloud-upload-alt me-1"></i><span class="font-weight-bold"> Sudah Upload</span>',
                className: "{{ $showSapCheck ? 'btn-sap-check' : 'd-none' }}",
                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;
                    }

                    // 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 ${sapCheckVendorIds.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 — pakai ID yang benar
                    const modal = new bootstrap.Modal(document.getElementById('modalCekSAP'));
                    modal.show();

                    // Panggil API
                    fetch('{{ route("vendor.check.sap") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                        body: JSON.stringify({ vendor_ids: sapCheckVendorIds })
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (!data.success) {
                            Swal.fire('Error', data.message, 'error');
                            modal.hide();
                            return;
                        }
                        animateProgress(data.results, sapCheckVendorIds.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";
                }
            },
            @if(auth()->user()->idroles != 'msjits')
            {
                text: '<i class="fas fa-magnifying-glass me-1 text-lg text-info"></i><span class="font-weight-bold"> Search Vendor</span>',
                action: function() {
                    openSearchVendorModal();
                }
            },
            @endif
            @if($dmenu && auth()->user()->idroles != 'msjits')
            {
                text: '<i class="fas fa-paper-plane me-1 text-lg text-white"></i><span class="font-weight-bold"> Propose</span>',
                className: 'btn-mass-propose-vndr d-none',
                attr: {
                    id: 'dtMassBtnsProposeVndr'
                },
                action: function() {
                    openMassModal('propose');
                }
            },
            {
                text: '<i class="fas fa-ban me-1 text-lg text-white"></i><span class="font-weight-bold"> Non Aktifkan</span>',
                className: 'btn-mass-deactivate-vndr d-none',
                attr: {
                    id: 'dtMassBtnDeactivateVndr'
                },
                action: function() {
                    openMassModal('deactivate');
                }
            }
            @endif
        ],
        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/trvndr/list.blade.php</b> on line <b>1659</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trvndr/list.blade.php</b> on line <b>1659</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trvndr/list.blade.php</b> on line <b>1660</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trvndr/list.blade.php</b> on line <b>1660</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trvndr/list.blade.php</b> on line <b>1661</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trvndr/list.blade.php</b> on line <b>1661</b><br />

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

    // ===== CHECKBOX MASS ACTION LOGIC (trvndr) =====
    let massActionTypeVndr = '';

    // Check All
    $('#checkAllVendor').on('change', function() {
        $('.vendor-check:not(:disabled)').prop('checked', $(this).is(':checked'));
        updateMassButtonsVndr();
    });

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

    function updateMassButtonsVndr() {
        const checkedBoxes = $('.vendor-check:checked');
        const checked = checkedBoxes.length;
        if (checked === 0) {
            $('#dtMassBtnsProposeVndr').addClass('d-none');
            $('#dtMassBtnDeactivateVndr').addClass('d-none');
            return;
        }

        // Cek apakah ada yang berstatus Rejected atau bukan Pending
        const hasRejected = checkedBoxes.toArray().some(function(el) {
            return $(el).data('status') === 'Rejected';
        });

        const hasNonPending = checkedBoxes.toArray().some(function(el) {
            return $(el).data('status') !== 'Pending';
        });

        // Cek status isactive dari data yang dipilih
        const allInactive = checkedBoxes.toArray().every(function(el) {
            return String($(el).data('isactive')) === '0';
        });

        const allActive = checkedBoxes.toArray().every(function(el) {
            return String($(el).data('isactive')) === '1';
        });

        // Tombol Propose: hanya tampil jika semua pending, tidak ada rejected, dan tidak ada yang nonaktif
        if (hasRejected || hasNonPending || allInactive) {
            $('#dtMassBtnsProposeVndr').addClass('d-none');
        } else {
            $('#dtMassBtnsProposeVndr').html('<span><i class="fas fa-paper-plane me-1 text-lg text-white"></i><span class="font-weight-bold"> Propose (' + checked + ')</span></span>').removeClass('d-none');
        }

        // Tombol Aktifkan / Non Aktifkan
        if (allInactive) {
            // Semua data yang dipilih sedang Nonaktif -> Tampilkan tombol Aktifkan (Hijau)
            $('#dtMassBtnDeactivateVndr')
                .removeClass('d-none btn-mass-deactivate-vndr')
                .addClass('btn-mass-activate-vndr')
                .html('<span><i class="fas fa-random me-1 text-lg text-white"></i><span class="font-weight-bold"> Aktifkan (' + checked + ')</span></span>');
        } else if (allActive) {
            // Semua data yang dipilih sedang Aktif -> Tampilkan tombol Non Aktifkan (Merah)
            $('#dtMassBtnDeactivateVndr')
                .removeClass('d-none btn-mass-activate-vndr')
                .addClass('btn-mass-deactivate-vndr')
                .html('<span><i class="fas fa-ban me-1 text-lg text-white"></i><span class="font-weight-bold"> Non Aktifkan (' + checked + ')</span></span>');
        } else {
            // Campuran (ada aktif & nonaktif) -> Tampilkan tombol Toggle
            $('#dtMassBtnDeactivateVndr')
                .removeClass('d-none btn-mass-activate-vndr')
                .addClass('btn-mass-deactivate-vndr')
                .html('<span><i class="fas fa-random me-1 text-lg text-white"></i><span class="font-weight-bold"> Non Aktifkan / Aktifkan (' + checked + ')</span></span>');
        }
    }

    function openMassModal(type) {
        massActionTypeVndr = type;
        const checked = $('.vendor-check:checked');
        if (checked.length === 0) return;

        // Populate preview table
        let rows = '';
        let i = 1;
        checked.each(function() {
            const corp   = $(this).data('corp');
            const name   = $(this).data('name');
            const status = $(this).data('status');
            const isactive = $(this).data('isactive');
            let statusBadge = '';
            if (status === 'Pending') statusBadge = '<span class="badge bg-secondary">Pending</span>';
            else if (status === 'Proposed') statusBadge = '<span class="badge bg-warning">Proposed</span>';
            else if (status === 'Approved') statusBadge = '<span class="badge bg-success">Approved</span>';
            else if (status === 'Rejected') statusBadge = '<span class="badge bg-danger">Rejected</span>';
            else statusBadge = '<span class="badge bg-light text-dark">' + status + '</span>';
            rows += `<tr class="align-middle"><td class="text-center">${i++}</td><td>${corp}</td><td><strong>${name}</strong></td><td class="text-center">${statusBadge}</td></tr>`;
        });

        $('#massPreviewBodyVndr').html(rows);

        if (type === 'propose') {
            $('#massModalTitleVndr').text('Konfirmasi Propose');
            $('#massModalDescVndr').html('<i class="fas fa-paper-plane text-success me-1"></i> Vendor berikut akan diajukan untuk approval. Hanya vendor berstatus <strong>Pending</strong> yang akan diproses.');
            $('#btnConfirmMassVndr').removeClass('btn-danger').addClass('btn-success').html('<i class="fas fa-check me-1"></i> <span id="btnConfirmTextVndr">Propose</span>');
        } else {
            const allInactive = $('.vendor-check:checked').toArray().every(function(el) {
                return String($(el).data('isactive')) === '0';
            });
            if (allInactive) {
                $('#massModalTitleVndr').text('Konfirmasi Aktifkan');
                $('#massModalDescVndr').html('<i class="fas fa-check-circle text-success me-1"></i> Vendor berikut akan <strong>diaktifkan kembali</strong>.');
                $('#btnConfirmMassVndr').removeClass('btn-danger').addClass('btn-success').html('<i class="fas fa-check me-1"></i> <span id="btnConfirmTextVndr">Aktifkan</span>');
            } else {
                $('#massModalTitleVndr').text('Konfirmasi Non Aktifkan');
                $('#massModalDescVndr').html('<i class="fas fa-ban text-danger me-1"></i> Vendor berikut akan <strong>dinonaktifkan / diaktifkan</strong>. Vendor yang sedang dalam proses approval <strong>tidak dapat</strong> dinonaktifkan.');
                $('#btnConfirmMassVndr').removeClass('btn-success').addClass('btn-danger').html('<i class="fas fa-check me-1"></i> <span id="btnConfirmTextVndr">Konfirmasi</span>');
            }
        }

        $('#btnConfirmMassVndr').prop('disabled', false);
        $('#massActionModalVndr').find('[data-bs-dismiss="modal"]').prop('disabled', false);

        const modal = new bootstrap.Modal(document.getElementById('massActionModalVndr'));
        modal.show();
    }

    function submitMassActionVndr() {
        const btn = $('#btnConfirmMassVndr');
        btn.prop('disabled', true);
        btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');
        $('#massActionModalVndr').find('[data-bs-dismiss="modal"]').prop('disabled', true);

        const checked = $('.vendor-check:checked');
        const container = $('#massIdsContainerVndr');
        container.empty();

        checked.each(function() {
            container.append('<input type="hidden" name="ids[]" value="' + $(this).val() + '">');
        });

        if (massActionTypeVndr === 'propose') {
            $('#formMassActionVndr').attr('action', '{{ route("trvndr.mass.propose") }}');
        } else {
            $('#formMassActionVndr').attr('action', '{{ route("trvndr.mass.deactivate") }}');
        }

        $('#formMassActionVndr').submit();
    }
    // ===== END CHECKBOX MASS ACTION LOGIC =====

    // function open search vendor modal
    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: {
                old_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.sap_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.old_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: 'gentle-shake'
                        }
                    });
                }
            },
            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);
    });
    
    // 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') }}",
            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') }}",
            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();
            }
        });
    }

    // --- Animasi progress per item ---
    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 = 'text-danger', statusText = 'Tidak ditemukan di SAP';
            if (item.found && item.fully_matched) {
                icon = '✓'; cls = 'text-success'; statusText = 'PPKP cocok → Sudah Upload';
            } else if (item.found && item.ppn_mismatch) {
                icon = '⚠'; cls = 'text-warning'; statusText = 'Status PPKP berbeda → Update PPN';
            }
 
            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;
 
        // Kelompokkan vendor berdasarkan hasil
        const fullyMatched = results.filter(r => r.found && r.fully_matched);
        const ppnMismatch  = results.filter(r => r.found && r.ppn_mismatch);
        const notFoundList = results.filter(r => !r.found);
 
        // -------------------------------------------------------
        // Icon
        // -------------------------------------------------------
        const iconEl = document.getElementById('sap-result-icon');
        const allOk  = notFoundList.length === 0 && ppnMismatch.length === 0;
        if (allOk) {
            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 (fullyMatched.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 text
        // -------------------------------------------------------
        const summaryLines = [];
        if (fullyMatched.length > 0) summaryLines.push(`✓ ${fullyMatched.length} vendor PPKP cocok`);
        if (ppnMismatch.length > 0)  summaryLines.push(`⚠ ${ppnMismatch.length} vendor status PPKP berbeda`);
        if (notFoundList.length > 0) summaryLines.push(`✗ ${notFoundList.length} vendor tidak ditemukan di SAP`);
        document.getElementById('sap-summary-found').innerHTML =
            summaryLines.map(s => `<div>${s}</div>`).join('');
        document.getElementById('sap-summary-notfound').innerHTML = '';
 
        // -------------------------------------------------------
        // Combined list
        // -------------------------------------------------------
        const combinedEl = document.getElementById('sap-combined-list');
        let listHtml = '';
 
        // --- Tidak ditemukan ---
        if (notFoundList.length > 0) {
            listHtml += `<div style="font-size:12px;font-weight:700;color:#b91c1c;padding:4px;
                margin-bottom:4px;border-bottom:1px solid #f5c6cb;">
                ✗ Tidak ditemukan di SAP (${notFoundList.length})
            </div>`;
            notFoundList.forEach(r => {
                listHtml += `<div style="border:1px solid #f5c6cb;border-radius:6px;padding:8px 12px;
                    margin-bottom:6px;background:#fff5f5;">
                    <div style="font-weight:700;color:#b91c1c;">✗ ${r.old_code_vendor}</div>
                    <div style="font-size:12px;color:#888;">${r.vendor_name ?? ''}</div>
                </div>`;
            });
        }
 
        // --- Beda PPKP/PPN ---
        if (ppnMismatch.length > 0) {
            listHtml += `<div style="font-size:12px;font-weight:700;color:#856404;padding:4px;
                margin-bottom:4px;border-bottom:1px solid #ffc107;
                ${notFoundList.length > 0 ? 'margin-top:10px;' : ''}">
                ⚠ Status PPKP berbeda (${ppnMismatch.length}) — akan diset: Update PPN
            </div>`;
            ppnMismatch.forEach(r => {
                listHtml += `<div style="border:1px solid #ffc107;border-radius:6px;padding:8px 12px;
                    margin-bottom:6px;background:#fffdf0;">
                    <div style="font-weight:700;color:#856404;">⚠ ${r.old_code_vendor}</div>
                    <div style="font-size:12px;color:#555;">${r.vendor_name ?? ''}</div>
                    <div style="font-size:11px;color:#888;padding-left:10px;
                        border-left:2px solid #ffc107;margin-top:4px;">
                        Status PPKP (stkzu) lokal tidak cocok dengan SAP
                    </div>
                </div>`;
            });
        }
 
        // --- PPKP cocok ---
        if (fullyMatched.length > 0) {
            listHtml += `<div style="font-size:12px;font-weight:700;color:#1a7a3c;padding:4px;
                margin-bottom:4px;border-bottom:1px solid #c3e6cb;
                ${(notFoundList.length > 0 || ppnMismatch.length > 0) ? 'margin-top:10px;' : ''}">
                ✓ PPKP cocok (${fullyMatched.length}) — akan diset: Sudah Upload + Finish
            </div>`;
            fullyMatched.forEach(r => {
                listHtml += `<div style="border:1px solid #c3e6cb;border-radius:6px;padding:8px 12px;
                    margin-bottom:6px;background:#f5fff8;">
                    <div style="font-weight:700;color:#1a7a3c;">✓ ${r.old_code_vendor}</div>
                    <div style="font-size:12px;color:#555;">${r.vendor_name ?? ''}</div>
                    ${r.sap_code_vendor
                        ? `<div style="font-size:11px;color:#888;">SAP Code (lifnr): ${r.sap_code_vendor}</div>`
                        : ''}
                </div>`;
            });
        }
 
        if (listHtml) {
            combinedEl.classList.remove('d-none');
            combinedEl.innerHTML = listHtml;
        }
 
        // -------------------------------------------------------
        // Info update status
        // -------------------------------------------------------
        const lines = [];
        if (fullyMatched.length > 0)
            lines.push(`<span class="text-success">• ${fullyMatched.length} vendor → <b>Sudah Upload</b> + status <b>Finish</b></span>`);
        if (ppnMismatch.length > 0)
            lines.push(`<span class="text-warning">• ${ppnMismatch.length} vendor → <b>Update PPN</b> (stkzu berbeda)</span>`);
        if (notFoundList.length > 0)
            lines.push(`<span class="text-danger">• ${notFoundList.length} vendor → <b>Belum Upload</b> (tidak ada di SAP)</span>`);
        document.getElementById('sap-update-detail').innerHTML = lines.join('<br>');
 
        // -------------------------------------------------------
        // Tombol Update
        // -------------------------------------------------------
        document.getElementById('btn-update-sap').onclick = function () {
            const btnUpdate = this;
            btnUpdate.disabled = true;
            btnUpdate.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...';

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

            // Banner loading di dalam modal
            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") }}', {
                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 => {
                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!',
                    html: res.message,
                    timer: 3000,
                    showConfirmButton: false
                }).then(() => location.reload());
            })
            .catch(err => {
                const banner = document.getElementById('sap-processing-banner');
                if (banner) banner.remove();

                btnUpdate.disabled = false;
                btnUpdate.innerHTML = 'Update Vendor';
                if (btnBatal) {
                    btnBatal.disabled = false;
                    btnBatal.style.opacity = '1';
                }

                Swal.fire('Error', 'Gagal update: ' + err.message, 'error');
            });
        };
    }
</script>
@endpush