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

{% block title %}
    {% if mode == 'students' %}
        Upload Students - {{ school.name }}
    {% else %}
        Upload Results - {{ school.name }}
    {% endif %}
{% 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>
                {% if mode == 'students' %}
                    Student Upload
                {% else %}
                    Results Upload
                {% endif %}
            </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>
        </div>
    </div>

    <!-- Mode Tabs -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link {% if mode == 'students' %}active{% endif %}" 
               href="?mode=students">
                <i class="fas fa-users"></i> Student Upload
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if mode == 'scores' %}active{% endif %}" 
               href="?mode=scores">
                <i class="fas fa-chart-line"></i> Score Upload
            </a>
        </li>
    </ul>

    <!-- Security Warning -->
    <div class="alert alert-warning mb-4">
        <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 data for this school will be accepted.
    </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>
                        {% if mode == 'students' %}
                            Upload Students
                        {% else %}
                            Upload Results
                        {% endif %}
                    </h5>
                </div>
                <div class="card-body">
                    
                    {% if mode == 'students' %}
                        <!-- Student Upload Instructions -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Student Upload Instructions:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Download the student template for your school</li>
                                <li>Fill in student information (student_number, full_name, sex)</li>
                                <li>Optional: Add combination (e.g., HGK, PCM, etc.)</li>
                                <li>Upload the completed Excel file</li>
                                <li>Students will be added or updated automatically</li>
                            </ul>
                        </div>
                        
                        <!-- Download Template Button -->
                        <div class="mb-3">
                            <a href="{% url 'exams:download_school_template' project.project_code school.school_code 'students' %}" 
                               class="btn btn-outline-primary w-100">
                                <i class="fas fa-download me-2"></i> Download Student Template
                            </a>
                        </div>
                        
                        <div class="alert alert-warning small">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Required columns:</strong>
                            <pre class="mb-0 mt-2 bg-light p-2 rounded">
