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

  <div class="d-flex justify-content-between align-items-start mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-trophy me-2"></i>Policy: {{ policy.name }}
      </h4>
      <div class="text-muted small">
        ID: <b>{{ policy.id }}</b> · Period: <b>{{ policy.period_type }}</b> · Status:
        <span class="badge bg-{% if policy.status=='active' %}success{% elif policy.status=='closed' %}secondary{% else %}warning text-dark{% endif %}">
          {{ policy.status }}
        </span>
        · Modes:
        {% if policy.allow_bank %}<span class="badge bg-info text-dark">Bank</span>{% endif %}
        {% if policy.allow_cash %}<span class="badge bg-dark">Cash</span>{% endif %}
      </div>
      {% if policy.description %}
        <div class="text-muted mt-2">{{ policy.description }}</div>
      {% endif %}
    </div>

    <div class="d-flex gap-2">
      <a href="{{ url_for('incentives.policies') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
      </a>
      <a href="{{ url_for('incentives.list_batches') }}" class="btn btn-outline-primary">
        <i class="bi bi-clipboard-check me-1"></i>Batches
      </a>
    </div>
  </div>

  <!-- Add Target -->
  <div class="card shadow-sm mb-4">
    <div class="card-header fw-bold">
      <i class="bi bi-bullseye me-2"></i>Add Target
    </div>
    <div class="card-body">
      <form method="POST" action="{{ url_for('incentives.add_target', policy_id=policy.id) }}" class="row g-3 align-items-end">

        <div class="col-md-3">
          <label class="form-label">Target Scope</label>
          <select class="form-select" name="target_scope" id="target_scope" required>
            <option value="location">Location</option>
            <option value="institute">Institute</option>
            <option value="department">Department</option>
            <option value="group">Group</option>
            <option value="individual">Individual</option>
          </select>
          <div class="form-text small">Who this target applies to.</div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Scope Ref</label>

          <!-- Department dropdown -->
          <select class="form-select d-none" name="scope_ref" id="scope_ref_dept">
            <option value="">-- Select Department --</option>
            {% for d in departments %}
              <option value="{{ d.id }}">{{ d.name }}</option>
            {% endfor %}
          </select>

          <!-- Location dropdown -->
          <select class="form-select d-none" name="scope_ref" id="scope_ref_location">
            <option value="">-- Select Location --</option>
            {% for loc in locations %}
              <option value="{{ loc }}">{{ loc }}</option>
            {% endfor %}
          </select>

          <!-- Institute dropdown -->
          <select class="form-select d-none" name="scope_ref" id="scope_ref_institute">
            <option value="">-- Select Institute --</option>
            {% for inst in institutes %}
              <option value="{{ inst }}">{{ inst }}</option>
            {% endfor %}
          </select>

          <!-- Individual dropdown (will be AJAX refreshed) -->
          <select class="form-select d-none" name="scope_ref" id="scope_ref_employee">
            <option value="">-- Select Employee --</option>
            {% for e in employees %}
              <option value="{{ e.id }}">{{ e.full_name }} ({{ e.employee_code }})</option>
            {% endfor %}
          </select>

          <!-- Group fallback textbox -->
          <input class="form-control d-none" name="scope_ref" id="scope_ref_group" placeholder="Group code/name (e.g. SALES_TEAM_A)">

          <div class="form-text small">Scope ref options change based on selected scope.</div>
        </div>

        <!-- Employee Filters (only for Individual scope) -->
        <div class="col-md-5 d-none" id="emp_filters_wrap">
          <label class="form-label">Filter Employees (optional)</label>
          <div class="row g-2">
            <div class="col-md-4">
              <select class="form-select" id="filter_department">
                <option value="">All Departments</option>
                {% for d in departments %}
                  <option value="{{ d.id }}">{{ d.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <select class="form-select" id="filter_location">
                <option value="">All Locations</option>
                {% for loc in locations %}
                  <option value="{{ loc }}">{{ loc }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <select class="form-select" id="filter_institute">
                <option value="">All Institutes</option>
                {% for inst in institutes %}
                  <option value="{{ inst }}">{{ inst }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="form-text small">
            These filters only affect the <b>Individual</b> employee dropdown.
          </div>
        </div>

        <div class="col-md-2">
          <label class="form-label">Metric Key</label>
          <input class="form-control" name="metric_key" placeholder="e.g. shipments" required>
          <div class="form-text small">Auto-normalized to lowercase.</div>
        </div>

        <div class="col-md-2">
          <label class="form-label">Target Value</label>
          <input class="form-control" name="target_value" type="number" step="0.01" required>
        </div>

        <div class="col-md-1">
          <label class="form-label">Unit</label>
          <input class="form-control" name="unit" placeholder="count">
        </div>

        <div class="col-12">
          <button class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Add Target
          </button>
        </div>

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

  <!-- Targets List -->
  <div class="card shadow-sm">
    <div class="card-header fw-bold">
      <i class="bi bi-list-check me-2"></i>Targets / Schemes / Rules
    </div>

    <div class="card-body">
      {% if not policy.targets %}
        <div class="text-muted">No targets yet. Add one above.</div>
      {% endif %}

      <div class="accordion" id="targetsAccordion">
        {% for t in policy.targets %}
        <div class="accordion-item">
          <h2 class="accordion-header" id="heading{{ t.id }}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ t.id }}">
              <div class="w-100 d-flex flex-wrap justify-content-between align-items-center">
                <div class="fw-semibold">
                  <i class="bi bi-bullseye me-2"></i>
                  Target #{{ t.id }} · {{ t.target_scope|title }}:
                  <span class="text-primary">{{ t.scope_ref }}</span>
                </div>
                <div class="text-muted small">
                  Metric: <b>{{ t.metric_key }}</b> · Value: <b>{{ t.target_value }}</b> {{ t.unit or "" }}
                </div>
              </div>
            </button>
          </h2>

          <div id="collapse{{ t.id }}" class="accordion-collapse collapse" data-bs-parent="#targetsAccordion">
            <div class="accordion-body">

              <!-- Add Scheme -->
              <div class="card border-0 shadow-sm mb-3">
                <div class="card-header fw-bold bg-light">
                  <i class="bi bi-gift me-2"></i>Add Scheme (Reward)
                </div>
                <div class="card-body">
                  <form method="POST" action="{{ url_for('incentives.add_scheme', target_id=t.id) }}" class="row g-3 align-items-end">
                    <div class="col-md-4">
                      <label class="form-label">Reward Type</label>
                      <select class="form-select" name="reward_type" required>
                        <option value="fixed_total_amount">Fixed Total Amount (Pool)</option>
                        <option value="variable_amount">Variable Amount</option>
                        <option value="slab_based">Slab Based</option>
                      </select>
                    </div>

                    <div class="col-md-4">
                      <label class="form-label">Total Amount (optional)</label>
                      <input class="form-control" name="total_amount" type="number" step="0.01" placeholder="e.g. 500000">
                      <div class="form-text small">Used for pool-based distributions (equal/workload/percentage/formula).</div>
                    </div>

                    <div class="col-md-2">
                      <label class="form-label">Currency</label>
                      <input class="form-control" name="currency" value="INR">
                    </div>

                    <div class="col-md-2">
                      <button class="btn btn-success w-100">
                        <i class="bi bi-plus-circle me-1"></i>Add Scheme
                      </button>
                    </div>
                  </form>
                </div>
              </div>

              {% if not t.schemes %}
                <div class="text-muted">No schemes added under this target.</div>
              {% endif %}

              {% for s in t.schemes %}
              <div class="card shadow-sm mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <div class="fw-bold">
                    <i class="bi bi-gift me-2"></i>Scheme #{{ s.id }}
                    <span class="text-muted small ms-2">({{ s.reward_type }})</span>
                  </div>
                  <div class="text-muted small">
                    Pool: <b>{% if s.total_amount %}₹{{ s.total_amount }}{% else %}-{% endif %}</b> · {{ s.currency }}
                  </div>
                </div>

                <div class="card-body">

                  <div class="row g-3">
                    <div class="col-lg-5">
                      <div class="fw-semibold mb-2">
                        <i class="bi bi-diagram-3 me-2"></i>Add Distribution Rule
                      </div>

                      <form method="POST" action="{{ url_for('incentives.add_rule', scheme_id=s.id) }}" class="row g-2">
                        <div class="col-12">
                          <label class="form-label">Distribution Type</label>
                          <select class="form-select" name="distribution_type" required>
                            <option value="equal">Distribute Equally (Pool)</option>
                            <option value="fixed_per_employee">Fixed Amount per Employee</option>
                            <option value="percentage">Based on Percentage (of Pool)</option>
                            <option value="slab">Slab Based (Individuals only)</option>
                            <option value="workload_based">Based on Department Workload</option>
                            <option value="custom_formula">Custom Formula</option>
                          </select>
                        </div>

                        <div class="col-12">
                          <label class="form-label">Description</label>
                          <input class="form-control" name="description" placeholder="Short description (optional)">
                        </div>

                        <div class="col-12">
                          <label class="form-label">Config JSON</label>
                          <textarea class="form-control font-monospace" name="config_json" rows="7" placeholder='{}'></textarea>
                          <div class="form-text small">
                            Keep JSON valid. Examples are shown on the right.
                          </div>
                        </div>

                        <div class="col-12">
                          <button class="btn btn-primary w-100">
                            <i class="bi bi-plus-circle me-1"></i>Save Rule
                          </button>
                        </div>
                      </form>
                    </div>

                    <div class="col-lg-7">
                      <div class="fw-semibold mb-2">
                        <i class="bi bi-code-slash me-2"></i>Config JSON Examples (Copy/Paste)
                      </div>
                      <!-- (Your examples block can remain as-is; omitted here for brevity in UI) -->
                      <div class="alert alert-light border small mb-0">
                        Use the same examples you already have (Equal / Fixed / % / Slab / Workload / Formula).
                      </div>
                    </div>
                  </div>

                  <hr class="my-3">

                  <div class="fw-semibold mb-2">
                    <i class="bi bi-check2-square me-2"></i>Existing Rules
                  </div>

                  {% if not s.distribution_rules %}
                    <div class="text-muted">No rules added yet.</div>
                  {% else %}
                    <div class="table-responsive">
                      <table class="table table-sm table-striped align-middle">
                        <thead class="table-light">
                          <tr>
                            <th>ID</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th style="width:45%">Config</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for r in s.distribution_rules %}
                          <tr>
                            <td>{{ r.id }}</td>
                            <td class="fw-semibold">{{ r.distribution_type }}</td>
                            <td class="text-muted">{{ r.description or "-" }}</td>
                            <td>
                              <pre class="bg-light p-2 rounded small mb-0">{{ (r.config_json or {}) | tojson(indent=2) }}</pre>
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  {% endif %}

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

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

    </div>
  </div>

</div>

<script>
  const scopeSel = document.getElementById("target_scope");

  const elDept = document.getElementById("scope_ref_dept");
  const elLoc  = document.getElementById("scope_ref_location");
  const elInst = document.getElementById("scope_ref_institute");
  const elEmp  = document.getElementById("scope_ref_employee");
  const elGrp  = document.getElementById("scope_ref_group");

  const empFiltersWrap = document.getElementById("emp_filters_wrap");
  const fDept = document.getElementById("filter_department");
  const fLoc  = document.getElementById("filter_location");
  const fInst = document.getElementById("filter_institute");

  function hideAllScopeInputs() {
    [elDept, elLoc, elInst, elEmp, elGrp].forEach(el => {
      el.classList.add("d-none");
      el.removeAttribute("required");
      el.disabled = true;
      if (el.tagName === "SELECT") el.value = "";
      if (el.tagName === "INPUT") el.value = "";
    });
    if (empFiltersWrap) empFiltersWrap.classList.add("d-none");
  }

  function showOne(el) {
    el.classList.remove("d-none");
    el.disabled = false;
    el.setAttribute("required", "required");
  }

  async function refreshEmployees() {
    if (!elEmp) return;

    const params = new URLSearchParams();
    if (fDept && fDept.value) params.append("department_id", fDept.value);
    if (fLoc && fLoc.value) params.append("location", fLoc.value);
    if (fInst && fInst.value) params.append("institute", fInst.value);

    elEmp.innerHTML = `<option value="">Loading...</option>`;

    try {
      const res = await fetch(`{{ url_for('incentives.ajax_employees') }}?${params.toString()}`);
      const json = await res.json();

      if (!json.ok) {
        elEmp.innerHTML = `<option value="">-- Select Employee --</option>`;
        return;
      }

      const items = json.employees || [];
      let html = `<option value="">-- Select Employee --</option>`;
      for (const e of items) {
        html += `<option value="${e.id}">${e.full_name} (${e.employee_code})</option>`;
      }
      elEmp.innerHTML = html;

      if (!items.length) {
        elEmp.innerHTML = `<option value="">No employees found for selected filters</option>`;
      }
    } catch (e) {
      elEmp.innerHTML = `<option value="">Failed to load employees</option>`;
    }
  }

  function onScopeChange() {
    hideAllScopeInputs();
    const v = scopeSel.value;

    if (v === "department") showOne(elDept);
    else if (v === "location") showOne(elLoc);
    else if (v === "institute") showOne(elInst);
    else if (v === "individual") {
      showOne(elEmp);
      if (empFiltersWrap) empFiltersWrap.classList.remove("d-none");
      refreshEmployees();
    } else {
      showOne(elGrp); // group
    }
  }

  if (scopeSel) {
    scopeSel.addEventListener("change", onScopeChange);
    onScopeChange();
  }

  // When filters change, refresh employee list (only matters for individual)
  [fDept, fLoc, fInst].forEach(el => {
    if (!el) return;
    el.addEventListener("change", () => {
      if (scopeSel.value === "individual") refreshEmployees();
    });
  });
</script>
{% endblock %}