@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row mx-1">
            <div class="card">
                <div class="row">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="mb-0">List {{ $title_menu }}</h5>

                            {{-- button download word --}}
                            <button class="btn btn-success btn-sm mb-0 ms-2" style="padding: 4px 10px; line-height: 1.2; border-radius: 4px;"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="Instruksi Kerja Internal Memo"
                                onclick="window.open('https://drive.google.com/file/d/1HH_7bVPB74HMCrvcenHN5wKa-Bfm2U5H/view?usp=drive_link', '_blank')">
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </div>
                    </div>
                    {{-- Notification --}}
                    @if (Session::has('message'))
                        <div class="alert alert-{{ Session::get('class') }} alert-dismissible fade show d-inline-block px-3 py-2 text-white col-md"
                            role="alert" style="margin-left: 20px;">
                            <i
                                class="fas {{ Session::get('class') == 'success' ? 'fa-thumbs-up' : 'fa-exclamation-circle' }} me-2 text-white"></i>
                            {{ Session::get('message') }}
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>
                    @endif
                </div>
                <hr class="horizontal dark mt-0">
                <div class="row px-4 py-2">
                    <div class="col-12 mb-3">
                        <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</span>
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table display" id="tabel-transaksi">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No</th>
                                    <th>Tanggal</th>
                                    <th>Subject</th>
                                    <th>No Surat</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($hasil as $hs)
                                    <tr data-id="{{ $hs->id_internal_memo }}" data-from="{{ $hs->from }}"
                                        data-to="{{ $hs->to }}" data-tanggal="{{ $hs->tanggal }}"
                                        data-no-surat="{{ $hs->no_surat }}" data-subject="{{ $hs->subject }}"
                                        data-deskripsi="{{ $hs->deskripsi }}" data-urgency="{{ $hs->urgency }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $hs->tanggal }}</td>
                                        <td>{{ $hs->subject }}</td>
                                        <td>{{ $hs->no_surat }}</td>
                                        <td class="text-sm font-weight-normal">
                                            {{-- button print pdf --}}
                                            <button class="btn btn-sm btn-secondary mb-0 btn-print-pdf" title="Print PDF">
                                                <i class="fas fa-file-pdf me-1 text-lg text-danger" aria-hidden="true"></i>
                                                <span class="font-weight-bold">PDF</span>
                                            </button>

                                            {{-- button view --}}
                                            <button type="button" class="btn btn-sm btn-primary mb-0" title="View Data"
                                                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($hs->id_internal_memo)) }}'">
                                                <i class="fas fa-eye"></i>
                                                <span class="font-weight-bold">View</span>
                                            </button>

                                            {{-- check authorize edit --}}
                                            @if ($authorize->edit == '1')
                                                {{-- button edit --}}
                                                <button type="button" class="btn btn-sm btn-warning mb-0" title="Edit Data"
                                                    onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($hs->id_internal_memo)) }}'">
                                                    <i class="fas fa-edit"></i>
                                                    <span class="font-weight-bold">Edit</span>
                                                </button>
                                            @endif

                                            {{-- check authorize delete --}}
                                            @if ($authorize->delete == '1')
                                                <form action="{{ url($url_menu . '/' . encrypt($hs->id_internal_memo)) }}"
                                                    method="POST" style="display: inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger mb-0" title="Hapus Data"
                                                        onclick="return confirmDelete(event, '{{ $hs->subject }}')">
                                                        <i class="fas fa-trash"></i>
                                                        <span class="font-weight-bold">Hapus</span>
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row px-4 py-2">
                    <div class="col-12">
                        <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>

    <script>
        $(document).ready(function () {
            $('#tabel-transaksi').DataTable({
                "language": {
                    "search": "Cari:",
                    "zeroRecords": "Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                destroy: true,
                ordering: true,
                order: [[0, 'asc']],
                pageLength: 10,
                responsive: true,
            });

            // Set button styles
            $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');

            // button print pdf
            $('#tabel-transaksi').on('click', '.btn-print-pdf', async function () {
                const row = $(this).closest('tr');
                const from = row.data('from') || '';
                const to = row.data('to') || '';
                const toList = to.split(',').map(item => item.trim());
                const urgency = row.data('urgency') || '';
                const urgencyList = urgency.split(',').map(item => item.trim());
                const tanggal = row.data('tanggal') || '';
                const noSurat = row.data('no-surat') || '';
                const subject = row.data('subject') || '';
                const deskripsi = row.data('deskripsi') || '';
                const checkboxTo = @json($checkboxTo);

                // Tabel To (3 kolom per baris, centang jika ada)
                const iconChecked = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMSIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRvdCBHYWluIDIwJSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzVjYjZmMy1jNGIxLTRiZjctYWMyOS03YzUxMWY5MWJjYzQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5ZTM1YTc3ZC0zNDM0LTI5NGQtYmEwOC1iY2I5MjYyMjBiOGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYzc2MDY3Ny0xNDcwLTRlZDUtOGU4ZS1kNTdjODJlZDk1Y2UiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjBjNzYwNjc3LTE0NzAtNGVkNS04ZThlLWQ1N2M4MmVkOTVjZSIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozNzoyMCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NWNiNmYzLWM0YjEtNGJmNy1hYzI5LTdjNTExZjkxYmNjNCIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozODoyOCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jHsR7AAAAUNJREFUOMvN1T9Lw0AYx/EviLVFxFH8M3USgyAFoUsQ0UV8F6Ui4qCTbuJg34HgptBdUATrUoxiqYMgiOBoIcW9BVED+jgkntGm9i6CmN+Sg/vAcc89dwBd5Clzj6uZGg7LJAC62UFipEgKcmroaeZj/gpcIAhl5rE1M0cJQbiCOsIrs5h8WZ4R6j72yBrhcRo+dhE8bCOcoYng/hFOMxAXb/DAHTNxcCGo7JE5LqhjsW2KP6nDcGecCv1vRdC2eJQDLllooach2hbvIghvLJJgM0QHdeq8F0x/5ETRM4b0DonF7be+Pf+y4A4bZnETok4E/XG3xxR3WhasUWeLCg2OGYnXGP1MkPwnLRmJf3UN+RfgtBGe5MnHVQShxBQZzdgcIgjXsKSu/KZmXgKxBkmKsZ6bffoAelilQs3goauyTi+8A8mhgeQlxdNWAAAAAElFTkSuQmCC';
                const iconUnchecked = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAMgCAMAAADsrvZaAAACmlBMVEUAAAAAAAAAAAAAAABAQEAzMzMrKyskJCQgICAcHBwaGhoXFxcrKysnJyckJCQiIiIgICAeHh4cHBwbGxsmJiYkJCQjIyMhISEgICAfHx8dHR0cHBwkJCQjIyMiIiIhISEgICAfHx8eHh4kJCQjIyMiIiIhISEgICAfHx8eHh4kJCQjIyMiIiIhISEhISEgICAfHx8fHx8jIyMiIiIiIiIhISEgICAgICAfHx8jIyMjIyMiIiIhISEhISEfHx8iIiIiIiIhISEhISEgICAgICAfHx8iIiIiIiIiIiIhISEhISEgICAgICAiIiIiIiIhISEhISEhISEgICAgICAiIiIiIiIiIiIhISEhISEhISEgICAgICAiIiIiIiIhISEhISEhISEhISEgICAgICAiIiIhISEhISEgICAgICAgICAiIiIhISEgICAgICAhISEhISEgICAiIiIiIiIhISEhISEhISEhISEgICAgICAiIiIiIiIhISEhISEhISEhISEgICAiIiIiIiIhISEhISEhISEhISEhISEgICAiIiIhISEhISEgICAgICAiIiIhISEgICAgICAiIiIhISEhISEhISEhISEhISEgICAiIiIiIiIhISEhISEhISEhISEhISEiIiIhISEhISEhISEhISEhISEgICAiIiIhISEhISEhISEhISEhISEhISEgICAhISEhISEhISEhISEiIiIhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEiIiIhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISH///9lLeMnAAAA3HRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJScoKSorLC0uLzAxMjM0NTY3ODk6Ozw9PkFDREVGR0hJSktMTU5PUFJTVFVWV1hZWltcXV5fYGFiY2RlZmdoamttbm9wcnV2d3p8foCBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5ucnZ6foqWmp6ipqqusra6vsLGys7S2uLm6u7y9vr/AwcLDxMXGyMrMzc7P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OgZiIBiIgRgIWmIgaInoaInoaInoaInoaInoaInoaInoGIiBGIiBGIiBoCWioyWioyWioyWioyWioyWioyWiYyCiYyAGYiAYiIGgJaKjJaKjJaKjJaKjJaKjJaKjJaJjIAZiIAZiIAaCloiOloiOloiOloiOloiOloiOloiOgYiOgRiIgWAgBoKWiI6WiI6WiI6WiI6WiI6WiI6WiI6BGIiBGIiBGAhaYiBoiehoiehoiehoiehoiehoiegYiOgYiIEYiIEYiIGgJaKjJaKjJaKjJaKjJaKjJaKjJaJjIAaCgRiIgaAlBoKWiI6WiI6WiI6WiI6WiI6WiI6WiI6BGIiBGIiBGAhaIjpaIjpaIjpaIjpaIjpaIjpaIjoGYiAYiIEYCFpiIGiJ6GiJ6GiJ6GiJ6GiJ6GiJ6GiJ6BiIgRiIgRiIgaAloqMloqMloqMloqMloqMloqMlomMgomMgBmIgGIiBoCWioyWioyWioyWioyWioyWioyWiYyAGYiAGYiAGgpaIjpaIjpaIjpaIjpaIjpaIjpaIjoGIjoEYiIFgIAaCloiOloiOloiOloiOloiOloiOloiOgRiIgRiIgRgIWmIgaInoaInoaInoaInoaInoaInoGIjoGIiBGIiBGIiBoCWioyWioyWioyWioyWioyWioyWiYyAGgoEYiIGgJQaCloiOloiOloiOloiOloiOloiOloiOgRiIgRiIgRgIWiI6WiI6WiI6WiI6WiI6WiI6WiI6BmIgGIiBGAhaYiBoiehoiehoiehoiehoiehoiehoiegYiIEYiIEYiIGgJaKjJaKjJaKjJaKjJaKjJaKjJaJjIKJjIAZiIBiIgaAloqMloqMloqMloqMloqMloqMlomMgBmIgBmIgBoKWiI6WiI6WiI6WiI6WiI6WiI6WiI6BiI6BGIiBYCAGgpaIjpaIjpaIjpaIjpaIjpaIjpaIjoEYiIEYiIEYCFpiIGiJ6GiJ6GiJ6GiJ6GiJ6GiJ6BiI6BiIgRiIgRiIgaAloqMloqMloqMloqMloqMloqMlomMgBoKBGIiBoCUGgpaIjpaIjpaIjpaIjpaIjpaIjpaIjoEYiIEYiIEYCFoiOloiOloiOloiOloiOloiOloiOgZiIBiIgRgIWmIgaInoaInoaInoaInoaInoaInoaInoGIiBGIiBGIiBoCWioyWioyWi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';

                // const selectedUrgency = @json($selectedUrgency ?? []);
                const urgencyOptions = [
                    { label: 'Urgent', value: 'Urgent' },
                    { label: 'For Review', value: 'Review' },
                    { label: 'Please Comment', value: 'Comment' },
                    { label: 'Please Reply', value: 'Reply' },
                    { label: 'Please Recycle', value: 'Recycle' }
                ];

                const urgencyRow = urgencyOptions.map(opt => ({
                    columns: [
                        { image: urgencyList.includes(opt.value) ? iconChecked : iconUnchecked, width: 10, height: 10 },
                        { text: opt.label, fontSize: 9, margin: [4, 0, 0, 0] }
                    ]
                }));

                // Daftar pilihan "To" tetap urut 3 kolom
                const toOptions = [
                    'Marketing', 'Produksi', 'QAPD', 'MIS',
                    'Purchasing', 'Teknik', 'HRD & GA', 'Direksi',
                    'Accounting', 'PPIC', 'Exim'
                ];

                // Logo base64 (ganti dengan logo perusahaan kamu)
                const logoBase64 = "{{ $logo ?? '' }}";

                const toTableBody = [];
                for (let i = 0; i < toOptions.length; i += 3) {
                    toTableBody.push([
                        toOptions[i] ? {
                            columns: [
                                { image: toList.includes(toOptions[i]) ? iconChecked : iconUnchecked, width: 10, height: 10 },
                                { text: toOptions[i], fontSize: 10, margin: [4, 0, 0, 0] }
                            ]
                        } : { text: '' },
                        toOptions[i + 1] ? {
                            columns: [
                                { image: toList.includes(toOptions[i + 1]) ? iconChecked : iconUnchecked, width: 10, height: 10 },
                                { text: toOptions[i + 1], fontSize: 10, margin: [4, 0, 0, 0] }
                            ]
                        } : { text: '' },
                        toOptions[i + 2] ? {
                            columns: [
                                { image: toList.includes(toOptions[i + 2]) ? iconChecked : iconUnchecked, width: 10, height: 10 },
                                { text: toOptions[i + 2], fontSize: 10, margin: [4, 0, 0, 0] }
                            ]
                        } : { text: '' }
                    ]);
                }

                // Format tanggal
                function formatTanggalIndo(tgl) {
                    if (!tgl) return '';
                    const bulan = [
                        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                    ];
                    const d = new Date(tgl);
                    return `${d.getDate()} ${bulan[d.getMonth()]} ${d.getFullYear()}`;
                }

                function formatDeskripsi(text) {
                    if (!text) return [];

                    const lines = text.split('\n');
                    const formattedText = [];

                    lines.forEach(line => {
                        if (!line.trim()) {
                            formattedText.push({ text: ' ', fontSize: 10, margin: [0, 3, 0, 0] });
                            return;
                        }

                        const trimmed = line.trim();
                        const leadingSpaces = line.match(/^\s*/)[0].length;

                        const mainNumberMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
                        if (mainNumberMatch && leadingSpaces === 0) {
                            formattedText.push({
                                columns: [
                                    {
                                        text: mainNumberMatch[1] + '.',
                                        width: 20,
                                        fontSize: 10,
                                        margin: [0, 0, 0, 0]
                                    },
                                    {
                                        text: mainNumberMatch[2],
                                        width: '*',
                                        fontSize: 10,
                                        alignment: 'justify',
                                        margin: [0, 0, 0, 0],
                                        noWrap: false,
                                        preserveLeadingSpaces: false
                                    }
                                ],
                                margin: [0, 2, 0, 2],
                                unbreakable: false
                            });
                            return;
                        }

                        const subNumberMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
                        if (subNumberMatch && leadingSpaces > 0) {
                            formattedText.push({
                                columns: [
                                    { text: '', width: 20 },
                                    {
                                        text: subNumberMatch[1] + '.',
                                        width: 20,
                                        fontSize: 10,
                                        margin: [0, 0, 0, 0]
                                    },
                                    {
                                        text: subNumberMatch[2],
                                        width: '*',
                                        fontSize: 10,
                                        alignment: 'left',
                                        margin: [0, 0, 0, 0],
                                        noWrap: false
                                    }
                                ],
                                margin: [0, 2, 0, 2]
                            });
                            return;
                        }

                        if (leadingSpaces > 0) {
                            formattedText.push({
                                text: trimmed,
                                fontSize: 10,
                                alignment: 'left',
                                margin: [20, 2, 0, 2],
                                noWrap: false
                            });
                            return;
                        }

                        formattedText.push({
                            text: trimmed,
                            fontSize: 10,
                            alignment: 'justify',
                            margin: [0, 2, 0, 2],
                            noWrap: false,
                            preserveLeadingSpaces: false
                        });
                    });

                    return formattedText;
                }

                const docDefinition = {
                    pageSize: 'A4',
                    pageMargins: [40, 40, 40, 40],

                    content: [
                        {
                            table: {
                                widths: ['*'],
                                body: [
                                    // Header
                                    [
                                        {
                                            table: {
                                                widths: [250, '*'],
                                                body: [
                                                    [
                                                        {
                                                            columns: [
                                                                {
                                                                    image: logoBase64,
                                                                    width: 50,
                                                                    height: 30,
                                                                    margin: [0, 0, 10, 0]
                                                                },
                                                                {
                                                                    stack: [
                                                                        { text: 'PT MULTI SPUNINDO JAYA TBK', bold: true, fontSize: 14 },
                                                                        { text: 'Nonwovens Manufacture', fontSize: 10, margin: [0, 2, 0, 0] },
                                                                    ]
                                                                }
                                                            ],
                                                            margin: [0, 0, 0, 10]
                                                        },
                                                        {
                                                            table: {
                                                                widths: ['*'],
                                                                body: [
                                                                    [
                                                                        {
                                                                            stack: [
                                                                                { text: 'Internal Memo', alignment: 'center', bold: true, fontSize: 16, margin: [0, 4, 0, 4] },
                                                                                { canvas: [{ type: 'line', x1: 0, y1: 0, x2: 230, y2: 0, lineWidth: 1, lineColor: '#000' }], margin: [0, 2, 0, 2] },
                                                                                {
                                                                                    columns: [
                                                                                        { text: 'From :', fontSize: 9, width: 35, margin: [0, 2, 0, 2] },
                                                                                        { text: 'HRGA', fontSize: 9, margin: [0, 2, 0, 2] }
                                                                                    ]
                                                                                },
                                                                            ]
                                                                        }
                                                                    ]
                                                                ]
                                                            },
                                                            layout: 'noBorders',
                                                            margin: [0, 0, 0, 0]
                                                        }
                                                    ]
                                                ]
                                            },
                                            layout: {
                                                hLineWidth: function (i, node) { return 0; },
                                                vLineWidth: function (i, node) { return i === 1 ? 1 : 0; },
                                                hLineColor: function (i, node) { return '#000'; },
                                                vLineColor: function (i, node) { return '#000'; }
                                            },
                                            margin: [0, 0, 0, 0]
                                        }
                                    ],
                                    // To
                                    [
                                        {
                                            table: {
                                                widths: ['33%', '33%', '34%'],
                                                body: [
                                                    [
                                                        { text: 'To', bold: true, colSpan: 3, alignment: 'left', margin: [0, 0, 0, 4] },
                                                        {},
                                                        {}
                                                    ],
                                                    ...toTableBody
                                                ]
                                            },
                                            layout: {
                                                hLineWidth: function (i, node) { return 0; },
                                                vLineWidth: function (i, node) { return 0; }
                                            },
                                            margin: [0, 0, 0, 0]
                                        }
                                    ],
                                    // Date & No
                                    [
                                        {
                                            table: {
                                                widths: ['auto', '*', 'auto', '*'],
                                                body: [
                                                    [
                                                        { text: 'Date', bold: true }, { text: formatTanggalIndo(tanggal) },
                                                        { text: 'No', bold: true }, { text: noSurat }
                                                    ],
                                                    [
                                                        { text: 'Subject', bold: true },
                                                        { text: subject, colSpan: 3 },
                                                        {}, {}
                                                    ]
                                                ]
                                            },
                                            margin: [0, 0, 0, 0]
                                        }
                                    ],
                                    [
                                        {
                                            columns: urgencyRow,
                                            margin: [0, 0, 0, 10]
                                        }
                                    ],
                                    [
                                        {
                                            stack: [
                                                { text: 'Dengan Hormat,', margin: [0, 0, 0, 6], fontSize: 10 },
                                                {
                                                    table: {
                                                        widths: ['*'],
                                                        body: [
                                                            [
                                                                {
                                                                    stack: formatDeskripsi(deskripsi),
                                                                    margin: [4, 4, 4, 4],
                                                                    style: 'breakWord'
                                                                }
                                                            ]
                                                        ],
                                                        heights: [412]
                                                    },
                                                    layout: 'noBorders',
                                                    margin: [0, 0, 0, 0]
                                                }
                                            ],
                                            margin: [0, 0, 0, 0]
                                        }
                                    ],
                                    [
                                        {
                                            table: {
                                                widths: ['*', 1, '*', '*'],
                                                body: [
                                                    [
                                                        { text: 'Issued By,\nDiajukan oleh,', alignment: 'center', fontSize: 9 },
                                                        { text: '', rowSpan: 2 },
                                                        { text: 'Received By,\nDisetujui oleh,', alignment: 'center', colSpan: 2, fontSize: 9 },
                                                        {}
                                                    ],
                                                    [
                                                        { text: '\n\n\n\nYohanes Bayu DK\nHRGA Head', alignment: 'center', fontSize: 9 },
                                                        {},
                                                        { text: '\n\n\n\nTeguh Luntoro\nGM Commercial', alignment: 'center', fontSize: 9 },
                                                        { text: '\n\n\n\nSasonko Basuki\nDirektur Utama', alignment: 'center', fontSize: 9 }
                                                    ]
                                                ]
                                            },
                                            layout: {
                                                hLineWidth: function (i, node) { return 0; },
                                                vLineWidth: function (i, node) { return i === 1 ? 1 : 0; },
                                                hLineColor: function (i, node) { return '#000'; },
                                                vLineColor: function (i, node) { return '#000'; }
                                            },
                                            margin: [0, 0, 0, 0]
                                        }
                                    ]
                                ]
                            },
                            layout: {
                                hLineWidth: function (i, node) { return 1; },
                                vLineWidth: function (i, node) { return 1; },
                                hLineColor: function (i, node) { return '#000'; },
                                vLineColor: function (i, node) { return '#000'; },
                            },
                            margin: [0, 0, 0, 0]
                        },
                        {
                            text: 'B00.MEM. 002.0.3',
                            fontSize: 8,
                            margin: [0, 2, 0, 0],
                            alignment: 'left'
                        }
                    ],
                    defaultStyle: {
                        fontSize: 10,
                        preserveLeadingSpaces: false,
                        noWrap: false
                    },
                    styles: {
                        breakWord: {
                            noWrap: false,
                            preserveLeadingSpaces: false,

                        }
                    }
                };

                pdfMake.createPdf(docDefinition).open().catch(error => {
                    console.error('Error generating PDF:', error);
                });
            });
        });

        function confirmDelete(event, name) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Apakah Anda Yakin ingin Menghapus Data ${name}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
            return false;
        }
    </script>
@endsection