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

@push('css')
    <link rel="stylesheet" href="{{ asset('/') }}assets/css/summernote-bs5.min.css">
    <style>
    .btn-match-input {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    .note-editable table {
            border-collapse: collapse;
        }
        .note-editable td,
        .note-editable th {
            border: 1px solid #cbd5e1;
            min-width: 30px;
            position: relative;
            box-sizing: border-box;
        }
        .col-resize-handle {
            position: absolute;
            top: 0;
            right: -3px;
            width: 6px;
            height: 100%;
            cursor: col-resize;
            z-index: 20;
            display: inline-block;
            user-select: none;
        }
        .col-resize-handle:hover {
            background-color: rgba(30, 58, 95, 0.4);
        }
        .row-resize-handle {
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 6px;
        cursor: row-resize;
        z-index: 20;
        display: inline-block;
        user-select: none;
        }
        .row-resize-handle:hover {
            background-color: rgba(30, 58, 95, 0.4);
        }
</style>
    @endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-lg mx-1 mb-4">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                                    <button class="btn btn-primary mb-0" id="sectionForm-save"
                                        onclick="event.preventDefault(); document.getElementById('sectionForm').submit();"><i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mx-1">
                    <div class="card">
                        <hr class="horizontal dark mt-0">
                        <div class="px-4 py-2">
                            <h5>{{ $section['label'] }} — {{ $item ? 'Edit Data' : 'Tambah Data' }}</h5>

                            <form id="sectionForm" action="{{ $item ? url('/homepage-master/update/' . $key . '/' . $item->{$section['pk']}) : url('/homepage-master/store/' . $key) }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                @if ($item)
                                    @method('PUT')
                                @endif
                                @php
                                    $langFields = collect($section['form_fields'])->where('lang', true);
                                    $mainFields = collect($section['form_fields'])->where('lang', false);
                                @endphp

                                {{-- Split Card Bahasa (kalau section punya table_lang) --}}
                                @if ($section['table_lang'] && $langFields->count())
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-header bg-light">
                                                    <b>🇮🇩 Bahasa Indonesia</b>
                                                </div>
                                                <div class="card-body">
                                                    @foreach ($langFields as $f)
                                                        <div class="mb-3">
                                                            <label>{{ $f['label'] }}</label>
                                                            @if ($f['type'] === 'textarea')
                                                                <textarea name="{{ $f['field'] }}_id"
                                                                    class="summernote">{{ $langId->{$f['field']} ?? '' }}</textarea>
                                                            @else
                                                                <input type="text" name="{{ $f['field'] }}_id"
                                                                    class="form-control"
                                                                    value="{{ $langId->{$f['field']} ?? '' }}">
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-header bg-light">
                                                    <b>🇬🇧 English</b>
                                                </div>
                                                <div class="card-body">
                                                    @foreach ($langFields as $f)
                                                        <div class="mb-3">
                                                            <label>{{ $f['label'] }}</label>
                                                            @if ($f['type'] === 'textarea')
                                                                <textarea name="{{ $f['field'] }}_en"
                                                                    class="summernote">{{ $langEn->{$f['field']} ?? '' }}</textarea>
                                                            @else
                                                                <input type="text" name="{{ $f['field'] }}_en"
                                                                    class="form-control"
                                                                    value="{{ $langEn->{$f['field']} ?? '' }}">
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- Field utama (non-bahasa) --}}
                                @if ($mainFields->count() && $key !== 'unggulan')
                                    <div class="card border mt-3">
                                        <div class="card-header bg-light"><b>Banner Utama</b></div>
                                        <div class="card-body row">
                                            @foreach ($mainFields as $f)
                                                <div class="col-md-{{ $f['type'] === 'file' ? '6' : '4' }} mb-3">
                                                    <label>{{ $f['label'] }}</label>
                                                    @if ($f['type'] === 'file')
                                                        @if ($item && $item->{$f['field']})
                                                            <div class="mb-2 d-flex align-items-center gap-3" id="previewWrapper_{{ $f['field'] }}">
                                                                <img id="previewImg_{{ $f['field'] }}" src="{{ asset('storage/' . $item->{$f['field']}) }}" style="height:60px" class="rounded">
                                                                <div class="text-muted small">
                                                                    <div>File saat ini: <b id="previewFileName_{{ $f['field'] }}">{{ basename($item->{$f['field']}) }}</b></div>
                                                                    @if (\Illuminate\Support\Facades\Storage::disk('public')->exists($item->{$f['field']}))
                                                                        <div>{{ number_format(\Illuminate\Support\Facades\Storage::disk('public')->size($item->{$f['field']}) / 1024, 1) }} KB</div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @else
                                                            <div class="mb-2 d-flex align-items-center gap-3 d-none" id="previewWrapper_{{ $f['field'] }}">
                                                                <img id="previewImg_{{ $f['field'] }}" src="" style="height:60px" class="rounded">
                                                                <div class="text-muted small">
                                                                    <div>File saat ini: <b id="previewFileName_{{ $f['field'] }}"></b></div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                        <input type="file" name="{{ $f['field'] }}" id="inputFile_{{ $f['field'] }}" class="form-control" accept="image/*" style="display: none;">
                                                        <div class="d-flex align-items-center gap-2" style="min-width: 0;">
                                                            <label for="inputFile_{{ $f['field'] }}" class="btn btn-outline-secondary mb-0 flex-shrink-0">
                                                                <i class="fas fa-upload me-1"></i> Choose file
                                                            </label>
                                                            <span id="namaFile_{{ $f['field'] }}" class="text-muted small text-truncate" style="min-width: 0;">Belum ada file dipilih</span>
                                                        </div>
                                                        <small class="text-muted d-block mt-1">
                                                            <i class="fas fa-info-circle text-primary me-1"></i> <strong>Spesifikasi Gambar:</strong>
                                                            Upload maksimal <b>4 MB</b>. Rasio yang direkomendasikan:
                                                            @if($key === 'video')
                                                                <code>16:9 Landscape</code>
                                                            @elseif($key === 'mitra')
                                                                <code>1:1 Persegi (Logo)</code>
                                                            @else
                                                                <code>16:9</code> atau <code>4:3 Landscape</code>
                                                            @endif
                                                            — Format: JPG/PNG/WebP.
                                                        </small>
                                                    @elseif($f['type'] === 'select')
                                                        <select name="{{ $f['field'] }}" class="form-select">
                                                            @foreach ($f['options'] ?? [] as $optVal => $optLabel)
                                                                <option value="{{ $optVal }}" {{ ($item && $item->{$f['field']} == $optVal) ? 'selected' : '' }}>
                                                                    {{ $optLabel }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @elseif($f['type'] === 'number')
                                                        <input type="number" name="{{ $f['field'] }}"
                                                            class="form-control" value="{{ $item->{$f['field']} ?? 0 }}">
                                                    @else
                                                        <input type="text" name="{{ $f['field'] }}"
                                                            class="form-control" value="{{ $item->{$f['field']} ?? '' }}">
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                @if ($key === 'hero')
                                    {{-- KEYWORDS --}}
                                    <div class="card border mt-3">
                                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                            <b>Keyword / Keunggulan</b>
                                            <button type="button" class="btn btn-sm btn-success" id="addKeywordBtn">
                                                <i class="fas fa-plus"></i> Tambah
                                            </button>
                                        </div>
                                        <div class="card-body" id="keywordContainer">
                                            @forelse($heroKeywords as $kw)
                                                <div class="row align-items-end mb-2 keyword-row border-bottom pb-2">
                                                    <div class="col-md-2">
                                                        <label>Icon (class)</label>
                                                        <input type="text" name="keyword_icon[]" class="form-control" value="{{ $kw->icon }}" placeholder="fas fa-check">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label>Text (ID) <small class="text-muted">maks 50</small></label>
                                                        <input type="text" name="keyword_text_id[]" class="form-control" maxlength="50" value="{{ $kw->text_id }}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label>Text (EN) <small class="text-muted">maks 50</small></label>
                                                        <input type="text" name="keyword_text_en[]" class="form-control" maxlength="50" value="{{ $kw->text_en }}">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger btn-sm remove-row w-100" style="height:40.4px;">
                                                            <i class="fas fa-trash" ></i> Hapus
                                                        </button>
                                                    </div>
                                                </div>
                                            @empty
                                                <p class="text-muted no-keyword-note">Belum ada data. Klik "Tambah".</p>
                                            @endforelse
                                        </div>
                                    </div>

                                    {{-- CTA --}}
                                    <div class="card border mt-3">
                                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                            <b>Teks Tombol</b>
                                            <button type="button" class="btn btn-sm btn-success mb-0" id="addCtaBtn">
                                                <i class="fas fa-plus"></i> Tambah
                                            </button>
                                        </div>
                                        <div class="card-body" id="ctaContainer">
                                            <div class="row g-2 mb-2 fw-bold text-xs text-secondary text-uppercase d-none d-md-flex px-1 cta-header {{ $heroCtas->isEmpty() ? 'd-none' : '' }}">
                                                <div class="col-md-3">Teks (ID) <small class="text-lowercase text-muted">(maks 30)</small></div>
                                                <div class="col-md-3">Teks (EN) <small class="text-lowercase text-muted">(maks 30)</small></div>
                                                <div class="col-md-3">Link Tujuan</div>
                                                <div class="col-md-2">Buka Tab Baru?</div>
                                                <div class="col-md-1 text-center">Aksi</div>
                                            </div>

                                            @forelse($heroCtas as $cta)
                                                <div class="row g-2 align-items-center mb-2 cta-row border-bottom pb-2">
                                                    <div class="col-md-3">
                                                        <input type="text" name="cta_text_id[]" class="form-control" maxlength="30" placeholder="Teks Tombol (ID)" value="{{ $cta->text_id }}">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input type="text" name="cta_text_en[]" class="form-control" maxlength="30" placeholder="Teks Tombol (EN)" value="{{ $cta->text_en }}">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input type="text" name="cta_link[]" class="form-control" placeholder="https://... atau /solusi" value="{{ $cta->link }}">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <select name="cta_is_new_tab[]" class="form-select">
                                                            <option value="0" {{ empty($cta->is_new_tab) ? 'selected' : '' }}>Tidak</option>
                                                            <option value="1" {{ !empty($cta->is_new_tab) ? 'selected' : '' }}>Ya</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-1 text-center">
                                                        <button type="button" class="btn btn-danger btn-sm remove-row mb-0 w-100 btn-match-input" title="Hapus">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @empty
                                                <p class="text-muted no-cta-note mb-0">Belum ada data. Klik "Tambah".</p>
                                            @endforelse
                                        </div>
                                    </div>
                                    @elseif ($key === 'galeri')
                                        {{-- GALERI --}}
                                        <div class="card border mt-3">
                                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                <b>Foto Galeri <small class="text-muted">(min 5, maks 15)</small></b>
                                                <button type="button" class="btn btn-sm btn-success" id="addPhotoBtn">
                                                    <i class="fas fa-plus"></i> Tambah Foto
                                                </button>
                                            </div>
                                            <div class="card-body" id="photoContainer">
                                                @forelse($galeriItems as $i => $foto)
                                                    <div class="row align-items-end mb-2 photo-row border-bottom pb-2">
                                                        <div class="col-md-2">
                                                            <label>Urutan</label>
                                                            <input type="number" name="foto_urutan[]" class="form-control" value="{{ $foto->urutan }}" min="1">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label>Gambar</label>
                                                            <input type="file" name="foto_gambar[]" class="form-control" accept="image/*">
                                                            <input type="hidden" name="foto_id[]" value="{{ $foto->idgaleri }}">
                                                            @if ($foto->gambar)
                                                                <small class="text-muted">Saat ini: {{ $foto->gambar }}</small>
                                                            @endif
                                                        </div>
                                                        <div class="col-md-2">
                                                            @if ($foto->gambar)
                                                                <img src="{{ asset('storage/' . $foto->gambar) }}" class="rounded" style="height:60px; width:100%; object-fit:cover;">
                                                            @endif
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="d-block">&nbsp;</label>
                                                            <button type="button" class="btn btn-danger remove-photo w-100">
                                                                <i class="fas fa-trash"></i> Hapus
                                                            </button>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <p class="text-muted no-photo-note">Belum ada foto. Klik "Tambah Foto" (minimal 5 foto).</p>
                                                @endforelse
                                            </div>
                                            <div class="card-footer">
                                                <small class="text-muted" id="photoCountInfo"></small>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($key === 'marketplace')
                                        <div class="card border mt-3">
                                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                <b>Marketplace</b>
                                                <button type="button" class="btn btn-sm btn-success" id="addMarketplaceBtn">
                                                    <i class="fas fa-plus"></i> Tambah
                                                </button>
                                            </div>
                                            <div class="card-body" id="marketplaceContainer">
                                                @forelse($marketplaceItems as $m)
                                                    <div class="row align-items-end mb-2 marketplace-row border-bottom pb-2">
                                                        <div class="col-md-3">
                                                            <label>Nama Platform</label>
                                                            <input type="text" name="marketplace_nama[]" class="form-control" value="{{ $m->nama_platform }}">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label>Link Profil</label>
                                                            <input type="text" name="marketplace_link[]" class="form-control" value="{{ $m->link }}">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label>Logo</label>
                                                            @if ($m->logo)
                                                                <img src="{{ asset('storage/' . $m->logo) }}" style="height:40px" class="rounded mb-1 d-block">
                                                            @endif
                                                            <input type="hidden" name="marketplace_logo_existing[]" value="{{ $m->logo }}">
                                                            <input type="file" name="marketplace_logo[]" class="form-control" accept="image/*">
                                                            <small class="text-muted d-block mt-1"><i class="fas fa-info-circle text-primary me-1"></i> Logo <code>1:1 Persegi</code> (Maks 4 MB)</small>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <button type="button" class="btn btn-danger btn-sm remove-marketplace-row w-100" style="height:40.4px;">
                                                                <i class="fas fa-trash"></i> Hapus
                                                            </button>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <p class="text-muted no-marketplace-note">Belum ada data. Klik "Tambah".</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    @endif
                                    @if ($key === 'unggulan')
                                    <div class="card border mt-3">
                                        <div class="card-header bg-light"><b>Pilih Produk</b></div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label>Produk</label>
                                                <select name="idproduk" class="form-control" required>
                                                    <option value="">-- Pilih Produk --</option>
                                                    @foreach ($produkList as $p)
                                                        <option value="{{ $p->idproduk }}" {{ ($item->idproduk ?? null) == $p->idproduk ? 'selected' : '' }}>
                                                            {{ $p->nama }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-muted">Hanya produk aktif yang muncul di daftar ini.</small>
                                            </div>
                                            <div class="mb-3">
                                                <label>Urutan Tampil</label>
                                                <input type="number" name="urutan" class="form-control" value="{{ $item->urutan ?? 0 }}">
                                            </div>
                                        </div>
                                    </div>
                                @endif

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/summernote-bs5.min.js"></script>
    <script>
        function cleanNestedTables(container) {
            var nestedTables = container.querySelectorAll('table table');
            while (nestedTables.length > 0) {
                nestedTables.forEach(function(nested) {
                    var parentCell = nested.closest('td') || nested.closest('th');
                    if (parentCell) {
                        var fragment = document.createDocumentFragment();
                        while (nested.firstChild) {
                            fragment.appendChild(nested.firstChild);
                        }
                        nested.replaceWith(fragment);
                    } else {
                        var parentTable = nested.closest('table');
                        if (parentTable && parentTable !== nested) {
                            parentTable.parentNode.insertBefore(nested, parentTable.nextSibling);
                        }
                    }
                });
                nestedTables = container.querySelectorAll('table table');
            }
            var tables = container.querySelectorAll('table');
            tables.forEach(function(tbl) {
                tbl.removeAttribute('style');
                tbl.removeAttribute('width');
                tbl.removeAttribute('height');
                tbl.classList.add('table', 'table-bordered');
            });
        }

        // ===== TABLE COLUMN RESIZE untuk Summernote =====
        function enableTableColumnResize(editorClass) {
            $(editorClass).each(function () {
                const context = $(this).data('summernote');
                if (!context) return;
                const $editable = context.layoutInfo.editable;
                if (!$editable || !$editable.length) return;

                function ensureColgroup($table) {
                    const $firstRow = $table.find('tr:first-child');
                    const colCount = $firstRow.find('> th, > td').length;
                    let $colgroup = $table.find('> colgroup');

                    if (!$colgroup.length || $colgroup.find('col').length !== colCount) {
                        $table.find('> colgroup').remove();
                        $colgroup = $('<colgroup></colgroup>');
                        for (let i = 0; i < colCount; i++) {
                            $colgroup.append('<col>');
                        }
                        $table.prepend($colgroup);
                    }
                    return $colgroup;
                }

                function attachResizers() {
                    $editable.find('table').each(function () {
                        const $table = $(this);
                        $table.css('table-layout', 'fixed');
                        $table.find('td, th').css('border', '1px solid #cbd5e1');

                        const $colgroup = ensureColgroup($table);
                        const $cols = $colgroup.find('col');

                        $table.find('tr').each(function () {
                            $(this).find('> th, > td').each(function (index) {
                                const $cell = $(this);
                                if ($cell.find('> .col-resize-handle').length) return;

                                $cell.css('position', 'relative');
                                const $handle = $('<span class="col-resize-handle" contenteditable="false"></span>');
                                $cell.append($handle);

                                $handle.on('mousedown', function (e) {
                                    e.preventDefault();
                                    e.stopPropagation();

                                    const startX = e.pageX;
                                    const $col = $cols.eq(index);
                                    const $nextCol = $cols.eq(index + 1);
                                    const isLastCol = $nextCol.length === 0;

                                    const startWidth = $cell.outerWidth();
                                    const $nextCell = $cell.next('th, td');
                                    const nextStartWidth = $nextCell.length ? $nextCell.outerWidth() : null;

                                    let startTableWidth = null;

                                    if (isLastCol) {
                                        $table.find('tr').first().find('> th, > td').each(function (i) {
                                            const w = $(this).outerWidth();
                                            $cols.eq(i).attr('width', w).css('width', w + 'px');
                                        });
                                        startTableWidth = $table.outerWidth();
                                        $table.css('width', startTableWidth + 'px');
                                    }

                                    $(document).on('mousemove.colresize', function (eMove) {
                                        const diff = eMove.pageX - startX;
                                        const newWidth = Math.round(Math.max(30, startWidth + diff));
                                        $col.attr('width', newWidth).css('width', newWidth + 'px');

                                        if ($nextCol.length && nextStartWidth !== null) {
                                            const newNextWidth = Math.round(Math.max(30, nextStartWidth - diff));
                                            $nextCol.attr('width', newNextWidth).css('width', newNextWidth + 'px');
                                        } else if (isLastCol) {
                                            const newTableWidth = Math.round(Math.max(30, startTableWidth + diff));
                                            $table.css('width', newTableWidth + 'px');
                                        }
                                    });

                                    $(document).on('mouseup.colresize', function () {
                                        $(document).off('mousemove.colresize mouseup.colresize');
                                    });
                                });
                            });
                        });

                        const $rows = $table.find('tr');
                        $rows.each(function (rowIndex) {
                            if (rowIndex === $rows.length - 1) return;

                            const $row = $(this);
                            const $cellsInRow = $row.find('> th, > td');

                            $cellsInRow.each(function () {
                                const $cell = $(this);
                                $cell.css('position', 'relative');

                                if ($cell.find('> .row-resize-handle').length) return;

                                const $rowHandle = $('<span class="row-resize-handle" contenteditable="false"></span>');
                                $cell.append($rowHandle);

                                $rowHandle.on('mousedown', function (e) {
                                    e.preventDefault();
                                    e.stopPropagation();

                                    const startY = e.pageY;
                                    const startHeight = $row.outerHeight();

                                    $(document).on('mousemove.rowresize', function (eMove) {
                                        const diff = eMove.pageY - startY;
                                        const newHeight = Math.round(Math.max(24, startHeight + diff));
                                        $row.find('> th, > td').css('height', newHeight + 'px');
                                    });

                                    $(document).on('mouseup.rowresize', function () {
                                        $(document).off('mousemove.rowresize mouseup.rowresize');
                                    });
                                });
                            });
                        });
                    });
                }

                attachResizers();
                $editable.on('input mouseup keyup', function () {
                    attachResizers();
                });
            });
        }

        $(document).ready(function() {
            $('.summernote').summernote({
                height: 200,
                tooltip: true,
                placeholder: 'Masukkan konten di sini...',
                callbacks: {
                    onPaste: function (e) {
                        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text/html');
                        if (bufferText && (bufferText.includes('<table') || bufferText.includes('<TABLE'))) {
                            e.preventDefault();
                            var tempDiv = document.createElement('div');
                            tempDiv.innerHTML = bufferText;
                            cleanNestedTables(tempDiv);
                            document.execCommand('insertHTML', false, tempDiv.innerHTML);
                        }
                    }
                }
            });
            $('.note-editor [data-toggle="dropdown"]').each(function () {
                $(this).attr('data-bs-toggle', 'dropdown');
            });
           
            enableTableColumnResize('.summernote');

            $('#sectionForm').on('submit', function() {
                $('.summernote').each(function() {
                    var code = $(this).summernote('code');
                    if (code && code.includes('<table')) {
                        var temp = document.createElement('div');
                        temp.innerHTML = code;
                        cleanNestedTables(temp);
                        $(this).summernote('code', temp.innerHTML);
                    }
                });
            });
        });
    </script>
    <script>
        const MAX_KEYWORD = 5;
        const MAX_CTA = 2;

        function updateAddButtonState(containerSelector, rowSelector, btnId, max, label) {
            const count = document.querySelectorAll(containerSelector + ' ' + rowSelector).length;
            const btn = document.getElementById(btnId);
            if (!btn) return;
            if (count >= max) {
                btn.disabled = true;
                btn.innerHTML = `<i class="fas fa-ban"></i> Tambah`;
            } else {
                btn.disabled = false;
                btn.innerHTML = `<i class="fas fa-plus"></i> Tambah`;
            }
        }

        function checkKeywordLimit() {
            updateAddButtonState('#keywordContainer', '.keyword-row', 'addKeywordBtn', MAX_KEYWORD);
        }

        function checkCtaLimit() {
            updateAddButtonState('#ctaContainer', '.cta-row', 'addCtaBtn', MAX_CTA);
        }

        document.getElementById('addKeywordBtn')?.addEventListener('click', function () {
            const count = document.querySelectorAll('#keywordContainer .keyword-row').length;
            if (count >= MAX_KEYWORD) return;

            const container = document.getElementById('keywordContainer');
            container.querySelector('.no-keyword-note')?.remove();
            const row = document.createElement('div');
            row.className = 'row align-items-end mb-2 keyword-row border-bottom pb-2';
            row.innerHTML = `
                <div class="col-md-2">
                    <label>Icon</label>
                    <input type="text" name="keyword_icon[]" class="form-control" placeholder="fas fa-check">
                </div>
                <div class="col-md-4">
                    <label>Text (ID) <small class="text-muted">maks 50</small></label>
                    <input type="text" name="keyword_text_id[]" class="form-control" maxlength="50">
                </div>
                <div class="col-md-4">
                    <label>Text (EN) <small class="text-muted">maks 50</small></label>
                    <input type="text" name="keyword_text_en[]" class="form-control" maxlength="50">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm remove-row w-100" style="height:40.4px;">
                        <i class="fas fa-trash"></i> Hapus
                    </button>
                </div>`;
            container.appendChild(row);
            checkKeywordLimit();
        });

        document.getElementById('addCtaBtn')?.addEventListener('click', function () {
            const count = document.querySelectorAll('#ctaContainer .cta-row').length;
            if (count >= MAX_CTA) return;

            const container = document.getElementById('ctaContainer');
            container.querySelector('.no-cta-note')?.remove();

            const header = container.querySelector('.cta-header');
            if (header) header.classList.remove('d-none');

            const row = document.createElement('div');
            row.className = 'row g-2 align-items-center mb-2 cta-row border-bottom pb-2';
            row.innerHTML = `
                <div class="col-md-3">
                    <input type="text" name="cta_text_id[]" class="form-control" maxlength="30" placeholder="Teks Tombol (ID)">
                </div>
                <div class="col-md-3">
                    <input type="text" name="cta_text_en[]" class="form-control" maxlength="30" placeholder="Teks Tombol (EN)">
                </div>
                <div class="col-md-3">
                    <input type="text" name="cta_link[]" class="form-control" placeholder="https://... atau /solusi">
                </div>
                <div class="col-md-2">
                    <select name="cta_is_new_tab[]" class="form-select">
                        <option value="0">Tidak</option>
                        <option value="1">Ya</option>
                    </select>
                </div>
                <div class="col-md-1 text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-row mb-0 w-100 btn-match-input" title="Hapus">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>`;
            container.appendChild(row);
            checkCtaLimit();
        });

        document.addEventListener('click', function (e) {
            if (e.target.closest('.remove-row')) {
                const row = e.target.closest('.keyword-row, .cta-row');
                const isCta = row.classList.contains('cta-row');
                const container = row.parentElement;
                row.remove();
                if (isCta) {
                    checkCtaLimit();
                    if (container.querySelectorAll('.cta-row').length === 0) {
                        const header = container.querySelector('.cta-header');
                        if (header) header.classList.add('d-none');
                        if (!container.querySelector('.no-cta-note')) {
                            container.insertAdjacentHTML('beforeend', '<p class="text-muted no-cta-note mb-0">Belum ada data. Klik "Tambah".</p>');
                        }
                    }
                } else {
                    checkKeywordLimit();
                }
            }
        });
        const MIN_PHOTO = 5;
        const MAX_PHOTO = 15;
        checkKeywordLimit();
        checkCtaLimit();
        updatePhotoInfo();

        function updatePhotoInfo() {

            const total = document.querySelectorAll('#photoContainer .photo-row').length;

            const info = document.getElementById('photoCountInfo');
            const btn = document.getElementById('addPhotoBtn');

            if(info){
                info.innerHTML = `Jumlah Foto : ${total} / ${MAX_PHOTO}`;
            }

            if(btn){
                btn.disabled = total >= MAX_PHOTO;
            }
        }

        document.getElementById('addPhotoBtn')?.addEventListener('click', function(){

            const container = document.getElementById('photoContainer');

            const total = container.querySelectorAll('.photo-row').length;

            if(total >= MAX_PHOTO){
                alert('Maksimal 15 foto.');
                return;
            }

            container.querySelector('.no-photo-note')?.remove();

            const row = document.createElement('div');

            row.className = 'row align-items-end mb-2 photo-row border-bottom pb-2';

            row.innerHTML = `
                <div class="col-md-2">
                    <label>Urutan</label>
                    <input
                        type="number"
                        name="foto_urutan[]"
                        class="form-control"
                        value="${total+1}"
                        min="1">
                </div>

                <div class="col-md-6">

                    <label>Gambar</label>

                    <input
                        type="file"
                        name="foto_gambar[]"
                        class="form-control photo-input"
                        accept="image/*">

                    <input
                        type="hidden"
                        name="foto_id[]"
                        value="">
                </div>

                <div class="col-md-2">

                    <img
                        class="preview rounded"
                        style="height:60px;width:100%;object-fit:cover;display:none;">

                </div>

                <div class="col-md-2">

                    <label>&nbsp;</label>

                    <button
                        type="button"
                        class="btn btn-danger remove-photo w-100">

                        <i class="fas fa-trash"></i>

                        Hapus

                    </button>

                </div>
            `;

            container.appendChild(row);

            updatePhotoInfo();

        });
        document.addEventListener('change',function(e){

            if(e.target.classList.contains('photo-input')){

                const file = e.target.files[0];

                if(!file) return;

                const reader = new FileReader();

                reader.onload=function(event){

                    const img = e.target
                        .closest('.photo-row')
                        .querySelector('.preview');

                    img.src = event.target.result;

                    img.style.display='block';

                }

                reader.readAsDataURL(file);

            }

        });
        document.addEventListener('click',function(e){

            if(e.target.closest('.remove-photo')){

                const total = document.querySelectorAll('#photoContainer .photo-row').length;

                if(total <= MIN_PHOTO){

                    alert('Minimal harus ada 5 foto.');

                    return;

                }

                e.target.closest('.photo-row').remove();

                updatePhotoInfo();

            }

        });
        document.getElementById('addMarketplaceBtn')?.addEventListener('click', function () {
            const container = document.getElementById('marketplaceContainer');
            container.querySelector('.no-marketplace-note')?.remove();
            const row = document.createElement('div');
            row.className = 'row align-items-end mb-2 marketplace-row border-bottom pb-2';
            row.innerHTML = `
                <div class="col-md-3">
                    <label>Nama Platform</label>
                    <input type="text" name="marketplace_nama[]" class="form-control">
                </div>
                <div class="col-md-4">
                    <label>Link Profil</label>
                    <input type="text" name="marketplace_link[]" class="form-control">
                </div>
                <div class="col-md-3">
                    <label>Logo</label>
                    <input type="hidden" name="marketplace_logo_existing[]" value="">
                    <input type="file" name="marketplace_logo[]" class="form-control">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm remove-marketplace-row w-100" style="height:40.4px;">
                        <i class="fas fa-trash"></i> Hapus
                    </button>
                </div>`;
            container.appendChild(row);
        });

        document.addEventListener('click', function (e) {
            if (e.target.closest('.remove-marketplace-row')) {
                e.target.closest('.marketplace-row').remove();
            }
        });
        document.addEventListener('change', function (e) {
            if (e.target.classList.contains('marketplace-logo-input')) {
                const row = e.target.closest('.marketplace-row');
                const filenameSpan = row?.querySelector('.marketplace-filename');
                if (filenameSpan) {
                    if (e.target.files.length > 0) {
                        filenameSpan.textContent = e.target.files[0].name;
                        filenameSpan.classList.add('text-success', 'fw-semibold');
                        filenameSpan.classList.remove('text-muted');
                    } else {
                        filenameSpan.textContent = 'Belum ada file dipilih';
                        filenameSpan.classList.remove('text-success', 'fw-semibold');
                        filenameSpan.classList.add('text-muted');
                    }
                }
            }
        });
    </script>
    <script>
    // ===== PREVIEW GAMBAR REALTIME (untuk field file singleton: hero, whyus, spotlight, dll) =====
        document.querySelectorAll('input[type="file"][id^="inputFile_"]').forEach(function (input) {
            input.addEventListener('change', function () {
                const fieldName = this.id.replace('inputFile_', '');
                const $preview = document.getElementById('previewImg_' + fieldName);
                const $wrapper = document.getElementById('previewWrapper_' + fieldName);
                const $fileName = document.getElementById('previewFileName_' + fieldName);

                if (this.files && this.files.length > 0) {
                    const file = this.files[0];
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        if ($preview) $preview.src = e.target.result;
                        if ($wrapper) $wrapper.classList.remove('d-none');
                        if ($fileName) $fileName.textContent = file.name;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
@endpush