@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Email templates → Edit, as a routed dashboard page (own URL, full chrome)
 * that replaced the #templateModal. The body can be authored two ways: a "Visual"
 * rich-text tab (Quill — for admins who do not write HTML) and an "HTML" source tab
 * (with the email-safe snippet toolbar). The hidden <textarea name="body_html"> is the
 * single canonical value: the visual editor writes email-safe, inline-styled HTML into
 * it (matching the branded shell), the HTML tab edits it directly, and the server-side
 * sanitiser cleans it on save exactly as before — so save() is unchanged.
 *
 * @var array $tpl          the template being edited (key, name, subject, body_html, description)
 * @var array $fields       merge fields this template receives
 * @var array $globalFields merge fields every template receives
 */
$tpl    = $tpl ?? [];
$fields = $fields ?? [];
$globalFields = $globalFields ?? [];
$tokens = array_merge($fields, $globalFields);
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php /* The preview pane's two widths. Kept here rather than in app.css for the same reason the
   TV screen editor keeps its chrome inline: it is one rule that exists only for this screen, and
   .qm-email-preview itself (width:100%; height:520px) already ships in app.css. `width` with
   max-width:100%, not max-width alone, so "Desktop" is really 600px when the column has room and
   still shrinks when it does not — mirroring the email card's own width="600" max-width:100%. */
@endphp
<style>
.qm-email-preview[data-w="600"] { width: 100%; }
.qm-email-preview[data-w="375"] { width: 375px; max-width: 100%; margin-inline: auto; }
</style>
@php /* The template's name is already the page H1 in the dashboard chrome, so repeating it here
         gave the screen the same heading twice. This is the section's own heading, in the
         qm-ops-head + qm-snap-section-title wrapper the list and analytics screens use. */
@endphp
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-1"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('admin.emailtemplates.edit_heading') }}</h2>
        @if (!empty($tpl['description']))<p class="qm-ops-sub mb-0">{{ (string) $tpl['description'] }}</p>@endif
    </div>
    <a href="{{ route('admin.email-templates') }}" class="qm-btn qm-btn-outline"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
</div>

<form method="post" action="{{ route('admin.email-templates') }}">
    @csrf
    <input type="hidden" name="key" id="et-key" value="{{ (string) $tpl['key'] }}">

    <div class="qm-card qm-card-pad">
        <div class="mb-4">
            <label class="form-label" for="et-subject">{{ t_raw('admin.emailtemplates.f_subject') }}</label>
            <input type="text" class="form-control" id="et-subject" name="subject" maxlength="200" required placeholder="{{ t_raw('common.placeholder_subject') }}" value="{{ (string) $tpl['subject'] }}">
        </div>
        @php /* Optional, and deliberately so: left blank the client scrapes the body exactly as
                 before, which is the behaviour every existing install already has. */
@endphp
        <div class="mb-4">
            <label class="form-label" for="et-preheader">{{ t_raw('admin.emailtemplates.f_preheader') }}</label>
            <input type="text" class="form-control" id="et-preheader" name="preheader" maxlength="200" placeholder="{{ t_raw('admin.emailtemplates.preheader_placeholder') }}" value="{{ (string) ($tpl['preheader'] ?? '') }}">
        </div>
    </div>

        @php /* Side by side only at xxl, and 5/7 when it is. An even split at lg gave the preview a
                 516px pane, so "Desktop" rendered the 600px email card at 490 — the admin was
                 reviewing a width no inbox uses, and the reflow they were checking for was the
                 pane's, not the email's. Measured: a true 600px pane needs ~1430px of viewport, so
                 at lg and xl the columns simply do not have it to give and squeezing both is the
                 worst of the three. Stacked, the preview gets the full content width and is a real
                 600 at every size down to ~660 — which is the entire point of the pane. */
@endphp
        <div class="row g-4 qm-editpreview">
            <div class="col-12 col-lg-4 qm-ep-controls">
                <div class="qm-card qm-card-pad">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <label class="form-label mb-0">{{ t_raw('admin.emailtemplates.f_body') }}</label>
                @php /* Elements the body can contain. A button needs a label AND a link, which a
                         toolbar toggle has nowhere to put — so it is a small form, and it inserts
                         into whichever editor is open. Uses the dropdown component the output
                         controls already use. */
