{% extends "global/Page.html" %}
{% block title %}Company Information 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 p { margin: 0; color: #1f2937; line-height: 1.6; }
    .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; }
    .nomination-row input { flex:1; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; }
    .survey-actions { margin-top: 12px; display:flex; gap:10px }
</style>
<div class="survey-container">
  <div class="survey-instructions">
    <p>Who have you relied on for general information on the "goings on" at the company -- people who have given you special insight?</p>
    <p class="search-instruction">Use the search box below to quickly find colleagues by first name or title when nominating.</p>
  </div>

  <form method="post" id="insightForm" onsubmit="return handleFormSubmit(event)">
  <div id="insight-nominations">
    {% for entry in insight_entries %}
      <div class="nomination-row">
        <input type="text" name="insight_name_{{ entry.index }}" value="{{ entry.name }}" placeholder="First name">
        <input type="text" name="insight_title_{{ entry.index }}" value="{{ entry.title }}" placeholder="Title">
      </div>
    {% endfor %}
    {% if insight_fields_to_show < 10 %}
      <button type="button" id="addInsightBtn" onclick="addInsightField()">+</button>
    {% endif %}
  </div>
  <br>
  <button type="submit" name="submit_insight">Submit</button>
</form>

<script>
let allowEmptySubmit = false;

function handleFormSubmit(event) {
  console.log('[Insight] Form submit triggered, allowEmptySubmit:', allowEmptySubmit);
  
  if (allowEmptySubmit) {
    console.log('[Insight] Allowing empty form submission');
    allowEmptySubmit = false;
    return true;
  }
  
  const form = document.getElementById('insightForm');
  if (!form) {
    console.log('[Insight] Form not found!');
    return true;
  }
  
  const inputs = form.querySelectorAll('input[name^="insight_name_"], input[name^="insight_title_"]');
  console.log('[Insight] Found', inputs.length, 'inputs');
  
  let hasAny = false;
  inputs.forEach((inp, idx) => {
    const val = inp.value ? inp.value.trim() : '';
    if (val) {
      hasAny = true;
      console.log('[Insight] Input', idx, 'has value:', val);
    }
  });
  
  if (!hasAny) {
    console.log('[Insight] Form is empty, showing modal');
    showEmptyModal();
    event.preventDefault();
    return false;
  }
  
  console.log('[Insight] Form has data, allowing submission');
  return true;
}

function addInsightField() {
  const container = document.getElementById('insight-nominations');
  const existingRows = container.querySelectorAll('.nomination-row').length;
  const newIndex = existingRows + 1;
  
  if (newIndex > 10) {
    console.log('[Insight] Already at max fields');
    return;
  }
  
  const newRow = document.createElement('div');
  newRow.className = 'nomination-row';
  newRow.innerHTML = `
    <input type="text" name="insight_name_${newIndex}" placeholder="First name">
    <input type="text" name="insight_title_${newIndex}" placeholder="Title">
  `;
  
  const addBtn = document.getElementById('addInsightBtn');
  if (addBtn) {
    container.insertBefore(newRow, addBtn);
  } else {
    container.appendChild(newRow);
  }
  
  if (newIndex >= 10) {
    if (addBtn) addBtn.style.display = 'none';
  }
  
  console.log('[Insight] Added field', newIndex);
  attachSuggestorToField(document.querySelector(`input[name="insight_title_${newIndex}"]`));
}

function showEmptyModal() {
  allowEmptySubmit = true;
  const form = document.getElementById('insightForm');
  if (form) {
    form.submit();
  }
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('[Insight] Page loaded, attaching suggestors to title inputs');
  
  const titleInputs = document.querySelectorAll('input[name^="insight_title_"]');
  titleInputs.forEach((input, idx) => {
    console.log('[Insight] Attaching suggestor to input', idx);
    attachSuggestorToField(input);
  });
});

function attachSuggestorToField(titleInput) {
  if (!titleInput) return;
  
  const container = titleInput.parentElement;
  const existingList = container.querySelector('datalist');
  if (existingList) {
    console.log('[Insight] Suggestor already attached');
    return;
  }
  
  const list = document.createElement('datalist');
  list.id = 'insight_list_' + Math.random().toString(36).substr(2, 9);
  
  const nodes = {{ nodes|safe }};
  
  nodes.forEach(node => {
    const option = document.createElement('option');
    option.value = node.label + ' - ' + node.department;
    option.dataset.title = node.label;
    list.appendChild(option);
  });
  
  container.appendChild(list);
  titleInput.setAttribute('list', list.id);
  titleInput.addEventListener('input', function() {
    filterSuggestionsForField(titleInput, list, nodes);
  });
}

function filterSuggestionsForField(titleInput, list, nodes) {
  const query = titleInput.value.toLowerCase();
  const existingOptions = list.querySelectorAll('option');
  existingOptions.forEach(opt => opt.remove());
  
  if (!query) return;
  
  nodes.forEach(node => {
    const label = node.label.toLowerCase();
    const dept = node.department.toLowerCase();
    if (label.includes(query) || dept.includes(query)) {
      const option = document.createElement('option');
      option.value = node.label + ' - ' + node.department;
      option.dataset.title = node.label;
      list.appendChild(option);
    }
  });
}
</script>
{% endblock %}