{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1000px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-percent me-2"></i>Score Rules Master</h4>
  </div>

  <!-- Add Rule -->
  <form class="card shadow-sm mb-4" method="post">
    <div class="card-header bg-light"><strong>Add Rule</strong></div>
    <div class="card-body row g-3">
      <div class="col-md-3">
        <label class="form-label">Min Score %</label>
        <input type="number" step="0.01" class="form-control" name="min_score_pct" required>
      </div>
      <div class="col-md-3">
        <label class="form-label">Max Score %</label>
        <input type="number" step="0.01" class="form-control" name="max_score_pct" required>
      </div>
      <div class="col-md-4">
        <label class="form-label">Recommended Increment %</label>
        <input type="number" step="0.01" class="form-control" name="recommended_increment_pct" required>
      </div>
      <div class="col-md-2 d-grid">
        <label class="form-label">&nbsp;</label>
        <button class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>Add</button>
      </div>
    </div>
    <div class="card-footer text-muted small">
      Ensure ranges don’t overlap. Example: 80–89.99, 90–100.
    </div>
  </form>

  <!-- List -->
  <div class="card shadow-sm">
    <div class="card-header bg-light"><strong>Rules</strong></div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0 align-middle">
        <thead>
          <tr>
            <th style="width: 140px;">Min %</th>
            <th style="width: 140px;">Max %</th>
            <th>Recommended Increment %</th>
            <th style="width: 110px;">Active</th>
            <th style="width: 180px;" class="text-end">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rules %}
          <tr>
            <td>{{ r.min_score_pct }}</td>
            <td>{{ r.max_score_pct }}</td>
            <td><strong>{{ r.recommended_increment_pct }}</strong></td>
            <td>
              {% if r.is_active %}
                <span class="badge bg-success">Yes</span>
              {% else %}
                <span class="badge bg-secondary">No</span>
              {% endif %}
            </td>
            <td class="text-end">
              <!-- Edit -->
              <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editR{{ r.id }}">
                <i class="bi bi-pencil"></i>
              </button>

              <!-- Toggle -->
              <form class="d-inline" method="post" action="{{ url_for('appraisal.toggle_score_rule', rid=r.id) }}">
                <button class="btn btn-sm btn-outline-secondary" title="Enable/Disable">
                  <i class="bi bi-power"></i>
                </button>
              </form>

              <!-- Delete -->
              <form class="d-inline" method="post" action="{{ url_for('appraisal.delete_score_rule', rid=r.id) }}"
                    onsubmit="return confirm('Delete this rule? This cannot be undone.');">
                <button class="btn btn-sm btn-outline-danger" title="Delete">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </td>
          </tr>

          <!-- Edit Modal -->
          <div class="modal fade" id="editR{{ r.id }}" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <form method="post" action="{{ url_for('appraisal.edit_score_rule', rid=r.id) }}">
                  <div class="modal-header">
                    <h5 class="modal-title">Edit Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>

                  <div class="modal-body row g-3">
                    <div class="col-6">
                      <label class="form-label">Min %</label>
                      <input type="number" step="0.01" class="form-control" name="min_score_pct" value="{{ r.min_score_pct }}" required>
                    </div>
                    <div class="col-6">
                      <label class="form-label">Max %</label>
                      <input type="number" step="0.01" class="form-control" name="max_score_pct" value="{{ r.max_score_pct }}" required>
                    </div>
                    <div class="col-12">
                      <label class="form-label">Recommended Increment %</label>
                      <input type="number" step="0.01" class="form-control" name="recommended_increment_pct" value="{{ r.recommended_increment_pct }}" required>
                    </div>
                  </div>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary"><i class="bi bi-check2 me-1"></i>Save</button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          {% else %}
          <tr><td colspan="5" class="text-muted p-3">No rules added yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}