@endphp
                <details class="qm-se-export mb-2" id="et-add">
                    <summary class="qm-btn qm-btn-sm qm-btn-outline"><i class="fas fa-plus me-1" aria-hidden="true"></i>{{ t_raw('admin.emailtemplates.add_element') }} <i class="fas fa-caret-down" aria-hidden="true"></i></summary>
                    <div class="qm-se-export-menu" role="menu">
                        <a role="menuitem" href="#" data-el="button"><i class="fas fa-hand-pointer" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_button') }}</a>
                        <a role="menuitem" href="#" data-el="divider"><i class="fas fa-minus" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_divider') }}</a>
                        <a role="menuitem" href="#" data-el="image"><i class="fas fa-image" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.el_image') }}</a>
                    </div>
                </details>
                </div>
                <div id="et-btnform" class="qm-card qm-card-pad mb-2" hidden>
                    <div class="mb-2" id="et-lab-wrap">
                        <label class="form-label" for="et-btn-label" id="et-lab-text">{{ t_raw('admin.emailtemplates.btn_label') }}</label>
                        <input type="text" class="form-control" id="et-btn-label" maxlength="60">
                    </div>
                    @php /* Pick from the library the blog form already uses. The URL field stays
                             below it for an external image or a YouTube link, which the library
                             does not hold. */
@endphp
                    <div class="mb-2" id="et-mf-image-wrap" hidden>
                        {!! media_field_html('et_media_image', null, ['accept' => 'image', 'id' => 'et-mf-image', 'allowClear' => true]) !!}
                    </div>
                    <div class="mb-2">
                        <label class="form-label" for="et-btn-url" id="et-url-text">{{ t_raw('admin.emailtemplates.btn_url') }}</label>
                        <input type="text" class="form-control" id="et-btn-url" value="@{{action_url}}">
                    </div>
                    <div class="mb-2" id="et-align-wrap">
                        <label class="form-label">{{ t_raw('admin.emailtemplates.f_align') }}</label>
                        <div class="qm-seg" role="group" aria-label="{{ t_raw('admin.emailtemplates.f_align') }}">
                            <button type="button" class="qm-seg-btn active" data-et-align="left" aria-pressed="true"><i class="fas fa-align-left" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.align_left') }}</button>
                            <button type="button" class="qm-seg-btn" data-et-align="right" aria-pressed="false"><i class="fas fa-align-right" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.align_right') }}</button>
                        </div>
                    </div>
                    <div class="d-flex gap-2 justify-content-end">
                        <button type="button" class="qm-btn qm-btn-sm qm-btn-outline" id="et-btn-cancel">{{ t_raw('common.cancel') }}</button>
                        <button type="button" class="qm-btn qm-btn-sm" id="et-btn-insert">{{ t_raw('admin.emailtemplates.insert_btn') }}</button>
                    </div>
                </div>
                @php // Two ways to author the same body: a WYSIWYG (Visual) and the HTML source.
@endphp
                <div class="qm-tabs" role="tablist" aria-label="{{ t_raw('admin.emailtemplates.f_body') }}">
                    <button type="button" class="qm-tab is-active" data-et-mode="visual" role="tab" aria-selected="true"><i class="fas fa-font me-1" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.mode_text') }}</button>
                    <button type="button" class="qm-tab" data-et-mode="html" role="tab" aria-selected="false"><i class="fas fa-code me-1" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.mode_html') }}</button>
                </div>

                @php // Visual tab: the Quill editor mounts into #et-visual.
@endphp
                <div data-et-pane="visual" class="qm-et-visual">
                    <div id="et-visual"></div>
                </div>

                @php // HTML tab: email-safe snippet toolbar + the raw source (the canonical value).
@endphp
                <div data-et-pane="html" hidden>
                    @php // Email-safe snippet toolbar: inserts pre-styled, inline/table HTML at the
                          // cursor. A helper for the HTML source, not a WYSIWYG (which would flatten
                          // the email layout). Styles mirror the seeded templates.
@endphp
                    <div class="qm-et-toolbar d-flex flex-wrap gap-2 mb-2" role="group" aria-label="{{ t_raw('admin.emailtemplates.tb_aria') }}">
                        <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-snip="para"><i class="fas fa-paragraph" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_para') }}</button>
                        <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-snip="bold"><i class="fas fa-bold" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_bold') }}</button>
                        <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-snip="link"><i class="fas fa-link" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_link') }}</button>
                        <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-snip="button"><i class="fas fa-hand-pointer" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_button') }}</button>
                        <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-snip="divider"><i class="fas fa-minus" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.tb_divider') }}</button>
                    </div>
                    <textarea class="form-control font-monospace qm-fs-13" id="et-body" name="body_html" rows="16" spellcheck="false" placeholder="{{ t_raw('admin.blog_form.body_placeholder') }}">{{ (string) $tpl['body_html'] }}</textarea>
                </div>

                <p class="qm-hint mt-3 mb-2">{{ t_raw('admin.emailtemplates.fields_inline_label') }}</p>
                <div class="d-flex flex-wrap gap-2" id="et-fields">
                    @foreach ($tokens as $f)
                    <button type="button" class="qm-btn qm-btn-xs qm-btn-outline" data-token="{{ '{{' . $f . '}' . '}' }}">{{ '{{' . $f . '}' . '}' }}</button>
                    @endforeach
                </div>
                </div>
            </div>
            <div class="col-12 col-lg-8 qm-ep-preview">
                <div class="qm-card qm-card-pad qm-sticky-preview">
                <label class="form-label">{{ t_raw('admin.emailtemplates.preview_pane') }}</label>
                @php /* The inbox line, not the message: what the recipient reads in their list
                         before opening anything. Subject then snippet, in that order, because that
                         is the order Gmail, Outlook and Apple Mail print them. */
