@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;
        }

        .send-actions-panel {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 12px;
        }

        .send-actions-panel .send-note {
            color: #dc3545;
            line-height: 1.35;
        }

        #list_trgesa tbody tr.status-row-failed>td {
            background-color: #f8d7da !important;
        }

        #list_trgesa tbody tr.status-row-sent>td {
            background-color: #fff3cd !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="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display w-100" id="list_{{ $dmenu }}">
                                    <thead style="background-color:#00b7bd4f;">
                                        <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>Lampiran</th>
                                            <th>Status</th>
                                            <th>Tipe PO</th>
                                            <th>No PO</th>
                                            <th>Dokumen Date</th>
                                            <th>Delivery Date</th>
                                            <th>Nama Supplier</th>
                                            {{-- <th class="text-end">Jumlah Item</th> --}}
                                            {{-- <th class="text-end">Total Nominal</th> --}}

                                            <th>CC Email</th>
                                            <th>To Email Vendor</th>

                                            {{-- <th>Aksi</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 1;
                                            $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
                                            <tr data-nopo="{{ trim($row->no_po) }}" data-status="{{ (int) $row->status }}"
                                                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-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>{{ $i++ }}</td>
                                                <td>
                                                    @if (!empty($row->file_pdf))
                                                        <a href="{{ asset($row->file_pdf) }}"
                                                            class="btn btn-sm btn-danger mb-0 view-pdf-btn"
                                                            data-nopo="{{ trim($row->no_po) }}" target="_blank"
                                                            rel="noopener"
                                                            onclick="handlePdfView(this, '{{ trim($row->no_po) }}')">
                                                            <i class="fas fa-file-pdf me-1"></i> View PDF
                                                        </a>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($row->status == 1)
                                                        <span class="badge bg-warning">Belum Kirim</span>
                                                    @elseif ($row->status == 3)
                                                        <span class="badge bg-danger">Gagal Kirim</span>
                                                    @elseif ($row->status == 4)
                                                        <span class="badge bg-success">Sudah Pernah Kirim</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ $row->status }}</span>
                                                    @endif
                                                </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>
                                                <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->dokumen_date_min) }}</td>
                                                <td>{{ $formatPoDate($row->delivery_date) }}</td>
                                                <td>{{ $row->nama_supplier }}</td>
                                                {{-- <td class="text-end">{{ number_format((int) $row->jml_item) }}</td> --}}
                                                {{-- <td class="text-end">
                                                    {{ number_format((float) $row->total_nominal, 0, ',', '.') }}</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>
                                                    <button class="btn btn-sm btn-danger mb-0 generate-pdf"
                                                        data-id="{{ $dokDate }}" data-nopo="{{ $noPo }}"
                                                        data-supplier="{{ $supplier }}">
                                                        Generate PDF
                                                    </button>
                                                </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:#00b7bd4f;">
                                                            <tr>
                                                                <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: #ffc2cd;" class="fas fa-circle"></i> Data Gagal
                                        Kirim</code> <code><i aria-hidden="true"
                                            style="color: rgb(255, 243, 205) !important;" class="fas fa-circle"></i> Data
                                        Sudah Pernah Kirim</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>
        $(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 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">${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, filePdfPath) {
                const $body = $('#mdlBody');
                $('#mdlNoPo').text(no_po || '-');
                $('#mdlMeta').text(metaText || '');
                $body.html('<tr><td colspan="5" class="text-center text-muted">Memuat…</td></tr>');

                if (filePdfPath) {
                    // Extract filename dari path
                    const filename = filePdfPath.split('/').pop();

                    // Generate URL menggunakan route viewPdf
                    const previewUrl = `{{ url('/storage/pdf/') }}/${filename}?preview=1`;

                    console.log('Preview URL:', previewUrl); // ⬅️ DEBUGGING

                    $('#mdlPdfLink')
                        .removeClass('d-none')
                        .attr('href', previewUrl)
                        .attr('target', '_blank');
                    // } else {
                    //     $('#mdlPdfLink').addClass('d-none').attr('href', '#');
                }

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

                // AJAX ambil detail
                $.ajax({
                        url: `{{ route('trgesa.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);

                        // LOG DIAGNOSTIK (hapus kalau sudah beres)
                        console.log('detail OK:', {
                            count: items.length,
                            sample: items[0]
                        });

                        // 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 filePdf = String($tr.data('file') ?? '').trim();
                const metaText = `Supplier: ${supplier} • Dokumen Date: ${dokDate}`;
                if (no_po) openDetailModal(no_po, metaText, filePdf);
            });
        });
    </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('trgesa.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('trgesa.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>

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

        .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>

    <script>
        // chips state (satu instance utk swal)
        let __swalChipsStorecc = new Set();

        function getSwalChipsValuesccemail() {
            return [...__swalChipsStorecc];
        }

        function initSwalChipsccemail(root, preset) {
            __swalChipsStorecc = 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());

                [...__swalChipsStorecc].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 = () => {
                        __swalChipsStorecc.delete(v);
                        render();
                        root.dispatchEvent(new Event('chips:changed'));
                    };

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

            function consume(text) {
                const values = text.split(/[\s,;]+/).map(t => t.trim()).filter(Boolean);

                values.forEach(v => {
                    __swalChipsStorecc.add(v);
                });

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

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

                    if (input.value.trim()) {
                        consume(input.value);
                    }
                } else if (e.key === 'Backspace' && !input.value && __swalChipsStorecc.size) {
                    const last = [...__swalChipsStorecc].pop();
                    __swalChipsStorecc.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);
                }
            });

            render();
        }

        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;

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

                bsModal.show();

                setTimeout(() => {
                    const root = document.getElementById('cc_chips');
                    const preset = csvToArray(curr);

                    initSwalChipsccemail(root, preset);

                    root.querySelector('.email-input')?.focus();
                }, 200);
            });

            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 root = document.getElementById('cc_chips');
                root?.dispatchEvent(new Event('chips:consume'));

                const tipe = $('#cc_tipe_po').val();
                const nopo = $('#cc_no_po').val();

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

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

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

        // Klik pada <td class="po-cell">
        $(document).on('click', 'td.po-cell', function(e) {
            e.preventDefault();
            const noPo = this.dataset.noPo;

            // Trigger Get SAP modal with PO mode and pre-filled PO number
            triggerGetSapModal('po', [noPo]);
        });

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

        // Function to trigger Get SAP modal
        async function triggerGetSapModal(defaultMode = 'date', poNumbers = []) {
            const today = new Date();
            const oneWeekAgo = new Date();
            oneWeekAgo.setDate(today.getDate() - 7);
            const todayStr = today.toISOString().slice(0, 10);
            const weekAgoStr = oneWeekAgo.toISOString().slice(0, 10);

            const {
                value: formValues
            } = await Swal.fire({
                title: 'Get Data SAP',
                html: `
                    <div class="mb-3 text-start">
                        <label class="form-label fw-bold">Pilih Mode:</label>
                        <select id="sap-mode" class="form-select">
                            <option value="date" ${defaultMode === 'date' ? 'selected' : ''}>Berdasarkan Tanggal</option>
                            <option value="po" ${defaultMode === 'po' ? 'selected' : ''}>Berdasarkan No PO</option>
                        </select>
                    </div>
                    <div id="date-mode" class="text-start" style="display: ${defaultMode === 'date' ? 'block' : 'none'};">
                        <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(weekAgoStr)}" 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>
                    <div id="po-mode" class="text-start" style="display: ${defaultMode === 'po' ? 'block' : 'none'};">
                        <div class="mb-3">
                            <label class="form-label fw-bold">No PO:</label>
                            <div class="chips-container" style="min-height: 40px;">
                                <input type="text" class="email-input form-control border-0 bg-transparent" placeholder="Ketik No PO (10 digit angka) dan tekan Enter..." style="box-shadow: none; outline: none;">
                            </div>
                            <small class="text-muted">
                                <strong>Format:</strong> 10 digit angka (contoh: 1234567890)<br>
                                <strong>Cara input:</strong> Ketik → Enter atau koma untuk menambahkan. Klik ✕ untuk hapus.
                            </small>
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Ambil Data',
                cancelButtonText: 'Batal',
                didOpen: () => {
                    initSapDatepickers();

                    const modeSelect = document.getElementById('sap-mode');
                    const dateMode = document.getElementById('date-mode');
                    const poMode = document.getElementById('po-mode');

                    modeSelect.addEventListener('change', function() {
                        if (this.value === 'date') {
                            dateMode.style.display = 'block';
                            poMode.style.display = 'none';
                        } else {
                            dateMode.style.display = 'none';
                            poMode.style.display = 'block';

                            // Initialize chips for PO input
                            const chipsContainer = poMode.querySelector('.chips-container');
                            if (chipsContainer) {
                                initSwalChips(chipsContainer, []);
                            }
                        }
                    });

                    // Initialize chips if PO mode is default
                    if (defaultMode === 'po') {
                        const chipsContainer = poMode.querySelector('.chips-container');
                        if (chipsContainer) {
                            initSwalChips(chipsContainer, poNumbers);
                        }
                    }
                },
                preConfirm: async () => {
                    const mode = document.getElementById('sap-mode').value;

                    if (mode === 'date') {
                        const dateFrom = toSapDate(document.getElementById('sap-date-from').value);
                        const dateTo = toSapDate(document.getElementById('sap-date-to').value);

                        if (!dateFrom || !dateTo) {
                            Swal.showValidationMessage('Tanggal mulai dan akhir harus diisi');
                            return false;
                        }

                        if (dateFrom > dateTo) {
                            Swal.showValidationMessage(
                                'Tanggal mulai tidak boleh lebih besar dari tanggal akhir');
                            return false;
                        }

                        return {
                            mode: 'date',
                            dateFrom,
                            dateTo
                        };
                    } else {
                        const poNumbers = getSwalChipsValues();

                        if (poNumbers.length === 0) {
                            Swal.showValidationMessage('Minimal 1 No PO harus diisi');
                            return false;
                        }

                        // Validasi final: semua No PO harus 10 digit angka
                        const invalidPos = poNumbers.filter(po => {
                            const validation = isValidNoPo(po);
                            return !validation.valid;
                        });

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

                        // Cek duplikasi
                        const uniquePo = [...new Set(poNumbers)];
                        if (uniquePo.length !== poNumbers.length) {
                            Swal.showValidationMessage('Ada No PO duplikat');
                            return false;
                        }

                        return {
                            mode: 'po',
                            poNumbers: uniquePo
                        };
                    }
                }
            });

            if (!formValues) return;

            $.ajax({
                url: "{{ route('trgesa.getsap') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    mode: formValues.mode,
                    start_date: formValues.dateFrom || null,
                    end_date: formValues.dateTo || null,
                    no_po: formValues.poNumbers || null // Array No PO
                },
                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);
        }

        // state chips di modal (satu instance saja)
        let __swalChipsStore = new Set();

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

        // init/refresh chips container dengan preset (array)
        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();
                    consume(input.value);
                } else 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'));
            };

            render();
        }

        window.ROUTES = {
            mstccemailList: "{{ route('mstccemail.list') }}",
            msttemplateList: "{{ route('msttemplate.list') }}",
            kirimEmail: "{{ route('trgesa.kirimemail') }}",
            kirimEmailGrouping: "{{ route('trgesa.kirimemailgrouping') }}",
            lampiran: "{{ route('email.lampiran.list') }}"
        };
        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_trgesa').DataTable({
                destroy: true,
                responsive: true,
                pageLength: 50,
                // Disable ordering on the first column (select-all checkbox) so it doesn't show sort arrows
                columnDefs: [{
                    orderable: false,
                    targets: 0,
                    searchable: false
                }],
                order: [
                    [1, 'asc']
                ], // <--- set default sort by column index 1 (No)
                dom: 'Bfrtip',
                rowCallback: function(row) {
                    $(row).attr('data-row', '1');

                    const status = String(row.getAttribute('data-status') || '').trim();
                    $(row).removeClass('status-row-failed status-row-sent');
                    $(row).children('td').css('background-color', '');

                    if (status === '3') {
                        $(row).addClass('status-row-failed');
                        row.querySelectorAll('td').forEach(td => {
                            td.style.setProperty('background-color', '#f8d7da', 'important');
                        });
                    } else if (status === '4') {
                        $(row).addClass('status-row-sent');
                        row.querySelectorAll('td').forEach(td => {
                            td.style.setProperty('background-color', '#fff3cd', 'important');
                        });
                    }
                },
                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_TRGESA_' + 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_trgesa 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');
                                }
                            });
                        }
                    }
                }, {
                    extend: 'excelHtml5',
                    className: 'btn btn-success me-2',
                    text: '<i class="fas fa-file-excel me-1"></i>    UiPath',
                    title: null,
                    filename: 'PO',
                    sheetName: 'a',
                    exportOptions: {
                        columns: [5], // Only No PO column
                        rows: function(idx, data, node) {
                            return true; // All rows
                        }
                    },
                    customize: function(xlsx) {
                        const sheet = xlsx.xl.worksheets['sheet1.xml'];

                        // Ubah header No PO menjadi PO dan tambahkan Status dan Filepath
                        const headerRow = sheet.querySelector('row[r="1"]');
                        if (headerRow) {
                            // Ubah header pertama menjadi "PO"
                            const firstCell = headerRow.querySelector('c[r="A1"] is t');
                            if (firstCell) {
                                firstCell.textContent = 'PO';
                            }

                            // Tambahkan header Status di B1
                            const statusHeaderCell = sheet.createElement('c');
                            statusHeaderCell.setAttribute('r', 'B1');
                            statusHeaderCell.setAttribute('t', 'inlineStr');
                            statusHeaderCell.innerHTML = '<is><t>Status</t></is>';
                            headerRow.appendChild(statusHeaderCell);

                            // Tambahkan header Filepath di C1
                            const filepathHeaderCell = sheet.createElement('c');
                            filepathHeaderCell.setAttribute('r', 'C1');
                            filepathHeaderCell.setAttribute('t', 'inlineStr');
                            filepathHeaderCell.innerHTML = '<is><t>Filepath</t></is>';
                            headerRow.appendChild(filepathHeaderCell);

                            // Hapus style bold dari semua header cells
                            const headerCells = headerRow.querySelectorAll('c');
                            headerCells.forEach(cell => {
                                cell.removeAttribute('s');
                            });
                        }

                        // Tambahkan cell kosong untuk Status dan Filepath di setiap baris data
                        const dataRows = sheet.querySelectorAll('row[r]');
                        for (let i = 1; i < dataRows.length; i++) {
                            const row = dataRows[i];
                            const rowNum = i + 1;

                            // Tambahkan cell kosong untuk Status di kolom B
                            const statusCell = sheet.createElement('c');
                            statusCell.setAttribute('r', 'B' + rowNum);
                            statusCell.setAttribute('t', 'inlineStr');
                            statusCell.innerHTML = '<is><t></t></is>';
                            row.appendChild(statusCell);

                            // Tambahkan cell kosong untuk Filepath di kolom C
                            const filepathCell = sheet.createElement('c');
                            filepathCell.setAttribute('r', 'C' + rowNum);
                            filepathCell.setAttribute('t', 'inlineStr');
                            filepathCell.innerHTML = '<is><t></t></is>';
                            row.appendChild(filepathCell);
                        }
                    }
                }]
            });

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

            // Styling button Excel agar seragam dengan button lainnya
            $('.buttons-excel').removeClass('dt-button buttons-html5').addClass('btn btn-secondary me-2');

            // Fungsi Select All Checkbox
            $('#select-all-checkbox').on('click', function() {
                const isChecked = $(this).prop('checked');
                $('.row-checkbox').prop('checked', isChecked);
            });

            // Update Select All jika checkbox individual diubah
            $(document).on('change', '.row-checkbox', function() {
                const totalCheckboxes = $('.row-checkbox').length;
                const checkedCheckboxes = $('.row-checkbox:checked').length;
                $('#select-all-checkbox').prop('checked', totalCheckboxes === checkedCheckboxes);
            });

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

            //upload file banyak
            $('<button>')
                .html('<i class="fas fa fa-upload"></i> Upload File')
                .addClass('btn btn-info me-2')
                .on('click', async function() {
                    const {
                        value: ok
                    } = await Swal.fire({
                        title: 'Upload File',
                        html: `
                        <div class="text-start">
                            <input id="swal-files" type="file" class="swal2-file" multiple style="width:100%"
                                accept=".pdf,.xls,.xlsx,.csv,.jpg,.jpeg,.png,.zip">
                            <div class="form-text">Bisa pilih banyak file (maks 10MB per file)</div>
                            <hr class="my-2">
                            <div class="fw-bold mb-1">Daftar File:</div>
                            <ul id="file-list" class="list-group" style="max-height:220px;overflow:auto;"></ul>
                        </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Upload',
                        cancelButtonText: 'Batal',
                        didOpen: () => {
                            const input = document.getElementById('swal-files');
                            const list = document.getElementById('file-list');

                            const fmt = b => (b >= 1024 * 1024 ? (b / 1024 / 1024)
                                .toFixed(2) +
                                ' MB' : (b / 1024).toFixed(0) + ' KB');
                            const titleOf = name => name.replace(/\.[^/.]+$/, '');

                            let dt = new DataTransfer();

                            function renderList(fileList) {
                                list.innerHTML = '';
                                Array.from(fileList).forEach((f, idx) => {
                                    const li = document.createElement('li');
                                    li.className =
                                        'list-group-item d-flex justify-content-between align-items-center';
                                    li.innerHTML = `
                                    <div>
                                        <div class="fw-semibold">${titleOf(f.name)}</div>
                                        <small class="text-muted">${f.name} • ${fmt(f.size)}</small>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-file" data-idx="${idx}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    `;
                                    list.appendChild(li);
                                });

                                list.querySelectorAll('.remove-file').forEach(
                                    btn => {
                                        btn.addEventListener('click', () => {
                                            const idx = parseInt(btn
                                                .dataset.idx,
                                                10);
                                            const ndt =
                                                new DataTransfer();
                                            Array.from(input.files)
                                                .forEach((f, i) => {
                                                    if (i !== idx)
                                                        ndt.items
                                                        .add(f);
                                                });
                                            input.files = ndt.files;
                                            renderList(input.files);
                                        });
                                    });
                            }

                            input.addEventListener('change', () => {
                                dt = new DataTransfer();
                                Array.from(input.files).forEach(f => dt
                                    .items.add(f));
                                input.files = dt.files;
                                renderList(input.files);
                            });
                        },
                        preConfirm: () => {
                            const files = document.getElementById('swal-files')
                                .files;
                            if (!files || files.length === 0) {
                                Swal.showValidationMessage('Minimal pilih 1 file');
                                return false;
                            }
                            for (const f of files) {
                                if (f.size > 10 * 1024 * 1024) {
                                    Swal.showValidationMessage(
                                        `"${f.name}" melebihi 10MB`);
                                    return false;
                                }
                            }
                            return true;
                        }
                    });

                    if (!ok) return;

                    const files = document.getElementById('swal-files').files;
                    const fd = new FormData();
                    fd.append('_token', '{{ csrf_token() }}');
                    Array.from(files).forEach(f => fd.append('files[]', f, f.name));

                    Swal.fire({
                        title: 'Mengupload...',
                        html: `
                        <div class="text-start">Mohon tunggu, file sedang diunggah.</div>
                        <div class="progress mt-3" style="height:16px;">
                            <div id="swal-progress" class="progress-bar" role="progressbar" style="width:0%;">0%</div>
                        </div>
                        `,
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                    });

                    $.ajax({
                        url: "{{ route('trgesa.upload') }}",
                        type: "POST",
                        data: fd,
                        processData: false,
                        contentType: false,
                        xhr: function() {
                            const xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    const pct = Math.round((evt.loaded / evt
                                            .total) *
                                        100);
                                    const bar = document.getElementById(
                                        'swal-progress');
                                    if (bar) {
                                        bar.style.width = pct + '%';
                                        bar.textContent = pct + '%';
                                    }
                                }
                            }, false);
                            return xhr;
                        },
                        success: function(res) {
                            const fmt = b => (b >= 1024 * 1024 ? (b / 1024 / 1024)
                                .toFixed(2) +
                                ' MB' : (b / 1024).toFixed(0) + ' KB');
                            const items = Array.isArray(res?.files) ? res.files : [];
                            const listHtml = items.length ?
                                `<ul class="text-start mt-2">` + items.map(f => {
                                    const title = f.title || f.origin || f
                                        .filename || f
                                        .name || '—';
                                    const name = f.name || f.filename || '—';
                                    const size = f.size ?? f.size_bytes ?? null;
                                    const sizeStr = (size != null) ? fmt(size) :
                                        '';
                                    const rows = f.rows_updated ?? f
                                        .matched_rows ?? 0;
                                    const nopo = f.no_po ?? f.no_po_parsed ??
                                        '-';
                                    return `<li><strong>${title}</strong> <small class="text-muted">(${name}${sizeStr ? ', '+sizeStr :
                                    ''})</small><br><small>No PO: ${nopo} • Baris diupdate: ${rows}</small></li>`;
                                }).join('') + `</ul>` :
                                '';

                            Swal.fire({
                                icon: 'success',
                                title: 'Sukses',
                                html: `<div>${res.message || 'Upload selesai.'}</div>${listHtml}`,
                                confirmButtonText: 'OK'
                            }).then(() => location.reload());
                        },
                        error: function(xhr) {
                            let msg = 'Gagal upload file!';
                            try {
                                const j = JSON.parse(xhr.responseText);
                                if (j.message) msg = j.message;
                                if (j.errors) {
                                    msg += `<ul class="text-start mt-2">` +
                                        Object.entries(j.errors).map(([k, v]) =>
                                            `<li>${k}: ${v.join(', ')}</li>`).join(
                                            '') +
                                        `</ul>`;
                                }
                            } catch (e) {}
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                html: msg
                            });
                            console.error(xhr.responseText);
                        }
                    });
                })
                .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() {
                        // Kumpulkan data yang dipilih
                        const selectedData = [];
                        $('.row-checkbox:checked').each(function() {
                            const $tr = $(this).closest('tr');
                            selectedData.push({
                                no_po: this.value,
                                supplier: String($tr.data('supplier') || ''),
                                delivery_date: String($tr.attr('data-dev_date') || ''),
                                dokumen_date: String($tr.attr('data-doc_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

            // Line break untuk baris baru
            $('<br>').appendTo($btns);

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

            // 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>`;

            $('<button>')
                .html('<i class="fas fa-envelope"></i> Kirim Email')
                .addClass('btn btn-success me-2')
                .on('click', async function() {
                    // 1) kumpulkan baris
                    const selectedData = [];
                    $('.row-checkbox:checked').each(function() {
                        const $tr = $(this).closest('tr');
                        selectedData.push({
                            no_po: this.value,
                            supplier: String($tr.data('supplier') || ''),
                            pdf: String($tr.data('pdf') || $tr.data('file') || '').trim(),
                            tipe_pr: String($tr.data('tipe') || ''),
                            vendor: String($tr.data('vendor') || ''),
                            delivery_date: String($tr.attr('data-dev_date') || ''),
                            dokumen_date: String($tr.attr('data-doc_date') || ''),
                        });
                    });
                    console.log('as', selectedData);
                    if (!selectedData.length) {
                        await Swal.fire('Info', 'Silakan pilih minimal 1 PO.', 'info');
                        return;
                    }

                    const missing = selectedData.filter(x => !x.pdf).map(x => x.no_po);
                    if (missing.length) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'Belum Generate PDF',
                            html: `<p>Belum Generate PDF Pada PO:</p><b>${missing.join(', ')}</b>`
                        });
                        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;
                    }

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

                    const tplOptions = templates.map(t =>
                        `<option value="${t.id}">${safe(t.nama)}</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>`;

                    // 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">Nama Email</label>
                                    <select id="tplSelect" class="form-select">${tplOptions}</select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Subject</label>
                                    <input id="tplsub" class="form-control" />
                                </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 $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

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

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

                            // Render template saat dropdown berubah
                            const render = () => {
                                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 || '');
                            };

                            $sel.on('change', render);
                            render();
                        },

                        preConfirm: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            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 editedBody = $body.summernote('code');
                            const editedSubject = $sub.val();
                            const lampiranIds = $lampiran.val() || [];

                            return {
                                id: id,
                                subject: editedSubject,
                                body: editedBody,
                                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 chosenLampiranIds = tplValue.lampiran_ids || [];

                    // 4) Progress kirim email (kode existing Anda)
                    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,
                                            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) {
                                        markPdfViewed(item.no_po);
                                        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() {
                    // 1) kumpulkan baris
                    const selectedData = [];
                    $('.row-checkbox:checked').each(function() {
                        const $tr = $(this).closest('tr');
                        selectedData.push({
                            no_po: this.value,
                            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') || ''),
                        });
                    });

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

                    const missing = selectedData.filter(x => !x.pdf).map(x => x.no_po);
                    if (missing.length) {
                        await Swal.fire({
                            icon: 'error',
                            title: 'Belum Generate PDF',
                            html: `<p>Belum Generate PDF Pada PO:</p><b>${missing.join(', ')}</b>`
                        });
                        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;
                    }

                    // Check all same vendor
                    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;
                    }

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

                    const tplOptions = templates.map(t =>
                        `<option value="${t.id}">${safe(t.nama)}</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>`;

                    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">Nama Email</label>
                                <select id="tplSelect" class="form-select">${tplOptions}</select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Subject</label>
                                <input id="tplsub" class="form-control" />
                            </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 $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');
                            const $lampiran = $dlg.find('#lampiranSelect');

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

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

                            const render = () => {
                                const id = Number($sel.val());
                                const row = templates.find(x => Number(x.id) === id);
                                if (!row) {
                                    $body.summernote('code', '<em>(kosong)</em>');
                                    return;
                                }
                                $sub.val(row.subject || '');
                                $body.summernote('code', row.body || '');
                            };
                            $sel.on('change', render);
                            render();
                        },
                        preConfirm: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            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() || [];

                            return {
                                template_id: id,
                                subject: editedSubject,
                                body: editedBody,
                                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 chosenLampiranIds = tplValue.lampiran_ids || [];
                    const sendDelayMsGrouping = 10000;
                    const sendDelaySecondsGrouping = Math.ceil(sendDelayMsGrouping / 1000);

                    // ✅ PERBAIKAN: Ambil email_to dari vendor pertama (karena semua PO vendor sama)
                    const emailTo = selectedData[0].vendor;

                    // 3) kirim sebagai grouping dengan progress list
                    const listItemsGrouping = selectedData.map((item, i) => `
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-bold">${item.no_po || '-'}</div>
                                <small class="text-muted">${item.supplier || item.nama_supplier || '-'}</small>
                            </div>
                            <span id="group-send-status-${i}" class="badge bg-secondary">
                                Menunggu
                            </span>
                        </li>
                    `).join('');

                    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,
                                            `Menyiapkan email... ${remaining}s`
                                        );

                                        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,
                                        email_to: emailTo,
                                        subject_override: chosenSubject,
                                        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');
                                }

                                selectedData.forEach(item => markPdfViewed(item.no_po));

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

            {{-- check authorize delete --}}
        });
    </script>

    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
            //check note
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
        });
        //set table into datatables



        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2951</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2951</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2952</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2952</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2953</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjdocmanagement/resources/views/pages/trgesa/list.blade.php</b> on line <b>2953</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 markPdfViewed(noPo) {
            noPo = String(noPo || '').trim();
            if (!noPo) return;

            const button = $(`.view-pdf-btn[data-nopo="${CSS.escape(noPo)}"]`);
            button.removeClass('btn-danger')
                .addClass('btn-success')
                .html('<i class="fas fa-check-circle me-1"></i> PDF Viewed');

            localStorage.setItem('pdf_viewed_' + noPo, 'true');
        }

        function handlePdfView(button, noPo) {
            // Ubah warna button jadi hijau
            markPdfViewed(noPo);
        }


        $(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>
    <script>
        // ===== VALIDASI NO PO =====
        function isValidNoPo(value) {
            const trimmed = value.trim();

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

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

            return {
                valid: true
            };
        }

        // ===== UPDATE FUNCTION initSwalChips =====
        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) {
                const values = text.split(/[\s,;]+/).map(t => t.trim()).filter(Boolean);

                let hasError = false;
                let errorMessage = '';

                values.forEach(v => {
                    const validation = isValidNoPo(v);

                    if (validation.valid) {
                        // Pad dengan leading zero jika perlu (untuk konsistensi)
                        const padded = v.padStart(10, '0');
                        __swalChipsStore.add(padded);
                    } else {
                        hasError = true;
                        errorMessage = validation.message;

                        // Tampilkan peringatan visual
                        Swal.showValidationMessage(`<div style="color:#dc3545;font-weight:600;">${validation.message}</div>
          <div style="font-size:13px;margin-top:4px;">Input: "${v}" (${v.length} digit)</div>`);

                        // Shake animation untuk input
                        input.classList.add('shake-error');
                        setTimeout(() => input.classList.remove('shake-error'), 500);
                    }
                });

                if (!hasError) {
                    input.value = '';
                    render();
                    root.dispatchEvent(new Event('chips:changed'));

                    // Clear validation message jika berhasil
                    const validationMsg = Swal.getValidationMessage();
                    if (validationMsg) {
                        validationMsg.style.display = 'none';
                    }
                } else {
                    // Tidak clear input jika ada error, biar user bisa koreksi
                    input.focus();
                }
            }

            input.onkeydown = (e) => {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    if (input.value.trim()) {
                        consume(input.value);
                    }
                } else 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();
                const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                consume(pastedText);
            };

            // Prevent non-numeric input
            input.oninput = (e) => {
                // Allow only digits, spaces, and separators
                e.target.value = e.target.value.replace(/[^\d\s,;]/g, '');
            };

            render();
        }

        // ===== CSS untuk Shake Animation =====
        const style = document.createElement('style');
        style.textContent = `
    @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
    }
    .shake-error {
    animation: shake 0.3s ease-in-out;
    border-color: #dc3545 !important;
    }
    `;
        document.head.appendChild(style);
    </script>
@endpush