{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
  <h3 class="mb-3">{{ employee.full_name }} ({{ employee.employee_code }}) - Salary Details</h3>

  <div class="card mb-4">
    <div class="card-body">
      <h5 class="mb-3">Summary</h5>
      <div class="row">
        <div class="col-md-6">
          <p class="mb-1"><strong>Gross Earnings:</strong> ₹{{ "%.2f"|format(gross or 0) }}</p>
          <p class="mb-1"><strong>Total Deductions:</strong> ₹{{ "%.2f"|format(total_deductions or 0) }}</p>
          <p class="mb-1"><strong>Net Pay:</strong> ₹{{ "%.2f"|format(net_pay or 0) }}</p>
          <p class="mb-0"><strong>CTC:</strong> ₹{{ "%.2f"|format(ctc or 0) }}</p>
        </div>
        <div class="col-md-6 text-md-end mt-3 mt-md-0">
          <a href="{{ url_for('payroll.salary_structure', employee_id=employee.id) }}" class="btn btn-warning">
            <i class="bi bi-pencil-square"></i> Edit Salary Structure
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- ✅ Payroll Remarks Section -->
  <div class="card mb-4">
    <div class="card-header bg-light">
      <strong>Payroll Remarks</strong>
      <small class="text-muted d-block">Visible only to HR/Admin</small>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ url_for('payroll.update_payroll_remarks', employee_id=employee.id) }}">
        {{ csrf_token() if csrf_token is defined }}

        <textarea name="payroll_remarks"
                  class="form-control"
                  rows="3"
                  placeholder="Add payroll remark...">{{ employee.payroll_remarks or '' }}</textarea>

        <button type="submit" class="btn btn-primary btn-sm mt-2">
          <i class="bi bi-save"></i> Save Remarks
        </button>
      </form>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header bg-success text-white">
      <strong>Earnings</strong>
    </div>
    <div class="card-body p-0">
      <table class="table table-bordered mb-0">
        <thead>
          <tr><th>Component</th><th style="width:220px;">Amount (₹)</th></tr>
        </thead>
        <tbody>
          {% for e in earnings %}
            <tr>
              <td>{{ e.name }}</td>
              <td>₹{{ "%.2f"|format(e.amount or 0) }}</td>
            </tr>
          {% endfor %}
          {% if earnings|length == 0 %}
            <tr><td colspan="2" class="text-muted text-center py-3">No earnings components found.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header bg-danger text-white">
      <strong>Deductions</strong>
    </div>
    <div class="card-body p-0">
      <table class="table table-bordered mb-0">
        <thead>
          <tr><th>Component</th><th style="width:220px;">Amount (₹)</th></tr>
        </thead>
        <tbody>
          {% for d in deductions %}
            <tr>
              <td>{{ d.name }}</td>
              <td>₹{{ "%.2f"|format(d.amount or 0) }}</td>
            </tr>
          {% endfor %}
          {% if deductions|length == 0 %}
            <tr><td colspan="2" class="text-muted text-center py-3">No deductions components found.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}