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

  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h3 class="mb-0">
        <i class="bi bi-gear-fill me-2"></i>Manage Salary Components
      </h3>
      <div class="text-muted small">Add, rename or remove earning, deduction and CTC heads.</div>
    </div>
  </div>

  <ul class="nav nav-tabs" id="compTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="earnings-tab" data-bs-toggle="tab" data-bs-target="#earnings" type="button" role="tab" aria-controls="earnings" aria-selected="true">
        <i class="bi bi-cash-stack me-1"></i>Earnings
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="deductions-tab" data-bs-toggle="tab" data-bs-target="#deductions" type="button" role="tab" aria-controls="deductions" aria-selected="false">
        <i class="bi bi-dash-circle me-1"></i>Deductions
      </button>
    </li>
    {% if ctc_heads is not none %}
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="ctc-tab" data-bs-toggle="tab" data-bs-target="#ctc" type="button" role="tab" aria-controls="ctc" aria-selected="false">
        <i class="bi bi-diagram-3 me-1"></i>CTC
      </button>
    </li>
    {% endif %}
  </ul>

  <div class="tab-content border-start border-end border-bottom p-3 rounded-bottom" id="compTabsContent">

    <!-- EARNINGS -->
    <div class="tab-pane fade show active" id="earnings" role="tabpanel" aria-labelledby="earnings-tab">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <h6 class="card-title mb-3 text-primary">
            <i class="bi bi-plus-circle me-1"></i>Add Earning Component
          </h6>
          <form method="POST" class="row g-2 align-items-end">
            <input type="hidden" name="head_type" value="earning">
            <div class="col-md-4">
              <label class="form-label small text-muted">Name</label>
              <input name="name" class="form-control" placeholder="e.g., Basic" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small text-muted">Description (optional)</label>
              <input name="description" class="form-control" placeholder="Short description">
            </div>
            <div class="col-md-2 d-grid">
              <button class="btn btn-success"><i class="bi bi-check2 me-1"></i>Add</button>
            </div>
          </form>
        </div>
      </div>

      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <h6 class="card-title mb-0">Existing Earnings</h6>
            <span class="badge bg-light text-dark ms-2">{{ earning_heads|length }} items</span>
          </div>

          {% if earning_heads %}
          <div class="table-responsive">
            <table class="table align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width: 24%">Name</th>
                  <th style="width: 40%">Description</th>
                  <th style="width: 18%">Used by</th>
                  <th style="width: 18%" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for head in earning_heads %}
                {% set used_struct = e_struct.get(head.id, 0) %}
                {% set used_form   = e_form.get(head.id, 0) %}
                {% set used_frozen = e_frozen.get(head.id, 0) %}
                {% set used_total  = used_struct + used_form + used_frozen %}
                <tr>
                  <td>
                    <form action="{{ url_for('payroll.edit_component', head_type='earning', head_id=head.id) }}" method="post" class="row g-2 align-items-center">
                      <div class="col-12">
                        <input type="text" name="name" value="{{ head.name }}" class="form-control form-control-sm" required>
                      </div>
                  </td>
                  <td>
                      <input type="text" name="description" value="{{ head.description or '' }}" class="form-control form-control-sm" placeholder="Description">
                  </td>
                  <td>
                    <div class="d-flex flex-wrap gap-1">
                      <span class="badge rounded-pill bg-secondary" title="Employee Salary Structures">{{ used_struct }} Struct</span>
                      <span class="badge rounded-pill bg-info text-dark" title="Salary Formulas">{{ used_form }} Formula</span>
                      <span class="badge rounded-pill bg-warning text-dark" title="Frozen Payroll Components">{{ used_frozen }} Frozen</span>
                    </div>
                  </td>
                  <td class="text-end">
                      <div class="btn-group">
                        <button class="btn btn-sm btn-primary">
                          <i class="bi bi-save me-1"></i>Save
                        </button>
                        </form>

                        <form action="{{ url_for('payroll.delete_component', head_type='earning', head_id=head.id) }}" method="post"
                              {% if used_total == 0 %}onsubmit="return confirm('Delete {{ head.name|e }}? This cannot be undone.');"{% endif %}>
                          <button class="btn btn-sm btn-outline-danger"
                                  {% if used_total>0 %}disabled data-bs-toggle="tooltip" data-bs-title="Cannot delete: used in {{ used_total }} place(s)"{% endif %}>
                            <i class="bi bi-trash me-1"></i>Delete
                          </button>
                        </form>
                      </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
            <div class="alert alert-info mb-0">
              No earning components yet. Use the form above to add one.
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- DEDUCTIONS -->
    <div class="tab-pane fade" id="deductions" role="tabpanel" aria-labelledby="deductions-tab">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <h6 class="card-title mb-3 text-danger">
            <i class="bi bi-plus-circle me-1"></i>Add Deduction Component
          </h6>
          <form method="POST" class="row g-2 align-items-end">
            <input type="hidden" name="head_type" value="deduction">
            <div class="col-md-4">
              <label class="form-label small text-muted">Name</label>
              <input name="name" class="form-control" placeholder="e.g., Provident Fund" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small text-muted">Description (optional)</label>
              <input name="description" class="form-control" placeholder="Short description">
            </div>
            <div class="col-md-2 d-grid">
              <button class="btn btn-success"><i class="bi bi-check2 me-1"></i>Add</button>
            </div>
          </form>
        </div>
      </div>

      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <h6 class="card-title mb-0">Existing Deductions</h6>
            <span class="badge bg-light text-dark ms-2">{{ deduction_heads|length }} items</span>
          </div>

          {% if deduction_heads %}
          <div class="table-responsive">
            <table class="table align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width: 24%">Name</th>
                  <th style="width: 40%">Description</th>
                  <th style="width: 18%">Used by</th>
                  <th style="width: 18%" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for head in deduction_heads %}
                {% set used_struct = d_struct.get(head.id, 0) %}
                {% set used_form   = d_form.get(head.id, 0) %}
                {% set used_frozen = d_frozen.get(head.id, 0) %}
                {% set used_total  = used_struct + used_form + used_frozen %}
                <tr>
                  <td>
                    <form action="{{ url_for('payroll.edit_component', head_type='deduction', head_id=head.id) }}" method="post" class="row g-2 align-items-center">
                      <div class="col-12">
                        <input type="text" name="name" value="{{ head.name }}" class="form-control form-control-sm" required>
                      </div>
                  </td>
                  <td>
                      <input type="text" name="description" value="{{ head.description or '' }}" class="form-control form-control-sm" placeholder="Description">
                  </td>
                  <td>
                    <div class="d-flex flex-wrap gap-1">
                      <span class="badge rounded-pill bg-secondary" title="Employee Salary Structures">{{ used_struct }} Struct</span>
                      <span class="badge rounded-pill bg-info text-dark" title="Salary Formulas">{{ used_form }} Formula</span>
                      <span class="badge rounded-pill bg-warning text-dark" title="Frozen Payroll Components">{{ used_frozen }} Frozen</span>
                    </div>
                  </td>
                  <td class="text-end">
                      <div class="btn-group">
                        <button class="btn btn-sm btn-primary">
                          <i class="bi bi-save me-1"></i>Save
                        </button>
                        </form>

                        <form action="{{ url_for('payroll.delete_component', head_type='deduction', head_id=head.id) }}" method="post"
                              {% if used_total == 0 %}onsubmit="return confirm('Delete {{ head.name|e }}? This cannot be undone.');"{% endif %}>
                          <button class="btn btn-sm btn-outline-danger"
                                  {% if used_total>0 %}disabled data-bs-toggle="tooltip" data-bs-title="Cannot delete: used in {{ used_total }} place(s)"{% endif %}>
                            <i class="bi bi-trash me-1"></i>Delete
                          </button>
                        </form>
                      </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
            <div class="alert alert-info mb-0">
              No deduction components yet. Use the form above to add one.
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    {% if ctc_heads is not none %}
    <!-- CTC -->
    <div class="tab-pane fade" id="ctc" role="tabpanel" aria-labelledby="ctc-tab">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <h6 class="card-title mb-3 text-warning">
            <i class="bi bi-plus-circle me-1"></i>Add CTC Component
          </h6>
          <form method="POST" class="row g-2 align-items-end">
            <input type="hidden" name="head_type" value="ctc">
            <div class="col-md-4">
              <label class="form-label small text-muted">Name</label>
              <input name="name" class="form-control" placeholder="e.g., Employer PF Contribution" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small text-muted">Description (optional)</label>
              <input name="description" class="form-control" placeholder="Short description">
            </div>
            <div class="col-md-2 d-grid">
              <button class="btn btn-success"><i class="bi bi-check2 me-1"></i>Add</button>
            </div>
          </form>
        </div>
      </div>

      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <h6 class="card-title mb-0">Existing CTC Components</h6>
            <span class="badge bg-light text-dark ms-2">{{ ctc_heads|length }} items</span>
          </div>

          {% if ctc_heads %}
          <div class="table-responsive">
            <table class="table align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width: 24%">Name</th>
                  <th style="width: 40%">Description</th>
                  <th style="width: 18%">Used by</th>
                  <th style="width: 18%" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for head in ctc_heads %}
                {% set used_struct = c_struct.get(head.id, 0) %}
                {% set used_form   = c_form.get(head.id, 0) %}
                {% set used_frozen = c_frozen.get(head.id, 0) %}
                {% set used_total  = used_struct + used_form + used_frozen %}
                <tr>
                  <td>
                    <form action="{{ url_for('payroll.edit_component', head_type='ctc', head_id=head.id) }}" method="post" class="row g-2 align-items-center">
                      <div class="col-12">
                        <input type="text" name="name" value="{{ head.name }}" class="form-control form-control-sm" required>
                      </div>
                  </td>
                  <td>
                      <input type="text" name="description" value="{{ head.description or '' }}" class="form-control form-control-sm" placeholder="Description">
                  </td>
                  <td>
                    <div class="d-flex flex-wrap gap-1">
                      <span class="badge rounded-pill bg-secondary" title="Employee Salary Structures">{{ used_struct }} Struct</span>
                      <span class="badge rounded-pill bg-info text-dark" title="Salary Formulas">{{ used_form }} Formula</span>
                      <span class="badge rounded-pill bg-warning text-dark" title="Frozen Payroll Components">{{ used_frozen }} Frozen</span>
                    </div>
                  </td>
                  <td class="text-end">
                      <div class="btn-group">
                        <button class="btn btn-sm btn-primary">
                          <i class="bi bi-save me-1"></i>Save
                        </button>
                        </form>

                        <form action="{{ url_for('payroll.delete_component', head_type='ctc', head_id=head.id) }}" method="post"
                              {% if used_total == 0 %}onsubmit="return confirm('Delete {{ head.name|e }}? This cannot be undone.');"{% endif %}>
                          <button class="btn btn-sm btn-outline-danger"
                                  {% if used_total>0 %}disabled data-bs-toggle="tooltip" data-bs-title="Cannot delete: used in {{ used_total }} place(s)"{% endif %}>
                            <i class="bi bi-trash me-1"></i>Delete
                          </button>
                        </form>
                      </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
            <div class="alert alert-info mb-0">
              No CTC components yet. Use the form above to add one.
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <div class="alert alert-secondary mt-3 mb-0 small">
    <i class="bi bi-shield-lock me-1"></i>
    <strong>Delete safety:</strong> Deletion is blocked if the component is used in any salary structure, formula, or frozen payroll.
    Renaming is allowed; historical frozen slips keep the original head name.
  </div>
</div>

<script>
  // Enable Bootstrap tooltips for disabled delete buttons
  document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.forEach(function (el) { new bootstrap.Tooltip(el) })
  });
</script>
{% endblock %}