{% extends "exams/base.html" %}
{% load static %}

{% block page_title %}School Results List{% endblock %}




{% block content %}

<style>
/* Fix for dropdown being cut off */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    min-height: 400px; /* Give some height for dropdowns */
}

.dropdown {
    position: relative !important;
    display: inline-block !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    min-width: 200px !important;
    z-index: 9999 !important;
    transform: none !important;
}

/* Ensure the table cell doesn't clip the dropdown */
td {
    overflow: visible !important;
    position: relative !important;
}

/* Make the actions column wider */
th:last-child, td:last-child {
    min-width: 150px !important;
}
</style>




















<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h4 class="fw-bold text-primary">
                <i class="fas fa-school"></i> School Results
                <small class="text-muted fs-6">Per-school downloads & performance</small>
            </h4>
        </div>
    </div>
 
 {% if user.is_superuser or user.profile.role == "super" %}
 <div class="d-flex justify-content-between mb-3">
    <h4><i class="fas fa-school"></i> School Results – {{ project.name }}</h4>
    <div>
        <!-- Your existing buttons -->
        <a href="{% url 'exams:project_all_schools_detailed_results_print' project.id %}" 
           class="btn btn-info" target="_blank">
            <i class="fas fa-print"></i> PRINT ALL SCHOOLS
        </a>
        <a href="{% url 'exams:project_all_schools_detailed_results_print' project.id %}?format=pdf" 
           class="btn btn-success" target="_blank">
            <i class="fas fa-file-pdf"></i> PDF ALL SCHOOLS
        </a>
        <!-- Back button -->
        <a href="{% url 'exams:project_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> BACK
        </a>
    </div>
