<section class="project-form-shell">
  <div class="admin-header">
    <h1>Company Settings</h1>
    <a class="button button-secondary" href="/admin/settings/offices">Office Locations &rarr;</a>
  </div>
  <p class="hint" style="margin-bottom: 1.5rem;">These details apply across the whole site: header, footer, and the Contact page.</p>

  <form method="POST" action="/admin/settings?_method=PUT">

    <div class="offer-tab-buttons">
      <button type="button" class="offer-tab-btn is-active" data-tab-target="company">Company &amp; Contact</button>
      <button type="button" class="offer-tab-btn" data-tab-target="email">Email Notifications</button>
    </div>

    <div class="form-grid">
      <div class="form-main">

        <div class="offer-tab-panel is-active" data-tab-panel="company">
          <div class="form-section">
            <h3 class="form-section-title">Contact details</h3>
            <label>
              Email address
              <input type="email" name="email" value="<%= settings.email || '' %>" placeholder="info@zucegroup.com">
            </label>
            <label>
              Phone number
              <input type="text" name="phone" value="<%= settings.phone || '' %>" placeholder="+254 734 040 593">
            </label>
            <label>
              WhatsApp number <span class="hint">(can be the same as phone)</span>
              <input type="text" name="whatsapp" value="<%= settings.whatsapp || '' %>" placeholder="+254 734 040 593">
            </label>
            <label>
              Postal address
              <textarea name="address" rows="3"><%= settings.address || '' %></textarea>
            </label>
            <label>
              Office hours
              <input type="text" name="officeHours" value="<%= settings.officeHours || '' %>" placeholder="Monday - Friday, 8:00am - 5:00pm">
            </label>
          </div>

          <div class="form-section">
            <h3 class="form-section-title">Map</h3>
            <label>
              Google Maps embed link <span class="hint">(from Google Maps: Share &rarr; Embed a map &rarr; copy the src=&quot;...&quot; URL)</span>
              <input type="text" name="mapEmbedUrl" value="<%= settings.mapEmbedUrl || '' %>" placeholder="https://www.google.com/maps/embed?pb=...">
            </label>
            <p class="hint">This is the map shown on the main Contact page. Individual offices can each have their own map under Office Locations.</p>
          </div>

          <div class="form-section">
            <h3 class="form-section-title">Social media</h3>
            <label>
              Facebook page URL
              <input type="text" name="facebookUrl" value="<%= settings.facebookUrl || '' %>" placeholder="https://www.facebook.com/zucegroup">
            </label>
            <label>
              LinkedIn page URL
              <input type="text" name="linkedinUrl" value="<%= settings.linkedinUrl || '' %>" placeholder="https://www.linkedin.com/company/zucegroup">
            </label>
            <label>
              X (Twitter) URL
              <input type="text" name="twitterUrl" value="<%= settings.twitterUrl || '' %>" placeholder="https://x.com/zucegroup">
            </label>
            <label>
              YouTube URL
              <input type="text" name="youtubeUrl" value="<%= settings.youtubeUrl || '' %>">
            </label>
            <label>
              Instagram URL
              <input type="text" name="instagramUrl" value="<%= settings.instagramUrl || '' %>">
            </label>
            <p class="hint">Leave any of these blank to hide that icon in the footer.</p>
          </div>
        </div>

        <div class="offer-tab-panel" data-tab-panel="email">
          <div class="form-section">
            <h3 class="form-section-title">Provider</h3>
            <label>
              Email service
              <select name="emailProvider" id="email-provider-select">
                <option value="custom" <%= (!settings.emailProvider || settings.emailProvider === 'custom') ? 'selected' : '' %>>Custom SMTP</option>
                <option value="gmail" <%= settings.emailProvider === 'gmail' ? 'selected' : '' %>>Google Workspace / Gmail</option>
                <option value="office365" <%= settings.emailProvider === 'office365' ? 'selected' : '' %>>Microsoft 365 / Outlook</option>
                <option value="zoho" <%= settings.emailProvider === 'zoho' ? 'selected' : '' %>>Zoho Mail</option>
              </select>
            </label>
            <p class="hint">Picking a provider fills in the server address and port below for you. You can still edit them afterward if your setup is different.</p>
          </div>

          <div class="form-section">
            <h3 class="form-section-title">SMTP connection</h3>
            <label>
              SMTP server (host)
              <input type="text" name="smtpHost" id="smtp-host" value="<%= settings.smtpHost || '' %>" placeholder="smtp.gmail.com">
            </label>
            <label>
              Port
              <input type="number" name="smtpPort" id="smtp-port" value="<%= settings.smtpPort || '' %>" placeholder="587">
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" name="smtpSecure" id="smtp-secure" <%= settings.smtpSecure ? 'checked' : '' %>>
              Use SSL (usually only needed for port 465)
            </label>
          </div>

          <div class="form-section">
            <h3 class="form-section-title">Sender account</h3>
            <label>
              SMTP username <span class="hint">(usually the full email address)</span>
              <input type="text" name="smtpUser" value="<%= settings.smtpUser || '' %>" placeholder="info@zucegroup.com" autocomplete="off">
            </label>
            <label>
              SMTP password
              <input type="password" name="smtpPassword" value="" placeholder="Leave blank to keep current password" autocomplete="new-password">
            </label>
            <% if (settings.smtpPassword) { %><p class="hint">A password is currently saved.</p><% } %>
            <label>
              From name
              <input type="text" name="smtpFromName" value="<%= settings.smtpFromName || '' %>" placeholder="ZUCE Group Website">
            </label>
            <label>
              From email address
              <input type="email" name="smtpFromEmail" value="<%= settings.smtpFromEmail || '' %>" placeholder="info@zucegroup.com">
            </label>
          </div>

          <div class="form-section">
            <h3 class="form-section-title">Delivery</h3>
            <label>
              Send contact form notifications to
              <input type="email" name="notificationEmail" value="<%= settings.notificationEmail || '' %>" placeholder="info@zucegroup.com">
            </label>
            <p class="hint">Leave blank to use the contact email address from the Company &amp; Contact tab instead.</p>
          </div>
        </div>

      </div>

      <div class="form-sidebar">
        <div class="form-section">
          <h3 class="form-section-title">Save</h3>
          <p class="hint">Changes apply site-wide immediately.</p>
          <button type="submit" class="button button-primary form-save-button">Save settings</button>
        </div>
      </div>
    </div>
  </form>
