@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- Summernote CSS - Bootstrap 5 Version (sama dengan Body Email) --}}
@section('head-link')
    <link href="{{ asset('assets/summernote-0.9.0-dist/summernote-bs5.css') }}" rel="stylesheet">
    <style>
        /* Fix Summernote dropdown di dalam SweetAlert2 */
        .swal2-container {
            z-index: 10000 !important;
        }

        .swal2-popup {
            overflow: visible !important;
        }

        .swal2-html-container {
            overflow: visible !important;
        }

        /* Fix dropdown Summernote */
        .note-editor .dropdown-menu,
        .note-btn-group .dropdown-menu {
            z-index: 10060 !important;
        }

        /* Fix color picker, font dropdown, table picker */
        .note-color .dropdown-menu,
        .note-fontname .dropdown-menu,
        .note-fontsize .dropdown-menu,
        .note-para .dropdown-menu,
        .note-table .dropdown-menu,
        .note-style .dropdown-menu {
            z-index: 10070 !important;
            min-width: 340px !important;
        }

        /* Fix popover dan modal dialog Summernote */
        .note-popover {
            z-index: 10065 !important;
        }

        .note-modal {
            z-index: 10080 !important;
        }

        .note-modal-backdrop {
            z-index: 10075 !important;
        }

        /* Ensure dropdowns show properly */
        .note-btn-group.open .dropdown-menu,
        .note-btn-group .dropdown-menu.show {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        #list_trotpo tbody tr.status-4-row td {
            background-color: #fce1e4 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-4-row:hover td,
        #list_trotpo tbody tr.status-4-row.selected td {
            background-color: #fce1e4 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-5-row td {
            background-color: #e8dff5 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-5-row:hover td,
        #list_trotpo tbody tr.status-5-row.selected td {
            background-color: #e8dff5 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-4-row a,
        #list_trotpo tbody tr.status-5-row a {
            color: #000 !important;
        }

        .flatpickr-calendar {
            z-index: 10090 !important;
        }

        .swal2-popup .sap-datepicker-field {
            position: relative;
        }

        .swal2-popup .sap-datepicker-field .form-control {
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            padding-right: 2.75rem !important;
            width: 100% !important;
        }

        .swal2-popup .sap-datepicker-button {
            align-items: center;
            background: transparent;
            border: 0;
            color: #344767;
            display: flex;
            height: 100%;
            justify-content: center;
            padding: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 42px;
            z-index: 3;
        }
    </style>
@endsection

