{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 900px;">
  <div class="card shadow-sm">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
      <strong>HR Finalize Appraisal</strong>
      <span class="badge bg-secondary">{{ a.process_type }}</span>
    </div>

    <form method="post" class="card-body" id="finalizeForm">
      <div class="row g-3">
        <div class="col-md-6">
          <div class="text-muted small">Employee</div>
          <div class="fw-semibold">{{ emp.full_name }} ({{ emp.employee_code }})</div>
        </div>
        <div class="col-md-6">
          <div class="text-muted small">Effective Month</div>
          <div class="fw-semibold">{{ a.effective_month.strftime('%b-%Y') }}</div>
        </div>

        <div class="col-md-6">
          <label class="form-label">Current Gross (Monthly)</label>
          <input class="form-control" id="currentGross" value="{{ a.current_gross or 0 }}" readonly>
        </div>

        <div class="col-md-6">
          <label class="form-label">Recommended Increment %</label>
          <input class="form-control" value="{{ a.recommended_increment_pct or 0 }}" readonly>
        </div>

        <div class="col-md-6">
          <label class="form-label">Final Increment % (Editable)</label>
          <input
            type="number"
            step="0.01"
            name="final_increment_pct"
            id="finalPct"
            class="form-control"
            value="{{ a.final_increment_pct if a.final_increment_pct is not none else (a.recommended_increment_pct or 0) }}"
          >
          <div class="form-text">Updating this will auto-calculate Final New Gross.</div>
        </div>

        <div class="col-md-6">
          <label class="form-label">Final New Gross (Monthly)</label>
          <input
            type="number"
            step="0.01"
            name="final_new_gross"
            id="finalGross"
            class="form-control"
            value="{{ a.final_new_gross if a.final_new_gross is not none else default_new_gross }}"
            required
          >
          <div class="form-text">Updating this will auto-calculate Final Increment %.</div>
        </div>
      </div>

      {% if budget_info %}
      <hr>
      <div class="row g-2">
        <div class="col-md-4"><span class="text-muted">Budget Total:</span> <strong>{{ budget_info.budget_total }}</strong></div>
        <div class="col-md-4"><span class="text-muted">Used:</span> <strong>{{ budget_info.used }}</strong></div>
        <div class="col-md-4"><span class="text-muted">Remaining:</span> <strong>{{ budget_info.remaining }}</strong></div>
      </div>
      {% endif %}

      <div class="d-flex justify-content-end mt-3 gap-2">
        <a class="btn btn-outline-secondary" href="{{ url_for('appraisal.view', appraisal_id=a.id) }}">Back</a>
        <button class="btn btn-primary">Finalize</button>
      </div>
    </form>
  </div>
</div>

<script>
(function(){
  const currentGrossEl = document.getElementById("currentGross");
  const finalPctEl = document.getElementById("finalPct");
  const finalGrossEl = document.getElementById("finalGross");

  function toNum(v){
    const n = parseFloat(v);
    return isNaN(n) ? 0 : n;
  }

  function round2(n){
    return Math.round((n + Number.EPSILON) * 100) / 100;
  }

  // when % changes -> compute gross
  function recalcGrossFromPct(){
    const oldGross = toNum(currentGrossEl.value);
    const pct = toNum(finalPctEl.value);
    if (oldGross <= 0) return;

    const newGross = round2(oldGross * (1 + (pct / 100)));
    finalGrossEl.value = newGross;
  }

  // when gross changes -> compute %
  function recalcPctFromGross(){
    const oldGross = toNum(currentGrossEl.value);
    const newGross = toNum(finalGrossEl.value);
    if (oldGross <= 0 || newGross <= 0) return;

    const pct = round2(((newGross - oldGross) / oldGross) * 100);
    finalPctEl.value = pct;
  }

  // avoid infinite loop: only recalc the other field on user input
  finalPctEl.addEventListener("input", recalcGrossFromPct);
  finalGrossEl.addEventListener("input", recalcPctFromGross);

})();
</script>
{% endblock %}