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

{% block content %}
<div class="container-fluid px-4 mt-4">
    
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">
                <i class="fas fa-chart-line text-primary me-2"></i>
                Subject Standardization
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-book me-1"></i>{{ subject.subject_code }} - {{ subject.subject_name_eng }} | 
                <i class="fas fa-school me-1"></i>{{ school.name }} ({{ school.school_code }})
            </p>
        </div>
        <div>
            <a href="{% url 'exams:subject_schools_list' project.project_code subject.subject_id %}" 
               class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Schools
            </a>
            <button onclick="window.print();" class="btn btn-primary ms-2">
                <i class="fas fa-print me-2"></i>Print Report
            </button>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                <i class="fas fa-users me-1"></i> Total Students
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_students }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                <i class="fas fa-check-circle me-1"></i> Pass Rate
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ pass_percent }}%</div>
                            <small>{{ pass_total }} / {{ total_students }} students</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                <i class="fas fa-chart-bar me-1"></i> Subject GPA
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ gpa|floatformat:4 }}</div>
                            <small>Min: {{ min_score|default:"-" }} | Max: {{ max_score|default:"-" }}</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                <i class="fas fa-graduation-cap me-1"></i> Academic Level
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {% if academic_level_id == 1 %}O-Level
                                {% elif academic_level_id == 2 %}A-Level
                                {% else %}Primary{% endif %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-graduation-cap fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Grade Distribution -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-chart-pie me-2"></i>Grade Distribution
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>Grade</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if academic_level_id == 2 %}
                                    <tr><td>A</td><td class="text-success fw-bold">{{ grade_counts.A|default:"0" }}</td><td>{% widthratio grade_counts.A total_students 100 %}%</td></tr>
                                    <tr><td>B</td><td class="text-primary fw-bold">{{ grade_counts.B|default:"0" }}</td><td>{% widthratio grade_counts.B total_students 100 %}%</td></tr>
                                    <tr><td>C</td><td class="text-info fw-bold">{{ grade_counts.C|default:"0" }}</td><td>{% widthratio grade_counts.C total_students 100 %}%</td></tr>
                                    <tr><td>D</td><td class="text-warning fw-bold">{{ grade_counts.D|default:"0" }}</td><td>{% widthratio grade_counts.D total_students 100 %}%</td></tr>
                                    <tr><td>E</td><td class="text-secondary fw-bold">{{ grade_counts.E|default:"0" }}</td><td>{% widthratio grade_counts.E total_students 100 %}%</td></tr>
                                    <tr><td>S</td><td class="text-danger fw-bold">{{ grade_counts.S|default:"0" }}</td><td>{% widthratio grade_counts.S total_students 100 %}%</td></tr>
                                    <tr><td>F</td><td class="text-danger fw-bold">{{ grade_counts.F|default:"0" }}</td><td>{% widthratio grade_counts.F total_students 100 %}%</td></tr>
                                {% elif academic_level_id == 1 %}
                                    <tr><td>A</td><td class="text-success fw-bold">{{ grade_counts.A|default:"0" }}</td><td>{% widthratio grade_counts.A total_students 100 %}%</td></tr>
                                    <tr><td>B</td><td class="text-primary fw-bold">{{ grade_counts.B|default:"0" }}</td><td>{% widthratio grade_counts.B total_students 100 %}%</td></tr>
                                    <tr><td>C</td><td class="text-info fw-bold">{{ grade_counts.C|default:"0" }}</td><td>{% widthratio grade_counts.C total_students 100 %}%</td></tr>
                                    <tr><td>D</td><td class="text-warning fw-bold">{{ grade_counts.D|default:"0" }}</td><td>{% widthratio grade_counts.D total_students 100 %}%</td></tr>
                                    <tr><td>F</td><td class="text-danger fw-bold">{{ grade_counts.F|default:"0" }}</td><td>{% widthratio grade_counts.F total_students 100 %}%</td></tr>
                                {% else %}
                                    <tr><td>A</td><td class="text-success fw-bold">{{ grade_counts.A|default:"0" }}</td><td>{% widthratio grade_counts.A total_students 100 %}%</td></tr>
                                    <tr><td>B</td><td class="text-primary fw-bold">{{ grade_counts.B|default:"0" }}</td><td>{% widthratio grade_counts.B total_students 100 %}%</td></tr>
                                    <tr><td>C</td><td class="text-info fw-bold">{{ grade_counts.C|default:"0" }}</td><td>{% widthratio grade_counts.C total_students 100 %}%</td></tr>
                                    <tr><td>D</td><td class="text-warning fw-bold">{{ grade_counts.D|default:"0" }}</td><td>{% widthratio grade_counts.D total_students 100 %}%</td></tr>
                                    <tr><td>E</td><td class="text-secondary fw-bold">{{ grade_counts.E|default:"0" }}</td><td>{% widthratio grade_counts.E total_students 100 %}%</td></tr>
                                {% endif %}
                            </tbody>
                            <tfoot class="table-active">
                                <tr>
                                    <th>Pass ({% if academic_level_id == 2 %}A-E{% elif academic_level_id == 1 %}A-D{% else %}A-C{% endif %})</th>
                                    <th class="text-success">{{ pass_total }}</th>
                                    <th>{{ pass_percent }}%</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="alert alert-info">
                        <strong>GPA Scale:</strong>
                        {% if academic_level_id == 2 %}
                            A=1, B=2, C=3, D=4, E=5, S=6, F=7
                        {% elif academic_level_id == 1 %}
                            A=1, B=2, C=3, D=4, F=5
                        {% else %}
                            A=1, B=2, C=3, D=4, E=5
                        {% endif %}
                        <br>
                        <strong>Lower GPA indicates better performance.</strong>
                    </div>
                    <div class="alert alert-success">
                        <strong>Passing Criteria:</strong>
                        {% if academic_level_id == 2 %}
                            Grades A, B, C, D, E = Pass
                        {% elif academic_level_id == 1 %}
                            Grades A, B, C, D = Pass
                        {% else %}
                            Grades A, B, C = Pass
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Standardization Form -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-balance-scale me-2"></i>Standardization Controls
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">Add Marks (Standardization)</h6>
                            <div class="input-group mb-3">
                                <input type="number" id="add_value" class="form-control" placeholder="Enter value to add" step="0.01">
                                <button class="btn btn-success" onclick="standardizeSubject('add')">
                                    <i class="fas fa-plus me-1"></i> Add to All Scores
                                </button>
                            </div>
                            <small class="text-muted">This will add the specified value to all student scores (max 99).</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">Subtract Marks (De-standardization)</h6>
                            <div class="input-group mb-3">
                                <input type="number" id="subtract_value" class="form-control" placeholder="Enter value to subtract" step="0.01">
                                <button class="btn btn-warning" onclick="standardizeSubject('subtract')">
                                    <i class="fas fa-minus me-1"></i> Subtract from All Scores
                                </button>
                            </div>
                            <small class="text-muted">This will subtract the specified value from all student scores (min 0).</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Progress Bar -->
            <div id="progressContainer" style="display: none;" class="mt-3">
                <div class="progress">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 0%">0%</div>
                </div>
                <p id="progressStatus" class="text-center mt-2">Processing...</p>
            </div>
        </div>
    </div>

    <!-- Student List -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list me-2"></i>Student Scores (Top 50)
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Student Number</th>
                            <th>Student Name</th>
                            <th>Sex</th>
                            <th>Score %</th>
                            <th>Grade</th>
                            <th>Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student in student_scores %}
                        <tr>
                            <td class="text-center">{{ forloop.counter }}</td>
                            <td>{{ student.student_number }}</td>
                            <td>{{ student.student_name }}</td>
                            <td class="text-center">{{ student.sex }}</td>
                            <td class="text-center fw-bold">{{ student.percentage_score|floatformat:2 }}%</td>
                            <td class="text-center">
                                <span class="badge 
                                    {% if student.grade == 'A' %}bg-success
                                    {% elif student.grade == 'B' %}bg-primary
                                    {% elif student.grade == 'C' %}bg-info
                                    {% elif student.grade == 'D' %}bg-warning
                                    {% else %}bg-danger{% endif %}">
                                    {{ student.grade }}
                                </span>
                            </td>
                            <td class="text-center">{{ student.points|default:"-" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center py-4">No student scores available</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<script>
    let taskId = null;
    let checkInterval = null;
    let currentAction = null;  // Track which action we're performing
    
    function standardizeSubject(action) {
        let value;
        let url;
        let requestBody = {};
        currentAction = action;  // Store the action type
        
        if (action === 'add') {
            value = document.getElementById('add_value').value;
            url = "{% url 'exams:process_school_subject_standardization' project.project_code school.id subject.subject_id %}";
            requestBody = {'add_value': parseFloat(value)};
        } else {
            value = document.getElementById('subtract_value').value;
            url = "{% url 'exams:process_school_subject_destandardization' project.project_code school.id subject.subject_id %}";
            requestBody = {'subtract_value': parseFloat(value)};
        }
        
        if (!value || value <= 0) {
            alert('Please enter a valid positive number');
            return;
        }
        
        // Clear any existing interval
        if (checkInterval) {
            clearInterval(checkInterval);
            checkInterval = null;
        }
        
        // Show progress bar
        document.getElementById('progressContainer').style.display = 'block';
        document.getElementById('progressBar').style.width = '0%';
        document.getElementById('progressBar').innerHTML = '0%';
        document.getElementById('progressStatus').innerHTML = 'Starting process...';
        
        console.log('Sending request to:', url);
        console.log('Request body:', requestBody);
        console.log('Action:', action);
        
        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(requestBody)
        })
        .then(response => response.json())
        .then(data => {
            console.log('Response received:', data);
            
            if (data.success) {
                taskId = data.task_id;
                document.getElementById('progressStatus').innerHTML = `Processing ${data.total} records...`;
                checkProgress(action);  // Pass the action to checkProgress
            } else {
                alert('Error: ' + (data.error || 'Unknown error'));
                document.getElementById('progressContainer').style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            alert('An error occurred. Please try again.');
            document.getElementById('progressContainer').style.display = 'none';
        });
    }
    
    function checkProgress(action) {
        if (!taskId) {
            console.log('No taskId available');
            return;
        }
        
        // Use different progress URLs for add vs subtract
        let progressUrl;
        if (action === 'add') {
            progressUrl = "{% url 'exams:school_subject_standardization_progress' project.project_code 'TASK_ID_PLACEHOLDER' %}".replace('TASK_ID_PLACEHOLDER', taskId);
        } else {
            progressUrl = "{% url 'exams:school_subject_destandardization_progress' project.project_code 'TASK_ID_PLACEHOLDER' %}".replace('TASK_ID_PLACEHOLDER', taskId);
        }
        
        console.log('Checking progress at:', progressUrl);
        console.log('Action:', action);
        
        // Clear any existing interval
        if (checkInterval) {
            clearInterval(checkInterval);
        }
        
        checkInterval = setInterval(function() {
            fetch(progressUrl)
            .then(response => response.json())
            .then(data => {
                console.log('Progress data:', data);
                
                const percent = data.percent || 0;
                document.getElementById('progressBar').style.width = percent + '%';
                document.getElementById('progressBar').innerHTML = percent + '%';
                document.getElementById('progressStatus').innerHTML = `Processed ${data.processed} of ${data.total} records (${percent}%)`;
                
                if (data.status === 'completed') {
                    clearInterval(checkInterval);
                    checkInterval = null;
                    document.getElementById('progressStatus').innerHTML = 'Completed! Reloading page...';
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                } else if (data.status === 'error') {
                    clearInterval(checkInterval);
                    checkInterval = null;
                    document.getElementById('progressStatus').innerHTML = 'Error: ' + (data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error checking progress:', error);
            });
        }, 1000);
    }
    
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>




<style>
    @media print {
        .btn, .card-header .btn, .no-print {
            display: none !important;
        }
        .card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
    }
    .border-left-primary { border-left: 4px solid #4e73df; }
    .border-left-success { border-left: 4px solid #1cc88a; }
    .border-left-warning { border-left: 4px solid #f6c23e; }
    .border-left-info { border-left: 4px solid #36b9cc; }
    .card { border-radius: 12px; overflow: hidden; }
</style>

{% endblock %}