@extends('layouts.dashboard')

@section('content')
@php
/**
 * @var array $templates     the fixed set of transactional templates
 * @var array $mergeFields   [template key => merge fields that template receives]
 * @var array $globalFields  merge fields every template receives
 * @var bool  $canSend       whether outbound mail is configured
 */
$templates    = $templates ?? [];
$mergeFields  = $mergeFields ?? [];
$globalFields = $globalFields ?? [];
$canSend      = $canSend ?? false;
$adminEmail   = $adminEmail ?? '';
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            @php /* Bold card head — the red-bar stays a page-section device. */
@endphp
            <h2 class="mb-0">{{ t_raw('admin.emailtemplates.list_heading') }}</h2>
        </div>
    </div>

    <div class="table-responsive">
    @php /* Status is a live toggle switch (no sortable text content), so that th carries
              no data-sort. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr>
            <th scope="col" data-sort="text">{{ t_raw('admin.emailtemplates.col_template') }}</th>
            <th scope="col" data-sort="text">{{ t_raw('admin.emailtemplates.col_subject') }}</th>
            <th scope="col">{{ t_raw('common.status') }}</th>
            <th class="text-end" scope="col">{{ t_raw('common.actions') }}</th>
        </tr></thead>
        <tbody>
            @foreach ($templates as $tpl)
@php $active = (int) $tpl['is_active'] === 1; @endphp
            <tr>
                <td>
                    <strong>{{ (string) $tpl['name'] }}</strong>
                    @if (!empty($tpl['description']))<div class="qm-cell-sub">{{ (string) $tpl['description'] }}</div>@endif
                </td>
                <td class="qm-cell-body">{{ (string) $tpl['subject'] }}</td>
                <td>
                    <form method="post" action="{{ route('admin.email-templates.toggle') }}" class="mb-0">
                        @csrf
                        <input type="hidden" name="key" value="{{ (string) $tpl['key'] }}">
                        <input type="hidden" name="active" value="{{ $active ? '0' : '1' }}">
                        <div class="form-check form-switch qm-switch-status mb-0"><input class="form-check-input" type="checkbox" role="switch" data-autosubmit{{ $active ? ' checked' : '' }} aria-label="{!! $active ? t('common.enabled') : t('common.disabled') !!}"></div>
                    </form>
                </td>
                <td class="qm-actions-cell">
                    <a class="qm-icon-btn" href="{!! url('/admin/email-templates/' . e((string) $tpl['key']) . '/edit') !!}" aria-label="{{ t_raw('common.edit') }}" title="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></a>
                    <a class="qm-icon-btn" href="{!! url('/admin/email-templates/' . e((string) $tpl['key']) . '/preview') !!}" target="_blank" rel="noopener" aria-label="{{ t_raw('admin.emailtemplates.action_preview') }}" title="{{ t_raw('admin.emailtemplates.action_preview') }}"><i class="fas fa-eye" aria-hidden="true"></i></a>
                    <button type="button" class="qm-icon-btn{{ $canSend ? '' : ' is-disabled' }}"{!! $canSend ? '' : ' disabled aria-disabled="true"' !!} data-tpl-test data-key="{{ (string) $tpl['key'] }}" data-name="{{ (string) $tpl['name'] }}"
                        aria-label="{{ t_raw('admin.emailtemplates.action_test') }}" title="{!! $canSend ? t('admin.emailtemplates.action_test') : t('admin.emailtemplates.test_needs_smtp') !!}"><i class="fas fa-paper-plane" aria-hidden="true"></i></button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>

@php // Send a real message through the saved mail settings. Uses the same endpoint and the
      // same result idiom as the SMTP check on Settings → Email, so there is one answer to
      // "does outbound mail work?" wherever it is asked.
@endphp
<div class="qm-card">
    <h2 class="mb-2">{{ t_raw('admin.emailtemplates.test_heading') }}</h2>
    @if (!$canSend)
    <p class="qm-hint mb-0"><i class="fas fa-info-circle me-1" aria-hidden="true"></i> {{ t_raw('admin.emailtemplates.test_needs_smtp') }} <a href="{{ route('admin.settings') . '#email' }}">{{ t_raw('admin.messages.mail_off_link') }}</a></p>
    @else
    <div class="row g-2 align-items-end">
        <div class="col-12 col-lg-4">
            <label class="form-label" for="et-test-tpl">{{ t_raw('admin.emailtemplates.test_template_label') }}</label>
            <select id="et-test-tpl" class="form-select">
                @foreach ($templates as $tpl)
                <option value="{{ (string) $tpl['key'] }}">{{ (string) $tpl['name'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-lg-4">
            <label class="form-label" for="et-test-to">{{ t_raw('admin.settings.field_smtp_test_to') }}</label>
            <input type="email" id="et-test-to" class="form-control" value="{{ $adminEmail }}" placeholder="you@example.com">
        </div>
        <div class="col-12 col-lg-4">
            <button type="button" class="qm-btn qm-btn-outline w-100" id="et-test-btn"
                data-endpoint="{{ route('admin.settings.smtp.test') }}"
                data-msg-sending="{{ t_raw('admin.settings.smtp_test_sending') }}"
                data-msg-ok="{{ t_raw('admin.emailtemplates.test_ok') }}"
                data-msg-err="{{ t_raw('admin.settings.smtp_test_err') }}"
                data-msg-need-email="{{ t_raw('admin.settings.smtp_test_need_email') }}"><i class="fas fa-paper-plane me-2" aria-hidden="true"></i>{{ t_raw('admin.emailtemplates.test_btn') }}</button>
        </div>
    </div>
    <p class="qm-hint mt-2 mb-0" id="et-test-result" role="status" aria-live="polite"></p>
    @endif
</div>

@php // Which @{{tokens}} resolve in which template. A token used outside its template would
      // reach the reader as the literal text, so this is the reference that prevents it.
@endphp
<div class="qm-card">
    <h2 class="mb-2">{{ t_raw('admin.emailtemplates.fields_heading') }}</h2>
    <p class="qm-hint mt-0 mb-3">{{ t_raw('admin.emailtemplates.fields_help') }}</p>
    <div class="table-responsive">
    <table class="qm-table">
        <thead><tr>
            <th scope="col">{{ t_raw('admin.emailtemplates.col_template') }}</th>
            <th scope="col">{{ t_raw('admin.emailtemplates.fields_col_tokens') }}</th>
        </tr></thead>
        <tbody>
            <tr>
                <td><strong>{{ t_raw('admin.emailtemplates.fields_all_templates') }}</strong><div class="qm-cell-sub">{{ t_raw('admin.emailtemplates.fields_all_help') }}</div></td>
                <td>@foreach ($globalFields as $f)<code class="me-2">{{ '{{' . $f . '}' . '}' }}</code>@endforeach</td>
            </tr>
            @foreach ($templates as $tpl)
@php $fields = $mergeFields[(string) $tpl['key']] ?? []; @endphp
            <tr>
                <td><strong>{{ (string) $tpl['name'] }}</strong><div class="qm-cell-sub"><code>{{ (string) $tpl['key'] }}</code></div></td>
                <td>@if ($fields)
@foreach ($fields as $f)<code class="me-2">{{ '{{' . $f . '}' . '}' }}</code>@endforeach
@else{!! dash() !!}@endif</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>

<script>
(function () {
    var $ = function (id) { return document.getElementById(id); };
    var token = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

    // Row status toggle: submit its form on change (reversible; no confirm).
    document.addEventListener('change', function (e) {
        var t = e.target.closest('[data-autosubmit]');
        if (t) { var f = t.closest('form'); if (f) { f.submit(); } }
    });

    /* Row "send a test" button: point the test card at that template and jump to it. */
    document.addEventListener('click', function (e) {
        var b = e.target.closest('[data-tpl-test]');
        if (!b) { return; }
        var picker = $('et-test-tpl');
        if (!picker) { return; }
        picker.value = b.getAttribute('data-key') || '';
        picker.scrollIntoView({ block: 'center' });
        picker.focus();
    });

    /* Send the chosen template through the saved mail settings. The endpoint is already an
       absolute URL from url() — do NOT prepend a base (that doubles the URL -> 403). */
    (function () {
        var btn = $('et-test-btn'), out = $('et-test-result'), to = $('et-test-to'), tpl = $('et-test-tpl');
        if (!btn || !out || !to || !tpl) { return; }
        function setMsg(text, kind) {
            out.textContent = text;
            out.style.color = kind === 'ok' ? 'var(--ok)' : (kind === 'err' ? 'var(--danger)' : '');
        }
        btn.addEventListener('click', function () {
            var address = (to.value || '').trim();
            if (!address) { setMsg(btn.getAttribute('data-msg-need-email') || '', 'err'); return; }
            btn.disabled = true;
            setMsg(btn.getAttribute('data-msg-sending') || '', '');
            fetch(btn.getAttribute('data-endpoint'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-Token': token,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'to=' + encodeURIComponent(address) + '&template=' + encodeURIComponent(tpl.value) + '&_csrf=' + encodeURIComponent(token)
            }).then(function (r) { return r.json(); }).then(function (res) {
                if (res && res.ok) { setMsg(btn.getAttribute('data-msg-ok') || '', 'ok'); }
                else { setMsg((res && res.error) ? res.error : (btn.getAttribute('data-msg-err') || ''), 'err'); }
            }).catch(function () {
                setMsg(btn.getAttribute('data-msg-err') || '', 'err');
            }).then(function () { btn.disabled = false; });
        });
    })();
})();
</script>

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