{{define "admin/settings_mail.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-envelope" "Title" (T "admin.mail.title") "Desc" (T "admin.mail.desc"))}}

<form method="post" action="/admin/settings/mail" id="mail-settings-form">
  <section id="mail-config" class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-envelope"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.mail.section_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.mail.section_sub"}}</p>
      </div>
    </div>
    <div class="cs-admin-section__body">
      <div class="cs-admin-settings-groups">
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-toggle-left" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.common.basic_switch"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.mail.switch_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="mail_enable">{{T "admin.mail.enable"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="mail_enable" name="mail_enable" value="1" {{if index .Data "MailEnable"}}checked{{end}} aria-label="{{T "admin.mail.enable"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.mail.enable_hint"}}</div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-server" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.mail.conn_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.mail.conn_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2">
              <div class="col-md-8 col-lg-6 cs-admin-field">
                <label class="form-label">{{T "admin.mail.smtp_host"}}</label>
                <input type="text" class="form-control form-control-sm" name="mail_smtp_host" value="{{index .Data "MailHost"}}" placeholder="smtp.qq.com">
              </div>
              <div class="col-md-4 col-lg-2 cs-admin-field">
                <label class="form-label">{{T "admin.mail.port"}}</label>
                <input type="number" class="form-control form-control-sm" name="mail_smtp_port" value="{{index .Data "MailPort"}}" placeholder="465">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.smtp_user"}}</label>
                <input type="text" class="form-control form-control-sm" name="mail_smtp_user" value="{{index .Data "MailUser"}}" autocomplete="off">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.smtp_pass"}}</label>
                <input type="password" class="form-control form-control-sm" name="mail_smtp_pass" value="{{index .Data "MailPassMasked"}}" autocomplete="new-password" placeholder="{{T "admin.mail.pass_placeholder"}}">
              </div>
            </div>
            <div class="form-text mb-0">{{T "admin.mail.secret_hint"}}</div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-envelope" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.mail.from_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.mail.from_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2">
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.from_email"}}</label>
                <input type="email" class="form-control form-control-sm nc-privacy-input" data-privacy-kind="email" name="mail_from_email" value="{{index .Data "MailFromEmail"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.from_name"}}</label>
                <input type="text" class="form-control form-control-sm" name="mail_from_name" value="{{index .Data "MailFromName"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.alert_email"}}</label>
                <input type="email" class="form-control form-control-sm nc-privacy-input" data-privacy-kind="email" name="mail_alert_email" value="{{index .Data "MailAlertEmail"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.mail.daily_limit"}}</label>
                <input type="number" class="form-control form-control-sm" name="mail_daily_limit_alert" min="0" value="{{index .Data "MailDailyLimit"}}">
              </div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-file-blank" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.mail.tpl_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.mail.tpl_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2 align-items-end ut-admin-inline-form">
              <div class="col-md-6 col-lg-5 cs-admin-field">
                <label class="form-label" for="mail-test-to">{{T "admin.mail.test_to"}}</label>
                <input type="email" class="form-control form-control-sm nc-privacy-input" data-privacy-kind="email" id="mail-test-to" value="{{index .Data "MailTestDefaultTo"}}" placeholder="admin@example.com" autocomplete="off">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label" for="mail-template-type">{{T "admin.mail.tpl_type"}}</label>
                <select class="form-select form-select-sm" id="mail-template-type">
                  {{range index .Data "MailTemplates"}}
                  <option value="{{index . "id"}}">{{index . "name"}}</option>
                  {{end}}
                </select>
              </div>
              <div class="col-lg-3 d-flex flex-wrap gap-2 align-self-end pb-1">
                <button type="button" class="btn btn-outline-primary btn-sm" id="btn-mail-preview"><i class="bx bx-show me-1"></i>{{T "admin.mail.btn_preview"}}</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-mail-test"><i class="bx bx-send me-1"></i>{{T "admin.mail.btn_test"}}</button>
              </div>
              <div class="col-12">
                <div class="form-text mb-0">{{T "admin.mail.test_hint"}}</div>
              </div>
            </div>
            <div id="mail-test-result" class="small mt-2 d-none"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="modal fade" id="mailPreviewModal" tabindex="-1" aria-labelledby="mailPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered ut-mail-preview-dialog">
      <div class="modal-content">
        <div class="modal-header py-2">
          <h5 class="modal-title h6" id="mailPreviewModalLabel">{{T "admin.mail.preview_modal_title"}}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-0 bg-light ut-mail-preview-body">
          <div class="px-3 py-2 border-bottom bg-white small text-muted" id="mail-preview-subject"></div>
          <iframe id="mail-preview-frame" title="{{T "admin.mail.preview_iframe_title"}}" class="w-100 border-0 ut-mail-preview-frame" scrolling="no"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="cs-admin-savebar mt-4">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle me-1"></i>{{T "admin.common.save_hint_hot"}}</p>
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.common.save_config"}}</button>
    </div>
  </div>
