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

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

<div class="container-fluid py-4">
    <div class="row">
        <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">Detail konfigurasi template COA</small>
                </div>

                <div class="card-body">
                    <table class="table table-sm">
                        <!-- <tr>
                            <th width="40%">Template Name</th>
                            <td>{{ $template->template_name ?? '-' }}</td>
                        </tr> -->
                        <tr>
                            <th>COA Type</th>
                            <td>{{ $template->coa_type_name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Layout</th>
                            <td>
                                @if ($template->column_type == 2)
                                <span class="badge bg-gradient-info">2 Kolom / Reguler</span>
                                @elseif ($template->column_type == 3)
                                <span class="badge bg-gradient-success">3 Kolom / Multiple</span>
                                @elseif ($template->column_type == 4)
                                <span class="badge bg-gradient-warning">4 Kolom / DWA</span>
                                @else
                                <span class="badge bg-gradient-secondary">Unknown</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                @if ($template->is_active)
                                <span class="badge bg-gradient-success">Active</span>
                                @else
                                <span class="badge bg-gradient-danger">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Judul Dokumen</h6>
                </div>

                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th width="40%">Title</th>
                            <td>{{ $template->title ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Subtitle</th>
                            <td>
                                @if ($template->subtitle_hidden)
                                <span class="text-muted">Disembunyikan</span>
                                @else
                                {{ $template->subtitle ?? '-' }}
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Spec Header</th>
                            <td>{{ $template->spec_header ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Result Header</th>
                            <td>{{ $template->result_header ?? '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Options</h6>
                </div>

                <div class="card-body">
                    <span class="badge {{ $template->use_standard ? 'bg-gradient-primary' : 'bg-gradient-secondary' }}">
                        Standard
                    </span>

                    <span class="badge {{ $template->use_test_method ? 'bg-gradient-dark' : 'bg-gradient-secondary' }}">
                        Test Method
                    </span>

                    <span class="badge {{ $template->use_note ? 'bg-gradient-info' : 'bg-gradient-secondary' }}">
                        Note
                    </span>

                    <span
                        class="badge {{ $template->merge_result_columns ? 'bg-gradient-warning' : 'bg-gradient-secondary' }}">
                        Merge Result
                    </span>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Pengaturan Baris Format COA</h6>
                </div>

                <div class="card-body">
                    <span
                        class="badge {{ $template->use_custom_format ? 'bg-gradient-primary' : 'bg-gradient-secondary' }} mb-3">
                        Format Custom
                    </span>

                    @if ($template->use_custom_format)
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <tbody>
                                <tr>
                                    <td>DO Number</td>
                                    <td>
                                        @if (isset($custom_formats['DO_Number']) && $custom_formats['DO_Number'])
                                        <i class="fas fa-check text-success"></i>
                                        @else
                                        <i class="fas fa-times text-danger"></i>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td>Roll No / Lot Product</td>
                                    <td>
                                        @if (isset($custom_formats['Roll_no']) && $custom_formats['Roll_no'])
                                        <i class="fas fa-check text-success"></i>
                                        @else
                                        <i class="fas fa-times text-danger"></i>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td>Product Item</td>
                                    <td>
                                        @if (isset($custom_formats['Product_Item']) && $custom_formats['Product_Item'])
                                        <i class="fas fa-check text-success"></i>
                                        @else
                                        <i class="fas fa-times text-danger"></i>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td>ER/Pattern / Color</td>
                                    <td>
                                        @if (isset($custom_formats['ER_Pattern_Color']) &&
                                        $custom_formats['ER_Pattern_Color'])
                                        <i class="fas fa-check text-success"></i>
                                        @else
                                        <i class="fas fa-times text-danger"></i>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td>Raw Material</td>
                                    <td>
                                        @if (isset($custom_formats['Raw_Material']) && $custom_formats['Raw_Material'])
                                        <i class="fas fa-check text-success"></i>
                                        @else
                                        <i class="fas fa-times text-danger"></i>
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div>
                        <small class="text-muted">Menggunakan default semua baris format COA.</small>
                    </div>
                    @endif
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Pengaturan Khusus</h6>
                </div>

                <div class="card-body">
                    <p class="mb-2">
                        <strong>Customer Override:</strong><br>
                        {{ $template->customer_name_override ?? '-' }}
                    </p>

                    <p class="mb-2"><strong>Static Rows:</strong></p>

                    @php
                    $staticRows = [];
                    if (!empty($template->static_rows)) {
                    $staticRows = json_decode($template->static_rows, true) ?: [];
                    }
                    @endphp

                    @if (!empty($staticRows))
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Label</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($staticRows as $row)
                                <tr>
                                    <td>{{ $row[0] ?? '-' }}</td>
                                    <td>{{ $row[1] ?? '-' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <span class="text-muted">Tidak ada static rows</span>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-body d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i> Kembali
                    </button>

                    <a href="{{ url($url_menu . '/edit/' . encrypt($template->id)) }}" class="btn btn-warning mb-0">
                        <i class="fas fa-edit me-1"></i> Edit
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card sticky-top" style="top:85px;">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Preview</h6>
                    <small class="text-muted">Preview kerangka template COA</small>
                </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>
</div>
@endsection

@push('js')
<script>
    const template = @json($template);
    const customFormats = @json($custom_formats ?? []);

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

    function buildStaticRows(columnType) {
        if (!template.static_rows) return [];

        let rows = [];

        try {
            rows = JSON.parse(template.static_rows);
        } catch (e) {
            return [];
        }

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

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

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

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

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

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

        const useCustom = Number(template.use_custom_format) === 1;
        const showDO = !useCustom || customFormats['DO_Number'];
        const showRoll = !useCustom || customFormats['Roll_no'];
        const showProduct = !useCustom || customFormats['Product_Item'];
        const showPattern = !useCustom || customFormats['ER_Pattern_Color'];
        const showRaw = !useCustom || customFormats['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(...buildStaticRows(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' }
                ],
            );

            body.push(...buildStaticRows(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 },
                {}
            ],
            [
                { text: 'DO Number', colSpan: 2 },
                {},
                { text: '123456789', colSpan: 2 },
                {}
            ],
            [
                { 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' }
                ]
            );
        } 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 },
                    {}
                ]
            );
        }

        body.push(...buildStaticRows(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 title = template.subtitle_hidden
            ? (template.title || 'HEIGEN')
            : `${template.title || 'HEIGEN'}\n${template.subtitle || 'CERTIFICATE OF ANALYSIS'}`;

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

        if (Number(template.use_note) === 1) {
            content.push({
                text: [
                    {
                        text: (template.note_1 || '*We certify the above statement of quality to be true and correct.') + '\n',
                        italics: true
                    },
                    {
                        text: template.note_2 || '*This document is generated electronically and is valid without signature.',
                        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';
        });
    }

    document.addEventListener('DOMContentLoaded', renderPdfMakePreview);
</script>
@endpush