</div>
{% endif %}

    <!-- Filter Card --> 
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <h6 class="mb-0"><i class="fas fa-filter"></i> Filter Schools</h6>
        </div>
        <div class="card-body">
            <form method="get" class="row g-3">
                <!-- Search -->
                <div class="col-md-3">
                    <label class="form-label">Search</label>
                    <input type="text" 
                           name="q" 
                           class="form-control" 
                           placeholder="School code or name"
                           value="{{ search_query }}">
                </div>

                <!-- Region (for super admin) -->
                {% if user_profile.role == "super" %}
                <div class="col-md-3">
                    <label class="form-label">Region</label>
                    <select name="region" class="form-select">
                        <option value="">All Regions</option>
                        {% for r in regions %}
                        <option value="{{ r.id }}" {% if selected_region|stringformat:"s" == r.id|stringformat:"s" %}selected{% endif %}>
                            {{ r.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
                
                <!-- District (for super/region) -->
                {% if user_profile.role == "super" or user_profile.role == "region" %}
                <div class="col-md-3">
                    <label class="form-label">District</label>
                    <select name="district" class="form-select">
                        <option value="">All Districts</option>
                        {% for d in districts %}
                        <option value="{{ d.id }}" {% if selected_district|stringformat:"s" == d.id|stringformat:"s" %}selected{% endif %}>
                            {{ d.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
                
                <!-- Filter Button -->
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <!-- Clear Filter -->
                <div class="col-md-1 d-flex align-items-end">
                    <a href="{% url 'exams:school_results_list'  project.id   %}" class="btn btn-secondary w-100">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Schools Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold">Schools ({{ page_obj.paginator.count }} total)</h6>
            <div>
                <span class="badge bg-info">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">

                    <thead class="table-light">
                        <tr>
                            <th width="50">#</th>
                            <th class="text-center" width="150">Results</th>
                            <th class="text-center" width="150">Subj.</th> <!-- Fixed width -->
                            <th>School Code</th>
                            <th>School Name</th>
                            <th>Reg/Dist</th>
                            <th>Ownership</th>
                            <!-- <th class="text-center" width="80">No. Std</th> -->

                        </tr>
                    </thead>


                    <tbody>
                        {% for school in page_obj %}
                        <tr>
                            <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>



 <td class="text-center">
    <div class="dropdown">
       <button class="btn btn-sm btn-primary dropdown-toggle" 
          type="button" 
            data-bs-toggle="dropdown">
                <i class="fas fa-download"></i> Results
                   </button>
                       <ul class="dropdown-menu">
                         <!-- Summary Results -->
                        <li>


                            <a class="dropdown-item" 
                               href="{% url 'exams:project_school_summary_html' project.id school.school_code %}"
                               target="_blank">
                                <i class="fas fa-chart-bar text-primary"></i> Summary/Charts
                            </a>

                        </li>
                         <!-- Results-Grades -->

                        <li>
                          <a class="dropdown-item" 
                             href="{% url 'exams:project_school_detailed_results' project.id school.school_code %}"
                             target="_blank">
                            <i class="fas fa-table text-info"></i> Detailed Results
                          </a>
                        </li>


                        <li>
                          <a class="dropdown-item" 
                             href="{% url 'exams:necta_format_results' project.id school.school_code %}"
                             target="_blank">
                            <i class="fas fa-file-pdf text-danger"></i> NECTA Format Results
                          </a>
                        </li>


 {% if user.is_superuser or user.profile.role == "super" %}
                        <li>
                            <a class="dropdown-item" 
                               href="{% url 'exams:project_school_all_papers_results' project.id school.school_code %}"
                               target="_blank">
                                <i class="fas fa-file-pdf text-danger"></i> All Papers Results
                            </a>
                        </li>

                        <li>
                          <a class="dropdown-item" 
                             href="{% url 'exams:necta_format_results' project.id school.school_code %}"
                             target="_blank">
                            <i class="fas fa-file-pdf text-info"></i> STUDENT REPORTS
                          </a>
                        </li>

                        <li>
                          <a class="dropdown-item" 
                             href="{% url 'exams:necta_format_results' project.id school.school_code %}"
                             target="_blank">
                            <i class="fas fa-file-pdf text-info"></i> SMS
                          </a>
                        </li>
{% endif %}
             </ul>
     </div>
 </td>


<td class="text-center">
    <!-- Subject Performance -->
    <a class="btn btn-sm btn-success sm subject-performance-btn" 
       href="#"
       data-bs-toggle="modal"
       data-bs-target="#subjectPerformanceModal"
       data-school-code="{{ school.school_code }}"
       data-school-name="{{ school.name }}">
       <i class="fas fa-chart-line text-white"></i> Subject Performance
    </a>
</td>

                            <td><span class="badge bg-secondary">{{ school.school_code }}</span></td>
                            <td>{{ school.name_short|truncatechars:30 }}</td>
                            <td>{{ school.region.name }}-{{ school.district.name }}</td>
                            <td>
                                {% if school.ownership == "GVT" %}
                                <span class="badge bg-success">Government</span>
                                {% else %}
                                <span class="badge bg-warning">Private</span>
                                {% endif %}
                            </td>
<!--                             <td class="text-center fw-bold">{{ school.student_count }}</td> -->


                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="9" class="text-center py-4 text-muted">
                                <i class="fas fa-school fa-3x mb-3"></i>
                                <p>No schools found matching your criteria.</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Pagination -->
        {% if page_obj.paginator.num_pages > 1 %}
        <div class="card-footer bg-white">
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_exam_type %}&exam_type={{ selected_exam_type }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_region %}&region={{ selected_region }}{% endif %}{% if selected_district %}&district={{ selected_district }}{% endif %}">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_exam_type %}&exam_type={{ selected_exam_type }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_region %}&region={{ selected_region }}{% endif %}{% if selected_district %}&district={{ selected_district }}{% endif %}">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    <li class="page-item active">
                        <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                    </li>
                    
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_exam_type %}&exam_type={{ selected_exam_type }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_region %}&region={{ selected_region }}{% endif %}{% if selected_district %}&district={{ selected_district }}{% endif %}">
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_exam_type %}&exam_type={{ selected_exam_type }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_region %}&region={{ selected_region }}{% endif %}{% if selected_district %}&district={{ selected_district }}{% endif %}">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>














<!-- Subject Performance Modal -->
<div class="modal fade" id="subjectPerformanceModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-chart-line"></i> Subject Performance
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="subjectPerformanceSchoolInfo" class="alert alert-info mb-3">
                    Loading...
                </div>
                
                <form id="subjectPerformanceForm" method="get" target="_blank">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Select Subject</label>
                            <select name="subject" id="subjectSelect" class="form-select" required>
                                <option value="">-- Choose Subject --</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Report Type</label>
                            <select name="report_type" id="reportTypeSelect" class="form-select">
                                <option value="summary">Summary with Chart</option>
                                <option value="summary">Detailed Student Performance</option>
                                <option value="summary">Both Summary and Detailed</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Format</label>
                            <select name="format" id="formatSelect" class="form-select">
                                <option value="html">HTML View</option>
                                <option value="html">PDF Download</option>
                                <option value="html">Excel Export</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-success w-100" id="generateSubjectReport">
                                <i class="fas fa-file-alt"></i> Generate Report
                            </button>
                        </div>
                    </div>
                    
                    <input type="hidden" name="school_code" id="modalSchoolCode" value="">
                    <input type="hidden" name="project_id" id="modalProjectId" value="{{ project.id }}">
                </form>
                
                <div id="subjectLoadingSpinner" class="text-center py-3 d-none">
                    <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading subjects...</p>
                </div>
            </div>
        </div>
    </div>
</div>
















<!-- Add this JavaScript for handling dynamic dropdowns if needed -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // You can add AJAX for cascading dropdowns if needed
    const regionSelect = document.querySelector('select[name="region"]');
    const districtSelect = document.querySelector('select[name="district"]');
    
    if (regionSelect && districtSelect) {
        regionSelect.addEventListener('change', function() {
            const regionId = this.value;
            if (regionId) {
                // You can implement AJAX to load districts for selected region
                // Similar to your existing ajax_get_districts endpoint
                fetch(`/exams/ajax/get-districts/${regionId}/`)
                    .then(response => response.json())
                    .then(data => {
                        districtSelect.innerHTML = '<option value="">All Districts</option>';
                        data.forEach(d => {
                            districtSelect.innerHTML += `<option value="${d.id}">${d.name}</option>`;
                        });
                    });
            }
        });
    }
});
</script>









