@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    @if($dmenu == 'trapvn' && isset($approver_colors) && count($approver_colors) > 1)
    @php $colorIndex = 0; @endphp
    @foreach($approver_colors as $approver => $color)
    table.dataTable tbody tr.approver-color-{{ $colorIndex }},
    table.dataTable tbody tr.approver-color-{{ $colorIndex }}:hover,
    table.dataTable tbody tr.approver-color-{{ $colorIndex }}.selected {
        background-color: {{ $color }} !important;
    }
    @php $colorIndex++; @endphp
    @endforeach
    @endif

    /* 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;
    }
    
    /* Row color legend */
    .color-legend {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        margin-right: 8px;
        vertical-align: middle;
        border: 1px solid #ddd;
    }

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

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

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

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

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

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

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

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

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

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

    #massPreviewTableApvn thead th {
        border-bottom: 2px solid #b8c1ca !important;
    }
</style>

<!-- PDF.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">List {{ $title_menu }}</h5>
                        </div>
                        <div class="col">
                            {{-- alert --}}
                            @include('components.alert')
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                {{-- button add --}}
                                <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                        class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        @if($dmenu == 'trapvn')
                                        {{-- Checkbox Column --}}
                                        <th width="40" class="text-center">
                                            <input type="checkbox" id="checkAllApvn" title="Pilih Semua">
                                        </th>
                                        {{-- Action Column First --}}
                                        <th width="110">Action</th>
                                        <th>No</th>

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

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

                                        {{-- Status & Approver --}}
                                        <th>Status</th>
                                        <th>Approver</th>
                                        @else
                                        <th>No</th>
                                        {{-- For other menus, use default header --}}
                                        @foreach ($table_header as $header)
                                        <th>{{ $header->alias }}</th>
                                        @endforeach
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail as $detail)
                                    @php
                                    $primary = '';
                                    foreach ($table_primary as $p) {
                                    $primary == ''
                                    ? ($primary = $detail->{$p->field})
                                    : ($primary = $primary . ':' . $detail->{$p->field});
                                    }
                                    
                                    // For trapvn, use id directly since it has no sys_table primary key mapping
                                    if($dmenu == 'trapvn') {
                                        $primary = $detail->id;
                                    }
                                    
                                    $vcount = $loop->iteration;

                                    // Get related data for trapvn
                                    if($dmenu == 'trapvn') {
                                        $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();
                                        $approver = DB::table('users')->where('username', $detail->approver)->first();
                                    }
                                    
                                    // Tentukan warna background row
                                    $rowStyle = '';
                                    $rowClass = '';
                                    if ($detail->isactive == '0') {
                                        $rowClass = 'not';
                                    } elseif ($dmenu == 'trapvn' && isset($approver_colors[$detail->approver]) && count($approver_colors) > 1) {
                                        // Buat class name dari index approver
                                        $approverIndex = array_search($detail->approver, array_keys($approver_colors));
                                        $rowClass = 'approver-color-' . $approverIndex;
                                    }
                                    @endphp
                                    <tr class="{{ $rowClass }}" style="{{ $rowStyle }}">
                                        @if($dmenu == 'trapvn')
                                        {{-- Checkbox Column --}}
                                        <td class="text-center align-middle">
                                            <input type="checkbox" class="apvn-check"
                                                value="{{ encrypt($detail->id) }}"
                                                data-corp="{{ addslashes($detail->corp) }}"
                                                data-name="{{ addslashes($detail->name) }}"
                                                data-status="{{ $detail->status }}">
                                        </td>
                                        {{-- Action Dropdown Column First --}}
                                        <td class="text-sm font-weight-normal">
                                            <div class="btn-group">
                                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                    title="View Data"
                                                    onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                    <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                </button>
                                                <button type="button"
                                                    class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    {{-- check authorize edit --}}
                                                    @if ($authorize->edit == '1')
                                                    {{-- check status active --}}
                                                    @if ($detail->isactive == '1')
                                                    {{-- 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>
                                                    @endif
                                                    @endif

                                                    {{-- button approve for proposed status --}}
                                                    @if($detail->status == 'Proposed' && $detail->isactive == '1')
                                                    <form action="{{ url($url_menu . '/approve/' . 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="Approve Data"
                                                            onclick="approveData(event, '{{ $detail->name }}')">
                                                            <i class="fas fa-check"></i><span
                                                                class="font-weight-bold">
                                                                Approve</span>
                                                        </button>
                                                    </form>
                                                    @endif

                                                    {{-- button reject for proposed status --}}
                                                    @if($detail->status == 'Proposed' && $detail->isactive == '1')
                                                    <form action="{{ url($url_menu . '/reject/' . encrypt($detail->id)) }}"
                                                        method="POST" style="display: inline">
                                                        @csrf
                                                        <input type="hidden" name="rejection_reason">
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <button type="submit"
                                                            class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                            title="Reject Data"
                                                            onclick="rejectData(event, '{{ $detail->name }}')">
                                                            <i class="fas fa-times"></i><span
                                                                class="font-weight-bold">
                                                                Reject</span>
                                                        </button>
                                                    </form>
                                                    @endif

                                                    {{-- check authorize delete and data primary key not "msjit" --}}
                                                    @if ($authorize->delete == '1' && $primary != 'msjit')
                                                    <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>
                                                    @endif
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>

                                        <td>{{ $table_detail->firstItem() + $loop->index }}</td>

                                        {{-- Vendor Information --}}
                                        <td class="text-sm">
                                            {{ $detail->corp }}
                                            @if($detail->corp == 'Lainnya' && $detail->other_corporation)
                                            <br><small class="text-muted">({{ $detail->other_corporation }})</small>
                                            @endif
                                        </td>
                                        <td class="text-sm font-weight-bold text-dark">{{ $detail->name }}</td>
                                        <td class="text-sm">{{ $detail->office_address1 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->office_address2 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->office_address3 ?? '-' }}</td>
                                        <td class="text-sm">{{ $detail->city_name ?? '-' }}</td>

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

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

                                        {{-- Approver --}}
                                        <td class="text-sm">{{ $approver->firstname ?? '-' }}</td>

                                        @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>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                
                                {{-- Legend untuk warna approver (hanya untuk trapvn dengan multiple approver) --}}
                                @if($dmenu == 'trapvn' && isset($approver_colors) && count($approver_colors) > 1)
                                <br>
                                <code>Note Approver : 
                                    @foreach($approver_colors as $approverName => $color)
                                        @php
                                            $approverName = DB::table('users')->where('username', $approverName)->value('firstname');
                                        @endphp
                                        <i aria-hidden="true" style="color: {{ $color }}; background-color: {{ $color }}; border: 1px solid #ddd; border-radius: 36px;" class="fas fa-circle"></i> {{ $approverName ?? 'Unknown' }}{{ !$loop->last ? ', ' : '' }}
                                    @endforeach
                                </code>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif

{{-- ===== MASS ACTION MODAL (trapvn) ===== --}}
<div class="modal fade" id="massActionModalApvn" tabindex="-1" aria-labelledby="massActionModalApvnLabel" 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="massActionModalApvnLabel">
                    <i class="fas fa-list me-2"></i><span id="massModalTitleApvn">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="massModalDescApvn"></p>
                <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                    <table class="table table-bordered table-sm table-hover mb-0" id="massPreviewTableApvn" 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="massPreviewBodyApvn"></tbody>
                    </table>
                </div>
                {{-- Textarea untuk reject reason --}}
                <div id="rejectReasonAreaApvn" class="d-none mt-3">
                    <label for="massRejectionReasonApvn" class="form-label fw-bold text-danger">
                        <i class="fas fa-exclamation-triangle me-1"></i>Alasan Penolakan <span class="text-danger">*</span>
                    </label>
                    <textarea id="massRejectionReasonApvn" class="form-control" rows="3"
                        placeholder="Masukkan alasan penolakan (minimal 5 karakter)..."></textarea>
                </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="btnConfirmMassApvn" onclick="submitMassActionApvn()">
                    <i class="fas fa-check me-1"></i> <span id="btnConfirmTextApvn">Konfirmasi</span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Hidden form untuk mass action trapvn --}}
