{{-- Visual (WYSIWYG) content editor — no HTML knowledge required.
     Expects $initialBody (string) in scope. Outputs into hidden <textarea name="body_html">. --}}
<link rel="stylesheet" href="{{ asset('vendor/quill/quill.snow.css') }}">
<style>
    #editor { min-height: 220px; background:#fff; font-size:14px; }
    .ql-toolbar.ql-snow,.ql-container.ql-snow { border-color: var(--line); }
    .ql-container.ql-snow { border-bottom-left-radius:6px; border-bottom-right-radius:6px; }
    .ql-toolbar.ql-snow { border-top-left-radius:6px; border-top-right-radius:6px; }
    .token-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px }
    .token-bar .btn { font-size:12px; padding:6px 10px }
</style>

<div class="token-bar">
    <span class="muted">Insérer :</span>
    <button type="button" class="btn secondary" onclick="qInsert('@{{name}}')">Prénom</button>
    <button type="button" class="btn secondary" onclick="qInsert('@{{email}}')">Email</button>
    <button type="button" class="btn secondary" onclick="qInsert('@{{department}}')">Département</button>
    <button type="button" class="btn" onclick="qInsert('@{{trap:1}}')">🔗 Lien piégé</button>
</div>
<div id="editor"></div>
<textarea name="body_html" id="body_html" hidden></textarea>
<p class="muted" style="margin-top:8px">
    Écrivez votre message normalement (gras, listes, liens…). Le bouton <strong>Prénom</strong> insère
    automatiquement le nom du destinataire. <strong>🔗 Lien piégé</strong> place le lien de test à l'endroit
    du curseur ; si vous avez plusieurs pièges (définis plus bas) et n'en placez aucun, ils sont ajoutés
    automatiquement en bas du mail.
</p>

<script src="{{ asset('vendor/quill/quill.js') }}"></script>
<script>
    const quill = new Quill('#editor', {
        theme: 'snow',
        modules: { toolbar: [
            [{ header: [false, 2, 3] }],
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
            ['clean'],
        ]},
    });

    const initialBody = @json($initialBody ?? '');
    if (initialBody) { quill.clipboard.dangerouslyPasteHTML(initialBody); }

    function qInsert(token) {
        const range = quill.getSelection(true);
        const at = range ? range.index : quill.getLength();
        quill.insertText(at, token, 'user');
        quill.setSelection(at + token.length, 0);
    }

    // Keep the hidden field in sync with the editor at all times (robust regardless
    // of how the form is submitted): on every change, and once on load.
    const bodyField = document.getElementById('body_html');
    function syncBody() {
        bodyField.value = quill.getText().trim().length ? quill.root.innerHTML : '';
    }
    quill.on('text-change', syncBody);
    syncBody();
    document.getElementById('editor').closest('form').addEventListener('submit', syncBody);
</script>