{# templates/payroll/salary_edit.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Edit Salary – Invoice #{{ salary.invoice_no }}{% endblock %}
{% block heading %}Edit Salary Record #{{ salary.invoice_no }}{% endblock %}
{% block content %}
<div class="container py-4">
  <form method="post" action="{% url 'payroll:salary_edit' salary.pk %}" id="salaryEditForm">
    {% csrf_token %}
    <input type="hidden" name="pk" value="{{ salary.pk }}"/>

    <!-- Staff Name (read‐only) -->
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">Staff</label>
      <div class="col-sm-6">
        <input
          type="text"
          class="form-control"
          value="{{ salary.staff.name }}"
          readonly
        >
      </div>
    </div>

    <!-- Period (read‐only) -->
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">Period</label>
      <div class="col-sm-4">
        <input
          type="text"
          class="form-control"
          value="{{ salary.start_date }} – {{ salary.end_date }}"
          readonly
        >
      </div>
    </div>

    <!-- Attendance Days (read‐only) and Attendance Amount (read‐only) -->
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">Attendance Days</label>
      <div class="col-sm-2">
        <input
          type="number"
          class="form-control"
          value="{{ salary.attendance_days }}"
          readonly
        >
      </div>
      <label class="col-sm-2 col-form-label">Attendance Pay</label>
      <div class="col-sm-2">
        <input
          type="text"
          class="form-control"
          value="{{ salary.attendance_amount|floatformat:2 }}"
          readonly
        >
      </div>
    </div>

    <hr>

    <!-- Commission Amount -->
    <div class="mb-3 row">
      <label for="commission_amount" class="col-sm-2 col-form-label">Commission</label>
      <div class="col-sm-3">
        <input
          type="number"
          step="0.01"
          class="form-control"
          id="commission_amount"
          name="commission_amount"
          value="{{ salary.commission_amount|floatformat:2 }}"
          required
        >
      </div>
    </div>

    <!-- Overtime Amount -->
    <div class="mb-3 row">
      <label for="overtime_amount" class="col-sm-2 col-form-label">Overtime</label>
      <div class="col-sm-3">
        <input
          type="number"
          step="0.01"
          class="form-control"
          id="overtime_amount"
          name="overtime_amount"
          value="{{ salary.overtime_amount|floatformat:2 }}"
          required
        >
      </div>
    </div>

    <!-- Bonus Amount -->
    <div class="mb-3 row">
      <label for="bonus_amount" class="col-sm-2 col-form-label">Bonus</label>
      <div class="col-sm-3">
        <input
          type="number"
          step="0.01"
          class="form-control"
          id="bonus_amount"
          name="bonus_amount"
          value="{{ salary.bonus_amount|floatformat:2 }}"
          required
        >
      </div>
    </div>

    <!-- Deduction Amount -->
    <div class="mb-3 row">
      <label for="deduction_amount" class="col-sm-2 col-form-label">Deduction</label>
      <div class="col-sm-3">
        <input
          type="number"
          step="0.01"
          class="form-control"
          id="deduction_amount"
          name="deduction_amount"
          value="{{ salary.deduction_amount|floatformat:2 }}"
          required
        >
      </div>
    </div>

    <!-- Net Amount (read‐only) -->
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">Net Salary</label>
      <div class="col-sm-3">
        <input
          type="text"
          class="form-control"
          id="net_amount"
          name="net_amount"
          value="{{ salary.net_amount|floatformat:2 }}"
          readonly
        >
      </div>
    </div>

    <!-- Save / Cancel -->
    <div class="mb-3 row">
      <div class="col-sm-8 text-start">
        <button type="submit" class="btn btn-primary">Save Changes</button>
        <a href="{% url 'payroll:salary_list' %}" class="btn btn-secondary">Cancel</a>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // If you want to auto‐recalculate “Net Salary” as the user edits Commission/Overtime/Bonus/Deduction,
  // you can hook up a simple listener. But since “Attendance Pay” is read‐only here, we recalc as:
  //   net = attendance_amount + commission + overtime + bonus - deduction
  document.addEventListener('DOMContentLoaded', function() {
    function recalcNet() {
      const att_amt = parseFloat("{{ salary.attendance_amount }}") || 0;
      const com_amt = parseFloat(document.getElementById('commission_amount').value) || 0;
      const ovt_amt = parseFloat(document.getElementById('overtime_amount').value)   || 0;
      const bon_amt = parseFloat(document.getElementById('bonus_amount').value)      || 0;
      const ded_amt = parseFloat(document.getElementById('deduction_amount').value)  || 0;
      const net = att_amt + com_amt + ovt_amt + bon_amt - ded_amt;
      document.getElementById('net_amount').value = net.toFixed(2);
    }

    document.getElementById('commission_amount').addEventListener('input', recalcNet);
    document.getElementById('overtime_amount').addEventListener('input', recalcNet);
    document.getElementById('bonus_amount').addEventListener('input', recalcNet);
    document.getElementById('deduction_amount').addEventListener('input', recalcNet);
  });
</script>
{% endblock %}