{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4" style="max-width: 1200px;">

  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-cash-coin me-2"></i> Appraisal Budgets (Annualized Impact)
      </h4>
      <div class="text-muted small">
        FY = Apr {{ fy }} to Mar {{ fy + 1 }}
        · Locations are auto-picked from <b>Employee.location</b>
      </div>
    </div>

    <form method="get" class="d-flex gap-2">
      <input type="number" name="fy" class="form-control form-control-sm" value="{{ fy }}" style="width:120px;">
      <button class="btn btn-sm btn-outline-dark">
        <i class="bi bi-arrow-repeat me-1"></i> Go
      </button>
    </form>
  </div>

  <form method="post" class="card shadow-sm" id="budgetsForm">
    <div class="card-body">

      <!-- TOP VALIDATION BANNER -->
      <div id="budgetTopAlert" class="alert alert-danger d-none mb-3">
        <div class="fw-bold mb-1"><i class="bi bi-exclamation-triangle me-1"></i> Budget validation failed</div>
        <div id="budgetTopAlertText" class="small"></div>
      </div>

      <!-- GLOBAL BUDGET -->
      <div class="row g-3 align-items-end mb-2">
        <div class="col-md-4">
          <label class="form-label fw-bold">Global Budget (Annual Impact)</label>
          <input type="number" step="0.01" class="form-control"
                 id="global_budget"
                 name="global_budget"
                 value="{{ global_budget or 0 }}">
          <div class="form-text">
            Allocation rule: <b>Sum(Location Budgets) ≤ Global</b>
          </div>
        </div>

        <div class="col-md-8">
          <div class="border rounded p-3 bg-light">
            <div class="row text-center g-2">
              <div class="col-4">
                <div class="text-muted small">Total</div>
                <div class="fw-bold">{{ usage_global.budget_total }}</div>
              </div>
              <div class="col-4">
                <div class="text-muted small">Used</div>
                <div class="fw-bold">{{ usage_global.used }}</div>
              </div>
              <div class="col-4">
                <div class="text-muted small">Remaining</div>
                <div class="fw-bold {% if usage_global.remaining < 0 %}text-danger{% endif %}">
                  {{ usage_global.remaining }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- LIVE GLOBAL ALLOCATION SUMMARY -->
      <div class="row g-3 mb-4">
        <div class="col-md-4"></div>
        <div class="col-md-8">
          <div class="border rounded p-2 bg-white">
            <div class="d-flex flex-wrap gap-3 small justify-content-end">
              <span class="text-muted">Sum(Location Budgets): <b id="sumLocBudgets">0.00</b></span>
              <span class="text-muted">Global Budget: <b id="globalBudgetLive">0.00</b></span>
              <span class="text-muted">Global Remaining (Allocation): <b id="globalRemainAlloc">0.00</b></span>
            </div>
          </div>
        </div>
      </div>

      <hr class="my-4">

      <!-- LOCATION + DEPT BUDGETS -->
      <div class="accordion" id="locBudgetsAccordion">
        {% for loc in locations %}
          {% set lk = loc_key(loc) %}
          {% set lusage = usage_loc.get(loc) %}

          <div class="accordion-item" data-lk="{{ lk }}">
            <h2 class="accordion-header" id="heading_{{ lk }}">
              <button class="accordion-button collapsed" type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#collapse_{{ lk }}"
                      aria-expanded="false"
                      aria-controls="collapse_{{ lk }}">
                <div class="w-100 d-flex flex-wrap justify-content-between align-items-center gap-2">
                  <div class="fw-bold">
                    <i class="bi bi-geo-alt me-2"></i>{{ loc }}
                  </div>

                  <div class="d-flex flex-wrap gap-3 small align-items-center">
                    <!-- Server usage (actual used/remaining) -->
                    <span class="text-muted">Total: <b>{{ lusage.budget_total if lusage else 0 }}</b></span>
                    <span class="text-muted">Used: <b>{{ lusage.used if lusage else 0 }}</b></span>
                    <span class="{% if lusage and lusage.remaining < 0 %}text-danger{% else %}text-muted{% endif %}">
                      Remaining: <b>{{ lusage.remaining if lusage else 0 }}</b>
                    </span>

                    <!-- Live allocation checks -->
                    <span class="badge bg-secondary" title="Sum of department budgets entered for this location">
                      Dept Sum: <span id="deptSum_{{ lk }}">0.00</span>
                    </span>
                    <span class="badge bg-secondary" title="Location budget entered">
                      Loc Budget: <span id="locBudget_{{ lk }}">0.00</span>
                    </span>
                    <span class="badge bg-danger d-none" id="locErrBadge_{{ lk }}" title="Dept sum exceeds location budget">
                      Dept > Loc
                    </span>
                  </div>
                </div>
              </button>
            </h2>

            <div id="collapse_{{ lk }}" class="accordion-collapse collapse"
                 aria-labelledby="heading_{{ lk }}"
                 data-bs-parent="#locBudgetsAccordion">
              <div class="accordion-body">

                <!-- Location budget input -->
                <div class="row g-3 align-items-end mb-2">
                  <div class="col-md-4">
                    <label class="form-label fw-bold">Location Budget (Annual Impact)</label>
                    <input type="number" step="0.01" class="form-control loc-budget-input"
                           data-lk="{{ lk }}"
                           name="loc_{{ lk }}"
                           value="{{ loc_bmap.get(loc, 0) }}">
                    <div class="form-text">
                      Allocation rule: <b>Sum(Dept Budgets) ≤ Location Budget</b>
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="alert alert-info mb-0 py-2">
                      <div class="small">
                        This location budget is checked after Global budget during HR Finalize.
                        Department budgets inside this location are checked last.
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Per-location error -->
                <div id="locAlert_{{ lk }}" class="alert alert-danger d-none py-2 mb-3">
                  <div class="small mb-0">
                    ❌ <b>{{ loc }}</b>: Sum of Department budgets (<span id="locDeptSumText_{{ lk }}">0.00</span>)
                    cannot exceed Location budget (<span id="locBudgetText_{{ lk }}">0.00</span>).
                  </div>
                </div>

                <!-- Department budgets table -->
                <div class="table-responsive">
                  <table class="table table-sm table-bordered align-middle mb-0">
                    <thead class="table-light">
                      <tr>
                        <th style="min-width:220px;">Department</th>
                        <th style="width:220px;">Dept Budget (Annual Impact)</th>
                        <th style="width:140px;">Used</th>
                        <th style="width:160px;">Remaining</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for d in depts %}
                        {% set du = usage_dept.get((loc, d.id)) %}
                        <tr>
                          <td class="fw-semibold">{{ d.name }}</td>
                          <td>
                            <input type="number" step="0.01" class="form-control form-control-sm dept-budget-input"
                                   data-lk="{{ lk }}"
                                   name="dept_{{ lk }}_{{ d.id }}"
                                   value="{{ dept_bmap.get((loc, d.id), 0) }}">
                          </td>
                          <td>{{ du.used if du else 0 }}</td>
                          <td class="fw-bold {% if du and du.remaining < 0 %}text-danger{% endif %}">
                            {{ du.remaining if du else 0 }}
                          </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>

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

    </div>

    <div class="card-footer d-flex justify-content-between align-items-center gap-2 flex-wrap">
      <div class="small text-muted">
        <i class="bi bi-info-circle me-1"></i>
        Save is disabled if allocation rules are violated. Server-side validation will also block invalid saves.
      </div>
      <button class="btn btn-primary" id="saveBtn" type="submit">
        <i class="bi bi-save me-1"></i> Save Budgets
      </button>
    </div>
  </form>

</div>

<script>
(function() {
  function num(v) {
    const x = parseFloat(v);
    return isNaN(x) ? 0 : x;
  }
  function fmt(x) {
    return (Math.round((x + Number.EPSILON) * 100) / 100).toFixed(2);
  }

  const globalInput = document.getElementById("global_budget");
  const saveBtn = document.getElementById("saveBtn");
  const topAlert = document.getElementById("budgetTopAlert");
  const topAlertText = document.getElementById("budgetTopAlertText");

  const sumLocEl = document.getElementById("sumLocBudgets");
  const globalLiveEl = document.getElementById("globalBudgetLive");
  const globalRemainAllocEl = document.getElementById("globalRemainAlloc");

  function calcLocationSums() {
    const locSums = {}; // lk -> sum dept
    document.querySelectorAll(".dept-budget-input").forEach(inp => {
      const lk = inp.dataset.lk;
      locSums[lk] = (locSums[lk] || 0) + num(inp.value);
    });
    return locSums;
  }

  function getLocBudget(lk) {
    const inp = document.querySelector(`.loc-budget-input[data-lk="${lk}"]`);
    return inp ? num(inp.value) : 0;
  }

  function sumAllLocations() {
    let total = 0;
    document.querySelectorAll(".loc-budget-input").forEach(inp => total += num(inp.value));
    return total;
  }

  function setInvalid(state) {
    saveBtn.disabled = !!state;
  }

  function validateAndRender() {
    let hasError = false;
    const messages = [];

    const globalBudget = num(globalInput.value);
    const locSum = sumAllLocations();

    // Live global summary
    sumLocEl.textContent = fmt(locSum);
    globalLiveEl.textContent = fmt(globalBudget);
    globalRemainAllocEl.textContent = fmt(globalBudget - locSum);

    // Global rule
    if (locSum > globalBudget + 1e-6) {
      hasError = true;
      messages.push(`Sum of Location budgets (${fmt(locSum)}) cannot exceed Global budget (${fmt(globalBudget)}).`);
    }

    // Per location rule
    const locDeptSums = calcLocationSums();
    document.querySelectorAll(".accordion-item[data-lk]").forEach(item => {
      const lk = item.dataset.lk;
      const deptSum = num(locDeptSums[lk] || 0);
      const locBudget = getLocBudget(lk);

      // header badges
      const deptSumEl = document.getElementById(`deptSum_${lk}`);
      const locBudgetEl = document.getElementById(`locBudget_${lk}`);
      const errBadge = document.getElementById(`locErrBadge_${lk}`);

      if (deptSumEl) deptSumEl.textContent = fmt(deptSum);
      if (locBudgetEl) locBudgetEl.textContent = fmt(locBudget);

      const locAlert = document.getElementById(`locAlert_${lk}`);
      const deptSumText = document.getElementById(`locDeptSumText_${lk}`);
      const locBudgetText = document.getElementById(`locBudgetText_${lk}`);

      if (deptSumText) deptSumText.textContent = fmt(deptSum);
      if (locBudgetText) locBudgetText.textContent = fmt(locBudget);

      const bad = deptSum > locBudget + 1e-6;

      if (bad) {
        hasError = true;
        if (errBadge) errBadge.classList.remove("d-none");
        if (locAlert) locAlert.classList.remove("d-none");
      } else {
        if (errBadge) errBadge.classList.add("d-none");
        if (locAlert) locAlert.classList.add("d-none");
      }
    });

    // Top alert
    if (messages.length) {
      topAlertText.innerHTML = messages.map(m => `• ${m}`).join("<br>");
      topAlert.classList.remove("d-none");
    } else {
      topAlert.classList.add("d-none");
      topAlertText.innerHTML = "";
    }

    setInvalid(hasError);
  }

  // Bind events
  document.addEventListener("input", function(e) {
    if (
      e.target.matches("#global_budget") ||
      e.target.matches(".loc-budget-input") ||
      e.target.matches(".dept-budget-input")
    ) {
      validateAndRender();
    }
  });

  // Initial render
  validateAndRender();

  // Safety: block submit if invalid (even if button somehow enabled)
  document.getElementById("budgetsForm").addEventListener("submit", function(e) {
    validateAndRender();
    if (saveBtn.disabled) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
})();
</script>
{% endblock %}