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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="nav-wrapper">
                <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')
                    <button class="btn btn-primary mb-0" id="btn-main-save">
                        <i class="fas fa-floppy-disk me-1"></i> Simpan
                    </button>
                @endif
            </div>
        </div>
    </div>

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

            {{-- Hidden: JSON data dikirim ke controller --}}
            <input type="hidden" name="data" id="json_data_input" value="">

            {{-- ── Card 1: Header ── --}}
            <div class="card mb-4">
                <div class="card-body">
                    <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                    <hr class="horizontal dark mt-0">

                    @php
                        $menuKeyOptions = \Illuminate\Support\Facades\DB::table('sys_enum')
                            ->where('idenum', 'investor_menu')
                            ->where('value', '!=', 'urut')
                            ->orderBy('name')
                            ->pluck('name', 'value')
                            ->toArray();
                    @endphp

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Menu Key (Nama Halaman)</label>
                                <input type="hidden" name="menu_key" value="{{ $list->menu_key }}">
                                <select class="form-control" disabled>
                                    @foreach ($menuKeyOptions as $val => $label)
                                        <option value="{{ $val }}"
                                            {{ $list->menu_key === $val ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Template Tampilan</label>
                                <select class="form-control" name="template_type" id="template_type_select" required>
                                    <option value="">-- Pilih Template --</option>
                                    <option value="text_editor"
                                        {{ $list->template_type === 'text_editor' ? 'selected' : '' }}>Text Editor
                                    </option>
                                    <option value="upload_file"
                                        {{ $list->template_type === 'upload_file' ? 'selected' : '' }}>Upload File
                                        (Kartu PDF)</option>
                                    <option value="collapse" {{ $list->template_type === 'collapse' ? 'selected' : '' }}>
                                        Collapse (Laporan /
                                        Pengumuman)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Card 2: Label Sidebar & URL Slug per Bahasa ── --}}
            <div class="card mb-4">
                <div class="card-body">
                    <p class="text-uppercase text-sm mb-2">
                        <i class="fas fa-globe me-1"></i> Label Sidebar &amp; URL Slug per Bahasa
                    </p>
                    <hr class="horizontal dark mt-0">

                    {{-- LABEL SIDEBAR --}}
                    <p class="text-xs text-uppercase text-muted mb-2">Label Sidebar</p>
                    <div class="row mb-2">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127470;&#127465; Label Bahasa Indonesia
                                </label>
                                <input type="text" class="form-control" name="label_id"
                                    value="{{ $list->label_id ?? '' }}" placeholder="Contoh: Laporan Tahunan">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127468;&#127463; Label English
                                </label>
                                <input type="text" class="form-control" name="label_en"
                                    value="{{ $list->label_en ?? '' }}" placeholder="Contoh: Annual Reports">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127471;&#127477; Label Japan
                                </label>
                                <input type="text" class="form-control" name="label_jp"
                                    value="{{ $list->label_jp ?? '' }}" placeholder="例: 年次報告書">
                            </div>
                        </div>
                    </div>

                    <hr class="horizontal dark">

                    {{-- URL SLUG --}}
                    <div class="row" style="display:none;">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127470;&#127465; Slug Indonesia
                                    <span class="text-muted">(opsional)</span>
                                </label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text text-muted" style="font-size:11px;white-space:nowrap;">
                                        /id/investors/
                                    </span>
                                    <input type="text" class="form-control" name="slug_id"
                                        value="{{ $list->slug_id ?? '' }}" placeholder="laporan-tahunan">
                                </div>
                                <small class="text-muted">Kosong = pakai Menu Key</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127468;&#127463; Slug English
                                    <span class="text-muted">(otomatis)</span>
                                </label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text text-muted" style="font-size:11px;white-space:nowrap;">
                                        /investors/
                                    </span>
                                    <input type="text" class="form-control bg-light text-muted" id="slug_en_preview"
                                        readonly value="{{ $list->menu_key }}">
                                </div>
                                <small class="text-muted">Selalu mengikuti Menu Key</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label text-xs">
                                    &#127471;&#127477; Slug Japan
                                    <span class="text-muted">(opsional)</span>
                                </label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text text-muted" style="font-size:11px;white-space:nowrap;">
                                        /ja/investors/
                                    </span>
                                    <input type="text" class="form-control" name="slug_jp"
                                        value="{{ $list->slug_jp ?? '' }}" placeholder="年次報告書">
                                </div>
                                <small class="text-muted">Kosong = pakai Menu Key. Boleh pakai kanji.</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- ── Dynamic Section ── --}}
            <div id="dynamic-container" style="display:none;">

                {{-- TEXT EDITOR --}}
                <div id="container-text-editor" class="dynamic-section" style="display:none;">
                    <div class="card mb-4">
                        <div class="card-body">
                            <p class="text-uppercase text-sm mb-2">Konten</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Language 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 lang-editor-btn"
                                    data-lang="id">
                                    &#127470;&#127465; Indonesia
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-primary mb-0 lang-editor-btn"
                                    data-lang="en">
                                    &#127468;&#127463; English
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger mb-0 lang-editor-btn"
                                    data-lang="jp">
                                    &#127471;&#127477; Japan
                                </button>
                            </div>

                            {{-- Editor ID --}}
                            <div class="lang-editor-pane" id="editor-pane-id">
                                <textarea class="form-control" id="content_id"></textarea>
                            </div>

                            {{-- Editor EN --}}
                            <div class="lang-editor-pane" id="editor-pane-en" style="display:none;">
                                <textarea class="form-control" id="content_en"></textarea>
                            </div>

                            {{-- Editor JP --}}
                            <div class="lang-editor-pane" id="editor-pane-jp" style="display:none;">
                                <textarea class="form-control" id="content_jp"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- UPLOAD FILE (multi kartu PDF) --}}
                <div id="container-upload-file" class="dynamic-section" style="display:none;">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <p class="text-uppercase text-sm mb-0">Daftar Kartu PDF</p>
                                <button type="button" class="btn btn-sm btn-success mb-0" id="btn-add-card">
                                    <i class="fas fa-plus"></i> Tambah Kartu
                                </button>
                            </div>
                            <div class="alert alert-info py-2 px-3 mb-3" style="font-size:12px;">
                                <i class="fas fa-circle-info me-1"></i>
                                Isi <strong>Judul</strong> dan <strong>Sub Judul</strong> untuk ketiga bahasa pada
                                setiap kartu. File PDF bersifat universal (satu file untuk semua bahasa).
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div id="upload-cards-wrapper"></div>
                        </div>
                    </div>
                </div>

                {{-- COLLAPSE (multi group) --}}
                <div id="container-collapse" class="dynamic-section" style="display:none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <p class="text-uppercase text-sm mb-0">Daftar Group (Tahun / Kategori)</p>
                        <button type="button" class="btn btn-sm btn-success mb-0" id="btn-add-group">
                            <i class="fas fa-plus"></i> Tambah Group
                        </button>
                    </div>
                    <div class="alert alert-info py-2 px-3 mb-3" style="font-size:12px;">
                        <i class="fas fa-circle-info me-1"></i>
                        Isi nama group dan judul item untuk ketiga bahasa <strong>(ID / EN / JP)</strong>. File dokumen
                        diupload per bahasa dan berlaku sesuai pilihan bahasa pengguna.
                    </div>
                    <div id="collapse-groups-wrapper"></div>
                </div>

            </div>
            {{-- end dynamic-container --}}

        </form>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script>
        $(document).ready(function() {

            let existingData = {!! json_encode(
                json_decode($list->data) ?? (object) [],
                JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP,
            ) !!};

            let isNested = existingData.en !== undefined ||
                existingData.id !== undefined ||
                existingData.ja !== undefined;

            let dataEn = isNested ? (existingData.en ?? {}) : existingData;
            let dataId = isNested ? (existingData.id ?? {}) : {};
            let dataJa = isNested ? (existingData.ja ?? {}) : {};

            const SUMMERNOTE_TOOLBAR = [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ];

            function initSummernote(selector) {
                $(selector).summernote({
                    height: 280,
                    toolbar: SUMMERNOTE_TOOLBAR,
                });
            }

            const snInited = {
                id: false,
                en: false,
                jp: false
            };
            const langColors = {
                id: 'btn-success',
                en: 'btn-primary',
                jp: 'btn-danger'
            };

            function showEditorLang(lang) {
                // Update tombol aktif
                $('.lang-editor-btn').each(function() {
                    let l = $(this).data('lang');
                    $(this)
                        .removeClass(
                            'btn-success btn-primary btn-danger btn-outline-success btn-outline-primary btn-outline-danger'
                        )
                        .addClass(l === lang ?
                            langColors[l] :
                            'btn-outline-' + langColors[l].replace('btn-', '')
                        );
                });

                // Tampil / sembunyikan pane
                $('.lang-editor-pane').hide();
                $('#editor-pane-' + lang).show();

                // Inisialisasi Summernote jika belum, lalu restore konten
                if (!snInited[lang]) {
                    initSummernote('#content_' + lang);
                    let content = lang === 'id' ? (dataId.content ?? '') :
                        lang === 'en' ? (dataEn.content ?? '') :
                        (dataJa.content ?? '');
                    if (content) {
                        setTimeout(function() {
                            $('#content_' + lang).summernote('code', content);
                        }, 150);
                    }
                    snInited[lang] = true;
                }
            }

            $(document).on('click', '.lang-editor-btn', function() {
                showEditorLang($(this).data('lang'));
            });

            let $tpl = $('#template_type_select');
            let cardIndex = 0;
            let groupIndex = 0;


            function addCard(enData, idData, jaData) {
                let idx = cardIndex++;
                let fileUrl = enData ? (enData.file_url ?? '') : '';
                let cardUrut = (enData && enData.urut !== undefined) ? Number(enData.urut) : (idx + 1);

                let existingFileHtml = '';
                if (fileUrl) {
                    let fileName = fileUrl.split('/').pop();
                    existingFileHtml =
                        '<div class="mb-1 card-existing-file" data-existing-url="' + fileUrl + '">' +
                        '<small class="text-success"><i class="fas fa-file-pdf me-1"></i>' +
                        'File saat ini: <strong>' + fileName + '</strong></small><br>' +
                        '<small class="text-muted">Kosongkan input di bawah jika tidak ingin mengganti file.</small>' +
                        '</div>';
                }

                let judulId = idData ? (idData.judul ?? '') : '';
                let judulEn = enData ? (enData.judul ?? '') : '';
                let judulJp = jaData ? (jaData.judul ?? '') : '';
                let subJudulId = idData ? (idData.sub_judul ?? '') : '';
                let subJudulEn = enData ? (enData.sub_judul ?? '') : '';
                let subJudulJp = jaData ? (jaData.sub_judul ?? '') : '';

                let html = '<div class="card mb-3 upload-card-row border" data-index="' + idx +
                    '" style="border-color:#e9ecef!important;">' +
                    '<div class="card-body p-3">' +
                    '<div class="d-flex justify-content-between align-items-center mb-3">' +
                    '<span class="text-xs text-uppercase text-muted fw-bold">Kartu #' + (idx + 1) + '</span>' +
                    '<button type="button" class="btn btn-sm btn-outline-secondary btn-remove-card mb-0 px-2 py-1" style="font-size:11px;">' +
                    '<i class="fas fa-times me-1"></i>Hapus' +
                    '</button>' +
                    '</div>' +
                    '<div class="row mb-3 align-items-end">' +
                    '<div class="col-md-6 form-group">' +
                    '<label class="form-control-label text-xs mb-1">File PDF <span class="text-muted">(universal)</span></label>' +
                    existingFileHtml +
                    '<input type="file" class="form-control form-control-sm card_pdf_file"' +
                    ' name="card_pdf[' + idx + ']" accept=".pdf">' +
                    '<small class="text-muted" style="font-size:10px;">Thumbnail diambil dari halaman pertama PDF.</small>' +
                    '</div>' +
                    '<div class="col-md-2 form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-1">Urut</label>' +
                    '<input type="number" min="1" class="form-control form-control-sm card_urut" value="' +
                    cardUrut + '">' +
                    '</div>' +
                    '</div>' +
                    '<hr class="horizontal dark my-2">' +
                    '<div class="form-group mb-2">' +
                    '<label class="form-control-label text-xs mb-2">Judul Kartu <span class="text-muted">(per bahasa)</span></label>' +
                    '<div class="row g-2">' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127470;&#127465; Indonesia</label>' +
                    '<input type="text" class="form-control form-control-sm card_judul_id"' +
                    ' value="' + judulId + '" placeholder="Judul (ID)">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127468;&#127463; English</label>' +
                    '<input type="text" class="form-control form-control-sm card_judul_en"' +
                    ' value="' + judulEn + '" placeholder="Title (EN)">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127471;&#127477; Japan</label>' +
                    '<input type="text" class="form-control form-control-sm card_judul_jp"' +
                    ' value="' + judulJp + '" placeholder="&#12479;&#12452;&#12488;&#12523; (JP)">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-2">Sub Judul / Deskripsi <span class="text-muted">(opsional)</span></label>' +
                    '<div class="row g-2">' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm card_sub_judul_id"' +
                    ' rows="2" placeholder="Deskripsi (ID)">' + subJudulId + '</textarea>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm card_sub_judul_en"' +
                    ' rows="2" placeholder="Description (EN)">' + subJudulEn + '</textarea>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm card_sub_judul_jp"' +
                    ' rows="2" placeholder="&#35500;&#26126; (JP)">' + subJudulJp + '</textarea>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                $('#upload-cards-wrapper').append(html);
            }

            $('#btn-add-card').on('click', function() {
                addCard(null, null, null);
            });
            $(document).on('click', '.btn-remove-card', function() {
                $(this).closest('.upload-card-row').remove();
            });

            /* ─────────────────────────────────────────────────────────────
             *  COLLAPSE — addGroup(enGData, idGData, jaGData)
             * ───────────────────────────────────────────────────────────── */
            function addGroup(enGData, idGData, jaGData) {
                let gIdx = groupIndex++;
                let groupNamaId = idGData ? (idGData.group_nama ?? '') : '';
                let groupNamaEn = enGData ? (enGData.group_nama ?? '') : '';
                let groupNamaJp = jaGData ? (jaGData.group_nama ?? '') : '';
                let groupUrut = (enGData && enGData.urut !== undefined) ? Number(enGData.urut) : (gIdx + 1);

                let html = '<div class="card mb-3 collapse-group-row border" data-gindex="' + gIdx +
                    '" style="border-color:#e9ecef!important;">' +
                    '<div class="card-body p-3">' +
                    '<div class="d-flex justify-content-between align-items-center mb-3">' +
                    '<span class="text-xs text-uppercase text-muted fw-bold">Group #' + (gIdx + 1) + '</span>' +
                    '<button type="button" class="btn btn-sm btn-outline-secondary btn-remove-group mb-0 px-2 py-1" style="font-size:11px;">' +
                    '<i class="fas fa-times me-1"></i>Hapus' +
                    '</button>' +
                    '</div>' +
                    '<div class="row mb-3 align-items-end">' +
                    '<div class="col-md-10 form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-2">Nama Group <span class="text-muted">(Tahun / Kategori)</span></label>' +
                    '<div class="row g-2">' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127470;&#127465; Indonesia</label>' +
                    '<input type="text" class="form-control form-control-sm group_nama_id"' +
                    ' value="' + groupNamaId + '" placeholder="contoh: 2025">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127468;&#127463; English</label>' +
                    '<input type="text" class="form-control form-control-sm group_nama_en"' +
                    ' value="' + groupNamaEn + '" placeholder="e.g.: 2025">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127471;&#127477; Japan</label>' +
                    '<input type="text" class="form-control form-control-sm group_nama_jp"' +
                    ' value="' + groupNamaJp + '" placeholder="&#20363;: 2025">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-2 form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-1">Urut</label>' +
                    '<input type="number" min="1" class="form-control form-control-sm group_urut" value="' +
                    groupUrut + '">' +
                    '</div>' +
                    '</div>' +
                    '<hr class="horizontal dark">' +
                    '<div class="d-flex justify-content-between align-items-center mb-2">' +
                    '<small class="text-uppercase text-muted" style="font-size:10px;">Daftar Item</small>' +
                    '<button type="button" class="btn btn-sm btn-outline-dark btn-add-item mb-0 px-2 py-1"' +
                    ' data-gindex="' + gIdx + '" style="font-size:11px;">' +
                    '<i class="fas fa-plus me-1"></i>Tambah Item' +
                    '</button>' +
                    '</div>' +
                    '<div class="collapse-items-wrapper" id="items-wrapper-' + gIdx + '"></div>' +
                    '</div>' +
                    '</div>';

                $('#collapse-groups-wrapper').append(html);

                let enItems = enGData ? (enGData.items ?? []) : [];
                let idItems = idGData ? (idGData.items ?? []) : [];
                let jaItems = jaGData ? (jaGData.items ?? []) : [];

                if (enItems.length > 0) {
                    enItems.forEach(function(enItem, i) {
                        addItem(gIdx, enItem, idItems[i] ?? null, jaItems[i] ?? null);
                    });
                } else {
                    addItem(gIdx, null, null, null);
                }
            }

            function addItem(gIdx, enData, idData, jaData) {
                let iIdx = $('#items-wrapper-' + gIdx + ' .collapse-item-row').length;

                function existingFileInfo(fileUrl, dataAttr) {
                    if (!fileUrl) return '';
                    let name = fileUrl.split('/').pop();
                    return '<div class="mb-1 item-existing-file" ' + dataAttr + '="' + fileUrl + '">' +
                        '<small class="text-success"><i class="fas fa-file me-1"></i>' + name + '</small>' +
                        '<small class="text-muted d-block">Kosongkan jika tidak ingin mengganti.</small>' +
                        '</div>';
                }

                let judulId = idData ? (idData.judul ?? '') : '';
                let judulEn = enData ? (enData.judul ?? '') : '';
                let judulJp = jaData ? (jaData.judul ?? '') : '';
                let deskripsiId = idData ? (idData.deskripsi ?? '') : '';
                let deskripsiEn = enData ? (enData.deskripsi ?? '') : '';
                let deskripsiJp = jaData ? (jaData.deskripsi ?? '') : '';
                let fileUrlId = enData ? (enData.file_url_id ?? null) : null;
                let fileUrlEn = enData ? (enData.file_url_en ?? null) : null;
                let fileUrlJp = enData ? (enData.file_url_jp ?? null) : null;
                let itemUrut = (enData && enData.urut !== undefined) ? Number(enData.urut) : (iIdx + 1);

                let html = '<div class="collapse-item-row border rounded mb-2 p-3 bg-light" data-iindex="' + gIdx +
                    '_' + iIdx + '" style="border-color:#dee2e6!important;">' +
                    '<div class="d-flex justify-content-between align-items-center mb-2">' +
                    '<small class="text-muted" style="font-size:11px;">Item #' + (iIdx + 1) + '</small>' +
                    '<button type="button" class="btn btn-sm btn-outline-secondary btn-remove-item mb-0 px-2 py-1" style="font-size:11px;">' +
                    '<i class="fas fa-times"></i>' +
                    '</button>' +
                    '</div>' +
                    '<div class="row align-items-end mb-2">' +
                    '<div class="col-md-10 form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-1">' +
                    'Judul Item <span class="text-muted">(per bahasa)</span>' +
                    '</label>' +
                    '<div class="row g-1">' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127470;&#127465; Indonesia</label>' +
                    '<input type="text" class="form-control form-control-sm collapse_item_judul_id"' +
                    ' value="' + judulId + '" placeholder="Judul (ID)">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127468;&#127463; English</label>' +
                    '<input type="text" class="form-control form-control-sm collapse_item_judul_en"' +
                    ' value="' + judulEn + '" placeholder="Title (EN)">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127471;&#127477; Japan</label>' +
                    '<input type="text" class="form-control form-control-sm collapse_item_judul_jp"' +
                    ' value="' + judulJp + '" placeholder="&#12479;&#12452;&#12488;&#12523; (JP)">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-2 form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-1">Urut</label>' +
                    '<input type="number" min="1" class="form-control form-control-sm collapse_item_urut" value="' +
                    itemUrut + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group mb-2">' +
                    '<label class="form-control-label text-xs mb-1">' +
                    'Deskripsi <span class="text-muted">(opsional)</span>' +
                    '</label>' +
                    '<div class="row g-1">' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm collapse_item_deskripsi_id"' +
                    ' rows="2" placeholder="Deskripsi (ID)">' + deskripsiId + '</textarea>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm collapse_item_deskripsi_en"' +
                    ' rows="2" placeholder="Description (EN)">' + deskripsiEn + '</textarea>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<textarea class="form-control form-control-sm collapse_item_deskripsi_jp"' +
                    ' rows="2" placeholder="&#35500;&#26126; (JP)">' + deskripsiJp + '</textarea>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group mb-0">' +
                    '<label class="form-control-label text-xs mb-1">' +
                    'File Dokumen <span class="text-muted">(upload per bahasa, opsional)</span>' +
                    '</label>' +
                    '<div class="row g-1">' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127470;&#127465; Indonesia</label>' +
                    existingFileInfo(fileUrlId, 'data-file-id') +
                    '<input type="file" class="form-control form-control-sm collapse_item_file_id"' +
                    ' name="collapse_file_id[' + gIdx + '][' + iIdx + ']"' +
                    ' accept=".pdf,.doc,.docx">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127468;&#127463; English</label>' +
                    existingFileInfo(fileUrlEn, 'data-file-en') +
                    '<input type="file" class="form-control form-control-sm collapse_item_file_en"' +
                    ' name="collapse_file_en[' + gIdx + '][' + iIdx + ']"' +
                    ' accept=".pdf,.doc,.docx">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label class="form-control-label text-xs mb-1">&#127471;&#127477; Japan</label>' +
                    existingFileInfo(fileUrlJp, 'data-file-jp') +
                    '<input type="file" class="form-control form-control-sm collapse_item_file_jp"' +
                    ' name="collapse_file_jp[' + gIdx + '][' + iIdx + ']"' +
                    ' accept=".pdf,.doc,.docx">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                $('#items-wrapper-' + gIdx).append(html);
            }

            $('#btn-add-group').on('click', function() {
                addGroup(null, null, null);
            });
            $(document).on('click', '.btn-add-item', function() {
                addItem($(this).data('gindex'), null, null, null);
            });
            $(document).on('click', '.btn-remove-group', function() {
                $(this).closest('.collapse-group-row').remove();
            });
            $(document).on('click', '.btn-remove-item', function() {
                $(this).closest('.collapse-item-row').remove();
            });

            /* ─────────────────────────────────────────────────────────────
             *  TEMPLATE CHANGE HANDLER
             *  isInitialLoad = true  → populate dari existingData (DB)
             *  isInitialLoad = false → buat baru kosong (saat user ganti tpl)
             * ───────────────────────────────────────────────────────────── */
            function handleTemplateChange(isInitialLoad) {
                if (isInitialLoad === undefined) isInitialLoad = false;
                let val = $tpl.val();
                $('.dynamic-section').hide();
                $('#dynamic-container').hide();
                if (!val) return;
                $('#dynamic-container').show();

                if (val === 'text_editor') {
                    $('#container-text-editor').show();
                    if (isInitialLoad) {
                        // Init bahasa ID dulu (default), konten akan di-restore di showEditorLang
                        showEditorLang('id');
                    }

                } else if (val === 'upload_file') {
                    $('#container-upload-file').show();
                    if (isInitialLoad) {
                        let enItems = dataEn.items ?? [];
                        let idItems = dataId.items ?? [];
                        let jaItems = dataJa.items ?? [];
                        if (enItems.length > 0) {
                            enItems.forEach(function(enItem, i) {
                                addCard(enItem, idItems[i] ?? null, jaItems[i] ?? null);
                            });
                        } else {
                            addCard(null, null, null);
                        }
                    } else {
                        $('#upload-cards-wrapper').empty();
                        cardIndex = 0;
                        addCard(null, null, null);
                    }

                } else if (val === 'collapse') {
                    $('#container-collapse').show();
                    if (isInitialLoad) {
                        let enGroups = dataEn.groups ?? [];
                        let idGroups = dataId.groups ?? [];
                        let jaGroups = dataJa.groups ?? [];
                        if (enGroups.length > 0) {
                            enGroups.forEach(function(enG, i) {
                                addGroup(enG, idGroups[i] ?? null, jaGroups[i] ?? null);
                            });
                        } else {
                            addGroup(null, null, null);
                        }
                    } else {
                        $('#collapse-groups-wrapper').empty();
                        groupIndex = 0;
                        addGroup(null, null, null);
                    }
                }
            }

            handleTemplateChange(true);
            $tpl.on('change', function() {
                handleTemplateChange(false);
            });

            function toSlug(str) {
                return str
                    .toLowerCase()
                    .trim()
                    .replace(/\s+/g, '-')
                    .replace(/-{2,}/g, '-')
                    .replace(/^-+|-+$/g, '');
            }


            $('input[name="label_id"]').on('input', function() {
                $('input[name="slug_id"]').val(toSlug($(this).val()));
            });

            $('input[name="label_jp"]').on('input', function() {
                $('input[name="slug_jp"]').val(toSlug($(this).val()));
            });


            $('#btn-main-save').on('click', function() {
                let val = $tpl.val();

                if (!val) {
                    alert('Pilih Template Tampilan terlebih dahulu!');
                    return;
                }

                let jsonData = {};

                /* ── TEXT EDITOR ── */
                if (val === 'text_editor') {
                    let contentId = snInited.id ? $('#content_id').summernote('code') : '';
                    let contentEn = snInited.en ? $('#content_en').summernote('code') : '';
                    let contentJp = snInited.jp ? $('#content_jp').summernote('code') : '';

                    jsonData = {
                        en: {
                            content: contentEn
                        },
                        id: {
                            content: contentId
                        },
                        ja: {
                            content: contentJp
                        },
                    };

                    /* ── UPLOAD FILE ── */
                } else if (val === 'upload_file') {
                    let enItems = [],
                        idItems = [],
                        jaItems = [];

                    $('#upload-cards-wrapper .upload-card-row').each(function(loopIdx) {
                        // Re-assign name file input agar index urut
                        $(this).find('.card_pdf_file').attr('name', 'card_pdf[' + loopIdx + ']');

                        // Ambil existing URL dari child element .card-existing-file
                        let existingUrl = $(this).find('[data-existing-url]').data(
                            'existing-url') || null;

                        let itemUrut = Number($(this).find('.card_urut').val()) || (loopIdx + 1);

                        enItems.push({
                            judul: $(this).find('.card_judul_en').val(),
                            sub_judul: $(this).find('.card_sub_judul_en').val(),
                            card_index: loopIdx,
                            file_url: existingUrl,
                            urut: itemUrut,
                        });
                        idItems.push({
                            judul: $(this).find('.card_judul_id').val(),
                            sub_judul: $(this).find('.card_sub_judul_id').val(),
                            urut: itemUrut,
                        });
                        jaItems.push({
                            judul: $(this).find('.card_judul_jp').val(),
                            sub_judul: $(this).find('.card_sub_judul_jp').val(),
                            urut: itemUrut,
                        });
                    });

                    jsonData = {
                        en: {
                            items: enItems
                        },
                        id: {
                            items: idItems
                        },
                        ja: {
                            items: jaItems
                        },
                    };

                    /* ── COLLAPSE ── */
                } else if (val === 'collapse') {
                    let enGroups = [],
                        idGroups = [],
                        jaGroups = [];

                    $('#collapse-groups-wrapper .collapse-group-row').each(function() {
                        let gIdx = $(this).data('gindex');
                        let enItems = [],
                            idItems = [],
                            jaItems = [];
                        let iCounter = 0;

                        $(this).find('.collapse-item-row').each(function() {
                            // Re-assign name input file agar index berurutan
                            $(this).find('.collapse_item_file_id').attr('name',
                                'collapse_file_id[' + gIdx + '][' + iCounter + ']');
                            $(this).find('.collapse_item_file_en').attr('name',
                                'collapse_file_en[' + gIdx + '][' + iCounter + ']');
                            $(this).find('.collapse_item_file_jp').attr('name',
                                'collapse_file_jp[' + gIdx + '][' + iCounter + ']');

                            // Ambil existing file URL dari data-attribute pada child element
                            let existId = $(this).find('[data-file-id]').data('file-id') ||
                                null;
                            let existEn = $(this).find('[data-file-en]').data('file-en') ||
                                null;
                            let existJp = $(this).find('[data-file-jp]').data('file-jp') ||
                                null;
                            let itemUrut = Number($(this).find('.collapse_item_urut')
                                .val()) || (iCounter + 1);

                            enItems.push({
                                judul: $(this).find('.collapse_item_judul_en')
                                    .val(),
                                deskripsi: $(this).find(
                                    '.collapse_item_deskripsi_en').val(),
                                g_index: gIdx,
                                i_index: iCounter,
                                file_url_id: existId,
                                file_url_en: existEn,
                                file_url_jp: existJp,
                                urut: itemUrut,
                            });
                            idItems.push({
                                judul: $(this).find('.collapse_item_judul_id')
                                    .val(),
                                deskripsi: $(this).find(
                                    '.collapse_item_deskripsi_id').val(),
                                urut: itemUrut,
                            });
                            jaItems.push({
                                judul: $(this).find('.collapse_item_judul_jp')
                                    .val(),
                                deskripsi: $(this).find(
                                    '.collapse_item_deskripsi_jp').val(),
                                urut: itemUrut,
                            });
                            iCounter++;
                        });

                        let groupUrut = Number($(this).find('.group_urut').val()) || (gIdx + 1);

                        enGroups.push({
                            group_nama: $(this).find('.group_nama_en').val(),
                            urut: groupUrut,
                            items: enItems,
                        });
                        idGroups.push({
                            group_nama: $(this).find('.group_nama_id').val(),
                            urut: groupUrut,
                            items: idItems,
                        });
                        jaGroups.push({
                            group_nama: $(this).find('.group_nama_jp').val(),
                            urut: groupUrut,
                            items: jaItems,
                        });
                    });

                    jsonData = {
                        en: {
                            groups: enGroups
                        },
                        id: {
                            groups: idGroups
                        },
                        ja: {
                            groups: jaGroups
                        },
                    };
                }

                $('#json_data_input').val(JSON.stringify(jsonData));
                $('#{{ $dmenu }}-form').submit();
            });

        }); // end document.ready
    </script>
@endpush