@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- 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 sync SAP --}}
                                <button class="btn btn-primary mb-0" onclick="showSapSyncModal()">
                                    <i class="fas fa-sync me-1"></i>
                                    <span class="font-weight-bold">Sync from SAP</span>
                                </button>
                                {{-- button revision --}}
                                <button class="btn btn-warning mb-0 ms-2" onclick="showRevisionModal()">
                                    <i class="fas fa-edit me-1"></i>
                                    <span class="font-weight-bold">Revision</span>
                                </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>
                                        <th>No</th>
                                        <th>Action</th>
                                        {{-- retrieve table header --}}
                                        @foreach ($table_header as $header)
                                        <th>{{ $header->alias }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail as $detail)
                                    @php
                                    $vcount = method_exists($table_detail, 'currentPage')
                                        ? (($table_detail->currentPage() - 1) * $table_detail->perPage()) + $loop->iteration
                                        : $loop->iteration;
                                    $primary = $table_primary->field;

                                    $status = $is_spv_head ? $detail->temp_status : $detail->final_status;
                                    @endphp
                                    <tr {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' :
                                        ($detail->sent_approval == '0' ? 'class=pending style=background-color:#fff3cd;'
                                        :
                                        ($status == 'approved' ? 'class=approved style=background-color:#d4edda;' :
                                        (isset($detail->is_other_division) && $detail->is_other_division ?
                                        'class=other-division style=background-color:#e6d5f5;' : '')))
                                        }}>
                                        <td>{{ $vcount }}</td>
                                        <td class="text-sm font-weight-normal">
                                            <div class="btn-group" role="group">
                                                {{-- View Button --}}
                                                <a href="{{ url($url_menu . '/show' . '/' . encrypt($detail->$primary)) }}"
                                                    class="btn btn-sm btn-primary mb-0">
                                                    <i class="fas fa-eye"></i> View
                                                </a>
                                                {{-- Dropdown Button --}}
                                                <button type="button"
                                                    class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split mb-0"
                                                    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' && $detail->isactive == 1)
                                                    <li>
                                                        <a class="dropdown-item"
                                                            href="{{ url($url_menu . '/edit' . '/' . encrypt($detail->$primary)) }}">
                                                            <i class="fas fa-edit text-warning"></i> Edit
                                                        </a>
                                                    </li>
                                                    @endif
                                                    {{-- check authorize delete --}}
                                                    @if ($authorize->delete == '1')
                                                    <li>
                                                        <form
                                                            action="{{ url($url_menu . '/' . encrypt($detail->$primary)) }}"
                                                            method="POST" style="display: inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item"
                                                                onclick="return deleteData(event, '{{ $detail->$primary }}','Hapus Data')">
                                                                <i class="fas fa-trash text-danger"></i> Hapus Data
                                                            </button>
                                                        </form>
                                                    </li>
                                                    @endif
                                                    {{-- Send Button --}}
                                                    @if ($detail->isactive == 1 && $detail->sent_approval == 0 &&
                                                    $detail->temp_status != 'approved' && $detail->temp_status !=
                                                    'rejected' && $detail->temp_status != 'unreviewed' &&
                                                    $detail->final_status != 'approved' && $detail->final_status !=
                                                    'rejected')
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            onclick="showSendModal('{{ encrypt($detail->$primary) }}', '{{ $detail->$primary }}'); return false;">
                                                            <i class="fas fa-paper-plane text-info"></i> Send
                                                        </a>
                                                    </li>
                                                    @endif
                                                    {{-- check authorize approval --}}
                                                    @if ($authorize->approval == '1' && $detail->isactive == 1)
                                                    @php
                                                    $showApproval = false;

                                                    // For SPV/Head
                                                    if ($is_spv_head && $detail->sent_approval == 1 &&
                                                    $detail->temp_status != 'approved' &&
                                                    $detail->temp_status != 'rejected' &&
                                                    $detail->temp_status != 'unreviewed') {
                                                    $showApproval = true;
                                                    }

                                                    // For Manager
                                                    if (!$is_spv_head && 
                                                        (($detail->temp_status == 'approved' || $detail->temp_status == 'unreviewed') || 
                                                         ($detail->temp_status == 'pending' && $detail->temp_status_by == $current_user_id)) &&
                                                        $detail->final_status != 'approved' &&
                                                        $detail->final_status != 'rejected') {
                                                        $showApproval = true;
                                                    }
                                                    @endphp

                                                    @if ($showApproval)
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            onclick="showApproveModal('{{ encrypt($detail->$primary) }}', '{{ $detail->$primary }}'); return false;">
                                                            <i class="fas fa-check-circle text-success"></i> Approve
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            onclick="showRejectModal('{{ encrypt($detail->$primary) }}', '{{ $detail->$primary }}'); return false;">
                                                            <i class="fas fa-times-circle text-danger"></i> Reject
                                                        </a>
                                                    </li>
                                                    @endif
                                                    @endif
                                                    {{-- Recall button - separate condition --}}
                                                    @if ($authorize->approval == '1' && $detail->isactive == 1)
                                                    @php
                                                    $showRecall = false;
                                                    // For spv/head
                                                    if (($detail->temp_status == 'approved' || $detail->temp_status ==
                                                    'rejected') && $detail->temp_status_by == $current_user_id) {
                                                    $showRecall = true;
                                                    }
                                                    // For manager
                                                    if ($detail->final_status == 'approved' || $detail->final_status ==
                                                    'rejected') {
                                                    $showRecall = true;
                                                    }
                                                    @endphp
                                                    @if ($showRecall)
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            onclick="showRecallModal('{{ encrypt($detail->$primary) }}', '{{ $detail->$primary }}'); return false;">
                                                            <i class="fas fa-undo text-warning"></i> Recall
                                                        </a>
                                                    </li>
                                                    @endif
                                                    @endif
                                                </ul>
                                            </div>
                                        </td>
                                        @foreach ($table_header as $field)
                                        @php
                                        $string = $field->field;
                                        @endphp
                                        {{-- field type enum --}}
                                        @if ($field->type == 'enum')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field->link != '')
                                            <a target="_blank"
                                                href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                @if ($field->query != '')
                                                @php
                                                $data_query = DB::select($field->query);
                                                @endphp
                                                @foreach ($data_query as $q)
                                                <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>209</b><br />
                                                {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                @endforeach
                                                @endif
                                                &nbsp;&nbsp;
                                                <i aria-hidden="true" class="fas fa-external-link-alt">
                                                </i>
                                            </a>
                                            @else
                                            @if ($field->query != '')
                                            @php
                                            $data_query = DB::select($field->query);
                                            @endphp
                                            @if (Str::contains($field->class, 'select-multiple'))
                                            <br />
<b>Warning</b>:  Undefined variable $detail in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>224</b><br />
<br />
<b>Warning</b>:  Undefined variable $string in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>224</b><br />
<br />
<b>Warning</b>:  Attempt to read property "" on null in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>224</b><br />
                                            @foreach ($data_query as $q)
                                            @php
                                            $sAsArray = array_values((array) $q);
                                            if (in_array($sAsArray[0], $multiple)) {
                                            if ($text == '') {
                                            $text = $sAsArray[1];
                                            } else {
                                            $text =
                                            $text . ',' . $sAsArray[1];
                                            }
                                            }
                                            @endphp
                                            @endforeach
                                            {{ $text }}
                                            @else
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>243</b><br />
                                            {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                            @endforeach
                                            @endif
                                            @endif
                                            @endif
                                        </td>
                                        {{-- field type file --}}
                                        @elseif ($field->type == 'file')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($detail->$string)
                                            <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                </i>
                                                {{ $field->alias }}</a>
                                            @endif
                                        </td>
                                        {{-- field type image --}}
                                        @elseif($field->type == 'image')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            <span class="my-2 text-xs">
                                                <img src="{{ file_exists(public_path('storage/' . $detail->$string . 'tumb.png')) ? asset('/storage' . '/' . $detail->$string . 'tumb.png') : asset('storage/' . $detail->$string) }}"
                                                    alt="image" style="height: 35px;" data-bs-toggle="modal"
                                                    data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                            </span>
                                            <span style="display: none;">{{ asset('/storage' . '/' . $detail->$string)
                                                }}
                                            </span>
                                            <!-- Modal -->
                                            <div class="modal fade" id="imageModal{{ $field->field }}{{ $vcount }}"
                                                tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageModalLabel">
                                                                Preview Image
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                id="preview" alt="image"
                                                                class="w-100 border-radius-lg shadow-sm">
                                                        </div>
                                                        <div class="modal-footer">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        {{-- field type join --}}
                                        @elseif($field->type == 'join')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field->query != '')
                                            @php
                                            $query =
                                            $field->query . "'" . $detail->$string . "'";
                                            $data_query = DB::select($query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>311</b><br />
                                            @if ($field->default != 'image')
                                            {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                            @else
                                            <span class="my-2 text-xs">
                                                <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}" alt="image"
                                                    style="height: 40px;" data-bs-toggle="modal"
                                                    data-bs-target="#imageModalJoin{{ $field->field }}{{ $vcount }}">
                                            </span>
                                            <span style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                            </span>
                                            <!-- Modal -->
                                            <div class="modal fade" id="imageModalJoin{{ $field->field }}{{ $vcount }}"
                                                tabindex="-1" role="dialog" aria-labelledby="imageModalJoinLabel"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageModalJoinLabel">
                                                                Preview Image
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                id="preview" alt="image"
                                                                class="w-100 border-radius-lg shadow-sm">
                                                        </div>
                                                        <div class="modal-footer">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                            @endforeach
                                            @endif
                                        </td>
                                        {{-- field type currency --}}
                                        @elseif ($field->type == 'currency')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub)
                                            }}
                                        </td>
                                        {{-- field type date --}}
                                        @elseif ($field->type == 'date')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }}">
                                            {{ $detail->$string }}
                                        </td>
                                        @if ($field->note != '')
                                        <p id="datenote" style="display: none">
                                            {{ $field->note }}
                                        </p>
                                        @else
                                        <p id="datenote" style="display: none">Date Expired <= {{ $field->length }} Day
                                        </p>
                                        @endif
                                        @if ($field->class == 'check-date')
                                        <script>
                                            var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ $field->length }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                        </script>
                                        @endif
                                        @elseif ($field->type == 'number')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-stock' ? $detail->$string . $detail->{$field->sub} : '' }}">
                                            {{ $detail->$string }}
                                        </td>
                                        @if ($field->note != '')
                                        <p id="stocknote" style="display: none">
                                            {{ $field->note }}
                                        </p>
                                        @else
                                        <p id="stocknote" style="display: none">Stock < minimal stock </p>
                                                @endif
                                                @if ($field->class == 'check-stock')
                                                <script>
                                                    var vstock = {{ $detail->$string }};
                                                                var vminstock = {{ $detail->{$field->sub} }};

                                                                if (vstock < vminstock) {
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').addClass('stock');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('background-color', '#f93c3c');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('color', '#000');
                                                                }
                                                </script>
                                                @endif
                                                @else
                                                <td
                                                    class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                    @if ($field->link != '')
                                                    <a target="_blank"
                                                        href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                        {{ $detail->$string }}&nbsp;&nbsp;
                                                        <i aria-hidden="true" class="fas fa-external-link-alt">
                                                        </i>
                                                    </a>
                                                    @else
                                                    {{ $detail->$string }}
                                                    @endif
                                                </td>
                                                @endif
                                                @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </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, <i aria-hidden="true"
                                            style="color: #ffd9a5; padding: 2px;" class="fas fa-circle"></i> Pending (belum dikirim untuk approval), <i aria-hidden="true"
                                            style="color: #d4edda; padding: 2px;" class="fas fa-circle"></i> Approved (sudah disetujui), <i aria-hidden="true"
                                            style="color: #e6d5f5; padding: 2px;" class="fas fa-circle"></i> Data dari divisi lain </code>
                            </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
