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

{% block page_title %}Subject 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>
                Subject Standardization – {{ project.name }} ({{ project.year }})
            </h4>
            <p class="text-muted">Click "Standardize" to add marks to all scores of a subject</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 List</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>Subject</th>
            <th>Sat</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            {% if academic_level_id == 2 %}
                <th>D</th>
                <th>E</th>
                <th>S</th>
                <th>F</th>
            {% elif academic_level_id == 1 %}
                <th>D</th>
                <th>F</th>
            {% else %}
                <th>D</th>
                <th>E</th>
                <th>F</th>
            {% endif %}
            <th>Pass</th>
            <th>% Pass</th>
            <th>GPA</th>
            <th>Min</th>
            <th>Max</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for subject in subjects %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>
                <strong>{{ subject.code }}</strong> - {{ subject.name }}
            </td>
            <td>{{ subject.total }}</td>
            <td class="text-success fw-bold">{{ subject.A }}</td>
            <td class="text-primary fw-bold">{{ subject.B }}</td>
            <td class="text-info fw-bold">{{ subject.C }}</td>
            
            {% if academic_level_id == 2 %}
                <!-- A-Level: Show D, E, S, F -->
                <td class="text-warning fw-bold">{{ subject.D }}</td>
                <td class="text-secondary fw-bold">{{ subject.E }}</td>
                <td class="text-danger fw-bold">{{ subject.S }}</td>
                <td class="text-danger fw-bold">{{ subject.F }}</td>
                <td class="fw-bold">{{ subject.pass_total }}</td>
                <td>{{ subject.pass_percent }}%</td>
                
            {% elif academic_level_id == 1 %}
                <!-- O-Level: Show D, F -->
                <td class="text-warning fw-bold">{{ subject.D }}</td>
                <td class="text-danger fw-bold">{{ subject.F }}</td>
                <td class="fw-bold">{{ subject.pass_total }}</td>
                <td>{{ subject.pass_percent }}%</td>
                
            {% else %}
                <!-- Primary Level: Show D, E, F -->
                <td class="text-warning fw-bold">{{ subject.D }}</td>
                <td class="text-secondary fw-bold">{{ subject.E }}</td>
                <td class="text-danger fw-bold">{{ subject.F }}</td>
                <td class="fw-bold">{{ subject.pass_total }}</td>
                <td>{{ subject.pass_percent }}%</td>
            {% endif %}
            
            <td class="fw-bold bg-light">{{ subject.gpa|floatformat:4 }}</td>
            <td>{{ subject.min_score|default:"-" }}</td>
            <td>{{ subject.max_score|default:"-" }}</td>
            <td>
                <button class="btn btn-sm btn-success standardize-btn" 
                        data-bs-toggle="modal"
                        data-bs-target="#standardizeModal"
                        data-subject-id="{{ subject.id }}"
                        data-subject-code="{{ subject.code }}"
                        data-subject-name="{{ subject.name }}"
                        data-min-score="{{ subject.min_score|default:'0' }}"
                        data-max-score="{{ subject.max_score|default:'0' }}">
                    <i class="fas fa-balance-scale"></i> Standardize
                </button>
                <a href="{% url 'exams:subject_schools_list' project.project_code subject.id %}" 
                   class="btn btn-sm btn-info">
                    <i class="fas fa-school"></i> Schools
                </a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="16" class="text-center py-4">
                <i class="fas fa-info-circle"></i> No subjects found
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
            </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 Subject
                </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="subjectId" value="">
                <input type="hidden" id="projectId" value="{{ project.id }}">
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Subject Code:</label>
                        <div id="modalSubjectCode" class="form-control-plaintext h5"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="fw-bold">Subject Name:</label>
                        <div id="modalSubjectName" 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>

<!-- 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;
}
</style>

