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

{% block title %}
    School Results Upload - {{ school.name }}
{% endblock %}

{% block content %}
<div class="container-fluid px-4 mt-4">
    
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">
                <i class="fas fa-upload text-primary me-2"></i>
                School Results Upload
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-school me-1"></i>{{ school.name }} ({{ school.school_code }}) | 
                <i class="fas fa-calendar me-1"></i>{{ project.name }} ({{ project.year }})
            </p>
        </div>
        <div>
            <a href="{% url 'exams:project_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Projects
            </a>
            <button onclick="window.print();" class="btn btn-primary ms-2">
                <i class="fas fa-print me-2"></i>Print
            </button>
        </div>
    </div>

    <!-- Security Warning -->
    <div class="alert alert-warning">
        <i class="fas fa-shield-alt me-2"></i>
        <strong>Security Notice:</strong> This upload is restricted to <strong>{{ school.name }} ({{ school.school_code }})</strong>. 
        Only results for students registered in this school will be accepted. Any file containing data for other schools will be rejected.
    </div>

    <div class="row">
        <div class="col-md-5">
            <div class="card shadow mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-upload me-2"></i> Upload Results
                    </h5>
                </div>
                <div class="card-body">
                    
                    <!-- Instructions -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Instructions:</strong>
                        <ul class="mb-0 mt-2">
                            <li>Download the template for your school</li>
                            <li>Only enter scores for students from <strong>{{ school.name }}</strong></li>
                            <li>Do not modify the school code in the template</li>
                            <li>Enter scores (0-100) or X for absent</li>
                            <li>Upload the completed Excel file</li>
                        </ul>
                    </div>
                    
                    <!-- Download Template Button -->
                    <div class="mb-3">
                        <a href="{% url 'exams:download_school_template' project.project_code school.school_code 'scores' %}" 
                           class="btn btn-outline-primary w-100">
                            <i class="fas fa-download me-2"></i> Download School Template
                        </a>
                    </div>
                    
                    <!-- Template Format Info -->
                    <div class="alert alert-warning small">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Template Format:</strong>
                        <pre class="mb-0 mt-2 bg-light p-2 rounded">
Row 1: School Code | Student Number | Student Name | Sex | Subject codes
Row 2: (Empty or descriptions)
Row 3+: Student Number | Subject scores (0-100 or X)
                        </pre>
                        <ul class="mt-2 mb-0">
                            <li><strong>School Code is validated</strong> - Must match {{ school.school_code }}</li>
                            <li>Student numbers must exist in the system for this school</li>
                            <li>Scores: 0-100 (numeric) or X (absent)</li>
                        </ul>
                    </div>
                    
                    <!-- Upload Form -->
                    <form id="uploadForm" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label fw-bold">Excel File (.xlsx)</label>
                            <input type="file" 
                                   name="excel_file" 
                                   id="excelFile"
                                   accept=".xlsx" 
                                   class="form-control" 
                                   required>
                            <div class="form-text">Only .xlsx files are accepted</div>
                        </div>
                        <button type="submit" class="btn btn-success w-100" id="uploadBtn">
                            <i class="fas fa-upload me-2"></i> Upload Results
                        </button>
                    </form>
                    
                    <!-- Progress Bar -->
                    <div id="progressContainer" style="display:none;" class="mt-3">
                        <div class="progress">
                            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 0%">0%</div>
                        </div>
                        <div id="progressStatus" class="text-center mt-2 small"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-7">
            <div class="card shadow mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i> Existing Results
                    </h5>
                </div>
                <div class="card-body">
                    
                    <!-- Statistics -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="alert alert-info text-center">
                                <h5>{{ student_count }}</h5>
                                <small>Registered Students</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="alert alert-info text-center">
                                <h5>{{ page_obj.paginator.count }}</h5>
                                <small>Score Records</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="alert alert-info text-center">
                                <h5>{{ subjects|length }}</h5>
                                <small>Subjects</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Search -->
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search by student number or name..." value="{{ search_query }}">
                            <button class="btn btn-primary" onclick="searchScores()">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                    
                    <!-- Last Upload Report -->
                    {% if report %}
                    <div class="alert alert-info small">
                        <i class="fas fa-info-circle"></i> Last upload report:
                        <pre class="mb-0 mt-2">{{ report|truncatechars:500 }}</pre>
                    </div>
                    {% endif %}
                    
                    <!-- Scores Table -->
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>Student No</th>
                                    <th>Student Name</th>
                                    <th>Sex</th>
                                    {% for subject in subjects %}
                                        <th class="text-center">{{ subject }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for student_key, data in table.items %}
                                <tr>
                                    <td><code>{{ data.student_number }}</code></td>
                                    <td>{{ data.student_name|truncatechars:30 }}</td>
                                    <td class="text-center">
                                        {% if data.sex == 'M' %}
                                            <span class="badge bg-primary">M</span>
                                        {% else %}
                                            <span class="badge bg-danger">F</span>
                                        {% endif %}
                                    </td>
                                    {% for subject in subjects %}
                                        <td class="text-center">
                                            {% with score=data.scores|get_item:subject %}
                                                {% if score %}
                                                    {% if score == 'X' %}
                                                        <span class="badge bg-secondary">X</span>
                                                    {% else %}
                                                        {% with score_num=score|floatformat:0|add:0 %}
                                                            <span class="badge bg-{% if score_num >= 75 %}success{% elif score_num >= 50 %}warning{% else %}danger{% endif %}">
                                                                {{ score_num }}
                                                            </span>
                                                        {% endwith %}
                                                    {% endif %}
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            {% endwith %}
                                        </td>
                                    {% endfor %}
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="{{ subjects|length|add:3 }}" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                        No results uploaded yet. Use the form to upload results.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    {% if page_obj.has_other_pages %}
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">&laquo;</a></li>
                            {% endif %}
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item"><a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {% 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 %}">&raquo;</a></li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="resultModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" id="resultModalHeader">
                <h5 class="modal-title">Upload Results</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="resultModalBody">
                <!-- Results will be inserted here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function searchScores() {
    const searchQuery = document.getElementById('searchInput').value;
    window.location.href = `?q=${encodeURIComponent(searchQuery)}`;
}

