{% extends 'base.html' %}
{% block content %}

<style>
  /* HRSoft vibe */
  :root { --hrsoft-primary:#0054A6; --hrsoft-accent:#F47C20; }
  .card-hrsoft { border:0; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
  .section-title { font-weight:700; letter-spacing:.2px; }
  .q-block + .q-block { border-top: 1px dashed #e9ecef; padding-top:1rem; margin-top:1rem; }
  .btn-choice { --bs-btn-padding-y:.4rem; --bs-btn-padding-x:.75rem; --bs-btn-font-size:.875rem; }
  .btn-outline-primary { --bs-btn-border-color: var(--hrsoft-primary); --bs-btn-color: var(--hrsoft-primary); }
  .btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
      color:#fff; background:var(--hrsoft-primary); border-color:var(--hrsoft-primary);
  }
  .badge-qtype { background: #eef6ff; color: var(--hrsoft-primary); border:1px solid #d8e9ff; }
  .sticky-submit { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid #eef2f6; }
  .note { color:#6c757d; font-size:.875rem; }
  .char-count { font-size:.8rem; color:#6c757d; }
  .pill-alert { border-left:6px solid var(--hrsoft-accent); }
</style>

{% if already_submitted %}
  <div class="alert alert-info d-flex align-items-center pill-alert mb-3">
    <i class="bi bi-check2-circle me-2"></i>
    <div>
      You’ve already submitted feedback for <strong>{{ month }}</strong>.
      {% if next_url %}
        <a href="{{ next_url }}" class="btn btn-sm btn-primary ms-2">Continue</a>
      {% endif %}
    </div>
  </div>
{% endif %}

<div class="container py-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h3 class="section-title m-0">Monthly Feedback</h3>
    <span class="badge text-bg-light border"><i class="bi bi-calendar3 me-1"></i>{{ month }}</span>
  </div>

  <form method="POST" action="{{ url_for('feedback_emp.submit') }}" id="feedbackForm" class="card card-hrsoft">
    <div class="card-body">
      <input type="hidden" name="month" value="{{ month }}">
      {% if next_url %}<input type="hidden" name="next" value="{{ next_url or '' }}">{% endif %}

      {% for q in questions %}
      <div class="q-block">
        <div class="d-flex align-items-center gap-2 mb-2">
          <div class="fw-semibold">{{ loop.index }}. {{ q.question_text }}</div>
          <span class="badge rounded-pill badge-qtype text-capitalize">{{ q.qtype }}</span>
        </div>

        {% if q.qtype == 'text' %}
          <div>
            <textarea class="form-control" name="q_{{ q.id }}" rows="3"
                      placeholder="Type your answer…" data-charmax="1000"></textarea>
            <div class="char-count mt-1">0 / 1000</div>
          </div>

        {% elif q.qtype == 'single' %}
          <div class="d-flex flex-wrap gap-2">
            {% for opt in q.options|sort(attribute='sort_order') %}
              <input class="btn-check" type="radio" name="q_{{ q.id }}" id="q{{ q.id }}_o{{ opt.id }}" value="{{ opt.id }}">
              <label class="btn btn-outline-primary btn-choice" for="q{{ q.id }}_o{{ opt.id }}">{{ opt.label }}</label>
            {% endfor %}
          </div>

        {% elif q.qtype == 'multi' %}
          <div class="d-flex flex-wrap gap-2">
            {% for opt in q.options|sort(attribute='sort_order') %}
              <input class="btn-check" type="checkbox" name="q_{{ q.id }}" id="q{{ q.id }}_o{{ opt.id }}" value="{{ opt.id }}">
              <label class="btn btn-outline-primary btn-choice" for="q{{ q.id }}_o{{ opt.id }}">{{ opt.label }}</label>
            {% endfor %}
          </div>
          <div class="note mt-1"><i class="bi bi-info-circle me-1"></i>You can select multiple.</div>
        {% endif %}
      </div>
      {% endfor %}

      <div class="form-check form-switch mt-3">
        <input class="form-check-input" type="checkbox" name="anonymous" id="anon">
        <label class="form-check-label" for="anon">Submit anonymously</label>
      </div>
    </div>

    <div class="sticky-submit p-3 d-flex justify-content-between align-items-center">
      <div class="note"><i class="bi bi-shield-check me-1"></i>Your feedback is stored securely.</div>
      <div class="d-flex gap-2">
        {% if next_url and already_submitted %}
          <a class="btn btn-outline-secondary" href="{{ next_url }}">Skip</a>
        {% endif %}
        <button type="submit" class="btn btn-success" id="submitBtn">
          <span class="spinner-border spinner-border-sm me-2 d-none" id="submitSpin"></span>
          Submit Feedback
        </button>
      </div>
    </div>
  </form>
</div>

<script>
  // Character counter for text answers
  document.querySelectorAll('textarea[data-charmax]').forEach(el => {
    const max = parseInt(el.dataset.charmax || '1000', 10);
    const counter = el.parentElement.querySelector('.char-count');
    const update = () => { counter.textContent = `${el.value.length} / ${max}`; };
    el.addEventListener('input', update); update();
  });

  // Submit loading state
  const form = document.getElementById('feedbackForm');
  const btn  = document.getElementById('submitBtn');
  const spin = document.getElementById('submitSpin');
  form.addEventListener('submit', () => {
    btn.disabled = true; spin.classList.remove('d-none');
  });
</script>

{% endblock %}