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

{% block page_title %}Classes{% endblock page_title %}
{% block content %}

<div class="row">
    <div class="col-md-12 col-sm-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Classes Management <small>Manage all academic classes</small></h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Export to Excel</a>
                            <a class="dropdown-item" href="#">Print List</a>
                        </div>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <!-- Action Bar -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        {% if can_manage_classes %}
                        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target=".bs-example-modal-lg">
                            <i class="fa fa-plus"></i> Add New Class
                        </button>
                        {% endif %}
                        {% if classes %}
                        <span class="pull-right">
                            <span class="badge badge-primary" style="font-size: 14px; padding: 8px 12px;">
                                Total: {{ classes|length }} class{{ classes|length|pluralize:"es" }}
                            </span>
                        </span>
                        {% endif %}
                    </div>
                </div>

                {% if classes %}
                <!-- Classes Table -->
                <div class="table-responsive">
                    <table id="datatable-checkbox" class="table table-striped table-bordered jambo_table bulk_action" style="width:100%">
                        <thead>
                            <tr class="headings">
                                <th class="column-title" style="width: 8%;">ID</th>
                                <th class="column-title" style="width: 20%;">Class Code</th>
                                <th class="column-title" style="width: 30%;">Class Name</th>
                                <th class="column-title" style="width: 20%;">Section</th>
                                {% if can_manage_classes %}
                                <th class="column-title" style="width: 22%;">Actions</th>
                                {% else %}
                                <th class="column-title" style="width: 22%;">Details</th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for class in classes %}
                            <tr class="even pointer">
                                <td class="text-center">
                                    <span class="badge badge-info">{{ class.id }}</span>
                                </td>
                                <td>
                                    <strong style="color: #73879C;">{{ class.code }}</strong>
                                </td>
                                <td>
                                    <span style="font-weight: 500;">{{ class.name }}</span>
                                </td>
                                <td>
                                    {% if class.section %}
                                    <span class="badge badge-primary">
                                        <i class="fa fa-tag"></i> {{ class.section }}
                                    </span>
                                    {% else %}
                                    <span class="text-muted">N/A</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if can_manage_classes %}
                                    <a href="{% url 'edit_class' class.id %}" 
                                       class="btn btn-info btn-xs" 
                                       title="Edit Class">
                                        <i class="fa fa-pencil"></i> 
                                    </a>
                                    <a href="{% url 'delete_class' class.id %}" 
                                       class="btn btn-danger btn-xs" 
                                       onclick="return confirm('Are you sure you want to delete this class? This action cannot be undone.')"
                                       title="Delete Class">
                                        <i class="fa fa-trash-o"></i> 
                                    </a>
                                    {% else %}
                                    <a href="{% url 'academic_class_page' %}?class_id={{ class.id }}" 
                                       class="btn btn-primary btn-xs" 
                                       title="View Class Details">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <!-- Empty State -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info text-center" style="padding: 40px; margin-top: 20px;">
                            <i class="fa fa-info-circle" style="font-size: 48px; margin-bottom: 15px;"></i>
                            <h4>No Classes Available</h4>
                            <p>Get started by adding your first class to the system.</p>
                            {% if can_manage_classes %}
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">
                                <i class="fa fa-plus"></i> Add Your First Class
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Add Class Modal -->
{% if can_manage_classes %}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="addClassModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addClassModal">
                    <i class="fa fa-plus-circle"></i> Add New Class
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    {% csrf_token %}
                    {{ 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-success">
                        <i class="fa fa-save"></i> Save Class
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<style>
    /* Subtle enhancements for Gentelella theme */
    .x_panel {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .x_title h2 small {
        color: #73879C;
        font-size: 14px;
    }
    
    .table.jambo_table tbody tr:hover {
        background-color: #f7f9fa;
    }
    
    .badge {
        font-weight: 500;
        padding: 5px 10px;
    }
    
    .badge-info {
        background-color: #5bc0de;
    }
    
    .badge-primary {
        background-color: #337ab7;
    }
    
    .btn-xs {
        padding: 3px 8px;
        font-size: 12px;
        margin-right: 3px;
    }
    
    .modal-header {
        background-color: #f7f7f7;
        border-bottom: 2px solid #e5e5e5;
    }
    
    .modal-header .modal-title {
        color: #73879C;
        font-weight: 600;
    }
    
    .alert-info {
        border-left: 4px solid #5bc0de;
    }
    
    /* DataTable enhancements */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #73879C !important;
        border-color: #73879C !important;
        color: white !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #5a6c7d !important;
        border-color: #5a6c7d !important;
        color: white !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 5px 10px;
    }
    
    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 5px;
    }
    
    .table thead tr.headings th {
        background-color: #f7f7f7;
        color: #73879C;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    
    @media (max-width: 768px) {
        .btn-xs {
            display: block;
            width: 100%;
            margin-bottom: 5px;
        }
    }
</style>

<script>
    $(document).ready(function() {
        // Initialize DataTable
        var table = $('#datatable-checkbox').DataTable({
            "pageLength": 10,
            "ordering": true,
            "searching": true,
            "responsive": true,
            "language": {
                "search": "Search:",
                "lengthMenu": "Show _MENU_ entries",
                "info": "Showing _START_ to _END_ of _TOTAL_ classes",
                "infoEmpty": "Showing 0 to 0 of 0 classes",
                "infoFiltered": "(filtered from _MAX_ total classes)",
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Previous"
                }
            }
        });
    });
</script>
{% endblock content %}