{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h2 class="mb-4">Assign Salary Structure</h2>

  {# ---------------- Filter + Employee picker (GET) ---------------- #}
  <form method="get" class="card mb-3 shadow-sm">
    <div class="card-body">
      <div class="row g-3 align-items-end">

        {# Employee (auto-submit on change) #}
        <div class="col-md-4">
          <label for="employee_id" class="form-label">Select Employee</label>
          <select class="form-select" id="employee_id" name="employee_id"
                  onchange="this.form.submit()">
            <option value="">-- Select --</option>
            {% for emp in employees %}
              <option value="{{ emp.id }}"
                {% if selected_employee and emp.id == selected_employee.id %}selected{% endif %}>
                {{ emp.employee_code }} — {{ emp.full_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# 1. Institute (Emp Code Prefix) #}
        <div class="col-md-2">
          <label class="form-label">Institute (Code Prefix)</label>
          <select name="inst" class="form-select">
            <option value="">All</option>
            {% for p in code_prefixes %}
              <option value="{{ p }}" {% if selected_prefix == p %}selected{% endif %}>
                {{ p }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# 2. Location (Workplace) #}
        <div class="col-md-2">
          <label class="form-label">Location</label>
          <select name="location" class="form-select">
            <option value="">All</option>
            {% for loc in locations %}
              <option value="{{ loc }}" {% if selected_location == loc %}selected{% endif %}>
                {{ loc }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# 3. Department #}
        <div class="col-md-2">
          <label class="form-label">Department</label>
          <select name="department_id" class="form-select">
            <option value="">All</option>
            {% for d in departments %}
              <option value="{{ d.id }}"
                      {% if dept_id == d.id %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# 4. Designation #}
        <div class="col-md-2">
          <label class="form-label">Designation</label>
          <select name="designation_id" class="form-select">
            <option value="">All</option>
            {% for des in designations %}
              <option value="{{ des.id }}"
                      {% if desig_id == des.id %}selected{% endif %}>
                {{ des.title }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 d-flex justify-content-end gap-2 mt-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-funnel me-1"></i> Apply Filters
          </button>
          <a href="{{ url_for('payroll.salary_structure') }}"
             class="btn btn-outline-secondary btn-sm">
            Clear
          </a>
        </div>
      </div>
    </div>
  </form>

  {# ---------------- Gross + auto-calculation ---------------- #}
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="gross" class="form-label">Gross Salary</label>
      <div class="input-group">
        <input type="number" step="0.01" class="form-control" id="gross" name="gross"
               placeholder="Enter Gross Salary">
        <button type="button" class="btn btn-primary" onclick="calculateSalary()">
          Calculate
        </button>
      </div>

      <div class="d-flex align-items-center gap-2 mt-2">
        <input type="checkbox" id="overwriteCalc" class="form-check-input" checked>
        <label for="overwriteCalc" class="form-check-label">
          Overwrite existing values
        </label>
      </div>

      <div class="form-text">
        Enter gross and click <strong>Calculate</strong> to auto-fill components using formulas.
      </div>
    </div>
  </div>

  {% if selected_employee %}
  <form method="post" novalidate>
    {{ csrf_token() if csrf_token is defined }}
    <input type="hidden" name="employee_id" value="{{ selected_employee.id }}">

    {# ---------- Payroll Remarks (for this employee's salary) ---------- #}
    <div class="card mb-4">
      <div class="card-header bg-light">
        <strong>Payroll Remarks</strong>
        <small class="text-muted d-block">
          Internal notes about this employee's salary structure (visible only to HR/Admin).
        </small>
      </div>
      <div class="card-body">
        <textarea name="payroll_remarks"
                  class="form-control"
                  rows="3"
                  placeholder="Eg: Revised salary w.e.f. Nov 2025, project allowance added, PF capped, etc.">{{ selected_employee.payroll_remarks or '' }}</textarea>
      </div>
    </div>

    <!-- Earnings -->
    <div class="card mb-4">
      <div class="card-header bg-success text-white">Earnings</div>
      <div class="card-body">
        <div class="row">
          {% for head in earning_heads %}
          <div class="col-md-4 mb-3">
            <label class="form-label">{{ head.name }}</label>
            <input type="number" step="0.01" class="form-control"
                   name="earning_{{ head.id }}"
                   id="{{ head.name | dom_id }}"
                   value="{{ saved_data['earning'][head.id] if saved_data['earning'].get(head.id) is not none else '' }}">
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Deductions -->
    <div class="card mb-4">
      <div class="card-header bg-danger text-white">Deductions</div>
      <div class="card-body">
        <div class="row">
          {% for head in deduction_heads %}
          <div class="col-md-4 mb-3">
            <label class="form-label">{{ head.name }}</label>
            <input type="number" step="0.01" class="form-control"
                   name="deduction_{{ head.id }}"
                   id="{{ head.name | dom_id }}"
                   value="{{ saved_data['deduction'][head.id] if saved_data['deduction'].get(head.id) is not none else '' }}">
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- CTC -->
    <div class="card mb-4">
      <div class="card-header bg-info text-white">CTC Components</div>
      <div class="card-body">
        <div class="row">
          {% for head in ctc_heads %}
          <div class="col-md-4 mb-3">
            <label class="form-label">{{ head.name }}</label>
            <input type="number" step="0.01" class="form-control"
                   name="ctc_{{ head.id }}"
                   id="{{ head.name | dom_id }}"
                   value="{{ saved_data['ctc'][head.id] if saved_data['ctc'].get(head.id) is not none else '' }}">
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="text-center mb-5">
      <button type="submit" name="action" value="save" class="btn btn-success">
        Save Salary Structure
      </button>
    </div>
  </form>
  {% else %}
    <div class="alert alert-info">
      Please select an employee to assign salary structure.
    </div>
  {% endif %}
</div>

<script>
async function calculateSalary() {
  const grossEl = document.getElementById('gross');
  if (!grossEl || !grossEl.value) {
    alert('Please enter Gross Salary first.');
    return;
  }

  const gross = parseFloat(grossEl.value);
  const overwrite = document.getElementById('overwriteCalc')?.checked ?? true;

  try {
    const res = await fetch('{{ url_for("payroll.calculate_salary") }}', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ gross })
    });

    const data = await res.json();
    if (!data.success) {
      alert(data.message || 'Calculation failed.');
      return;
    }

    // ✅ Fill inputs by element id
    // - If overwrite is ON: always replace current values
    // - If overwrite is OFF: only fill blank inputs
    Object.entries(data.data).forEach(([id, val]) => {
      const el = document.getElementById(id);
      if (!el) return;

      const newVal = Number(val || 0).toFixed(2);

      if (overwrite) {
        el.value = newVal;
      } else {
        if ((el.value || '').trim() === '') {
          el.value = newVal;
        }
      }
    });

  } catch (err) {
    console.error(err);
    alert('Error occurred during calculation.');
  }
}
</script>
{% endblock %}