<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="ab-card mb-3">
      <div class="ab-card-header"><h2>SMTP Settings</h2></div>
      <div class="ab-card-body">
        <p class="ab-cell-sub">Configure the mail transport used for every email A&amp;B Hub sends — campaigns, personal emails, automation, and system notifications. Leave blank to keep using the server's <code>.env</code> configuration.</p>

        <form id="abSmtpForm">
          <div class="row g-3">
            <div class="col-md-8"><label class="form-label ab-req">SMTP Host</label><input class="form-control" name="host" value="<?= e($settings['host'] ?? '') ?>" placeholder="smtp.mailgun.org" required></div>
            <div class="col-md-4"><label class="form-label ab-req">Port</label><input type="number" class="form-control" name="port" value="<?= e($settings['port'] ?? 587) ?>" required></div>
            <div class="col-md-6"><label class="form-label ab-req">Encryption</label>
              <select class="form-select" name="encryption" required>
                <option value="tls" <?= ($settings['encryption'] ?? 'tls')==='tls'?'selected':'' ?>>TLS</option>
                <option value="ssl" <?= ($settings['encryption'] ?? '')==='ssl'?'selected':'' ?>>SSL</option>
                <option value="none" <?= ($settings['encryption'] ?? '')==='none'?'selected':'' ?>>None</option>
              </select>
            </div>
            <div class="col-md-6"><label class="form-label">Username</label><input class="form-control" name="username" value="<?= e($settings['username'] ?? '') ?>"></div>
            <div class="col-md-6"><label class="form-label">Password</label><input type="password" class="form-control" name="password" placeholder="<?= !empty($settings['is_configured']) ? '••••••••  (leave blank to keep current)' : '' ?>"></div>
            <div class="col-md-6"><label class="form-label ab-req">From Address</label><input type="email" class="form-control" name="from_address" value="<?= e($settings['from_address'] ?? '') ?>" required></div>
            <div class="col-md-12"><label class="form-label ab-req">From Name</label><input class="form-control" name="from_name" value="<?= e($settings['from_name'] ?? 'A&B Hub') ?>" required></div>
          </div>
          <div class="mt-4 d-flex gap-2">
            <button type="submit" class="btn btn-primary">Save Settings</button>
          </div>
        </form>

        <hr class="my-4 ab-divider">
        <h3 class="fs-6">Send a Test Email</h3>
        <form id="abTestEmailForm" class="row g-2">
          <div class="col-md-8"><input type="email" class="form-control" id="abTestEmailAddr" placeholder="you@example.com" required></div>
          <div class="col-md-4"><button type="submit" class="btn btn-outline-primary w-100">Send Test</button></div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.getElementById('abSmtpForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var form = e.target;
  abFetch('<?= base_url('settings/smtp') ?>', { method: 'POST', body: Object.fromEntries(new FormData(form).entries()) })
    .then(function (res) { abToast(res.message); })
    .catch(function (err) { abShowFormErrors(form, err.errors); abToast(err.message || 'Save failed.', 'danger'); });
});

document.getElementById('abTestEmailForm').addEventListener('submit', function (e) {
  e.preventDefault();
  abFetch('<?= base_url('settings/smtp/test') ?>', { method: 'POST', body: { test_email: document.getElementById('abTestEmailAddr').value } })
    .then(function (res) { abToast(res.message); })
    .catch(function (err) { abToast(err.message, 'danger'); });
});
</script>