</form>
</div>
<script>
(function () {
  function cleanOkQuery() {
    try {
      var u = new URL(window.location.href);
      if (!u.searchParams.has('ok')) return;
      u.searchParams.delete('ok');
      var qs = u.searchParams.toString();
      history.replaceState(null, '', u.pathname + (qs ? ('?' + qs) : '') + u.hash);
    } catch (e) {}
  }

  cleanOkQuery();

  $('#mail-settings-form').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: $form.attr('action'),
      method: 'POST',
      data: $form.serialize(),
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (res && res.success) {
        showAdminToast(true, (res.data && res.data.message) || res.message || {{jsString (T "admin.common.config_saved")}});
        var $pass = $('input[name="mail_smtp_pass"]');
        if ($pass.val() && $pass.val() !== '***') {
          $pass.val('***');
        }
      } else {
        showAdminToast(false, (res && res.message) || {{jsString (T "admin.common.save_fail")}});
      }
    }).fail(function (xhr) {
      var msg = {{jsString (T "admin.common.save_fail")}};
      try {
        var j = JSON.parse(xhr.responseText);
        if (j.message) msg = j.message;
      } catch (err) {}
      showAdminToast(false, msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  });

  function mailFormPayload(extra) {
    var data = {
      mail_smtp_host: $('input[name="mail_smtp_host"]').val(),
      mail_smtp_port: $('input[name="mail_smtp_port"]').val(),
      mail_smtp_user: $('input[name="mail_smtp_user"]').val(),
      mail_smtp_pass: $('input[name="mail_smtp_pass"]').val(),
      mail_from_email: $('input[name="mail_from_email"]').val(),
      mail_from_name: $('input[name="mail_from_name"]').val()
    };
    if (extra) {
      $.extend(data, extra);
    }
    return data;
  }

  function showMailResult(ok, msg) {
    var $box = $('#mail-test-result');
    $box.removeClass('d-none alert-success alert-danger').addClass(ok ? 'alert alert-success py-2' : 'alert alert-danger py-2').text(msg);
  }

  function resizeMailPreviewFrame(frame) {
    if (!frame) return;
    try {
      var doc = frame.contentDocument || frame.contentWindow.document;
      if (!doc || !doc.body) return;
      var html = doc.documentElement;
      var body = doc.body;
      frame.style.height = '0px';
      if (html) {
        html.style.height = 'auto';
        html.style.minHeight = '0';
        html.style.overflow = 'hidden';
      }
      if (body) {
        body.style.height = 'auto';
        body.style.minHeight = '0';
        body.style.overflow = 'hidden';
        body.style.margin = '0';
      }
      void body.offsetHeight;
      var h = Math.ceil(Math.max(
        body.getBoundingClientRect().height,
        body.scrollHeight,
        body.offsetHeight,
        html ? html.scrollHeight : 0
      ));
      frame.style.height = Math.max(h, 1) + 'px';
    } catch (e) {}
  }

  function resetMailPreviewFrame(frame) {
    if (!frame) return;
    frame.onload = null;
    frame.style.height = '0';
    try {
      frame.removeAttribute('srcdoc');
      var win = frame.contentWindow;
      if (win && win.document) {
        win.document.open();
        win.document.write('');
        win.document.close();
      }
    } catch (e) {}
  }

  function loadMailPreviewHtml(frame, html) {
    resetMailPreviewFrame(frame);
    var done = false;
    function finish() {
      if (done) return;
      done = true;
      requestAnimationFrame(function () {
        resizeMailPreviewFrame(frame);
        requestAnimationFrame(function () {
          resizeMailPreviewFrame(frame);
        });
      });
    }
    frame.onload = finish;
    frame.srcdoc = html || '';
    setTimeout(finish, 120);
  }

  var mailPreviewModalEl = document.getElementById('mailPreviewModal');
  if (mailPreviewModalEl) {
    mailPreviewModalEl.addEventListener('hidden.bs.modal', function () {
      resetMailPreviewFrame(document.getElementById('mail-preview-frame'));
      $('#mail-preview-subject').text('');
    });
  }

  $('#btn-mail-preview').on('click', function () {
    var tmpl = $('#mail-template-type').val();
    $.getJSON('/admin/api/mail/preview', { template: tmpl })
      .done(function (res) {
        if (!res || !res.success) {
          showMailResult(false, (res && res.message) || {{jsString (T "admin.mail.preview_fail")}});
          return;
        }
        var d = res.data || {};
        $('#mail-preview-subject').text({{jsString (T "admin.mail.subject_prefix")}} + (d.subject || ''));
        var frame = document.getElementById('mail-preview-frame');
        var modal = bootstrap.Modal.getOrCreateInstance(mailPreviewModalEl);
        if (!mailPreviewModalEl.classList.contains('show')) {
          mailPreviewModalEl.addEventListener('shown.bs.modal', function onShow() {
            mailPreviewModalEl.removeEventListener('shown.bs.modal', onShow);
            loadMailPreviewHtml(frame, d.html || '');
          });
          modal.show();
        } else {
          loadMailPreviewHtml(frame, d.html || '');
        }
      })
      .fail(function (xhr) {
        var msg = {{jsString (T "admin.mail.preview_fail")}};
        try {
          var j = JSON.parse(xhr.responseText);
          if (j.message) msg = j.message;
        } catch (e) {}
        showMailResult(false, msg);
      });
  });

  $('#btn-mail-test').on('click', function () {
    var $btn = $(this).prop('disabled', true);
    var tmpl = $('#mail-template-type').val();
    var payload = mailFormPayload({ to: $('#mail-test-to').val(), template: tmpl });
    $.ajax({
      url: '/admin/api/mail/test',
      method: 'POST',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify({
        to: payload.to,
        template: payload.template,
        mail: {
          smtp_host: payload.mail_smtp_host,
          smtp_port: parseInt(payload.mail_smtp_port, 10) || 465,
          smtp_user: payload.mail_smtp_user,
          smtp_pass: payload.mail_smtp_pass,
          from_email: payload.mail_from_email,
          from_name: payload.mail_from_name
        }
      })
    }).done(function (res) {
      if (res && res.success) {
        var d = res.data || {};
        showMailResult(true, d.message || ({{jsString (T "admin.mail.test_sent_to")}} + (d.to || '')));
      } else {
        showMailResult(false, (res && res.message) || {{jsString (T "admin.mail.send_fail")}});
      }
    }).fail(function (xhr) {
      var msg = {{jsString (T "admin.mail.send_fail")}};
      try {
        var j = JSON.parse(xhr.responseText);
        if (j.message) msg = j.message;
      } catch (e) {}
      showMailResult(false, msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}