{% extends "../base.html" %}
{% load crispy_forms_tags %}

{% block page_title %}Grading System{% endblock page_title %}
{% block content %}
<div class="clearfix"></div>

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel grading-panel">
            <div class="x_title grading-title">
                <h2><i class="fa fa-graduation-cap"></i> Grading System</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="grading-hero">
                    <div class="hero-text">
                        <h3>Grade boundaries</h3>
                        <p class="text-muted">Maintain a consistent grading scale across assessments and reports.</p>
                    </div>
                    <div class="hero-actions">
                        {% if can_manage_grading %}
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#grading_system_modal">
                            <i class="fa fa-plus-circle"></i> Add New Grading
                        </button>
                        {% else %}
                        <span class="badge badge-warning">*******</span>
                        {% endif %}
                    </div>
                </div>

                <div class="row" style="margin-bottom:12px;">
                    <div class="col-md-6">
                        {% if can_manage_grading %}
                        <p class="text-muted">You can add, edit, or delete grading bands below.</p>
                        {% else %}
                        <p class="text-muted">Only Admin or Director of Studies can add grading systems.</p>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search grading systems..." id="gradingSearch">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>

                {% if grading_systems %}
                    <div class="table-responsive grading-table">
                        <table class="table table-striped table-hover" id="gradingTable" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width: 5%">#</th>
                                    <th>Min Score</th>
                                    <th>Max Score</th>
                                    <th>Grade</th>
                                    <th>Points</th>
                                    {% if can_manage_grading %}
                                    <th style="width: 15%">Actions</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for grading_system in grading_systems %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ grading_system.min_score }}</td>
                                    <td>{{ grading_system.max_score }}</td>
                                    <td><strong>{{ grading_system.grade }}</strong></td>
                                    <td>{{ grading_system.points }}</td>
                                    {% if can_manage_grading %}
                                    <td>
                                        <a href="{% url 'edit_grading_system' grading_system.id %}" class="btn btn-info btn-sm" title="Edit Grading">
                                            <i class="fa fa-edit"></i> 
                                        </a>
                                        <a href="{% url 'delete_grading_system' grading_system.id %}" class="btn btn-danger btn-sm" title="Delete Grading" onclick="return confirm('Are you sure you want to delete this grading system?')">
                                            <i class="fa fa-trash"></i> 
                                        </a>
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center">
                        <div class="alert alert-info" role="alert">
                            <i class="fa fa-info-circle fa-2x"></i>
                            <h4>No Grading Systems Available</h4>
                            <p>{% if can_manage_grading %}Get started by adding grading systems using the button above.{% else %}No grading systems have been configured yet.{% endif %}</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% if can_manage_grading %}
<div class="modal fade" id="grading_system_modal" tabindex="-1" role="dialog" aria-labelledby="gradingSystemLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gradingSystemLabel"><i class="fa fa-plus-circle"></i> Add New Grading System</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post">
                {% csrf_token %}
                <div class="modal-body">
                    {{ grading_form|crispy }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Add Grading
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script>
    $(document).ready(function() {
        // Simple search functionality
        $('#gradingSearch').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $('#gradingTable tbody tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });
</script>

<style>
  .grading-panel {
    border: 1px solid #eef1f4;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(18, 38, 63, 0.06);
  }

  .grading-title h2 {
    font-weight: 600;
  }

  .grading-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
  }

  .grading-hero h3 {
    margin: 0 0 4px;
    font-size: 18px;
  }

  .grading-hero .hero-actions {
    display: flex;
    align-items: center;
  }

  .grading-table table thead th {
    background: #f6f8fb;
    color: #2c3e50;
    font-weight: 600;
  }

  .grading-table table tbody td {
    vertical-align: middle;
  }

  .grading-table table tbody tr {
    border-bottom: 1px solid #eef1f4;
  }

  .grading-table table tbody tr:last-child {
    border-bottom: none;
  }

  .grading-table table tbody tr:hover {
    background: #f9fbfd;
  }

  @media (max-width: 768px) {
    .grading-hero {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
</style>
{% endblock content %}