document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const uploadBtn = document.getElementById('uploadBtn');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressStatus = document.getElementById('progressStatus');
    
    progressContainer.style.display = 'block';
    uploadBtn.disabled = true;
    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
    
    let progress = 0;
    const interval = setInterval(() => {
        if (progress < 90) {
            progress += 10;
            progressBar.style.width = progress + '%';
            progressBar.textContent = progress + '%';
            progressStatus.textContent = 'Processing...';
        }
    }, 500);
    
    fetch(window.location.href + 'ajax/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        clearInterval(interval);
        
        progressBar.style.width = '100%';
        progressBar.textContent = '100%';
        progressStatus.textContent = 'Complete!';
        
        const modalHeader = document.getElementById('resultModalHeader');
        const modalBody = document.getElementById('resultModalBody');
        
        if (data.ok) {
            modalHeader.className = 'modal-header bg-success text-white';
            
            const totalScoresProcessed = (data.created || 0) + (data.updated || 0) + (data.x_created || 0) + (data.x_updated || 0);
            const totalXmarks = (data.x_created || 0) + (data.x_updated || 0);
            
            modalBody.innerHTML = `
                <div class="alert alert-success">
                    <strong>✅ Upload Completed!</strong><br>
                    ${data.message || 'Results uploaded successfully'}
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="card text-center bg-success text-white">
                            <div class="card-body">
                                <h3>${data.created || 0}</h3>
                                <small>New Scores</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center bg-warning">
                            <div class="card-body">
                                <h3>${data.updated || 0}</h3>
                                <small>Updated</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center bg-info text-white">
                            <div class="card-body">
                                <h3>${totalXmarks}</h3>
                                <small>X Marks</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center bg-danger text-white">
                            <div class="card-body">
                                <h3>${data.skipped || 0}</h3>
                                <small>Errors</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="card text-center bg-secondary text-white">
                            <div class="card-body">
                                <h4>${data.processed || 0}</h4>
                                <small>Student Rows</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card text-center bg-secondary text-white">
                            <div class="card-body">
                                <h4>${totalScoresProcessed}</h4>
                                <small>Total Scores</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                ${data.invalid_columns && data.invalid_columns.length ? `
                    <div class="alert alert-warning mt-3">
                        <strong>⚠️ Invalid Subject Columns:</strong>
                        <ul class="mb-0 mt-2">
                            ${data.invalid_columns.slice(0,10).map(col => `<li class="small">${escapeHtml(col)}</li>`).join('')}
                        </ul>
                    </div>
                ` : ''}
                
                ${data.errors && data.errors.length ? `
                    <div class="alert alert-danger mt-3">
                        <strong>❌ Errors (${data.errors.length}):</strong>
                        <div style="max-height: 300px; overflow-y: auto;">
                            <ul class="mb-0 mt-2">
                                ${data.errors.slice(0,20).map(err => `<li class="small">${escapeHtml(err)}</li>`).join('')}
                                ${data.errors.length > 20 ? '<li>... and more errors</li>' : ''}
                            </ul>
                        </div>
                    </div>
                ` : ''}
            `;
        } else {
            modalHeader.className = 'modal-header bg-danger text-white';
            modalBody.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i> 
                    <strong>Upload Failed:</strong><br>
                    ${escapeHtml(data.error || 'An unknown error occurred')}
                </div>
                ${data.details ? `
                    <details class="mt-3">
                        <summary>Technical Details</summary>
                        <pre class="bg-light p-2 small mt-2">${escapeHtml(data.details)}</pre>
                    </details>
                ` : ''}
            `;
        }
        
        const modal = new bootstrap.Modal(document.getElementById('resultModal'));
        modal.show();
        
        if (data.ok) {
            document.getElementById('resultModal').addEventListener('hidden.bs.modal', function() {
                window.location.reload();
            }, { once: true });
        }
    })
    .catch(error => {
        clearInterval(interval);
        console.error('Error:', error);
        
        const modalHeader = document.getElementById('resultModalHeader');
        const modalBody = document.getElementById('resultModalBody');
        
        modalHeader.className = 'modal-header bg-danger text-white';
        modalBody.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i> 
                <strong>Network Error:</strong><br>
                ${escapeHtml(error.message || 'Please check your connection and try again.')}
            </div>
        `;
        new bootstrap.Modal(document.getElementById('resultModal')).show();
    })
    .finally(() => {
        setTimeout(() => {
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = '<i class="fas fa-upload me-2"></i> Upload Results';
            setTimeout(() => {
                progressContainer.style.display = 'none';
                progressBar.style.width = '0%';
                progressBar.textContent = '0%';
                progressStatus.textContent = '';
            }, 2000);
        }, 1000);
    });
});

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>

{% endblock %}