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

{% block page_title %}ExamScore Standardization - {{ project.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-balance-scale"></i>
                ExamScore Standardization – {{ project.name }} ({{ project.year }})
            </h4>
            <p class="text-muted">Click "Standardize" to add marks to all scores of a paper</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'exams:dashboard' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-list"></i> Subjects & Papers List</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:"-" }}</td>
                                            <td>{{ paper.max_score|default:"-" }}</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>

        <!-- NEW: Button to go to school-level standardization -->
        <a href="{% url 'exams:school_subject_standardization_list' project.id paper.id %}" 
           class="btn btn-sm btn-info">
            <i class="fas fa-school"></i> Schools
        </a>

        <!-- NEW: Button to go to school-level papers -->
        <a href="{% url 'exams:school_paper_standardization_list' project.id paper.id %}" 
           class="btn btn-sm btn-info">
            <i class="fas fa-school"></i> Schools-Papers
        </a>

    </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 subjects found with exam scores
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Standardization Modal -->
<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-balance-scale"></i> 
                    Standardize Paper Scores
                </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="projectId" value="{{ project.id }}">
                
                <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 (hidden initially) -->
                <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-play"></i> Start Standardization
                </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 (Decrease 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> 
                    Destandardize Paper Scores (Decrease Marks)
                </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="projectId" 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. 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 (hidden initially) -->
                <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> Start Destandardization
                </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">Standardization 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;
}
.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #0c63e4;
}
</style> 


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

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded');
    
    // Get CSRF token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
    console.log('CSRF Token found:', csrfToken ? 'YES' : 'NO');
    
    const projectId = document.getElementById('projectId').value;
    console.log('Project ID:', projectId);
    
    // Get all standardize buttons
    const standardizeBtns = document.querySelectorAll('.standardize-btn');
    console.log('Found standardize buttons:', standardizeBtns.length);
    
    // Add click handlers to each button
    standardizeBtns.forEach(function(btn, index) {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            console.log('===================================');
            console.log('Button ' + (index + 1) + ' clicked');
            
            // Get ALL data attributes from button
            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');
            
            // Log all data to console
            console.log('DATA FROM BUTTON:');
            console.log('  paper-id:', paperId);
            console.log('  paper-code:', paperCode);
            console.log('  paper-name:', paperName);
            console.log('  subject-code:', subjectCode);
            console.log('  subject-name:', subjectName);
            console.log('  min-score:', minScore);
            console.log('  max-score:', maxScore);
            
            // Set values in modal
            document.getElementById('paperId').value = paperId || '';
            document.getElementById('modalSubject').textContent = 
                `${subjectCode || 'N/A'} - ${subjectName || 'N/A'}`;
            document.getElementById('modalPaper').textContent = 
                `${paperCode || 'N/A'} - ${paperName || 'N/A'}`;
            document.getElementById('modalMinScore').textContent = 
                parseFloat(minScore || '0').toFixed(2);
            document.getElementById('modalMaxScore').textContent = 
                parseFloat(maxScore || '0').toFixed(2);
            
            // Reset modal state
            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';
            
            // Show modal
            try {
                const modalElement = document.getElementById('standardizeModal');
                if (modalElement) {
                    const modal = new bootstrap.Modal(modalElement);
                    modal.show();
                    console.log('✅ Modal shown successfully');
                }
            } catch (error) {
                console.error('❌ Error showing modal:', error);
                alert('Error showing modal: ' + error.message);
            }
        });
    });


    // Input validation - SHOW WARNING BUT ALLOW OPERATION
    const addValueInput = document.getElementById('addValue');
    if (addValueInput) {
        addValueInput.addEventListener('input', function() {
            const addValue = parseFloat(this.value) || 0;
            const maxScoreText = document.getElementById('modalMaxScore').textContent;
            const maxScore = parseFloat(maxScoreText) || 0;
            const newMax = maxScore + addValue;
            
            const warningEl = document.getElementById('newMaxWarning');
            const warningMsg = document.getElementById('warningMessage');
            
            if (newMax > 99) {
                warningMsg.textContent = `⚠️ Adding ${addValue.toFixed(1)} will raise max score to ${newMax.toFixed(2)}. Scores will be capped at 99.`;
                warningEl.style.display = 'block';
            } else {
                warningEl.style.display = 'none';
            }
        });
    }


    
        // Start button
    // Start button - MODIFIED to allow capping
    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 maxScoreText = document.getElementById('modalMaxScore').textContent;
            const maxScore = parseFloat(maxScoreText) || 0;
            const newMax = maxScore + addValue;
            
            console.log('===================================');
            console.log('START BUTTON CLICKED');
            console.log('  paperId from modal:', paperId);
            console.log('  addValue:', addValue);
            console.log('  current max:', maxScore);
            console.log('  new max:', newMax);
            
            if (!paperId) {
                console.error('❌ No paper ID in modal!');
                showError('Paper ID not found in modal');
                return;
            }
            
            // ✅ REMOVED THE BLOCKING CHECK - Allow operation even if scores exceed 99
            if (newMax > 99) {
                console.log('⚠️ Some scores will be capped at 99 (this is expected behavior)');
                showInfo('Scores will be capped at 99 automatically');
            }
            
            // Show progress UI
            this.style.display = 'none';
            document.getElementById('processingBtn').style.display = 'inline-block';
            document.getElementById('progressContainer').style.display = 'block';
            
            // Show immediate feedback
            document.getElementById('progressBar').style.width = '10%';
            document.getElementById('progressBar').textContent = '10%';
            document.getElementById('progressText').textContent = 'Starting...';
            
            // Call API
            console.log('🔵 Calling API...');
            
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
            const projectId = document.getElementById('projectId').value;
            const url = `/kigoma_regional_results/projects/${projectId}/examscore/${paperId}/standardize/`;
            console.log('Fetch URL:', url);
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({
                    add_value: addValue
                })
            })
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || `HTTP error! status: ${response.status}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', 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: ' + error.message);
                
                // Reset UI
                document.getElementById('startStandardizeBtn').style.display = 'inline-block';
                document.getElementById('processingBtn').style.display = 'none';
                document.getElementById('progressContainer').style.display = 'none';
            });
        });
    }

    // Update progress polling to show capped count
    function startProgressPolling(taskId, total) {
        console.log('Starting progress polling for task:', taskId);
        
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const projectId = document.getElementById('projectId').value;
        
        const interval = setInterval(function() {
            const url = `/kigoma_regional_results/projects/${projectId}/examscore-standardization-progress/${taskId}/`;
            
            fetch(url)
            .then(response => response.json())
            .then(data => {
                console.log('Progress:', 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);
                    
                    let message = '';
                    if (data.capped_count > 0) {
                        message = `${data.processed || total} scores standardized! (${data.capped_count} scores capped at 99)`;
                        console.log('📊 Capping Details:');
                        if (data.capped_details) {
                            data.capped_details.forEach(function(detail) {
                                console.log(`  Student ${detail.student}: ${detail.current} → ${detail.new} (added ${detail.added})`);
                            });
                        }
                    } else {
                        message = `${data.processed || total} scores standardized successfully!`;
                    }
                    showSuccess(message);
                    
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Progress polling error:', error);
            });
        }, 1000);
        
        window.currentInterval = interval;
    }

    // Toast helper functions
    function showSuccess(message) {
        document.getElementById('toastMessage').textContent = message;
        const toastElement = document.getElementById('successToast');
        if (toastElement && typeof bootstrap !== 'undefined') {
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        }
    }

    function showInfo(message) {
        document.getElementById('toastMessage').textContent = message;
        const toastElement = document.getElementById('successToast');
        if (toastElement && typeof bootstrap !== 'undefined') {
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        }
    }

    function showError(message) {
        document.getElementById('errorMessage').textContent = message;
        const toastElement = document.getElementById('errorToast');
        if (toastElement && typeof bootstrap !== 'undefined') {
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        } else {
            alert('Error: ' + message);
        }
    }
    
    console.log('Initialization complete');
});
</script>












<script>
// Destandardize button handlers
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();
        console.log('===================================');
        console.log('Destandardize Button ' + (index + 1) + ' clicked');
        
        // Get ALL data attributes from button
        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');
        
        // Log all data to console
        console.log('DATA FROM BUTTON:');
        console.log('  paper-id:', paperId);
        console.log('  paper-code:', paperCode);
        console.log('  paper-name:', paperName);
        console.log('  subject-code:', subjectCode);
        console.log('  subject-name:', subjectName);
        console.log('  min-score:', minScore);
        console.log('  max-score:', maxScore);
        
        // Set values in modal
        document.getElementById('destandardizePaperId').value = paperId || '';
        document.getElementById('destandardizeModalSubject').textContent = 
            `${subjectCode || 'N/A'} - ${subjectName || 'N/A'}`;
        document.getElementById('destandardizeModalPaper').textContent = 
            `${paperCode || 'N/A'} - ${paperName || 'N/A'}`;
        document.getElementById('destandardizeModalMinScore').textContent = 
            parseFloat(minScore || '0').toFixed(2);
        document.getElementById('destandardizeModalMaxScore').textContent = 
            parseFloat(maxScore || '0').toFixed(2);
        
        // Reset modal state
        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';
    });
});

// Input validation for subtract value
const subtractValueInput = document.getElementById('subtractValue');
if (subtractValueInput) {
    subtractValueInput.addEventListener('input', function() {
        const subtractValue = parseFloat(this.value) || 0;
        const minScoreText = document.getElementById('destandardizeModalMinScore').textContent;
        const minScore = parseFloat(minScoreText) || 0;
        const newMin = minScore - subtractValue;
        
        const warningEl = document.getElementById('newMinWarning');
        const warningMsg = document.getElementById('minWarningMessage');
        
        if (newMin < 0) {
            warningMsg.textContent = `Subtracting ${subtractValue.toFixed(1)} will lower min score to ${newMin.toFixed(2)} (below 0)`;
            warningEl.style.display = 'block';
            console.log('⚠️ Warning: New min would go below 0');
        } else {
            warningEl.style.display = 'none';
        }
    });
}

// Start Destandardize button
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 minScoreText = document.getElementById('destandardizeModalMinScore').textContent;
        const minScore = parseFloat(minScoreText) || 0;
        const newMin = minScore - subtractValue;
        
        console.log('===================================');
        console.log('START DESTANDARDIZE BUTTON CLICKED');
        console.log('  paperId from modal:', paperId);
        console.log('  subtractValue:', subtractValue);
        console.log('  current min:', minScore);
        console.log('  new min:', newMin);
        
        if (!paperId) {
            console.error('❌ No paper ID in modal!');
            alert('Paper ID not found in modal');
            return;
        }
        
        if (newMin < 0) {
            console.error('❌ Would go below minimum allowed score');
            alert(`Subtracting ${subtractValue.toFixed(1)} would lower min score to ${newMin.toFixed(2)} (below 0)`);
            return;
        }
        
        // Show progress UI
        this.style.display = 'none';
        document.getElementById('destandardizeProcessingBtn').style.display = 'inline-block';
        document.getElementById('destandardizeProgressContainer').style.display = 'block';
        
        // Show immediate feedback
        document.getElementById('destandardizeProgressBar').style.width = '10%';
        document.getElementById('destandardizeProgressBar').textContent = '10%';
        document.getElementById('destandardizeProgressText').textContent = 'Starting...';
        
        // Call API
        console.log('🔵 Calling destandardize API...');
        
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
        const projectId = document.getElementById('projectId').value;
        const url = `/kigoma_regional_results/projects/${projectId}/examscore/${paperId}/destandardize/`;
        console.log('Fetch URL:', url);
        
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({
                subtract_value: subtractValue
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(err.error || `HTTP error! status: ${response.status}`);
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                startDestandardizeProgressPolling(data.task_id, data.total);
            } else {
                throw new Error(data.error || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            
            document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
            const toastElement = document.getElementById('errorToast');
            if (toastElement && typeof bootstrap !== 'undefined') {
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
            } else {
                alert('Error: ' + error.message);
            }
            
            // Reset UI
            startDestandardizeBtn.style.display = 'inline-block';
            document.getElementById('destandardizeProcessingBtn').style.display = 'none';
            document.getElementById('destandardizeProgressContainer').style.display = 'none';
        });
    });
}

// Destandardize progress polling function
function startDestandardizeProgressPolling(taskId, total) {
    console.log('Starting destandardize progress polling for task:', taskId);
    
    const progressBar = document.getElementById('destandardizeProgressBar');
    const progressText = document.getElementById('destandardizeProgressText');
    const projectId = document.getElementById('projectId').value;
    
    const interval = setInterval(function() {
        const url = `/projects/${projectId}/examscore-destandardization-progress/${taskId}/`;
        
        fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log('Progress:', 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);
                
                document.getElementById('toastMessage').textContent = 
                    `${data.processed || total} scores destandardized successfully!`;
                const toastElement = document.getElementById('successToast');
                if (toastElement && typeof bootstrap !== 'undefined') {
                    const toast = new bootstrap.Toast(toastElement);
                    toast.show();
                }
                
                setTimeout(function() {
                    location.reload();
                }, 2000);
            }
        })
        .catch(error => {
            console.error('Progress polling error:', error);
        });
    }, 1000);
    
    window.destandardizeInterval = interval;
}

// Reset on modal hide
const destandardizeModal = document.getElementById('destandardizeModal');
if (destandardizeModal) {
    destandardizeModal.addEventListener('hidden.bs.modal', function() {
        console.log('📝 Destandardize modal hidden - cleaning up');
        if (window.destandardizeInterval) {
            clearInterval(window.destandardizeInterval);
            window.destandardizeInterval = null;
        }
        
        const startBtn = document.getElementById('startDestandardizeBtn');
        if (startBtn) startBtn.style.display = 'inline-block';
        
        const processingBtn = document.getElementById('destandardizeProcessingBtn');
        if (processingBtn) processingBtn.style.display = 'none';
        
        const progressContainer = document.getElementById('destandardizeProgressContainer');
        if (progressContainer) progressContainer.style.display = 'none';
    });
}
</script>
{% endblock %}
{% endblock %}