{{-- Live preview of the template form it is included in (subject, body, traps). --}}
<div class="card" id="mail-preview" style="position:sticky;top:12px">
    <div class="row" style="justify-content:space-between">
        <h2 style="margin:0">Aperçu en direct</h2>
        <span class="muted" id="preview-state" style="font-size:12px"></span>
    </div>
    <p class="muted" style="margin:6px 0 10px;font-size:12px">Rendu avec un destinataire fictif (Prénom Nom). Les liens ne sont pas actifs et rien n'est enregistré.</p>
    <div style="border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff">
        <div style="padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px">
            <strong>Objet :</strong> <span id="preview-subject" class="muted">—</span>
        </div>
        <iframe id="preview-frame" title="Aperçu du mail" sandbox="" style="width:100%;height:480px;border:0;background:#fff"></iframe>
    </div>
</div>

<script>
(function () {
    const form = document.querySelector('form[data-live-preview]');
    const frame = document.getElementById('preview-frame');
    const subjectBox = document.getElementById('preview-subject');
    const state = document.getElementById('preview-state');
    let timer = null, controller = null;

    function collect() {
        const data = new FormData(form);
        const body = new FormData();
        body.append('subject', data.get('subject') || '');
        body.append('body_html', data.get('body_html') || '');
        for (const [key, value] of data.entries()) {
            if (key.startsWith('traps[')) { body.append(key, value); }
        }
        return body;
    }

    async function refresh() {
        if (controller) { controller.abort(); }
        controller = new AbortController();
        state.textContent = 'Mise à jour…';
        try {
            const response = await fetch(@json(route('templates.preview')), {
                method: 'POST',
                body: collect(),
                signal: controller.signal,
                headers: { 'X-CSRF-TOKEN': form.querySelector('input[name=_token]').value, 'Accept': 'application/json' },
            });
            if (!response.ok) { throw new Error(response.status); }
            const json = await response.json();
            frame.srcdoc = json.html || '<p style="font-family:sans-serif;color:#94a3b8;padding:16px">Le contenu du mail apparaîtra ici.</p>';
            subjectBox.textContent = json.subject || '—';
            state.textContent = 'À jour';
        } catch (e) {
            if (e.name !== 'AbortError') { state.textContent = 'Aperçu indisponible'; }
        }
    }

    function schedule() { clearTimeout(timer); timer = setTimeout(refresh, 350); }

    form.addEventListener('input', schedule);
    form.addEventListener('change', schedule);
    if (typeof quill !== 'undefined') { quill.on('text-change', schedule); }
    // Trap rows are added/removed by script, which fires no input event.
    new MutationObserver(schedule).observe(document.getElementById('traps'), { childList: true });
    refresh();
})();
</script>