school_code | student_number | full_name | sex | comb (optional)
                            </pre>
                            <ul class="mt-2 mb-0">
                                <li><code>school_code</code> - Will be validated against {{ school.school_code }}</li>
                                <li><code>student_number</code> - Unique identifier</li>
                                <li><code>full_name</code> - Student's full name</li>
                                <li><code>sex</code> - M or F only</li>
                                <li><code>comb</code> - Combination code (e.g., HGK, PCM, CBG, etc.)</li>
                            </ul>
                        </div>
                        
                    {% else %}
                        <!-- Score Upload Instructions -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Score Upload Instructions:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Download the score template for your school</li>
                                <li>Enter scores (0-100) or X for absent</li>
                                <li>Only modify score columns, keep student information intact</li>
                                <li>Upload the completed Excel file</li>
                                <li>Scores will be processed with grading rules</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 Score Template
                            </a>
                        </div>
                        
                        <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>
                    {% endif %}
                    
                    <!-- Upload Form -->
                    <form id="uploadForm" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="upload_mode" value="{{ mode }}">
                        <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> 
                            {% if mode == 'students' %}Upload Students{% else %}Upload Results{% endif %}
                        </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-database me-2"></i>
                        {% if mode == 'students' %}
                            Existing Students
                        {% else %}
                            Existing Results
                        {% endif %}
                    </h5>
                </div>
                <div class="card-body">
                    
                    {% if mode == 'students' %}
                        <!-- Student Statistics -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="alert alert-info text-center">
                                    <h5>{{ total_students }}</h5>
                                    <small>Total Students</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="alert alert-info text-center">
                                    <h5>{{ male_count }}</h5>
                                    <small>Male</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="alert alert-info text-center">
                                    <h5>{{ female_count }}</h5>
                                    <small>Female</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="searchStudents()">
                                    <i class="fas fa-search"></i> Search
                                </button>
                            </div>
                        </div>
                        
                        <!-- Student Table -->
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Student No</th>
                                        <th>Full Name</th>
                                        <th>Sex</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for student in students %}
                                    <tr>
                                        <td>{{ forloop.counter0|add:students.start_index }}</td>
                                        <td><code>{{ student.student_number }}</code></td>
                                        <td>{{ student.full_name }}</td>
                                        <td>
                                            {% if student.sex == 'M' %}
                                                <span class="badge bg-primary">Male</span>
                                            {% else %}
                                                <span class="badge bg-danger">Female</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                            No students found. Use the form to upload students.
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        {% if students.has_other_pages %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                {% if students.has_previous %}
                                    <li class="page-item"><a class="page-link" href="?mode=students&page={{ students.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">&laquo;</a></li>
                                {% endif %}
                                {% for num in students.paginator.page_range %}
                                    {% if students.number == num %}
                                        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                                    {% elif num > students.number|add:'-3' and num < students.number|add:'3' %}
                                        <li class="page-item"><a class="page-link" href="?mode=students&page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if students.has_next %}
                                    <li class="page-item"><a class="page-link" href="?mode=students&page={{ students.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">&raquo;</a></li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                        
                    {% else %}
                        <!-- Score Upload - Show existing processed scores -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="alert alert-info text-center">
                                    <h5>{{ student_count }}</h5>
                                    <small>Registered Students</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-info text-center">
                                    <h5>{{ page_obj.paginator.count }}</h5>
                                    <small>Score Records</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="?mode=scores&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="?mode=scores&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="?mode=scores&page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">&raquo;</a></li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    {% 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"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

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

function searchScores() {
    const searchQuery = document.getElementById('searchInput').value;
    window.location.href = `?mode=scores&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');
    const mode = document.querySelector('input[name="upload_mode"]').value;
    
    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('{% url "exams:school_upload_ajax" project.project_code school.school_code %}', {
        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';
            
            if (data.mode === 'students') {
                modalBody.innerHTML = `
                    <div class="alert alert-success">Student upload completed successfully!</div>
                    <div class="row">
                        <div class="col-md-4"><div class="card text-center"><div class="card-body"><h3>${data.created || 0}</h3><small>Created</small></div></div></div>
                        <div class="col-md-4"><div class="card text-center"><div class="card-body"><h3>${data.updated || 0}</h3><small>Updated</small></div></div></div>
                        <div class="col-md-4"><div class="card text-center"><div class="card-body"><h3>${data.skipped || 0}</h3><small>Skipped</small></div></div></div>
                    </div>
                    ${data.errors && data.errors.length ? `<div class="alert alert-warning mt-3"><strong>Errors:</strong><ul>${data.errors.slice(0,10).map(e => `<li>${escapeHtml(e)}</li>`).join('')}</ul></div>` : ''}
                `;
            } else {
                const totalScores = (data.created || 0) + (data.updated || 0);
                modalBody.innerHTML = `
                    <div class="alert alert-success">Score upload completed successfully!</div>
                    <div class="row">
                        <div class="col-md-3"><div class="card text-center"><div class="card-body"><h3>${data.created || 0}</h3><small>Created</small></div></div></div>
                        <div class="col-md-3"><div class="card text-center"><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"><div class="card-body"><h3>${data.x_count || 0}</h3><small>X Marks</small></div></div></div>
                        <div class="col-md-3"><div class="card text-center"><div class="card-body"><h3>${data.skipped || 0}</h3><small>Errors</small></div></div></div>
                    </div>
                    ${data.errors && data.errors.length ? `<div class="alert alert-warning mt-3"><strong>Errors:</strong><ul>${data.errors.slice(0,10).map(e => `<li>${escapeHtml(e)}</li>`).join('')}</ul></div>` : ''}
                `;
            }
        } else {
            modalHeader.className = 'modal-header bg-danger text-white';
            modalBody.innerHTML = `<div class="alert alert-danger">${escapeHtml(data.error || 'Upload failed')}</div>`;
        }
        
        new bootstrap.Modal(document.getElementById('resultModal')).show();
        
        if (data.ok) {
            document.getElementById('resultModal').addEventListener('hidden.bs.modal', function() {
                window.location.reload();
            }, { once: true });
        }
    })
    .catch(error => {
        clearInterval(interval);
        modalHeader.className = 'modal-header bg-danger text-white';
        modalBody.innerHTML = `<div class="alert alert-danger">Network error: ${escapeHtml(error.message)}</div>`;
        new bootstrap.Modal(document.getElementById('resultModal')).show();
    })
    .finally(() => {
        setTimeout(() => {
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = '<i class="fas fa-upload me-2"></i> ' + (mode === 'students' ? 'Upload Students' : '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 %}