{% extends "base.html" %}
{% from "_ui.html" import page_head %}
{% block title %}{{ 'Edit' if kt else 'Add' }} KT{% endblock %}
{% block content %}
<style>
  fieldset.kt-set { position: relative; border: 1px solid #c9d4e4; border-radius: 8px; padding: 20px 20px 18px; margin: 24px 0 0; background: #fbfcfe; }
  fieldset.kt-set legend { padding: 0; }
  .legend-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: #fff; border-radius: 999px; padding: 3px 14px 3px 11px; font-size: .86rem; font-weight: 600; }
  .kt-set .remove { position: absolute; top: -15px; right: 14px; }
  .desc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
  .desc-head label { margin: 0; font-weight: 600; font-size: .9rem; color: #374151; }
  .desc-head .kind { width: auto; min-width: 190px; }
  .desc-body .v { width: 100%; }
  .desc-body input[type=date].v, .desc-body input[type=time].v { width: auto; min-width: 210px; }
  .desc-body textarea.v { min-height: 110px; }
  .opt-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
  .opt-row .opt { flex: 1; }
  .opt-row .sel { width: 18px; height: 18px; flex: none; cursor: pointer; }
  .toggle-row { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 4px; cursor: pointer; font-weight: 600; font-size: .92rem; }
  .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: var(--ok); }
  .switch input:checked + .slider::before { transform: translateX(20px); }
  .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
  .facBox { margin-top: 6px; }
</style>

{% macro kt_set(n, title, kind, payload, use, fac, removable) %}
<fieldset class="kt-set" data-payload='{{ payload|tojson }}'>
  <legend><span class="legend-pill">{{ icon('file-text') }} KT <span class="num">{{ n }}</span></span></legend>
  {% if removable %}<button type="button" class="btn small danger remove">{{ icon('trash') }} Remove</button>{% endif %}

  <div class="field">
    <label class="req">KT Title</label>
    <div class="input-icon">{{ icon('type') }}<input name="title" value="{{ title }}" required placeholder="e.g. Admission process"></div>
  </div>

  <div class="field" style="margin-top:16px">
    <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="">
  </div>

  <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 class="lbl">Choose Faculty</label>
    <select name="faculty">
      <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 class="hint">No faculty added yet. <a href="{{ url_for('faculty_new') }}">Add a faculty</a> first.</p>
    {% endif %}
  </div>
</fieldset>
{% endmacro %}

{{ page_head('file-plus' if not kt else 'edit', ('Edit' if kt else 'Add') ~ ' KT', 'Store knowledge-transfer details for a college.' if not kt else 'Update this KT.') }}

<div class="card">
  <div class="card-head"><h3>{{ icon('file-text') }} KT details</h3></div>
  <div class="card-body">
    <form method="post" id="ktForm">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="field">
        <label class="req">College</label>
        {% if kt %}
          <div class="cell"><span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('cap') }} {{ kt.college }}</span></div>
        {% elif colleges %}
          <select name="college" required>
            <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 class="hint">No colleges yet. <a href="{{ url_for('college_new') }}">Add a college</a> first.</p>
        {% endif %}
      </div>

      <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="form-actions">
        {% if not kt %}<button type="button" class="btn add" id="addBtn">{{ icon('plus') }} Add</button>{% endif %}
        <button class="btn">{{ icon('save') }} Save</button>
        <a class="btn ghost" href="{{ url_for('search') }}">{{ icon('x') }} Cancel</a>
      </div>
    </form>
  </div>
</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 svg = n => '<svg class="ic" aria-hidden="true"><use href="#i-' + n + '"></use></svg>';
  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 icon del rm-opt', title: 'Remove option', innerHTML: svg('x') }));
  }

  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', innerHTML: svg('plus') + ' 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 btn = e.target.closest('button');          // buttons contain an icon, so look upwards from the click
    const set = e.target.closest('fieldset');
    if (!btn || !set) return;
    if (btn.classList.contains('remove')) {
      set.remove(); renumber();
    } else if (btn.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 (btn.classList.contains('rm-opt')) {
      collect(set);
      const rows = [...set.querySelectorAll('.opt-row')], i = rows.indexOf(btn.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 %}