{% block extra_js %}
<script>
// SIMPLE DIRECT JAVASCRIPT - WITH DATA VERIFICATION
console.log('Subject 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 = '{{ project.id }}';
    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 subjectId = this.getAttribute('data-subject-id');
            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 to verify
            console.log('DATA FROM BUTTON:');
            console.log('  subject-id:', subjectId);
            console.log('  subject-code:', subjectCode);
            console.log('  subject-name:', subjectName);
            console.log('  min-score:', minScore);
            console.log('  max-score:', maxScore);
            
            // VERIFICATION: Check if data exists
            if (!subjectId) {
                console.error('❌ ERROR: subject-id is MISSING!');
                alert('Error: Subject ID is missing!');
                return;
            }
            
            if (!subjectCode) {
                console.error('❌ ERROR: subject-code is MISSING!');
            } else {
                console.log('✅ subject-code found:', subjectCode);
            }
            
            if (!subjectName) {
                console.error('❌ ERROR: subject-name is MISSING!');
            } else {
                console.log('✅ subject-name found:', subjectName);
            }
            
            // Set values in modal - VERIFY each element exists
            const subjectIdEl = document.getElementById('subjectId');
            const modalCodeEl = document.getElementById('modalSubjectCode');
            const modalNameEl = document.getElementById('modalSubjectName');
            const modalMinEl = document.getElementById('modalMinScore');
            const modalMaxEl = document.getElementById('modalMaxScore');
            
            // Check if all modal elements exist
            if (!subjectIdEl) console.error('❌ Element #subjectId not found!');
            if (!modalCodeEl) console.error('❌ Element #modalSubjectCode not found!');
            if (!modalNameEl) console.error('❌ Element #modalSubjectName not found!');
            if (!modalMinEl) console.error('❌ Element #modalMinScore not found!');
            if (!modalMaxEl) console.error('❌ Element #modalMaxScore not found!');
            
            // Set the values
            if (subjectIdEl) subjectIdEl.value = subjectId || '';
            if (modalCodeEl) modalCodeEl.textContent = subjectCode || 'N/A';
            if (modalNameEl) modalNameEl.textContent = subjectName || 'N/A';
            if (modalMinEl) modalMinEl.textContent = parseFloat(minScore || '0').toFixed(2);
            if (modalMaxEl) modalMaxEl.textContent = parseFloat(maxScore || '0').toFixed(2);
            
            // VERIFY the values were set correctly
            console.log('VALUES SET IN MODAL:');
            console.log('  #subjectId value:', subjectIdEl ? subjectIdEl.value : 'ELEMENT MISSING');
            console.log('  #modalSubjectCode text:', modalCodeEl ? modalCodeEl.textContent : 'ELEMENT MISSING');
            console.log('  #modalSubjectName text:', modalNameEl ? modalNameEl.textContent : 'ELEMENT MISSING');
            console.log('  #modalMinScore text:', modalMinEl ? modalMinEl.textContent : 'ELEMENT MISSING');
            console.log('  #modalMaxScore text:', modalMaxEl ? modalMaxEl.textContent : 'ELEMENT MISSING');
            
            // Reset modal state
            const addValueEl = document.getElementById('addValue');
            const warningEl = document.getElementById('newMaxWarning');
            const progressEl = document.getElementById('progressContainer');
            const startBtnEl = document.getElementById('startStandardizeBtn');
            const processingBtnEl = document.getElementById('processingBtn');
            
            if (addValueEl) addValueEl.value = '1.0';
            if (warningEl) warningEl.style.display = 'none';
            if (progressEl) progressEl.style.display = 'none';
            if (startBtnEl) startBtnEl.style.display = 'inline-block';
            if (processingBtnEl) processingBtnEl.style.display = 'none';
            
            // Show modal
            try {
                const modalElement = document.getElementById('standardizeModal');
                if (modalElement) {
                    // Check if Bootstrap is available
                    if (typeof bootstrap !== 'undefined') {
                        const modal = new bootstrap.Modal(modalElement);
                        modal.show();
                        console.log('✅ Modal shown successfully');
                    } else {
                        console.error('❌ Bootstrap is not loaded!');
                        // Try jQuery fallback if available
                        if (typeof $ !== 'undefined' && $.fn.modal) {
                            $(modalElement).modal('show');
                            console.log('✅ Modal shown using jQuery fallback');
                        } else {
                            alert('Bootstrap modal cannot be shown. Check if Bootstrap JS is loaded.');
                        }
                    }
                } else {
                    console.error('❌ Modal element #standardizeModal not found!');
                }
            } catch (error) {
                console.error('❌ Error showing modal:', error);
                alert('Error showing modal: ' + error.message);
            }
            
            console.log('===================================');
        });
    });
    
    // Input validation
    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)} (exceeds 99)`;
                warningEl.style.display = 'block';
                console.log('⚠️ Warning: New max would exceed 99');
            } else {
                warningEl.style.display = 'none';
            }
        });
    }


    // Start button
    const startBtn = document.getElementById('startStandardizeBtn');
    if (startBtn) {
        startBtn.addEventListener('click', function() {
            const subjectId = document.getElementById('subjectId').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('  subjectId from modal:', subjectId);
            console.log('  addValue:', addValue);
            console.log('  current max:', maxScore);
            console.log('  new max:', newMax);
            
            if (!subjectId) {
                console.error('❌ No subject ID in modal!');
                alert('Subject ID not found in modal');
                return;
            }
            
            if (newMax > 99) {
                console.error('❌ Would exceed maximum allowed score');
                alert(`Adding ${addValue.toFixed(1)} would raise max score to ${newMax.toFixed(2)} (exceeds 99)`);
                return;
            }
            
            // 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...';
            
            // REAL API CALL - WITHOUT /exams/ prefix
            console.log('🔵 Calling real API...');
            
            // Get CSRF token
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
            const projectId = document.getElementById('projectId').value;
            
            // IMPORTANT: Use the correct URL without /exams/
            const baseUrl = window.location.origin; // Gets http://127.0.0.1:8000
            const url = `${baseUrl}/projects/${projectId}/subject/${subjectId}/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);
                console.log('Response URL:', response.url);
                
                if (response.status === 404) {
                    // Try alternative URL without the full path
                    const altUrl = `/projects/${projectId}/subject/${subjectId}/standardize/`;
                    console.log('Trying alternative URL:', altUrl);
                    return fetch(altUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': csrfToken
                        },
                        body: JSON.stringify({
                            add_value: addValue
                        })
                    });
                }
                
                if (!response.ok) {
                    // Try to get error message from response
                    return response.text().then(text => {
                        try {
                            const json = JSON.parse(text);
                            throw new Error(json.error || `HTTP error! status: ${response.status}`);
                        } catch (e) {
                            throw new Error(`HTTP error! status: ${response.status}. Response: ${text.substring(0, 100)}`);
                        }
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                if (data.success) {
                    // Start polling for progress
                    startProgressPolling(data.task_id, data.total, projectId);
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                
                // Show error toast
                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
                startBtn.style.display = 'inline-block';
                document.getElementById('processingBtn').style.display = 'none';
                document.getElementById('progressContainer').style.display = 'none';
            });
        });
    }

    // Progress polling function
    function startProgressPolling(taskId, total, projectId) {
        console.log('Starting progress polling for task:', taskId);
        
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const interval = setInterval(function() {
            // IMPORTANT: Use correct URL without /exams/
            const baseUrl = window.location.origin;
            const url = `${baseUrl}/projects/${projectId}/standardization-progress/${taskId}/`;
            
            fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return 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);
                    
                    // Show success
                    document.getElementById('toastMessage').textContent = 
                        `${data.processed || total} scores standardized successfully!`;
                    const toastElement = document.getElementById('successToast');
                    if (toastElement && typeof bootstrap !== 'undefined') {
                        const toast = new bootstrap.Toast(toastElement);
                        toast.show();
                    }
                    
                    // Reload after 2 seconds to show updated stats
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Progress polling error:', error);
            });
        }, 1000); // Poll every second
        
        // Store interval to clear on modal hide
        window.currentInterval = interval;
    }

    // Progress polling function
    function startProgressPolling(taskId, total, projectId) {
        console.log('Starting progress polling for task:', taskId);
        
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const interval = setInterval(function() {
            fetch(`/projects/${projectId}/standardization-progress/${taskId}/`)
            .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);
                    
                    // Show success
                    document.getElementById('toastMessage').textContent = 
                        `${data.processed || total} scores standardized successfully!`;
                    const toastElement = document.getElementById('successToast');
                    if (toastElement && typeof bootstrap !== 'undefined') {
                        const toast = new bootstrap.Toast(toastElement);
                        toast.show();
                    }
                    
                    // Reload after 2 seconds to show updated stats
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Progress polling error:', error);
            });
        }, 1000); // Poll every second
        
        // Store interval to clear on modal hide
        window.currentInterval = interval;
    }
        
    // Reset on modal hide
    const modalElement = document.getElementById('standardizeModal');
    if (modalElement) {
        modalElement.addEventListener('hidden.bs.modal', function() {
            console.log('📝 Modal hidden - cleaning up');
            if (window.currentInterval) {
                clearInterval(window.currentInterval);
                window.currentInterval = null;
                console.log('  Cleared progress interval');
            }
            
            const startBtn = document.getElementById('startStandardizeBtn');
            if (startBtn) startBtn.style.display = 'inline-block';
            
            const processingBtn = document.getElementById('processingBtn');
            if (processingBtn) processingBtn.style.display = 'none';
            
            const progressContainer = document.getElementById('progressContainer');
            if (progressContainer) progressContainer.style.display = 'none';
        });
    }
    
    // Check if any buttons exist
    if (standardizeBtns.length === 0) {
        console.warn('⚠️ No standardize buttons found on page!');
    } else {
        console.log(`✅ Found ${standardizeBtns.length} standardize buttons`);
    }
    
    console.log('Initialization complete - ready for testing');
});
</script>
{% endblock %}
{% endblock %}