</section>

<script>
  (function () {
    var buttons = document.querySelectorAll('.offer-tab-btn[data-tab-target]');
    var panels = document.querySelectorAll('.offer-tab-panel[data-tab-panel]');

    Array.prototype.forEach.call(buttons, function (btn) {
      btn.addEventListener('click', function () {
        var target = btn.getAttribute('data-tab-target');
        Array.prototype.forEach.call(buttons, function (b) {
          b.classList.toggle('is-active', b === btn);
        });
        Array.prototype.forEach.call(panels, function (p) {
          p.classList.toggle('is-active', p.getAttribute('data-tab-panel') === target);
        });
      });
    });

    var providerSelect = document.getElementById('email-provider-select');
    var hostInput = document.getElementById('smtp-host');
    var portInput = document.getElementById('smtp-port');
    var secureCheckbox = document.getElementById('smtp-secure');
    var PRESETS = {
      gmail: { host: 'smtp.gmail.com', port: 587, secure: false },
      office365: { host: 'smtp.office365.com', port: 587, secure: false },
      zoho: { host: 'smtp.zoho.com', port: 465, secure: true },
    };

    if (providerSelect) {
      providerSelect.addEventListener('change', function () {
        var preset = PRESETS[providerSelect.value];
        if (!preset) return;
        hostInput.value = preset.host;
        portInput.value = preset.port;
        secureCheckbox.checked = preset.secure;
      });
    }
  })();
</script>