<form id="formMassActionApvn" method="POST" action="">
    @csrf
    <div id="massIdsContainerApvn"></div>
    <input type="hidden" id="massRejectionReasonInputApvn" name="rejection_reason" value="">
</form>

@endsection

@push('js')
<script>
    let columnAbjad = '';
    $(document).ready(function() {
        let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
        let columnNames = '';
        for (let index = 0; index < numColumns; index++) {
            columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
            if (columnNames == 'Status' || columnNames == 'status') {
                columnAbjad = String.fromCharCode(65 + index);
            }
        }
        //check note
        if ($('*').hasClass('exp')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
        }
        if ($('*').hasClass('stock')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
        }
        if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
            $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
        }
    });
    //set table into datatables
    $('#list_{{ $dmenu }}').DataTable({
        paging: false,
        info: false,
        searching: true,
        responsive: true,
        language: {
            search: "Cari :",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)"
        },
        responsive: true,
        dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
        buttons: [{
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                action: function() {
                    window.location.href = "{{ url($url_menu) }}?export=excel";
                }
            },
            {
                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($dmenu == 'trapvn')
            {
                text: '<i class="fas fa-check-circle me-1 text-lg text-white"></i><span class="font-weight-bold"> Approve</span>',
                className: 'btn-mass-approve-apvn d-none',
                attr: {
                    id: 'dtMassBtnsApproveApvn'
                },
                action: function() {
                    openMassModalApvn('approve');
                }
            },
            {
                text: '<i class="fas fa-times-circle me-1 text-lg text-white"></i><span class="font-weight-bold"> Reject</span>',
                className: 'btn-mass-reject-apvn d-none',
                attr: {
                    id: 'dtMassBtnsRejectApvn'
                },
                action: function() {
                    openMassModalApvn('reject');
                }
            }
            @endif
        ],
        initComplete: function() {
            var searchBarHtml = `
                    <div class="dataTables_filter d-flex justify-content-end">
                        <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                            <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                        </form>
                    </div>
                `;
            $('.dataTables_filter').remove();
            $(searchBarHtml).insertAfter('.dt-buttons');
        }
    });
    //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/trapvn/list.blade.php</b> on line <b>679</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trapvn/list.blade.php</b> on line <b>679</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trapvn/list.blade.php</b> on line <b>680</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trapvn/list.blade.php</b> on line <b>680</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trapvn/list.blade.php</b> on line <b>681</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/transc/trapvn/list.blade.php</b> on line <b>681</b><br />

    //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 approve
    function approveData(event, name) {
        event.preventDefault();

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

        Swal.fire({
            title: 'Konfirmasi Persetujuan',
            text: `Apakah Anda yakin ingin menyetujui vendor "${name}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Setujui',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#17a2b8'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    }

    // function reject
    function rejectData(event, name) {
        event.preventDefault();
        const form = event.target.closest('form');

        Swal.fire({
            title: 'Konfirmasi Penolakan',
            html: `
                <div style="text-align: left;">
                    <p class="mb-3">Apakah Anda yakin ingin <b>menolak</b> vendor "<b>${name}</b>"?</p>
                    
                    <div class="form-group">
                        <textarea id="rejectReason"
                            class="form-control"
                            placeholder="Masukkan alasan penolakan..."
                            style="width: 100%; height: 100px; padding: 10px; border-radius: 5px; border: 1px solid #d1d1d1; resize: none;"></textarea>
                        <div class="d-flex justify-content-between mt-1">
                            <small id="reasonError" class="text-danger" style="display:none;">Alasan wajib diisi!</small>
                            <small class="text-muted" style="margin-left: auto;">Minimal 5 karakter</small>
                        </div>
                    </div>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Tolak',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            focusConfirm: false,
            preConfirm: () => {
                const reason = document.getElementById('rejectReason').value.trim();
                
                if (!reason) {
                    Swal.showValidationMessage('Alasan penolakan wajib diisi!');
                    return false;
                }
                
                if (reason.length < 5) {
                    Swal.showValidationMessage('Alasan terlalu pendek (min. 5 karakter)!');
                    return false;
                }
                
                return reason;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                form.querySelector('input[name="rejection_reason"]').value = result.value;
                form.submit();
            }
        });
    }

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

    // ===== CHECKBOX MASS ACTION LOGIC (trapvn) =====
    let massActionTypeApvn = '';

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

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

    function updateMassButtonsApvn() {
        const checked = $('.apvn-check:checked').length;
        if (checked > 0) {
            $('#dtMassBtnsApproveApvn').html('<span><i class="fas fa-check-circle me-1 text-lg text-white"></i><span class="font-weight-bold"> Approve (' + checked + ')</span></span>').removeClass('d-none');
            $('#dtMassBtnsRejectApvn').html('<span><i class="fas fa-times-circle me-1 text-lg text-white"></i><span class="font-weight-bold"> Reject (' + checked + ')</span></span>').removeClass('d-none');
        } else {
            $('#dtMassBtnsApproveApvn').addClass('d-none');
            $('#dtMassBtnsRejectApvn').addClass('d-none');
        }
    }

    function openMassModalApvn(type) {
        massActionTypeApvn = type;
        const checked = $('.apvn-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');
            let statusBadge = '';
            if (status === 'Proposed') statusBadge = '<span class="badge bg-warning">Proposed</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>`;
        });

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

        if (type === 'approve') {
            $('#massModalTitleApvn').text('Konfirmasi Approve');
            $('#massModalDescApvn').html('<i class="fas fa-check-circle text-success me-1"></i> Vendor berikut akan disetujui. Hanya vendor berstatus <strong>Proposed</strong> yang akan diproses.');
            $('#btnConfirmMassApvn').removeClass('btn-danger btn-primary').addClass('btn-success').html('<i class="fas fa-check me-1"></i> <span id="btnConfirmTextApvn">Approve</span>');
            $('#rejectReasonAreaApvn').addClass('d-none');
            $('#massRejectionReasonApvn').val('');
        } else {
            $('#massModalTitleApvn').text('Konfirmasi Reject');
            $('#massModalDescApvn').html('<i class="fas fa-times-circle text-danger me-1"></i> Vendor berikut akan ditolak. Hanya vendor berstatus <strong>Proposed</strong> yang akan diproses.');
            $('#btnConfirmMassApvn').removeClass('btn-success btn-primary').addClass('btn-danger').html('<i class="fas fa-check me-1"></i> <span id="btnConfirmTextApvn">Reject</span>');
            $('#rejectReasonAreaApvn').removeClass('d-none');
        }

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

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

    function submitMassActionApvn() {
        if (massActionTypeApvn === 'reject') {
            const reason = $('#massRejectionReasonApvn').val().trim();
            if (!reason || reason.length < 5) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Alasan penolakan wajib diisi (minimal 5 karakter)!'
                });
                return;
            }
            $('#massRejectionReasonInputApvn').val(reason);
        }

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

        const checked = $('.apvn-check:checked');
        const container = $('#massIdsContainerApvn');
        container.empty();

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

        if (massActionTypeApvn === 'approve') {
            $('#formMassActionApvn').attr('action', '{{ route("trapvn.mass.approve") }}');
        } else {
            $('#formMassActionApvn').attr('action', '{{ route("trapvn.mass.reject") }}');
        }

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

</script>
@endpush