@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@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">
                                @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">
                                    @if ($authorize->add == '1')
                                        <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>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>Date</th>
                                            <th>Memo No</th>
                                            <th>Supplier</th>
                                            <th>Status</th>
                                            <th width="110">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $index => $item)
                                            @php
                                                $actions = $item->actions
                                                    ? (is_string($item->actions)
                                                        ? json_decode($item->actions, true)
                                                        : $item->actions)
                                                    : [];
                                                $actions = is_array($actions) ? $actions : [];
                                                $details = DB::table('external_memo_details')
                                                    ->leftJoin(
                                                        'request_inq',
                                                        'external_memo_details.request_no',
                                                        '=',
                                                        'request_inq.request_no',
                                                    )
                                                    ->where('external_memo_details.external_memo_id', $item->id)
                                                    ->select(
                                                        'external_memo_details.request_no',
                                                        'request_inq.customer_color_code',
                                                        'request_inq.basic_weight',
                                                    )
                                                    ->get()
                                                    ->map(function ($detail) {
                                                        return [
                                                            'request_no' => $detail->request_no,
                                                            'customer_color_code' =>
                                                                $detail->customer_color_code ?? '-',
                                                            'basic_weight' => $detail->basic_weight ?? '-',
                                                        ];
                                                    })
                                                    ->toArray();
                                            @endphp
                                            <tr class="{{ $item->isactive == '0' ? 'text-muted' : '' }}"
                                                data-id="{{ encrypt($item->id) }}" data-date="{{ $item->date }}"
                                                data-memo-no="{{ $item->memo_no }}"
                                                data-status="{{ $item->status ?? 'entry' }}"
                                                data-from="{{ $item->from ?? '' }}"
                                                data-supplier="{{ $item->supplier_name ?? '' }}"
                                                data-supplier-attn="{{ $item->supplier_attn ?? '' }}"
                                                data-supplier-address="{{ $item->supplier_address ?? '' }}"
                                                data-supplier-phone="{{ $item->supplier_phone ?? '' }}"
                                                data-supplier-fax="{{ $item->supplier_fax ?? '' }}"
                                                data-subject="{{ $item->subject }}"
                                                data-actions="{{ json_encode($actions) }}"
                                                data-details="{{ json_encode($details) }}">
                                                <td>{{ $index + 1 }}
                                                </td>
                                                <td>{{ date('d/m/Y', strtotime($item->date)) }}</td>
                                                <td>{{ $item->memo_no }}</td>
                                                <td>{{ $item->supplier_name ?? '-' }}</td>
                                                <td>
                                                    @php
                                                        $status = $item->status ?? 'entry';
                                                        $statusLabels = [
                                                            'entry' => 'Entry',
                                                            'sent' => 'Sent',
                                                            'received' => 'Received',
                                                            'completed' => 'Completed',
                                                            'underreview' => 'Under Review',
                                                        ];
                                                        $statusColors = [
                                                            'entry' => 'secondary',
                                                            'sent' => 'info',
                                                            'received' => 'warning',
                                                            'completed' => 'success',
                                                            'underreview' => 'primary',
                                                        ];
                                                        $label = $statusLabels[$status] ?? ucfirst($status);
                                                        $color = $statusColors[$status] ?? 'secondary';
                                                    @endphp
                                                    <span class="badge bg-{{ $color }}">{{ $label }}</span>
                                                </td>
                                                <td>
                                                    @php
                                                        $status = $item->status ?? 'entry';
                                                        $isEditDisabled = $status !== 'entry';
                                                        $canDelete = $status === 'entry';
                                                    @endphp

                                                    <div class="btn-group" role="group">
                                                        {{-- Preview --}}
                                                        <a href="{{ URL::to($url_menu . '/show/' . encrypt($item->id)) }}"
                                                            class="btn btn-sm btn-primary" title="Preview">
                                                            <i class="fas fa-eye"></i>
                                                        </a>

                                                        {{-- Edit: bentuk selalu sama, hanya disable kalau bukan entry --}}
                                                        @if ($authorize->edit == '1')
                                                            <a href="{{ $isEditDisabled ? 'javascript:void(0);' : URL::to($url_menu . '/edit/' . encrypt($item->id)) }}"
                                                                class="btn btn-sm btn-warning {{ $isEditDisabled ? 'disabled' : '' }}"
                                                                title="{{ $isEditDisabled ? 'Edit tidak tersedia untuk status ' . ucfirst($status) : 'Edit' }}"
                                                                style="{{ $isEditDisabled ? 'cursor: not-allowed; opacity: 0.6;' : '' }}">
                                                                <i class="fas fa-edit"></i>
                                                            </a>
                                                        @endif

                                                        {{-- Delete: bentuk selalu sama, submit form hidden kalau boleh delete --}}
                                                        @if ($authorize->delete == '1')
                                                            <button type="button"
                                                                class="btn btn-sm btn-danger {{ $canDelete ? '' : 'disabled' }}"
                                                                title="{{ $canDelete ? 'Hapus' : 'Delete tidak tersedia untuk status ' . ucfirst($status) }}"
                                                                style="{{ $canDelete ? '' : 'cursor: not-allowed; opacity: 0.6;' }}"
                                                                onclick="@if($canDelete) return deleteData(event, '{{ $item->memo_no }}', 'Hapus', 'delete-form-{{ $item->id }}'); @else return false; @endif">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                            @if ($canDelete)
                                                                <form id="delete-form-{{ $item->id }}"
                                                                    action="{{ URL::to($url_menu . '/' . encrypt($item->id)) }}"
                                                                    method="POST" style="display:none;">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                </form>
                                                            @endif
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </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>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#list_{{ $dmenu }}').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
        $('.btn-print-pdf').click(async function () {
            try {
            const row = $(this).closest('tr');
                const id = row.data('id') || '';
                const date = row.data('date') || '';
                const memoNo = row.data('memo-no') || '';
                const currentStatus = row.data('status') || 'entry';
            const from = row.data('from') || '';
                const supplier = row.data('supplier') || '';
                const supplierAttn = row.data('supplier-attn') || '';
                const supplierAddress = row.data('supplier-address') || '';
                const supplierPhone = row.data('supplier-phone') || '';
                const supplierFax = row.data('supplier-fax') || '';
            const subject = row.data('subject') || '';
                let actions = row.data('actions') || [];
                let details = row.data('details') || [];
                
                // Update status menjadi 'sent' sebelum generate PDF HANYA jika status saat ini adalah 'entry'
                if (id && currentStatus === 'entry') {
                    try {
                        const response = await $.ajax({
                            url: '{{ URL::to("/extmem/update-status") }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: id
                            },
                            dataType: 'json'
                        });
                        
                        if (!response.success) {
                            console.warn('Gagal update status:', response.message);
                            // Tetap lanjutkan generate PDF meskipun update status gagal
                        } else {
                            // Update status di row data attribute setelah berhasil update
                            row.attr('data-status', 'sent');
                            // Update badge status di UI
                            const statusBadge = row.find('td:eq(4) .badge');
                            statusBadge.removeClass('bg-secondary').addClass('bg-info').text('Sent');
                        }
                    } catch (error) {
                        console.error('Error update status:', error);
                        // Tetap lanjutkan generate PDF meskipun update status gagal
                    }
                }
                
                // Ensure actions and details are arrays
                if (typeof actions === 'string') {
                    try {
                        actions = JSON.parse(actions);
                    } catch (e) {
                        actions = [];
                    }
                }
                if (typeof details === 'string') {
                    try {
                        details = JSON.parse(details);
                    } catch (e) {
                        details = [];
                    }
                }
                if (!Array.isArray(actions)) actions = [];
                if (!Array.isArray(details)) details = [];

                    // Function to create checkbox canvas
                    function createCheckboxCanvas(checked) {
                        try {
                            const canvas = document.createElement('canvas');
                            const size = 14;
                            canvas.width = size;
                            canvas.height = size;
                            const ctx = canvas.getContext('2d');

                            // Clear canvas
                            ctx.clearRect(0, 0, size, size);

                            // Draw border (square)
                            ctx.strokeStyle = '#000000';
                            ctx.lineWidth = 1;
                            ctx.strokeRect(0.5, 0.5, size - 1, size - 1);

                            // Draw checkmark if checked
                            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) {
                            console.warn('Error creating checkbox canvas:', e);
                            // Fallback to text
                            return checked ? '[X]' : '[ ]';
                        }
                    }

                    // Actions options
                    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'
                        }
                    ];

                    // Format actions dengan checkbox
                    const actionsRow = actionOptions.map(opt => {
                        const isChecked = actions.includes(opt.value);
                        const checkboxImage = createCheckboxCanvas(isChecked);

                        // Check if it's a data URL (image) or text (fallback)
                        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 {
                            // Fallback to text
                            return {
                                columns: [{
                                        text: checkboxImage,
                                        width: 15,
                                        fontSize: 10,
                                        margin: [0, 0, 4, 0]
                                    },
                                    {
                                        text: opt.label,
                                        fontSize: 10,
                                        margin: [0, 0, 0, 0]
                                    }
                                ]
                            };
                        }
                    });

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

                    // Format body text dari details
                    function formatBodyText(detailsArray, fromName) {
                        if (!detailsArray || detailsArray.length === 0) return [];

                        let bodyText = 'We have a new inquiry for color matching. There are ' +
                            detailsArray.length + ' color' + (detailsArray.length > 1 ? 's' : '') +
                            ' which the resin base is :\n\n';

                        detailsArray.forEach((detail, index) => {
                            // Handle both old format (string) and new format (object)
                            let requestNo, customerColorCode, basicWeight;
                            if (typeof detail === 'string') {
                                // Old format: just request_no as string
                                requestNo = detail;
                                customerColorCode = '-';
                                basicWeight = '-';
                            } else if (typeof detail === 'object') {
                                // New format: object with request_no, customer_color_code, basic_weight
                                requestNo = detail.request_no || detail;
                                customerColorCode = detail.customer_color_code || '-';
                                basicWeight = detail.basic_weight || '-';
                            } else {
                                requestNo = detail;
                                customerColorCode = '-';
                                basicWeight = '-';
                            }

                            bodyText += (index + 1) + '. ' + customerColorCode + ' ( ' +
                                basicWeight + ' Gsm ) ' + requestNo + '\n';
                        });

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

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

                        return bodyText.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]
                            };
                        });
                    }

                    // Function to 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);
                                const dataURL = canvas.toDataURL('image/png');
                                callback(dataURL);
                            } 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;
                    }

                    // Logo path
                    const logoPath = '{{ asset('storage/icon.png') }}';

                    // Function to generate PDF
                    function generatePDF(logoContent) {
                        // Debug: log data
                        console.log('PDF Data:', {
                            date,
                            memoNo,
                            supplier,
                            supplierAttn,
                            subject,
                            actions,
                            details
                        });

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

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

                            content: [{
                                table: {
                                    widths: ['*'],
                                    body: [
                                        // 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
                                                                        ], // sebelumnya 13
                                                                    },

                                                                    {
                                                                        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
                                                                                ], // sebelumnya 5
                                                                            },
                                                                        ],
                                                                        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: 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, 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]
                                        }],
                                        // Issued by & Received by
                                        [

                                            {
                                                table: {
                                                    widths: ['*', 100,
                                                    100], // kiri fleksibel, kanan 2 kolom fix
                                                    heights: [30,
                                                    60], // tinggi baris header & baris isi (atur sesuai selera)
                                                    body: [
                                                        [
                                                            // KOTAK KIRI BESAR (gabung 2 baris)
                                                            {
                                                                text: '',
                                                                rowSpan: 2,
                                                                border: [false,
                                                                    false, true,
                                                                    false
                                                                ]
                                                            },

                                                            // HEADER
                                                            {
                                                                text: 'Issued by',
                                                                alignment: 'center',
                                                                fontSize: 12,
                                                                border: [false,
                                                                    false, true,
                                                                    false
                                                                ]
                                                            },
                                                            {
                                                                text: 'Received by',
                                                                alignment: 'center',
                                                                fontSize: 12,
                                                                border: [false,
                                                                    false,
                                                                    false, false
                                                                ]
                                                            },
                                                        ],
                                                        [
                                                            // cell kosong karena rowSpan di atas
                                                            {},

                                                            // ISI NAMA (dibikin agak ke bawah)
                                                            {
                                                                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
                                                                ]
                                                            },
                                                        ],
                                                    ],
                                                },

                                                // bikin padding rapet biar mirip kotak-kotak tegas
                                                layout: {
                                                    paddingLeft: () => 0,
                                                    paddingRight: () => 0,
                                                    paddingTop: () => 6,
                                                    paddingBottom: () => 6,
                                                    hLineWidth: () => 1,
                                                    vLineWidth: () => 1,
                                                },

                                                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';
                                    },
                                    paddingLeft: () => 0,
                                    paddingRight: () => 0,
                                    paddingTop: () => 0,
                                    paddingBottom: () => 0,
                                },
                                margin: [0, 0, 0, 0]
                            }, ],

                            footer: function(currentPage, pageCount) {
                                return {
                                    margin: [20, 0, 20, 10], // [left, top, right, bottom]
                                    stack: [
                                        // garis horizontal atas footer
                                        {
                                            canvas: [{
                                                type: 'line',
                                                x1: 0,
                                                y1: 0,
                                                x2: 9999,
                                                y2: 0,
                                                lineWidth: 1
                                            }],
                                            margin: [0, 0, 0, 6]
                                        },

                                        // isi footer kiri dan kanan
                                        {
                                            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'
                            }
                        };

                        try {
                            if (typeof pdfMake === 'undefined') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'PDF library tidak ditemukan. Pastikan pdfMake sudah ter-load.'
                                });
                                return;
                            }

                            // Create PDF and open it
                            pdfMake.createPdf(docDefinition).open();
                        } catch (error) {
                            console.error('Error:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Terjadi kesalahan saat membuat PDF: ' + (error.message ||
                                    'Unknown error')
                            });
                        }
                    } // End of generatePDF function

                    // Load logo asynchronously, then generate PDF
                    loadLogoAsBase64(logoPath, function(logoBase64) {
                        let logoContent = null;
                        if (logoBase64) {
                            logoContent = {
                                image: logoBase64,
                                width: 50,
                                height: 30,
                                margin: [0, 0, 10, 0]
                            };
                        }

                        // Generate PDF after logo is loaded
                        generatePDF(logoContent);
                    });

                } catch (error) {
                    console.error('Error in PDF generation:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan: ' + (error.message || 'Unknown error')
                    });
                }
            });
        });

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