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

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

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

        <div class="row g-3">
            <div class="col-lg-5">
                <div class="accordion" id="templateAccordion">

                    {{-- Informasi Template --}}
                    <div class="card mb-3">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#infoTemplate"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Informasi Template</h6>
                            <small class="text-muted">Data utama template COA</small>
                        </div>

                        <div id="infoTemplate" class="collapse show" data-bs-parent="#templateAccordion">
                            <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', $template->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', $template->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', $template->column_type) == 2 ?
                                            'selected' : '' }}>2 Kolom - Base Reguler COA</option>
                                        <option value="3" {{ old('column_type', $template->column_type) == 3 ?
                                            'selected' : '' }}>3 Kolom - Base Multiple COA</option>
                                        <option value="4" {{ old('column_type', $template->column_type) == 4 ?
                                            'selected' : '' }}>4 Kolom - Base DWA</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Judul Dokumen --}}
                    <div class="card mb-3">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#judulDokumen"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Judul Dokumen</h6>
                            <small class="text-muted">Pengaturan title dan subtitle PDF</small>
                        </div>

                        <div id="judulDokumen" class="collapse" data-bs-parent="#templateAccordion">
                            <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', $template->title) }}">
                                </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', $template->subtitle) }}">
                                </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',
                                        $template->subtitle_hidden) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="subtitle_hidden">Sembunyikan Subtitle</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Pengaturan Kolom --}}
                    <div class="card mb-3" id="columnSettingCard">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#pengaturanKolom"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Pengaturan Kolom</h6>
                            <small class="text-muted">Aktif untuk layout Multiple dan DWA</small>
                        </div>

                        <div id="pengaturanKolom" class="collapse" data-bs-parent="#templateAccordion">
                            <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', $template->spec_header) }}">
                                    </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', $template->result_header) }}">
                                    </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', $template->use_standard) ?
                                    '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',
                                        $template->merge_result_columns) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="merge_result_columns">Merge Result
                                        Columns</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Pengaturan Baris Format Custom COA --}}
                    <div class="card mb-3">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#pengaturanformatcoa"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Pengaturan Baris Default Format COA</h6>
                            <small class="text-muted">Untuk menampilkan atau menyembunyikan baris Format COA</small>
                            <div class="form-check form-switch mb-3 mt-2" onclick="event.stopPropagation();">
                                <input class="form-check-input" type="checkbox" name="use_custom_format"
                                    id="use_custom_format" value="1" {{ old('use_custom_format',
                                    $template->use_custom_format ?? 0) ? 'checked' : '' }}
                                onchange="toggleCustomFormat(event)">
                                <label class="form-check-label" for="use_custom_format">Menggunakan Format
                                    Custom</label>
                            </div>

                        </div>

                        <div id="pengaturanformatcoa"
                            class="collapse {{ old('use_custom_format', $template->use_custom_format ?? 0) ? 'show' : '' }}"
                            data-bs-parent="#templateAccordion">
                            <div class="card-body border-top" id="custom_format_fields"
                                style="{{ old('use_custom_format', $template->use_custom_format ?? 0) ? '' : 'display: none;' }}">

                                <p class="text-secondary mb-3">Pilih Default Format COA Yang Digunakan</p>

                                <!-- Content for format COA settings -->
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input custom-format-item" type="checkbox" name="DO_Number"
                                        id="DO_Number" {{ old('DO_Number', $custom_formats['DO_Number'] ?? 0)
                                        ? 'checked' : '' }}>
                                    <label class="form-check-label" for="DO_Number">DO Number</label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input custom-format-item" type="checkbox" name="Roll_no"
                                        id="Roll_no" {{ old('Roll_no', $custom_formats['Roll_no'] ?? 0) ? 'checked' : ''
                                        }}>
                                    <label class="form-check-label" for="Roll_no">Roll No / Lot Product</label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input custom-format-item" type="checkbox"
                                        name="Product_Item" id="Product_Item" {{ old('Product_Item',
                                        $custom_formats['Product_Item'] ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="Product_Item">Product Item</label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input custom-format-item" type="checkbox"
                                        name="ER_Pattern_Color" id="ER_Pattern_Color" {{ old('ER_Pattern_Color',
                                        $custom_formats['ER_Pattern_Color'] ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="ER_Pattern_Color">ER/Pattern / Color</label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input custom-format-item" type="checkbox"
                                        name="Raw_Material" id="Raw_Material" {{ old('Raw_Material',
                                        $custom_formats['Raw_Material'] ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="Raw_Material">Raw Material </label>
                                </div>
                            </div>
                        </div>
                    </div>



                    {{-- Pengaturan Khusus --}}
                    <div class="card mb-3">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#pengaturanKhusus"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Pengaturan Khusus</h6>
                            <small class="text-muted">Untuk variasi seperti SAKAI atau Branch of Diana</small>
                        </div>

                        <div id="pengaturanKhusus" class="collapse" data-bs-parent="#templateAccordion">
                            <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', $template->customer_name_override) }}">
                                </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', $template->static_rows) }}</textarea>

                                    <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', $template->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>

                    {{-- Footer / Note --}}
                    <div class="card mb-3">
                        <div class="card-header p-3" data-bs-toggle="collapse" data-bs-target="#footerNote"
                            style="cursor:pointer;">
                            <h6 class="mb-0">Footer / Note</h6>
                            <small class="text-muted">Pengaturan catatan bawah dokumen</small>
                        </div>

                        <div id="footerNote" class="collapse" data-bs-parent="#templateAccordion">
                            <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',
                                        $template->use_test_method) ? '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', $template->use_note) ? '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', $template->note_1) }}</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', $template->note_2) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ACTION --}}
                    <div class="card sticky-bottom">
                        <div class="card-body d-flex justify-content-between align-items-center py-3">
                            <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->edit == '1')
                            <button type="button" id="save-btn" class="btn btn-primary mb-0"
                                data-shortcut="save confirm"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Update</span>
                            </button>
                            @endif
                        </div>
                    </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;
    let hasSavedCustomFormats = {{ empty($custom_formats) ? 'false' : 'true' }};

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

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

    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 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: buildPreviewRows(),
                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';
        });
    }

    // validasi nama coa type 
    const existingCoaTypes = @json(\Illuminate\Support\Facades\DB::table('mst_coa_templates')->pluck('coa_type_name')->toArray());
    const currentCoaType = '{!! $template->coa_type_name !!}';

    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'); 
        
        // Jika nama tidak kosong, bukan nama saat ini, dan sudah ada di database
        if (val !== '' && val !== currentCoaType && existingCoaTypes.includes(val)) {
            // Tambahkan class is-invalid (membuat kotak jadi merah)
            this.classList.add('is-invalid');
            if(errorMsgContainer) {
                errorMsgContainer.innerText = 'COA Type Name "' + val + '" sudah digunakan! Silakan gunakan nama lain.';
            }
            if(saveBtn) saveBtn.disabled = true;
            
        } else {
            this.classList.remove('is-invalid');
            
            if(errorMsgContainer) {
                errorMsgContainer.innerText = '';
            }
            if(saveBtn) saveBtn.disabled = false;
        }
    });

    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');
        if (noteWrapper) noteWrapper.style.display = isChecked('use_note') ? '' : 'none';
    }

    function toggleSubtitleField() {
        const subtitleWrapper = document.getElementById('subtitleWrapper');
        if (subtitleWrapper) subtitleWrapper.style.display = isChecked('subtitle_hidden') ? 'none' : '';
    }

    function toggleCustomFormat(event) {
        const customFormatFields = document.getElementById('custom_format_fields');
        const formatCollapseDiv = document.getElementById('pengaturanformatcoa');
        const isCustom = isChecked('use_custom_format');
        
        if (customFormatFields) {
            customFormatFields.style.display = isCustom ? '' : 'none';
        }
        
        if (formatCollapseDiv) {
            if (isCustom) {
                formatCollapseDiv.classList.add('show');
            } else {
                formatCollapseDiv.classList.remove('show');
            }
        }

        if (event) {
            if (isCustom && !hasSavedCustomFormats) {
                const customItems = document.querySelectorAll('.custom-format-item');
                customItems.forEach(item => {
                    item.checked = true;
                });
                hasSavedCustomFormats = 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();
        });

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