@endsection
@push('css')
<style>
    /* Fix posisi search box dan buttons agar tetap terlihat saat di-scroll */
    .table-responsive {
        position: relative;
    }
    .dataTables_wrapper .dt-buttons {
        position: sticky;
        left: 0;
        float: left;
        z-index: 10;
        background: #fff; /* Tutupi baris tabel saat dilewati scroll */
        padding-right: 15px;
    }
    .dataTables_wrapper .dataTables_filter {
        position: sticky;
        right: 0;
        float: right;
        text-align: right;
        z-index: 10;
        background: #fff;
        padding-left: 15px;
    }
    .dataTables_wrapper .dataTables_info {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 10;
        display: inline-block;
    }
    .dataTables_wrapper .dataTables_paginate {
        position: sticky;
        right: 0;
        background: #fff;
        z-index: 10;
    }
    /* Clearfix agar tabel tidak naik menimpa tombol*/
    .dataTables_wrapper::after {
        content: "";
        clear: both;
        display: table;
    }
</style>
@endpush
@push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<style>
    /* CKEditor Custom Styles */
    .ck-editor__editable_inline {
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
    }
    /* Limit image preview size inside editor */
    .ck-content .image img {
        max-height: 200px;
        width: auto;
        margin: 0 auto;
        display: block;
    }
