@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                        </button>
                        @if (isset($authorize) && $authorize->edit == '1')
                            @php
                                $status = $list->status ?? 'entry';
                                $isDisabled = $status !== 'entry';
                            @endphp
                            @if ($isDisabled)
                                <span class="btn btn-warning mb-0 disabled"
                                    title="Edit tidak tersedia untuk status {{ ucfirst($status) }}"
                                    style="cursor: not-allowed; opacity: 0.6; margin-left: 5px;">
                                    <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span>
                                </span>
                            @else
                                <a href="{{ URL::to($url_menu . '/edit/' . encrypt($list->id)) }}"
                                    class="btn btn-warning mb-0" style="margin-left: 5px;">
                                    <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span>
                                </a>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div id="extmem-form">
                    {{-- PDF Preview Section --}}
                    <div class="card mt-4" id="pdf-preview-section">
                        <div class="card-header">
                            <h5 class="mb-0">PDF Preview</h5>
                        </div>
                        <div class="card-body" style="padding: 0;">
                            {{-- Loading indicator --}}
                            <div id="pdf-loading" style="text-align: center; padding: 40px;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">Generating PDF preview...</p>
                            </div>
                            {{-- PDF Preview iframe --}}
                            <iframe id="pdf-preview-iframe"
                                style="width: 100%; height: 80vh; border: none; display: none;"></iframe>
                        </div>
                    </div>

                    {{-- Print Button --}}
                    <div class="card mt-4">
                        <div class="card-footer text-center">
                            <button type="button" class="btn btn-success" id="btn-print-pdf">
                                <i class="fas fa-print me-1"></i>
                                <span class="font-weight-bold">Print PDF</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript">
        // Global variable untuk menyimpan PDF blob URL
        let pdfBlobUrl = null;

        $(document).ready(function() {
            // Generate PDF preview secara otomatis saat halaman load
            generatePDFForPreview();

            // Button handler untuk print PDF
            $('#btn-print-pdf').on('click', function(e) {
                handlePrintPDF(e);
            });
        });

        // Handle Print PDF
        async function handlePrintPDF(e) {
            e.preventDefault();

            // Alert konfirmasi sebelum print PDF
            if (typeof Swal !== 'undefined') {
                const confirmResult = await Swal.fire({
                    title: 'Konfirmasi Print PDF',
                    text: 'Apakah Anda yakin ingin print PDF?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Print',
                    cancelButtonText: 'Batal'
                });
                if (!confirmResult.isConfirmed) return;
            }

            const currentStatus = @json($list->status ?? 'entry');
            const id = @json(encrypt($list->id));

            if (currentStatus === 'entry') {
                if (typeof Swal !== 'undefined') {
                    const result = await Swal.fire({
                        title: 'Konfirmasi',
                        text: 'Apakah Anda yakin ingin print PDF dan mengubah status menjadi Sent?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#28a745',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Print & Update',
                        cancelButtonText: 'Batal'
                    });
                    if (!result.isConfirmed) return;
                }

                try {
                    const response = await $.ajax({
                        url: '{{ URL::to('/extmem/update-status') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id
                        },
                        dataType: 'json'
                    });
                    if (!response.success) {
                        alert('Gagal update status: ' + (response.message || 'Unknown error'));
                        return;
                    }
                } catch (error) {
                    console.error('Error update status:', error);
                    alert('Gagal update status.');
                    return;
                }
            }

            // Print menggunakan blob URL yang sama dengan preview
            try {
                if (pdfBlobUrl) {
                    // Buka PDF di window baru untuk print
                    const printWindow = window.open(pdfBlobUrl);
                    if (printWindow) {
                        printWindow.onload = function() {
                            printWindow.print();
                        };
                    }
                } else {
                    // Jika belum ada blob, generate dulu
                    generatePDFForPreview();
                    // Tunggu sampai PDF selesai di-generate
                    const checkBlob = setInterval(() => {
                        if (pdfBlobUrl) {
                            clearInterval(checkBlob);
                            const printWindow = window.open(pdfBlobUrl);
                            if (printWindow) {
                                printWindow.onload = function() {
                                    printWindow.print();
                                };
                            }
                        }
                    }, 500);
                    // Timeout setelah 10 detik
                    setTimeout(() => {
                        clearInterval(checkBlob);
                        if (!pdfBlobUrl) {
                            alert('Gagal generate PDF untuk print. Silakan coba lagi.');
                        }
                    }, 10000);
                }

                // Reload setelah 2 detik jika status berubah
                if (currentStatus === 'entry') {
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                }
            } catch (error) {
                console.error('Error printing PDF:', error);
                alert('Gagal print PDF.');
            }
        }

        // Helper function: Load logo and convert to base64
        function loadLogoAsBase64(logoPath, callback) {
            const img = new Image();
            img.crossOrigin = 'anonymous';
            img.onload = function() {
                try {
                    const canvas = document.createElement('canvas');
                    canvas.width = this.width;
                    canvas.height = this.height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(this, 0, 0);
                    callback(canvas.toDataURL('image/png'));
                } catch (e) {
                    console.warn('Error converting logo to base64:', e);
                    callback(null);
                }
            };
            img.onerror = function() {
                console.warn('Error loading logo:', logoPath);
                callback(null);
            };
            img.src = logoPath;
        }

        // Build docDefinition
        function buildDocDefinition(logoContent) {
            const details = @json($details ?? []);
            let actions = @json($list->actions ? (is_string($list->actions) ? json_decode($list->actions, true) : $list->actions) : []);

            if (typeof actions === 'string') {
                try {
                    actions = JSON.parse(actions);
                } catch (e) {
                    actions = [];
                }
            }
            if (!Array.isArray(actions)) actions = [];
            if (!Array.isArray(details)) details = [];

            const date = @json($list->date ?? '');
            const memoNo = @json($list->memo_no ?? '');
            const from = @json($list->from ?? '');
            const supplier = @json($list->supplier_name ?? '');
            const supplierAttn = @json($list->supplier_attn ?? '');
            const supplierAddress = @json($list->supplier_address ?? '');
            const supplierPhone = @json($list->supplier_phone ?? '');
            const supplierFax = @json($list->supplier_fax ?? '');
            const subject = @json($list->subject ?? 'Matching Color');

            function createCheckboxCanvas(checked) {
                try {
                    const canvas = document.createElement('canvas');
                    const size = 14;
                    canvas.width = size;
                    canvas.height = size;
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, size, size);
                    ctx.strokeStyle = '#000000';
                    ctx.lineWidth = 1;
                    ctx.strokeRect(0.5, 0.5, size - 1, size - 1);
                    if (checked) {
                        ctx.strokeStyle = '#000000';
                        ctx.lineWidth = 2;
                        ctx.lineCap = 'round';
                        ctx.lineJoin = 'round';
                        ctx.beginPath();
                        ctx.moveTo(3, size / 2);
                        ctx.lineTo(size / 2 - 1, size - 4);
                        ctx.lineTo(size - 3, 3);
                        ctx.stroke();
                    }
                    return canvas.toDataURL('image/png');
                } catch (e) {
                    return checked ? '[X]' : '[ ]';
                }
            }

            const actionOptions = [{
                    label: '    Urgent',
                    value: 'Urgent'
                },
                {
                    label: '    For Review',
                    value: 'For Review'
                },
                {
                    label: '    Please Comment',
                    value: 'Please Comment'
                },
                {
                    label: '    Please Reply',
                    value: 'Please Reply'
                },
                {
                    label: '    Please Recycle',
                    value: 'Please Recycle'
                }
            ];

            const actionsRow = actionOptions.map(opt => {
                const isChecked = actions.includes(opt.value);
                const checkboxImage = createCheckboxCanvas(isChecked);
                if (checkboxImage.startsWith('data:')) {
                    return {
                        columns: [{
                                image: checkboxImage,
                                width: 14,
                                height: 14,
                                margin: [0, 0, 4, 0]
                            },
                            {
                                text: opt.label,
                                fontSize: 10,
                                margin: [0, 0, 0, 0]
                            }
                        ]
                    };
                } else {
                    return {
                        columns: [{
                                text: checkboxImage,
                                width: 15,
                                fontSize: 10,
                                margin: [0, 0, 4, 0]
                            },
                            {
                                text: opt.label,
                                fontSize: 10,
                                margin: [0, 0, 0, 0]
                            }
                        ]
                    };
                }
            });

            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);
                const day = String(d.getDate()).padStart(2, '0');
                return `${day} ${bulan[d.getMonth()]} ${d.getFullYear()}`;
            }

            function getFormattedLines(detailsArray) {
                if (!detailsArray || detailsArray.length === 0) return [];
                return detailsArray.map((detail, index) => {
                    let requestNo, customerColorCode, basicWeight, resinType, product;
                    if (typeof detail === 'object') {
                        requestNo = detail.request_no || detail;
                        customerColorCode = detail.customer_color_code || '-';
                        basicWeight = detail.basic_weight || '-';
                        resinType = detail.resin_type || '-';
                        product = detail.product || '-';
                    } else {
                        requestNo = detail;
                        customerColorCode = '-';
                        basicWeight = '-';
                        resinType = '-';
                        product = '-';
                    }
                    return (index + 1) + '. ' + customerColorCode + ' ( ' +
                        basicWeight + ' Gsm ) ' + requestNo + ' - ' + resinType + ', ' + product;
                });
            }

            // Hitung estimasi baris visual riil per kolom
            function countDetailLines(detailsArray) {
                const lines = getFormattedLines(detailsArray);
                if (lines.length === 0) return 0;
                if (lines.length <= 5) {
                    let count = 0;
                    lines.forEach(line => {
                        count += Math.max(1, Math.ceil((line || '').length / 85));
                    });
                    return count;
                } else {
                    const splitIndex = Math.ceil(lines.length / 2);
                    const leftLines = lines.slice(0, splitIndex);
                    const rightLines = lines.slice(splitIndex);

                    let leftTotal = 0;
                    leftLines.forEach(line => {
                        leftTotal += Math.max(1, Math.ceil((line || '').length / 42));
                    });

                    let rightTotal = 0;
                    rightLines.forEach(line => {
                        rightTotal += Math.max(1, Math.ceil((line || '').length / 42));
                    });

                    return Math.max(leftTotal, rightTotal);
                }
            }

            function formatBodyText(detailsArray, fromName) {
                if (!detailsArray || detailsArray.length === 0) return [];
                const intro = 'We have a new inquiry for color matching. There are ' +
                    detailsArray.length + ' color' + (detailsArray.length > 1 ? 's' : '') +
                    ' which the resin base is :';
                const lines = getFormattedLines(detailsArray);
                let content = [{
                    text: intro,
                    fontSize: 10,
                    margin: [0, 0, 0, 6]
                }];

                if (lines.length <= 5) {
                    lines.forEach(line => {
                        content.push({
                            text: line,
                            fontSize: 10,
                            margin: [0, 2, 0, 2]
                        });
                    });
                } else {
                    // >5 line: 2 kolom independen menggunakan stack untuk menghilangkan gap vertikal antar item
                    const splitIndex = Math.ceil(lines.length / 2);
                    const leftLines = lines.slice(0, splitIndex);
                    const rightLines = lines.slice(splitIndex);

                    const leftStack = leftLines.map(line => ({
                        text: line,
                        fontSize: 9,
                        margin: [4, 3, 4, 3]
                    }));

                    const rightStack = rightLines.map(line => ({
                        text: line,
                        fontSize: 9,
                        margin: [4, 3, 4, 3]
                    }));

                    content.push({
                        table: {
                            widths: ['*', '*'],
                            body: [
                                [{
                                        stack: leftStack
                                    },
                                    {
                                        stack: rightStack
                                    }
                                ]
                            ]
                        },
                        layout: {
                            hLineWidth: () => 0,
                            vLineWidth: (i) => i === 1 ? 0.5 : 0,
                            hLineColor: () => '#000',
                            vLineColor: () => '#000',
                            paddingLeft: () => 0,
                            paddingRight: () => 0,
                            paddingTop: () => 0,
                            paddingBottom: () => 0,
                        },
                        margin: [0, 0, 0, 8]
                    });
                }

                let closing =
                    'Please kindly make a matching color for these colors and send the samples for our reference.\n' +
                    'Please kindly advise the price and feeding ratio once it was available.\n' +
                    'We hope that we could receive the sample and price information as soon as possible since our customer were waiting.\n\n' +
                    'We are looking forward to receiving your soon reply.\n' +
                    'Thank you for your kind attention and cooperation.\n';

                if (fromName) {
                    closing += '\nBest regards,\n' + fromName + '\n';
                }

                return content.concat(closing.split('\n').map(line => {
                    if (!line.trim()) {
                        return {
                            text: ' ',
                            fontSize: 10,
                            margin: [0, 3, 0, 0]
                        };
                    }
                    return {
                        text: line,
                        fontSize: 10,
                        alignment: 'justify',
                        margin: [0, 2, 0, 2]
                    };
                }));
            }

            const noPad = {
                paddingLeft: () => 0,
                paddingRight: () => 0,
                paddingTop: () => 0,
                paddingBottom: () => 0,
            };

            // Baris tanda tangan (Issued by & Received by)
            const signatureBoxRow = [{
                table: {
                    widths: ['*', 100, 100],
                    heights: [30, 60],
                    body: [
                        [{
                                text: '',
                                rowSpan: 2,
                                border: [false, false, true, false]
                            },
                            {
                                text: 'Issued by',
                                alignment: 'center',
                                fontSize: 12,
                                border: [false, false, true, false]
                            },
                            {
                                text: 'Received by',
                                alignment: 'center',
                                fontSize: 12,
                                border: [false, false, false, false]
                            }
                        ],
                        [{},
                            {
                                text: from || '',
                                alignment: 'center',
                                fontSize: 12,
                                margin: [0, 30, 0, 0],
                                border: [true, false, true, false]
                            },
                            {
                                text: '',
                                alignment: 'center',
                                fontSize: 14,
                                margin: [0, 30, 0, 0],
                                border: [true, false, false, false]
                            }
                        ]
                    ]
                },
                layout: {
                    paddingLeft: () => 0,
                    paddingRight: () => 0,
                    paddingTop: () => 6,
                    paddingBottom: () => 6,
                    hLineWidth: () => 1,
                    vLineWidth: () => 1,
                },
                margin: [0, 0, 0, 0],
            }];

            // Fokuskan untuk 1 lembar dahulu.
            // Hanya jika baris visual melebihi kapasitas 1 halaman (>7 baris / ~14-16 warna), baru dipotong ke halaman 2.
            const visualLines = countDetailLines(details);
            const isMultiPage = visualLines > 10;

            // Body tabel halaman 1
            const page1TableBody = [
                // KOP SURAT
                [{
                    columns: [
                        // KIRI
                        {
                            width: '*',
                            table: {
                                widths: ['*'],
                                body: [
                                    [{
                                        border: [false, false, true, false],
                                        stack: [{
                                            table: {
                                                widths: ['*'],
                                                body: [
                                                    [{
                                                        columns: [
                                                            logoContent ?
                                                            logoContent : null,
                                                            {
                                                                stack: [{
                                                                        text: 'PT MULTI SPUNINDO JAYA',
                                                                        alignment: 'center',
                                                                        bold: true,
                                                                        fontSize: 14
                                                                    },
                                                                    {
                                                                        text: 'Nonwovens Manufacturer',
                                                                        alignment: 'center',
                                                                        bold: true,
                                                                        fontSize: 10,
                                                                        italics: true,
                                                                        margin: [
                                                                            0,
                                                                            0,
                                                                            0,
                                                                            0
                                                                        ]
                                                                    }
                                                                ],
                                                                margin: [0, 0, 0, 0]
                                                            }
                                                        ],
                                                        border: [false, false, false,
                                                            true
                                                        ],
                                                        margin: [0, 0, 0, 0]
                                                    }]
                                                ]
                                            },
                                            layout: {
                                                paddingLeft: () => 0,
                                                paddingRight: () => 0,
                                                paddingTop: () => 5,
                                                paddingBottom: () => 5,
                                            },
                                            margin: [0, 0, 0, 0]
                                        }, {
                                            columns: [{
                                                width: 45,
                                                text: 'From    :',
                                                fontSize: 10,
                                                margin: [5, 6, 0, 0]
                                            }, {
                                                table: {
                                                    widths: ['*'],
                                                    body: [
                                                        [{
                                                            text: (from || ''),
                                                            border: [false,
                                                                false,
                                                                false, true
                                                            ],
                                                            fontSize: 10
                                                        }]
                                                    ]
                                                },
                                                layout: {
                                                    paddingLeft: () => 0,
                                                    paddingRight: () => 0,
                                                    paddingTop: () => 5,
                                                    paddingBottom: () => 5,
                                                },
                                                margin: [0, 0, 0, 0]
                                            }],
                                            margin: [0, 0, 0, 0]
                                        }],
                                        margin: [0, 0, 0, 0]
                                    }]
                                ]
                            },
                            layout: {
                                paddingLeft: () => 0,
                                paddingRight: () => 0,
                                paddingTop: () => 5,
                                paddingBottom: () => 15,
                            },
                            margin: [0, 0, 0, 0],
                        },
                        // KANAN
                        {
                            width: '*',
                            table: {
                                widths: ['*'],
                                body: [
                                    [{
                                        border: [false, false, false, false],
                                        stack: [{
                                            table: {
                                                widths: ['*'],
                                                body: [
                                                    [{
                                                        text: 'External Memo',
                                                        alignment: 'center',
                                                        bold: true,
                                                        fontSize: 14,
                                                        border: [false, false, false,
                                                            true
                                                        ]
                                                    }]
                                                ]
                                            },
                                            layout: {
                                                paddingLeft: () => 0,
                                                paddingRight: () => 0,
                                                paddingTop: () => 5,
                                                paddingBottom: () => 5,
                                            },
                                            margin: [0, 0, 0, 0]
                                        }, {
                                            columns: [{
                                                width: 45,
                                                text: 'Date',
                                                fontSize: 10,
                                                margin: [5, 6, 0, 0]
                                            }, {
                                                table: {
                                                    widths: ['*'],
                                                    body: [
                                                        [{
                                                            text: formatTanggalIndo(
                                                                date),
                                                            fontSize: 10
                                                        }]
                                                    ]
                                                },
                                                margin: [0, 5, 0, 5]
                                            }],
                                            margin: [0, 0, 5, 0]
                                        }, {
                                            columns: [{
                                                width: 45,
                                                text: 'Number',
                                                fontSize: 10,
                                                margin: [5, 6, 0, 0]
                                            }, {
                                                table: {
                                                    widths: ['*'],
                                                    body: [
                                                        [{
                                                            text: memoNo,
                                                            fontSize: 10
                                                        }]
                                                    ]
                                                },
                                                margin: [0, 5, 0, 5]
                                            }],
                                            margin: [0, 0, 5, 0]
                                        }],
                                        margin: [0, 0, 0, 0]
                                    }]
                                ]
                            },
                            layout: noPad,
                            margin: [0, 0, 0, 0],
                        }
                    ],
                    layout: noPad,
                    margin: [0, 0, 0, 0],
                }],
                // To, Attn, Address, Phone, Fax
                [{
                    table: {
                        widths: ['auto', '*'],
                        body: [
                            [{
                                text: 'To',
                                bold: true,
                                fontSize: 10
                            }, {
                                stack: [{
                                    text: ': ' + (supplier || ''),
                                    fontSize: 10
                                }, {
                                    canvas: [{
                                        type: 'line',
                                        x1: 0,
                                        y1: 0,
                                        x2: 450,
                                        y2: 0,
                                        lineWidth: 1,
                                        lineColor: '#000'
                                    }],
                                    margin: [0, 2, 0, 0]
                                }]
                            }],
                            [{
                                text: 'Attn.',
                                bold: true,
                                fontSize: 10
                            }, {
                                stack: [{
                                    text: ': ' + (supplierAttn || ''),
                                    fontSize: 10
                                }, {
                                    canvas: [{
                                        type: 'line',
                                        x1: 0,
                                        y1: 0,
                                        x2: 450,
                                        y2: 0,
                                        lineWidth: 1,
                                        lineColor: '#000'
                                    }],
                                    margin: [0, 2, 0, 0]
                                }]
                            }],
                            [{
                                text: 'Address',
                                bold: true,
                                fontSize: 10
                            }, {
                                stack: [{
                                    text: ': ' + (supplierAddress || ''),
                                    fontSize: 10
                                }, {
                                    canvas: [{
                                        type: 'line',
                                        x1: 0,
                                        y1: 0,
                                        x2: 450,
                                        y2: 0,
                                        lineWidth: 1,
                                        lineColor: '#000'
                                    }],
                                    margin: [0, 2, 0, 0]
                                }]
                            }],
                            [{
                                text: 'Phone',
                                bold: true,
                                fontSize: 10
                            }, {
                                table: {
                                    widths: ['*', '*'],
                                    body: [
                                        [{
                                            stack: [{
                                                text: ': ' + (supplierPhone || ''),
                                                fontSize: 10
                                            }, {
                                                canvas: [{
                                                    type: 'line',
                                                    x1: 0,
                                                    y1: 0,
                                                    x2: 175,
                                                    y2: 0,
                                                    lineWidth: 1,
                                                    lineColor: '#000'
                                                }],
                                                margin: [0, 2, 0, 0]
                                            }]
                                        }, {
                                            table: {
                                                widths: ['auto', '*'],
                                                body: [
                                                    [{
                                                        text: 'Fax',
                                                        bold: true,
                                                        fontSize: 10
                                                    }, {
                                                        stack: [{
                                                            text: ': ' + (
                                                                supplierFax ||
                                                                ''),
                                                            fontSize: 10
                                                        }, {
                                                            canvas: [{
                                                                type: 'line',
                                                                x1: 0,
                                                                y1: 0,
                                                                x2: 190,
                                                                y2: 0,
                                                                lineWidth: 1,
                                                                lineColor: '#000'
                                                            }],
                                                            margin: [0, 2, 0, 0]
                                                        }]
                                                    }]
                                                ]
                                            },
                                            layout: 'noBorders',
                                            margin: [0, 0, 0, 0]
                                        }]
                                    ]
                                },
                                layout: 'noBorders',
                                margin: [0, 0, 0, 0]
                            }]
                        ]
                    },
                    layout: 'noBorders',
                    margin: [5, 0, 0, 0]
                }],
                // Subject
                [{
                    table: {
                        widths: ['auto', '*'],
                        body: [
                            [{
                                text: 'Subject',
                                bold: true,
                                fontSize: 10
                            }, {
                                table: {
                                    widths: ['*'],
                                    body: [
                                        [{
                                            text: (subject || '') + '\n',
                                            fontSize: 10
                                        }]
                                    ]
                                },
                                layout: {
                                    hLineWidth: () => 1,
                                    vLineWidth: () => 1,
                                    hLineColor: () => '#000',
                                    vLineColor: () => '#000'
                                },
                                margin: [0, 0, 5, 0]
                            }]
                        ]
                    },
                    layout: 'noBorders',
                    margin: [5, 5, 0, 5]
                }],
                // Actions
                [{
                    columns: actionsRow,
                    margin: [5, 4, 0, 10]
                }],
                // Body Text
                [{
                    stack: [{
                        text: '\nDear ' + (supplierAttn ? 'Mr. ' + supplierAttn : 'Sir/Madam') + ',\n\n',
                        margin: [0, 0, 0, 6],
                        fontSize: 10
                    }, {
                        stack: formatBodyText(details, from),
                        margin: [0, 0, 0, 0]
                    }],
                    margin: [5, 0, 5, 0]
                }]
            ];

            // Jika muat dalam 1 lembar, taruh Issued by & Received by di dalam kotak halaman 1
            if (!isMultiPage) {
                page1TableBody.push(signatureBoxRow);
            }

            const docContent = [{
                table: {
                    widths: ['*'],
                    body: page1TableBody
                },
                layout: {
                    hLineWidth: (i, node) => 1,
                    vLineWidth: (i, node) => 1,
                    hLineColor: (i, node) => '#000',
                    vLineColor: (i, node) => '#000',
                    paddingLeft: () => 0,
                    paddingRight: () => 0,
                    paddingTop: () => 0,
                    paddingBottom: () => 0,
                },
                margin: [0, 0, 0, 0]
            }];

            // Jika tidak cukup dalam 1 lembar, baru buat Issued by & Received by satu kotak di halaman selanjutnya
            if (isMultiPage) {
                docContent.push({
                    table: {
                        widths: ['*'],
                        body: [
                            signatureBoxRow
                        ]
                    },
                    layout: {
                        hLineWidth: (i, node) => 1,
                        vLineWidth: (i, node) => 1,
                        hLineColor: (i, node) => '#000',
                        vLineColor: (i, node) => '#000',
                        paddingLeft: () => 0,
                        paddingRight: () => 0,
                        paddingTop: () => 0,
                        paddingBottom: () => 0,
                    },
                    pageBreak: 'before',
                    margin: [0, 0, 0, 0]
                });
            }

            return {
                pageSize: 'A4',
                pageMargins: [40, 40, 40, 40],
                content: docContent,
                footer: function(currentPage, pageCount) {
                    return {
                        margin: [20, 0, 20, 10],
                        stack: [{
                                canvas: [{
                                    type: 'line',
                                    x1: 0,
                                    y1: 0,
                                    x2: 9999,
                                    y2: 0,
                                    lineWidth: 1
                                }],
                                margin: [0, 0, 0, 6]
                            },
                            {
                                columns: [{
                                    text: 'B00.XMM.003.0.3',
                                    fontSize: 10,
                                    alignment: 'left'
                                }, {
                                    text: `Page ${currentPage} of ${pageCount}`,
                                    fontSize: 10,
                                    alignment: 'right'
                                }]
                            }
                        ]
                    };
                },
                defaultStyle: {
                    fontSize: 10,
                    preserveLeadingSpaces: false,
                    noWrap: false,
                    alignment: 'justify'
                }
            };
        }

        // Function untuk generate PDF
        function generatePDF(logoContent, mode = 'preview') {
            const docDefinition = buildDocDefinition(logoContent);

            try {
                if (mode === 'preview') {
                    // Generate PDF sebagai blob untuk preview
                    pdfMake.createPdf(docDefinition).getBlob(function(blob) {
                        if (pdfBlobUrl) {
                            URL.revokeObjectURL(pdfBlobUrl); // Hapus blob URL lama
                        }
                        pdfBlobUrl = URL.createObjectURL(blob);

                        $('#pdf-preview-iframe').attr('src', pdfBlobUrl + '#toolbar=0');
                        $('#pdf-loading').hide();
                        $('#pdf-preview-iframe').show();
                    });
                } else {
                    // Create PDF and open it untuk print
                    pdfMake.createPdf(docDefinition).open();
                }
            } catch (error) {
                console.error('Error generating PDF:', error);
                if (mode === 'preview') {
                    $('#pdf-loading').html('<p class="text-danger">Error generating PDF: ' + error.message + '</p>');
                } else {
                    alert('Terjadi kesalahan saat membuat PDF: ' + (error.message || 'Unknown error'));
                }
            }
        }

        // Function untuk preview PDF
        function generatePDFForPreview() {
            if (typeof pdfMake === 'undefined') {
                alert('PDF library tidak ditemukan. Pastikan pdfMake sudah ter-load.');
                return;
            }

            $('#pdf-loading').show();
            $('#pdf-preview-iframe').hide();

            const logoPath = '{{ asset('storage/icon.png') }}';
            loadLogoAsBase64(logoPath, function(logoBase64) {
                let logoContent = null;
                if (logoBase64) {
                    logoContent = {
                        image: logoBase64,
                        width: 50,
                        height: 30,
                        margin: [0, 0, 10, 0]
                    };
                }
                generatePDF(logoContent, 'preview');
            });
        }

        // Function compatibility jika generatePDFForPreviewLogic atau generateAndPrintPDF dipanggil
        function generatePDFForPreviewLogic() {
            generatePDFForPreview();
        }

        function generateAndPrintPDF() {
            if (typeof pdfMake === 'undefined') {
                alert('PDF library tidak ditemukan. Pastikan pdfMake sudah ter-load.');
                return;
            }
            const logoPath = '{{ asset('storage/icon.png') }}';
            loadLogoAsBase64(logoPath, function(logoBase64) {
                let logoContent = null;
                if (logoBase64) {
                    logoContent = {
                        image: logoBase64,
                        width: 50,
                        height: 30,
                        margin: [0, 0, 10, 0]
                    };
                }
                generatePDF(logoContent, 'print');
            });
        }
    </script>
@endpush