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

  <!-- Change employee via GET so it never saves -->
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="employee_id" class="form-label">Select Employee</label>
      <select class="form-select" id="employee_id"
              onchange="window.location='{{ url_for('payroll.salary_structure') }}?employee_id='+this.value;">
        <option value="">-- Select --</option>
        {% for emp in employees %}
          <option value="{{ emp.id }}"
            {% if selected_employee and emp.id == selected_employee.id %}selected{% endif %}>
            {{ emp.full_name }}
          </option>
        {% endfor %}
      </select>
    </div>

    <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>
  </div>

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

    <!-- 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>
            <!-- id uses normalized name; JS calculate fills by id -->
            <input type="number" step="0.01" class="form-control"
                   name="earning_{{ head.id }}"
                   id="{{ head.name | lower | replace(' ', '_') | replace('-', '_') }}"
                   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 | lower | replace(' ', '_') | replace('-', '_') }}"
                   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 | lower | replace(' ', '_') | replace('-', '_') }}"
                   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">
      <button type="submit" name="action" value="save" class="btn btn-success">
        Save Salary Structure
      </button>
    </div>
  </form>
  {% 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);
  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
    Object.entries(data.data).forEach(([id, val]) => {
      const el = document.getElementById(id);
      if (el) el.value = Number(val).toFixed(2);
    });
  } catch (err) {
    console.error(err);
    alert('Error occurred during calculation.');
  }
}
</script>
{% endblock %}