{% extends "base.html" %}
{% block title %}{{ 'Edit' if kt else 'Add' }} KT{% endblock %}
{% block content %}
<style>
  fieldset.kt-set { border: 1px solid #c9d2df; border-radius: 8px; padding: 12px 16px 16px; margin: 14px 0 0; background: #fbfcfe; }
  fieldset.kt-set legend { font-weight: 700; padding: 0 8px; color: var(--navy); }
  .kt-set .remove { float: right; }
  .actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .btn.add { background: #2e7d32; }
  .btn.ghost { background: #fff; color: var(--navy); border: 1px solid #b8c4d6; }
  .desc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .desc-head label { margin: 10px 0 4px; }
  .desc-head .kind { min-width: 190px; }
  .desc-body { margin-top: 2px; }
  .desc-body .v { width: 100%; }
  .desc-body input[type=date].v, .desc-body input[type=time].v { width: auto; min-width: 200px; }
  .desc-body textarea.v { min-height: 110px; }
  .opt-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  .opt-row .opt { flex: 1; }
  .opt-row .sel { width: 18px; height: 18px; flex: none; cursor: pointer; }
  .hint { font-size: .85em; color: #666; margin: 6px 0 8px; }
  .toggle-row { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 4px; cursor: pointer; font-weight: 600; }
  .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .switch .slider { position: absolute; inset: 0; background: #b8c0cc; border-radius: 26px; transition: background .2s; }
  .switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
  .switch input:checked + .slider { background: #2e7d32; }
  .switch input:checked + .slider::before { transform: translateX(20px); }
  .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
  .facBox { margin: 2px 0 0; }
</style>

{% macro kt_set(n, title, kind, payload, use, fac, removable) %}
<fieldset class="kt-set" data-payload='{{ payload|tojson }}'>
  <legend>KT <span class="num">{{ n }}</span></legend>
  {% if removable %}<button type="button" class="btn small danger remove">Remove</button>{% endif %}
  <label>KT Title</label>
  <input name="title" value="{{ title }}" required style="width:100%">

  <div class="desc-head">
    <label>KT Description</label>
    <select name="kind" class="kind" aria-label="Description type">
      {% for v, l in kinds %}<option value="{{ v }}" {{ 'selected' if v == kind }}>{{ l }}</option>{% endfor %}
    </select>
  </div>
  <div class="desc-body"></div>
  <input type="hidden" name="payload" class="payload" value="">

  <label class="toggle-row">
    <span class="switch"><input type="checkbox" class="useFaculty" {{ 'checked' if use }}><span class="slider"></span></span>
    <span>Assign to a faculty</span>
  </label>
  <input type="hidden" name="use_faculty" class="facFlag" value="{{ 1 if use else 0 }}">
  <div class="facBox" {{ '' if use else 'hidden' }}>
    {% if faculty %}
    <label>Choose Faculty</label>
    <select name="faculty" style="width:100%">
      <option value="">-- Select faculty --</option>
      {% for p in faculty %}<option value="{{ p.id }}" {{ 'selected' if p.id == fac }}>{{ p.title }} {{ p.first_name }} {{ p.last_name }} ({{ p.email }})</option>{% endfor %}
    </select>
    {% else %}
    <input type="hidden" name="faculty" value="">
    <p style="margin:6px 0 0">No faculty added yet. <a href="{{ url_for('faculty_new') }}">Add a faculty</a> first.</p>
    {% endif %}
  </div>
</fieldset>
{% endmacro %}

<h2>{{ 'Edit' if kt else 'Add' }} KT</h2>
<div class="card">
  <form method="post" id="ktForm">
    <input type="hidden" name="csrf" value="{{ csrf_token }}">
    <label>College</label>
    {% if kt %}
      <strong>{{ kt.college }}</strong>
    {% elif colleges %}
      <select name="college" required style="width:100%">
        <option value="">-- Select college --</option>
        {% for c in colleges %}<option value="{{ c.id }}" {{ 'selected' if c.id == selected }}>{{ c.name }}</option>{% endfor %}
      </select>
    {% else %}
      <p>No colleges yet. <a href="{{ url_for('college_new') }}">Add a college</a> first.</p>
    {% endif %}

    <div id="ktSets">
      {% for it in items %}{{ kt_set(loop.index, it.title, it.kind, it.payload, it.use, it.fac, (not kt) and loop.index > 1) }}{% endfor %}
    </div>

    <div class="actions">
      {% if not kt %}<button type="button" class="btn add" id="addBtn">+ Add</button>{% endif %}
      <button class="btn">Save</button>
      <a href="{{ url_for('search') }}">Cancel</a>
    </div>
  </form>
</div>

<template id="ktTpl">{{ kt_set('', '', 'paragraph', {'value': ''}, false, none, true) }}</template>

<script>
  const CHOICE = ['multiple_choice', 'checkboxes', 'dropdown'];
  const HINTS = {
    multiple_choice: 'Add the options and select the one that applies.',
    checkboxes: 'Add the options and tick every one that applies.',
    dropdown: 'Add the options and select the one that applies.'
  };
  const sets = document.getElementById('ktSets');
  const $ = (sel, root = document) => root.querySelector(sel);
  const kindOf = set => $('.kind', set).value;
  let uid = 0;

  function el(tag, props = {}, ...kids) {
    const e = Object.assign(document.createElement(tag), props);
    e.append(...kids);
    return e;
  }

  function renumber() {
    sets.querySelectorAll('fieldset').forEach((f, i) => $('.num', f).textContent = i + 1);
  }

  // ---- the description input changes with the chosen type -------------------------
  function optRow(set, multi, text, checked, i) {
    return el('div', { className: 'opt-row' },
      el('input', { type: multi ? 'checkbox' : 'radio', className: 'sel', name: 'sel_' + set.dataset.uid,
                    checked, title: multi ? 'Tick if chosen' : 'Select if chosen' }),
      el('input', { type: 'text', className: 'opt', value: text, maxLength: 200, placeholder: 'Option ' + (i + 1) }),
      el('button', { type: 'button', className: 'btn small danger rm-opt', title: 'Remove option' }, '✕'));
  }

  function renderBody(set) {
    const kind = kindOf(set), st = set._st, body = $('.desc-body', set);
    body.replaceChildren();
    if (kind === 'short') {
      body.append(el('input', { type: 'text', className: 'v', maxLength: 500, placeholder: 'Short answer text', value: st.value.split('\n')[0] }));
    } else if (kind === 'paragraph') {
      body.append(el('textarea', { className: 'v', placeholder: 'Description', value: st.value }));
    } else if (kind === 'date') {
      body.append(el('input', { type: 'date', className: 'v', value: st.value }));
    } else if (kind === 'time') {
      body.append(el('input', { type: 'time', className: 'v', value: st.value }));
    } else {
      const multi = kind === 'checkboxes';
      st.options.forEach((o, i) => body.append(optRow(set, multi, o, st.selected.includes(i), i)));
      body.append(el('p', { className: 'hint' }, HINTS[kind]),
                  el('button', { type: 'button', className: 'btn small ghost add-opt' }, '+ Add option'));
    }
  }

  // read what is on screen into set._st
  function collect(set) {
    const st = set._st, body = $('.desc-body', set), v = $('.v', body), rows = [...body.querySelectorAll('.opt-row')];
    if (v) st.value = v.value;
    if (rows.length) {
      st.options = rows.map(r => $('.opt', r).value);
      st.selected = rows.flatMap((r, i) => $('.sel', r).checked ? [i] : []);
    }
  }

  // write the description to the hidden field that is submitted
  function syncPayload(set) {
    collect(set);
    const st = set._st;
    $('.payload', set).value = JSON.stringify(
      CHOICE.includes(kindOf(set)) ? { options: st.options, selected: st.selected } : { value: st.value });
  }

  function initSet(set) {
    set.dataset.uid = ++uid;
    let p = {};
    try { p = JSON.parse(set.dataset.payload || '{}'); } catch (e) {}
    set._st = {
      value: typeof p.value === 'string' ? p.value : '',
      options: Array.isArray(p.options) && p.options.length ? p.options.map(String) : ['', ''],
      selected: Array.isArray(p.selected) ? p.selected.filter(Number.isInteger) : []
    };
    renderBody(set);
    syncPayload(set);
  }

  sets.querySelectorAll('fieldset').forEach(initSet);

  const add = document.getElementById('addBtn');
  if (add) add.addEventListener('click', () => {
    sets.appendChild(document.getElementById('ktTpl').content.cloneNode(true));
    const set = sets.lastElementChild;
    initSet(set);
    renumber();
    $('input', set).focus();
  });

  sets.addEventListener('click', e => {
    const set = e.target.closest('fieldset');
    if (!set) return;
    if (e.target.classList.contains('remove')) {
      set.remove(); renumber();
    } else if (e.target.classList.contains('add-opt')) {
      collect(set); set._st.options.push('');
      renderBody(set); syncPayload(set);
      const opts = set.querySelectorAll('.opt'); opts[opts.length - 1].focus();
    } else if (e.target.classList.contains('rm-opt')) {
      collect(set);
      const rows = [...set.querySelectorAll('.opt-row')], i = rows.indexOf(e.target.closest('.opt-row'));
      if (rows.length <= 1) return;
      const st = set._st;
      st.options.splice(i, 1);
      st.selected = st.selected.filter(x => x !== i).map(x => x > i ? x - 1 : x);
      renderBody(set); syncPayload(set);
    }
  });

  sets.addEventListener('change', e => {
    const set = e.target.closest('fieldset');
    if (!set) return;
    if (e.target.classList.contains('kind')) {
      collect(set);                       // the old controls are still on screen here
      const st = set._st, k = e.target.value;
      if (k === 'date' && !/^\d{4}-\d{2}-\d{2}$/.test(st.value)) st.value = '';
      if (k === 'time' && !/^\d{2}:\d{2}/.test(st.value)) st.value = '';
      if (k === 'short') st.value = st.value.split('\n')[0];
      if (k !== 'checkboxes') st.selected = st.selected.slice(0, 1);
      renderBody(set); syncPayload(set);
    } else if (e.target.classList.contains('useFaculty')) {
      // each fieldset has its own "Assign to a faculty" toggle
      $('.facFlag', set).value = e.target.checked ? 1 : 0;
      $('.facBox', set).hidden = !e.target.checked;
    } else if (e.target.closest('.desc-body')) {
      syncPayload(set);
    }
  });
  sets.addEventListener('input', e => {
    const set = e.target.closest('fieldset');
    if (set && e.target.closest('.desc-body')) syncPayload(set);
  });
  document.getElementById('ktForm').addEventListener('submit', () => sets.querySelectorAll('fieldset').forEach(syncPayload));
</script>
{% endblock %}