@endphp
                <div class="qm-hint mb-2"><span class="fw-semibold">{{ t_raw('admin.emailtemplates.preview_subject_label') }}:</span> <span id="et-preview-subject"></span><span id="et-preview-preheader" class="text-muted"></span></div>
                @php /* Two independent controls, so two tablists. Both reuse the .qm-tabs / .qm-tab
                   component the Visual|HTML switch above already uses — the pane itself is the only
                   thing that needed a rule, and it is a width, not a look. The 375px setting is the
                   one that earns its place: the shell's card is width="600" with max-width:100%, so
                   it is only below 600 that the reflow can be seen at all. */
@endphp
                <div class="d-flex flex-wrap gap-2 mb-2">
                    <div class="qm-tabs" role="tablist" aria-label="{{ t_raw('admin.emailtemplates.preview_width_aria') }}">
                        <button type="button" class="qm-tab is-active" data-et-width="600" role="tab" aria-selected="true"><i class="fas fa-desktop me-1" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.width_desktop') }}</button>
                        <button type="button" class="qm-tab" data-et-width="375" role="tab" aria-selected="false"><i class="fas fa-mobile-alt me-1" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.width_mobile') }}</button>
                    </div>
                </div>
                <div class="qm-email-stage">
                    <iframe id="et-preview-frame" class="qm-email-preview" data-w="600" title="{{ t_raw('admin.emailtemplates.preview_pane') }}"></iframe>
                </div>
                </div>
            </div>
        </div>

    <div class="d-flex gap-2 mt-4 justify-content-end">
        <a class="qm-btn qm-btn-outline" href="{{ route('admin.email-templates') }}">{{ t_raw('common.cancel') }}</a>
        <button type="submit" class="qm-btn qm-btn-outline" formaction="{{ route('admin.email-templates.restore') }}" formnovalidate{{ trim((string) ($tpl['body_html_prev'] ?? '')) === '' ? ' disabled' : '' }}>{{ t_raw('admin.emailtemplates.restore_btn') }}</button>
        <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
    </div>
</form>

<script>
/* Email-template editor. Runs after DOMContentLoaded so the footer-loaded Quill bundle
   is available. The hidden <textarea id="et-body"> is the one submitted value; the
   Visual (Quill) and HTML tabs both edit it, and the live preview always renders from it. */