{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <ul class="nav nav-tabs" id="statusEmailTabs">
                                <li class="nav-item">
                                    <button type="button" class="nav-link active status-tab" data-status-filter="1">
                                        Belum Kirim
                                    </button>
                                </li>

                                <li class="nav-item">
                                    <button type="button" class="nav-link status-tab" data-status-filter="other">
                                        Status Lainnya
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display w-100" id="list_{{ $dmenu }}">
                                    <thead style="background-color:#c2e7ff;">
                                        <tr>
                                            <th style="width:48px; text-align:center; white-space:nowrap;">
                                                <input type="checkbox" id="select-all-checkbox" autocomplete="off">
                                            </th>
                                            <th>No</th>
                                            <th>Status</th>
                                            <th>No PO</th>
                                            <th>Delivery Date</th>
                                            <th>Dokumen Date</th>
                                            <th>Nama Supplier</th>
                                            {{-- <th>CC Email</th> --}}
                                            <th>To Email Vendor</th>
                                            <th>Tipe PO</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 1;

                                            // Status email mengikuti master sys_enum idenum=status_email.
                                            $statusEmailOptions = collect($status_email_options ?? []);
                                            $statusEmailMap = $statusEmailOptions
                                                ->mapWithKeys(
                                                    fn($item) => [(string) $item->value => (string) $item->name],
                                                )
                                                ->all();

                                            // Format tanggal PO untuk tampilan tabel: Hari, dd/mm/yyyy.
                                            $formatPoDate = function ($date) {
                                                $raw = trim((string) $date);

                                                if ($raw === '') {
                                                    return '';
                                                }

                                                try {
                                                    $parsed = \Carbon\Carbon::parse($raw);
                                                    $days = [
                                                        'Minggu',
                                                        'Senin',
                                                        'Selasa',
                                                        'Rabu',
                                                        'Kamis',
                                                        'Jumat',
                                                        'Sabtu',
                                                    ];

                                                    return $days[$parsed->dayOfWeek] . ', ' . $parsed->format('d/m/Y');
                                                } catch (\Throwable $e) {
                                                    return $raw;
                                                }
                                            };

                                            // Format tanggal terakhir kirim untuk alert checkbox status pernah kirim.
                                            $formatPoDateTime = function ($date) use ($formatPoDate) {
                                                $raw = trim((string) $date);

                                                if ($raw === '') {
                                                    return '';
                                                }

                                                try {
                                                    $parsed = \Carbon\Carbon::parse($raw);

                                                    return $formatPoDate($raw) . ' ' . $parsed->format('H:i');
                                                } catch (\Throwable $e) {
                                                    return $raw;
                                                }
                                            };
                                        @endphp
                                        @foreach ($table_detail as $row)
                                            @php
                                                // Normalisasi: terima JSON ["a@x","b@x"] atau string "a@x, b@x"
                                                if (!function_exists('ccPlain')) {
                                                    function ccPlain($raw)
                                                    {
                                                        $raw = trim((string) $raw);
                                                        if ($raw === '') {
                                                            return '';
                                                        }
                                                        // Coba JSON array
                                                        if (str_starts_with($raw, '[')) {
                                                            $arr = json_decode($raw, true);
                                                            if (is_array($arr)) {
                                                                $arr = array_values(
                                                                    array_filter(array_map('trim', $arr)),
                                                                );
                                                                return implode(', ', $arr);
                                                            }
                                                        }
                                                        // Fallback: split by koma/titik koma/newline → gabung lagi pakai koma+spasi
                                                        $parts = preg_split('/[;,\\n]+/', $raw);
                                                        $parts = array_values(array_filter(array_map('trim', $parts)));
                                                        return implode(', ', $parts);
                                                    }
                                                }
                                                $ccPlain = ccPlain($row->cc_email ?? '');
                                            @endphp
                                            @php
                                                $statusValue = (string) ($row->status ?? '');
                                                $statusLabel = $statusEmailMap[$statusValue] ?? $statusValue;

                                                // Hanya status Belum dikirim dan HOLD yang boleh diedit manual.
                                                $canEditStatus = in_array($statusValue, ['1', '5', '6'], true);
                                                $lastEmailLabel = $formatPoDateTime($row->last_email_at ?? '');
                                            @endphp
                                            <tr data-status="{{ (string) $statusValue }}"
                                                data-nopo="{{ trim($row->no_po) }}"
                                                data-supplier="{{ e($row->nama_supplier) }}"
                                                data-vendor="{{ e($row->email_to) }}" data-tipe="{{ e($row->tipe_po) }}"
                                                data-file="{{ e($row->file_pdf ?? '') }}"
                                                data-no-vendor="{{ e($row->no_vendor ?? '') }}"
                                                data-last-email="{{ e($lastEmailLabel) }}"
                                                data-doc_date="{{ e($row->dokumen_date_min ?? '') }}"
                                                data-dev_date="{{ e($row->delivery_date ?? '') }}">
                                                <td><input type="checkbox" class="row-checkbox" name="selected_ids[]"
                                                        value="{{ $row->no_po }}" autocomplete="off"></td>
                                                <td class="row-number"></td>
                                                <td class="{{ $canEditStatus ? 'status-email-cell' : 'status-email-readonly' }}"
                                                    data-no-po="{{ $row->no_po }}" data-status="{{ $statusValue }}"
                                                    data-current-status="{{ $statusValue }}"
                                                    title="{{ $canEditStatus ? 'Klik untuk edit Status' : 'Status hanya bisa diubah jika Belum dikirim atau HOLD' }}">
                                                    {{ $statusLabel }}
                                                </td>
                                                <td class="po-cell" data-tipe-po="{{ $row->tipe_po }}"
                                                    data-id-po="{{ $row->id_po }}" data-no-po="{{ $row->no_po }}"
                                                    data-current="{{ $row->no_po }}" title="Klik untuk Get SAP">
                                                    <a href="#" class="nopo-link"
                                                        data-nopo="{{ trim($row->no_po) }}">{{ $row->no_po }}</a>
                                                </td>
                                                <td>{{ $formatPoDate($row->delivery_date) }}</td>
                                                <td>{{ $formatPoDate($row->dokumen_date_min) }}</td>
                                                <td>{{ $row->nama_supplier }}</td>
                                                {{-- <td class="cc-cell" data-tipe-po="{{ $row->tipe_po }}"
                                                    data-id-po="{{ $row->id_po }}" data-no-po="{{ $row->no_po }}"
                                                    data-current="{{ $ccPlain }}" title="Klik untuk edit CC">
                                                    {{ $ccPlain !== '' ? $ccPlain : '' }}
                                                </td> --}}
                                                <td>{{ $row->email_to }}</td>
                                                <td class="tipo-cell" data-no-po="{{ $row->no_po }}"
                                                    data-current-tipo="{{ $row->tipe_po }}" title="Klik untuk edit Tipe PO"
                                                    style="cursor:pointer; color:#344767; transition: color 0.15s ease;">
                                                    {{ $row->tipe_po }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <div class="modal fade" id="ccEmailModal" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Edit CC Email</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <input type="hidden" id="cc_id_po">
                                                <input type="hidden" id="cc_tipe_po">
                                                <input type="hidden" id="cc_no_po">
                                                <!-- Custom chips UI (small Gmail-like chips, implemented in this file) -->
                                                <div id="cc_chips" class="email-chips">
                                                    <input type="text" class="email-input"
                                                        placeholder="ketik email lalu tekan Enter">
                                                </div>
                                                <small class="text-muted">Ketik lalu tekan Enter untuk menambahkan.</small>
                                                <div id="cc_error" class="text-danger small d-none mt-2"></div>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                <button class="btn btn-primary" id="cc_save_btn">Simpan</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <meta name="csrf-token" content="{{ csrf_token() }}">

                                {{-- Modal detail (letakkan sekali di bawah tabel) --}}
                                <div class="modal fade" id="poDetailModal" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Detail NO PO: <span id="mdlNoPo"></span></h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Tutup"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div id="mdlMeta" class="mb-2 text-muted"></div>
                                                <div class="table-responsive">
                                                    <table class="table table-sm table-bordered mb-0">
                                                        <thead style="background-color:#c2e7ff;">
                                                            <tr>
                                                                <th style="width:80px">No Pr</th>
                                                                <th style="width:80px">Urut</th>
                                                                <th style="width:220px">Material</th>
                                                                <th>Deskripsi Material</th>
                                                                <th>Deskripsi Barang</th>
                                                                <th class="text-end" style="width:160px">Nominal</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="mdlBody">
                                                            <tr>
                                                                <td colspan="5" class="text-center text-muted">Memuat…
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <a id="mdlPdfLink" href="#" target="_blank"
                                                    class="btn btn-outline-secondary d-none">Preview PDF</a>
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Tutup</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>
                                        Note :
                                        <i aria-hidden="true" style="color: #eddcd2;" class="fas fa-circle"></i>
                                        PO Sudah pernah kirim email & Sudah Dikirim
                                    </code>
                                    <code class="ms-3">
                                        <i aria-hidden="true" style="color: #e8dff5;" class="fas fa-circle"></i>
                                        PO HOLD
                                    </code>
                                    {{-- <code class="ms-3">
                                        <i aria-hidden="true" style="color: #c2e7ff;" class="fas fa-circle"></i>
                                        Data active
                                    </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('js')
    <script>
        $(document).ready(function() {
            const tableId = 'list_{{ $dmenu }}';
            const tableSelector = '#' + tableId;

            // Default membuka tab Belum Kirim
            let activeStatusFilter = '1';

            // Filter baris berdasarkan data-status pada <tr>
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                // Jangan memengaruhi DataTables lain
                if (settings.nTable.id !== tableId) {
                    return true;
                }

                const rowNode = settings.aoData[dataIndex]?.nTr;

                if (!rowNode) {
                    return true;
                }

                const rowStatus = String(
                    rowNode.getAttribute('data-status') || ''
                ).trim();

                if (activeStatusFilter === '1') {
                    return rowStatus === '1';
                }

                if (activeStatusFilter === 'other') {
                    return rowStatus !== '1';
                }

                return true;
            });

            // Ambil DataTables yang sudah diinisialisasi
            const table = $(tableSelector).DataTable();

            // Jalankan filter default Belum Kirim
            table.draw();

            // Ketika tab diklik
            $('#statusEmailTabs').on('click', '.status-tab', function() {
                activeStatusFilter = String(
                    $(this).attr('data-status-filter')
                );

                $('#statusEmailTabs .status-tab')
                    .removeClass('active');

                $(this).addClass('active');

                // Reset semua checkbox
                $('#select-all-checkbox').prop('checked', false);

                $(tableSelector)
                    .find('.row-checkbox')
                    .prop('checked', false);

                // Kembali ke halaman pertama dan filter ulang
                table.page('first').draw();
            });
        });
    </script>
    <script>
        $(function() {
            const fmt = n => new Intl.NumberFormat('id-ID').format(+n || 0);

            function renderRows(items) {
                if (!Array.isArray(items) || !items.length) {
                    return '<tr><td colspan="5" class="text-center text-muted">Tidak ada detail.</td></tr>';
                }
                return items.map(r => {
                    const no_pr = r.no_pr ?? '';
                    const urut = (r.urut ?? '').toString().trim();
                    const mat = r.material ?? '';
                    const dsmat = r.deskripsi_material ?? r.deskripsiMaterial ?? r.deskm ?? '';
                    const dsbar = r.deskripsi_barang ?? r.deskripsiBarang ?? r.deskb ?? '';
                    const nom = fmt(r.nominal ?? r.total ?? 0);
                    return `
                    <tr>
                    <td class="text-muted">${no_pr}</td>
                    <td class="text-muted">${urut}</td>
                    <td class="fw-semibold">${mat}</td>
                    <td>${dsmat}</td>
                    <td>${dsbar}</td>
                    <td class="text-end">${nom}</td>
                    </tr>`;
                }).join('');
            }

            function openDetailModal(no_po, metaText) {
                const $body = $('#mdlBody');
                $('#mdlNoPo').text(no_po || '-');
                $('#mdlMeta').text(metaText || '');
                $body.html('<tr><td colspan="5" class="text-center text-muted">Memuat…</td></tr>');

                // show modal
                const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('poDetailModal'));
                modal.show();

                // AJAX ambil detail
                $.ajax({
                        url: `{{ route('trotpo.detail') }}`,
                        method: 'GET',
                        data: {
                            no_po: no_po
                        },
                        dataType: 'json',
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .done(function(res) {
                        // Normalisasi payload -> items[]
                        let items = [];
                        if (Array.isArray(res)) items = res;
                        else if (Array.isArray(res?.items)) items = res.items;
                        else if (Array.isArray(res?.data)) items = res.data;
                        else if (res && typeof res === 'object') items = Object.values(res);

                        // Render
                        $body.html(renderRows(items));
                    })
                    .fail(function(xhr) {
                        console.error('detail AJAX fail:', {
                            status: xhr.status,
                            statusText: xhr.statusText,
                            url: this.url,
                            resp: (xhr.responseText || '').slice(0, 300)
                        });
                        $body.html(
                            '<tr><td colspan="5" class="text-center text-danger">Gagal memuat detail.</td></tr>'
                        );
                    });
            }

            // Klik No PO → buka modal
            $('#list_{{ $dmenu }}').on('click', '.nopo-link', function(e) {
                e.preventDefault();
                let $tr = $(this).closest('tr');
                if ($tr.hasClass('child')) $tr = $tr.prev();
                const no_po = String($tr.data('nopo') ?? '').trim();
                const supplier = String($tr.data('supplier') ?? '').trim();
                const dokDate = String($tr.data('date') ?? '').trim();
                const metaText = `Supplier: ${supplier}`;
                if (no_po) openDetailModal(no_po, metaText);
            });
        });
    </script>

    {{-- ========================================
         MODAL EDIT TIPE PO
    ======================================== --}}
    <script>
        (function() {
            // Create modal if not exists
            if (!document.getElementById('tipoModal')) {
                const modalHtml = `
                    <div class="modal fade" id="tipoModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit Tipe PO - <span id="tipo_no_po_title"></span></h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" id="tipo_no_po" />
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Tipe PO:</label>
                                        <select id="tipo_select" class="form-select">
                                            <option value="">-- Memuat data... --</option>
                                        </select>
                                    </div>
                                    <div id="tipo_error" class="alert alert-danger d-none"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                    <button type="button" id="tipo_save_btn" class="btn btn-primary">Simpan</button>
                                </div>
                            </div>
                        </div>
                    </div>`;
                $('body').append(modalHtml);
            }

            const tipoBsModal = new bootstrap.Modal(document.getElementById('tipoModal'));
            const $tipoErr = document.getElementById('tipo_error');
            let targetTipoCellEl = null;
            let tipoPOOptions = [];

            // Load Tipe PO dari database
            async function loadTipoPOOptions() {
                if (tipoPOOptions.length > 0) return tipoPOOptions;

                try {
                    const response = await $.ajax({
                        url: '{{ route('trotpo.listTipePO') }}',
                        method: 'GET',
                        dataType: 'json',
                        timeout: 10000
                    });

                    if (response.success && Array.isArray(response.data)) {
                        tipoPOOptions = response.data;
                        return tipoPOOptions;
                    } else {
                        throw new Error('Data Tipe PO tidak valid');
                    }
                } catch (error) {
                    console.error('Gagal memuat Tipe PO:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat data Tipe PO dari database'
                    });
                    return [];
                }
            }

            // Klik pada <td class="tipo-cell">
            $(document).on('click', 'td.tipo-cell', async function() {
                targetTipoCellEl = this;

                const noPo = this.dataset.noPo;
                const currentTipo = this.dataset.currentTipo;

                $('#tipo_no_po').val(noPo);
                $('#tipo_no_po_title').text(noPo);
                $tipoErr.classList.add('d-none');

                $('#tipo_select').html('<option value="">-- Memuat data... --</option>').prop('disabled',
                    true);
                tipoBsModal.show();

                const options = await loadTipoPOOptions();

                if (options.length === 0) {
                    $('#tipo_select').html('<option value="">-- Tidak ada data Tipe PO --</option>');
                    return;
                }

                let optionsHtml = '<option value="">-- Pilih Tipe PO --</option>';
                options.forEach(tipo => {
                    const selected = tipo === currentTipo ? 'selected' : '';
                    optionsHtml += `<option value="${tipo}" ${selected}>${tipo}</option>`;
                });

                $('#tipo_select').html(optionsHtml).prop('disabled', false);
            });

            // Simpan perubahan Tipe PO
            $('#tipo_save_btn').on('click', function() {
                const noPo = $('#tipo_no_po').val();
                const newTipo = $('#tipo_select').val();

                if (!newTipo) {
                    $tipoErr.textContent = 'Tipe PO harus dipilih';
                    $tipoErr.classList.remove('d-none');
                    return;
                }

                $.ajax({
                    method: 'POST',
                    url: '{{ route('trotpo.updateTipePO') }}',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    data: {
                        no_po: noPo,
                        tipe_po: newTipo
                    },
                    success: (response) => {
                        if (targetTipoCellEl) {
                            targetTipoCellEl.textContent = newTipo;
                            targetTipoCellEl.dataset.currentTipo = newTipo;
                        }
                        tipoBsModal.hide();
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Tipe PO berhasil diupdate',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    },
                    error: (xhr) => {
                        $tipoErr.textContent = xhr.responseJSON?.message ?? 'Gagal menyimpan.';
                        $tipoErr.classList.remove('d-none');
                    }
                });
            });
        })();
    </script>

    {{-- ========================================
         MODAL EDIT STATUS EMAIL
    ======================================== --}}
    <script>
        (function() {
            if (!document.getElementById('statusEmailModal')) {
                const modalHtml = `
                    <div class="modal fade" id="statusEmailModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit Status - <span id="status_email_no_po_title"></span></h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" id="status_email_no_po" />
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Status:</label>
                                        <select id="status_email_select" class="form-select">
                                            <option value="">-- Memuat data... --</option>
                                        </select>
                                    </div>
                                    <div id="status_email_error" class="alert alert-danger d-none"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                    <button type="button" id="status_email_save_btn" class="btn btn-primary">Simpan</button>
                                </div>
                            </div>
                        </div>
                    </div>`;
                $('body').append(modalHtml);
            }

            const statusEmailBsModal = new bootstrap.Modal(document.getElementById('statusEmailModal'));
            const $statusEmailErr = document.getElementById('status_email_error');
            let targetStatusEmailCellEl = null;
            let statusEmailOptions = [];

            async function loadStatusEmailOptions() {
                if (statusEmailOptions.length > 0) return statusEmailOptions;

                try {
                    const response = await $.ajax({
                        url: '{{ route('trotpo.listStatusEmail') }}',
                        method: 'GET',
                        dataType: 'json',
                        timeout: 10000
                    });

                    if (response.success && Array.isArray(response.data)) {
                        statusEmailOptions = response.data;
                        return statusEmailOptions;
                    }

                    throw new Error('Data Status tidak valid');
                } catch (error) {
                    console.error('Gagal memuat Status Email:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat status dari sys_enum'
                    });
                    return [];
                }
            }

            $(document).on('click', 'td.status-email-cell', async function() {
                targetStatusEmailCellEl = this;

                const noPo = this.dataset.noPo;
                const currentStatus = this.dataset.currentStatus || this.dataset.status || '';

                // Status selain Belum dikirim/HOLD hanya tampil, tidak bisa dibuka edit.
                if (!['1', '5', '6'].includes(currentStatus)) {
                    return;
                }

                $('#status_email_no_po').val(noPo);
                $('#status_email_no_po_title').text(noPo);
                $statusEmailErr.classList.add('d-none');

                $('#status_email_select').html('<option value="">-- Memuat data... --</option>').prop(
                    'disabled',
                    true);
                statusEmailBsModal.show();

                const options = await loadStatusEmailOptions();

                if (options.length === 0) {
                    $('#status_email_select').html('<option value="">-- Tidak ada data Status --</option>');
                    return;
                }

                const $select = $('#status_email_select');
                $select.empty().append(new Option('-- Pilih Status --', ''));

                // Opsi edit status dibatasi ke Belum dikirim dan HOLD.
                const editableOptions = options.filter(status => ['1', '5', '6'].includes(String(status
                    .value ??
                    '')));

                editableOptions.forEach(status => {
                    const value = String(status.value ?? '');
                    const label = String(status.name ?? value);
                    const option = new Option(label, value, false, value === currentStatus);
                    $select.append(option);
                });

                if (editableOptions.length === 0) {
                    $('#status_email_select').html(
                        '<option value="">-- Status Belum dikirim / HOLD tidak ditemukan --</option>');
                    return;
                }

                $select.prop('disabled', false);
            });

            function applyStatusEmailRowColor(rowEl, statusValue) {
                const $row = $(rowEl);

                // reset class dulu
                $row.removeClass('status-4-row status-5-row');

                // apply sesuai status
                if (statusValue == '4') {
                    $row.addClass('status-4-row');
                }

                if (statusValue == '5') {
                    $row.addClass('status-5-row');
                }

                if (statusValue == '6') {
                    $row.addClass('status-4-row');
                }
            }

            $('#status_email_save_btn').on('click', function() {
                const noPo = $('#status_email_no_po').val();
                const newStatus = $('#status_email_select').val();
                const newStatusLabel = $('#status_email_select option:selected').text();

                if (!newStatus) {
                    $statusEmailErr.textContent = 'Status harus dipilih';
                    $statusEmailErr.classList.remove('d-none');
                    return;
                }

                // Guard di frontend agar status lain dari sys_enum tidak bisa tersimpan dari modal ini.
                if (!['1', '5', '6'].includes(newStatus)) {
                    $statusEmailErr.textContent = 'Status hanya bisa diubah ke Belum dikirim atau HOLD';
                    $statusEmailErr.classList.remove('d-none');
                    return;
                }

                $.ajax({
                    method: 'POST',
                    url: '{{ route('trotpo.updateStatusEmail') }}',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    data: {
                        no_po: noPo,
                        status: newStatus
                    },
                    success: (response) => {
                        if (targetStatusEmailCellEl) {
                            const label = response.status_label || newStatusLabel;

                            // update text status
                            targetStatusEmailCellEl.textContent = label;

                            // update attribute HTML
                            targetStatusEmailCellEl.dataset.status = newStatus;
                            targetStatusEmailCellEl.dataset.currentStatus = newStatus;

                            // update jQuery data juga, karena .data() kadang cache value lama
                            $(targetStatusEmailCellEl).data('status', newStatus);
                            $(targetStatusEmailCellEl).data('current-status', newStatus);

                            // ambil row lalu update warna langsung
                            const rowEl = $(targetStatusEmailCellEl).closest('tr');
                            applyStatusEmailRowColor(rowEl, newStatus);
                        }

                        statusEmailBsModal.hide();

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Status berhasil diupdate',
                            timer: 1200,
                            showConfirmButton: false
                        });
                    },
                    error: (xhr) => {
                        $statusEmailErr.textContent = xhr.responseJSON?.message ??
                            'Gagal menyimpan.';
                        $statusEmailErr.classList.remove('d-none');
                    }
                });
            });
        })();
    </script>

    <style>
        .tipo-cell {
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .tipo-cell:hover {
            color: #007bff;
            text-decoration: underline;
        }

        .cc-cell {
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .cc-cell:hover {
            color: #ff5722;
            text-decoration: underline;
        }

        .status-email-cell {
            cursor: pointer;
            color: #000 !important;
            transition: color 0.15s ease;
            text-decoration: underline !important;
        }

        .status-email-cell:hover {
            color: #000 !important;
            text-decoration: underline !important;
        }

        .status-email-readonly {
            color: #000 !important;
            text-decoration: none !important;
        }

        .po-cell {
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .po-cell:hover {
            color: #007bff;
            text-decoration: underline;
        }

        .cc-cell {
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .cc-cell:hover {
            color: #ff5722;
            /* mirip merah/oranye di contohmu */
            text-decoration: underline;
            /* opsional, kalau mau kayak link */
        }

        .po-cell {
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .po-cell:hover {
            color: #007bff;
            text-decoration: underline;
        }

        .email-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px;
            border: 1.5px solid #198754;
            border-radius: 10px;
            background: #fff
        }

        .email-chips .email-input {
            border: 0;
            outline: 0;
            min-width: 180px;
            flex: 1;
            background: transparent
        }

        .email-chips .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid #198754;
            border-radius: 9999px;
            padding: 4px 10px;
            background: #fff;
            font-size: 13px
        }

        .email-chips .chip button {
            border: 0;
            background: transparent;
            cursor: pointer;
            line-height: 1;
            color: #198754;
            font-size: 14px
        }

        .email-chips:focus-within {
            box-shadow: 0 0 0 3px rgba(25, 135, 84, .15)
        }

        .chips-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px;
            border: 1.5px solid #198754;
            border-radius: 10px;
            background: #fff;
            min-height: 40px;
        }

        .chips-container .email-input {
            border: 0;
            outline: 0;
            min-width: 180px;
            flex: 1;
            background: transparent;
        }

        .chips-container .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid #198754;
            border-radius: 9999px;
            padding: 4px 10px;
            background: #fff;
            font-size: 13px;
        }

        .chips-container .chip button {
            border: 0;
            background: transparent;
            cursor: pointer;
            line-height: 1;
            color: #198754;
            font-size: 14px;
        }

        .chips-container:focus-within {
            box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
        }
    </style>
    <style>
        #list_trotpo tbody tr.status-4-row td {
            background-color: #fce1e4 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-4-row:hover td,
        #list_trotpo tbody tr.status-4-row.selected td {
            background-color: #fce1e4 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-4-row a,
        #list_trotpo tbody tr.status-5-row a,
        {
        color: #000 !important;
        }

        #list_trotpo tbody tr.status-5-row td {
            background-color: #e8dff5 !important;
            color: #000 !important;
        }

        #list_trotpo tbody tr.status-5-row:hover td,
        #list_trotpo tbody tr.status-5-row.selected td {
            background-color: #e8dff5 !important;
            color: #000 !important;
        }
    </style>
    <style>
        .cc-email-box {
            min-height: 90px;
            border: 1px solid #198754;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 8px;
            background: #fff;
            cursor: text;
        }

        .cc-email-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #198754;
            border-radius: 20px;
            padding: 5px 12px;
            background: #fff;
            color: #212529;
            font-weight: 600;
            font-size: 14px;
        }

        .cc-email-remove {
            border: none;
            background: transparent;
            color: #198754;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
        }

        .cc-email-input {
            border: none;
            outline: none;
            flex: 1;
            min-width: 180px;
            font-size: 15px;
            padding: 6px;
        }

        .cc-email-input::placeholder {
            color: #888;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modalEl = document.getElementById('ccEmailModal');
            const bsModal = new bootstrap.Modal(modalEl);
            const $err = document.getElementById('cc_error');

            // simpan referensi sel yang terakhir diklik
            let targetCellEl = null;

            // Klik pada <td class="cc-cell">
            $(document).on('click', 'td.cc-cell', function() {
                targetCellEl = this; // simpan DOM elementnya

                const tipe = this.dataset.tipePo;
                const nopo = this.dataset.noPo;
                const curr = (this.dataset.current || '').trim();

                $('#cc_tipe_po').val(tipe);
                $('#cc_no_po').val(nopo);
                $err.classList.add('d-none');

                // initialize chips UI with current emails
                try {
                    const root = document.getElementById('cc_chips');
                    const preset = Array.isArray(curr) ? curr : csvToArray(curr);
                    initSwalChips(root, preset);
                } catch (e) {
                    console.warn('init chips failed', e);
                }

                bsModal.show();
            });

            function validEmails(s) {
                if (!s) return true;
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return s.split(',').map(t => t.trim()).filter(Boolean).every(e => re.test(e));
            }

            $('#cc_save_btn').on('click', function() {
                const tipe = $('#cc_tipe_po').val();
                const nopo = $('#cc_no_po').val();

                // collect chip values
                const values = getSwalChipsValues();

                if (!Array.isArray(values)) {
                    $err.textContent = 'Tidak ada email.';
                    $err.classList.remove('d-none');
                    return;
                }

                if (!values.every(isEmail)) {
                    $err.textContent = 'Format email tidak valid. Periksa kembali.';
                    $err.classList.remove('d-none');
                    return;
                }

                const value = values.join(',');

                $.ajax({
                    method: 'POST',
                    url: '{{ route('email-po.save') }}',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    data: {
                        tipe_po: tipe,
                        no_po: nopo,
                        cc_email: value
                    },
                    success: () => {
                        if (targetCellEl) {
                            targetCellEl.textContent = value || '-';
                            targetCellEl.dataset.current = value || '';
                        }
                        bsModal.hide();
                    },
                    error: (xhr) => {
                        $err.textContent = xhr.responseJSON?.message ?? 'Gagal menyimpan.';
                        $err.classList.remove('d-none');
                    }
                });
            });
        });

        const poModalEl = document.getElementById('poModal');
        const poBsModal = new bootstrap.Modal(poModalEl);
        const $poErr = document.getElementById('po_error');
        let targetPoCellEl = null;

        $(document).on('click', 'td.po-cell', function(e) {
            e.preventDefault();
            const noPo = this.dataset.noPo;

            triggerGetSapModal('po', [noPo]);
        });

        function getSwalChipsValues() {
            return Array.from(__swalChipsStore || []);
        }

        function initSwalChips(root, preset) {
            __swalChipsStore = new Set((preset || []).filter(v => v && v.trim()).map(v => v.trim()));
            const input = root.querySelector('.email-input');

            function render() {
                [...root.querySelectorAll('.chip')].forEach(el => el.remove());

                [...__swalChipsStore].forEach(v => {
                    const chip = document.createElement('span');
                    chip.className = 'chip';
                    chip.innerHTML = `<span>${v}</span><button type="button" aria-label="hapus">×</button>`;

                    chip.querySelector('button').onclick = () => {
                        __swalChipsStore.delete(v);
                        render();
                        root.dispatchEvent(new Event('chips:changed'));
                    };

                    root.insertBefore(chip, input);
                });
            }

            function consume(text) {
                text.split(/[\s,;]+/).forEach(t => {
                    const v = t.trim();
                    if (v) __swalChipsStore.add(v);
                });

                input.value = '';
                render();
                root.dispatchEvent(new Event('chips:changed'));
            }

            input.onkeydown = (e) => {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    e.stopPropagation();

                    if (input.value.trim()) {
                        consume(input.value);
                    }

                    return false;
                }

                if (e.key === 'Backspace' && !input.value && __swalChipsStore.size) {
                    const last = [...__swalChipsStore].pop();
                    __swalChipsStore.delete(last);
                    render();
                    root.dispatchEvent(new Event('chips:changed'));
                }
            };

            input.onpaste = (e) => {
                e.preventDefault();
                consume((e.clipboardData || window.clipboardData).getData('text'));
            };

            root.addEventListener('chips:consume', () => {
                if (input.value.trim()) {
                    consume(input.value);
                }
            });

            input.focus();
            render();
        }

        function isValidNoPo(value) {
            const trimmed = value.trim();

            if (trimmed.length !== 2) {
                return {
                    valid: false,
                    message: 'No PO harus tepat 10 digit'
                };
            }

            if (!/^\d+$/.test(trimmed)) {
                return {
                    valid: false,
                    message: 'No PR hanya boleh berisi angka'
                };
            }

            return {
                valid: true
            };
        }

        function toDisplayDate(isoDate) {
            const parts = String(isoDate || '').split('-');

            if (parts.length !== 3) {
                return isoDate || '';
            }

            return `${parts[2]}/${parts[1]}/${parts[0]}`;
        }

        function toSapDate(displayDate) {
            const value = String(displayDate || '').trim();

            if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
                return value;
            }

            const parts = value.split('/');

            if (parts.length !== 3) {
                return value;
            }

            return `${parts[2]}-${parts[1]}-${parts[0]}`;
        }

        function initSapDatepickers() {
            if (typeof flatpickr !== 'function') {
                return;
            }

            flatpickr('#sap-date-from, #sap-date-to', {
                dateFormat: 'd/m/Y',
                allowInput: true,
                disableMobile: true,
                position: 'below right'
            });
        }

        async function triggerGetSapModal() {
            const today = new Date();
            const threeMonthsAgo = new Date();
            threeMonthsAgo.setMonth(today.getMonth() - 3);
            const todayStr = today.toISOString().slice(0, 10);
            const threeMonthsAgoStr = threeMonthsAgo.toISOString().slice(0, 10);

            const {
                value: formValues
            } = await Swal.fire({
                title: 'Get Data SAP',
                html: `
                <div class="text-start">
                    <div class="mb-3">
                        <label class="form-label fw-bold">No PR:</label>
                        <div class="chips-container" style="min-height: 40px;">
                            <input type="text" class="email-input form-control border-0 bg-transparent" placeholder="Ketik No PR dan tekan Enter..." style="box-shadow: none; outline: none;">
                        </div>
                        <small class="text-muted">
                            <strong>Format: Bisa tulis 2 digit PR </strong> (contoh: 17)<br>
                            <strong>Cara input:</strong> Ketik → Enter atau koma untuk menambahkan. Klik ✕ untuk hapus.
                        </small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Tanggal Mulai:</label>
                        <div class="sap-datepicker-field" style="position: relative;">
                            <input type="text" id="sap-date-from" class="form-control datepicker sap-datepicker" value="${toDisplayDate(threeMonthsAgoStr)}" style="width:100%; padding-right:2.75rem;">
                            <button type="button" class="sap-datepicker-button" onclick="document.getElementById('sap-date-from')._flatpickr.open()" style="position:absolute; right:0; top:0; width:42px; height:100%; border:0; background:transparent; color:#344767; display:flex; align-items:center; justify-content:center; padding:0;">
                                <i class="fas fa-calendar-alt"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Tanggal Akhir:</label>
                        <div class="sap-datepicker-field" style="position: relative;">
                            <input type="text" id="sap-date-to" class="form-control datepicker sap-datepicker" value="${toDisplayDate(todayStr)}" style="width:100%; padding-right:2.75rem;">
                            <button type="button" class="sap-datepicker-button" onclick="document.getElementById('sap-date-to')._flatpickr.open()" style="position:absolute; right:0; top:0; width:42px; height:100%; border:0; background:transparent; color:#344767; display:flex; align-items:center; justify-content:center; padding:0;">
                                <i class="fas fa-calendar-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `,
                showCancelButton: true,
                confirmButtonText: 'Ambil Data',
                cancelButtonText: 'Batal',
                allowEnterKey: false,

                didOpen: (popup) => {
                    initSapDatepickers();

                    const root = popup.querySelector('.chips-container');
                    initSwalChips(root, []);
                },

                preConfirm: async () => {
                    const root = Swal.getPopup()?.querySelector('.chips-container');
                    root?.dispatchEvent(new Event('chips:consume'));

                    const poNumbers = getSwalChipsValues();
                    const startDate = toSapDate(document.getElementById('sap-date-from')?.value);
                    const endDate = toSapDate(document.getElementById('sap-date-to')?.value);

                    if (poNumbers.length === 0 && !startDate && !endDate) {
                        Swal.showValidationMessage(
                            'Minimal isi salah satu filter: No PR, Tanggal Mulai, atau Tanggal Akhir.');
                        return false;
                    }

                    const invalidPos = poNumbers.filter(po => {
                        const validation = isValidNoPo(po);
                        return !validation.valid;
                    });

                    {{-- if (invalidPos.length > 0) {
                        Swal.showValidationMessage(`No PR tidak valid: ${invalidPos.join(', ')}`);
                        return false;
                    } --}}

                    const uniquePo = [...new Set(poNumbers)];

                    if (uniquePo.length !== poNumbers.length) {
                        Swal.showValidationMessage('Ada No PR duplikat');
                        return false;
                    }

                    if (startDate && endDate && startDate > endDate) {
                        Swal.showValidationMessage(
                            'Tanggal Mulai tidak boleh lebih besar dari Tanggal Akhir.');
                        return false;
                    }

                    return {
                        poNumbers: uniquePo,
                        start_date: startDate,
                        end_date: endDate
                    };
                }
            });

            if (!formValues) return;

            $.ajax({
                url: "{{ route('trotpo.getsap') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    start_date: formValues.start_date || null,
                    end_date: formValues.end_date || null,
                    no_po: formValues.poNumbers || null
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Mengambil Data...',
                        html: 'Mohon tunggu, sedang mengambil data dari SAP',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                },
                success: function(res) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        html: res.message || 'Data berhasil diambil dari SAP',
                        confirmButtonText: 'OK'
                    }).then(() => location.reload());
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal mengambil data dari SAP'
                    });
                }
            });
        }
    </script>

    <script>
        function csvToArray(csv) {
            csv = String(csv || '').trim();
            if (!csv) return [];
            return Array.from(new Set(csv.split(/[\s,;]+/).map(s => s.trim().toLowerCase()).filter(Boolean)));
        }

        function isEmail(v) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
        }

        window.ROUTES = {
            mstccemailList: "{{ route('mstccemail.list') }}",
            msttemplateList: "{{ route('trotpo.template') }}",
            kirimEmail: "{{ route('trotpo.kirimemail') }}",
            cekHistoryEmail: "{{ route('trotpo.cekHistoryEmail') }}",
            kirimEmailGrouping: "{{ route('trotpo.kirimemailgrouping') }}",
            lampiran: "{{ route('email.lampiran.list') }}",
            ccemail: "{{ route('trotpo.ccemail') }}"
        };
        window.CSRF = "{{ csrf_token() }}";

        function idxToColLetter(idx) {
            let s = '';
            idx += 1;
            while (idx > 0) {
                let mod = (idx - 1) % 26;
                s = String.fromCharCode(65 + mod) + s;
                idx = Math.floor((idx - mod) / 26);
            }
            return s;
        }

        $(document).ready(function() {
            const table = $('#list_trotpo').DataTable({
                destroy: true,
                responsive: true,
                pageLength: 50,
                columnDefs: [{
                    orderable: false,
                    targets: [0, 1],
                    searchable: false
                }],
                order: [],
                dom: 'Bfrtip',

                rowCallback: function(row, data) {
                    $(row).attr('data-row', '1');

                    // Cari index kolom Status
                    const ths = $('#list_trotpo thead th').map(function() {
                        return $(this).text().trim();
                    }).get();

                    const statusIdx = ths.findIndex(t => t.toLowerCase() === 'status');

                    if (statusIdx >= 0) {
                        let statusValue = '';
                        const $statusCell = $(row).find('td').eq(statusIdx);
                        const dataStatus = $statusCell.data('status');

                        if (dataStatus !== undefined && dataStatus !== null && dataStatus !== '') {
                            statusValue = String(dataStatus).trim();
                        }

                        // Kalau data DataTables berupa array
                        if (!statusValue && Array.isArray(data)) {
                            statusValue = $('<div>').html(data[statusIdx]).text().trim();
                        }
                        // Kalau data DataTables berupa object
                        else if (!statusValue && typeof data === 'object' && data !== null) {
                            statusValue = data.status ?? data.Status ?? '';
                            statusValue = $('<div>').html(statusValue).text().trim();
                        }

                        // Reset class dulu
                        $(row).removeClass('status-4-row status-5-row');

                        // Kalau status = 4, kasih warna
                        if (statusValue == '4') {
                            $(row).addClass('status-4-row');
                        }

                        // Kalau status = 5, kasih warna HOLD
                        if (statusValue == '5') {
                            $(row).addClass('status-5-row');
                        }

                        if (statusValue == '6') {
                            $(row).addClass('status-4-row');
                        }
                    }
                },

                buttons: [{
                    extend: 'excelHtml5',
                    className: 'btn btn-primary me-2',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i> Excel',
                    title: null,
                    filename: function() {
                        const d = new Date();
                        const pad = n => String(n).padStart(2, '0');
                        return 'Export_trotpo_' + d.getFullYear() + pad(d.getMonth() + 1) + pad(
                            d.getDate());
                    },
                    autoFilter: true,
                    sheetName: 'Exported data',
                    exportOptions: {
                        columns: ':visible:not(:last-child)',
                        rows: function(idx, data, node) {
                            const $row = $(node);
                            const $cb = $row.find('.row-checkbox');
                            if ($('.row-checkbox:checked').length) {
                                return $cb.prop('checked');
                            }
                            return true;
                        }
                    },
                    customize: function(xlsx) {
                        const ths = $('#list_trotpo thead th').map(function() {
                            return $(this).text().trim();
                        }).get();

                        const statusIdx = ths.findIndex(t => t.toLowerCase() === 'status');

                        if (statusIdx >= 0) {
                            const columnAbjad = idxToColLetter(statusIdx);
                            const sheet = xlsx.xl.worksheets['sheet1.xml'];

                            sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((
                                cell) => {
                                const isNode = cell.querySelector('is t');
                                const vNode = cell.querySelector('v');
                                let val = '';

                                if (isNode) {
                                    val = isNode.textContent;
                                } else if (vNode) {
                                    const sst = xlsx.xl['sharedStrings.xml'];
                                    const i = parseInt(vNode.textContent, 10);
                                    if (!isNaN(i)) {
                                        val = sst.getElementsByTagName('t')[i]
                                            ?.textContent || '';
                                    }
                                }

                                if (val === 'Not Active') {
                                    cell.setAttribute('s', '10');
                                }
                            });
                        }
                    }
                }]
            });

            const $btns = table.buttons().container();
            $btns.appendTo('#list_trotpo_wrapper .col-md-6:eq(0)');

            $('.buttons-excel').removeClass('dt-button buttons-html5').addClass('btn btn-secondary me-2');

            let activeStatusFilter = '1';

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                // Hanya berlaku untuk tabel Outstanding PO
                if (settings.nTable.id !== 'list_trotpo') {
                    return true;
                }

                const rowNode = settings.aoData[dataIndex]?.nTr;

                if (!rowNode) {
                    return true;
                }

                const rowStatus = String(
                    $(rowNode).attr('data-status') || ''
                ).trim();

                // Tab Belum Kirim
                if (activeStatusFilter === '1') {
                    return rowStatus === '1';
                }

                // Tab Status Lainnya
                if (activeStatusFilter === 'other') {
                    return rowStatus !== '1';
                }

                return true;
            });

            function updateRowNumbers() {
                const pageInfo = table.page.info();

                table.column(1, {
                    page: 'current',
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, index) {
                    cell.innerHTML = pageInfo.start + index + 1;
                });
            }

            table.on('draw.dt.rowNumber', function() {
                updateRowNumbers();
            });

            /*
            |--------------------------------------------------------------------------
            | Klik tab
            |--------------------------------------------------------------------------
            */
            $('#statusEmailTabs').on('click', '.status-tab', function() {
                activeStatusFilter = String(
                    $(this).attr('data-status-filter')
                );

                $('#statusEmailTabs .status-tab')
                    .removeClass('active');

                $(this).addClass('active');

                $('#select-all-checkbox')
                    .prop('checked', false)
                    .prop('indeterminate', false);

                $('.row-checkbox').prop('checked', false);

                table.page('first').draw();
            });

            /*
            |--------------------------------------------------------------------------
            | Jalankan filter dan nomor pertama kali
            |--------------------------------------------------------------------------
            */
            table.draw();

            $('#statusEmailTabs').on('click', '.status-tab', function() {
                activeStatusFilter = String(
                    $(this).attr('data-status-filter')
                );

                $('#statusEmailTabs .status-tab').removeClass('active');
                $(this).addClass('active');

                // Reset checkbox ketika pindah tab
                $('#select-all-checkbox')
                    .prop('checked', false)
                    .prop('indeterminate', false);

                $('.row-checkbox').prop('checked', false);

                table.page('first').draw();
            });

            const SENT_STATUS = '4';
            const SENT_LABEL = @json($statusEmailMap['4'] ?? 'Sudah Pernah Kirim');

            const HOLD_STATUS = '5';
            const HOLD_LABEL = @json($statusEmailMap['5'] ?? 'HOLD');

            const DONESEND_STATUS = '6';
            const DONESEND_LABEL = @json($statusEmailMap['6'] ?? 'Sudah Dikirim');

            function getRowFromCheckbox($checkbox) {
                let $tr = $checkbox.closest('tr');
                if ($tr.hasClass('child')) $tr = $tr.prev();
                return $tr;
            }

            function getRowStatus($tr) {
                const $statusCell = $tr.find('td[data-status]').first();
                return String($statusCell.data('status') ?? '').trim();
            }

            function isSentRow($tr) {
                return getRowStatus($tr) === SENT_STATUS;
            }

            function isHoldRow($tr) {
                return getRowStatus($tr) === HOLD_STATUS;
            }

            function isDoneSendRow($tr) {
                return getRowStatus($tr) === DONESEND_STATUS;
            }

            function getRowMeta($tr) {
                return {
                    noPo: String($tr.data('nopo') ?? '').trim(),
                    lastEmail: String($tr.data('last-email') ?? '').trim()
                };
            }

            function updateSelectAll() {
                const $allCheckboxes = getAllPageCheckboxes();

                const totalSelectable = $allCheckboxes.length;
                let selectedSelectable = 0;

                $allCheckboxes.each(function() {
                    const key = getCheckboxKey($(this));

                    if (selectedRows.has(key)) {
                        selectedSelectable++;
                    }
                });

                const isAllSelected = totalSelectable > 0 && selectedSelectable === totalSelectable;

                $('#select-all-checkbox')
                    .prop('checked', isAllSelected)
                    .prop('indeterminate', false);
            }

            function getHoldRows($checkboxes) {
                return $checkboxes.filter(function() {
                    const $tr = getRowFromCheckbox($(this));
                    return isHoldRow($tr) || isDoneSendRow($tr);
                }).map(function() {
                    const $tr = getRowFromCheckbox($(this));
                    const meta = getRowMeta($tr);

                    meta.reason = isHoldRow($tr) ? HOLD_LABEL : DONESEND_LABEL;

                    return meta;
                }).get();
            }

            function getSentRows($checkboxes) {
                return $checkboxes.filter(function() {
                    const $tr = getRowFromCheckbox($(this));
                    return isSentRow($tr);
                }).map(function() {
                    return getRowMeta(getRowFromCheckbox($(this)));
                }).get();
            }

            async function showHoldEmailAlert(holdRows) {
                const listHtml = holdRows.map(function(item) {
                    return '<li>' +
                        '<strong>' + (item.noPo || '-') + '</strong> ' +
                        '<span>(' + (item.reason || '-') + ')</span>' +
                        '</li>';
                }).join('');

                await Swal.fire({
                    icon: 'warning',
                    title: 'PO Tidak Bisa Dikirim',
                    html: 'PO berikut berstatus <strong>' + HOLD_LABEL + '</strong> atau <strong>' +
                        DONESEND_LABEL + '</strong>, ' +
                        'sehingga tidak bisa dilakukan pengiriman email outstanding.' +
                        '<br>' +
                        '<ul class="text-start mt-2">' + listHtml + '</ul>' +
                        'Ubah statusnya menjadi <strong>Belum dikirim</strong> terlebih dahulu.',
                    confirmButtonColor: '#008284'
                });
            }

            function getAllPageCheckboxes() {
                return $(table.rows({
                    search: 'applied'
                }).nodes()).find('.row-checkbox');
            }

            function getCheckboxKey($checkbox) {
                const $tr = getRowFromCheckbox($checkbox);

                return [
                    String($checkbox.val() || ''),
                    String($tr.data('no-vendor') || ''),
                    String($tr.data('tipe') || ''),
                    String($tr.attr('data-dev_date') || ''),
                    String($tr.attr('data-doc_date') || '')
                ].join('|');
            }

            function getTotalFilteredRows() {
                return table.rows({
                    search: 'applied'
                }).count();
            }

            $('#select-all-checkbox').on('change', async function() {
                const $selectAll = $(this);
                const isChecked = $selectAll.prop('checked');

                const $allCheckboxes = getAllPageCheckboxes();

                if (!isChecked) {
                    $allCheckboxes.each(function() {
                        const $checkbox = $(this);
                        const key = getCheckboxKey($checkbox);

                        selectedRows.delete(key);
                        $checkbox.prop('checked', false);
                    });

                    updateSelectedCount();
                    updateSelectAll();
                    return;
                }

                // Status 5 HOLD dan status 6 Sudah Dikirim tidak boleh dipilih
                const holdRows = getHoldRows($allCheckboxes);

                if (holdRows.length) {
                    await showHoldEmailAlert(holdRows);

                    $allCheckboxes.each(function() {
                        const $checkbox = $(this);
                        const key = getCheckboxKey($checkbox);

                        selectedRows.delete(key);
                        $checkbox.prop('checked', false);
                    });

                    $selectAll.prop('checked', false);
                    updateSelectedCount();
                    updateSelectAll();
                    return;
                }

                // Status 4 Sudah Pernah Kirim boleh, tapi kasih warning
                const sentRows = getSentRows($allCheckboxes);
                const sentCount = sentRows.length;

                if (sentCount > 0) {
                    const listHtml = sentRows.map(function(item) {
                        const lastInfo = item.lastEmail ? item.lastEmail : '-';

                        return '<li>' +
                            '<strong>' + (item.noPo || '-') + '</strong>' +
                            ' — terakhir kirim: ' + lastInfo +
                            '</li>';
                    }).join('');

                    const result = await Swal.fire({
                        title: 'Perhatian',
                        html: 'Ada ' + sentCount + ' PO dengan status <strong>' + SENT_LABEL +
                            '</strong>.' +
                            '<br>' +
                            '<ul class="text-start mt-2">' + listHtml + '</ul>' +
                            'Lanjutkan pilih semua?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Lanjutkan',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#008284'
                    });

                    if (!result.isConfirmed) {
                        $allCheckboxes.each(function() {
                            const $checkbox = $(this);
                            const key = getCheckboxKey($checkbox);

                            selectedRows.delete(key);
                            $checkbox.prop('checked', false);
                        });

                        $selectAll.prop('checked', false);
                        updateSelectedCount();
                        updateSelectAll();
                        return;
                    }
                }

                // Pilih semua checkbox dari semua page DataTables
                $allCheckboxes.each(function() {
                    const $checkbox = $(this);
                    const key = getCheckboxKey($checkbox);

                    selectedRows.set(key, getRowPayload($checkbox));
                    $checkbox.prop('checked', true);
                });

                updateSelectedCount();
                updateSelectAll();
            });

            $(document).on('change', '.row-checkbox', async function() {
                const $checkbox = $(this);
                const key = getCheckboxKey($checkbox);

                if (!$checkbox.prop('checked')) {
                    selectedRows.delete(key);

                    updateSelectedCount();
                    updateSelectAll();
                    return;
                }

                const holdRows = getHoldRows($checkbox);

                if (holdRows.length) {
                    await showHoldEmailAlert(holdRows);

                    selectedRows.delete(key);
                    $checkbox.prop('checked', false);

                    updateSelectedCount();
                    updateSelectAll();
                    return;
                }

                const sentRows = getSentRows($checkbox);

                if (sentRows.length) {
                    const listHtml = sentRows.map(function(item) {
                        const lastInfo = item.lastEmail ? item.lastEmail : '-';

                        return '<li>' +
                            '<strong>' + (item.noPo || '-') + '</strong>' +
                            ' — terakhir kirim: ' + lastInfo +
                            '</li>';
                    }).join('');

                    const result = await Swal.fire({
                        title: 'Perhatian',
                        html: 'PO ini berstatus <strong>' + SENT_LABEL + '</strong>.' +
                            '<br>' +
                            '<ul class="text-start mt-2">' + listHtml + '</ul>' +
                            'Tetap lanjutkan pilih PO ini?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Lanjutkan',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#008284'
                    });

                    if (!result.isConfirmed) {
                        selectedRows.delete(key);
                        $checkbox.prop('checked', false);

                        updateSelectedCount();
                        updateSelectAll();
                        return;
                    }
                }

                selectedRows.set(key, getRowPayload($checkbox));

                updateSelectedCount();
                updateSelectAll();
            });

            $('<button>')
                .html('<i class="fas fa-sync-alt"></i> Get SAP')
                .addClass('btn btn-primary me-2')
                .on('click', async function() {
                    triggerGetSapModal('date', []);
                })
                .appendTo($btns);

            @if ($authorize->delete == '1')
                // === Tombol Hapus Data ===
                $('<button>')
                    .html('<i class="fas fa-trash"></i> Hapus Data')
                    .addClass('btn btn-danger me-2')
                    .on('click', async function() {
                        const selectedData = getSelectedData().map(row => ({
                            no_po: row.no_po,
                            supplier: row.supplier,

                            delivery_date: row.delivery_date,
                            dokumen_date: row.dokumen_date,

                        }));

                        if (!selectedData.length) {
                            await Swal.fire('Info', 'Silakan pilih minimal 1 PO untuk dihapus.', 'info');
                            return;
                        }

                        // Konfirmasi penghapusan
                        const poList = selectedData.map(item => {
                            return `${item.no_po} - ${item.delivery_date}`;
                        }).join('<br>');
                        const {
                            isConfirmed
                        } = await Swal.fire({
                            title: 'Konfirmasi Hapus',
                            html: `<p>Apakah yakin ingin hapus data PO - Delivery Date berikut?</p><strong>${poList}</strong><p class="text-danger mt-2">Data yang dihapus tidak dapat dikembalikan!</p>`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Hapus',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#dc3545'
                        });

                        if (!isConfirmed) return;

                        // Kirim request hapus
                        Swal.fire({
                            title: 'Menghapus data...',
                            html: 'Mohon tunggu, data sedang dihapus.',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });

                        try {
                            const response = await $.ajax({
                                url: "{{ URL::to($url_menu) }}/delete",

                                //url: "/trgesa/delete",
                                type: "DELETE",
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    items: selectedData
                                }
                            });

                            Swal.close();

                            if (response.success) {
                                await Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    html: response.message ||
                                        `Berhasil menghapus ${selectedData.length} data PO.`
                                });
                                location.reload();
                            } else {
                                await Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: response.message ||
                                        'Terjadi kesalahan saat menghapus data.'
                                });
                            }
                        } catch (xhr) {
                            Swal.close();

                            let errorMessage = 'Terjadi kesalahan saat menghapus data.';
                            try {
                                const response = JSON.parse(xhr.responseText);
                                if (response.message) {
                                    errorMessage = response.message;
                                }
                            } catch (e) {}

                            await Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: errorMessage
                            });
                        }
                    })
                    .appendTo($btns);
            @endif

            $('<button>')
                .html('<i class="fas fa-envelope"></i> Kirim Email')
                .addClass('btn btn-success me-2')
                .on('click', async function() {
                    const selectedData = getSelectedData().map(row => ({
                        no_po: row.no_po,
                        supplier: row.supplier,
                        pdf: row.pdf,
                        tipe_pr: row.tipe_pr,
                        no_vendor: row.no_vendor,
                        vendor: row.vendor,
                        delivery_date: row.delivery_date,
                        dokumen_date: row.dokumen_date,
                    }));

                    if (!selectedData.length) {
                        await Swal.fire('Info', 'Silakan pilih minimal 1 PO.', 'info');
                        return;
                    }

                    const missingVendor = selectedData.filter(x => !x.vendor).map(x => x.no_po);
                    if (missingVendor.length) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'Email Vendor Kosong',
                            html: `<p>Email Vendor belum diisi pada PO:</p><b>${missingVendor.join(', ')}</b>`
                        });
                        return;
                    }

                    try {
                        const historyRes = await $.ajax({
                            url: window.ROUTES.cekHistoryEmail,
                            method: 'POST',
                            data: {
                                _token: window.CSRF,
                                items: selectedData
                            }
                        });

                        if (!historyRes.success) {
                            await Swal.fire({
                                icon: 'error',
                                title: 'History Pengiriman Tidak Ada',
                                html: historyRes.message ||
                                    'Ada PO yang belum memiliki history pengiriman.'
                            });
                            return;
                        }
                    } catch (xhr) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'History Pengiriman Tidak Ada',
                            html: xhr.responseJSON?.message ||
                                'Ada PO yang belum memiliki history pengiriman.'
                        });
                        return;
                    }

                    // 2) Load templates
                    let templates = [];
                    try {
                        templates = await $.getJSON(window.ROUTES.msttemplateList);
                        if (!Array.isArray(templates) || !templates.length) {
                            await Swal.fire('Info', 'Template email kosong.', 'info');
                            return;
                        }
                    } catch (e) {
                        await Swal.fire('Error', 'Gagal memuat template email.', 'error');
                        return;
                    }

                    let ccemail = [];
                    try {
                        ccemail = await $.getJSON(window.ROUTES.ccemail);
                        if (!Array.isArray(ccemail) || !ccemail.length) {
                            await Swal.fire('Info', 'cc email kosong.', 'info');
                            return;
                        }
                    } catch (e) {
                        await Swal.fire('Error', 'Gagal memuat template email.', 'error');
                        return;
                    }

                    const tplOptions = templates.map(t =>
                        `<option value="${t.id}">${safe(t.nama)}</option>`).join('');

                    const ccemailOptions = ccemail.map(t =>
                        `<option value="${t.id}">${safe(t.kode_pr)}</option>`).join('');

                    lampiranRes = await $.getJSON(window.ROUTES.lampiran);
                    const lampiranList = Array.isArray(lampiranRes) ?
                        lampiranRes :
                        (lampiranRes.lampiran || []);

                    const lampiranOptions = lampiranList.length ?
                        lampiranList.map(l => `
                            <option value="${l.id}">
                                ${safe(l.nama)}
                            </option>
                        `).join('') :
                        `<option disabled>Belum ada master lampiran</option>`;

                    let ccEmailList = [];

                    function isValidEmail(email) {
                        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
                    }

                    function renderCcEmailChips() {
                        const $box = $('#ccEmailBox');
                        const $input = $('#ccEmailInput');

                        $box.find('.cc-email-chip').remove();

                        ccEmailList.forEach(function(email) {
                            const chip = $(
                                '<span class="cc-email-chip">' +
                                email +
                                '<button type="button" class="cc-email-remove" data-email="' +
                                email + '">×</button>' +
                                '</span>'
                            );

                            chip.insertBefore($input);
                        });

                        $('#ccemailbody').val(ccEmailList.join(','));
                    }

                    function setCcEmailsFromString(emailString) {
                        ccEmailList = [];

                        if (emailString) {
                            ccEmailList = emailString
                                .split(',')
                                .map(function(email) {
                                    return email.trim();
                                })
                                .filter(function(email) {
                                    return email && isValidEmail(email);
                                });
                        }

                        renderCcEmailChips();
                    }

                    function addCcEmail(email) {
                        email = email.trim();

                        if (!email) return;

                        if (!isValidEmail(email)) {
                            Swal.showValidationMessage('Format email tidak valid: ' + email);
                            return;
                        }

                        if (!ccEmailList.includes(email)) {
                            ccEmailList.push(email);
                        }

                        $('#ccEmailInput').val('');
                        renderCcEmailChips();
                    }

                    // 3) Show modal with Summernote - FIXED dengan konfigurasi sama seperti Body Email
                    const {
                        isConfirmed: okTpl,
                        value: tplValue
                    } = await Swal.fire({
                        title: 'Pilih Template Email & Edit Body',
                        width: 800,
                        html: `
                            <div class="text-start">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Kelompok CC - Email</label>
                                    <select id="ccemailSelect" class="form-select">${ccemailOptions}</select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">CC Email</label>

                                    <div id="ccEmailBox" class="cc-email-box">
                                        <input type="text"
                                            id="ccEmailInput"
                                            class="cc-email-input"
                                            placeholder="ketik email lalu Enter">
                                    </div>

                                    <input type="hidden" id="ccemailbody">
                                </div>
                               <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Nama Body Email</label>
                                        <select id="tplSelect" class="form-select">
                                            ${tplOptions}
                                        </select>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Subject</label>
                                        <input id="tplsub" class="form-control" />
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Body Email (Editable)</label>
                                    <textarea id="tplBody"></textarea>
                                </div>
                                {{-- <div class="mb-3">
                                    <label class="form-label fw-bold">Pilih Lampiran</label>
                                    <select id="lampiranSelect" class="form-select" multiple style="width:100%;">
                                        ${lampiranOptions}
                                    </select>
                                    <small class="text-muted">
                                        Bisa pilih lebih dari satu lampiran.
                                    </small>
                                </div> --}}
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Gunakan Template',
                        cancelButtonText: 'Batal',

                        didOpen: () => {
                            const $dlg = $(Swal.getHtmlContainer());

                            const $ccsel = $dlg.find('#ccemailSelect');
                            const $ccbody = $dlg.find('#ccemailbody');
                            const $ccInput = $dlg.find('#ccEmailInput');
                            const $ccBox = $dlg.find('#ccEmailBox');

                            const $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            // Select2 lampiran, kalau element-nya ada
                            if ($lampiran.length) {
                                $lampiran.select2({
                                    dropdownParent: $('.swal2-popup'),
                                    width: '100%',
                                    placeholder: 'Pilih lampiran',
                                    allowClear: true
                                });
                            }

                            $ccBox.on('click', function() {
                                $ccInput.focus();
                            });

                            $ccInput.on('keydown', function(e) {
                                if (e.key === 'Enter' || e.key === ',') {
                                    e.preventDefault();

                                    addCcEmail($(this).val());
                                }

                                if (e.key === 'Backspace' && !$(this).val() &&
                                    ccEmailList.length) {
                                    ccEmailList.pop();
                                    renderCcEmailChips();
                                }
                            });

                            $ccInput.on('blur', function() {
                                addCcEmail($(this).val());
                            });

                            $ccBox.on('click', '.cc-email-remove', function() {
                                const email = $(this).data('email');

                                ccEmailList = ccEmailList.filter(function(item) {
                                    return item !== email;
                                });

                                renderCcEmailChips();
                            });

                            // Summernote body email utama
                            $body.summernote({
                                placeholder: 'Edit body email di sini...',
                                tabsize: 2,
                                height: 400
                            });

                            // Render CC email
                            // Render CC email
                            const renderCcEmail = () => {
                                const id = Number($ccsel.val());
                                const row = ccemail.find(x => Number(x.id) === id);

                                if (!row) {
                                    setCcEmailsFromString('');
                                    return;
                                }

                                const emails =
                                    row.email_cc ||
                                    row.cc_email ||
                                    row.email ||
                                    row.detail_email ||
                                    row.email_to ||
                                    '';

                                setCcEmailsFromString(emails);
                            };

                            // Render template email
                            const renderTemplate = () => {
                                const id = Number($sel.val());
                                const row = templates.find(x => Number(x.id) === id);

                                if (!row) return;

                                $sub.val(row.subject || '');
                                $body.summernote('code', row.body || '');
                            };

                            $ccsel.on('change', renderCcEmail);
                            $sel.on('change', renderTemplate);

                            renderCcEmail();
                            renderTemplate();
                        },

                        preConfirm: () => {
                            const $dlg = $(Swal.getHtmlContainer());

                            const $ccsel = $dlg.find('#ccemailSelect');
                            const $ccbody = $dlg.find('#ccemailbody');

                            const $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            const id = Number($sel.val());
                            const row = templates.find(x => Number(x.id) === id);

                            if (!row) {
                                Swal.showValidationMessage('Template tidak valid');
                                return false;
                            }

                            const editedSubject = $sub.val();
                            const editedBody = $body.summernote('code');
                            const editedCcEmail = $ccbody.val();
                            const ccEmailGroupId = $ccsel.val();
                            const lampiranIds = $lampiran.length ? ($lampiran.val() || []) : [];

                            return {
                                id: id,
                                subject: editedSubject,
                                body: editedBody,
                                cc_email_group_id: ccEmailGroupId,
                                cc_email: editedCcEmail,
                                lampiran_ids: lampiranIds
                            };
                        },

                        willClose: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            if ($body.data('summernote')) {
                                $body.summernote('destroy');
                            }

                            if ($lampiran.data('select2')) {
                                $lampiran.select2('destroy');
                            }
                        }
                    });

                    if (!okTpl) return;

                    const chosenSubject = tplValue.subject;
                    const chosenBody = tplValue.body;
                    const chosenCcEmail = tplValue.cc_email || '';
                    const chosenCcEmailGroupId = tplValue.cc_email_group_id || '';
                    const chosenLampiranIds = tplValue.lampiran_ids || [];

                    const sendDelayMs = 5000;
                    const sendDelaySeconds = Math.ceil(sendDelayMs / 1000);
                    const listItems = selectedData.map((item, i) => `
                                <li class="list-group-item py-4 border-start-0 border-end-0 border-top-0">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-3 d-flex justify-content-center align-items-center me-3 shadow-sm" style="width: 48px; height: 48px; background-color: #f8f9fa; border: 1px solid #e9ecef;">
                                                <i class="fas fa-envelope fs-4 text-primary"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-1 fw-bold text-dark" style="font-size: 1.15rem;">${item.no_po || '-'}</h6>
                                                <div class="text-muted small text-truncate" style="max-width: 250px;">
                                                    <i class="fas fa-building me-1"></i>${item.supplier || item.nama_supplier || '-'}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <span id="send-status-${i}" class="badge bg-secondary px-3 py-2 fw-semibold" style="letter-spacing: 0.5px; border-radius: 8px;">MENYIAPKAN...</span>
                                            <button
                                                type="button"
                                                id="send-cancel-${i}"
                                                class="btn btn-outline-danger btn-sm px-3 py-1 mb-0 fw-bold"
                                                style="border-radius: 8px;"
                                                data-cancel-index="${i}">
                                                <i class="fas fa-times me-1"></i> BATALKAN
                                            </button>
                                        </div>
                                    </div>

                                    <div class="mt-2">
                                        <div class="d-flex justify-content-between mb-2">
                                            <small class="text-muted fw-bold" style="font-size: 0.7rem; letter-spacing: 1px;">PROGRESS PENGIRIMAN</small>
                                            <small id="send-progress-text-${i}" class="fw-bold text-dark" style="font-size: 0.8rem;">0%</small>
                                        </div>
                                        <div class="progress bg-light" style="height: 14px; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,.05);">
                                            <div
                                                id="send-progress-${i}"
                                                class="progress-bar bg-primary progress-bar-striped progress-bar-animated text-white fw-bold"
                                                role="progressbar"
                                                style="width: 0%; border-radius: 10px; transition: width 0.3s ease;"
                                                aria-valuenow="0"
                                                aria-valuemin="0"
                                                aria-valuemax="100">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            `).join('');

                    await Swal.fire({
                        title: '<div class="text-start mb-1"><h4 class="fw-bold mb-0 text-dark"><i class="fas fa-paper-plane text-primary me-2"></i> Proses Pengiriman Email</h4></div>',
                        width: '850px',
                        html: `
                                    <div class="d-flex justify-content-between align-items-center mb-4 mt-3 rounded-3 p-3 shadow-sm border-0" style="background-color: #fff5f5; border-left: 5px solid #dc3545 !important;">
                                        <div class="d-flex align-items-center text-danger text-start">
                                            <i class="fas fa-exclamation-circle fa-2x me-3 opacity-75"></i>
                                            <div>
                                                <span class="fw-bold d-block" style="font-size: 1rem;">Perhatian</span>
                                                <span style="font-size: 0.9rem;">PO dengan status <strong>mengirim</strong> tidak dapat dibatalkan.</span>
                                            </div>
                                        </div>
                                        <button class="btn btn-danger btn-sm px-4 py-2 rounded-pill shadow-sm fw-bold mb-0" id="btn-cancel-all">
                                            <i class="fas fa-ban me-1"></i> Batalkan Semua
                                        </button>
                                    </div>
                                    <div class="card border border-light-subtle rounded-4 shadow-sm" style="overflow: hidden;">
                                        <div class="card-body p-0">
                                            <ul id="send-list" class="list-group list-group-flush text-start" style="max-height:480px; overflow-y:auto;">
                                                ${listItems}
                                            </ul>
                                        </div>
                                    </div>
                                    <div id="send-actions" class="mt-4 d-flex justify-content-end align-items-center">
                                        <div id="send-cancel-note" class="small text-muted"></div>
                                    </div>
                                `,
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: async () => {
                            Swal.showLoading();

                            const total = selectedData.length;
                            let done = 0;
                            const itemStates = selectedData.map(() => 'pending');
                            let cancelAll = false;
                            const $btnCancelAll = $('#btn-cancel-all');

                            const updateProgress = () => {
                                const percent = total > 0 ? Math.round((done / total) *
                                    100) : 0;
                                $('#progress-bar')
                                    .css('width', percent + '%')
                                    .attr('aria-valuenow', percent)
                                    .text(percent + '%');

                                $('#progress-text').text(
                                    `${done} / ${total} (${percent}%)`);
                            };

                            const refreshCancelAllState = () => {
                                if (!$btnCancelAll.length) return;
                                if (cancelAll) {
                                    $btnCancelAll.prop('disabled', true).addClass(
                                        'disabled');
                                    return;
                                }

                                const cancellable = itemStates.filter(s => s ===
                                        'pending' || s === 'waiting')
                                    .length;
                                if (cancellable === 0) {
                                    $btnCancelAll.prop('disabled', true).addClass(
                                        'disabled');
                                } else {
                                    $btnCancelAll.prop('disabled', false).removeClass(
                                        'disabled');
                                }
                            };

                            const disableCancel = (idx) => {
                                const $btn = $(`#send-cancel-${idx}`);
                                if ($btn.length) {
                                    $btn.prop('disabled', true).addClass('disabled');
                                }
                            };

                            const hideCancelButton = (idx) => {
                                $(`#send-cancel-${idx}`).hide();
                            };

                            const markCancelled = (idx, reason = 'DIBATALKAN') => {
                                const $status = $(`#send-status-${idx}`);
                                const $progress = $(`#send-progress-${idx}`);
                                const $progressText = $(`#send-progress-text-${idx}`);

                                $status
                                    .removeClass(
                                        'bg-secondary bg-info bg-success bg-danger bg-warning bg-primary'
                                    )
                                    .addClass('bg-danger')
                                    .text(reason);

                                $progress
                                    .removeClass(
                                        'bg-secondary bg-info bg-success bg-danger bg-primary'
                                    )
                                    .addClass('bg-danger')
                                    .css('width', '100%')
                                    .attr('aria-valuenow', 100);

                                $progressText.removeClass('text-dark text-primary')
                                    .addClass('text-danger').text(reason);

                                hideCancelButton(idx);

                            };

                            const waitWithCountdown = (idx) => {
                                return new Promise((resolve) => {
                                    let remaining = sendDelaySeconds;
                                    let timer = null;
                                    const tick = () => {
                                        if (cancelAll || itemStates[idx] ===
                                            'cancelled') {
                                            if (timer) clearInterval(timer);
                                            resolve(false);
                                            return;
                                        }

                                        const elapsed = sendDelaySeconds -
                                            remaining;
                                        const percent = Math.min(75, Math.max(0,
                                            Math.round((elapsed /
                                                    sendDelaySeconds) *
                                                75)));

                                        const $progress = $(
                                            `#send-progress-${idx}`);
                                        $progress
                                            .css('width', percent + '%')
                                            .attr('aria-valuenow', percent);

                                        $(`#send-progress-text-${idx}`).text(
                                            percent + '%');

                                        const $status = $(
                                            `#send-status-${idx}`);
                                        $status
                                            .removeClass(
                                                'bg-info bg-success bg-danger bg-warning bg-primary'
                                            )
                                            .addClass('bg-secondary')
                                            .text('MENYIAPKAN...');

                                        if (remaining <= 0) {
                                            if (timer) clearInterval(timer);
                                            resolve(true);
                                            return;
                                        }

                                        remaining -= 1;
                                    };

                                    tick();
                                    timer = setInterval(tick, 1000);
                                });
                            };

                            $('#btn-cancel-all').on('click', function() {
                                cancelAll = true;
                                $(this).prop('disabled', true).addClass('disabled');

                                selectedData.forEach((_, idx) => {
                                    if (itemStates[idx] === 'pending' ||
                                        itemStates[idx] === 'waiting') {
                                        itemStates[idx] = 'cancelled';
                                        markCancelled(idx);
                                    }
                                });

                                updateProgress();
                                refreshCancelAllState();
                            });

                            $('#send-list').on('click', '[data-cancel-index]', function() {
                                const idx = Number($(this).data('cancel-index'));
                                if (!Number.isFinite(idx)) return;

                                if (itemStates[idx] === 'pending' || itemStates[idx] ===
                                    'waiting') {
                                    itemStates[idx] = 'cancelled';
                                    markCancelled(idx);
                                    updateProgress();
                                    refreshCancelAllState();
                                }
                            });

                            updateProgress();
                            refreshCancelAllState();

                            for (let i = 0; i < selectedData.length; i++) {
                                const hideCancelButton = (idx) => {
                                    $(`#send-cancel-${idx}`).hide();
                                };
                                const item = selectedData[i];
                                const $status = $(`#send-status-${i}`);
                                const $progress = $(`#send-progress-${i}`);

                                const setRowProgress = (percent, text, barClass = null) => {
                                    $progress
                                        .css('width', percent + '%')
                                        .attr('aria-valuenow', percent);

                                    $(`#send-progress-text-${i}`).text(percent + '%');

                                    if (barClass) {
                                        $progress.removeClass(
                                                'bg-secondary bg-info bg-success bg-danger bg-primary'
                                            )
                                            .addClass(barClass);
                                    }

                                    if (text) {
                                        $status.html(text.toUpperCase());
                                    }
                                };

                                try {
                                    if (cancelAll || itemStates[i] === 'cancelled') {
                                        itemStates[i] = 'cancelled';
                                        markCancelled(i);
                                        done += 1;
                                        updateProgress();
                                        refreshCancelAllState();
                                        continue;
                                    }

                                    itemStates[i] = 'waiting';
                                    const okToSend = await waitWithCountdown(i);

                                    if (!okToSend || cancelAll || itemStates[i] ===
                                        'cancelled') {
                                        itemStates[i] = 'cancelled';
                                        markCancelled(i);
                                        done += 1;
                                        updateProgress();
                                        refreshCancelAllState();
                                        continue;
                                    }

                                    itemStates[i] = 'sending';
                                    disableCancel(i);
                                    refreshCancelAllState();

                                    $status.removeClass(
                                            'bg-secondary bg-success bg-danger bg-info')
                                        .addClass('bg-primary')
                                        .html(
                                            '<i class="fas fa-spinner fa-spin me-1"></i> MENYIAPKAN...'
                                        );

                                    setRowProgress(70,
                                        '<i class="fas fa-spinner fa-spin me-1"></i> MENYIAPKAN...',
                                        'bg-primary');

                                    const ajaxReq = $.ajax({
                                        url: window.ROUTES.kirimEmail,
                                        method: 'POST',
                                        data: {
                                            _token: window.CSRF,
                                            item: item,
                                            subject_override: chosenSubject,
                                            body_override: chosenBody,
                                            cc_email: chosenCcEmail,
                                            cc_email_group_id: chosenCcEmailGroupId,
                                            lampiran_ids: chosenLampiranIds
                                        },
                                        timeout: 30000
                                    });

                                    setRowProgress(80,
                                        '<i class="fas fa-paper-plane me-1"></i> MENGIRIM...',
                                        'bg-primary');
                                    hideCancelButton(i);

                                    const response = await ajaxReq;

                                    setRowProgress(90,
                                        '<i class="fas fa-cog fa-spin me-1"></i> FINALISASI...',
                                        'bg-primary');
                                    hideCancelButton(i);

                                    if (response.success) {
                                        itemStates[i] = 'done';
                                        $status.removeClass('bg-info bg-primary').addClass(
                                                'bg-success')
                                            .html(
                                                '<i class="fas fa-check-circle me-1"></i> TERKIRIM'
                                            );
                                        hideCancelButton(i);
                                        $progress
                                            .removeClass(
                                                'bg-info bg-primary bg-secondary bg-danger progress-bar-animated progress-bar-striped'
                                            )
                                            .addClass('bg-success')
                                            .css('width', '100%')
                                            .attr('aria-valuenow', 100);
                                        $(`#send-progress-text-${i}`).removeClass(
                                            'text-dark text-primary').addClass(
                                            'text-success').text('100%');
                                    } else {
                                        itemStates[i] = 'failed';
                                        throw new Error(response.message || 'Gagal');
                                    }
                                    done += 1;
                                    updateProgress();
                                    refreshCancelAllState();
                                } catch (xhr) {
                                    let reason = 'Gagal';
                                    try {
                                        const j = xhr.responseJSON;
                                        if (j && j.message) reason = j.message;
                                    } catch (e) {}

                                    itemStates[i] = 'failed';
                                    $status.removeClass('bg-info bg-primary').addClass(
                                            'bg-danger')
                                        .html('<i class="fas fa-times-circle me-1"></i> ' +
                                            reason.toUpperCase());

                                    $progress
                                        .removeClass(
                                            'bg-info bg-primary bg-secondary bg-success progress-bar-animated progress-bar-striped'
                                        )
                                        .addClass('bg-danger')
                                        .css('width', '100%')
                                        .attr('aria-valuenow', 100);

                                    $(`#send-progress-text-${i}`).removeClass(
                                            'text-dark text-primary').addClass('text-danger')
                                        .text('ERROR');

                                    done += 1;
                                    updateProgress();
                                    refreshCancelAllState();
                                }
                            }

                            Swal.hideLoading();

                            $('#progress-bar')
                                .removeClass('progress-bar-animated progress-bar-striped')
                                .addClass('bg-success');

                            $('<button class="btn btn-primary" id="btn-close-refresh">Tutup & Refresh</button>')
                                .appendTo('#send-actions');

                            $('#btn-close-refresh').on('click', function() {
                                location.reload();
                            });
                        }
                    });
                })
                .appendTo($btns);

            // === Tombol Kirim Email Grouping ===
            $('<button>')
                .html('<i class="fas fa-envelope"></i> Kirim Email Grouping')
                .addClass('btn btn-warning me-2')
                .on('click', async function() {
                    const selectedData = getSelectedData().map(row => ({
                        no_po: row.no_po,
                        supplier: row.supplier,
                        pdf: row.pdf,
                        tipe_pr: row.tipe_pr,
                        no_vendor: row.no_vendor,
                        vendor: row.vendor,
                        delivery_date: row.delivery_date,
                        dokumen_date: row.dokumen_date,
                        status: row.status
                    }));

                    if (selectedData.length < 2) {
                        await Swal.fire('Info', 'Silakan pilih minimal 2 PO untuk grouping.', 'info');
                        return;
                    }

                    const missingVendor = selectedData.filter(x => !x.vendor).map(x => x.no_po);
                    if (missingVendor.length) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'Email Vendor Kosong',
                            html: `<p>Email Vendor belum diisi pada PO:</p><b>${missingVendor.join(', ')}</b>`
                        });
                        return;
                    }

                    const vendors = [...new Set(selectedData.map(x => x.no_vendor))];
                    if (vendors.length !== 1 || !vendors[0]) {
                        await Swal.fire('Error', 'PO harus dari vendor yang sama.', 'error');
                        return;
                    }

                    try {
                        const historyRes = await $.ajax({
                            url: window.ROUTES.cekHistoryEmail,
                            method: 'POST',
                            data: {
                                _token: window.CSRF,
                                items: selectedData
                            }
                        });

                        if (!historyRes.success) {
                            await Swal.fire({
                                icon: 'error',
                                title: 'History Pengiriman Tidak Ada',
                                html: historyRes.message ||
                                    'Ada PO yang belum memiliki history pengiriman.'
                            });
                            return;
                        }
                    } catch (xhr) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'History Pengiriman Tidak Ada',
                            html: xhr.responseJSON?.message ||
                                'Ada PO yang belum memiliki history pengiriman.'
                        });
                        return;
                    }

                    let templates = [];
                    try {
                        templates = await $.getJSON(window.ROUTES.msttemplateList);
                        if (!Array.isArray(templates) || !templates.length) {
                            await Swal.fire('Info', 'Template email kosong.', 'info');
                            return;
                        }
                    } catch (e) {
                        await Swal.fire('Error', 'Gagal memuat template email.', 'error');
                        return;
                    }

                    let ccemail = [];
                    try {
                        ccemail = await $.getJSON(window.ROUTES.ccemail);
                        if (!Array.isArray(ccemail) || !ccemail.length) {
                            await Swal.fire('Info', 'Template email kosong.', 'info');
                            return;
                        }
                    } catch (e) {
                        await Swal.fire('Error', 'Gagal memuat template email.', 'error');
                        return;
                    }

                    const tplOptions = templates.map(t =>
                        `<option value="${t.id}">${safe(t.nama)}</option>`).join('');

                    const ccemailOptions = ccemail.map(t =>
                        `<option value="${t.id}">${safe(t.kode_pr)}</option>`).join('');

                    lampiranRes = await $.getJSON(window.ROUTES.lampiran);
                    const lampiranList = Array.isArray(lampiranRes) ?
                        lampiranRes :
                        (lampiranRes.lampiran || []);

                    const lampiranOptions = lampiranList.length ?
                        lampiranList.map(l => `
                            <option value="${l.id}">
                                ${safe(l.nama)}
                            </option>
                        `).join('') :
                        `<option disabled>Belum ada master lampiran</option>`;

                    let ccEmailList = [];

                    function isValidEmail(email) {
                        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
                    }

                    function renderCcEmailChips() {
                        const $box = $('#ccEmailBox');
                        const $input = $('#ccEmailInput');

                        $box.find('.cc-email-chip').remove();

                        ccEmailList.forEach(function(email) {
                            const chip = $(
                                '<span class="cc-email-chip">' +
                                email +
                                '<button type="button" class="cc-email-remove" data-email="' +
                                email + '">×</button>' +
                                '</span>'
                            );

                            chip.insertBefore($input);
                        });

                        $('#ccemailbody').val(ccEmailList.join(','));
                    }

                    function setCcEmailsFromString(emailString) {
                        ccEmailList = [];

                        if (emailString) {
                            ccEmailList = emailString
                                .split(',')
                                .map(function(email) {
                                    return email.trim();
                                })
                                .filter(function(email) {
                                    return email && isValidEmail(email);
                                });
                        }

                        renderCcEmailChips();
                    }

                    function addCcEmail(email) {
                        email = email.trim();

                        if (!email) return;

                        if (!isValidEmail(email)) {
                            Swal.showValidationMessage('Format email tidak valid: ' + email);
                            return;
                        }

                        if (!ccEmailList.includes(email)) {
                            ccEmailList.push(email);
                        }

                        $('#ccEmailInput').val('');
                        renderCcEmailChips();
                    }

                    const {
                        isConfirmed: okTpl,
                        value: tplValue
                    } = await Swal.fire({
                        title: 'Pilih Template Email & Edit Body',
                        width: 800,
                        html: `
                        <div class="text-start">
                         <div class="mb-3">
                                    <label class="form-label fw-bold">Kelompok CC - Email</label>
                                    <select id="ccemailSelect" class="form-select">${ccemailOptions}</select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">CC Email</label>

                                    <div id="ccEmailBox" class="cc-email-box">
                                        <input type="text"
                                            id="ccEmailInput"
                                            class="cc-email-input"
                                            placeholder="ketik email lalu Enter">
                                    </div>

                                    <input type="hidden" id="ccemailbody">
                                </div>
                           <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Nama Body Email</label>
                                        <select id="tplSelect" class="form-select">
                                            ${tplOptions}
                                        </select>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Subject</label>
                                        <input id="tplsub" class="form-control" />
                                    </div>
                                </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Body Email</label>
                                <textarea id="tplBody"></textarea>
                            </div>
                            {{-- <div class="mb-3">
                                <label class="form-label fw-bold">Pilih Lampiran</label>
                                <select id="lampiranSelect" class="form-select" multiple style="width:100%;">
                                    ${lampiranOptions}
                                </select>
                                <small class="text-muted">
                                    Bisa pilih lebih dari satu lampiran.
                                </small>
                            </div> --}}
                        </div>`,
                        showCancelButton: true,
                        confirmButtonText: 'Gunakan Template',
                        cancelButtonText: 'Batal',
                        didOpen: () => {
                            const $dlg = $(Swal.getHtmlContainer());

                            const $ccsel = $dlg.find('#ccemailSelect');
                            const $ccbody = $dlg.find('#ccemailbody');
                            const $ccInput = $dlg.find('#ccEmailInput');
                            const $ccBox = $dlg.find('#ccEmailBox');

                            const $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            $lampiran.select2({
                                dropdownParent: $('.swal2-popup'),
                                width: '100%',
                                placeholder: 'Pilih lampiran',
                                allowClear: true
                            });

                            $ccBox.on('click', function() {
                                $ccInput.focus();
                            });

                            $ccInput.on('keydown', function(e) {
                                if (e.key === 'Enter' || e.key === ',') {
                                    e.preventDefault();

                                    addCcEmail($(this).val());
                                }

                                if (e.key === 'Backspace' && !$(this).val() &&
                                    ccEmailList.length) {
                                    ccEmailList.pop();
                                    renderCcEmailChips();
                                }
                            });

                            $ccInput.on('blur', function() {
                                addCcEmail($(this).val());
                            });

                            $ccBox.on('click', '.cc-email-remove', function() {
                                const email = $(this).data('email');

                                ccEmailList = ccEmailList.filter(function(item) {
                                    return item !== email;
                                });

                                renderCcEmailChips();
                            });

                            $body.summernote({
                                placeholder: 'Edit body email di sini...',
                                tabsize: 2,
                                height: 400
                            });

                            const renderCcEmail = () => {
                                const id = Number($ccsel.val());
                                const row = ccemail.find(x => Number(x.id) === id);

                                if (!row) {
                                    setCcEmailsFromString('');
                                    return;
                                }

                                const emails =
                                    row.email_cc ||
                                    row.cc_email ||
                                    row.email ||
                                    row.detail_email ||
                                    row.email_to ||
                                    '';

                                setCcEmailsFromString(emails);
                            };

                            const renderTemplate = () => {
                                const id = Number($sel.val());
                                const row = templates.find(x => Number(x.id) === id);

                                if (!row) return;

                                $sub.val(row.subject || '');
                                $body.summernote('code', row.body || '');
                            };

                            $ccsel.on('change', renderCcEmail);
                            $sel.on('change', renderTemplate);

                            renderCcEmail();
                            renderTemplate();
                        },
                        preConfirm: () => {
                            const $dlg = $(Swal.getHtmlContainer());

                            const $ccsel = $dlg.find('#ccemailSelect');
                            const $ccbody = $dlg.find('#ccemailbody');

                            const $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            const id = Number($sel.val());
                            const row = templates.find(x => Number(x.id) === id);

                            if (!row) {
                                Swal.showValidationMessage('Pilih salah satu template.');
                                return false;
                            }

                            const editedBody = $body.summernote('code');
                            const editedSubject = $sub.val();
                            const lampiranIds = $lampiran.val() || [];
                            const editedCcEmail = $ccbody.val();
                            const ccEmailGroupId = $ccsel.val();

                            return {
                                template_id: id,
                                subject: editedSubject,
                                body: editedBody,
                                lampiran_ids: lampiranIds,
                                cc_email_group_id: ccEmailGroupId,
                                cc_email: editedCcEmail
                            };
                        },
                        willClose: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

                            if ($body.data('summernote')) {
                                $body.summernote('destroy');
                            }

                            if ($lampiran.data('select2')) {
                                $lampiran.select2('destroy');
                            }
                        }
                    });

                    if (!okTpl) return;

                    const chosenSubject = tplValue.subject;
                    const chosenBody = tplValue.body;
                    const chosenCcEmail = tplValue.cc_email || '';
                    const chosenCcEmailGroupId = tplValue.cc_email_group_id || '';
                    const chosenLampiranIds = tplValue.lampiran_ids || [];
                    const sendDelayMsGrouping = 10000;
                    const sendDelaySecondsGrouping = Math.ceil(sendDelayMsGrouping / 1000);

                    const emailTo = selectedData[0].vendor;

                    let groupActive = true;

                    await Swal.fire({
                        title: 'Mengirim email grouping…',
                        width: '700px',
                        html: `
                            <div class="text-start">
                                <div class="d-flex justify-content-between align-items-center mb-3 mt-2 rounded-3 p-3 shadow-sm border-0" style="background-color: #fff5f5; border-left: 5px solid #dc3545 !important;">
                                    <div class="d-flex align-items-center text-danger text-start">
                                        <i class="fas fa-exclamation-circle fa-2x me-3 opacity-75"></i>
                                        <div>
                                            <span class="fw-bold d-block" style="font-size: 1rem;">Perhatian</span>
                                            <span style="font-size: 0.9rem;">Email grouping yang sedang <strong>mengirim</strong> tidak dapat dibatalkan.</span>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-danger btn-sm px-3 py-2 rounded-pill shadow-sm fw-bold mb-0" id="btn-group-cancel">
                                        <i class="fas fa-times me-1"></i> Batal
                                    </button>
                                </div>

                                <div class="mb-2">
                                    <p class="mb-2">
                                        Mengirim email untuk <b>${selectedData.length}</b> PO dari vendor yang sama.
                                    </p>

                                    <div class="d-flex justify-content-between mb-2">
                                        <small class="text-muted fw-bold" style="font-size: 0.7rem; letter-spacing: 1px;">PROGRESS PENGIRIMAN</small>
                                        <small id="email-progress-percent" class="fw-bold text-dark" style="font-size: 0.8rem;">0%</small>
                                    </div>
                                    <div class="progress bg-light" style="height: 14px; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,.05);">
                                        <div 
                                            id="email-progress-bar"
                                            class="progress-bar bg-primary progress-bar-striped progress-bar-animated text-white fw-bold"
                                            role="progressbar"
                                            style="width: 0%; border-radius: 10px; transition: width 0.3s ease;"
                                            aria-valuenow="0"
                                            aria-valuemin="0"
                                            aria-valuemax="100">
                                            0%
                                        </div>
                                    </div>

                                    <div id="email-progress-text" class="small text-muted mt-2">
                                        Menyiapkan data email...
                                    </div>
                                </div>

                                <hr>

                                <div class="small">
                                    <b>Daftar PO:</b><br>
                                    ${selectedData.map(x => `<span class="badge bg-secondary me-1 mb-1">${x.no_po}</span>`).join('')}
                                </div>
                            </div>
                        `,
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didClose: () => {
                            groupActive = false;
                        },

                        didOpen: async () => {
                            const setProgress = (percent, text) => {
                                const $bar = $('#email-progress-bar');

                                $bar
                                    .css('width', percent + '%')
                                    .attr('aria-valuenow', percent)
                                    .text(percent + '%');

                                $('#email-progress-percent').text(percent + '%');
                                $('#email-progress-text').text(text);
                            };

                            const waitWithCountdownGrouping = () => {
                                return new Promise((resolve) => {
                                    let remaining = sendDelaySecondsGrouping;
                                    let timer = null;
                                    const tick = () => {
                                        if (!isActive() || groupCancelled) {
                                            if (timer) clearInterval(timer);
                                            resolve(false);
                                            return;
                                        }

                                        const elapsed =
                                            sendDelaySecondsGrouping -
                                            remaining;
                                        const percent = Math.min(80, Math.max(0,
                                            Math.round((elapsed /
                                                sendDelaySecondsGrouping
                                            ) * 80)));

                                        setProgress(percent);

                                        if (remaining <= 0) {
                                            if (timer) clearInterval(timer);
                                            resolve(true);
                                            return;
                                        }

                                        remaining -= 1;
                                    };

                                    tick();
                                    timer = setInterval(tick, 1000);
                                });
                            };

                            let groupRequest = null;
                            let groupCancelled = false;
                            let cancelEnabled = true;

                            const isActive = () => groupActive;

                            const setCancelEnabled = (enabled) => {
                                cancelEnabled = enabled;
                                const $btn = $('#btn-group-cancel');
                                if (!$btn.length) return;
                                $btn.prop('disabled', !enabled);
                                $btn.toggleClass('disabled', !enabled);
                            };

                            $('#btn-group-cancel').on('click', function() {
                                if (!cancelEnabled) return;
                                groupCancelled = true;
                                groupActive = false;

                                if (groupRequest && groupRequest.readyState !== 4) {
                                    groupRequest.abort();
                                    return;
                                }

                                Swal.close();
                            });

                            Swal.showLoading();

                            try {
                                setProgress(0, 'Menyiapkan email...');

                                const okToSend = await waitWithCountdownGrouping();

                                if (!okToSend || !isActive()) return;

                                if (groupCancelled) {
                                    Swal.hideLoading();
                                    setCancelEnabled(false);

                                    $('#email-progress-bar')
                                        .removeClass(
                                            'progress-bar-animated progress-bar-striped')
                                        .addClass('bg-secondary');

                                    $('#email-progress-text')
                                        .removeClass('text-muted')
                                        .addClass('text-secondary fw-bold')
                                        .text('Pengiriman dibatalkan.');

                                    $('<button class="btn btn-secondary mt-3" id="btn-group-close">Tutup</button>')
                                        .appendTo('.swal2-html-container');

                                    $('#btn-group-close').on('click', function() {
                                        Swal.close();
                                    });

                                    return;
                                }

                                setProgress(80, 'Mengirim email...');
                                setCancelEnabled(false);

                                if (!isActive()) return;

                                if (groupCancelled) {
                                    return;
                                }

                                groupRequest = $.ajax({
                                    url: window.ROUTES.kirimEmailGrouping,
                                    type: 'POST',
                                    data: {
                                        _token: window.CSRF,
                                        item: selectedData,
                                        subject_override: chosenSubject,
                                        cc_email: chosenCcEmail,
                                        cc_email_group_id: chosenCcEmailGroupId,
                                        body_override: chosenBody,
                                        lampiran_ids: chosenLampiranIds || []
                                    },
                                    timeout: 120000
                                });

                                const response = await groupRequest;

                                if (!isActive()) return;

                                setProgress(80, 'Memproses hasil pengiriman...');

                                await new Promise(resolve => setTimeout(resolve, 300));

                                if (!isActive()) return;

                                if (!response.success) {
                                    throw new Error(response.message || 'Gagal');
                                }

                                setProgress(100, 'Email grouping berhasil terkirim.');

                                Swal.hideLoading();
                                setCancelEnabled(false);

                                $('#email-progress-bar')
                                    .removeClass('progress-bar-animated progress-bar-striped')
                                    .addClass('bg-success');

                                $('#email-progress-text')
                                    .removeClass('text-muted')
                                    .addClass('text-success fw-bold')
                                    .text('Berhasil terkirim.');

                                $('<button class="btn btn-primary mt-3" id="btn-group-refresh">Tutup & Refresh</button>')
                                    .appendTo('.swal2-html-container');

                                $('#btn-group-refresh').on('click', function() {
                                    location.reload();
                                });

                            } catch (xhr) {
                                if (groupCancelled || xhr?.statusText === 'abort') {
                                    Swal.hideLoading();
                                    setCancelEnabled(false);

                                    $('#email-progress-bar')
                                        .removeClass(
                                            'progress-bar-animated progress-bar-striped')
                                        .addClass('bg-secondary');

                                    $('#email-progress-text')
                                        .removeClass('text-muted')
                                        .addClass('text-secondary fw-bold')
                                        .text('Pengiriman dibatalkan.');

                                    $('<button class="btn btn-secondary mt-3" id="btn-group-close">Tutup</button>')
                                        .appendTo('.swal2-html-container');

                                    $('#btn-group-close').on('click', function() {
                                        Swal.close();
                                    });

                                    return;
                                }

                                let reason = 'Gagal';

                                try {
                                    const j = xhr.responseJSON || JSON.parse(xhr.responseText ||
                                        '{}');
                                    if (j.message) reason = j.message;
                                } catch (e) {}

                                if (xhr.message) {
                                    reason = xhr.message;
                                }

                                setProgress(100, 'Pengiriman gagal.');

                                Swal.hideLoading();
                                setCancelEnabled(false);

                                $('#email-progress-bar')
                                    .removeClass('progress-bar-animated progress-bar-striped')
                                    .addClass('bg-danger');

                                $('#email-progress-text')
                                    .removeClass('text-muted')
                                    .addClass('text-danger fw-bold')
                                    .text(reason);

                                $('<button class="btn btn-danger mt-3" id="btn-group-close">Tutup</button>')
                                    .appendTo('.swal2-html-container');

                                $('#btn-group-close').on('click', function() {
                                    Swal.close();
                                });
                            }
                        }
                    });
                })
                .appendTo($btns);

            const selectedRows = new Map();

            function getRowPayload($checkbox) {
                const $tr = getRowFromCheckbox($checkbox);

                return {
                    no_po: String($checkbox.val() || ''),
                    supplier: String($tr.data('supplier') || ''),
                    pdf: String($tr.data('pdf') || $tr.data('file') || '').trim(),
                    tipe_pr: String($tr.data('tipe') || ''),
                    no_vendor: String($tr.data('no-vendor') || '').trim(),
                    vendor: String($tr.data('vendor') || '').trim(),
                    delivery_date: String($tr.attr('data-dev_date') || ''),
                    dokumen_date: String($tr.attr('data-doc_date') || ''),
                    status: getRowStatus($tr)
                };
            }

            function getSelectedData() {
                return Array.from(selectedRows.values());
            }

            function updateSelectedCount() {
                $('#selectedCount').text(selectedRows.size);
            }

            function restoreCheckedOnCurrentPage() {
                $('.row-checkbox').each(function() {
                    const $checkbox = $(this);
                    const key = getCheckboxKey($checkbox);

                    $checkbox.prop('checked', selectedRows.has(key));
                });

                updateSelectedCount();
                updateSelectAll();
            }

            // Ganti "table" sesuai nama variable DataTable kamu
            table.on('draw', function() {
                restoreCheckedOnCurrentPage();
            });

            $('<span>')
                .addClass('badge bg-primary ms-2 align-middle')
                .html('Terpilih: <span id="selectedCount">0</span>')
                .appendTo($btns);

            updateSelectedCount();
            updateSelectAll();

            // === Tombol Kirim Email ===
            const safe = s => String(s ?? '').replace(/[&<>"']/g, m => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            } [m]));

            function csvToArray(csv) {
                csv = String(csv || '').trim();
                if (!csv) return [];
                return Array.from(new Set(csv.split(/[\s,;]+/).map(s => s.trim().toLowerCase()).filter(Boolean)));
            }

            function isEmail(v) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
            }

            // chips state (satu instance utk swal)
            let __swalChipsStore = new Set();

            function getSwalChipsValues() {
                return [...__swalChipsStore];
            }

            // ikon mini utk list progres
            const miniIconClosed =
                `<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 7.5 12 13l8.5-5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
            const miniIconOpen =
                `<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M2 9.5 12 4l10 5.5-10 6.5L2 9.5Z" stroke="currentColor" stroke-width="1.5"/><path d="M4 10.8V18a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.2" stroke="currentColor" stroke-width="1.5"/><path d="M9.5 15.8l2 2 3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
            const miniIconError =
                `<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2 2 7.5l10 6 10-6L12 2Z" stroke="currentColor" stroke-width="1.5"/><path d="M4 10v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="1.5"/><path d="M8 12l8 8M16 12l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
        });
    </script>

    <script>
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3744</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3744</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3745</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3745</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3746</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trotpo/list.blade.php</b> on line <b>3746</b><br />
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }
    </script>

    {{-- Summernote JS - Bootstrap 5 Version (sama dengan Body Email) --}}
    <script src="{{ asset('assets/summernote-0.9.0-dist/summernote-bs5.js') }}"></script>

    <script>
        function handlePdfView(button, noPo) {
            // Ubah warna button jadi hijau
            $(button).removeClass('btn-danger')
                .addClass('btn-success')
                .html('<i class="fas fa-check-circle me-1"></i> PDF Viewed');

            // Simpan status ke localStorage
            localStorage.setItem('pdf_viewed_' + noPo, 'true');
        }


        $(document).ready(function() {
            $('.view-pdf-btn').each(function() {
                const noPo = $(this).data('nopo');

                // Jika sudah pernah diklik (ada di localStorage)
                if (localStorage.getItem('pdf_viewed_' + noPo) === 'true') {
                    $(this).removeClass('btn-danger')
                        .addClass('btn-success')
                        .html('<i class="fas fa-check-circle me-1"></i> PDF Viewed');
                }
            });
        });
    </script>
@endpush