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

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

    @php
        $isPdfMode = request()->boolean('pdf');
        $pdfHeaderRows = [];
        $pdfDetailColumns = [];
        $pdfDetailRows = [];
        $pdfDetailFieldTypes = [];
        $pdfLogo = !empty($setup_app->logo_small ?? null) ? asset('/storage' . '/' . $setup_app->logo_small) : '';

        $formatDate = function ($value) {
            if (!$value) {
                return '';
            }

            try {
                return \Carbon\Carbon::parse($value)->format('d/m/Y');
            } catch (\Throwable $th) {
                return $value;
            }
        };

        $formatCurrency = function ($value) {
            if ($value === null || $value === '') {
                return '';
            }

            return number_format((float) $value, 2, ',', '.');
        };

        $orderedHeaderFields = collect();
        $maxHeaderRows = max($header_fields_left->count(), $header_fields_right->count());

        for ($headerIndex = 0; $headerIndex < $maxHeaderRows; $headerIndex++) {
            if (isset($header_fields_left[$headerIndex])) {
                $orderedHeaderFields->push($header_fields_left[$headerIndex]);
            }

            if (isset($header_fields_right[$headerIndex])) {
                $orderedHeaderFields->push($header_fields_right[$headerIndex]);
            }
        }

        $formatHeaderValue = function ($field) use ($list, $formatDate, $formatCurrency) {
            $value = $list->{$field->field} ?? '';

            if ($field->type === 'enum') {
                foreach ($field->options as $option) {
                    if ((string) $option['value'] === (string) $value) {
                        $value = $option['label'];
                        break;
                    }
                }
            }

            if ($field->type === 'search' && $field->selected_label !== '') {
                $value = $field->selected_label;
            }

            if ($field->type === 'date') {
                $value = $formatDate($value);
            }

            if ($field->type === 'currency') {
                $value = $formatCurrency($value);
            }

            return [
                'label' => $field->alias,
                'value' => $value,
            ];
        };

        foreach ($orderedHeaderFields as $field) {
            $pdfHeaderRows[] = $formatHeaderValue($field);
        }

        $pdfDetailColumns[] = 'No';
        $pdfDetailFieldTypes[] = 'number';

        foreach ($detail_fields_visible as $field) {
            $pdfDetailColumns[] = $field->alias;
            $pdfDetailFieldTypes[] = $field->type;
        }

        foreach ($detail_rows as $index => $row) {
            $line = [$index + 1];

            foreach ($detail_fields_visible as $field) {
                $value = is_array($row) ? $row[$field->field] ?? '' : $row->{$field->field} ?? '';

                if ($field->type === 'enum') {
                    foreach ($field->options as $option) {
                        if ((string) $option['value'] === (string) $value) {
                            $value = $option['label'];
                            break;
                        }
                    }
                }

                if ($field->type === 'date') {
                    $value = $formatDate($value);
                }

                if ($field->type === 'currency') {
                    $value = $formatCurrency($value);
                }

                $line[] = $value;
            }

            $pdfDetailRows[] = $line;
        }
    @endphp

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="d-flex flex-wrap gap-2">
                <button class="btn btn-secondary mb-0" onclick="history.back()">
                    <i class="fas fa-circle-left me-1"></i>Kembali
                </button>
                @if ($authorize->edit == '1' && $list->isactive == '1' && !in_array($list->status ?? '', ['A', 'F', 'C']))
                    <a href="{{ url($url_menu . '/edit/' . $idencrypt) }}" class="btn btn-warning mb-0">
                        <i class="fas fa-edit me-1"></i>Edit
                    </a>
                @endif
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <h3 class="mb-4">Header</h3>

                @for ($headerIndex = 0; $headerIndex < $maxHeaderRows; $headerIndex++)
                    <div class="row">
                        @foreach ([$header_fields_left[$headerIndex] ?? null, $header_fields_right[$headerIndex] ?? null] as $field)
                            @if ($field)
                                @php
                                    $formattedHeader = $formatHeaderValue($field);
                                    $value = $formattedHeader['value'];
                                @endphp
                                <div class="col-lg-6 mb-3">
                                    <label class="form-control-label fw-bold">{{ $field->alias }}</label>
                                    @if ($field->type === 'text')
                                        <textarea class="form-control bg-light" rows="3" readonly>{{ $value }}</textarea>
                                    @else
                                        <input type="text" class="form-control bg-light" value="{{ $value }}"
                                            readonly>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endfor
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h3 class="mb-4">Detail {{ $title_menu }}</h3>

                <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                        <thead style="background-color: #d7eafc;">
                            <tr>
                                <th style="width: 60px;">No</th>
                                @foreach ($detail_fields_visible as $field)
                                    <th>{{ $field->alias }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($detail_rows as $index => $row)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    @foreach ($detail_fields_visible as $field)
                                        @php
                                            $value = is_array($row)
                                                ? $row[$field->field] ?? ''
                                                : $row->{$field->field} ?? '';
                                            if ($field->type === 'enum') {
                                                foreach ($field->options as $option) {
                                                    if ((string) $option['value'] === (string) $value) {
                                                        $value = $option['label'];
                                                        break;
                                                    }
                                                }
                                            }
                                            if ($field->type === 'date') {
                                                $value = $formatDate($value);
                                            }
                                            if ($field->type === 'currency') {
                                                $value = $formatCurrency($value);
                                            }
                                        @endphp
                                        <td>{{ $value }}</td>
                                    @endforeach
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $detail_fields_visible->count() + 1 }}" class="text-center text-muted">
                                        Belum ada detail.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @if ($isPdfMode)
        @if ($pdfLogo !== '')
            <img src="{{ $pdfLogo }}" id="transc-pdf-logo" alt="logo" style="display:none;">
        @endif
        @push('addjs')
            <script>
                $(function() {
                    const headerRows = @json($pdfHeaderRows);
                    const detailColumns = @json($pdfDetailColumns);
                    const detailRows = @json($pdfDetailRows);
                    const detailFieldTypes = @json($pdfDetailFieldTypes);
                    const title = @json($title_menu);
                    const fileName = @json($title_menu . '-' . ($list->{$table_primary_h->first()->field} ?? 'transaksi'));
                    const appName = @json($setup_app->appname ?? '');
                    const companyName = @json($setup_app->company ?? '');
                    const companyAddress = @json(trim(($setup_app->address ?? '') . ' ' . ($setup_app->city ?? '') . ' ' . ($setup_app->province ?? '')));
                    const companyPhone = @json($setup_app->telephone ?? '');
                    const printedBy = @json(session('username') ?? '');
                    const printedAt = @json(now()->format('d/m/Y H:i:s'));

                    const headerBlocks = [];
                    for (let index = 0; index < headerRows.length; index += 2) {
                        const left = headerRows[index];
                        const right = headerRows[index + 1];

                        headerBlocks.push([{
                                stack: [{
                                        text: left?.label || '',
                                        style: 'fieldLabel'
                                    },
                                    {
                                        text: left?.value ?? '-',
                                        style: 'fieldValue'
                                    }
                                ],
                                margin: [0, 0, 8, 0]
                            },
                            right ? {
                                stack: [{
                                        text: right?.label || '',
                                        style: 'fieldLabel'
                                    },
                                    {
                                        text: right?.value ?? '-',
                                        style: 'fieldValue'
                                    }
                                ],
                                margin: [8, 0, 0, 0]
                            } : {
                                text: ''
                            }
                        ]);
                    }

                    const detailTableBody = [
                        detailColumns.map((column) => ({
                            text: column,
                            style: 'tableHeader'
                        })),
                        ...detailRows.map((row) => row.map((cell, index) => ({
                            text: cell ?? '',
                            alignment: detailFieldTypes[index] === 'currency' || detailFieldTypes[index] ===
                                'number' ?
                                'right' : 'left'
                        })))
                    ];

                    const detailWidths = detailFieldTypes.map((type, index) => {
                        if (type === 'currency' || type === 'number') {
                            return 80;
                        }

                        if (type === 'date') {
                            return 78;
                        }

                        if (detailColumns[index] && detailColumns[index].length > 18) {
                            return '*';
                        }

                        return 'auto';
                    });

                    const buildLogoDataUrl = () => {
                        const img = document.getElementById('transc-pdf-logo');

                        if (!img || !img.complete || !img.naturalWidth) {
                            return null;
                        }

                        const canvas = document.createElement('canvas');
                        canvas.width = img.naturalWidth;
                        canvas.height = img.naturalHeight;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        return canvas.toDataURL('image/png');
                    };

                    const logoDataUrl = buildLogoDataUrl();
                    const pdfContent = [];

                    if (logoDataUrl) {
                        pdfContent.push({
                            columns: [{
                                    image: logoDataUrl,
                                    width: 52
                                },
                                {
                                    stack: [{
                                            text: appName || title,
                                            style: 'appTitle'
                                        },
                                        {
                                            text: companyName,
                                            style: 'companyTitle'
                                        },
                                        {
                                            text: companyAddress,
                                            style: 'metaText'
                                        },
                                        {
                                            text: companyPhone,
                                            style: 'metaText'
                                        },
                                        {
                                            text: 'Dicetak: ' + printedAt + (printedBy ? ' oleh ' +
                                                printedBy : ''),
                                            style: 'metaText'
                                        }
                                    ],
                                    margin: [12, 0, 0, 0]
                                }
                            ],
                            margin: [0, 0, 0, 18]
                        });
                    } else {
                        pdfContent.push({
                            stack: [{
                                    text: appName || title,
                                    style: 'appTitle'
                                },
                                {
                                    text: companyName,
                                    style: 'companyTitle'
                                },
                                {
                                    text: companyAddress,
                                    style: 'metaText'
                                },
                                {
                                    text: companyPhone,
                                    style: 'metaText'
                                },
                                {
                                    text: 'Dicetak: ' + printedAt + (printedBy ? ' oleh ' + printedBy : ''),
                                    style: 'metaText'
                                }
                            ],
                            margin: [0, 0, 0, 18]
                        });
                    }

                    pdfContent.push({
                        text: title,
                        style: 'title'
                    });
                    pdfContent.push({
                        text: 'Header',
                        style: 'section'
                    });
                    pdfContent.push({
                        table: {
                            widths: ['50%', '50%'],
                            body: headerBlocks
                        },
                        layout: 'noBorders',
                        margin: [0, 0, 0, 16]
                    });
                    pdfContent.push({
                        text: 'Detail',
                        style: 'section'
                    });
                    pdfContent.push({
                        table: {
                            headerRows: 1,
                            widths: detailWidths,
                            body: detailTableBody
                        },
                        layout: 'lightHorizontalLines'
                    });

                    const docDefinition = {
                        pageSize: 'A4',
                        pageOrientation: 'portrait',
                        pageMargins: [24, 30, 24, 30],
                        footer: function(currentPage, pageCount) {
                            return {
                                columns: [{
                                        text: 'Dicetak dari ' + (appName || title),
                                        alignment: 'left',
                                        margin: [24, 0, 0, 0]
                                    },
                                    {
                                        text: currentPage + ' / ' + pageCount,
                                        alignment: 'right',
                                        margin: [0, 0, 24, 0]
                                    }
                                ],
                                fontSize: 8,
                                color: '#6c757d'
                            };
                        },
                        content: pdfContent,
                        styles: {
                            appTitle: {
                                fontSize: 16,
                                bold: true,
                                color: '#0b5563'
                            },
                            companyTitle: {
                                fontSize: 12,
                                bold: true,
                                color: '#1f3b6f',
                                margin: [0, 2, 0, 2]
                            },
                            metaText: {
                                fontSize: 9,
                                color: '#4f5d75'
                            },
                            title: {
                                fontSize: 18,
                                bold: true,
                                color: '#1f3b6f',
                                margin: [0, 0, 0, 14]
                            },
                            section: {
                                fontSize: 13,
                                bold: true,
                                color: '#1f3b6f',
                                margin: [0, 0, 0, 8]
                            },
                            fieldLabel: {
                                fontSize: 10,
                                bold: true,
                                color: '#1f3b6f',
                                margin: [0, 0, 0, 3]
                            },
                            fieldValue: {
                                fontSize: 10,
                                color: '#344767',
                                margin: [0, 0, 0, 10]
                            },
                            tableHeader: {
                                bold: true,
                                fillColor: '#d7eafc',
                                color: '#1f3b6f'
                            }
                        }
                    };

                    pdfMake.createPdf(docDefinition).getDataUrl(function(dataUrl) {
                        document.title = fileName + ' Preview';
                        document.body.innerHTML = `
                            <div style="padding:12px 16px;font-family:Arial,sans-serif;background:#f8f9fa;border-bottom:1px solid #dee2e6;">
                                <strong>${fileName}</strong>
                                <span style="margin-left:8px;color:#6c757d;">Preview PDF</span>
                            </div>
                            <iframe src="${dataUrl}" style="width:100%;height:calc(100vh - 52px);border:0;"></iframe>
                        `;
                    });
                });
            </script>
        @endpush
    @endif
@endsection