(function () {
    function init() {
        var $ = function (id) { return document.getElementById(id); };
        // Absolute endpoint from url() — do NOT prepend a base (that doubles the URL → 403).
        var PREVIEW_ENDPOINT = {!! json_encode(route('admin.email-templates.preview.post'), JSON_UNESCAPED_SLASHES) !!};
        var token = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
        var frame = $('et-preview-frame'), subjectOut = $('et-preview-subject');
        var preheaderOut = $('et-preview-preheader');
        var bodyEl = $('et-body'), subjectEl = $('et-subject'), preheaderEl = $('et-preheader');
        var timer = null;
        // Set only by a real keystroke in the visual editor; gates every write-back.
        var visualDirty = false;
        // The direction the shell is previewed in. Starts at the site's own; the toggle asks the
        // server for the other one, because the layout takes its dir from the VIEWER's language
        // and a preview must not rewrite the admin's session to see the other side.

        // Render the current (unsaved) subject + body through the branded shell with sample
        // data and paint it into the preview iframe — always from the canonical textarea.
        function refreshPreview() {
            if (!frame) { return; }
            fetch(PREVIEW_ENDPOINT, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-Token': token,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'subject=' + encodeURIComponent(subjectEl ? subjectEl.value : '') +
                      '&preheader=' + encodeURIComponent(preheaderEl ? preheaderEl.value : '') +
                      '&body_html=' + encodeURIComponent(bodyEl ? bodyEl.value : '') +
                      '&_csrf=' + encodeURIComponent(token)
            }).then(function (r) { return r.json(); }).then(function (res) {
                if (res && res.ok) {
                    frame.srcdoc = res.html || '';
                    /* Height from the rendered email, clamped. The cap is what makes a long
                       template scroll inside the frame rather than be clipped; the floor stops
                       a two-line one collapsing to nothing. */
                    frame.onload = function () {
                        try {
                            var h = frame.contentDocument.body.scrollHeight;
                            frame.style.height = Math.max(h, 320) + 'px';
                        } catch (e) { /* height is cosmetic; never block the preview */ }
                    };
                    if (subjectOut) { subjectOut.textContent = res.subject || ''; }
                    // Leading separator only when there is a snippet, so an empty preheader
                    // leaves the subject line looking exactly as it did before.
                    if (preheaderOut) {
                        preheaderOut.textContent = res.preheader ? ' — ' + res.preheader : '';
                    }
                }
            }).catch(function () { /* preview is best-effort; editing still works */ });
        }
        function schedule() { clearTimeout(timer); timer = setTimeout(refreshPreview, 350); }

        // ---- Preview width + direction ----------------------------------------------------
        // Width is a CSS attribute on the frame, so switching it never refetches and the unsaved
        // draft in the pane survives untouched. Direction has to come from the server, so it
        // re-renders — from the same canonical textarea, which is why the draft survives that too.
        function pickTab(group, attr, value) {
            Array.prototype.forEach.call(group.querySelectorAll('[' + attr + ']'), function (b) {
                var on = b.getAttribute(attr) === value;
                b.classList.toggle('is-active', on);
                b.setAttribute('aria-selected', on ? 'true' : 'false');
            });
        }
        Array.prototype.forEach.call(document.querySelectorAll('[data-et-width]'), function (b) {
            b.addEventListener('click', function () {
                var w = b.getAttribute('data-et-width');
                if (frame) { frame.setAttribute('data-w', w); }
                pickTab(b.parentNode, 'data-et-width', w);
            });
        });

        // Turn the visual editor's semantic HTML into the inline-styled HTML email clients
        // need (mirrors the seeded templates + snippet toolbar; @{{primary_color}} resolves
        // in the branded shell). So a non-technical admin gets on-brand output for free.
        /* The button's inline style, identical to SNIPPETS.button below. Declared once so the
           visual editor and the HTML toolbar cannot drift apart. */
        var BTN_STYLE = 'display:inline-block;background:@{{primary_color}};color:#ffffff;text-decoration:none;font-weight:bold;padding:12px 24px;border-radius:8px;font-family:Arial,Helvetica,sans-serif;font-size:15px';
        var STYLE = {
            p:  'margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#333333',
            a:  'color:@{{primary_color}};text-decoration:underline',
            h2: 'margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.3;color:#1a1a1a',
            h3: 'margin:0 0 12px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.4;color:#1a1a1a',
            ul: 'margin:0 0 16px;padding-left:22px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#333333',
            ol: 'margin:0 0 16px;padding-left:22px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#333333',
            li: 'margin:0 0 6px',
            blockquote: 'margin:0 0 16px;padding:8px 16px;border-left:3px solid #e5e5e5;color:#555555;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6'
        };
        /* Inverse of emailize's button branch: an anchor already carrying the button style is
           tagged with the blot's class so Quill recognises it as a button. */
        function markButtons(html) {
            var box = document.createElement('div');
            box.innerHTML = html;
            Array.prototype.forEach.call(box.querySelectorAll('a[style]'), function (el) {
                if ((el.getAttribute('style') || '').indexOf('display:inline-block') > -1) {
                    el.classList.add('qm-em-btn');
                }
            });
            /* A stored divider is a bare styled div; tag it so Quill's blot picks it up. */
            Array.prototype.forEach.call(box.querySelectorAll('div[style]'), function (el) {
                if (el.children.length || el.textContent.trim() !== '') { return; }
                if ((el.getAttribute('style') || '').indexOf('border-top') === -1) { return; }
                var hr = document.createElement('hr');
                hr.className = 'qm-em-divider';
                el.parentNode.replaceChild(hr, el);
            });
            /* The stored email states alignment inline; Quill only shows it from its own class. */
            Array.prototype.forEach.call(box.querySelectorAll('p,h2,h3,li,blockquote'), function (el) {
                var side = alignOf(el);
                if (side) { el.classList.add('ql-align-' + side); }
            });
            return box.innerHTML;
        }

        /* Alignment as the editor holds it (a Quill class) or as the stored email holds it
           (inline). Read either, so a block keeps its side across a load-edit-save round trip. */
        function alignOf(el) {
            var cls = (el.getAttribute('class') || '').match(/ql-align-(center|right|justify)/);
            if (cls) { return cls[1]; }
            var st = (el.getAttribute('style') || '').match(/text-align:\s*(center|right|justify)/);
            return st ? st[1] : '';
        }

        function emailize(html) {
            var box = document.createElement('div');
            box.innerHTML = html;
            Object.keys(STYLE).forEach(function (tag) {
                Array.prototype.forEach.call(box.querySelectorAll(tag), function (el) {
                    /* A button is an anchor too. Applying STYLE.a to it is what turned every
                       button back into a plain link on save. */
                    if (tag === 'a' && el.classList.contains('qm-em-btn')) { return; }
                    /* STYLE replaces the whole attribute, so alignment has to be carried over
                       or every save would flatten the block back to the default side. */
                    var side = alignOf(el);
                    el.setAttribute('style', STYLE[tag] + (side ? ';text-align:' + side : ''));
                    /* Quill's own class does not belong in the sent email. */
                    var left = (el.getAttribute('class') || '').replace(/ql-align-\w+/g, '').trim();
                    if (left) { el.setAttribute('class', left); } else { el.removeAttribute('class'); }
                });
            });
            /* Images: Quill keeps the src and drops everything else, and a library pick is a
               path relative to the install. Neither survives an inbox — a mail client has no page
               to resolve a relative URL against, so the image simply does not load. Absolutise it
               and put the email-safe styling back, exactly as the button and divider do. */
            Array.prototype.forEach.call(box.querySelectorAll('img'), function (el) {
                var src = el.getAttribute('src') || '';
                if (src && !/^(https?:|data:|cid:|\{\{)/i.test(src)) {
                    /* Library paths are stored relative to assets/ - media() resolves them as
                       baseUrl() + "/assets/" + path. Prepending only the base produced a URL that
                       404s, so the image reached the preview and rendered as a broken 0x0. */
                    var base = (window.QM && window.QM.base) ? window.QM.base : '';
                    el.setAttribute('src', base.replace(/\/+$/, '') + '/assets/' + src.replace(/^\/+/, ''));
                }
                if (!el.getAttribute('alt')) { el.setAttribute('alt', ''); }
                el.setAttribute('width', '560');
                el.setAttribute('style', 'display:block;max-width:100%;height:auto;border:0;border-radius:8px');
            });
            /* The divider blot becomes the markup the HTML tab's snippet emits - one source. */
            Array.prototype.forEach.call(box.querySelectorAll('hr.qm-em-divider'), function (el) {
                var d = document.createElement('div');
                d.setAttribute('style', 'border-top:1px solid #e5e5e5;margin:24px 0');
                el.parentNode.replaceChild(d, el);
            });
            /* Buttons take the markup the HTML tab's snippet already emits - one source. */
            Array.prototype.forEach.call(box.querySelectorAll('a.qm-em-btn'), function (el) {
                el.setAttribute('style', BTN_STYLE);
                el.removeAttribute('class');
            });
            return box.innerHTML.trim();
        }

        // ---- Visual editor (Quill). Fails safe to the HTML tab if the bundle is absent. ----
        var quill = null, syncing = false, host = $('et-visual');
        if (host && window.Quill) {
            /* A button is a LINK Quill owns, marked with a class. Quill drops inline styles but
               keeps a class its own blot declares, which is what lets the button survive being
               loaded into the editor and written back out. emailize() puts the style back. */
            var QLink = Quill.import('formats/link');
            function EmailButton() { QLink.apply(this, arguments); }
            EmailButton.prototype = Object.create(QLink.prototype);
            EmailButton.prototype.constructor = EmailButton;
            /* The static chain as well as the instance one. Parchment builds a blot from its
               static members, so without this the format registers but can never be applied —
               formatText and the paste matcher both no-op and the button comes back as text. */
            Object.setPrototypeOf(EmailButton, QLink);
            EmailButton.blotName = 'embutton';
            EmailButton.tagName = 'A';
            EmailButton.className = 'qm-em-btn';
            EmailButton.create = function (value) {
                var node = QLink.create.call(this, value || '@{{action_url}}');
                node.classList.add('qm-em-btn');
                return node;
            };
            EmailButton.formats = function (node) { return node.getAttribute('href'); };
            Quill.register(EmailButton, true);

            /* A divider is a block Quill has no format for, so the styled div the snippet emits
               was simply discarded on paste - nothing inserted, nothing reported. Giving it a blot
               Quill owns makes it a real, selectable, deletable block; emailize() turns it back
               into the div an email client understands. */
            var QBlockEmbed = Quill.import('blots/block/embed');
            function EmailDivider() { QBlockEmbed.apply(this, arguments); }
            EmailDivider.prototype = Object.create(QBlockEmbed.prototype);
            EmailDivider.prototype.constructor = EmailDivider;
            Object.setPrototypeOf(EmailDivider, QBlockEmbed);
            EmailDivider.blotName = 'emdivider';
            EmailDivider.tagName = 'HR';
            EmailDivider.className = 'qm-em-divider';
            Quill.register(EmailDivider, true);
            var QDelta = Quill.import('delta');
            quill = new Quill(host, {
                theme: 'snow',
                placeholder: {!! json_encode(t_raw('admin.blog_form.body_placeholder'), JSON_UNESCAPED_UNICODE) !!},
                modules: { toolbar: [
                    [{ header: [2, 3, false] }],
                    ['bold', 'italic', 'underline'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['blockquote'],
                    ['link'],
                    [{ align: [] }],
                    ['clean']
                ] }
            });
            quill.clipboard.addMatcher('a.qm-em-btn', function (node, delta) {
                /* The button carries its own colour and weight inline, which Quill would other-
                   wise read as editor formats — leaving white bold text that keeps applying to
                   whatever is typed after the button. The blot alone describes it. */
                return delta.compose(new QDelta().retain(delta.length(), {
                    embutton: node.getAttribute('href') || '@{{action_url}}',
                    bold: false, italic: false, underline: false,
                    color: false, background: false, size: false, font: false, link: false
                }));
            });
            quill.root.style.minHeight = '320px';
            // Seed from the saved HTML (programmatic — the syncing guard blocks a write-back,
            // so an untouched styled template is never flattened just by opening it).
            syncing = true;
            quill.clipboard.dangerouslyPasteHTML(markButtons((bodyEl.value || '').trim()));
            syncing = false;
            // A real user edit → email-safe HTML → the canonical textarea → refresh preview.
            quill.on('text-change', function (delta, old, source) {
                if (syncing || source !== 'user') { return; }
                visualDirty = true;
                bodyEl.value = (quill.getText().trim() === '') ? '' : emailize(quill.root.innerHTML);
                schedule();
            });
        }

        // ---- Mode tabs (Visual | HTML) ----
        var tabs = document.querySelectorAll('[data-et-mode]');
        function setMode(mode) {
            Array.prototype.forEach.call(tabs, function (t) {
                var on = t.getAttribute('data-et-mode') === mode;
                t.classList.toggle('is-active', on);
                t.setAttribute('aria-selected', on ? 'true' : 'false');
            });
            Array.prototype.forEach.call(document.querySelectorAll('[data-et-pane]'), function (p) {
                p.hidden = p.getAttribute('data-et-pane') !== mode;
            });
            // Entering Visual: reload the editor from the (maybe HTML-edited) textarea.
            if (mode === 'visual' && quill) {
                syncing = true;
                quill.clipboard.dangerouslyPasteHTML(markButtons((bodyEl.value || '').trim()));
                syncing = false;
            }
        }
        Array.prototype.forEach.call(tabs, function (t) {
            t.addEventListener('click', function () { setMode(t.getAttribute('data-et-mode')); });
        });
        function activeMode() {
            var v = document.querySelector('[data-et-mode].is-active');
            return v ? v.getAttribute('data-et-mode') : 'html';
        }

        // Without Quill, the Visual tab has nothing behind it — drop it, stay on HTML.
        if (!quill) {
            Array.prototype.forEach.call(document.querySelectorAll('[data-et-mode="visual"], [data-et-pane="visual"]'), function (el) { el.hidden = true; });
            setMode('html');
        }

        // ---- Insert a merge field at the cursor, in whichever mode is active ----
        /* Insert a finished element. The markup comes from SNIPPETS, so the HTML toolbar and this
           control cannot produce different buttons. In the visual editor the same HTML is pasted
           at the cursor, and emailize() keeps its styling on the way back out. */
        /* Escape a label before it is put into markup. The insert handler called an esc() that
           exists in other files but not this one, so every insert threw a ReferenceError. */
        function esc(str) {
            return String(str).replace(/[&<>"]/g, function (c) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
            });
        }

        function insertElementHtml(html, align) {
            if (activeMode() === 'visual' && quill) {
                var r = quill.getSelection(true);
                var at = r ? r.index : quill.getLength();
                quill.clipboard.dangerouslyPasteHTML(at, markButtons(html), 'user');
                /* Alignment is a property of the line, not of the pasted markup: pasting at a
                   cursor merges into the current block, so the pasted block's own side is lost.
                   Set it through the same format the toolbar's align control uses. */
                if (align) { quill.formatLine(at, 1, 'align', align === 'left' ? false : align, 'user'); }
                return;
            }
            if (!bodyEl) { return; }
            bodyEl.focus();
            var a = bodyEl.selectionStart, b = bodyEl.selectionEnd;
            bodyEl.value = bodyEl.value.slice(0, a) + html + bodyEl.value.slice(b);
            bodyEl.setSelectionRange(a + html.length, a + html.length);
            schedule();
        }

        var addBox = $('et-add'), btnForm = $('et-btnform'), elKind = 'button', elAlign = 'left';
        var T_BTN_LABEL   = {!! json_encode(t_raw('admin.emailtemplates.btn_label'), JSON_UNESCAPED_UNICODE) !!};
        var T_BTN_URL     = {!! json_encode(t_raw('admin.emailtemplates.btn_url'), JSON_UNESCAPED_UNICODE) !!};
        var T_IMG_URL     = {!! json_encode(t_raw('admin.emailtemplates.img_url'), JSON_UNESCAPED_UNICODE) !!};
        if (addBox && btnForm) {
            addBox.addEventListener('click', function (e) {
                var pick = e.target.closest('[data-el]');
                if (!pick) { return; }
                e.preventDefault();
                addBox.open = false;
                elKind = pick.getAttribute('data-el');
                if (elKind === 'divider') {
                    /* Visual tab: insert the block through Quill's own API. Pasting markup it has
                       no blot for is what made this control do nothing at all. */
                    if (activeMode() === 'visual' && quill) {
                        var dr = quill.getSelection(true);
                        var dat = dr ? dr.index : quill.getLength();
                        quill.insertEmbed(dat, 'emdivider', true, 'user');
                        quill.setSelection(dat + 1, 0);
                    } else {
                        insertElementHtml(SNIPPETS.divider.before);
                    }
                    return;
                }
                /* One form, two shapes. An image needs only a source; a button needs its text
                   as well, so the first field hides for image. */
                var isImg = elKind === 'image';
                $('et-lab-wrap').hidden = isImg;
                $('et-lab-text').textContent = T_BTN_LABEL;
                $('et-url-text').textContent = isImg ? T_IMG_URL : T_BTN_URL;
                $('et-btn-url').value = elKind === 'button' ? '@{{action_url}}' : '';
                $('et-mf-image-wrap').hidden = elKind !== 'image';
                /* Alignment belongs to the button. Every insert opens on left, so the control
                   always states the alignment the insert will actually use. */
                $('et-align-wrap').hidden = elKind !== 'button';
                setAlign('left');
                btnForm.hidden = false;
                (isImg ? $('et-btn-url') : $('et-btn-label')).focus();
            });
            /* The shared segmented control: one button carries .active and aria-pressed. */
            function setAlign(side) {
                elAlign = side;
                var btns = btnForm.querySelectorAll('[data-et-align]');
                for (var i = 0; i < btns.length; i++) {
                    var on = btns[i].getAttribute('data-et-align') === side;
                    btns[i].classList.toggle('active', on);
                    btns[i].setAttribute('aria-pressed', on ? 'true' : 'false');
                }
            }
            btnForm.addEventListener('click', function (e) {
                var pick = e.target.closest('[data-et-align]');
                if (pick) { setAlign(pick.getAttribute('data-et-align')); }
            });
            $('et-btn-cancel').addEventListener('click', function () { btnForm.hidden = true; });
            $('et-btn-insert').addEventListener('click', function () {
                var label = ($('et-btn-label').value || '').trim();
                /* A library pick wins; the URL box is the escape hatch for anything the library
                   does not hold — an external image, a YouTube link. */
                var picked = '';
                if (elKind === 'image') {
                    var mf = document.querySelector('[name="et_media_' + elKind + '"]');
                    picked = mf ? (mf.value || '').trim() : '';
                }
                var url = picked || ($('et-btn-url').value || '').trim() || '@{{action_url}}';
                /* A library pick is a path relative to assets/. The EDITOR resolves it against the
                   current page URL, so an un-absolutised path renders as a broken image while you
                   author. Resolve it here, at insert, so the editor and the email agree. */
                if (elKind === 'image' && picked !== ''
                    && !/^(https?:|data:|\/\/)/i.test(url)) {
                    var mBase = (window.QM && window.QM.base) ? window.QM.base : '';
                    url = mBase.replace(/\/+$/, '') + '/assets/' + url.replace(/^\/+/, '');
                }
                /* What each element actually requires: an image needs a source, a button and a
                   a button needs its text too. Requiring a label for an image meant Insert bailed
                   silently and focused a field that is hidden for image, so nothing happened and
                   nothing was said. */
                if (elKind === 'image') {
                    if (picked === '' && ($('et-btn-url').value || '').trim() === '') {
                        $('et-btn-url').focus();
                        return;
                    }
                } else if (label === '') {
                    $('et-btn-label').focus();
                    return;
                }
                /* Same markup the HTML snippet emits, with the label and link filled in. */
                var html;
                if (elKind === 'image') {
                    html = SNIPPETS.image.before + esc(url) + SNIPPETS.image.after;
                } else {
                    /* The snippet carries the default, left; the chosen side is substituted in the
                       same way the link already is, so the markup has one source. */
                    html = SNIPPETS.button.before
                        .replace('text-align:left', 'text-align:' + elAlign)
                        .replace('@{{action_url}}', esc(url)) + esc(label) + SNIPPETS.button.after;
                }
                insertElementHtml(html, elKind === 'button' ? elAlign : null);
                btnForm.hidden = true;
                $('et-btn-label').value = '';
                $('et-btn-url').value = '@{{action_url}}';
            });
        }

        function insertToken(tok) {
            if (activeMode() === 'visual' && quill) {
                var range = quill.getSelection(true);
                quill.insertText(range ? range.index : quill.getLength(), tok, 'user');
                return;
            }
            if (!bodyEl) { return; }
            bodyEl.focus();
            var a = bodyEl.selectionStart, b = bodyEl.selectionEnd;
            bodyEl.value = bodyEl.value.slice(0, a) + tok + bodyEl.value.slice(b);
            bodyEl.setSelectionRange(a + tok.length, a + tok.length);
            schedule();
        }
        Array.prototype.forEach.call(document.querySelectorAll('#et-fields [data-token]'), function (btn) {
            btn.addEventListener('click', function () { insertToken(btn.getAttribute('data-token')); });
        });

        // ---- HTML-tab snippet toolbar: insert pre-styled HTML at the cursor (wrapping the
        //      selection where it fits), then refresh the preview. ----
        var SNIPPETS = {
            para:    { before: '<p style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#333333">', after: '</p>\n', ph: {!! json_encode(t_raw('admin.emailtemplates.tb_ph_para'), JSON_UNESCAPED_UNICODE) !!} },
            bold:    { before: '<strong>', after: '</strong>', ph: {!! json_encode(t_raw('admin.emailtemplates.tb_ph_bold'), JSON_UNESCAPED_UNICODE) !!} },
            link:    { before: '<a href="https://example.com" style="color:@{{primary_color}};text-decoration:underline">', after: '</a>', ph: {!! json_encode(t_raw('admin.emailtemplates.tb_ph_link'), JSON_UNESCAPED_UNICODE) !!} },
            button:  { before: '<p style="margin:0 0 24px;text-align:left"><a href="@{{action_url}}" style="display:inline-block;background:@{{primary_color}};color:#ffffff;text-decoration:none;font-weight:bold;padding:12px 24px;border-radius:8px;font-family:Arial,Helvetica,sans-serif;font-size:15px">', after: '</a></p>\n', ph: {!! json_encode(t_raw('admin.emailtemplates.tb_ph_button'), JSON_UNESCAPED_UNICODE) !!} },
            divider: { before: '<div style="border-top:1px solid #e5e5e5;margin:24px 0"></div>\n', after: '', ph: '' },
            image:   { before: '<p style="margin:0 0 16px"><img src="', after: '" alt="" width="560" style="display:block;max-width:100%;height:auto;border:0;border-radius:8px"></p>\n', ph: '' }
        };
        function insertSnippet(kind) {
            var s = SNIPPETS[kind];
            if (!s || !bodyEl) { return; }
            bodyEl.focus();
            var a = bodyEl.selectionStart, b = bodyEl.selectionEnd;
            var sel = bodyEl.value.slice(a, b) || s.ph;
            bodyEl.value = bodyEl.value.slice(0, a) + s.before + sel + s.after + bodyEl.value.slice(b);
            var caret = a + s.before.length;
            bodyEl.setSelectionRange(caret, caret + sel.length);
            schedule();
        }
        Array.prototype.forEach.call(document.querySelectorAll('.qm-et-toolbar [data-snip]'), function (btn) {
            btn.addEventListener('click', function () { insertSnippet(btn.getAttribute('data-snip')); });
        });

        // HTML-tab direct edits + subject edits refresh the preview.
        if (bodyEl) { bodyEl.addEventListener('input', schedule); }
        if (subjectEl) { subjectEl.addEventListener('input', schedule); }
        if (preheaderEl) { preheaderEl.addEventListener('input', schedule); }

        // Belt-and-braces: on submit, flush the visual editor into the textarea.
        var form = bodyEl ? bodyEl.closest('form') : null;
        if (form && quill) {
            form.addEventListener('submit', function () {
                /* Only when the visual editor was actually TYPED IN. It used to write back on
                   every submit, so opening a template and pressing Save flattened it. */
                if (activeMode() === 'visual' && visualDirty) {
                    bodyEl.value = (quill.getText().trim() === '') ? '' : emailize(quill.root.innerHTML);
                }
            });
        }

        // Paint the preview once on load.
        refreshPreview();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection