{{-- Partial: investors/_dynamic_content.blade.php --}}

@php
    $locale = app()->getLocale(); // sudah di-set oleh middleware setlocale dari prefix /id/ atau /ja/

    $item = DB::table('mst_investor')
        ->whereRaw('LOWER(TRIM(menu_key)) = ?', [strtolower(trim($menu_key))])
        ->where('isactive', 1)
        ->first();
@endphp

@if (!$item)
    <p class="text-muted" style="padding: 20px 0;"><em>Belum ada konten untuk halaman ini.</em></p>
@else
    @php
        $raw = json_decode($item->data);

        // Support dua format:
        // Format LAMA (flat)  : { "content": "..." } atau { "items": [...] } atau { "groups": [...] }
        // Format BARU (nested): { "en": {...}, "id": {...}, "ja": {...} }
        //
        // Cek nested: kalau ada key 'en' atau 'id' atau 'ja' di root → format baru
        $isNested = isset($raw->en) || isset($raw->id) || isset($raw->ja);

        if ($isNested) {
            // Format baru: ambil slice locale aktif, fallback ke EN kalau locale belum diisi
            $data = $raw->$locale ?? ($raw->en ?? $raw);

            // Khusus collapse & upload_file:
            // file_url, file_url_id, file_url_en, file_url_jp selalu ada di EN (master file)
            // locale lain hanya beda judul/deskripsi, file-nya sama
            $dataEn = $raw->en ?? $raw;
        } else {
            // Format lama: langsung pakai as-is (backward compatible)
            $data = $raw;
            $dataEn = $raw;
        }

        $sortByUrut = function ($items) {
            if (!is_array($items)) {
                return [];
            }

            usort($items, function ($a, $b) {
                $aUrut = isset($a->urut) ? (int) $a->urut : 9999;
                $bUrut = isset($b->urut) ? (int) $b->urut : 9999;

                return $aUrut <=> $bUrut;
            });

            return $items;
        };

        $findByUrut = function ($items, $targetUrut) use ($sortByUrut) {
            $items = $sortByUrut($items ?? []);
            foreach ($items as $item) {
                $itemUrut = isset($item->urut) ? (int) $item->urut : 9999;
                if ($itemUrut === (int) $targetUrut) {
                    return $item;
                }
            }

            return null;
        };

        $resolveExistingFileUrl = function ($candidate, $fallback = null) {
            $paths = [];

            foreach ([$candidate, $fallback] as $value) {
                if (!is_string($value) && !is_null($value)) {
                    $value = (string) $value;
                }

                if (is_string($value)) {
                    $trimmed = trim($value);
                    if ($trimmed !== '' && $trimmed !== 'null' && $trimmed !== '[]') {
                        $paths[] = $trimmed;
                    }
                }
            }

            foreach ($paths as $path) {
                if (preg_match('/^https?:\/\//i', $path)) {
                    return $path;
                }

                $diskPath = public_path($path);
                if (file_exists($diskPath)) {
                    return $path;
                }
            }

            return null;
        };
    @endphp

    {{-- ================================================================ --}}
    {{-- TEMPLATE: TEXT EDITOR                                             --}}
    {{-- ================================================================ --}}
    @if ($item->template_type === 'text_editor')
        <div class="investor-text-editor mb-4">
            {!! $data->content ?? '' !!}
        </div>

        {{-- ================================================================ --}}
        {{-- TEMPLATE: UPLOAD FILE                                             --}}
        {{-- ================================================================ --}}
    @elseif ($item->template_type === 'upload_file')
        @php $uploadItems = $sortByUrut($data->items ?? []); @endphp

        @if (count($uploadItems) > 0)
            <div class="prospectus-grid">
                @foreach ($uploadItems as $cardIdx => $card)
                    @php
                        $targetUrut = (int) ($card->urut ?? $cardIdx + 1 ?: $cardIdx + 1);
                        $masterCard = $findByUrut($dataEn->items ?? [], $targetUrut);
                        $masterFileUrl = !empty($masterCard->file_url ?? null)
                            ? $masterCard->file_url
                            : (!empty($card->file_url)
                                ? $card->file_url
                                : null);

                        $fileUrl = $resolveExistingFileUrl($masterFileUrl, $card->file_url ?? null);
                        $fileUrl = $fileUrl ? asset($fileUrl) : null;
                        $canvasId = 'pdf-thumb-' . $cardIdx;
                    @endphp
                    @if ($fileUrl)
                        <a class="prospectus-card" href="{{ $fileUrl }}" target="_blank" rel="noopener noreferrer">
                            <canvas id="{{ $canvasId }}" data-pdf="{{ $fileUrl }}"
                                style="width:100%;display:block;background:#f5f5f5;"></canvas>
                            <div class="prospectus-card-caption">
                                {{ $card->judul ?? '' }}
                                @if (!empty($card->sub_judul))
                                    <br><span style="font-size:13px;font-weight:400;">{!! $card->sub_judul !!}</span>
                                @endif
                            </div>
                        </a>
                    @else
                        <div class="prospectus-card" style="cursor:default;">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-1.jpg') }}"
                                alt="{{ $card->judul ?? '' }}" style="width:100%;">
                            <div class="prospectus-card-caption">
                                {{ $card->judul ?? '' }}
                                @if (!empty($card->sub_judul))
                                    <br><span style="font-size:13px;font-weight:400;">{!! $card->sub_judul !!}</span>
                                @endif
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            {{-- PDF.js Render Thumbnail --}}
            <script>
                (function() {
                    var pdfScript = document.createElement('script');
                    pdfScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
                    pdfScript.onload = function() {
                        pdfjsLib.GlobalWorkerOptions.workerSrc =
                            'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

                        document.querySelectorAll('canvas[data-pdf]').forEach(function(canvas) {
                            var pdfUrl = canvas.getAttribute('data-pdf');
                            pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
                                return pdf.getPage(1);
                            }).then(function(page) {
                                var containerW = canvas.parentElement ? canvas.parentElement.clientWidth :
                                    300;
                                if (containerW < 1) containerW = 300;
                                var unscaled = page.getViewport({
                                    scale: 1
                                });
                                var scale = containerW / unscaled.width;
                                var viewport = page.getViewport({
                                    scale: scale
                                });
                                canvas.width = viewport.width;
                                canvas.height = viewport.height;
                                page.render({
                                    canvasContext: canvas.getContext('2d'),
                                    viewport: viewport
                                });
                            }).catch(function(err) {
                                console.warn('PDF render error:', err);
                            });
                        });
                    };
                    document.head.appendChild(pdfScript);
                })();
            </script>
        @else
            <p class="text-muted"><em>Belum ada file tersedia.</em></p>
        @endif

        {{-- ================================================================ --}}
        {{-- TEMPLATE: COLLAPSE                                                --}}
        {{-- file_url_id / file_url_en / file_url_jp selalu dari EN master     --}}
        {{-- judul & deskripsi dari locale aktif                               --}}
        {{-- ================================================================ --}}
    @elseif ($item->template_type === 'collapse')
        @php $groups = $sortByUrut($data->groups ?? []); @endphp

        @if (count($groups) > 0)
            <div class="sm-accordion">
                @foreach ($groups as $gIndex => $group)
                    @php
                        $groupNama = $group->group_nama ?? '';
                        $groupItems = $sortByUrut($group->items ?? []);
                        $targetGroupUrut = (int) ($group->urut ?? $gIndex + 1 ?: $gIndex + 1);
                        $groupEn = $findByUrut($dataEn->groups ?? [], $targetGroupUrut);
                        $groupItemsEn = $sortByUrut($groupEn->items ?? []);
                    @endphp

                    <div class="sm-accordion-item {{ $gIndex === 0 ? 'open' : '' }}"
                        style="{{ $gIndex === 0 ? 'border-top: none;' : '' }}">

                        <div class="sm-accordion-header" onclick="toggleSmAccordion(this)">
                            <h3>{{ $groupNama }}</h3>
                            <span class="sm-accordion-icon"></span>
                        </div>

                        <div class="sm-accordion-body">
                            <div class="sm-accordion-body-inner">
                                @foreach ($groupItems as $iIndex => $ci)
                                    @php
                                        $ci = (object) $ci;
                                        $targetItemUrut = isset($ci->urut) ? (int) $ci->urut : $iIndex + 1;
                                        $ciEn = $findByUrut($groupItemsEn, $targetItemUrut) ?? $ci;

                                        $fileIdFromLocale = !empty($ci->file_url_id) ? $ci->file_url_id : null;
                                        $fileIdFromMaster = !empty($ciEn->file_url_id) ? $ciEn->file_url_id : null;
                                        $fallbackId = $fileIdFromLocale ?: $fileIdFromMaster;

                                        $fileEnFromLocale = !empty($ci->file_url_en) ? $ci->file_url_en : null;
                                        $fileEnFromMaster = !empty($ciEn->file_url_en) ? $ciEn->file_url_en : null;
                                        $fallbackEn = $fileEnFromLocale ?: $fileEnFromMaster;

                                        $fileJpFromLocale = !empty($ci->file_url_jp) ? $ci->file_url_jp : null;
                                        $fileJpFromMaster = !empty($ciEn->file_url_jp) ? $ciEn->file_url_jp : null;
                                        $fallbackJp = $fileJpFromLocale ?: $fileJpFromMaster;

                                        $urlId = !empty($fallbackId) ? asset($fallbackId) : null;
                                        $urlEn = !empty($fallbackEn) ? asset($fallbackEn) : null;
                                        $urlJp = !empty($fallbackJp) ? asset($fallbackJp) : null;
                                    @endphp

                                    <div class="sm-doc-item">
                                        <div class="sm-doc-indent">
                                            <p class="sm-doc-title">{{ $ci->judul ?? '-' }}</p>
                                            @if (!empty($ci->deskripsi))
                                                <p class="sm-doc-deskripsi">{{ $ci->deskripsi }}</p>
                                            @endif
                                            <div class="sm-doc-buttons">
                                                @if ($urlId)
                                                    <a class="sm-doc-btn" href="{{ $urlId }}" target="_blank"
                                                        rel="noopener noreferrer">Bahasa</a>
                                                @endif
                                                @if ($urlEn)
                                                    <a class="sm-doc-btn" href="{{ $urlEn }}" target="_blank"
                                                        rel="noopener noreferrer">English</a>
                                                @endif
                                                @if ($urlJp)
                                                    <a class="sm-doc-btn" href="{{ $urlJp }}" target="_blank"
                                                        rel="noopener noreferrer">Japan</a>
                                                @endif
                                                @if (!$urlId && !$urlEn && !$urlJp)
                                                    <small class="text-muted">(file belum tersedia)</small>
                                                @endif
                                            </div>{{-- end sm-doc-buttons --}}
                                        </div>{{-- end sm-doc-indent --}}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-muted"><em>Belum ada data tersedia.</em></p>
        @endif

    @endif
