{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-clipboard-data me-2"></i> Appraisal Feedback Summary
      </h4>
      <div class="text-muted small">
        View Employee + Manager feedback together (for HOD / Management / HR).
      </div>
    </div>

    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary"
         href="{{ url_for('appraisal.dashboard') }}">
        <i class="bi bi-arrow-left"></i> Back
      </a>
    </div>
  </div>

  <!-- Filters -->
  <form method="get" class="card shadow-sm mb-3">
    <div class="card-body row g-2 align-items-end">

      <div class="col-md-2">
        <label class="form-label mb-1">Month (Effective)</label>
        <input type="month" name="month" class="form-control" value="{{ filters.month or '' }}">
        <div class="text-muted small">Blank = all months</div>
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1">Department</label>
        <select name="department_id" class="form-select">
          <option value="">All</option>
          {% for d in departments %}
            <option value="{{ d.id }}"
              {% if filters.department_id and filters.department_id|int == d.id %}selected{% endif %}>
              {{ d.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1">Status</label>
        <select name="status" class="form-select">
          <option value="">All</option>
          {% for s in status_choices %}
            <option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>
              {{ s.replace('_',' ')|title }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1">View</label>
        <select name="view_mode" class="form-select">
          <option value="all" {% if (filters.view_mode or 'all') == 'all' %}selected{% endif %}>All</option>
          <option value="scored_only" {% if filters.view_mode == 'scored_only' %}selected{% endif %}>Scored / Finalized</option>
          <option value="finalized_only" {% if filters.view_mode == 'finalized_only' %}selected{% endif %}>Finalized / Applied</option>
        </select>
      </div>

      <div class="col-md-3">
        <label class="form-label mb-1">Search (Name / Code)</label>
        <input type="text" name="search" class="form-control"
               value="{{ filters.search or '' }}" placeholder="e.g., 2255 / Ritesh">
      </div>

      <div class="col-md-1 d-grid">
        <button class="btn btn-primary">
          <i class="bi bi-funnel"></i> Apply
        </button>
      </div>

      <div class="col-12">
        <a class="btn btn-outline-secondary btn-sm"
           href="{{ url_for('appraisal.feedback_summary') }}">
          Reset
        </a>
      </div>
    </div>
  </form>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for c, m in messages %}
        <div class="alert alert-{{ c }} alert-dismissible fade show" role="alert">
          {{ m }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% if not rows or rows|length == 0 %}
    <div class="alert alert-info">No appraisals found for the selected filters.</div>
  {% else %}

    <div class="d-flex flex-wrap gap-2 mb-2 small">
      <span class="badge bg-light text-dark border">
        Total: <b>{{ rows|length }}</b>
      </span>
      <span class="badge bg-success">Employee</span>
      <span class="badge bg-primary">Manager</span>
      <span class="badge bg-secondary">Scores</span>
    </div>

    <div class="accordion" id="appraisalSummaryAcc">

      {% for a, emp, dept in rows %}
        {% set emp_resp = response_map.get((a.id, 'employee')) %}
        {% set mgr_resp = response_map.get((a.id, 'manager')) %}

        {% set emp_ans = answers_map.get(emp_resp.id, []) if emp_resp else [] %}
        {% set mgr_ans = answers_map.get(mgr_resp.id, []) if mgr_resp else [] %}

        {% set sc = score_map.get(a.id, {}) %}
        {% set emp_score = sc.get('employee') %}
        {% set mgr_score = sc.get('manager') %}
        {% set total_score = sc.get('total') %}

        <div class="accordion-item mb-2 border rounded-3 shadow-sm">
          <h2 class="accordion-header" id="h{{ a.id }}">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#c{{ a.id }}"
                    aria-expanded="false"
                    aria-controls="c{{ a.id }}">

              <div class="w-100 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div class="d-flex flex-column">
                  <div class="fw-semibold">
                    {{ emp.employee_code or '' }} — {{ emp.full_name }}
                  </div>
                  <div class="text-muted small">
                    Dept: {{ dept.name if dept else '—' }}
                    · Process: <b>{{ a.process_type }}</b>
                    · Effective: <b>{{ a.effective_month.strftime('%Y-%m') if a.effective_month else '—' }}</b>
                    · Status: <span class="badge bg-light text-dark border">{{ a.status }}</span>
                  </div>
                </div>

                <div class="d-flex flex-wrap align-items-center gap-2">
                  <span class="badge bg-secondary">
                    Total: {{ total_score if total_score is not none else 0 }}%
                  </span>
                  <span class="badge bg-success">
                    Emp: {{ emp_score if emp_score is not none else 0 }}%
                  </span>
                  <span class="badge bg-primary">
                    Mgr: {{ mgr_score if mgr_score is not none else 0 }}%
                  </span>

                  {% if a.recommended_increment_pct %}
                    <span class="badge bg-info text-dark">
                      Rec: {{ a.recommended_increment_pct }}%
                    </span>
                  {% endif %}

                  {% if a.final_increment_pct %}
                    <span class="badge bg-warning text-dark">
                      Final: {{ a.final_increment_pct }}%
                    </span>
                  {% endif %}
                </div>
              </div>

            </button>
          </h2>

          <div id="c{{ a.id }}" class="accordion-collapse collapse"
               aria-labelledby="h{{ a.id }}" data-bs-parent="#appraisalSummaryAcc">
            <div class="accordion-body">

              <div class="row g-3">
                <!-- Employee -->
                <div class="col-lg-6">
                  <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                      <div class="fw-semibold">
                        <i class="bi bi-person-check me-1"></i> Employee Feedback
                      </div>
                      <div class="small">
                        {% if emp_resp and emp_resp.submitted_at %}
                          Submitted: {{ emp_resp.submitted_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                          Not submitted
                        {% endif %}
                      </div>
                    </div>
                    <div class="card-body p-2">

                      {% if not emp_resp %}
                        <div class="alert alert-light border mb-0">
                          No employee response found.
                        </div>
                      {% else %}
                        {% if emp_ans and emp_ans|length > 0 %}
                          <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle mb-0">
                              <thead class="table-light">
                                <tr>
                                  <th style="width:55%;">Question</th>
                                  <th style="width:10%;" class="text-center">Rating</th>
                                  <th style="width:35%;">Comment</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for x in emp_ans %}
                                  <tr>
                                    <td>
                                      <div class="fw-semibold">{{ x.question_text }}</div>
                                      <div class="text-muted small">Weight: {{ x.weight }}</div>
                                    </td>
                                    <td class="text-center">
                                      <span class="badge bg-success">{{ x.rating }}</span>
                                    </td>
                                    <td>
                                      {% if x.comment %}
                                        {{ x.comment }}
                                      {% else %}
                                        <span class="text-muted">—</span>
                                      {% endif %}
                                    </td>
                                  </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                          </div>
                        {% else %}
                          <div class="alert alert-light border mb-0">
                            No employee answers found.
                          </div>
                        {% endif %}
                      {% endif %}

                    </div>
                  </div>
                </div>

                <!-- Manager -->
                <div class="col-lg-6">
                  <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                      <div class="fw-semibold">
                        <i class="bi bi-person-badge me-1"></i> Manager Feedback
                      </div>
                      <div class="small">
                        {% if mgr_resp and mgr_resp.submitted_at %}
                          Submitted: {{ mgr_resp.submitted_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                          Not submitted
                        {% endif %}
                      </div>
                    </div>
                    <div class="card-body p-2">

                      {% if not mgr_resp %}
                        <div class="alert alert-light border mb-0">
                          No manager response found.
                        </div>
                      {% else %}
                        {% if mgr_ans and mgr_ans|length > 0 %}
                          <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle mb-0">
                              <thead class="table-light">
                                <tr>
                                  <th style="width:55%;">Question</th>
                                  <th style="width:10%;" class="text-center">Rating</th>
                                  <th style="width:35%;">Comment</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for x in mgr_ans %}
                                  <tr>
                                    <td>
                                      <div class="fw-semibold">{{ x.question_text }}</div>
                                      <div class="text-muted small">Weight: {{ x.weight }}</div>
                                    </td>
                                    <td class="text-center">
                                      <span class="badge bg-primary">{{ x.rating }}</span>
                                    </td>
                                    <td>
                                      {% if x.comment %}
                                        {{ x.comment }}
                                      {% else %}
                                        <span class="text-muted">—</span>
                                      {% endif %}
                                    </td>
                                  </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                          </div>
                        {% else %}
                          <div class="alert alert-light border mb-0">
                            No manager answers found.
                          </div>
                        {% endif %}
                      {% endif %}

                    </div>
                  </div>
                </div>

                <!-- HR Final numbers -->
                <div class="col-12">
                  <div class="card border-0 shadow-sm">
                    <div class="card-body">
                      <div class="row g-2 small">
                        <div class="col-md-3">
                          <div class="text-muted">Current Gross</div>
                          <div class="fw-semibold">{{ "%.2f"|format(a.current_gross or 0) }}</div>
                        </div>
                        <div class="col-md-3">
                          <div class="text-muted">Recommended %</div>
                          <div class="fw-semibold">{{ a.recommended_increment_pct or 0 }}%</div>
                        </div>
                        <div class="col-md-3">
                          <div class="text-muted">Final %</div>
                          <div class="fw-semibold">{{ a.final_increment_pct or 0 }}%</div>
                        </div>
                        <div class="col-md-3">
                          <div class="text-muted">Final New Gross</div>
                          <div class="fw-semibold">{{ "%.2f"|format(a.final_new_gross or 0) }}</div>
                        </div>
                        <div class="col-md-3">
                          <div class="text-muted">Annualized Impact</div>
                          <div class="fw-semibold">{{ "%.2f"|format(a.annualized_impact or 0) }}</div>
                        </div>
                        <div class="col-md-3">
                          <div class="text-muted">HR Finalized</div>
                          <div class="fw-semibold">
                            {% if a.hr_finalized_at %}
                              {{ a.hr_finalized_at.strftime('%Y-%m-%d %H:%M') }}
                            {% else %}
                              —
                            {% endif %}
                          </div>
                        </div>
                        <div class="col-md-6 text-end">
                          <a class="btn btn-outline-secondary btn-sm"
                             href="{{ url_for('appraisal.view', appraisal_id=a.id) }}">
                            <i class="bi bi-eye"></i> Open Appraisal
                          </a>
                          {% if is_hr_admin %}
                            <a class="btn btn-outline-primary btn-sm"
                               href="{{ url_for('appraisal.hr_finalize', appraisal_id=a.id) }}">
                              <i class="bi bi-check2-square"></i> Finalize / Edit
                            </a>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div><!-- row -->

            </div>
          </div>
        </div>
      {% endfor %}

    </div><!-- accordion -->
  {% endif %}

</div>
{% endblock %}