@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <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</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')
                            {{-- check status active --}}
                            @if ($list->isactive == 1)
                                {{-- button edit --}}
                                <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"
                                    onclick="window.location='{{ url($url_menu . '/edit' . '/' . $idencrypt) }}'"><i
                                        class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @php
        $dataJson    = json_decode($list->data);
        $isNested    = isset($dataJson->en) || isset($dataJson->id) || isset($dataJson->ja);
        $dataEn      = $isNested ? ($dataJson->en ?? null) : $dataJson;
        $dataId      = $isNested ? ($dataJson->id ?? null) : $dataJson;
        $dataJa      = $isNested ? ($dataJson->ja ?? null) : $dataJson;
    @endphp

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">

                        <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <p class="text-xs text-secondary mb-1">Nama Menu</p>
                                <h6 class="mb-0">
                                    @php
                                        $menuLabel = \Illuminate\Support\Facades\DB::table('sys_enum')
                                            ->where('idenum', 'investor_menu')
                                            ->where('value', $list->menu_key)
                                            ->value('name');
                                    @endphp
                                    {{ $menuLabel ?? ucwords(str_replace('-', ' ', $list->menu_key)) }}
                                </h6>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="text-xs text-secondary mb-1">Template Tampilan</p>
                                <h6 class="mb-0">
                                    @if ($list->template_type == 'text_editor')
                                        Text Editor (Berita)
                                    @elseif($list->template_type == 'upload_file')
                                        Upload File
                                    @elseif($list->template_type == 'collapse')
                                        Collapse (Multi-Item)
                                    @else
                                        {{ $list->template_type }}
                                    @endif
                                </h6>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="text-xs text-secondary mb-1">Status</p>
                                <h6 class="mb-0">
                                    <span class="badge bg-gradient-{{ $list->isactive == 1 ? 'success' : 'danger' }}">
                                        {{ $list->isactive == 1 ? 'Aktif' : 'Tidak Aktif' }}
                                    </span>
                                </h6>
                            </div>
                        </div>

                        {{-- ── LABEL SIDEBAR PER BAHASA ── --}}
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm mt-3">
                            <i class="fas fa-globe me-1"></i> Label Sidebar per Bahasa
                        </p>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <p class="text-xs text-secondary mb-1">&#127470;&#127465; Label Indonesia</p>
                                <h6 class="mb-0">{{ $list->label_id ?: '<em class="text-muted text-sm">—</em>' }}</h6>
                            </div>
                            <div class="col-md-4 mb-3">
                                <p class="text-xs text-secondary mb-1">&#127468;&#127463; Label English</p>
                                <h6 class="mb-0">{{ $list->label_en ?: '<em class="text-muted text-sm">—</em>' }}</h6>
                            </div>
                            <div class="col-md-4 mb-3">
                                <p class="text-xs text-secondary mb-1">&#127471;&#127477; Label Japan</p>
                                <h6 class="mb-0">{{ $list->label_jp ?: '<em class="text-muted text-sm">—</em>' }}</h6>
                            </div>
                        </div>

                        {{-- ── DATA KONTEN ── --}}
                        <hr class="horizontal dark">
                        <h6 class="text-uppercase text-sm mt-4">Data Konten ({{ $list->template_type }})</h6>

                        {{-- ── Language Tab Switcher ── --}}
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <span class="text-xs text-muted me-1"><i class="fas fa-globe me-1"></i>Pilih Bahasa:</span>
                            <button type="button" class="btn btn-sm btn-success mb-0 show-lang-btn active" data-lang="id">
                                &#127470;&#127465; Indonesia
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary mb-0 show-lang-btn" data-lang="en">
                                &#127468;&#127463; English
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger mb-0 show-lang-btn" data-lang="ja">
                                &#127471;&#127477; Japan
                            </button>
                        </div>

                        @if ($list->template_type == 'text_editor')
                            {{-- ID --}}
                            <div class="show-lang-pane" id="pane-id">
                                <div class="card bg-gray-100 p-3">
                                    <p class="text-xs text-muted mb-1">&#127470;&#127465; Konten Indonesia</p>
                                    <div class="bg-white p-3 border border-radius-md">
                                        {!! $dataId->content ?? '<em class="text-muted">Tidak ada konten</em>' !!}
                                    </div>
                                </div>
                            </div>
                            {{-- EN --}}
                            <div class="show-lang-pane" id="pane-en" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    <p class="text-xs text-muted mb-1">&#127468;&#127463; Konten English</p>
                                    <div class="bg-white p-3 border border-radius-md">
                                        {!! $dataEn->content ?? '<em class="text-muted">No content</em>' !!}
                                    </div>
                                </div>
                            </div>
                            {{-- JA --}}
                            <div class="show-lang-pane" id="pane-ja" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    <p class="text-xs text-muted mb-1">&#127471;&#127477; コンテンツ（日本語）</p>
                                    <div class="bg-white p-3 border border-radius-md">
                                        {!! $dataJa->content ?? '<em class="text-muted">コンテンツなし</em>' !!}
                                    </div>
                                </div>
                            </div>

                        {{-- UPLOAD FILE --}}
                        @elseif($list->template_type == 'upload_file')
                            {{-- ID --}}
                            <div class="show-lang-pane" id="pane-id">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataId->items))
                                        <div class="row">
                                            @foreach ($dataId->items as $idx => $card)
                                                @php $cardEn = $dataEn->items[$idx] ?? null; @endphp
                                                <div class="col-md-6 mb-3">
                                                    <div class="card p-3 border">
                                                        <p class="text-sm mb-1"><strong>Judul:</strong> {{ $card->judul ?? '-' }}</p>
                                                        @if (!empty($card->sub_judul))
                                                            <div class="mt-2">
                                                                <strong>Sub Judul:</strong>
                                                                <div class="mt-1 bg-white p-2 border border-radius-sm">{!! $card->sub_judul !!}</div>
                                                            </div>
                                                        @endif
                                                        <p class="text-sm mt-3 mb-1"><strong>File (PDF):</strong>
                                                            @if (!empty($cardEn->file_url))
                                                                <a href="{{ asset($cardEn->file_url) }}" target="_blank"
                                                                    class="text-primary text-decoration-none font-weight-bold">
                                                                    <i class="fas fa-file-pdf text-danger"></i> Lihat
                                                                </a>
                                                            @else
                                                                -
                                                            @endif
                                                        </p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>Tidak ada item file upload yang tersimpan.</em>
                                    @endif
                                </div>
                            </div>
                            {{-- EN --}}
                            <div class="show-lang-pane" id="pane-en" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataEn->items))
                                        <div class="row">
                                            @foreach ($dataEn->items as $card)
                                                <div class="col-md-6 mb-3">
                                                    <div class="card p-3 border">
                                                        <p class="text-sm mb-1"><strong>Title:</strong> {{ $card->judul ?? '-' }}</p>
                                                        @if (!empty($card->sub_judul))
                                                            <div class="mt-2">
                                                                <strong>Sub Title:</strong>
                                                                <div class="mt-1 bg-white p-2 border border-radius-sm">{!! $card->sub_judul !!}</div>
                                                            </div>
                                                        @endif
                                                        <p class="text-sm mt-3 mb-1"><strong>File (PDF):</strong>
                                                            @if (!empty($card->file_url))
                                                                <a href="{{ asset($card->file_url) }}" target="_blank"
                                                                    class="text-primary text-decoration-none font-weight-bold">
                                                                    <i class="fas fa-file-pdf text-danger"></i> View
                                                                </a>
                                                            @else
                                                                -
                                                            @endif
                                                        </p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>No upload file items stored.</em>
                                    @endif
                                </div>
                            </div>
                            {{-- JA --}}
                            <div class="show-lang-pane" id="pane-ja" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataJa->items))
                                        <div class="row">
                                            @foreach ($dataJa->items as $idx => $card)
                                                @php $cardEn = $dataEn->items[$idx] ?? null; @endphp
                                                <div class="col-md-6 mb-3">
                                                    <div class="card p-3 border">
                                                        <p class="text-sm mb-1"><strong>タイトル:</strong> {{ $card->judul ?? '-' }}</p>
                                                        @if (!empty($card->sub_judul))
                                                            <div class="mt-2">
                                                                <strong>サブタイトル:</strong>
                                                                <div class="mt-1 bg-white p-2 border border-radius-sm">{!! $card->sub_judul !!}</div>
                                                            </div>
                                                        @endif
                                                        <p class="text-sm mt-3 mb-1"><strong>ファイル (PDF):</strong>
                                                            @if (!empty($cardEn->file_url))
                                                                <a href="{{ asset($cardEn->file_url) }}" target="_blank"
                                                                    class="text-primary text-decoration-none font-weight-bold">
                                                                    <i class="fas fa-file-pdf text-danger"></i> 表示
                                                                </a>
                                                            @else
                                                                -
                                                            @endif
                                                        </p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>保存されたファイルはありません。</em>
                                    @endif
                                </div>
                            </div>

                        {{-- COLLAPSE --}}
                        @elseif($list->template_type == 'collapse')
                            {{-- ID --}}
                            <div class="show-lang-pane" id="pane-id">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataId->groups))
                                        <div class="accordion" id="accordionCollapse_id">
                                            @foreach ($dataId->groups as $gIdx => $group)
                                                @php $groupEn = $dataEn->groups[$gIdx] ?? null; @endphp
                                                <div class="accordion-item mb-3 border">
                                                    <h5 class="accordion-header" id="heading_id_{{ $gIdx }}">
                                                        <button class="accordion-button bg-light font-weight-bold" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse_id_{{ $gIdx }}"
                                                            aria-expanded="true">
                                                            {{ $group->group_nama ?? '-' }}
                                                        </button>
                                                    </h5>
                                                    <div id="collapse_id_{{ $gIdx }}" class="accordion-collapse collapse show"
                                                        data-bs-parent="#accordionCollapse_id">
                                                        <div class="accordion-body bg-white border-top">
                                                            @if (!empty($group->items))
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-sm mb-0">
                                                                        <thead class="bg-light text-secondary text-xs">
                                                                            <tr>
                                                                                <th class="font-weight-bolder">Judul Item</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (ID)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (EN)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (JP)</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody class="text-sm">
                                                                            @foreach ($group->items as $iIdx => $item)
                                                                                @php $itemEn = $groupEn->items[$iIdx] ?? null; @endphp
                                                                                <tr>
                                                                                    <td class="p-2">{{ $item->judul ?? '-' }}</td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_id))
                                                                                            <a href="{{ asset($itemEn->file_url_id) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> Lihat
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_en))
                                                                                            <a href="{{ asset($itemEn->file_url_en) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> Lihat
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_jp))
                                                                                            <a href="{{ asset($itemEn->file_url_jp) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> Lihat
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            @else
                                                                <em>Tidak ada item dalam group ini.</em>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>Tidak ada group collapse yang tersimpan.</em>
                                    @endif
                                </div>
                            </div>
                            {{-- EN --}}
                            <div class="show-lang-pane" id="pane-en" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataEn->groups))
                                        <div class="accordion" id="accordionCollapse_en">
                                            @foreach ($dataEn->groups as $gIdx => $group)
                                                <div class="accordion-item mb-3 border">
                                                    <h5 class="accordion-header" id="heading_en_{{ $gIdx }}">
                                                        <button class="accordion-button bg-light font-weight-bold" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse_en_{{ $gIdx }}"
                                                            aria-expanded="true">
                                                            {{ $group->group_nama ?? '-' }}
                                                        </button>
                                                    </h5>
                                                    <div id="collapse_en_{{ $gIdx }}" class="accordion-collapse collapse show"
                                                        data-bs-parent="#accordionCollapse_en">
                                                        <div class="accordion-body bg-white border-top">
                                                            @if (!empty($group->items))
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-sm mb-0">
                                                                        <thead class="bg-light text-secondary text-xs">
                                                                            <tr>
                                                                                <th class="font-weight-bolder">Item Title</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (ID)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (EN)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (JP)</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody class="text-sm">
                                                                            @foreach ($group->items as $item)
                                                                                <tr>
                                                                                    <td class="p-2">{{ $item->judul ?? '-' }}</td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($item->file_url_id))
                                                                                            <a href="{{ asset($item->file_url_id) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> View
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($item->file_url_en))
                                                                                            <a href="{{ asset($item->file_url_en) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> View
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($item->file_url_jp))
                                                                                            <a href="{{ asset($item->file_url_jp) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> View
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            @else
                                                                <em>No items in this group.</em>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>No collapse groups stored.</em>
                                    @endif
                                </div>
                            </div>
                            {{-- JA --}}
                            <div class="show-lang-pane" id="pane-ja" style="display:none;">
                                <div class="card bg-gray-100 p-3">
                                    @if (!empty($dataJa->groups))
                                        <div class="accordion" id="accordionCollapse_ja">
                                            @foreach ($dataJa->groups as $gIdx => $group)
                                                @php $groupEn = $dataEn->groups[$gIdx] ?? null; @endphp
                                                <div class="accordion-item mb-3 border">
                                                    <h5 class="accordion-header" id="heading_ja_{{ $gIdx }}">
                                                        <button class="accordion-button bg-light font-weight-bold" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse_ja_{{ $gIdx }}"
                                                            aria-expanded="true">
                                                            {{ $group->group_nama ?? '-' }}
                                                        </button>
                                                    </h5>
                                                    <div id="collapse_ja_{{ $gIdx }}" class="accordion-collapse collapse show"
                                                        data-bs-parent="#accordionCollapse_ja">
                                                        <div class="accordion-body bg-white border-top">
                                                            @if (!empty($group->items))
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-sm mb-0">
                                                                        <thead class="bg-light text-secondary text-xs">
                                                                            <tr>
                                                                                <th class="font-weight-bolder">アイテムタイトル</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (ID)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (EN)</th>
                                                                                <th width="120" class="text-center font-weight-bolder">File (JP)</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody class="text-sm">
                                                                            @foreach ($group->items as $iIdx => $item)
                                                                                @php $itemEn = $groupEn->items[$iIdx] ?? null; @endphp
                                                                                <tr>
                                                                                    <td class="p-2">{{ $item->judul ?? '-' }}</td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_id))
                                                                                            <a href="{{ asset($itemEn->file_url_id) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> 表示
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_en))
                                                                                            <a href="{{ asset($itemEn->file_url_en) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> 表示
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                    <td class="text-center p-2">
                                                                                        @if (!empty($itemEn->file_url_jp))
                                                                                            <a href="{{ asset($itemEn->file_url_jp) }}" target="_blank"
                                                                                                class="text-primary text-decoration-none font-weight-bold">
                                                                                                <i class="fas fa-file-pdf text-danger"></i> 表示
                                                                                            </a>
                                                                                        @else - @endif
                                                                                    </td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            @else
                                                                <em>このグループにアイテムはありません。</em>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <em>グループデータがありません。</em>
                                    @endif
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const langColors = { id: 'btn-success', en: 'btn-primary', ja: 'btn-danger' };

            document.querySelectorAll('.show-lang-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const lang = this.dataset.lang;

                    // Update tombol
                    document.querySelectorAll('.show-lang-btn').forEach(function (b) {
                        const l = b.dataset.lang;
                        b.className = 'btn btn-sm mb-0 show-lang-btn ' +
                            (l === lang ? langColors[l] : 'btn-outline-' + langColors[l].replace('btn-', ''));
                    });

                    // Tampilkan pane yang sesuai
                    document.querySelectorAll('.show-lang-pane').forEach(function (p) {
                        p.style.display = 'none';
                    });
                    const target = document.getElementById('pane-' + lang);
                    if (target) target.style.display = '';
                });
            });
        });
    </script>
@endsection