@endif

{{-- Accordion CSS & JS --}}
@once
    <style>
        /* Accordion */
        .sm-accordion-item {
            border-bottom: 2px solid #C5E7D7;
        }

        .sm-accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0;
            cursor: pointer;
            user-select: none;
        }

        .sm-accordion-header h3 {
            font-size: 22px;
            font-weight: 600;
            color: #335B5C;
            margin: 0;
        }

        .sm-accordion-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #335B5C;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #fff;
            font-size: 18px;
            font-weight: 300;
            line-height: 1;
            transition: background 0.2s;
        }

        .sm-accordion-icon::after {
            content: '+';
        }

        .sm-accordion-item.open .sm-accordion-icon {
            display: none;
        }

        .sm-accordion-body {
            overflow: hidden;
            height: 0;
            transition: height 0.35s ease;
        }

        .sm-accordion-body-inner {
            padding-bottom: 20px;
        }

        .sm-doc-item {
            margin-bottom: 20px;
        }

        .sm-doc-title {
            font-size: 20px;
            font-weight: 500;
            color: #335B5C;
            margin: 0 0 8px 0;
            line-height: 24px;
        }

        .sm-doc-indent {
            padding-left: 24px;
            border-left: 3px solid #C5E7D7;
            margin-top: 6px;
        }

        .sm-doc-deskripsi {
            font-size: 15px;
            color: #555;
            margin: 0 0 10px 0;
            line-height: 1.5;
        }

        .sm-doc-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sm-doc-btn {
            display: inline-block;
            border: 1px solid #335B5C;
            color: #335B5C;
            padding: 5px 18px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
            border-radius: 3px;
        }

        .sm-doc-btn:hover {
            background: #9BBFC6;
            color: #fff;
        }

        /* PDF Cards */
        .prospectus-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 20px;
        }

        .prospectus-card {
            border: 1px solid #e0e0e0;
            background: #fff;
            text-align: center;
            transition: box-shadow 0.3s, transform 0.2s;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .prospectus-card:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }

        .prospectus-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .prospectus-card .prospectus-card-caption {
            padding: 14px 10px;
            font-size: 18px;
            font-weight: 700;
            color: #000;
            transition: color 0.3s;
        }

        .prospectus-card:hover .prospectus-card-caption {
            color: #335B5C;
        }

        /* Text Editor Utilities */
        .investor-text-editor {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            padding: 40px;
            line-height: 1.6;
        }

        @media (max-width: 980px) {
            .investor-text-editor {
                padding: 20px;
            }

            .prospectus-grid {
                grid-template-columns: 1fr !important;
                gap: 24px !important;
                margin-top: 24px !important;
            }

            .prospectus-card .prospectus-card-caption {
                font-size: 22px !important;
                padding: 20px 10px !important;
            }
        }

        .investor-text-editor .text-center {
            text-align: center !important;
        }

        .investor-text-editor .text-left {
            text-align: left !important;
        }

        .investor-text-editor .text-right {
            text-align: right !important;
        }

        .investor-text-editor .text-justify {
            text-align: justify !important;
        }

        /* Beautiful Links inside Editor */
        .investor-text-editor a {
            color: #098687;
            text-decoration: none;
            font-weight: 600;
            border-bottom: 2px solid rgba(9, 134, 135, 0.3);
            padding-bottom: 1px;
            transition: all 0.2s ease-in-out;
        }

        .investor-text-editor a:hover {
            color: #00A19A;
            border-bottom-color: #00A19A;
            background-color: rgba(0, 161, 154, 0.05);
            text-decoration: none;
        }
    </style>

    <script>
        function slideDown(body) {
            body.style.height = body.scrollHeight + 'px';
        }

        function slideUp(body) {
            body.style.height = body.scrollHeight + 'px';
            body.offsetHeight;
            body.style.height = '0';
        }

        function toggleSmAccordion(header) {
            const item = header.closest('.sm-accordion-item');
            const isOpen = item.classList.contains('open');

            document.querySelectorAll('.sm-accordion-item').forEach(function(el) {
                if (el !== item && el.classList.contains('open')) {
                    el.classList.remove('open');
                    slideUp(el.querySelector('.sm-accordion-body'));
                }
            });

            if (isOpen) {
                item.classList.remove('open');
                slideUp(item.querySelector('.sm-accordion-body'));
            } else {
                item.classList.add('open');
                slideDown(item.querySelector('.sm-accordion-body'));
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.sm-accordion-item.open .sm-accordion-body').forEach(function(body) {
                body.style.height = body.scrollHeight + 'px';
            });
        });
    </script>
@endonce