<section class="project-form-shell">
  <div class="admin-header">
    <h1><%= division ? 'Edit ' + division.name : 'New Division' %></h1>
    <% if (division) { %><a class="button button-secondary" href="/<%= division.slug %>" target="_blank" rel="noopener">Preview page &rarr;</a><% } %>
  </div>
  <p class="hint">Fields below are grouped and ordered to match the sections on the division's own page, top to bottom. This content also appears on the homepage, /services, and every country page.</p>

  <form method="POST" action="<%= division ? '/admin/divisions/' + division.id + '?_method=PUT' : '/admin/divisions' %>" id="division-form">
    <div class="form-grid">
      <div class="form-main">

        <div class="form-section">
          <h3 class="form-section-title">1. Hero banner</h3>
          <label>
            Division name
            <input type="text" name="name" value="<%= division ? division.name : '' %>" required placeholder="e.g. Events &amp; Experiences">
          </label>
          <label>
            URL slug <span class="hint">(page lives at zucegroup.com/your-slug)</span>
            <input type="text" name="slug" value="<%= division ? division.slug : '' %>" required placeholder="e.g. events">
          </label>
          <label>
            Tag <span class="hint">(small label above the name, e.g. "Core" or "Support")</span>
            <input type="text" name="tag" value="<%= division && division.tag ? division.tag : '' %>">
          </label>
          <label>
            Headline <span class="hint">(the line under the division name)</span>
            <input type="text" name="tagline" value="<%= division && division.tagline ? division.tagline : '' %>">
          </label>
          <label>
            Parent service <span class="hint">(leave blank for a top-level service — set this to nest a "child" service under one of the main divisions; it gets its own page in the same style, reached via its parent's page and a "+N more" line on /services)</span>
            <select name="parentId">
              <option value="">— Top-level service —</option>
              <% (parentOptions || []).forEach(function(opt) { %>
                <% var isSelected = division ? division.parentId === opt.id : (typeof preselectedParentId !== 'undefined' && preselectedParentId === opt.id); %>
                <option value="<%= opt.id %>" <%= isSelected ? 'selected' : '' %>><%= opt.name %></option>
              <% }) %>
            </select>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">2. Photo</h3>
          <p class="hint">Large photo shown under the hero banner on this division's own page, and used as the small circular thumbnail on country pages.</p>
          <%- include('./_upload-field', { key: 'portrait', value: division && division.portrait ? division.portrait : '' }) %>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">3. Main content</h3>
          <p class="hint">One paragraph per line, blank line between paragraphs. The first paragraph shows larger, as the lede.</p>
          <label>
            Intro paragraphs
            <textarea name="introText" rows="8"><%= division && division.introText ? division.introText : '' %></textarea>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">4. What We Do</h3>
          <p class="hint">One item per line — rendered as a bullet list.</p>
          <label>
            Items
            <textarea name="whatWeDoText" rows="7" placeholder="Conference and congress planning&#10;Exhibitions and trade events"><%= division && division.whatWeDoText ? division.whatWeDoText : '' %></textarea>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">5. What This Means for You</h3>
          <p class="hint">Highlighted quote box. One paragraph per line, blank line between paragraphs.</p>
          <label>
            Section heading
            <input type="text" name="meansForYouHeading" value="<%= division && division.meansForYouHeading ? division.meansForYouHeading : '' %>" placeholder="What This Means for You">
          </label>
          <label>
            Paragraphs
            <textarea name="meansForYouText" rows="6"><%= division && division.meansForYouText ? division.meansForYouText : '' %></textarea>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">6. How We Work</h3>
          <p class="hint">Numbered process steps. One paragraph per line, blank line between paragraphs.</p>
          <label>
            Paragraphs
            <textarea name="howWeWorkText" rows="6"><%= division && division.howWeWorkText ? division.howWeWorkText : '' %></textarea>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">7. Closing line</h3>
          <p class="hint">Shown above the final "Get in touch" button.</p>
          <input type="text" name="closingLine" value="<%= division && division.closingLine ? division.closingLine : '' %>">
        </div>

        <div class="form-section">
          <h3 class="form-section-title">Card summary &amp; capabilities</h3>
          <p class="hint">The short blurb is shown wherever this division appears as a card (homepage, /services, country pages) instead of the full intro above.</p>
          <label>
            Short card summary
            <input type="text" name="description" value="<%= division && division.description ? division.description : '' %>">
          </label>
          <label>
            Capabilities <span class="hint">(one per line — shown as tags on /services and the homepage)</span>
            <textarea name="capabilitiesText" rows="5" placeholder="Conferences &amp; exhibitions&#10;Corporate dinners &amp; galas"><%= division && division.capabilitiesText ? division.capabilitiesText : '' %></textarea>
          </label>
        </div>

      </div>

      <div class="form-sidebar">
        <div class="form-section">
          <h3 class="form-section-title">Publishing</h3>
          <label>
            Status
            <select name="status">
              <option value="draft" <%= division && division.status === 'draft' ? 'selected' : '' %>>Draft</option>
              <option value="published" <%= !division || division.status === 'published' ? 'selected' : '' %>>Published</option>
            </select>
          </label>
          <label>
            Order <span class="hint">(lower numbers appear first)</span>
            <input type="number" name="sortOrder" value="<%= division ? division.sortOrder : 0 %>">
          </label>
          <button type="submit" class="button button-primary form-save-button">Save division</button>
        </div>
      </div>
    </div>
  </form>
</section>

<script src="/js/media-picker.js"></script>
<script>
  (function () {
    var UPLOAD_URL = '/admin/uploads/image';

    function setupUploadField(key) {
      var fileInput = document.getElementById('file-' + key);
      var hiddenInput = document.getElementById('input-' + key);
      var preview = document.getElementById('preview-' + key);
      var removeBtn = document.querySelector('.upload-remove[data-target="' + key + '"]');
      var browseBtn = document.querySelector('.upload-browse[data-target="' + key + '"]');
      if (!fileInput || !hiddenInput || !preview) return;

      function refresh() {
        if (hiddenInput.value) {
          preview.innerHTML = '<img src="' + hiddenInput.value + '" alt="">';
          if (removeBtn) removeBtn.hidden = false;
        } else {
          preview.innerHTML = '<span class="upload-empty">No image yet</span>';
          if (removeBtn) removeBtn.hidden = true;
        }
      }

      fileInput.addEventListener('change', function () {
        if (!fileInput.files.length) return;
        var formData = new FormData();
        formData.append('file', fileInput.files[0]);
        preview.innerHTML = '<span class="upload-empty">Uploading&hellip;</span>';
        fetch(UPLOAD_URL, { method: 'POST', body: formData })
          .then(function (res) { return res.json(); })
          .then(function (data) { if (data.url) { hiddenInput.value = data.url; } else { alert(data.error || 'Upload failed.'); } refresh(); })
          .catch(function () { alert('Upload failed. Please try again.'); refresh(); })
          .finally(function () { fileInput.value = ''; });
      });

      if (browseBtn) {
        browseBtn.addEventListener('click', function () {
          window.openMediaPicker({
            uploadUrl: UPLOAD_URL,
            onSelect: function (url) { hiddenInput.value = url; refresh(); },
          });
        });
      }

      if (removeBtn) removeBtn.addEventListener('click', function () { hiddenInput.value = ''; refresh(); });
      refresh();
    }
    ['portrait'].forEach(setupUploadField);
  })();
</script>
