{% extends "global/Page.html" %}
{% block title %}Colleague Survey{% endblock %}
{% block content %}
<style>
    .survey-container { max-width: 720px; margin: 0 auto; }
    .survey-instructions { background: #f0f4ff; border-left: 4px solid #667eea; padding: 20px; border-radius: 4px; margin-bottom: 18px; }
    .survey-instructions h2 { margin: 0 0 8px; color: #1f2937; }
    .search-box { margin-bottom: 12px; }
    .search-box label { display: block; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
    .search-box input[type="text"] { width: 100%; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 15px; }
    .search-box input[type="text"]:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12); }
    .nomination-row { display:flex; gap:8px; margin-bottom:8px; }
    .suggestions { position: relative; flex: 1; }
    .nomination-row input { width: 100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; }
    .survey-actions { margin-top: 12px; display:flex; gap:10px }
    .suggestions-list { position: absolute; list-style: none; margin: 4px 0 0 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgba(2,6,23,0.08); max-height: 200px; overflow-y: auto; z-index: 1000; width: 100%; display: none; }
    .suggestions-list.show { display: block; }
    .suggestion-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: #f8fafc; }
</style>
<div class="survey-container">
  <div class="survey-instructions">
    <p class="search-instruction">Start typing a colleague's name and select from the dropdown suggestions.</p>
  </div>

  <div id="emptyWarning" style="display:none; background: #fee; border: 2px solid #c33; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
    <strong style="color: #c33; font-size: 1.1em;">⚠️ You have not filled in any names.</strong>
    <p style="margin: 8px 0 0; color: #333;">Click Next again to confirm you want to proceed without submitting the colleague survey.</p>
  </div>

  {# Use oTree's outer form (id="form"); nested <form> breaks submission & JS. #}
  <h4>1. Who among your colleagues do you turn most often for advice?</h4>
  <div id="advice-nominations">
    {% for entry in advice_entries %}
      <div class="nomination-row">
        <div class="suggestions">
          <input type="text" name="advice_name_{{ entry.index }}" value="{{ entry.name }}" placeholder="Name" autocomplete="off">
          <ul class="suggestions-list" aria-label="Suggestions"></ul>
        </div>
      </div>
    {% endfor %}
    {% if advice_fields_to_show < 10 %}
      <button type="button" id="addAdviceBtn" onclick="addAdviceField()">+</button>
    {% endif %}
  </div>
  <h4>2. Who are the friends among your colleagues whom you see most often socially?</h4>
  <div id="friends-nominations">
    {% for entry in friends_entries %}
      <div class="nomination-row">
        <div class="suggestions">
          <input type="text" name="friends_name_{{ entry.index }}" value="{{ entry.name }}" placeholder="Name" autocomplete="off">
          <ul class="suggestions-list" aria-label="Suggestions"></ul>
        </div>
      </div>
    {% endfor %}
    {% if friends_fields_to_show < 10 %}
      <button type="button" id="addFriendsBtn" onclick="addFriendsField()">+</button>
    {% endif %}
  </div>
  <h4>3. Who have you relied on for general information on the "goings on" at the company — people who have given you special insight?</h4>
  <div id="insight-nominations">
    {% for entry in insight_entries %}
      <div class="nomination-row">
        <div class="suggestions">
          <input type="text" name="insight_name_{{ entry.index }}" value="{{ entry.name }}" placeholder="Name" autocomplete="off">
          <ul class="suggestions-list" aria-label="Suggestions"></ul>
        </div>
      </div>
    {% endfor %}
    {% if insight_fields_to_show < 10 %}
      <button type="button" id="addInsightBtn" onclick="addInsightField()">+</button>
    {% endif %}
  </div>
  <br>
  {{ next_button }}
</div>
<script>
let allowEmptySubmit = false;

function getSurveyForm() {
  // oTree wraps the whole page content in <form id="form" class="otree-form">.
  return document.getElementById('form') || document.querySelector('form.otree-form');
}

function wireSurveySubmitHandler() {
  const form = getSurveyForm();
  if (!form) return;

  // If something else stops propagation on submit, we still want to run.
  form.addEventListener('submit', handleFormSubmit, true);

  // Extra robustness: intercept the Next button click too.
  const nextBtn = document.querySelector('button.otree-btn-next');
  if (nextBtn) {
    nextBtn.addEventListener('click', handleNextButtonClick, true);
  }
}

function handleNextButtonClick(event) {
  // For normal submits, let the submit handler do the work.
  // But if submission is triggered in a way that bypasses submit events,
  // this ensures the empty-survey modal still appears.
  if (!event) return;
  if (allowEmptySubmit) return;
  if (!hasAnySurveyData()) {
    // Arm the "2nd click confirms" behavior even if we block the submit here.
    // (Preventing the click's default action stops the submit event from firing.)
    allowEmptySubmit = true;
    event.preventDefault();
    event.stopPropagation();
    showEmptyWarning();
  }
}

function showEmptyWarning() {
  const el = document.getElementById('emptyWarning');
  if (el) el.style.display = 'block';
  // Scroll into view so the participant sees it.
  if (el && typeof el.scrollIntoView === 'function') {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

function hideEmptyWarning() {
  const el = document.getElementById('emptyWarning');
  if (el) el.style.display = 'none';
}

function hasAnySurveyData() {
  const form = getSurveyForm();
  if (!form) return true;

  const inputs = form.querySelectorAll(
    'input[name^="advice_name_"], input[name^="friends_name_"], input[name^="insight_name_"]'
  );

  for (const inp of inputs) {
    const val = inp.value ? inp.value.trim() : '';
    if (val) return true;
  }
  return false;
}

function handleFormSubmit(event) {
  event = event || window.event;
  console.log('[Survey] Form submit triggered, allowEmptySubmit:', allowEmptySubmit);
  
  if (allowEmptySubmit) {
    console.log('[Survey] Allowing empty form submission');
    hideEmptyWarning();
    allowEmptySubmit = false;
    return true;
  }
  
  const form = getSurveyForm();
  if (!form) {
    console.log('[Survey] Form not found!');
    return true;
  }

  const hasAny = hasAnySurveyData();
  console.log('[Survey] Has any data:', hasAny);

  if (!hasAny) {
    console.log('[Survey] Showing empty warning');
    event.preventDefault();
    showEmptyWarning();
    allowEmptySubmit = true;
    return false;
  }

  hideEmptyWarning();
  allowEmptySubmit = false;
  
  console.log('[Survey] Allowing normal submission');
  return true;
}

document.addEventListener('DOMContentLoaded', wireSurveySubmitHandler);

let adviceFields = {{ advice_fields_to_show }};
let friendsFields = {{ friends_fields_to_show }};
let insightFields = {{ insight_fields_to_show }};
function addNominationRow(containerId, prefix, currentCount, addButtonId) {
  if (currentCount >= 10) return currentCount;
  const idx = currentCount + 1;
  const container = document.getElementById(containerId);
  const newRow = document.createElement('div');
  newRow.className = 'nomination-row';
  newRow.innerHTML = `
    <div class="suggestions">
      <input type="text" name="${prefix}_name_${idx}" placeholder="Name" autocomplete="off">
      <ul class="suggestions-list" aria-label="Suggestions"></ul>
    </div>
  `;
  // insert before the add button so the button stays at the end
  const addBtn = document.getElementById(addButtonId);
  if (addBtn) {
    container.insertBefore(newRow, addBtn);
  } else {
    container.appendChild(newRow);
  }

  const nameInput = newRow.querySelector(`input[name="${prefix}_name_${idx}"]`);
  if (typeof attachSuggestorToNameField === 'function') {
    attachSuggestorToNameField(nameInput);
  }

  // hide/disable add button if we've reached 10
  if (idx >= 10 && addBtn) {
    addBtn.style.display = 'none';
  }

  return idx;
}

function addAdviceField() {
  adviceFields = addNominationRow('advice-nominations', 'advice', adviceFields, 'addAdviceBtn');
}

function addFriendsField() {
  friendsFields = addNominationRow('friends-nominations', 'friends', friendsFields, 'addFriendsBtn');
}

function addInsightField() {
  insightFields = addNominationRow('insight-nominations', 'insight', insightFields, 'addInsightBtn');
}
</script>
<script>
const teamFullNames = {{ team_names_json|safe }};

// Suggest full names (deduped, preserving order).
const teamNames = (() => {
  const out = [];
  const seen = new Set();
  for (const full of (teamFullNames || [])) {
    const name = (full || '').trim();
    if (!name) continue;
    const key = name.toLowerCase();
    if (seen.has(key)) continue;
    seen.add(key);
    out.push(name);
  }
  return out;
})();

const MAX_SUGGESTIONS = 6;

function hideAllSuggestionLists(exceptWrapper) {
  document.querySelectorAll('.suggestions-list').forEach((ul) => {
    if (exceptWrapper && exceptWrapper.contains(ul)) return;
    ul.classList.remove('show');
    ul.innerHTML = '';
  });
}

function renderSuggestionsForNameInput(nameInput, ul, query) {
  const q = (query || '').trim().toLowerCase();
  ul.innerHTML = '';
  if (!q) {
    ul.classList.remove('show');
    return;
  }

  const starts = [];
  const contains = [];
  for (const name of teamNames) {
    const n = (name || '').toLowerCase();
    if (!n) continue;
    if (n.startsWith(q)) starts.push(name);
    else if (n.includes(q)) contains.push(name);
    if (starts.length + contains.length >= MAX_SUGGESTIONS && starts.length >= MAX_SUGGESTIONS) break;
  }
  const matches = starts.concat(contains).slice(0, MAX_SUGGESTIONS);
  if (!matches.length) {
    ul.classList.remove('show');
    return;
  }

  for (const name of matches) {
    const li = document.createElement('li');
    li.className = 'suggestion-item';
    li.textContent = name;
    li.addEventListener('mousedown', (e) => {
      e.preventDefault();
      nameInput.value = name;
      ul.classList.remove('show');
      ul.innerHTML = '';
    });
    ul.appendChild(li);
  }
  ul.classList.add('show');
}

function attachSuggestorToNameField(nameInput) {
  if (!nameInput) return;
  const wrapper = nameInput.closest('.suggestions') || nameInput.parentElement;
  if (!wrapper) return;
  const ul = wrapper.querySelector('.suggestions-list');
  if (!ul) return;

  nameInput.addEventListener('input', () => {
    hideAllSuggestionLists(wrapper);
    renderSuggestionsForNameInput(nameInput, ul, nameInput.value);
  });
  nameInput.addEventListener('focus', () => {
    hideAllSuggestionLists(wrapper);
    renderSuggestionsForNameInput(nameInput, ul, nameInput.value);
  });
  nameInput.addEventListener('blur', () => {
    window.setTimeout(() => {
      ul.classList.remove('show');
      ul.innerHTML = '';
    }, 120);
  });
}

document.addEventListener('mousedown', (e) => {
  const anyWrapper = e.target && e.target.closest ? e.target.closest('.suggestions') : null;
  hideAllSuggestionLists(anyWrapper);
});

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input[name^="advice_name_"], input[name^="friends_name_"], input[name^="insight_name_"]').forEach((inp) => {
    attachSuggestorToNameField(inp);
  });
});
</script>
{% endblock %}