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

{% block page_title %}School Paper Standardization - {{ school.name }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row mb-3">
        <div class="col">
            <h4 class="fw-bold text-primary">
                <i class="fas fa-school"></i>
                School Paper Standardization – {{ school.name }}
            </h4>
            <p class="text-muted">
                Project: {{ project.name }} ({{ project.year }})<br>
                School Code: {{ school.school_code }} | Location: {{ school.district.name }} - {{ school.region.name }}
            </p>
        </div>
        <div class="col-auto">
            <a href="{% url 'exams:examscore_standardization_list' project.id %}" class="btn btn-info me-2">
                <i class="fas fa-arrow-left"></i> Back to All Papers
            </a>
            <a href="{% url 'exams:dashboard' %}" class="btn btn-secondary">
                <i class="fas fa-home"></i> Dashboard
            </a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-book"></i> Papers for {{ school.name }}</h5>
        </div>
        <div class="card-body">
            <div class="accordion" id="subjectsAccordion">
                {% for subject in subjects %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ subject.id }}">
                        <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ subject.id }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ subject.id }}">
                            <strong>{{ subject.code }}</strong> - {{ subject.name }}
                        </button>
                    </h2>
                    <div id="collapse{{ subject.id }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" aria-labelledby="heading{{ subject.id }}" data-bs-parent="#subjectsAccordion">
                        <div class="accordion-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>#</th>
                                            <th>Paper Code</th>
                                            <th>Paper Name</th>
                                            <th>Total Students</th>
                                            <th>Valid Scores</th>
                                            <th>X (Absent)</th>
                                            <th>Null</th>
                                            <th>Min</th>
                                            <th>Max</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for paper in subject.papers %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td><strong>{{ paper.code }}</strong></td>
                                            <td>{{ paper.name }}</td>
                                            <td>{{ paper.total }}</td>
                                            <td class="text-success fw-bold">{{ paper.valid_count }}</td>
                                            <td class="text-warning fw-bold">{{ paper.x_count }}</td>
                                            <td class="text-secondary">{{ paper.null_count }}</td>
                                            <td>{{ paper.min_score|default:"-"|floatformat:2 }}</td>
                                            <td>{{ paper.max_score|default:"-"|floatformat:2 }}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-sm btn-success standardize-btn" 
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#standardizeModal"
                                                            data-paper-id="{{ paper.id }}"
                                                            data-paper-code="{{ paper.code }}"
                                                            data-paper-name="{{ paper.name }}"
                                                            data-subject-code="{{ subject.code }}"
                                                            data-subject-name="{{ subject.name }}"
                                                            data-min-score="{{ paper.min_score|default:'0' }}"
                                                            data-max-score="{{ paper.max_score|default:'0' }}">
                                                        <i class="fas fa-plus-circle"></i> Add
                                                    </button>
                                                    
                                                    <button class="btn btn-sm btn-warning destandardize-btn" 
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#destandardizeModal"
                                                            data-paper-id="{{ paper.id }}"
                                                            data-paper-code="{{ paper.code }}"
                                                            data-paper-name="{{ paper.name }}"
                                                            data-subject-code="{{ subject.code }}"
                                                            data-subject-name="{{ subject.name }}"
                                                            data-min-score="{{ paper.min_score|default:'0' }}"
                                                            data-max-score="{{ paper.max_score|default:'0' }}">
                                                        <i class="fas fa-minus-circle"></i> Subtract
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="10" class="text-center py-3">
                                                <i class="fas fa-info-circle"></i> No papers found for this subject
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> No papers found for this school
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Standardization Modal (Add Marks) -->
<div class="modal fade" id="standardizeModal" tabindex="-1" aria-labelledby="standardizeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="standardizeModalLabel">
                    <i class="fas fa-plus-circle"></i> 
                    Add Marks - {{ school.name }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" id="paperId" value="">
                <input type="hidden" id="schoolId" value="{{ school.id }}">
                <input type="hidden" id="projectId" value="{{ project.id }}">
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> 
                    This operation will <strong>add</strong> marks to all scores for this paper in <strong>{{ school.name }}</strong> only.
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Subject:</label>
                        <div id="modalSubject" class="form-control-plaintext h5"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="fw-bold">Paper:</label>
                        <div id="modalPaper" class="form-control-plaintext h5"></div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Minimum Score</small>
                                <span class="h2 mb-0 text-primary" id="modalMinScore">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Maximum Score</small>
                                <span class="h2 mb-0 text-danger" id="modalMaxScore">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="addValue" class="form-label fw-bold">Marks to Add to All Scores:</label>
                    <div class="input-group">
                        <input type="number" class="form-control form-control-lg" id="addValue" min="0.1" max="20" step="0.1" value="1.0">
                        <span class="input-group-text">points</span>
                    </div>
                    <div class="form-text">Enter value to add to all scores (maximum total after addition cannot exceed 99)</div>
                </div>
                
                <!-- New max warning -->
                <div class="alert alert-warning" id="newMaxWarning" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="warningMessage">Adding this value will exceed the maximum allowed score of 99</span>
                </div>
                
                <!-- Progress Bar -->
                <div id="progressContainer" class="mt-4" style="display: none;">
                    <label class="form-label fw-bold">Processing Standardization...</label>
                    <div class="progress mb-2" style="height: 30px;">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                             role="progressbar" style="width: 0%">0%</div>
                    </div>
                    <p class="text-center" id="progressText">0/0 scores processed</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-success" id="startStandardizeBtn">
                    <i class="fas fa-plus"></i> Add Marks
                </button>
                <button type="button" class="btn btn-primary" id="processingBtn" style="display: none;" disabled>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    Processing...
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Destandardization Modal (Subtract Marks) -->
<div class="modal fade" id="destandardizeModal" tabindex="-1" aria-labelledby="destandardizeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="destandardizeModalLabel">
                    <i class="fas fa-minus-circle"></i> 
                    Subtract Marks - {{ school.name }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" id="destandardizePaperId" value="">
                <input type="hidden" id="destandardizeSchoolId" value="{{ school.id }}">
                <input type="hidden" id="destandardizeProjectId" value="{{ project.id }}">
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> 
                    This operation will <strong>subtract</strong> marks from all scores for this paper in <strong>{{ school.name }}</strong> only. Scores cannot go below 0.
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Subject:</label>
                        <div id="destandardizeModalSubject" class="form-control-plaintext h5"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="fw-bold">Paper:</label>
                        <div id="destandardizeModalPaper" class="form-control-plaintext h5"></div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Minimum Score</small>
                                <span class="h2 mb-0 text-primary" id="destandardizeModalMinScore">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Maximum Score</small>
                                <span class="h2 mb-0 text-danger" id="destandardizeModalMaxScore">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="subtractValue" class="form-label fw-bold">Marks to Subtract from All Scores:</label>
                    <div class="input-group">
                        <input type="number" class="form-control form-control-lg" id="subtractValue" min="0.1" max="20" step="0.1" value="1.0">
                        <span class="input-group-text">points</span>
                    </div>
                    <div class="form-text">Enter value to subtract from all scores (scores cannot go below 0)</div>
                </div>
                
                <!-- New min warning -->
                <div class="alert alert-danger" id="newMinWarning" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="minWarningMessage">Subtracting this value will make some scores go below 0</span>
                </div>
                
                <!-- Progress Bar -->
                <div id="destandardizeProgressContainer" class="mt-4" style="display: none;">
                    <label class="form-label fw-bold">Processing Destandardization...</label>
                    <div class="progress mb-2" style="height: 30px;">
                        <div id="destandardizeProgressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" 
                             role="progressbar" style="width: 0%">0%</div>
                    </div>
                    <p class="text-center" id="destandardizeProgressText">0/0 scores processed</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-warning" id="startDestandardizeBtn">
                    <i class="fas fa-minus"></i> Subtract Marks
                </button>
                <button type="button" class="btn btn-primary" id="destandardizeProcessingBtn" style="display: none;" disabled>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    Processing...
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-check-circle me-2"></i>
                <span id="toastMessage">Operation completed successfully!</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<!-- Error Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-exclamation-circle me-2"></i>
                <span id="errorMessage">An error occurred</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<style>
.modal-lg {
    max-width: 700px;
}
.progress {
    border-radius: 15px;
}
.progress-bar {
    border-radius: 15px;
    transition: width 0.3s ease;
}
.toast {
    min-width: 300px;
}
.btn-group .btn {
    margin-right: 2px;
}
</style>


{% block extra_js %}
<script>
console.log('School Paper Standardization JS loaded - ' + new Date().toISOString());

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded');
    
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
    const projectId = document.getElementById('projectId').value;
    const schoolId = document.getElementById('schoolId').value;
    
    console.log('Project ID:', projectId);
    console.log('School ID:', schoolId);
    
    // ==================== STANDARDIZE (ADD) ====================
    const standardizeBtns = document.querySelectorAll('.standardize-btn');
    console.log('Found standardize buttons:', standardizeBtns.length);
    
    standardizeBtns.forEach(function(btn, index) {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            
            const paperId = this.getAttribute('data-paper-id');
            const paperCode = this.getAttribute('data-paper-code');
            const paperName = this.getAttribute('data-paper-name');
            const subjectCode = this.getAttribute('data-subject-code');
            const subjectName = this.getAttribute('data-subject-name');
            const minScore = this.getAttribute('data-min-score');
            const maxScore = this.getAttribute('data-max-score');
            
            console.log('Standardize - Paper:', paperCode, paperName);
            
            document.getElementById('paperId').value = paperId || '';
            document.getElementById('modalSubject').textContent = `${subjectCode} - ${subjectName}`;
            document.getElementById('modalPaper').textContent = `${paperCode} - ${paperName}`;
            document.getElementById('modalMinScore').textContent = parseFloat(minScore || '0').toFixed(2);
            document.getElementById('modalMaxScore').textContent = parseFloat(maxScore || '0').toFixed(2);
            
            document.getElementById('addValue').value = '1.0';
            document.getElementById('newMaxWarning').style.display = 'none';
            document.getElementById('progressContainer').style.display = 'none';
            document.getElementById('startStandardizeBtn').style.display = 'inline-block';
            document.getElementById('processingBtn').style.display = 'none';
            
            const modal = new bootstrap.Modal(document.getElementById('standardizeModal'));
            modal.show();
        });
    });
    
    // Add value validation
    const addValueInput = document.getElementById('addValue');
    if (addValueInput) {
        addValueInput.addEventListener('input', function() {
            const addValue = parseFloat(this.value) || 0;
            const maxScore = parseFloat(document.getElementById('modalMaxScore').textContent) || 0;
            const newMax = maxScore + addValue;
            
            const warningEl = document.getElementById('newMaxWarning');
            if (newMax > 99) {
                document.getElementById('warningMessage').textContent = 
                    `Adding ${addValue.toFixed(1)} will raise max score to ${newMax.toFixed(2)} (exceeds 99)`;
                warningEl.style.display = 'block';
            } else {
                warningEl.style.display = 'none';
            }
        });
    }
    
    // Start Standardize
    const startBtn = document.getElementById('startStandardizeBtn');
    if (startBtn) {
        startBtn.addEventListener('click', function() {
            const paperId = document.getElementById('paperId').value;
            const addValue = parseFloat(document.getElementById('addValue').value) || 1.0;
            const maxScore = parseFloat(document.getElementById('modalMaxScore').textContent) || 0;
            const newMax = maxScore + addValue;
            
            if (!paperId) {
                alert('Paper ID not found');
                return;
            }
            
            if (newMax > 99) {
                alert(`Adding ${addValue.toFixed(1)} would raise max score to ${newMax.toFixed(2)} (exceeds 99)`);
                return;
            }
            
            this.style.display = 'none';
            document.getElementById('processingBtn').style.display = 'inline-block';
            document.getElementById('progressContainer').style.display = 'block';
            
            document.getElementById('progressBar').style.width = '10%';
            document.getElementById('progressBar').textContent = '10%';
            document.getElementById('progressText').textContent = 'Starting...';
            
            const url = `/projects/${projectId}/school/${schoolId}/paper/${paperId}/standardize/`;
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ add_value: addValue })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.error); });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    startProgressPolling(data.task_id, data.total);
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showError(error.message);
                resetStandardizeUI();
            });
        });
    }
    
    // ==================== DESTANDARDIZE (SUBTRACT) ====================
    const destandardizeBtns = document.querySelectorAll('.destandardize-btn');
    console.log('Found destandardize buttons:', destandardizeBtns.length);
    
    destandardizeBtns.forEach(function(btn, index) {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            
            const paperId = this.getAttribute('data-paper-id');
            const paperCode = this.getAttribute('data-paper-code');
            const paperName = this.getAttribute('data-paper-name');
            const subjectCode = this.getAttribute('data-subject-code');
            const subjectName = this.getAttribute('data-subject-name');
            const minScore = this.getAttribute('data-min-score');
            const maxScore = this.getAttribute('data-max-score');
            
            console.log('Destandardize - Paper:', paperCode, paperName);
            
            document.getElementById('destandardizePaperId').value = paperId || '';
            document.getElementById('destandardizeModalSubject').textContent = `${subjectCode} - ${subjectName}`;
            document.getElementById('destandardizeModalPaper').textContent = `${paperCode} - ${paperName}`;
            document.getElementById('destandardizeModalMinScore').textContent = parseFloat(minScore || '0').toFixed(2);
            document.getElementById('destandardizeModalMaxScore').textContent = parseFloat(maxScore || '0').toFixed(2);
            
            document.getElementById('subtractValue').value = '1.0';
            document.getElementById('newMinWarning').style.display = 'none';
            document.getElementById('destandardizeProgressContainer').style.display = 'none';
            document.getElementById('startDestandardizeBtn').style.display = 'inline-block';
            document.getElementById('destandardizeProcessingBtn').style.display = 'none';
            
            const modal = new bootstrap.Modal(document.getElementById('destandardizeModal'));
            modal.show();
        });
    });
    
    // Subtract value validation
    const subtractValueInput = document.getElementById('subtractValue');
    if (subtractValueInput) {
        subtractValueInput.addEventListener('input', function() {
            const subtractValue = parseFloat(this.value) || 0;
            const minScore = parseFloat(document.getElementById('destandardizeModalMinScore').textContent) || 0;
            const newMin = minScore - subtractValue;
            
            const warningEl = document.getElementById('newMinWarning');
            if (newMin < 0) {
                document.getElementById('minWarningMessage').textContent = 
                    `Subtracting ${subtractValue.toFixed(1)} will lower min score to ${newMin.toFixed(2)} (below 0)`;
                warningEl.style.display = 'block';
            } else {
                warningEl.style.display = 'none';
            }
        });
    }
    
    // Start Destandardize
    const startDestandardizeBtn = document.getElementById('startDestandardizeBtn');
    if (startDestandardizeBtn) {
        startDestandardizeBtn.addEventListener('click', function() {
            const paperId = document.getElementById('destandardizePaperId').value;
            const subtractValue = parseFloat(document.getElementById('subtractValue').value) || 1.0;
            const minScore = parseFloat(document.getElementById('destandardizeModalMinScore').textContent) || 0;
            const newMin = minScore - subtractValue;
            
            if (!paperId) {
                alert('Paper ID not found');
                return;
            }
            
            if (newMin < 0) {
                alert(`Subtracting ${subtractValue.toFixed(1)} would lower min score to ${newMin.toFixed(2)} (below 0)`);
                return;
            }
            
            this.style.display = 'none';
            document.getElementById('destandardizeProcessingBtn').style.display = 'inline-block';
            document.getElementById('destandardizeProgressContainer').style.display = 'block';
            
            document.getElementById('destandardizeProgressBar').style.width = '10%';
            document.getElementById('destandardizeProgressBar').textContent = '10%';
            document.getElementById('destandardizeProgressText').textContent = 'Starting...';
            
            const url = `/projects/${projectId}/school/${schoolId}/paper/${paperId}/destandardize/`;
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ subtract_value: subtractValue })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.error); });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    startDestandardizeProgressPolling(data.task_id, data.total);
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showError(error.message);
                resetDestandardizeUI();
            });
        });
    }
    
    // ==================== PROGRESS POLLING ====================
    function startProgressPolling(taskId, total) {
        console.log('Starting progress polling for task:', taskId);
        
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const interval = setInterval(function() {
            const url = `/projects/${projectId}/school-paper-standardization-progress/${taskId}/`;
            
            fetch(url)
            .then(response => response.json())
            .then(data => {
                const percent = data.percent || 0;
                progressBar.style.width = percent + '%';
                progressBar.textContent = percent + '%';
                progressText.textContent = `${data.processed || 0}/${data.total || 0} scores processed`;
                
                if (data.status === 'completed' || percent >= 100) {
                    clearInterval(interval);
                    showSuccess(`${data.processed || total} scores updated successfully!`);
                    setTimeout(() => location.reload(), 2000);
                }
            })
            .catch(error => console.error('Progress polling error:', error));
        }, 1000);
        
        window.currentInterval = interval;
    }
    
    function startDestandardizeProgressPolling(taskId, total) {
        console.log('Starting destandardize progress polling for task:', taskId);
        
        const progressBar = document.getElementById('destandardizeProgressBar');
        const progressText = document.getElementById('destandardizeProgressText');
        
        const interval = setInterval(function() {
            const url = `/projects/${projectId}/school-paper-destandardization-progress/${taskId}/`;
            
            fetch(url)
            .then(response => response.json())
            .then(data => {
                const percent = data.percent || 0;
                progressBar.style.width = percent + '%';
                progressBar.textContent = percent + '%';
                progressText.textContent = `${data.processed || 0}/${data.total || 0} scores processed`;
                
                if (data.status === 'completed' || percent >= 100) {
                    clearInterval(interval);
                    showSuccess(`${data.processed || total} scores updated successfully!`);
                    setTimeout(() => location.reload(), 2000);
                }
            })
            .catch(error => console.error('Progress polling error:', error));
        }, 1000);
        
        window.destandardizeInterval = interval;
    }
    
    // ==================== UTILITY FUNCTIONS ====================
    function showSuccess(message) {
        document.getElementById('toastMessage').textContent = message;
        const toast = new bootstrap.Toast(document.getElementById('successToast'));
        toast.show();
    }
    
    function showError(message) {
        document.getElementById('errorMessage').textContent = message;
        const toast = new bootstrap.Toast(document.getElementById('errorToast'));
        toast.show();
    }
    
    function resetStandardizeUI() {
        document.getElementById('startStandardizeBtn').style.display = 'inline-block';
        document.getElementById('processingBtn').style.display = 'none';
        document.getElementById('progressContainer').style.display = 'none';
    }
    
    function resetDestandardizeUI() {
        document.getElementById('startDestandardizeBtn').style.display = 'inline-block';
        document.getElementById('destandardizeProcessingBtn').style.display = 'none';
        document.getElementById('destandardizeProgressContainer').style.display = 'none';
    }
    
    // Clean up on modal hide
    document.getElementById('standardizeModal').addEventListener('hidden.bs.modal', function() {
        if (window.currentInterval) {
            clearInterval(window.currentInterval);
            window.currentInterval = null;
        }
        resetStandardizeUI();
    });
    
    document.getElementById('destandardizeModal').addEventListener('hidden.bs.modal', function() {
        if (window.destandardizeInterval) {
            clearInterval(window.destandardizeInterval);
            window.destandardizeInterval = null;
        }
        resetDestandardizeUI();
    });
});
</script>
{% endblock %}
{% endblock %}