@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;
        }
    </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>Tipe PO</th>
                                            <th>No PO</th>
                                            <th>Dokumen 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; @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-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 ?? '') }}">
                                                <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 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>{{ $row->dokumen_date_min }}</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 not active</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(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>
        document.addEventListener('DOMContentLoaded', () => {
            const modalEl = document.getElementById('ccEmailModal');
            const bsModal = new bootstrap.Modal(modalEl);
            const $err = document.getElementById('cc_error');

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

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

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

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

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

                bsModal.show();
            });

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

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

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

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

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

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

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

        // 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 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>
                            <input type="date" id="sap-date-from" class="form-control" value="${weekAgoStr}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Tanggal Akhir:</label>
                            <input type="date" id="sap-date-to" class="form-control" value="${todayStr}">
                        </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: () => {
                    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 = document.getElementById('sap-date-from').value;
                        const dateTo = 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') }}"
        };
        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,
                // 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');
                },
                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.xlsx',
                    sheetName: 'a',
                    exportOptions: {
                        columns: [4], // 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') || ''),
                            });
                        });

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

                        // Konfirmasi penghapusan
                        const poList = selectedData.map(item => item.no_po).join(', ');
                        const {
                            isConfirmed
                        } = await Swal.fire({
                            title: 'Konfirmasi Hapus',
                            html: `<p>Apakah Anda yakin ingin menghapus data PO 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() }}",
                                    no_po: selectedData.map(item => item.no_po)
                                }
                            });

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

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

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

            function initSwalChips(root, preset) {
                __swalChipsStore = new Set((preset || []).filter(isEmail).map(v => v.toLowerCase()));
                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">&times;</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().toLowerCase();
                        if (v && isEmail(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();
            }

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

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

                    // 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>
                        `,
                        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');

                            // ✅ Initialize Summernote dengan konfigurasi SAMA seperti Body Email (edit.blade.php)
                            $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(); // Load template pertama
                        },
                        preConfirm: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            const $sel = $dlg.find('#tplSelect');
                            const $sub = $dlg.find('#tplsub');
                            const $body = $dlg.find('#tplBody');

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

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

                            // ✅ Ambil content dari Summernote
                            const editedBody = $body.summernote('code');
                            const editedSubject = $sub.val();

                            return {
                                id: id,
                                subject: editedSubject,
                                body: editedBody
                            };
                        },
                        willClose: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            const $body = $dlg.find('#tplBody');

                            // ✅ Destroy Summernote saat modal ditutup
                            if ($body.data('summernote')) {
                                $body.summernote('destroy');
                            }
                        }
                    });

                    if (!okTpl) return;

                    const chosenSubject = tplValue.subject;
                    const chosenBody = tplValue.body;

                    // 4) Progress kirim email (kode existing Anda)
                    const listItems = selectedData.map((x, i) => `
            <li id="send-item-${i}" class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <strong>${safe(x.no_po)}</strong>
                    <small class="text-muted d-block">${safe(x.supplier)}</small>
                </div>
                <span id="send-status-${i}" class="badge bg-secondary">Menunggu...</span>
            </li>
        `).join('');

                    await Swal.fire({
                        title: 'Mengirim email…',
                        width: '900px',
                        html: `<ul id="send-list" class="list-group text-start" style="max-height:420px;overflow:auto;">${listItems}</ul>`,
                        allowOutsideClick: false,
                        didOpen: async () => {
                            Swal.showLoading();

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

                                try {
                                    $status.removeClass('bg-secondary').addClass('bg-info')
                                        .text('Mengirim...');

                                    const response = await $.ajax({
                                        url: window.ROUTES.kirimEmail,
                                        method: 'POST',
                                        data: {
                                            _token: window.CSRF,
                                            item: item,
                                            subject_override: chosenSubject,
                                            body_override: chosenBody
                                        },
                                        timeout: 30000
                                    });

                                    if (response.success) {
                                        $status.removeClass('bg-info').addClass('bg-success')
                                            .html('<i class="fas fa-check"></i> Terkirim');
                                    } else {
                                        throw new Error(response.message || 'Gagal');
                                    }
                                } catch (xhr) {
                                    let reason = 'Gagal';
                                    try {
                                        const j = xhr.responseJSON;
                                        if (j && j.message) reason = j.message;
                                    } catch (e) {}

                                    $status.removeClass('bg-info').addClass('bg-danger').html(
                                        '<i class="fas fa-times"></i> ' + reason);
                                }
                            }

                            Swal.hideLoading();
                            $(`<button class="btn btn-primary mt-3" onclick="location.reload()">Tutup & Refresh</button>`)
                                .appendTo('#send-list');
                        }
                    });
                })
                .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()
                        });
                    });

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

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

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

                            return {
                                template_id: id,
                                subject: editedSubject,
                                body: editedBody
                            };
                        },
                        willClose: () => {
                            const $dlg = $(Swal.getHtmlContainer());
                            const $body = $dlg.find('#tplBody');
                            if ($body.data('summernote')) {
                                $body.summernote('destroy');
                            }
                        }
                    });

                    if (!okTpl) return;

                    const chosenSubject = tplValue.subject;
                    const chosenBody = tplValue.body;

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

                    console.log('=== DEBUG KIRIM EMAIL GROUPING ===');
                    console.log('selectedData:', selectedData);
                    console.log('emailTo:', emailTo);
                    console.log('chosenSubject:', chosenSubject);
                    console.log('chosenBody (first 100 chars):', chosenBody.substring(0, 100));

                    // 3) kirim sebagai grouping
                    Swal.fire({
                        title: 'Mengirim email grouping…',
                        html: `<p>Mengirim email untuk ${selectedData.length} PO dari vendor yang sama.</p>`,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    try {
                        const response = await $.ajax({
                            url: window.ROUTES.kirimEmailGrouping,
                            type: "POST",
                            data: {
                                _token: window.CSRF,
                                item: selectedData,
                                email_to: emailTo, // ✅ TAMBAHKAN INI
                                subject_override: chosenSubject,
                                body_override: chosenBody
                            },
                            timeout: 120000
                        });

                        Swal.close();

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            html: `<p>Email grouping terkirim untuk PO: ${selectedData.map(x => x.no_po).join(', ')}</p>`
                        }).then(() => location.reload());
                    } catch (xhr) {
                        Swal.close();

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

                        console.error('=== ERROR KIRIM EMAIL GROUPING ===');
                        console.error('Status:', xhr.status);
                        console.error('Response:', xhr.responseText);

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

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

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

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


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

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

// sebelum dirubah