{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1200px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-briefcase me-1"></i>
      {% if template %}Edit Recruitment Template{% else %}New Recruitment Template{% endif %}
    </h4>
    <a href="{{ url_for('recruitment.template_list') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left-short"></i> Back to Templates
    </a>
  </div>

  <form method="POST" id="tplForm">
    {{ csrf_token() if csrf_token is defined }}

    <div class="card shadow-sm mb-3">
      <div class="card-header bg-light fw-semibold">
        Basic Details
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label fw-semibold">Designation</label>
            <select name="designation_id" class="form-select" {% if template %}disabled{% endif %} required>
              <option value="">-- Select --</option>
              {% for d in designations %}
                <option value="{{ d.id }}"
                  {% if template and template.designation_id == d.id %}selected{% endif %}>
                  {{ d.title or d.name }}
                </option>
              {% endfor %}
            </select>
            {% if template %}
              <input type="hidden" name="designation_id" value="{{ template.designation_id }}">
            {% endif %}
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold">Minimum Education</label>
            <input type="text" name="min_education" class="form-control"
                   value="{{ template.min_education if template else '' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold">Min. Experience (years)</label>
            <input type="number" min="0" step="0.5" name="min_experience_years" class="form-control"
                   value="{{ template.min_experience_years if template else '' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold">Age Bracket</label>
            <input type="text" name="age_bracket" class="form-control"
                   value="{{ template.age_bracket if template else '' }}"
                   placeholder="e.g., 25–35 years">
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold">Salary Bracket</label>
            <input type="text" name="salary_bracket" class="form-control"
                   value="{{ template.salary_bracket if template else '' }}"
                   placeholder="e.g., 4–6 LPA">
          </div>
          <div class="col-md-12">
            <label class="form-label fw-semibold">Accountability</label>
            <textarea name="accountability" class="form-control" rows="2">{{ template.accountability if template else '' }}</textarea>
          </div>
          <div class="col-md-12">
            <label class="form-label fw-semibold">Job Description</label>
            <textarea name="job_description" class="form-control" rows="4">{{ template.job_description if template else '' }}</textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- KRAs & KPIs -->
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <span class="fw-semibold">KRAs & KPIs</span>
        <button type="button" class="btn btn-sm btn-primary" id="btnAddKra">
          <i class="bi bi-plus-lg"></i> Add KRA
        </button>
      </div>
      <div class="card-body" id="kraContainer">
        <p class="text-muted small mb-0" id="kraEmptyMsg">
          No KRAs added yet. Click "Add KRA" to start.
        </p>
      </div>
    </div>

    <!-- Skills & Questions -->
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <span class="fw-semibold">Skills & Evaluation Questions</span>
        <button type="button" class="btn btn-sm btn-primary" id="btnAddSkill">
          <i class="bi bi-plus-lg"></i> Add Skill
        </button>
      </div>
      <div class="card-body" id="skillContainer">
        <p class="text-muted small mb-0" id="skillEmptyMsg">
          No skills added yet. Click "Add Skill" to start.
        </p>
      </div>
    </div>

    <input type="hidden" name="structure_json" id="structure_json">

    <div class="d-flex justify-content-end gap-2 mb-4">
      <a href="{{ url_for('recruitment.template_list') }}" class="btn btn-outline-secondary">
        Cancel
      </a>
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-save me-1"></i> Save Template
      </button>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  // ------------- helpers to show / hide 'empty' messages -------------
  function updateEmptyMessages() {
    const kraContainer = document.getElementById('kraContainer');
    const skillContainer = document.getElementById('skillContainer');
    const kraEmptyMsg = document.getElementById('kraEmptyMsg');
    const skillEmptyMsg = document.getElementById('skillEmptyMsg');

    kraEmptyMsg.style.display = kraContainer.querySelector('.kra-block') ? 'none' : 'block';
    skillEmptyMsg.style.display = skillContainer.querySelector('.skill-block') ? 'none' : 'block';
  }

  // ------------- DOM builders -------------

  function createKpiItem(kpi) {
    kpi = kpi || {};
    const div = document.createElement('div');
    div.className = 'kpi-item border rounded p-2 mb-2';
    div.innerHTML = `
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label small fw-semibold mb-1">KPI Title</label>
          <input type="text" class="form-control form-control-sm kpi-title" value="${kpi.title || ''}">
        </div>
        <div class="col-md-4">
          <label class="form-label small fw-semibold mb-1">Target</label>
          <input type="text" class="form-control form-control-sm kpi-target" value="${kpi.target || ''}">
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold mb-1">Weightage</label>
          <input type="number" class="form-control form-control-sm kpi-weight" value="${kpi.weightage || ''}">
        </div>
        <div class="col-md-2 text-end">
          <button type="button" class="btn btn-outline-danger btn-sm btn-remove-kpi">
            <i class="bi bi-x"></i>
          </button>
        </div>
      </div>
    `;
    div.querySelector('.btn-remove-kpi').addEventListener('click', function () {
      div.remove();
    });
    return div;
  }

  function createKraBlock(kra) {
    kra = kra || {};
    const wrapper = document.createElement('div');
    wrapper.className = 'kra-block border rounded p-3 mb-3';
    wrapper.innerHTML = `
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="fw-semibold">KRA</div>
        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-kra">
          <i class="bi bi-trash"></i>
        </button>
      </div>
      <div class="row g-2 mb-2">
        <div class="col-md-6">
          <label class="form-label small fw-semibold mb-1">KRA Title</label>
          <input type="text" class="form-control form-control-sm kra-title" value="${kra.title || ''}">
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold mb-1">Weightage</label>
          <input type="number" class="form-control form-control-sm kra-weight" value="${kra.weightage || ''}">
        </div>
      </div>
      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Description</label>
        <textarea class="form-control form-control-sm kra-desc" rows="2">${kra.description || ''}</textarea>
      </div>
      <div class="mt-2">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="small fw-semibold">KPIs for this KRA</span>
          <button type="button" class="btn btn-sm btn-outline-primary btn-add-kpi">
            <i class="bi bi-plus-lg"></i> Add KPI
          </button>
        </div>
        <div class="kpi-list"></div>
      </div>
    `;

    wrapper.querySelector('.btn-remove-kra').addEventListener('click', function () {
      wrapper.remove();
      updateEmptyMessages();
    });

    const kpiList = wrapper.querySelector('.kpi-list');
    wrapper.querySelector('.btn-add-kpi').addEventListener('click', function () {
      kpiList.appendChild(createKpiItem());
    });

    (kra.kpis || []).forEach(function (k) {
      kpiList.appendChild(createKpiItem(k));
    });

    return wrapper;
  }

  function createQuestionItem(q) {
    q = q || {};
    const div = document.createElement('div');
    div.className = 'skill-question border rounded p-2 mb-2';
    div.innerHTML = `
      <div class="row g-2 align-items-end">
        <div class="col-md-10">
          <label class="form-label small fw-semibold mb-1">Question</label>
          <input type="text" class="form-control form-control-sm question-text" value="${q.text || ''}">
        </div>
        <div class="col-md-2 text-end">
          <button type="button" class="btn btn-outline-danger btn-sm btn-remove-question">
            <i class="bi bi-x"></i>
          </button>
        </div>
      </div>
    `;
    div.querySelector('.btn-remove-question').addEventListener('click', function () {
      div.remove();
    });
    return div;
  }

  function createSkillBlock(skill) {
    skill = skill || {};
    const wrapper = document.createElement('div');
    wrapper.className = 'skill-block border rounded p-3 mb-3';
    wrapper.innerHTML = `
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="fw-semibold">Skill</div>
        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-skill">
          <i class="bi bi-trash"></i>
        </button>
      </div>
      <div class="row g-2 mb-2">
        <div class="col-md-6">
          <label class="form-label small fw-semibold mb-1">Skill Name</label>
          <input type="text" class="form-control form-control-sm skill-name" value="${skill.name || ''}">
        </div>
      </div>
      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Basic Requirement / Description</label>
        <textarea class="form-control form-control-sm skill-basic" rows="2">${skill.basic_requirement || ''}</textarea>
      </div>
      <div class="mt-2">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="small fw-semibold">Evaluation Questions</span>
          <button type="button" class="btn btn-sm btn-outline-primary btn-add-question">
            <i class="bi bi-plus-lg"></i> Add Question
          </button>
        </div>
        <div class="question-list"></div>
      </div>
    `;

    wrapper.querySelector('.btn-remove-skill').addEventListener('click', function () {
      wrapper.remove();
      updateEmptyMessages();
    });

    const qList = wrapper.querySelector('.question-list');
    wrapper.querySelector('.btn-add-question').addEventListener('click', function () {
      qList.appendChild(createQuestionItem());
    });

    (skill.questions || []).forEach(function (q) {
      qList.appendChild(createQuestionItem(q));
    });

    return wrapper;
  }

  // ------------- initialisation -------------

  document.addEventListener('DOMContentLoaded', function () {
    const kraContainer = document.getElementById('kraContainer');
    const skillContainer = document.getElementById('skillContainer');

    // Safe JSON from Flask – this is the critical change
    const initialStructure = {{ (structure or {}) | tojson | safe }};

    // Prefill KRAs
    if (initialStructure && initialStructure.kras) {
      initialStructure.kras.forEach(function (k) {
        kraContainer.appendChild(createKraBlock(k));
      });
    }

    // Prefill Skills
    if (initialStructure && initialStructure.skills) {
      initialStructure.skills.forEach(function (s) {
        skillContainer.appendChild(createSkillBlock(s));
      });
    }

    updateEmptyMessages();

    // Wire buttons (no onclick attributes needed)
    document.getElementById('btnAddKra').addEventListener('click', function () {
      kraContainer.appendChild(createKraBlock());
      updateEmptyMessages();
    });

    document.getElementById('btnAddSkill').addEventListener('click', function () {
      skillContainer.appendChild(createSkillBlock());
      updateEmptyMessages();
    });

    // Serialize before submit
    document.getElementById('tplForm').addEventListener('submit', function () {
      const struct = { kras: [], skills: [] };

      kraContainer.querySelectorAll('.kra-block').forEach(function (block) {
        const title = block.querySelector('.kra-title').value.trim();
        if (!title) return;
        const kra = {
          title: title,
          description: block.querySelector('.kra-desc').value.trim(),
          weightage: block.querySelector('.kra-weight').value.trim(),
          kpis: []
        };
        block.querySelectorAll('.kpi-item').forEach(function (kpiDiv) {
          const kTitle = kpiDiv.querySelector('.kpi-title').value.trim();
          if (!kTitle) return;
          kra.kpis.push({
            title: kTitle,
            target: kpiDiv.querySelector('.kpi-target').value.trim(),
            weightage: kpiDiv.querySelector('.kpi-weight').value.trim(),
          });
        });
        struct.kras.push(kra);
      });

      skillContainer.querySelectorAll('.skill-block').forEach(function (block) {
        const name = block.querySelector('.skill-name').value.trim();
        if (!name) return;
        const skill = {
          name: name,
          basic_requirement: block.querySelector('.skill-basic').value.trim(),
          questions: []
        };
        block.querySelectorAll('.skill-question').forEach(function (qDiv) {
          const text = qDiv.querySelector('.question-text').value.trim();
          if (!text) return;
          skill.questions.push({ text: text });
        });
        struct.skills.push(skill);
      });

      document.getElementById('structure_json').value = JSON.stringify(struct);
    });
  });
</script>
{% endblock %}