</style>
<script>
    let columnAbjad = '';
        let listTable = null;
        const serverPagination = {
            currentPage: {{ method_exists($table_detail, 'currentPage') ? $table_detail->currentPage() : 1 }},
            lastPage: {{ method_exists($table_detail, 'lastPage') ? $table_detail->lastPage() : 1 }},
            total: {{ method_exists($table_detail, 'total') ? $table_detail->total() : count($table_detail) }},
            from: {{ method_exists($table_detail, 'firstItem') && $table_detail->firstItem() ? $table_detail->firstItem() : 0 }},
            to: {{ method_exists($table_detail, 'lastItem') && $table_detail->lastItem() ? $table_detail->lastItem() : count($table_detail) }}
        };

        function buildPageUrl(page) {
            const url = new URL(window.location.href);
            url.searchParams.set('page', page);
            return url.toString();
        }

        function renderServerPaginationUI() {
            const wrapper = $('#list_{{ $dmenu }}_wrapper');
            const infoEl = wrapper.find('.dataTables_info');
            const paginateEl = wrapper.find('.dataTables_paginate');

            infoEl.text(`Showing ${serverPagination.from} to ${serverPagination.to} of ${serverPagination.total} entries`);

            let paginationHtml = '';
            const isFirstPage = serverPagination.currentPage <= 1;
            const isLastPage = serverPagination.currentPage >= serverPagination.lastPage;

            paginationHtml += `<a class="paginate_button previous ${isFirstPage ? 'disabled' : ''}" ${isFirstPage ? '' : `href="${buildPageUrl(serverPagination.currentPage - 1)}"`}>Previous</a>`;

            for (let p = 1; p <= serverPagination.lastPage; p++) {
                paginationHtml += `<a class="paginate_button ${p === serverPagination.currentPage ? 'current' : ''}" href="${buildPageUrl(p)}">${p}</a>`;
            }

            paginationHtml += `<a class="paginate_button next ${isLastPage ? 'disabled' : ''}" ${isLastPage ? '' : `href="${buildPageUrl(serverPagination.currentPage + 1)}"`}>Next</a>`;

            paginateEl.html(paginationHtml);
        }

        $(document).ready(function() {
            listTable = $('#list_{{ $dmenu }}').DataTable({
                "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,
                searching: true,
                paging: true,
                pageLength: 10,
                lengthChange: false,
                info: true,
                ordering: false,
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> 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)'
                        },
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                    },
                ]
            });

            renderServerPaginationUI();

            let numColumns = listTable.columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = listTable.columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
            //check note
            let baseNote = `<code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active, <i aria-hidden="true" style="color: #fff3cd; background-color: #856404; padding: 2px;" class="fas fa-circle"></i> Pending (belum dikirim untuk approval), <i aria-hidden="true" style="color: #d4edda; background-color: #155724; padding: 2px;" class="fas fa-circle"></i> Approved (sudah disetujui), <i aria-hidden="true" style="color: #e6d5f5; background-color: #6f42c1; padding: 2px;" class="fas fa-circle"></i> Data dari divisi lain`;
            
            if ($('*').hasClass('exp')) {
                baseNote += `, <i aria-hidden="true" style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text();
            }
            if ($('*').hasClass('stock')) {
                baseNote += `, <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text();
            }
            
            if ($('*').hasClass('exp') || $('*').hasClass('stock')) {
                $('#noted').html(baseNote + ` </code>`);
            }
            //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/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>647</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>647</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>648</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>648</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>649</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjso/resources/views/transc/trsapv/list.blade.php</b> on line <b>649</b><br />

            // Custom Server-Side Search trigger
            const searchContainer = $('#list_{{ $dmenu }}_filter input');
            searchContainer.off(); // Remove default DataTables search binding
            searchContainer.attr('placeholder', 'Ketik & Enter...');   
            searchContainer.on('keyup search', function(e) {
                if (e.type === 'search' || e.keyCode === 13) {
                    let value = $(this).val();
                    const url = new URL(window.location.href);
                    if (value) {
                        url.searchParams.set('search', value);
                    } else {
                        url.searchParams.delete('search');
                    }
                    url.searchParams.delete('page'); // Reset hal ke awal
                    window.location.href = url.toString();
                }
            });

            // Pre-fill search field
            const urlParams = new URLSearchParams(window.location.search);
            if(urlParams.has('search')) {
                searchContainer.val(urlParams.get('search'));
            }
        });
        //function delete (cancel)
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi Hapus Data',
                html: `<div class="text-start">
                        <p class="mb-3">Data: <strong>${name}</strong></p>
                        <p class="text-danger"><i class="fas fa-exclamation-triangle"></i> Data yang dibatalkan akan dihapus secara permanen!</p>
                        <p class="text-muted">Apakah Anda yakin ingin menghapus data ini?</p>
                    </div>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-trash"></i> Ya, Hapus Data',
                cancelButtonText: '<i class="fas fa-times"></i> Tidak',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Menghapus Data...',
                        html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-danger mb-3"></i><p>Mohon tunggu, sedang menghapus data...</p></div>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Small delay for UX
                    setTimeout(() => {
                        // Find the closest form element and submit it manually
                        event.target.closest('form').submit();
                    }, 500);
                }
            });
        }

        //function approve
        function showApproveModal(encryptedId, dataName) {
            Swal.fire({
                title: 'Approve Data',
                html: `
                    <div class="text-start">
                        <p class="mb-3">Data: <strong>${dataName}</strong></p>
                        <p class="text-muted">Apakah Anda yakin ingin menyetujui data ini?</p>
                    </div>
                `,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-check"></i> Ya, Approve',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Memproses Approval...',
                        html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-success mb-3"></i><p>Mohon tunggu, sedang memproses approval...</p></div>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false
                    });
                    
                    // Small delay for UX
                    setTimeout(() => {
                        // Create and submit form
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `{{ url('/trsapv/approval') }}/${encryptedId}`;
                        
                        // CSRF Token
                        const csrfInput = document.createElement('input');
                        csrfInput.type = 'hidden';
                        csrfInput.name = '_token';
                        csrfInput.value = '{{ csrf_token() }}';
                        form.appendChild(csrfInput);
                        
                        // Status
                        const statusInput = document.createElement('input');
                        statusInput.type = 'hidden';
                        statusInput.name = 'status';
                        statusInput.value = 'approved';
                        form.appendChild(statusInput);
                        
                        document.body.appendChild(form);
                        form.submit();
                    }, 500);
                }
            });
        }

        //function reject
        function showRejectModal(encryptedId, dataName) {
            Swal.fire({
                title: '<h4 class="font-weight-bolder">Reject Data</h4>',
                html: `
                    <div class="text-start">
                        <p class="mb-3 text-sm">Data: <span class="badge bg-secondary">${dataName}</span></p>
                        <div class="row">
                            <!-- Text Editor Section -->
                            <div class="col-md-8">
                                <label class="form-label font-weight-bold">Catatan Penolakan <span class="text-danger">*</span></label>
                                <div class="editor-wrapper shadow-sm rounded">
                                    <div id="editor-container"></div>
                                </div>
                                <input type="text" id="focus-trap" style="opacity:0; width:0; height:0;">
                            </div>
                            
                            <!-- Image Attachments Section -->
                            <div class="col-md-4 border-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label font-weight-bold mb-0">Lampiran Gambar</label>
                                    <button class="btn btn-sm btn-outline-primary mb-0 px-2 py-1" onclick="document.getElementById('manual-image-upload').click()">
                                        <i class="fas fa-plus"></i> Add
                                    </button>
                                </div>
                                <p class="text-xs text-muted mb-2">Paste gambar atau klik Add</p>
                                
                                <div id="image-attachments" class="d-flex flex-column gap-2 p-2 bg-light rounded" style="max-height: 400px; overflow-y: auto; min-height: 100px;">
                                    <!-- Images will appear here -->
                                </div>
                                <input type="file" id="manual-image-upload" hidden multiple accept="image/*">
                            </div>
                        </div>
                        <textarea id="swal-note" style="display:none;"></textarea>
                    </div>
                `,
                icon: null,
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-times"></i> Ya, Reject',
                cancelButtonText: '<i class="fas fa-ban"></i> Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#8392ab',
                width: '900px', // Wider implementation
                customClass: {
                    popup: 'card shadow-lg',
                    confirmButton: 'btn btn-danger',
                    cancelButton: 'btn btn-secondary'
                },
            didOpen: () => {
                const imageContainer = document.getElementById('image-attachments');
                const fileInput = document.getElementById('manual-image-upload');
                window.pendingFiles = []; // Store {file, id}

                // Helper to preview and queue image
                const previewAndQueue = (file) => {
                    const id = Date.now() + Math.random().toString(36).substr(2, 9);
                    const previewUrl = URL.createObjectURL(file);
                    
                    window.pendingFiles.push({ file, id, previewUrl });

                    // Append preview
                    const prevHtml = `
                        <div class="position-relative mb-2 fade-in-image" id="img-${id}">
                            <img src="${previewUrl}" class="w-100 rounded shadow-sm border" style="cursor: pointer;" onclick="window.open('${previewUrl}', '_blank')">
                            <button class="btn btn-xs btn-danger position-absolute top-0 end-0 m-1" onclick="removePendingImage('${id}')">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>`;
                    imageContainer.insertAdjacentHTML('beforeend', prevHtml);
                };

                // Global function to remove image from array
                window.removePendingImage = (id) => {
                    window.pendingFiles = window.pendingFiles.filter(p => p.id !== id);
                    const el = document.getElementById(`img-${id}`);
                    if (el) el.remove();
                };

                // Initialize CKEditor
                if (typeof ClassicEditor !== 'undefined') {
                    ClassicEditor
                        .create(document.querySelector('#editor-container'), {
                            toolbar: {
                                items: [
                                    'heading',
                                    '|',
                                    'bold',
                                    'italic',
                                    'underline',
                                    '|',
                                    'bulletedList',
                                    'numberedList',
                                    '|',
                                    'blockQuote',
                                    'undo',
                                    'redo'
                                ],
                                shouldNotGroupWhenFull: true
                            },
                            placeholder: 'Ketik alasan penolakan di sini...',
                        })
                        .then(editor => {
                            window.editor = editor;
                            
                            // Style adjustments
                            editor.ui.view.editable.element.style.minHeight = '300px';
                            editor.ui.view.editable.element.style.padding = '1rem';

                            // Intercept Paste for Images
                            editor.editing.view.document.on('paste', (evt, data) => {
                                const dataTransfer = data.dataTransfer;
                                if (dataTransfer.files.length > 0) {
                                    evt.stop(); // Stop default paste
                                    for (const file of dataTransfer.files) {
                                        if (file.type.startsWith('image/')) {
                                            previewAndQueue(file);
                                        }
                                    }
                                }
                            });
                        })
                        .catch(error => {
                            console.error('CKEditor Error:', error);
                            document.getElementById('editor-container').innerHTML = `<div class="alert alert-danger">Error loading editor: ${error.message}</div>`;
                        });
                }

                // Handle Manual Upload
                fileInput.addEventListener('change', (e) => {
                    if (e.target.files.length > 0) {
                        for (const file of e.target.files) {
                            previewAndQueue(file);
                        }
                        fileInput.value = ''; // Reset
                    }
                });
            },
            preConfirm: async () => {
                // Get data from CKEditor
                let note = window.editor ? window.editor.getData() : '';
                
                if (!note.trim() && (!window.pendingFiles || window.pendingFiles.length === 0)) {
                    Swal.showValidationMessage('Catatan wajib diisi');
                    return false;
                }

                // Process Uploads
                if (window.pendingFiles && window.pendingFiles.length > 0) {
                    try {
                        const uploadPromises = window.pendingFiles.map(async (item) => {
                            const formData = new FormData();
                            formData.append('upload', item.file);

                            const response = await fetch('{{ route('trsapv.upload-image') }}', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: formData
                            });

                            if (!response.ok) throw new Error('Upload failed');
                            const data = await response.json();
                            return data.url;
                        });

                        const uploadedUrls = await Promise.all(uploadPromises);

                        // Append to note
                        uploadedUrls.forEach(url => {
                            note += `<img src="${url}" style="max-width: 100%; margin-bottom: 10px;"><br>`;
                        });

                    } catch (error) {
                        Swal.showValidationMessage('Gagal mengupload gambar: ' + error.message);
                        return false; 
                    }
                }

                return note;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const note = result.value;
                
                // Show loading state
                Swal.fire({
                    title: 'Memproses Rejection...',
                    html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-danger mb-3"></i><p>Mohon tunggu, sedang memproses rejection...</p></div>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false
                });
                
                // Small delay for UX
                setTimeout(() => {
                    // Create and submit form
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ url('/trsapv/approval') }}/${encryptedId}`;
                    
                    // CSRF Token
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = '{{ csrf_token() }}';
                    form.appendChild(csrfInput);
                    
                    // Status
                    const statusInput = document.createElement('input');
                    statusInput.type = 'hidden';
                    statusInput.name = 'status';
                    statusInput.value = 'rejected';
                    form.appendChild(statusInput);
                    
                    // Note
                    const noteInput = document.createElement('input');
                    noteInput.type = 'hidden';
                    noteInput.name = 'note';
                    noteInput.value = note;
                    form.appendChild(noteInput);
                    
                    document.body.appendChild(form);
                    form.submit();
                    
                    // Cleanup globals
                    delete window.editor;
                    delete window.pendingFiles;
                    delete window.removePendingImage;
                }, 500);
            }
        });
    }

        //function recall
        function showRecallModal(encryptedId, dataName) {
            Swal.fire({
                title: 'Recall Approval',
                html: `
                    <div class="text-start">
                        <p class="mb-3">Data: <strong>${dataName}</strong></p>
                        <p class="text-muted">Apakah Anda yakin ingin me-recall persetujuan data ini?</p>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-undo"></i> Recall',
                cancelButtonText: '<i class="fas fa-ban"></i> Batal',
                confirmButtonColor: '#6c757d',
                cancelButtonColor: '#dc3545'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Memproses Recall...',
                        html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-secondary mb-3"></i><p>Mohon tunggu, sedang memproses recall...</p></div>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false
                    });
                    
                    // Small delay for UX
                    setTimeout(() => {
                        // Create and submit form
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `{{ url('/trsapv/recall') }}/${encryptedId}`;
                        
                        // CSRF Token
                        const csrfInput = document.createElement('input');
                        csrfInput.type = 'hidden';
                        csrfInput.name = '_token';
                        csrfInput.value = '{{ csrf_token() }}';
                        form.appendChild(csrfInput);
                        
                        document.body.appendChild(form);
                        form.submit();
                    }, 500);
                }
            });
        }

        //function send - Multi-file upload with preview
        let selectedFiles = []; // Array to store multiple files
        
        function showSendModal(encryptedId, dataName) {
            // Reset selected files
            selectedFiles = [];
            
            // Build options for supervisor/head selection
            let shOptions = '';
            @foreach($sh_users as $sh)
                shOptions += `<option value="{{ $sh->id }}">{{ $sh->firstname }}</option>`;
            @endforeach

            Swal.fire({
                title: 'Kirim Permohonan',
                html: `
                    <div class="text-start">
                        <p class="mb-3">Data: <strong>${dataName}</strong></p>
                        <div class="row" id="send-modal-content">
                            <!-- Left Column - Form -->
                            <div class="col-12" id="form-column">
                                <!-- Skip to Manager Checkbox -->
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="skip-to-manager">
                                    <label class="form-check-label" for="skip-to-manager">
                                        <i class="fas fa-forward me-1"></i> Skip ke Manager
                                        <small class="text-muted d-block">Langsung kirim ke Manager tanpa melalui SPV/Head</small>
                                    </label>
                                </div>
                                
                                <!-- SPV/Head Selection (will be hidden when skip is checked) -->
                                <div class="mb-3" id="spv-section">
                                    <label for="swal-sh-user" class="form-label">Supervisor/Head <span class="text-danger">*</span></label>
                                    <select class="form-select" id="swal-sh-user" required>
                                        <option value="">-- Pilih Supervisor/Head --</option>
                                        ${shOptions}
                                    </select>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Upload Dokumen PO</label>
                                    <p class="text-muted small mb-2">Format: PDF, JPG, PNG, JPEG (Max: 10MB per file) - <strong>Bisa pilih multiple files</strong></p>
                                    <div id="dropzone" class="border border-2 border-dashed rounded p-4 text-center" style="cursor: pointer; background-color: #f8f9fa; transition: all 0.3s;">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                                        <p class="mb-1">Drag & drop file disini atau klik untuk upload</p>
                                        <p class="text-muted small mb-0" id="file-info">Tidak ada file dipilih</p>
                                    </div>
                                    <input type="file" id="file-upload" accept=".pdf,.jpg,.jpeg,.png" multiple style="display: none;">
                                </div>
                            </div>
                            
                            <!-- Right Column - Preview (Hidden initially) -->
                            <div class="col-5 d-none" id="preview-column">
                                <div class="border rounded h-100" style="background-color: #f8f9fa;">
                                    <div class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
                                        <span class="fw-bold text-sm"><i class="fas fa-eye me-1"></i> Preview</span>
                                        <span class="badge bg-info" id="file-count">0 files</span>
                                    </div>
                                    <div id="preview-container" class="p-2" style="max-height: 320px; overflow-y: auto;">
                                        <!-- File previews will appear here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `,
                icon: 'question',
                width: '700px',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-paper-plane"></i> Kirim',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#17a2b8',
                cancelButtonColor: '#6c757d',
                didOpen: () => {
                    const dropzone = document.getElementById('dropzone');
                    const fileUpload = document.getElementById('file-upload');
                    const fileInfo = document.getElementById('file-info');
                    const formColumn = document.getElementById('form-column');
                    const previewColumn = document.getElementById('preview-column');
                    const previewContainer = document.getElementById('preview-container');
                    const fileCount = document.getElementById('file-count');
                    const skipCheckbox = document.getElementById('skip-to-manager');
                    const spvSection = document.getElementById('spv-section');
                    
                    // Toggle SPV section visibility when skip checkbox is changed
                    skipCheckbox.addEventListener('change', () => {
                        if (skipCheckbox.checked) {
                            spvSection.style.display = 'none';
                            document.getElementById('swal-sh-user').value = '';
                        } else {
                            spvSection.style.display = 'block';
                        }
                    });
                    
                    // Function to update preview panel
                    const updatePreviewPanel = () => {
                        if (selectedFiles.length > 0) {
                            formColumn.classList.remove('col-12');
                            formColumn.classList.add('col-7');
                            previewColumn.classList.remove('d-none');
                            fileCount.textContent = `${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`;
                            fileInfo.innerHTML = `<i class="fas fa-check-circle text-success"></i> ${selectedFiles.length} file terpilih`;
                            fileInfo.classList.remove('text-muted');
                            fileInfo.classList.add('text-success');
                        } else {
                            formColumn.classList.remove('col-7');
                            formColumn.classList.add('col-12');
                            previewColumn.classList.add('d-none');
                            fileInfo.innerHTML = 'Tidak ada file dipilih';
                            fileInfo.classList.remove('text-success');
                            fileInfo.classList.add('text-muted');
                        }
                        
                        // Render previews
                        previewContainer.innerHTML = '';
                        selectedFiles.forEach((fileObj, index) => {
                            const file = fileObj.file;
                            const isImage = file.type.startsWith('image/');
                            const fileSize = (file.size / 1024 / 1024).toFixed(2);
                            
                            let previewHtml = `
                                <div class="d-flex align-items-center p-2 mb-2 bg-white rounded shadow-sm border" id="preview-${fileObj.id}">
                                    <div class="me-2" style="width: 50px; height: 50px; flex-shrink: 0;">
                                        ${isImage 
                                            ? `<img src="${fileObj.previewUrl}" class="img-fluid rounded" style="width: 50px; height: 50px; object-fit: cover;">` 
                                            : `<div class="d-flex align-items-center justify-content-center bg-danger text-white rounded" style="width: 50px; height: 50px;"><i class="fas fa-file-pdf fa-lg"></i></div>`
                                        }
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="mb-0 text-xs text-truncate fw-bold" title="${file.name}">${file.name}</p>
                                        <p class="mb-0 text-xs text-muted">${fileSize} MB</p>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeSelectedFile('${fileObj.id}')">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            `;
                            previewContainer.insertAdjacentHTML('beforeend', previewHtml);
                        });
                    };
                    
                    // Global function to remove file
                    window.removeSelectedFile = (id) => {
                        const fileObj = selectedFiles.find(f => f.id === id);
                        if (fileObj && fileObj.previewUrl) {
                            URL.revokeObjectURL(fileObj.previewUrl);
                        }
                        selectedFiles = selectedFiles.filter(f => f.id !== id);
                        updatePreviewPanel();
                    };
                    
                    // Handle file selection
                    const handleFiles = (files) => {
                        const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                        const maxSize = 10 * 1024 * 1024; // 10MB
                        
                        Array.from(files).forEach(file => {
                            // Validate type
                            if (!allowedTypes.includes(file.type)) {
                                Swal.showValidationMessage(`File "${file.name}" tidak didukung. Gunakan PDF, JPG, atau PNG`);
                                return;
                            }
                            
                            // Validate size
                            if (file.size > maxSize) {
                                Swal.showValidationMessage(`File "${file.name}" melebihi 10MB`);
                                return;
                            }
                            
                            // Add to array
                            const id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                            selectedFiles.push({
                                id: id,
                                file: file,
                                previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : null
                            });
                        });
                        
                        updatePreviewPanel();
                        fileUpload.value = ''; // Reset input
                    };
                    
                    // Click to upload
                    dropzone.addEventListener('click', () => {
                        fileUpload.click();
                    });
                    
                    // Drag over
                    dropzone.addEventListener('dragover', (e) => {
                        e.preventDefault();
                        dropzone.style.backgroundColor = '#e9ecef';
                        dropzone.style.borderColor = '#17a2b8';
                    });
                    
                    // Drag leave
                    dropzone.addEventListener('dragleave', (e) => {
                        e.preventDefault();
                        dropzone.style.backgroundColor = '#f8f9fa';
                        dropzone.style.borderColor = '#dee2e6';
                    });
                    
                    // Drop
                    dropzone.addEventListener('drop', (e) => {
                        e.preventDefault();
                        dropzone.style.backgroundColor = '#f8f9fa';
                        dropzone.style.borderColor = '#dee2e6';
                        handleFiles(e.dataTransfer.files);
                    });
                    
                    // File input change
                    fileUpload.addEventListener('change', (e) => {
                        handleFiles(e.target.files);
                    });
                },
                preConfirm: () => {
                    const skipCheckbox = document.getElementById('skip-to-manager');
                    const shUserId = document.getElementById('swal-sh-user').value;
                    
                    if (skipCheckbox.checked) {
                        // Skip to manager - no SPV needed
                        return { skipToManager: true, shUserId: null };
                    } else {
                        // Normal flow - SPV required
                        if (!shUserId) {
                            Swal.showValidationMessage('Pilih Supervisor/Head terlebih dahulu');
                            return false;
                        }
                        return { skipToManager: false, shUserId: shUserId };
                    }
                }
            }).then((result) => {
                if (result.isConfirmed && result.value) {
                    const { skipToManager, shUserId } = result.value;
                    
                    // Function to actually send the data
                    const sendData = () => {
                        // Create FormData with multiple files
                        const formData = new FormData();
                        formData.append('_token', '{{ csrf_token() }}');
                        
                        if (skipToManager) {
                            formData.append('skip_to_manager', '1');
                        } else {
                            formData.append('sh_user_id', shUserId);
                        }
                        
                        // Append all selected files
                        selectedFiles.forEach((fileObj, index) => {
                            formData.append('attachments[]', fileObj.file);
                        });
                        
                        // Show loading
                        Swal.fire({
                            title: 'Mengirim...',
                            html: `Mohon tunggu, sedang mengupload ${selectedFiles.length} file...`,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        
                        // Cleanup preview URLs
                        selectedFiles.forEach(fileObj => {
                            if (fileObj.previewUrl) URL.revokeObjectURL(fileObj.previewUrl);
                        });
                        
                        // Submit using fetch API
                        fetch(`{{ url('/trsapv/send') }}/${encryptedId}`, {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => {
                            if (response.ok) {
                                window.location.reload();
                            } else {
                                throw new Error('Upload failed');
                            }
                        })
                        .catch(error => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Mengirim',
                                text: 'Terjadi kesalahan saat mengirim data',
                                confirmButtonColor: '#028284'
                            });
                        });
                    };
                    
                    // If skip to manager, show confirmation first
                    if (skipToManager) {
                        Swal.fire({
                            title: 'Konfirmasi Skip ke Manager',
                            html: `<p>Dokumen ini akan <strong>langsung dikirim ke Manager</strong> tanpa melalui Supervisor/Head.</p>
                                   <p class="text-warning small"><i class="fas fa-exclamation-triangle me-1"></i> Apakah Anda yakin ingin skip?</p>`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: '<i class="fas fa-check"></i> Lanjutkan',
                            cancelButtonText: '<i class="fas fa-times"></i> Batal',
                            confirmButtonColor: '#17a2b8',
                            cancelButtonColor: '#6c757d'
                        }).then((confirmResult) => {
                            if (confirmResult.isConfirmed) {
                                sendData();
                            }
                        });
                    } else {
                        // Normal flow - send directly
                        sendData();
                    }
                }
            });
        }

        // Revision Modal
        function showRevisionModal() {
            Swal.fire({
                title: 'Konfirmasi Revisi',
                html: `
                    <div class="text-start">
                        <div class="alert alert-warning text-white" role="alert">
                            <i class="fas fa-exclamation-triangle"></i> <strong>Perhatian!</strong><br>
                            Anda akan melakukan revisi pada dokumen yang sudah ada di sistem.
                        </div>
                        <p class="mb-3">Silakan masukkan filter untuk mencari dokumen yang akan direvisi:</p>
                        <div class="mb-3">
                            <label class="form-label">Nomor SO (Optional)</label>
                            <input type="text" class="form-control" id="revision-so-number" placeholder="Contoh: 0112511038">
                            <small class="text-muted">Kosongkan jika ingin filter berdasarkan tanggal</small>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Dari (Optional)</label>
                                <input type="date" class="form-control" id="revision-date-from">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Sampai (Optional)</label>
                                <input type="date" class="form-control" id="revision-date-to">
                            </div>
                        </div>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-search"></i> Cari Data',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#ffc107',
                cancelButtonColor: '#6c757d',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    const soNumber = document.getElementById('revision-so-number').value.trim();
                    const dateFrom = document.getElementById('revision-date-from').value;
                    const dateTo = document.getElementById('revision-date-to').value;

                    // Validation: minimal isi salah satu filter
                    if (!soNumber && !dateFrom && !dateTo) {
                        Swal.showValidationMessage('Minimal isi salah satu filter (Nomor SO atau Rentang Tanggal)');
                        return false;
                    }

                    // Validation: jika ada date from atau date to, keduanya harus diisi
                    if ((dateFrom && !dateTo) || (!dateFrom && dateTo)) {
                        Swal.showValidationMessage('Tanggal Dari dan Tanggal Sampai harus diisi keduanya');
                        return false;
                    }

                    // Validation: date from tidak boleh lebih besar dari date to
                    if (dateFrom && dateTo && dateFrom > dateTo) {
                        Swal.showValidationMessage('Tanggal Dari tidak boleh lebih besar dari Tanggal Sampai');
                        return false;
                    }

                    // Validation: max range adalah 10 hari
                    if (dateFrom && dateTo) {
                        const startDate = new Date(dateFrom);
                        const endDate = new Date(dateTo);
                        const diffTime = Math.abs(endDate - startDate);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                        
                        if (diffDays > 10) {
                            Swal.showValidationMessage('Rentang tanggal maksimal 10 hari');
                            return false;
                        }
                    }

                    return fetch('{{ url('/trsapv/fetch-sap') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            so_number: soNumber,
                            date_from: dateFrom,
                            date_to: dateTo,
                            revision: 1
                        })
                    })
                    .then(response => response.json().then(data => ({ status: response.status, data })))
                    .then(({ status, data }) => {
                        if (status !== 200 || !data.success) {
                            throw new Error(data.message || 'Gagal mengambil data dari SAP');
                        }
                        return data.data;
                    })
                    .catch(error => {
                        Swal.showValidationMessage(error.message);
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed && result.value) {
                    showRevisionDataSelection(result.value);
                }
            });
        }

        // SAP Sync Modal
        function showSapSyncModal() {
            Swal.fire({
                title: 'Sync Data dari SAP',
                html: `
                    <div class="text-start">
                        <div class="mb-3">
                            <label class="form-label">Nomor SO (Optional)</label>
                            <input type="text" class="form-control" id="sap-so-number" placeholder="Contoh: 0112511038">
                            <small class="text-muted">Kosongkan jika ingin filter berdasarkan tanggal</small>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Dari (Optional)</label>
                                <input type="date" class="form-control" id="sap-date-from">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Sampai (Optional)</label>
                                <input type="date" class="form-control" id="sap-date-to">
                            </div>
                        </div>
                    </div>
                `,
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-search"></i> Cari Data',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    const soNumber = document.getElementById('sap-so-number').value.trim();
                    const dateFrom = document.getElementById('sap-date-from').value;
                    const dateTo = document.getElementById('sap-date-to').value;

                    // Validation: minimal isi salah satu filter
                    if (!soNumber && !dateFrom && !dateTo) {
                        Swal.showValidationMessage('Minimal isi salah satu filter (Nomor SO atau Rentang Tanggal)');
                        return false;
                    }

                    // Validation: jika ada date from atau date to, keduanya harus diisi
                    if ((dateFrom && !dateTo) || (!dateFrom && dateTo)) {
                        Swal.showValidationMessage('Tanggal Dari dan Tanggal Sampai harus diisi keduanya');
                        return false;
                    }

                    // Validation: date from tidak boleh lebih besar dari date to
                    if (dateFrom && dateTo && dateFrom > dateTo) {
                        Swal.showValidationMessage('Tanggal Dari tidak boleh lebih besar dari Tanggal Sampai');
                        return false;
                    }

                    // Validation: max range adalah 10 hari
                    if (dateFrom && dateTo) {
                        const startDate = new Date(dateFrom);
                        const endDate = new Date(dateTo);
                        const diffTime = Math.abs(endDate - startDate);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                        
                        if (diffDays > 10) {
                            Swal.showValidationMessage('Rentang tanggal maksimal 10 hari');
                            return false;
                        }
                    }

                    return fetch('{{ url('/trsapv/fetch-sap') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            so_number: soNumber,
                            date_from: dateFrom,
                            date_to: dateTo
                        })
                    })
                    .then(response => response.json().then(data => ({ status: response.status, data })))
                    .then(({ status, data }) => {
                        if (status !== 200 || !data.success) {
                            throw new Error(data.message || 'Gagal mengambil data dari SAP');
                        }
                        return data.data;
                    })
                    .catch(error => {
                        Swal.showValidationMessage(error.message);
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed && result.value) {
                    showSapDataSelection(result.value);
                }
            });
        }

        function showSapDataSelection(sapData) {
            // Build table HTML with unique ID
            let tableHtml = `
                <div class="text-start">
                    <p class="mb-3">Pilih Sales Order yang ingin di-import:</p>
                    <div class="table-responsive" style="max-height: 500px;">
                        <table id="sapDataTable" class="table table-sm table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width: 50px;"><input type="checkbox" id="select-all-so" onchange="toggleAllSO(this)"></th>
                                    <th>SO Number</th>
                                    <th>Document Date</th>
                                    <th>Customer Group</th>
                                    <th>Customer PO</th>
                                    <th>Sold To</th>
                                    <th>Created By</th>
                                    <th>Last Changed By</th>
                                    <th>Items</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

            sapData.forEach((so, index) => {
                tableHtml += `
                    <tr>
                        <td><input type="checkbox" class="so-checkbox" data-index="${index}"></td>
                        <td>${so.header.SALESDOCUMENT}</td>
                        <td>${so.header.DOCUMENTDATE || '-'}</td>
                        <td><strong>${so.header.CUSTOMERGROUP || '-'}</strong></td>
                        <td>${so.header.CUSTOMERPO || '-'}</td>
                        <td>${so.header.SOLDTO || '-'}</td>
                        <td>${so.header.CREATEDBY || '-'}</td>
                        <td>${so.header.LASTCHANGEDBY || '-'}</td>
                        <td>${so.items.length} item(s)</td>
                    </tr>
                `;
            });

            tableHtml += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

            Swal.fire({
                title: 'Data dari SAP',
                html: tableHtml,
                width: '900px',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-save"></i> Import Data',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                didOpen: () => {
                    // Initialize DataTable after modal is opened
                    $('#sapDataTable').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Tidak ada data",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)",
                            "paginate": {
                                "first": "Pertama",
                                "last": "Terakhir",
                                "next": "Selanjutnya",
                                "previous": "Sebelumnya"
                            }
                        },
                        "pageLength": 10,
                        "ordering": true,
                        "order": [[1, 'asc']],
                        "columnDefs": [
                            { "orderable": false, "targets": 0 }
                        ]
                    });
                },
                preConfirm: () => {
                    // Get DataTable instance
                    const table = $('#sapDataTable').DataTable();
                    
                    // Get all checked checkboxes across all pages using DataTable API
                    const checkboxes = table.$('.so-checkbox:checked');
                    
                    if (checkboxes.length === 0) {
                        Swal.showValidationMessage('Pilih minimal satu Sales Order');
                        return false;
                    }

                    const selectedData = [];
                    checkboxes.each(function() {
                        const index = $(this).attr('data-index');
                        selectedData.push(sapData[index]);
                    });

                    return selectedData;
                },
                willClose: () => {
                    // Destroy DataTable when modal closes
                    if ($.fn.DataTable.isDataTable('#sapDataTable')) {
                        $('#sapDataTable').DataTable().destroy();
                    }
                }
            }).then((result) => {
                if (result.isConfirmed && result.value) {
                    submitSapData(result.value);
                }
            });
        }

        function toggleAllSO(checkbox) {
            // Get DataTable instance
            const table = $('#sapDataTable').DataTable();
            
            // Toggle all checkboxes across all pages
            table.$('.so-checkbox').each(function() {
                this.checked = checkbox.checked;
            });
        }

        function showRevisionDataSelection(sapData) {
            // Build table HTML with unique ID
            let tableHtml = `
                <div class="text-start">
                    <div class="alert alert-info text-white" role="alert">
                        <i class="fas fa-info-circle"></i> Pilih Sales Order yang ingin direvisi. Data yang dipilih akan diupdate berdasarkan data terbaru dari SAP.
                    </div>
                    <p class="mb-3">Pilih Sales Order yang ingin di-revisi:</p>
                    <div class="table-responsive" style="max-height: 500px;">
                        <table id="revisionDataTable" class="table table-sm table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width: 50px;"><input type="checkbox" id="select-all-revision" onchange="toggleAllRevision(this)"></th>
                                    <th>SO Number</th>
                                    <th>Document Date</th>
                                    <th>Customer Group</th>
                                    <th>Customer PO</th>
                                    <th>Sold To</th>
                                    <th>Created By</th>
                                    <th>Last Changed By</th>
                                    <th>Items</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

            sapData.forEach((so, index) => {
                tableHtml += `
                    <tr>
                        <td><input type="checkbox" class="revision-checkbox" data-index="${index}"></td>
                        <td>${so.header.SALESDOCUMENT}</td>
                        <td>${so.header.DOCUMENTDATE || '-'}</td>
                        <td><strong>${so.header.CUSTOMERGROUP || '-'}</strong></td>
                        <td>${so.header.CUSTOMERPO || '-'}</td>
                        <td>${so.header.SOLDTO || '-'}</td>
                        <td>${so.header.CREATEDBY || '-'}</td>
                        <td>${so.header.LASTCHANGEDBY || '-'}</td>
                        <td>${so.items.length} item(s)</td>
                    </tr>
                `;
            });

            tableHtml += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

            Swal.fire({
                title: 'Data Revisi dari SAP',
                html: tableHtml,
                width: '900px',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-edit"></i> Proses Revisi',
                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                confirmButtonColor: '#ffc107',
                cancelButtonColor: '#6c757d',
                didOpen: () => {
                    // Initialize DataTable after modal is opened
                    $('#revisionDataTable').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Tidak ada data",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)",
                            "paginate": {
                                "first": "Pertama",
                                "last": "Terakhir",
                                "next": "Selanjutnya",
                                "previous": "Sebelumnya"
                            }
                        },
                        "pageLength": 10,
                        "ordering": true,
                        "order": [[1, 'asc']],
                        "columnDefs": [
                            { "orderable": false, "targets": 0 }
                        ]
                    });
                },
                preConfirm: () => {
                    // Get DataTable instance
                    const table = $('#revisionDataTable').DataTable();
                    
                    // Get all checked checkboxes across all pages using DataTable API
                    const checkboxes = table.$('.revision-checkbox:checked');
                    
                    if (checkboxes.length === 0) {
                        Swal.showValidationMessage('Pilih minimal satu Sales Order untuk direvisi');
                        return false;
                    }

                    const selectedData = [];
                    checkboxes.each(function() {
                        const index = $(this).attr('data-index');
                        selectedData.push(sapData[index]);
                    });

                    return selectedData;
                },
                willClose: () => {
                    // Destroy DataTable when modal closes
                    if ($.fn.DataTable.isDataTable('#revisionDataTable')) {
                        $('#revisionDataTable').DataTable().destroy();
                    }
                }
            }).then((result) => {
                if (result.isConfirmed && result.value) {
                    submitRevisionData(result.value);
                }
            });
        }

        function toggleAllRevision(checkbox) {
            // Get DataTable instance
            const table = $('#revisionDataTable').DataTable();
            
            // Toggle all checkboxes across all pages
            table.$('.revision-checkbox').each(function() {
                this.checked = checkbox.checked;
            });
        }

        function submitRevisionData(selectedData) {
            // Create and submit form
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ url('/trsapv') }}';
            
            // CSRF Token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            
            // SAP Sync flag
            const sapSyncInput = document.createElement('input');
            sapSyncInput.type = 'hidden';
            sapSyncInput.name = 'sap_sync';
            sapSyncInput.value = 'true';
            form.appendChild(sapSyncInput);
            
            // Revision flag
            const revisionInput = document.createElement('input');
            revisionInput.type = 'hidden';
            revisionInput.name = 'revision';
            revisionInput.value = '1';
            form.appendChild(revisionInput);
            
            // Selected data
            const dataInput = document.createElement('input');
            dataInput.type = 'hidden';
            dataInput.name = 'selected_data';
            dataInput.value = JSON.stringify(selectedData);
            form.appendChild(dataInput);
            
            document.body.appendChild(form);
            form.submit();
        }

        function submitSapData(selectedData) {
            // Create and submit form
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ url('/trsapv') }}';
            
            // CSRF Token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            
            // SAP Sync flag
            const sapSyncInput = document.createElement('input');
            sapSyncInput.type = 'hidden';
            sapSyncInput.name = 'sap_sync';
            sapSyncInput.value = 'true';
            form.appendChild(sapSyncInput);
            
            // Selected data
            const dataInput = document.createElement('input');
            dataInput.type = 'hidden';
            dataInput.name = 'selected_data';
            dataInput.value = JSON.stringify(selectedData);
            form.appendChild(dataInput);
            
            document.body.appendChild(form);
            form.submit();
        }
</script>
@endpush