{{-- ============================================================================
     SECTOR CONTENT EDITOR — sokongan editor Summernote untuk kategori SEKTOR
     Fail : resources/views/backend/module/contentArticle/partials/_sector-editor.blade.php

     Apa yang dibuat:
       1. Gaya kawasan editor Summernote supaya menyerupai halaman awam
          /nres/sector?unit=<KOD> — warna & bentuk disalin dari komponen
          sector_nres (--teal:#11808f · --green:#165c4a · --line:#d7e9ec).
          Hanya aktif bila Category = SEKTOR (kelas body.is-sector).
       2. Butang "+ Insert standard structure" — memasukkan struktur piawai
          (pengenalan · Objektif · Fungsi Utama · Program · Halatuju & Sasaran)
          ke dalam editor mengikut bahasa tab (BM/EN).
       3. Article Slug = kod bahagian (cadangan melalui datalist) + amaran jika
          kod tidak dikenali + pautan "View on site".

     Guna: @include('backend.module.contentArticle.partials._sector-editor')
     ============================================================================ --}}

<style>
    .sector-skeleton { padding: 6px 12px; border: 1px solid #d7e9ec; border-radius: 8px; background: #e9f4f6; color: #0c6a77; font-size: 12px; font-weight: 600; cursor: pointer; }
    .sector-skeleton:hover { background: #d7e9ec; }

    /* ---- gaya editor: meniru halaman awam (hanya bila Category = SEKTOR) ---- */
    body.is-sector .note-editable { color: #1b2b2a; font-size: .9rem; line-height: 1.85; }
    body.is-sector .note-editable p { margin: 0 0 12px; color: #6b7280; font-size: .87rem; line-height: 1.85; }
    body.is-sector .note-editable h1,
    body.is-sector .note-editable h2,
    body.is-sector .note-editable h3 { margin: 16px 0 8px; color: #165c4a; font-size: .86rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
    body.is-sector .note-editable h4,
    body.is-sector .note-editable h5,
    body.is-sector .note-editable h6 { margin: 18px 0 0; padding: 9px 12px; border: 1px solid #d7e9ec; border-bottom: 0; border-radius: 10px 10px 0 0; background: #e9f4f6; color: #1b2b2a; font-size: .9rem; font-weight: 700; }
    body.is-sector .note-editable h4 + p,
    body.is-sector .note-editable h5 + p,
    body.is-sector .note-editable h6 + p { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #d7e9ec; border-radius: 0 0 10px 10px; }
    body.is-sector .note-editable ul { margin: 0 0 12px; padding-left: 22px; list-style: none; }
    body.is-sector .note-editable ul > li { position: relative; margin-bottom: 9px; color: #6b7280; font-size: .85rem; line-height: 1.75; }
    body.is-sector .note-editable ul > li::before { content: ""; position: absolute; left: -16px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #11808f; }
    body.is-sector .note-editable ol { margin: 0 0 12px; padding-left: 24px; }
    body.is-sector .note-editable ol > li { margin-bottom: 9px; color: #6b7280; font-size: .85rem; line-height: 1.75; }
    body.is-sector .note-editable a { color: #11808f; font-weight: 600; }
    body.is-sector .note-editable blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 4px solid #11808f; color: #6b7280; }
    body.is-sector .note-editable hr { margin: 16px 0; border: 0; border-top: 1px solid #d7e9ec; }
</style>

{{-- Kod bahagian/unit dibaca dari dropdown #unit-select oleh skrip di bawah --}}

<script>
    /* Struktur piawai halaman Sektor — satu dokumen lengkap bagi setiap bahasa.
       Tajuk <h3> di bawah ialah "pemisah" yang digunakan oleh komponen sector_nres
       untuk membahagikan artikel kepada seksyen halaman (Pengenalan · Program ·
       Halatuju & Sasaran). Jangan tukar ejaan tajuk ini. */
    var SECTOR_SKELETON = {
        ms: '<p>Taip pengenalan bahagian di sini…</p>'
            + '<h3>Objektif</h3><ul><li>Objektif pertama.</li><li>Objektif kedua.</li></ul>'
            + '<h3>Fungsi Utama</h3><ul><li>Fungsi utama pertama.</li><li>Fungsi utama kedua.</li></ul>'
            + '<h3>Program</h3><h4>Nama program</h4><p>Huraian ringkas program — letak pautan pada tajuk di atas untuk butang “Maklumat lanjut”.</p>'
            + '<h3>Halatuju &amp; Sasaran</h3><ul><li>Sasaran pertama.</li><li>Sasaran kedua.</li></ul>',
        en: '<p>Write the division introduction here…</p>'
            + '<h3>Objectives</h3><ul><li>First objective.</li><li>Second objective.</li></ul>'
            + '<h3>Main Functions</h3><ul><li>First main function.</li><li>Second main function.</li></ul>'
            + '<h3>Programme</h3><h4>Programme name</h4><p>Short programme description — add the link on the heading above to get the “More info” button.</p>'
            + '<h3>Direction &amp; Targets</h3><ul><li>First target.</li><li>Second target.</li></ul>'
    };

    document.addEventListener('DOMContentLoaded', function () {
        var cat = document.getElementById('cat-select');
        var unit = document.getElementById('unit-select');
        var slugInput = document.querySelector('input[name="article_code"]');
        var warning = document.getElementById('sector-slug-warning');
        var preview = document.getElementById('sector-preview');
        var codes = [];

        /* kod bahagian diambil dari dropdown Division/Unit */
        if (unit) {
            unit.querySelectorAll('option').forEach(function (opt) {
                if (opt.value) {
                    codes.push(opt.value.toUpperCase());
                }
            });
        }

        /* Selaraskan kelas body, Article Slug, amaran, butang struktur,
           dan pautan "View on site". */
        function syncEditor() {
            var isSector = !!cat && cat.value === 'SEKTOR';
            document.body.classList.toggle('is-sector', isSector);

            /* Sembunyikan medan tarikh/publish untuk artikel sektor */
            document.querySelectorAll('.sector-hide').forEach(function (el) {
                el.classList.toggle('hidden', isSector);
            });

            var code = unit ? (unit.value || '').trim().toUpperCase() : '';

            /* Article Slug = kod bahagian (read-only untuk kategori SEKTOR) */
            if (slugInput) {
                slugInput.readOnly = isSector;

                if (isSector && code !== '') {
                    slugInput.value = code;
                    slugInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }

            document.querySelectorAll('.sector-skeleton').forEach(function (btn) {
                btn.classList.toggle('hidden', !isSector);
            });

            var known = code !== '' && codes.indexOf(code) !== -1;
            var slugEmpty = !slugInput || (slugInput.value || '').trim() === '';

            if (warning) {
                warning.classList.toggle('hidden', !isSector || slugEmpty || known);
            }

            if (preview) {
                preview.classList.toggle('hidden', !known);
                preview.href = (preview.dataset.base || '') + (known ? '?unit=' + encodeURIComponent(code) : '');
            }
        }

        /* Masukkan struktur piawai ke hujung editor bahasa berkenaan. */
        document.querySelectorAll('.sector-skeleton').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var lang = btn.dataset.lang;
                var ed = document.getElementById('summernote-' + lang);
                var html = SECTOR_SKELETON[lang] || '';

                if (!ed || !html || typeof jQuery === 'undefined') {
                    return;
                }

                var current = jQuery(ed).summernote('code') || '';
                jQuery(ed).summernote('code', current + (current ? '\n' : '') + html);
                jQuery(ed).summernote('focus');
            });
        });

        if (cat) cat.addEventListener('change', syncEditor);
        if (unit) unit.addEventListener('change', syncEditor);
        if (slugInput) slugInput.addEventListener('input', syncEditor);

        syncEditor();
    });
</script>