<script>
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM loaded - initializing subject performance modal");
    
    // Get the URL pattern from a data attribute or construct it properly
    const getSubjectsUrlTemplate = "{% url 'exams:ajax_get_school_subjects' 0 'dummy' %}";
    
    // Handle subject performance button click
    document.querySelectorAll('.subject-performance-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            console.log("Subject performance button clicked");
            
            const schoolCode = this.dataset.schoolCode;
            const schoolName = this.dataset.schoolName;
            const projectId = document.getElementById('modalProjectId')?.value || '{{ project.id }}';
            
            console.log("School Code:", schoolCode);
            console.log("School Name:", schoolName);
            console.log("Project ID:", projectId);
            
            // Update modal info
            document.getElementById('subjectPerformanceSchoolInfo').innerHTML = 
                `<strong>School:</strong> ${schoolCode} - ${schoolName}`;
            document.getElementById('modalSchoolCode').value = schoolCode;
            
            // Show loading spinner
            document.getElementById('subjectLoadingSpinner').classList.remove('d-none');
            document.getElementById('subjectSelect').disabled = true;
            document.getElementById('subjectSelect').innerHTML = '<option value="">Loading...</option>';
            
            // Construct the URL properly
            const url = getSubjectsUrlTemplate
                .replace('0', projectId)
                .replace('dummy', schoolCode);
            
            console.log("Fetching from URL:", url);
            
            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                console.log("Response status:", response.status);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                console.log("Received data:", data);
                
                const subjectSelect = document.getElementById('subjectSelect');
                
                if (data.success === false) {
                    throw new Error(data.error || 'Unknown error');
                }
                
                if (data.subjects && data.subjects.length > 0) {
                    subjectSelect.innerHTML = '<option value="">-- Choose Subject --</option>';
                    
                    data.subjects.forEach(subject => {
                        const option = document.createElement('option');
                        option.value = subject.code;
                        const paperText = subject.papers > 1 ? `${subject.papers} papers` : `${subject.papers} paper`;
                        option.textContent = `${subject.code} - ${subject.name} (${paperText})`;
                        option.dataset.papers = subject.papers;
                        subjectSelect.appendChild(option);
                    });
                    console.log(`Loaded ${data.subjects.length} subjects`);
                } else {
                    subjectSelect.innerHTML = '<option value="">-- No subjects found --</option>';
                    console.warn("No subjects returned from server");
                }
                
                document.getElementById('subjectLoadingSpinner').classList.add('d-none');
                subjectSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error loading subjects:', error);
                document.getElementById('subjectLoadingSpinner').classList.add('d-none');
                
                const subjectSelect = document.getElementById('subjectSelect');
                subjectSelect.innerHTML = '<option value="">-- Error loading subjects --</option>';
                subjectSelect.disabled = false;
                
                alert('Failed to load subjects. Error: ' + error.message);
            });
        });
    });
    
    // Handle form submission
    const form = document.getElementById('subjectPerformanceForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const schoolCode = document.getElementById('modalSchoolCode').value;
            const projectId = document.getElementById('modalProjectId').value;
            const subject = document.getElementById('subjectSelect').value;
            const reportType = document.getElementById('reportTypeSelect').value;
            const format = document.getElementById('formatSelect').value;
            
            console.log("Form submitted:", {schoolCode, projectId, subject, reportType, format});
            
            if (!subject || subject === '-- No subjects found --' || subject === '-- Error loading subjects --') {
                alert('Please select a valid subject');
                return;
            }
            
            let url = '';
            if (format === 'html') {
                url = `/projects/${projectId}/school/${schoolCode}/subject/${subject}/performance/${reportType}/`;
            } else if (format === 'pdf') {
                url = `/projects/${projectId}/school/${schoolCode}/subject/${subject}/performance/${reportType}/pdf/`;
            } else if (format === 'excel') {
                url = `/projects/${projectId}/school/${schoolCode}/subject/${subject}/performance/${reportType}/excel/`;
            }
            
            console.log("Opening URL:", url);
            window.open(url, '_blank');
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('subjectPerformanceModal'));
            if (modal) {
                modal.hide();
            }
        });
    }
});
</script>




{% endblock %}