{% load crispy_forms_tags %}

<div class="p-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="mb-1"><i class="fa fa-layer-group text-primary"></i> School Sections</h3>
            <p class="text-muted mb-0">Manage academic sections for your school</p>
        </div>
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addSectionModal">
            <i class="fa fa-plus mr-2"></i>Add New Section
        </button>
    </div>

    <!-- Search Bar -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                </div>
                <input type="text" class="form-control" id="sectionSearch" placeholder="Search sections...">
            </div>
        </div>
    </div>

    {% if school_sections %}
        <!-- Sections Grid -->
        <div class="row" id="sectionsGrid">
            {% for section in school_sections %}
            <div class="col-lg-4 col-md-6 mb-4 section-item">
                <div class="card h-100 shadow-sm border-0 hover-card">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-1">
                                    <i class="fa fa-graduation-cap text-primary mr-2"></i>{{ section.section_name }}
                                </h5>
                                <small class="text-muted">Section #{{ section.id }}</small>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="{% url 'edit_section' section.id %}" class="dropdown-item">
                                        <i class="fa fa-edit mr-2"></i>Edit
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="{% url 'delete_section' section.id %}" class="dropdown-item text-danger" onclick="return confirm('Are you sure you want to delete this section?')">
                                        <i class="fa fa-trash mr-2"></i>Delete
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="mt-auto">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fa fa-calendar mr-1"></i>Created {{ section.created_at|default:"Recently"|date:"M d, Y" }}
                                </small>
                                <span class="badge badge-primary">Active</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination (if needed) -->
        {% if school_sections|length > 12 %}
        <nav aria-label="Sections pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
        {% endif %}
    {% else %}
        <!-- Empty State -->
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <div class="mb-4">
                    <i class="fa fa-layer-group fa-4x text-muted"></i>
                </div>
                <h4 class="text-muted mb-3">No Sections Yet</h4>
                <p class="text-muted mb-4">Get started by adding your first school section.</p>
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addSectionModal">
                    <i class="fa fa-plus mr-2"></i>Create First Section
                </button>
            </div>
        </div>
    {% endif %}
</div>

<!-- Enhanced Add Section Modal -->
<div class="modal fade" id="addSectionModal" tabindex="-1" role="dialog" aria-labelledby="addSectionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addSectionModalLabel">Add Section</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
            </div>
            <form method="POST" action="{% url 'section_page' %}" id="addSectionForm">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="id_section_name" class="font-weight-bold">
                                    <i class="fa fa-tag mr-1"></i>Section Name
                                </label>
                                {{ sections_form.section_name|as_crispy_field }}
                                <small class="form-text text-muted">Enter a unique name for this section (e.g., Primary, Secondary)</small>
                            </div>
                        </div>
                    </div>
                    <div id="formErrors" class="alert alert-danger d-none">
                        <i class="fa fa-exclamation-triangle mr-2"></i>
                        <span id="errorText"></span>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times mr-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <i class="fa fa-save mr-1"></i>Save Section
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Styles and Scripts -->
<style>
.hover-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef !important;
}
.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.card-title {
    color: #495057;
}
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.modal-content {
    border-radius: 10px;
}
</style>

<script>
$(document).ready(function() {
    // Search functionality
    $('#sectionSearch').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('.section-item').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });

    // Form validation
    $('#addSectionForm').on('submit', function(e) {
        var sectionName = $('#id_section_name').val().trim();
        if (!sectionName) {
            e.preventDefault();
            $('#formErrors').removeClass('d-none');
            $('#errorText').text('Section name is required.');
            return false;
        }
        $('#submitBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Saving...');
    });

    // Reset form on modal close
    $('#addSectionModal').on('hidden.bs.modal', function() {
        $('#addSectionForm')[0].reset();
        $('#formErrors').addClass('d-none');
        $('#submitBtn').prop('disabled', false).html('<i class="fa fa-save mr-1"></i>Save Section');
    });
});
</script>