{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-check2-square me-2"></i> Requisition Approvals
    </h4>
  </div>

  <div class="card shadow-sm">
    <div class="card-body table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Req Code</th>
            <th>Designation</th>
            <th>Department</th>
            <th>Raised By</th>
            <th>Positions</th>

            <!-- NEW -->
            <th>Level</th>
            <th>Approver</th>

            <th>Status</th>
            <th style="width: 260px;">Decision</th>
          </tr>
        </thead>

        <tbody>
        {% for appr in approvals %}
          {% set r = appr.requisition %}
          <tr>
            <td>
              <a href="{{ url_for('recruitment.requisition_view', req_id=r.id) }}">
                {{ r.code or ('REQ-' ~ r.id) }}
              </a>
            </td>

            <td>{{ r.designation.title if r.designation else '-' }}</td>
            <td>{{ r.department.name if r.department else '-' }}</td>
            <td>{{ r.raised_by.full_name if r.raised_by else '-' }}</td>
            <td>{{ r.positions or 1 }}</td>

            <!-- Level badges -->
            <td>
              {% if appr.level == "manager" %}
                <span class="badge bg-info text-dark">Manager</span>
              {% elif appr.level == "hr" %}
                <span class="badge bg-primary">HR</span>
              {% else %}
                <span class="badge bg-secondary">{{ appr.level }}</span>
              {% endif %}
            </td>

            <!-- Approver -->
            <td>
              {% if appr.approver %}
                {{ appr.approver.full_name }}
                {% if current_user.employee_id != appr.approver_id and current_user.role.name|lower in ["admin", "hr", "hr admin", "hr manager"] %}
                  <span class="badge bg-secondary ms-1">acting as</span>
                {% endif %}
              {% else %}
                -
              {% endif %}
            </td>

            <!-- Status -->
            <td>
              {% if appr.status == "pending" %}
                <span class="badge bg-warning text-dark">Pending</span>
              {% elif appr.status == "approved" %}
                <span class="badge bg-success">Approved</span>
              {% elif appr.status == "rejected" %}
                <span class="badge bg-danger">Rejected</span>
              {% else %}
                <span class="badge bg-secondary">{{ appr.status }}</span>
              {% endif %}
            </td>

            <!-- Action buttons -->
            <td>
              <form method="POST"
                    action="{{ url_for('recruitment.decide_requisition_approval', approval_id=appr.id) }}"
                    class="d-flex flex-column flex-md-row gap-2">

                {{ csrf_token() if csrf_token is defined }}
                <input type="hidden" name="approval_id" value="{{ appr.id }}">

                <input type="text"
                       name="remarks"
                       class="form-control form-control-sm"
                       placeholder="Remarks (optional)">

                <div class="btn-group btn-group-sm ms-md-2" role="group">
                  <button type="submit" name="decision" value="approve"
                          class="btn btn-success">
                    <i class="bi bi-hand-thumbs-up me-1"></i> Approve
                  </button>
                  <button type="submit" name="decision" value="reject"
                          class="btn btn-outline-danger">
                    <i class="bi bi-hand-thumbs-down me-1"></i> Reject
                  </button>
                </div>
              </form>
            </td>
          </tr>

        {% else %}
          <tr>
            <td colspan="9" class="text-center py-4 text-muted">
              <i class="bi bi-inbox me-1"></i> No pending approvals for you.
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}