@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Tambah Master COA Template'])

<div class="container-fluid py-4">
    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
        enctype="multipart/form-data">
        @csrf

        <div class="row g-3">
            {{-- FORM --}}
            <div class="col-lg-5">
                <div class="card mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Informasi Template</h6>
                        <small class="text-muted">Data utama template COA</small>
                    </div>

                    <div class="card-body">
                        <!-- <div class="mb-3">
                                <label class="form-label">Nama Template</label>
                                <input type="text" name="template_name" id="template_name" class="form-control" required
                                    value="{{ old('template_name') }}">
                            </div> -->

                        <div class="mb-3">
                            <label for="coa_type_name" class="form-label">COA Type Name</label>
                            <input type="text" name="coa_type_name" id="coa_type_name"
                                class="form-control @error('coa_type_name') is-invalid @enderror" required
                                value="{{ old('coa_type_name') }}">

                            <div class="invalid-feedback text-sm" id="coa_type_error_msg">
                                @error('coa_type_name')
                                {{ $message }}
                                @enderror
                            </div>
                        </div>

                        <div class="mb-0">
                            <label class="form-label">Layout Base</label>
                            <select name="column_type" id="column_type" class="form-control" required>
                                <option value="2" {{ old('column_type', 2)==2 ? 'selected' : '' }}>2 Kolom - Base
                                    Reguler COA</option>
                                <option value="3" {{ old('column_type')==3 ? 'selected' : '' }}>3 Kolom - Base
                                    Multiple COA</option>
                                <option value="4" {{ old('column_type')==4 ? 'selected' : '' }}>4 Kolom - Base
                                    DWA</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Judul Dokumen</h6>
                        <small class="text-muted">Pengaturan title dan subtitle PDF</small>
                    </div>

                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Title</label>
                            <input type="text" name="title" id="title" class="form-control"
                                value="{{ old('title', 'HEIGEN') }}">
                        </div>

                        <div class="mb-3" id="subtitleWrapper">
                            <label class="form-label">Subtitle</label>
                            <input type="text" name="subtitle" id="subtitle" class="form-control"
                                value="{{ old('subtitle', 'CERTIFICATE OF ANALYSIS') }}">
                        </div>

                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="subtitle_hidden" id="subtitle_hidden"
                                value="1" {{ old('subtitle_hidden') ? 'checked' : '' }}>
                            <label class="form-check-label" for="subtitle_hidden">Sembunyikan Subtitle</label>
                        </div>
                    </div>
                </div>

                <div class="card mb-3" id="columnSettingCard">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Pengaturan Kolom</h6>
                        <small class="text-muted">Aktif untuk layout Multiple dan DWA</small>
                    </div>

                    <div class="card-body">
                        <div class="row" id="specResultWrapper">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Spec Header</label>
                                <input type="text" name="spec_header" id="spec_header" class="form-control"
                                    value="{{ old('spec_header', 'Specification') }}">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Result Header</label>
                                <input type="text" name="result_header" id="result_header" class="form-control"
                                    value="{{ old('result_header', 'Value') }}">
                            </div>
                        </div>

                        <div class="form-check form-switch mb-2" id="useStandardWrapper">
                            <input class="form-check-input" type="checkbox" name="use_standard" id="use_standard"
                                value="1" {{ old('use_standard', 1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="use_standard">Gunakan Standard / Specification</label>
                        </div>

                        <div class="form-check form-switch mb-0" id="mergeResultWrapper">
                            <input class="form-check-input" type="checkbox" name="merge_result_columns"
                                id="merge_result_columns" value="1" {{ old('merge_result_columns') ? 'checked' : '' }}>
                            <label class="form-check-label" for="merge_result_columns">Merge Result Columns</label>
                        </div>
                    </div>
                </div>

                {{-- Pengaturan Baris Format Custom COA --}}
                <div class="card mb-4 border-0 shadow-sm pengaturan-coa-container">
                    <div class="card-body p-4">
                        {{-- Bagian Header --}}
                        <div class="mb-0">
                            <div class="fs-6 fw-semibold text-dark mb-1">Pengaturan Baris Default Format COA</div>
                            <span class="small d-block mb-3">Untuk menampilkan atau menyembunyikan baris
                                Format COA</span>

                            {{-- Area Toggle Switch --}}
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" name="use_custom_format"
                                    id="use_custom_format" value="1" {{ old('use_custom_format', 0) ? 'checked' : '' }}
                                    onchange="toggleCustomFormat(event)">
                                {{-- Label didekatkan ke toggle dan diberi warna sekunder --}}
                                <label class="form-check-label text-secondary small pt-1 ms-1" style="cursor: pointer;"
                                    for="use_custom_format">
                                    Menggunakan Format Custom
                                </label>
                            </div>
                        </div>

                        {{-- Bagian Konten Kolaps --}}
                        <div id="pengaturanformatcoa">
                            <div class="pt-4 mt-3 border-top" id="custom_format_fields"
                                style="{{ old('use_custom_format', 0) ? '' : 'display: none;' }}">
                                <p class="text-secondary mb-3">Pilih Default Format COA Yang Digunakan</p>

                                {{-- Menggunakan d-flex column dan gap untuk jarak antar elemen yang konsisten --}}
                                <div class="d-flex flex-column gap-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input custom-switch-orange custom-format-item"
                                            type="checkbox" role="switch" name="DO_Number" id="DO_Number" {{
                                            old('DO_Number') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="DO_Number">DO Number</label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input custom-switch-orange custom-format-item"
                                            type="checkbox" role="switch" name="Roll_no" id="Roll_no" {{ old('Roll_no')
                                            ? 'checked' : '' }}>
                                        <label class="form-check-label" for="Roll_no">Roll No / Lot Product</label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input custom-switch-orange custom-format-item"
                                            type="checkbox" role="switch" name="Product_Item" id="Product_Item" {{
                                            old('Product_Item') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="Product_Item">Product Item</label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input custom-switch-orange custom-format-item"
                                            type="checkbox" role="switch" name="ER_Pattern_Color" id="ER_Pattern_Color"
                                            {{ old('ER_Pattern_Color') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="ER_Pattern_Color">ER/Pattern /
                                            Color</label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input custom-switch-orange custom-format-item"
                                            type="checkbox" role="switch" name="Raw_Material" id="Raw_Material" {{
                                            old('Raw_Material') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="Raw_Material">Raw Material</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Pengaturan Khusus</h6>
                        <small class="text-muted">Untuk variasi seperti SAKAI atau Branch of Diana</small>
                    </div>

                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Customer Name Override</label>
                            <input type="text" name="customer_name_override" id="customer_name_override"
                                class="form-control" placeholder="Kosongkan jika memakai nama customer asli"
                                value="{{ old('customer_name_override') }}">
                            <small class="text-muted">Contoh: Branch Of Diana Unicharm Joint</small>
                        </div>

                        <!-- <div class="mb-0">
                                <label class="form-label">Static Rows Tambahan</label>
                                <textarea name="static_rows" id="static_rows" rows="4" class="form-control"
                                    placeholder='[["Color","Within standard as Raw Material Specification"],["Odor","Within standard as Raw Material Specification"]]'>{{ old('static_rows') }}</textarea>
                                <small class="text-muted d-block mt-1">Format JSON array. Dipakai untuk SAKAI seperti
                                    Color, Odor, Appearance.</small>

                                <button type="button" class="btn btn-sm btn-outline-primary mt-2"
                                    onclick="useSakaiStaticRows()">
                                    Pakai Contoh SAKAI
                                </button>

                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2"
                                    onclick="clearStaticRows()">
                                    Kosongkan
                                </button>
                            </div> -->

                        <div class="mb-0">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label">Static Rows Tambahan</label>
                                <button type="button" class="btn btn-xs btn-primary mb-0" onclick="addStaticRow()">
                                    <i class="fas fa-plus me-1"></i> Tambah Baris
                                </button>
                            </div>

                            <textarea name="static_rows" id="static_rows"
                                class="d-none">{{old('static_rows')}}</textarea>
                            <div id="static_rows_container" class="border p-2 rounded bg-light mb-2">
                            </div>

                            <small class="text-muted d-block mt-1">Dipakai untuk baris tambahan seperti Color, Odor,
                                Appearance.</small>

                            <!-- <button type="button" class="btn btn-sm btn-outline-info mt-2 mb-0"
                                    onclick="useSakaiStaticRows()">
                                    <i class="fas fa-magic me-1"></i> Pakai Contoh SAKAI
                                </button>

                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2 mb-0 ms-1"
                                    onclick="clearStaticRows()">
                                    <i class="fas fa-undo me-1"></i> Kosongkan
                                </button> -->
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Footer / Note</h6>
                        <small class="text-muted">Pengaturan catatan bawah dokumen</small>
                    </div>

                    <div class="card-body">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="use_test_method" id="use_test_method"
                                value="1" {{ old('use_test_method', 1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="use_test_method">Tampilkan Test Method</label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="use_note" id="use_note" value="1" {{
                                old('use_note', 1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="use_note">Tampilkan Note</label>
                        </div>

                        <div id="noteWrapper">
                            <div class="mb-3">
                                <label class="form-label">Note 1</label>
                                <textarea name="note_1" id="note_1" rows="2"
                                    class="form-control">{{ old('note_1', '*We certify the above statement of quality to be true and correct.') }}</textarea>
                            </div>

                            <div class="mb-0">
                                <label class="form-label">Note 2</label>
                                <textarea name="note_2" id="note_2" rows="2"
                                    class="form-control">{{ old('note_2', '*This document is generated electronically and is valid without signature.') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <button type="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 ($authorize->add == '1')
                        <button type="button" id="save-btn" class="btn btn-primary mb-0" data-shortcut="save confirm"
                            onclick="document.getElementById('{{ $dmenu }}-form').submit();">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span class="font-weight-bold">Simpan</span>
                        </button>
                        @endif
                    </div>
                </div>
            </div>

            {{-- LIVE PREVIEW --}}
            <div class="col-lg-7">
                <div class="card sticky-top preview-card">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Live Preview</h6>
                            <small class="text-muted">Preview kerangka layout COA</small>
                        </div>

                        <span class="badge bg-gradient-info" id="previewLayoutBadge">2 Kolom</span>
                    </div>

                    <div class="card-body">
                        <div class="d-flex justify-content-center align-items-start overflow-auto p-2 bg-light rounded"
                            style="height:850px;">
                            <iframe id="pdfPreviewFrame" width="600" height="850"
                                style="border:1px solid #ddd; border-radius:6px; background:#fff;">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('js')
<script>
    const previewHeader =
            'data:image/png;base64,{{ base64_encode(file_get_contents(storage_path('app/public/header.png'))) }}';

        const previewFooter =
            'data:image/png;base64,{{ base64_encode(file_get_contents(storage_path('app/public/footer.png'))) }}';

        let previewTimer = null;

        function getValue(id, fallback = '') {
            const el = document.getElementById(id);
            return el ? (el.value || fallback) : fallback;
        }

        function isChecked(id) {
            const el = document.getElementById(id);
            return el ? el.checked : false;
        }

        function debouncePreview() {
            clearTimeout(previewTimer);
            previewTimer = setTimeout(renderPdfMakePreview, 350);
        }

        // function useSakaiStaticRows() {
        //     const rows = [
        //         ['Color', 'Within standard as Raw Material Specification'],
        //         ['Odor', 'Within standard as Raw Material Specification'],
        //         ['Appearance', 'Within standard as Raw Material Specification']
        //     ];

        //     document.getElementById('static_rows').value = JSON.stringify(rows);
        //     renderPdfMakePreview();
        // }

        //Fitur static rows terbaru
        function syncStaticRows() {
            let data = [];
            const rows = document.querySelectorAll('#static_rows_container .static-row');
            rows.forEach(row => {
                let key = row.querySelector('.row-key').value.trim();
                let val = row.querySelector('.row-val').value.trim();
                
                if (key !== '' || val !== '') {
                    data.push([key, val]);
                }
            });
            
            // Simpan JSON ke hidden textarea
            document.getElementById('static_rows').value = data.length > 0 ? JSON.stringify(data) : '';
            
            // Trigger update PDF Preview langsung pas ngetik!
            debouncePreview();
        }

        const existingCoaTypes = @json(\Illuminate\Support\Facades\DB::table('mst_coa_templates')->pluck('coa_type_name')->toArray());
        
        document.getElementById('coa_type_name')?.addEventListener('input', function() {
        const val = this.value.trim();
        const errorMsgContainer = document.getElementById('coa_type_error_msg');
        const saveBtn = document.getElementById('save-btn'); 
        
        if (val !== '' && existingCoaTypes.includes(val)) {
            // Jika duplikat, tambahkan class is-invalid
            this.classList.add('is-invalid');
            
            // Tampilkan pesan error
            if(errorMsgContainer) {
                errorMsgContainer.innerText = 'COA Type Name "' + val + '" sudah digunakan! Silakan gunakan nama lain.';
            }
            
            // Disable tombol simpan agar tidak disubmit
            if(saveBtn) saveBtn.disabled = true;
            
        } else {
            // Jika aman, hilangkan error
            this.classList.remove('is-invalid');
            
            if(errorMsgContainer) {
                errorMsgContainer.innerText = '';
            }
            
            // Enable tombol simpan
            if(saveBtn) saveBtn.disabled = false;
        }
});

        function addStaticRow(key = '', val = '') {
            const container = document.getElementById('static_rows_container');
            const rowDiv = document.createElement('div');
            rowDiv.className = 'row mb-2 static-row align-items-center';
            rowDiv.innerHTML = `
                <div class="col-md-4 pe-1">
                    <input type="text" class="form-control form-control-sm row-key" placeholder="Label (ex: Color)" value="${key}" oninput="syncStaticRows()">
                </div>
                <div class="col-md-7 px-1">
                    <input type="text" class="form-control form-control-sm row-val" placeholder="Nilai (ex: Within standard...)" value="${val}" oninput="syncStaticRows()">
                </div>
                <div class="col-md-1 ps-1 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger mb-0 px-2 py-1" onclick="removeStaticRow(this)" title="Hapus Baris">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            container.appendChild(rowDiv);
            syncStaticRows();
        }

        function removeStaticRow(btn) {
            btn.closest('.static-row').remove();
            syncStaticRows();
        }

        function useSakaiStaticRows() {
            document.getElementById('static_rows_container').innerHTML = ''; // bersihkan dulu
            addStaticRow('Color', 'Within standard as Raw Material Specification');
            addStaticRow('Odor', 'Within standard as Raw Material Specification');
            addStaticRow('Appearance', 'Within standard as Raw Material Specification');
        }

        function clearStaticRows() {
            document.getElementById('static_rows_container').innerHTML = '';
            document.getElementById('static_rows').value = '';
            addStaticRow('', '');
            debouncePreview();
        }

        function initStaticRows() {
            const existingData = document.getElementById('static_rows').value;
            if (existingData && existingData.trim() !== '') {
                try {
                    let parsed = JSON.parse(existingData);
                    if (Array.isArray(parsed) && parsed.length > 0) {
                        parsed.forEach(item => {
                            addStaticRow(item[0] || '', item[1] || '');
                        });
                    } else {
                        addStaticRow();
                    }
                } catch (e) {
                    addStaticRow();
                }
            } else {
                addStaticRow();
            }
        }



        function getStaticRowsPreview(columnType) {
            const raw = getValue('static_rows', '');

            if (!raw.trim()) return [];

            try {
                const rows = JSON.parse(raw);

                if (!Array.isArray(rows)) return [];

                return rows.map(row => {
                    const label = row[0] || '';
                    const value = row[1] || '';

                    if (columnType === 2) {
                        return [{
                            text: label
                        }, {
                            text: value
                        }];
                    }

                    if (columnType === 3) {
                        return [{
                            text: label
                        }, {
                            text: value,
                            colSpan: 2
                        }, {}];
                    }

                    return [{
                            text: label,
                            colSpan: 2
                        },
                        {},
                        {
                            text: value,
                            colSpan: 2
                        },
                        {}
                    ];
                });
            } catch (e) {
                return [];
            }
        }

        function buildPreviewRows() {
            const columnType = Number(getValue('column_type', 2));
            const specHeader = getValue('spec_header', 'Specification');
            const resultHeader = getValue('result_header', 'Value');
            const useStandard = isChecked('use_standard');
            const useTestMethod = isChecked('use_test_method');
            const customerName = getValue('customer_name_override', 'PT SAMPLE CUSTOMER') || 'PT SAMPLE CUSTOMER';

            const useCustom = isChecked('use_custom_format');
            const showDO = !useCustom || isChecked('DO_Number');
            const showRoll = !useCustom || isChecked('Roll_no');
            const showProduct = !useCustom || isChecked('Product_Item');
            const showPattern = !useCustom || isChecked('ER_Pattern_Color');
            const showRaw = !useCustom || isChecked('Raw_Material');

            if (columnType === 2) {
                const body = [
                    [{
                            text: 'Customer',
                            bold: true,
                            alignment: 'center'
                        },
                        {
                            text: customerName,
                            bold: true,
                            alignment: 'center'
                        }
                    ]
                ];

                if (showDO) body.push([{text: 'DO Number'}, {text: '123456789'}]);
                if (showRoll) body.push([{ text: 'Roll No / Lot Product' }, { text: 'aaa' }]);
                if (showProduct) body.push([{ text: 'Product Item' }, { text: 'bbb' }]);
                if (showPattern) body.push([{ text: 'ER/Pattern / Color ' }, { text: 'ccc' }]);
                if (showRaw) body.push([{ text: 'Raw Material ' }, { text: 'ddd' }]);

                body.push(
                    [{
                        text: 'Product Name'
                    }, {
                        text: 'NONWOVEN SAMPLE'
                    }],
                    [{
                        text: 'Basis Weight (gsm)'
                    }, {
                        text: '20.5'
                    }],
                    [{
                        text: 'Tensile MD'
                    }, {
                        text: '15.20'
                    }],
                    [{
                        text: 'Tensile CD'
                    }, {
                        text: '8.70'
                    }]
                );

                body.push(...getStaticRowsPreview(columnType));

                if (useTestMethod) {
                    body.push([{
                            text: 'TEST METHOD : ISO SAMPLE',
                            colSpan: 2,
                            alignment: 'left',
                            bold: true
                        },
                        {}
                    ]);
                }

                return {
                    widths: ['40%', '60%'],
                    body
                };
            }

            if (columnType === 3) {
                const body = [
                    [{
                            text: 'Customer',
                            alignment: 'center',
                            bold: true
                        },
                        {
                            text: customerName,
                            bold: true,
                            alignment: 'center',
                            colSpan: 2
                        },
                        {}
                    ]
                ];
                
                if (showDO) body.push([{text: 'DO Number'}, {text: '123456789',colSpan: 2}, {}]);
                if (showRoll) body.push([{ text: 'Roll No / Lot Product' }, { text: 'aaa', colSpan: 2 }, {}]);
                if (showProduct) body.push([{ text: 'Product Item' }, { text: 'bbb', colSpan: 2 }, {}]);
                if (showPattern) body.push([{ text: 'ER/Pattern / Color ' }, { text: 'ccc', colSpan: 2 }, {}]);
                if (showRaw) body.push([{ text: 'Raw Material ' }, { text: 'ddd', colSpan: 2 }, {}]);

                body.push(
                    [{
                        text: 'Product Name'
                    }, {
                        text: 'NONWOVEN SAMPLE',
                        colSpan: 2
                    }, {}],
                    [{
                            text: ''
                        },
                        {
                            text: specHeader,
                            alignment: 'center',
                            bold: true
                        },
                        {
                            text: resultHeader,
                            alignment: 'center',
                            bold: true
                        }
                    ],
                    [{
                            text: 'Basis Weight (gsm)'
                        },
                        {
                            text: '20 ± 2',
                            alignment: 'center'
                        },
                        {
                            text: '20.5',
                            alignment: 'center'
                        }
                    ],
                    [{
                            text: 'Tensile MD'
                        },
                        {
                            text: '≥ 15',
                            alignment: 'center'
                        },
                        {
                            text: '15.20',
                            alignment: 'center'
                        }
                    ],
                    [{
                            text: 'Tensile CD'
                        },
                        {
                            text: '≥ 8',
                            alignment: 'center'
                        },
                        {
                            text: '8.70',
                            alignment: 'center'
                        }
                    ]
                );

                body.push(...getStaticRowsPreview(columnType));

                if (useTestMethod) {
                    body.push([{
                            text: 'TEST METHOD : ISO SAMPLE',
                            colSpan: 3,
                            alignment: 'left',
                            bold: true
                        },
                        {},
                        {}
                    ]);
                }

                return {
                    widths: ['40%', '30%', '30%'],
                    body
                };
            }

            const body = [
                [{
                        text: 'Customer',
                        alignment: 'center',
                        bold: true,
                        colSpan: 2
                    },
                    {},
                    {
                        text: customerName,
                        bold: true,
                        alignment: 'center',
                        colSpan: 2
                    },
                    {}
                ]
            ];

            if (showDO) body.push([{text: 'DO Number',colSpan: 2},{},{text: '123456789',colSpan: 2},{}]);
            if (showRoll) body.push([{ text: 'Roll No / Lot Product', colSpan: 2 }, {}, { text: 'aaa', colSpan: 2 }, {}]);
            if (showProduct) body.push([{ text: 'Product Item', colSpan: 2 }, {}, { text: 'bbb', colSpan: 2 }, {}]);
            if (showPattern) body.push([{ text: 'ER/Pattern / Color ', colSpan: 2 }, {}, { text: 'ccc', colSpan: 2 }, {}]);
            if (showRaw) body.push([{ text: 'Raw Material ', colSpan: 2 }, {}, { text: 'ddd', colSpan: 2 }, {}]);

            body.push(
                [{
                        text: 'Product Name',
                        colSpan: 2
                    },
                    {},
                    {
                        text: 'NONWOVEN SAMPLE',
                        colSpan: 2
                    },
                    {}
                ]
            );

            if (useStandard) {
                body.push(
                    [{
                            text: '',
                            colSpan: 2
                        },
                        {},
                        {
                            text: specHeader || 'STANDARD',
                            alignment: 'center',
                            bold: true
                        },
                        {
                            text: resultHeader || 'RESULT',
                            alignment: 'center',
                            bold: true
                        }
                    ],
                    [{
                            text: 'Tensile Strength',
                            rowSpan: 2
                        },
                        {
                            text: 'MD',
                            alignment: 'center'
                        },
                        {
                            text: '≥ 15',
                            alignment: 'center'
                        },
                        {
                            text: '15.20',
                            alignment: 'center'
                        }
                    ],
                    [{},
                        {
                            text: 'CD',
                            alignment: 'center'
                        },
                        {
                            text: '≥ 8',
                            alignment: 'center'
                        },
                        {
                            text: '8.70',
                            alignment: 'center'
                        }
                    ],
                    [{
                            text: 'Elongation'
                        },
                        {
                            text: 'MD',
                            alignment: 'center'
                        },
                        {
                            text: '50 - 80',
                            alignment: 'center'
                        },
                        {
                            text: '65',
                            alignment: 'center'
                        }
                    ]
                );
            } else {
                body.push(
                    [{
                            text: '',
                            colSpan: 2
                        },
                        {},
                        {
                            text: resultHeader || 'RESULT',
                            alignment: 'center',
                            bold: true,
                            colSpan: 2
                        },
                        {}
                    ],
                    [{
                            text: 'Tensile Strength',
                            rowSpan: 2
                        },
                        {
                            text: 'MD',
                            alignment: 'center'
                        },
                        {
                            text: '15.20',
                            alignment: 'center',
                            colSpan: 2
                        },
                        {}
                    ],
                    [{},
                        {
                            text: 'CD',
                            alignment: 'center'
                        },
                        {
                            text: '8.70',
                            alignment: 'center',
                            colSpan: 2
                        },
                        {}
                    ],
                    [{
                            text: 'Elongation'
                        },
                        {
                            text: 'MD',
                            alignment: 'center'
                        },
                        {
                            text: '65',
                            alignment: 'center',
                            colSpan: 2
                        },
                        {}
                    ]
                );
            }

            body.push(...getStaticRowsPreview(columnType));

            if (useTestMethod) {
                body.push([{
                        text: 'TEST METHOD : ISO SAMPLE',
                        colSpan: 4,
                        alignment: 'left',
                        bold: true
                    },
                    {},
                    {},
                    {}
                ]);
            }

            return {
                widths: ['30%', '10%', '30%', '30%'],
                body
            };
        }

        function renderPdfMakePreview() {
            const columnType = Number(getValue('column_type', 2));
            const title = getValue('title', 'HEIGEN');
            const subtitle = getValue('subtitle', 'CERTIFICATE OF ANALYSIS');
            const useNote = isChecked('use_note');
            const note1 = getValue('note_1', '*We certify the above statement of quality to be true and correct.');
            const note2 = getValue('note_2', '*This document is generated electronically and is valid without signature.');
            const subtitleHidden = isChecked('subtitle_hidden');
            const displayTitle = subtitleHidden ? title : `${title}\n${subtitle}`;

            const badge = document.getElementById('previewLayoutBadge');

            if (columnType === 2) {
                badge.innerText = '2 Kolom / Reguler';
                badge.className = 'badge bg-gradient-info';
            } else if (columnType === 3) {
                badge.innerText = '3 Kolom / Multiple';
                badge.className = 'badge bg-gradient-success';
            } else {
                badge.innerText = '4 Kolom / DWA';
                badge.className = 'badge bg-gradient-warning';
            }

            const previewTable = buildPreviewRows();

            const content = [{
                    text: '\n',
                    margin: [0, 20, 0, 0]
                },
                {
                    table: {
                        widths: ['*', 'auto'],
                        body: [
                            ['', 'No     : COA/SAMPLE/001'],
                            ['', 'Date  : 28-04-2026']
                        ]
                    },
                    layout: 'noBorders'
                },
                {
                    text: displayTitle,
                    style: 'header2'
                },
                {
                    table: previewTable,
                    layout: {
                        fillColor: '#FFFFFF'
                    }
                },
                {
                    text: '\n'
                }
            ];

            if (useNote) {
                content.push({
                    text: [{
                            text: note1 + '\n',
                            italics: true
                        },
                        {
                            text: note2,
                            italics: true
                        }
                    ],
                    fontSize: 10
                });
            }

            const docDefinition = {
                pageSize: 'A4',
                pageMargins: [25, 75, 25, 70],

                header: function() {
                    return {
                        image: previewHeader,
                        width: 350,
                        alignment: 'center',
                        margin: [0, 12, 0, 0]
                    };
                },

                footer: function() {
                    return {
                        image: previewFooter,
                        width: 530,
                        alignment: 'center',
                        margin: [0, 0, 0, 8]
                    };
                },

                content,

                defaultStyle: {
                    fontSize: 11,
                    lineHeight: 1.1
                },

                styles: {
                    header2: {
                        fontSize: 16,
                        bold: true,
                        alignment: 'center',
                        margin: [0, 5, 0, 5]
                    }
                }
            };

            pdfMake.createPdf(docDefinition).getDataUrl(function(dataUrl) {
                document.getElementById('pdfPreviewFrame').src = dataUrl + '#toolbar=0&navpanes=0&scrollbar=1';
            });
        }

        function toggleLayoutFields() {
            const columnType = Number(getValue('column_type', 2));

            const columnSettingCard = document.getElementById('columnSettingCard');
            const specResultWrapper = document.getElementById('specResultWrapper');
            const useStandardWrapper = document.getElementById('useStandardWrapper');
            const mergeResultWrapper = document.getElementById('mergeResultWrapper');

            const showColumnSetting = columnType === 3 || columnType === 4;
            const showSpecResult = columnType === 3 || columnType === 4;
            const showUseStandard = columnType === 4;
            const showMergeResult = columnType === 4;

            if (columnSettingCard) {
                columnSettingCard.style.display = showColumnSetting ? '' : 'none';
            }

            if (specResultWrapper) {
                specResultWrapper.style.display = showSpecResult ? '' : 'none';
            }

            if (useStandardWrapper) {
                useStandardWrapper.style.display = showUseStandard ? '' : 'none';
            }

            if (mergeResultWrapper) {
                mergeResultWrapper.style.display = showMergeResult ? '' : 'none';
            }
        }

        function toggleNoteFields() {
            const noteWrapper = document.getElementById('noteWrapper');
            const show = isChecked('use_note');

            if (noteWrapper) {
                noteWrapper.style.display = show ? '' : 'none';
            }
        }

        function toggleSubtitleField() {
            const subtitleWrapper = document.getElementById('subtitleWrapper');
            const hideSubtitle = isChecked('subtitle_hidden');

            if (subtitleWrapper) {
                subtitleWrapper.style.display = hideSubtitle ? 'none' : '';
            }
        }

        function toggleCustomFormat(event) {
            const customFormatFields = document.getElementById('custom_format_fields');
            const isCustom = isChecked('use_custom_format');
            
            if (customFormatFields) {
                customFormatFields.style.display = isCustom ? '' : 'none';
            }

            if (event) {
                // Jika dari aksi klik, jika custom diaktifkan maka otomatis ceklis semua sub-item
                if (isCustom) {
                    const customItems = document.querySelectorAll('.custom-format-item');
                    customItems.forEach(item => {
                        item.checked = true;
                    });
                }
                debouncePreview();
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Inisialisasi baris input dinamis saat halaman pertama kali dibuka
            initStaticRows();
            const previewInputs = [
                'column_type',
                'title',
                'subtitle',
                'spec_header',
                'result_header',
                'customer_name_override',
                'static_rows',
                'use_standard',
                'use_test_method',
                'use_note',
                'subtitle_hidden',
                'merge_result_columns',
                'note_1',
                'note_2',
                'use_custom_format',
                'DO_Number',
                'Roll_no',
                'Product_Item',
                'ER_Pattern_Color',
                'Raw_Material'
            ];

            previewInputs.forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;

                el.addEventListener('input', debouncePreview);
                el.addEventListener('change', debouncePreview);
            });

            document.getElementById('column_type')?.addEventListener('change', function() {
                toggleLayoutFields();
                debouncePreview();
            });

            document.getElementById('use_note')?.addEventListener('change', function() {
                toggleNoteFields();
                debouncePreview();
            });

            document.getElementById('subtitle_hidden')?.addEventListener('change', function() {
                toggleSubtitleField();
                debouncePreview();
            });

            toggleSubtitleField();
            toggleLayoutFields();
            toggleNoteFields();
            renderPdfMakePreview();
        });
</script>
@endpush