{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width: 1100px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-clipboard-check me-2"></i> Interview Feedback
    </h4>
    <div class="d-flex gap-2">
      {% if req %}
      <button type="button"
              class="btn btn-outline-primary btn-sm"
              data-bs-toggle="modal"
              data-bs-target="#jdModal">
        <i class="bi bi-journal-text me-1"></i> View JD & Questions
      </button>
      {% endif %}
      <a href="{{ url_for('recruitment.view_application', app_id=interview.application_id) }}"
         class="btn btn-outline-secondary btn-sm">
        Back to Application
      </a>
    </div>
  </div>

  <!-- Candidate & requisition summary -->
  <div class="card shadow-sm mb-3">
    <div class="card-body d-flex flex-column flex-md-row justify-content-between">
      <div>
        <div class="fw-semibold mb-1">Candidate:
          <span class="text-primary">
            {{ interview.application.candidate.full_name if interview.application and interview.application.candidate else '-' }}
          </span>
        </div>
        {% if interview.application and interview.application.candidate %}
          <div class="text-muted small">
            {{ interview.application.candidate.email or '' }}
            {% if interview.application.candidate.phone %} • {{ interview.application.candidate.phone }}{% endif %}
          </div>
        {% endif %}
      </div>
      <div class="text-md-end mt-3 mt-md-0">
        {% if req %}
          <div class="mb-1">
            Requisition:
            <a href="{{ url_for('recruitment.requisition_view', req_id=req.id) }}">
              {{ req.code or ('REQ-' ~ req.id) }}
            </a>
          </div>
          <div class="small text-muted">
            {{ req.designation.title if req.designation else '-' }}<br>
            Stage: {{ interview.stage.name if interview.stage else '-' }}<br>
            Interviewer: {{ interview.interviewer.full_name if interview.interviewer else '-' }}
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Feedback form -->
  <form method="POST" class="card shadow-sm">
    <div class="card-body">
      {{ csrf_token() if csrf_token is defined }}
      <div class="row g-3">
        <div class="col-md-3">
          <label class="form-label fw-semibold">Overall Rating (1–10)</label>
          <input type="number" min="1" max="10" name="overall_rating" class="form-control">
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Recommendation</label>
          <select name="recommendation" class="form-select">
            <option value="">-- Select --</option>
            <option value="strong_hire">Strong Hire</option>
            <option value="hire">Hire</option>
            <option value="hold">Hold / Next Round</option>
            <option value="no_hire">Do Not Hire</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">Summary Comments</label>
          <textarea name="comments" rows="3" class="form-control"
                    placeholder="Overall impression, major strengths & concerns"></textarea>
        </div>
      </div>

      <hr class="my-4">

      {# === PREDEFINED SKILLS & QUESTIONS (FROM TEMPLATE) === #}
      {% if structure.skills %}
        <div class="mb-4">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="fw-semibold mb-0 text-primary">Predefined Skills &amp; Questions</h6>
          </div>
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th style="width: 18%;">Skill</th>
                  <th>Question</th>
                  <th style="width: 12%;">Rating (1–10)</th>
                  <th style="width: 25%;">Comments</th>
                </tr>
              </thead>
              <tbody>
              {% for sk in structure.skills %}
                {% if sk.questions %}
                  {% for q in sk.questions %}
                    <tr>
                      {% if loop.first %}
                        <td rowspan="{{ sk.questions|length }}" class="fw-semibold align-top">
                          {{ sk.name }}
                          {% if sk.basic_requirement %}
                            <div class="small text-muted mt-1">
                              {{ sk.basic_requirement }}
                            </div>
                          {% endif %}
                        </td>
                      {% endif %}
                      <td class="small">
                        {{ q.text }}
                      </td>
                      <td>
                        <input type="number"
                              min="1" max="10"
                              name="tplq_{{ q.id }}_rating"
                              class="form-control form-control-sm">
                      </td>
                      <td>
                        <input type="text"
                              name="tplq_{{ q.id }}_comment"
                              class="form-control form-control-sm">
                      </td>
                    </tr>
                  {% endfor %}
                  <tr class="table-light">
                    <td colspan="4"></td>
                  </tr>
                {% endif %}
              {% endfor %}
              </tbody>
            </table>
          </div>
          <p class="small text-muted mt-1">
            These questions come from the requisition template. Please rate each one as applicable.
          </p>
        </div>
      {% endif %}

      <!-- === CUSTOM / ADDITIONAL QUESTIONS (EXISTING SECTION) === -->
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-semibold mb-0 text-primary">Additional Questions &amp; Ratings</h6>
        <button type="button"
                class="btn btn-outline-primary btn-sm"
                onclick="addSkillRow()">
          <i class="bi bi-plus-circle me-1"></i> Add Question
        </button>
      </div>

      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0" id="skillTable">
          <thead class="table-light">
            <tr>
              <th style="width: 18%;">Skill</th>
              <th>Question</th>
              <th style="width: 12%;">Rating (1–10)</th>
              <th style="width: 25%;">Comments</th>
              <th style="width: 40px;"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="5" class="small text-muted">
                Use this section to add any additional questions or aspects you evaluated
                beyond the predefined list above.
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card-footer d-flex justify-content-end gap-2">
      <a href="{{ url_for('recruitment.view_application', app_id=interview.application_id) }}"
         class="btn btn-outline-secondary btn-sm">Cancel</a>
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="bi bi-check2-square me-1"></i> Submit Feedback
      </button>
    </div>
  </form>
</div>

{% if req and tpl %}
<!-- Modal: JD, KRAs, KPIs, Skills -->
<div class="modal fade" id="jdModal" tabindex="-1" aria-labelledby="jdModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="jdModalLabel">
          Requisition Details &amp; JD – {{ req.code or ('REQ-' ~ req.id) }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Tabs -->
        <ul class="nav nav-tabs mb-3" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-req" data-bs-toggle="tab"
                    data-bs-target="#pane-req" type="button" role="tab">
              Requisition &amp; JD
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-kra" data-bs-toggle="tab"
                    data-bs-target="#pane-kra" type="button" role="tab">
              KRAs &amp; KPIs
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-skill" data-bs-toggle="tab"
                    data-bs-target="#pane-skill" type="button" role="tab">
              Skills &amp; Questions
            </button>
          </li>
        </ul>

        <div class="tab-content">
          <!-- Requisition & JD -->
          <div class="tab-pane fade show active" id="pane-req" role="tabpanel">
            <div class="row">
              <div class="col-md-6">
                <h6 class="fw-semibold">Basic Details</h6>
                <p class="mb-1"><strong>Designation:</strong> {{ req.designation.title if req.designation else '-' }}</p>
                <p class="mb-1"><strong>Department:</strong> {{ req.department.name if req.department else '-' }}</p>
                <p class="mb-1"><strong>Location:</strong> {{ req.location or '-' }}</p>
                <p class="mb-1"><strong>Positions:</strong> {{ req.positions or 1 }}</p>
                <p class="mb-1"><strong>Work Mode:</strong> {{ req.work_mode or '-' }}</p>
                <p class="mb-1"><strong>Employment Type:</strong> {{ req.employment_type or '-' }}</p>
              </div>
              <div class="col-md-6">
                <h6 class="fw-semibold">Requirements</h6>
                <p class="mb-1"><strong>Minimum Education:</strong> {{ tpl.min_education or '-' }}</p>
                <p class="mb-1"><strong>Min Experience (years):</strong> {{ tpl.min_experience_years or '-' }}</p>
                <p class="mb-1"><strong>Age Bracket:</strong> {{ tpl.age_bracket or '-' }}</p>
                <p class="mb-1"><strong>Salary Bracket:</strong> {{ tpl.salary_bracket or '-' }}</p>
              </div>
            </div>
            <hr>
            <h6 class="fw-semibold">Accountability</h6>
            <p class="small">{{ tpl.accountability or '-' }}</p>
            <h6 class="fw-semibold">Job Description</h6>
            <p class="small mb-0" style="white-space: pre-wrap;">{{ tpl.job_description or '-' }}</p>
          </div>

          <!-- KRAs & KPIs -->
          <div class="tab-pane fade" id="pane-kra" role="tabpanel">
            {% if structure.kras %}
              {% for kra in structure.kras %}
                <div class="mb-3">
                  <h6 class="fw-semibold mb-1">
                    {{ loop.index }}. {{ kra.title }}
                    {% if kra.weightage %}<span class="badge bg-info ms-2">Weight: {{ kra.weightage }}</span>{% endif %}
                  </h6>
                  {% if kra.description %}
                    <p class="small text-muted mb-1">{{ kra.description }}</p>
                  {% endif %}
                  {% if kra.kpis %}
                    <ul class="small mb-0">
                      {% for kpi in kra.kpis %}
                        <li>
                          <strong>{{ kpi.title }}</strong>
                          {% if kpi.target %} – Target: {{ kpi.target }}{% endif %}
                          {% if kpi.weightage %} (Weight: {{ kpi.weightage }}){% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </div>
                {% if not loop.last %}<hr>{% endif %}
              {% endfor %}
            {% else %}
              <p class="text-muted small">No KRAs defined for this template.</p>
            {% endif %}
          </div>

          <!-- Skills & Questions -->
          <div class="tab-pane fade" id="pane-skill" role="tabpanel">
            {% if structure.skills %}
              {% for sk in structure.skills %}
                <div class="mb-3">
                  <h6 class="fw-semibold mb-1">{{ loop.index }}. {{ sk.name }}</h6>
                  {% if sk.basic_requirement %}
                    <p class="small text-muted mb-1">{{ sk.basic_requirement }}</p>
                  {% endif %}
                  {% if sk.questions %}
                    <ol class="small mb-0">
                      {% for q in sk.questions %}
                        <li>{{ q.text }}</li>
                      {% endfor %}
                    </ol>
                  {% endif %}
                </div>
                {% if not loop.last %}<hr>{% endif %}
              {% endfor %}
            {% else %}
              <p class="text-muted small">No skill-wise questions defined for this template.</p>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Simple JS to add dynamic skill rows -->
<script>
let skillRowIndex = 1;

function addSkillRow() {
  const tbody = document.querySelector('#skillTable tbody');
  // Remove help row if it's the only one
  if (tbody.children.length === 1 && tbody.children[0].querySelector('td[colspan]')) {
    tbody.innerHTML = '';
  }

  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td>
      <input type="text" name="item_skill_${skillRowIndex}" class="form-control form-control-sm">
    </td>
    <td>
      <input type="text" name="item_question_${skillRowIndex}" class="form-control form-control-sm">
    </td>
    <td>
      <input type="number" min="1" max="10" name="item_rating_${skillRowIndex}" class="form-control form-control-sm">
    </td>
    <td>
      <input type="text" name="item_comment_${skillRowIndex}" class="form-control form-control-sm">
    </td>
    <td class="text-center">
      <button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('tr').remove();">
        <i class="bi bi-x-circle"></i>
      </button>
    </td>
  `;
  tbody.appendChild(tr);
  skillRowIndex++;
}
</script>
{% endblock %}