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

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

    @php
        $existing_menu_keys = \Illuminate\Support\Facades\DB::table('mst_investor')->pluck('menu_key')->toArray();

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

    <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->add == '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) }}" id="{{ $dmenu }}-form"
            enctype="multipart/form-data" novalidate>
            @csrf

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

            {{-- ── Header Utama ── --}}
            <div class="card mb-4">
                <div class="card-body">
                    <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                    <hr class="horizontal dark mt-0">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Nama Menu</label>
                                <select class="form-control" name="menu_key" required>
                                    <option value="">-- Pilih Halaman Investor --</option>
                                    @if (empty($available_menu_options))
                                        <option disabled>Semua menu sudah ditambahkan</option>
                                    @else
                                        @foreach ($available_menu_options as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    @endif
                                </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">Text Editor</option>
                                    <option value="upload_file">Upload File (Kartu PDF)</option>
                                    <option value="collapse">Collapse (Laporan / Pengumuman)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Label Sidebar & URL Slug per Bahasa ── --}}
            <div class="card mb-2">
                <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"
                                    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"
                                    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" 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" 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 placeholder="(otomatis dari 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" 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;">

                <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>

                <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>

                <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 sekali dan berlaku untuk semua bahasa.
                    </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() {

            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) {
                // 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
                if (!snInited[lang]) {
                    initSummernote('#content_' + lang);
                    snInited[lang] = true;
                }
            }

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

            let $tpl = $('#template_type_select');
            let textEditorFirstShow = true;

            function handleTemplateChange() {
                let val = $tpl.val();
                $('.dynamic-section').hide();
                $('#dynamic-container').hide();
                if (!val) return;

                $('#dynamic-container').show();

                if (val === 'text_editor') {
                    $('#container-text-editor').show();
                    // Init editor ID (bahasa default) saat pertama kali ditampilkan
                    if (textEditorFirstShow) {
                        showEditorLang('id');
                        textEditorFirstShow = false;
                    }

                } else if (val === 'upload_file') {
                    $('#container-upload-file').show();
                    if ($('#upload-cards-wrapper .upload-card-row').length === 0) addCard();

                } else if (val === 'collapse') {
                    $('#container-collapse').show();
                    if ($('#collapse-groups-wrapper .collapse-group-row').length === 0) addGroup();
                }
            }

            handleTemplateChange();
            $tpl.on('change', handleTemplateChange);

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


            function syncMenuKeyFields() {
                let $select = $('select[name="menu_key"]');
                let menuKeyVal = $select.val() || '';
                let menuKeyText = $select.find('option:selected').text().trim();
                let isPlaceholder = (menuKeyVal === '' || menuKeyText.startsWith('--'));

                // Slug EN preview (readonly)
                $('#slug_en_preview').val(menuKeyVal);

                // Label EN — auto dari nama option, kosongkan kalau placeholder
                $('input[name="label_en"]').val(isPlaceholder ? '' : menuKeyText);
            }

            $('select[name="menu_key"]').on('change', syncMenuKeyFields);
            syncMenuKeyFields(); // init saat load


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


            let cardIndex = 0;

            function addCard() {
                let idx = cardIndex++;
                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>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-outline-info btn-duplicate-card mb-0 px-2 py-1" style="font-size:11px;" title="Duplikat kartu ini">
                                    <i class="fas fa-copy me-1"></i>Duplikat
                                </button>
                                <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>

                        {{-- File PDF --}}
                        <div class="row mb-3">
                            <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>
                                <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>

                        <hr class="horizontal dark my-2">

                        {{-- Judul per bahasa --}}
                        <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" 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" 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" placeholder="タイトル (JP)">
                                </div>
                            </div>
                        </div>

                        {{-- Sub Judul per bahasa --}}
                        <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)"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm card_sub_judul_en"
                                              rows="2" placeholder="Description (EN)"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm card_sub_judul_jp"
                                              rows="2" placeholder="説明 (JP)"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>`;
                $('#upload-cards-wrapper').append(html);
            }

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

            let groupIndex = 0;

            function addGroup() {
                let gIdx = groupIndex++;
                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>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-outline-info btn-duplicate-group mb-0 px-2 py-1" style="font-size:11px;" title="Duplikat group ini">
                                    <i class="fas fa-copy me-1"></i>Duplikat
                                </button>
                                <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>

                        {{-- Nama Group per bahasa --}}
                        <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" 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" 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" placeholder="例: 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="${gIdx + 1}">
                            </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);
                addItem(gIdx);
            }

            function addItem(gIdx) {
                let iIdx = $(`#items-wrapper-${gIdx} .collapse-item-row`).length;
                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>

                    {{-- Judul Item per bahasa --}}
                    <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" 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" 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" placeholder="タイトル (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="${iIdx + 1}">
                        </div>
                    </div>

                    {{-- Deskripsi per bahasa --}}
                    <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)"></textarea>
                            </div>
                            <div class="col-md-4">
                                <textarea class="form-control form-control-sm collapse_item_deskripsi_en" rows="2" placeholder="Description (EN)"></textarea>
                            </div>
                            <div class="col-md-4">
                                <textarea class="form-control form-control-sm collapse_item_deskripsi_jp" rows="2" placeholder="説明 (JP)"></textarea>
                            </div>
                        </div>
                    </div>

                    {{-- File Upload per bahasa --}}
                    <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>
                                <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>
                                <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>
                                <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', addGroup);
            $(document).on('click', '.btn-add-item', function() {
                addItem($(this).data('gindex'));
            });
            $(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();
            });

            // ── Duplikat Kartu (Upload File) ──
            $(document).on('click', '.btn-duplicate-card', function() {
                let $src = $(this).closest('.upload-card-row');
                let idx = cardIndex++;

                // Ambil nilai dari kartu sumber
                let judulId = $src.find('.card_judul_id').val();
                let judulEn = $src.find('.card_judul_en').val();
                let judulJp = $src.find('.card_judul_jp').val();
                let subId = $src.find('.card_sub_judul_id').val();
                let subEn = $src.find('.card_sub_judul_en').val();
                let subJp = $src.find('.card_sub_judul_jp').val();
                let cardUrut = Number($src.find('.card_urut').val()) || (idx + 1);

                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>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-outline-info btn-duplicate-card mb-0 px-2 py-1" style="font-size:11px;" title="Duplikat kartu ini">
                                    <i class="fas fa-copy me-1"></i>Duplikat
                                </button>
                                <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>

                        <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>
                                <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" placeholder="Judul (ID)" value="${judulId}">
                                </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" placeholder="Title (EN)" value="${judulEn}">
                                </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" placeholder="タイトル (JP)" value="${judulJp}">
                                </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)">${subId}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm card_sub_judul_en"
                                              rows="2" placeholder="Description (EN)">${subEn}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm card_sub_judul_jp"
                                              rows="2" placeholder="説明 (JP)">${subJp}</textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>`;

                $src.after(html);
            });

            // ── Duplikat Group (Collapse) ──
            $(document).on('click', '.btn-duplicate-group', function() {
                let $srcGroup = $(this).closest('.collapse-group-row');
                let newGIdx = groupIndex++;

                // Nama group
                let namaId = $srcGroup.find('.group_nama_id').val();
                let namaEn = $srcGroup.find('.group_nama_en').val();
                let namaJp = $srcGroup.find('.group_nama_jp').val();

                // Kumpulkan semua item dari group sumber
                let srcItems = [];
                $srcGroup.find('.collapse-item-row').each(function() {
                    srcItems.push({
                        judulId: $(this).find('.collapse_item_judul_id').val(),
                        judulEn: $(this).find('.collapse_item_judul_en').val(),
                        judulJp: $(this).find('.collapse_item_judul_jp').val(),
                        deskId: $(this).find('.collapse_item_deskripsi_id').val(),
                        deskEn: $(this).find('.collapse_item_deskripsi_en').val(),
                        deskJp: $(this).find('.collapse_item_deskripsi_jp').val(),
                        urut: Number($(this).find('.collapse_item_urut').val()) || 1,
                    });
                });

                // Build item rows HTML
                let itemsHtml = srcItems.map(function(item, i) {
                    let itemUrut = item.urut || (i + 1);
                    return `
                    <div class="collapse-item-row border rounded mb-2 p-3 bg-light" data-iindex="${newGIdx}_${i}" 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 #${i + 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" placeholder="Judul (ID)" value="${item.judulId}">
                                    </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" placeholder="Title (EN)" value="${item.judulEn}">
                                    </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" placeholder="タイトル (JP)" value="${item.judulJp}">
                                    </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)">${item.deskId}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm collapse_item_deskripsi_en" rows="2" placeholder="Description (EN)">${item.deskEn}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <textarea class="form-control form-control-sm collapse_item_deskripsi_jp" rows="2" placeholder="説明 (JP)">${item.deskJp}</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>
                                    <input type="file" class="form-control form-control-sm collapse_item_file_id"
                                           name="collapse_file_id[${newGIdx}][${i}]" accept=".pdf,.doc,.docx">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-control-label text-xs mb-1">&#127468;&#127463; English</label>
                                    <input type="file" class="form-control form-control-sm collapse_item_file_en"
                                           name="collapse_file_en[${newGIdx}][${i}]" accept=".pdf,.doc,.docx">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-control-label text-xs mb-1">&#127471;&#127477; Japan</label>
                                    <input type="file" class="form-control form-control-sm collapse_item_file_jp"
                                           name="collapse_file_jp[${newGIdx}][${i}]" accept=".pdf,.doc,.docx">
                                </div>
                            </div>
                        </div>
                    </div>`;
                }).join('');

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

                let groupHtml = `
                <div class="card mb-3 collapse-group-row border" data-gindex="${newGIdx}" 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 #${newGIdx + 1}</span>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-outline-info btn-duplicate-group mb-0 px-2 py-1" style="font-size:11px;" title="Duplikat group ini">
                                    <i class="fas fa-copy me-1"></i>Duplikat
                                </button>
                                <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>

                        <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" placeholder="contoh: 2025" value="${namaId}">
                                    </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" placeholder="e.g.: 2025" value="${namaEn}">
                                    </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" placeholder="例: 2025" value="${namaJp}">
                                    </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="${newGIdx}" style="font-size:11px;">
                                <i class="fas fa-plus me-1"></i>Tambah Item
                            </button>
                        </div>
                        <div class="collapse-items-wrapper" id="items-wrapper-${newGIdx}">${itemsHtml}</div>
                    </div>
                </div>`;

                $srcGroup.after(groupHtml);
            });

            function clearValidationErrors() {
                $('.is-invalid').removeClass('is-invalid');
                $('.field-invalid-feedback').remove();
                $('.summernote-error-msg').remove();
                $('.note-editor[style*="border"]').css('border', '');
            }

            function markFieldError($el, msg) {
                $el.addClass('is-invalid');
                let $anchor = $el.closest('.input-group').length ?
                    $el.closest('.input-group') : $el;
                $anchor.siblings('.field-invalid-feedback').remove();
                $anchor.after(
                    `<div class="field-invalid-feedback text-danger mt-1" style="font-size:11px;">` +
                    `<i class="fas fa-exclamation-circle me-1"></i>${msg}</div>`
                );
            }

            function markSummernoteError(lang, msg) {
                let $pane = $('#editor-pane-' + lang);
                $pane.find('.summernote-error-msg').remove();
                let $editor = $pane.find('.note-editor');
                if ($editor.length) {
                    $editor.css('border', '1px solid #dc3545');
                } else {
                    $pane.find('textarea').addClass('is-invalid');
                }
                $pane.append(
                    `<div class="summernote-error-msg text-danger mt-1" style="font-size:11px;">` +
                    `<i class="fas fa-exclamation-circle me-1"></i>${msg}</div>`
                );
            }

            $(document).on('input change', '.is-invalid', function() {
                $(this).removeClass('is-invalid');
                let $anchor = $(this).closest('.input-group').length ?
                    $(this).closest('.input-group') : $(this);
                $anchor.siblings('.field-invalid-feedback').remove();
            });

            $('#btn-main-save').on('click', function() {
                clearValidationErrors();

                let val = $tpl.val();
                let hasError = false;

                if (!$('select[name="menu_key"]').val()) {
                    markFieldError($('select[name="menu_key"]'), 'Nama Menu wajib dipilih');
                    hasError = true;
                }

                if (!val) {
                    markFieldError($tpl, 'Template Tampilan wajib dipilih');
                    hasError = true;
                }

                let $labelId = $('input[name="label_id"]');
                if (!$labelId.val().trim()) {
                    markFieldError($labelId, 'Label Bahasa Indonesia wajib diisi');
                    hasError = true;
                }

                let $labelEn = $('input[name="label_en"]');
                if (!$labelEn.val().trim()) {
                    markFieldError($labelEn, 'Label English wajib diisi');
                    hasError = true;
                }

                let $labelJp = $('input[name="label_jp"]');
                if (!$labelJp.val().trim()) {
                    markFieldError($labelJp, 'Label Japan wajib diisi');
                    hasError = true;
                }

                if (val === 'text_editor') {
                    let langNames = {
                        id: 'Indonesia',
                        en: 'English',
                        jp: 'Japan'
                    };
                    ['id', 'en', 'jp'].forEach(function(lang) {
                        let content = snInited[lang] ? $('#content_' + lang).summernote('code') :
                            '';
                        let stripped = $('<div>').html(content).text().trim();
                        if (!stripped) {
                            markSummernoteError(lang, `Konten (${langNames[lang]}) wajib diisi`);
                            hasError = true;
                        }
                    });

                } else if (val === 'upload_file') {
                    let $cards = $('#upload-cards-wrapper .upload-card-row');
                    if ($cards.length === 0) {
                        $('#upload-cards-wrapper').before(
                            `<div class="field-invalid-feedback text-danger mb-2" style="font-size:11px;">` +
                            `<i class="fas fa-exclamation-circle me-1"></i>Tambahkan minimal 1 kartu PDF</div>`
                        );
                        hasError = true;
                    }
                    $cards.each(function(i) {
                        let no = i + 1;
                        let $judulId = $(this).find('.card_judul_id');
                        let $judulEn = $(this).find('.card_judul_en');
                        let $judulJp = $(this).find('.card_judul_jp');
                        let $pdfInput = $(this).find('.card_pdf_file');
                        if (!$judulId.val().trim()) {
                            markFieldError($judulId, `Kartu #${no}: Judul (Indonesia) wajib diisi`);
                            hasError = true;
                        }
                        if (!$judulEn.val().trim()) {
                            markFieldError($judulEn, `Kartu #${no}: Judul (English) wajib diisi`);
                            hasError = true;
                        }
                        if (!$judulJp.val().trim()) {
                            markFieldError($judulJp, `Kartu #${no}: Judul (Japan) wajib diisi`);
                            hasError = true;
                        }
                        let pdfFile = $pdfInput[0];
                        if (!pdfFile || !pdfFile.files || pdfFile.files.length === 0) {
                            markFieldError($pdfInput, `Kartu #${no}: File PDF wajib diupload`);
                            hasError = true;
                        }
                    });

                } else if (val === 'collapse') {
                    let $groups = $('#collapse-groups-wrapper .collapse-group-row');
                    if ($groups.length === 0) {
                        $('#collapse-groups-wrapper').before(
                            `<div class="field-invalid-feedback text-danger mb-2" style="font-size:11px;">` +
                            `<i class="fas fa-exclamation-circle me-1"></i>Tambahkan minimal 1 group</div>`
                        );
                        hasError = true;
                    }
                    $groups.each(function(gi) {
                        let gNo = gi + 1;
                        let $gNamaId = $(this).find('.group_nama_id');
                        let $gNamaEn = $(this).find('.group_nama_en');
                        let $gNamaJp = $(this).find('.group_nama_jp');
                        if (!$gNamaId.val().trim()) {
                            markFieldError($gNamaId,
                                `Group #${gNo}: Nama Group (Indonesia) wajib diisi`);
                            hasError = true;
                        }
                        if (!$gNamaEn.val().trim()) {
                            markFieldError($gNamaEn,
                                `Group #${gNo}: Nama Group (English) wajib diisi`);
                            hasError = true;
                        }
                        if (!$gNamaJp.val().trim()) {
                            markFieldError($gNamaJp,
                                `Group #${gNo}: Nama Group (Japan) wajib diisi`);
                            hasError = true;
                        }
                        let $items = $(this).find('.collapse-item-row');
                        if ($items.length === 0) {
                            $(this).find('.collapse-items-wrapper').before(
                                `<div class="field-invalid-feedback text-danger mb-2" style="font-size:11px;">` +
                                `<i class="fas fa-exclamation-circle me-1"></i>Group #${gNo}: Tambahkan minimal 1 item</div>`
                            );
                            hasError = true;
                        }
                        $items.each(function(ii) {
                            let iNo = ii + 1;
                            let $jId = $(this).find('.collapse_item_judul_id');
                            let $jEn = $(this).find('.collapse_item_judul_en');
                            let $jJp = $(this).find('.collapse_item_judul_jp');
                            if (!$jId.val().trim()) {
                                markFieldError($jId,
                                    `Group #${gNo} › Item #${iNo}: Judul (Indonesia) wajib diisi`
                                );
                                hasError = true;
                            }
                            if (!$jEn.val().trim()) {
                                markFieldError($jEn,
                                    `Group #${gNo} › Item #${iNo}: Judul (English) wajib diisi`
                                );
                                hasError = true;
                            }
                            if (!$jJp.val().trim()) {
                                markFieldError($jJp,
                                    `Group #${gNo} › Item #${iNo}: Judul (Japan) wajib diisi`
                                );
                                hasError = true;
                            }
                        });
                    });
                }

                // Jika ada error → scroll ke error pertama, batalkan submit
                if (hasError) {
                    let $firstError = $('.is-invalid, .summernote-error-msg, .field-invalid-feedback')
                        .first();
                    if ($firstError.length) {
                        $('html, body').animate({
                            scrollTop: $firstError.offset().top - 120
                        }, 400);
                    }
                    return;
                }

                let jsonData = {};

                /* ── TEXT EDITOR ── */
                if (val === 'text_editor') {
                    // Pastikan semua editor yang belum diinisialisasi mendapat nilai kosong
                    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}]`);
                        let itemUrut = Number($(this).find('.card_urut').val()) || (loopIdx + 1);

                        // EN (master — menyimpan file_url hasil upload)
                        enItems.push({
                            judul: $(this).find('.card_judul_en').val(),
                            sub_judul: $(this).find('.card_sub_judul_en').val(),
                            card_index: loopIdx,
                            file_url: null,
                            urut: itemUrut,
                        });

                        // ID
                        idItems.push({
                            judul: $(this).find('.card_judul_id').val(),
                            sub_judul: $(this).find('.card_sub_judul_id').val(),
                            urut: itemUrut,
                        });

                        // JP
                        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() {
                            // Rename file inputs 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}]`);
                            let itemUrut = Number($(this).find('.collapse_item_urut')
                                .val()) || (iCounter + 1);

                            // EN (master — menyimpan file_url_* hasil upload)
                            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: null,
                                file_url_en: null,
                                file_url_jp: null,
                                urut: itemUrut,
                            });

                            // ID
                            idItems.push({
                                judul: $(this).find('.collapse_item_judul_id')
                                    .val(),
                                deskripsi: $(this).find(
                                    '.collapse_item_deskripsi_id').val(),
                                urut: itemUrut,
                            });

                            // JP
                            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