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

{% block content %}

<div class="container mt-4">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">
            {{ project.name }} — School Results Management
        </h4>

        <form method="get" class="d-flex">
            <input type="text" name="q" value="{{ search_query }}"
                   class="form-control form-control-sm me-2"
                   placeholder="Search school...">
            <button class="btn btn-sm btn-primary">
                <i class="fas fa-search"></i>
            </button>
        </form>
    </div>

    <!-- 🔥 BIG PROJECT LIVE SWITCH -->
    <div class="card mb-4">
        <div class="card-body text-center">
            <h5 class="mb-3">PROJECT RESULTS STATUS</h5>

            <button id="projectToggleBtn"
                    data-project-code="{{ project.project_code }}"
                    class="btn btn-lg {% if project.is_live %}btn-success{% else %}btn-danger{% endif %}">
                {% if project.is_live %}
                    <i class="fas fa-eye"></i> RESULTS ARE LIVE
                    <a href="{% url 'exams:home' %}" class="btn btn-primary w-100 mb-2">
                        <i class="fas fa-eye"></i> Click to SEE
                    </a>
                {% else %}
                    <i class="fas fa-eye-slash"></i> RESULTS ARE OFF
                {% endif %}
            </button>
        </div>
    </div>


    
    <!-- TABLE -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead class="table-success">
                 <tr>
                    <th>Code</th>
                    <th>School</th>
                    <th>Region</th>
                    <th>District</th>
                    <th>I</th>
                    <th>II</th>
                    <th>III</th>
                    <th>IV</th>
                    <th>0</th>
                    <th>GPA</th>
                    <th>GRD</th>
                    <th>GPA Status</th>
                    <th width="140">Action</th>
                 </tr>
            </thead>

            <tbody>
                {% for item in page_obj %}
                 <tr>
                    <td>{{ item.school.school_code }}</td>
                    <td>{{ item.school.name }}</td>
                    <td>{{ item.school.region.name }}</td>
                    <td>{{ item.school.district.name }}</td>
                    <td>{{ item.d1|default:"0" }}</td>
                    <td>{{ item.d2|default:"0" }}</td>
                    <td>{{ item.d3|default:"0" }}</td>
                    <td>{{ item.d4|default:"0" }}</td>
                    <td>{{ item.d0|default:"0" }}</td>
                    <td><strong>{{ item.sch_gpa|floatformat:4|default:"-" }}</strong></td>
                    <td>{{ item.sch_gpa_grade|default:"-" }}</td>
                    <td>{{ item.sch_gpa_status|default:"-" }}</td>
                    <td>
                        <button class="btn btn-sm {% if item.sch_release_status %}btn-success{% else %}btn-secondary{% endif %}"
                                data-bs-toggle="modal"
                                data-bs-target="#toggleModal{{ item.school.id }}">
                            {% if item.sch_release_status %}
                                <i class="fas fa-eye"></i> ENABLED
                            {% else %}
                                <i class="fas fa-eye-slash"></i> DISABLED
                            {% endif %}
                        </button>
                    </td>
                 </tr>

                <!-- MODAL -->
                <div class="modal fade" id="toggleModal{{ item.school.id }}">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirm Action</h5>
                                <button class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <div class="modal-body text-center">
                                <p>
                                    School:<br>
                                    <strong>{{ item.school.school_code }} — {{ item.school.name }}</strong>
                                </p>

                                <p>
                                    Are you sure you want to
                                    <strong>
                                        {% if item.sch_release_status %}
                                            HIDE
                                        {% else %}
                                            RELEASE
                                        {% endif %}
                                    </strong>
                                    results display?
                                </p>
                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button class="btn btn-danger school-toggle-btn"
                                        data-project-code="{{ project.project_code }}"
                                        data-school="{{ item.school.id }}">
                                    Confirm
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {% empty %}
                <tr>
                    <td colspan="13" class="text-center text-muted">
                        No schools found
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- PAGINATION -->
    <div class="d-flex justify-content-between align-items-center mt-4">
        <div class="text-muted">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </div>

        <div class="btn-group">
            {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}&q={{ search_query }}"
                   class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-chevron-left"></i> Previous
                </a>
            {% else %}
                <button class="btn btn-outline-secondary btn-sm" disabled>
                    <i class="fas fa-chevron-left"></i> Previous
                </button>
            {% endif %}

            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}&q={{ search_query }}"
                   class="btn btn-primary btn-sm">
                    Next <i class="fas fa-chevron-right"></i>
                </a>
            {% else %}
                <button class="btn btn-secondary btn-sm" disabled>
                    Next <i class="fas fa-chevron-right"></i>
                </button>
            {% endif %}
        </div>
    </div>

</div>


<script>
  const BASE_URL = "https://live24services.com/jermis_rungwe";
</script>

<script>
// Project Live Toggle
document.getElementById("projectToggleBtn").onclick = function() {
    const projectCode = this.dataset.projectCode;
    const btn = this;
    const originalText = btn.innerHTML;
    
    // Disable button and show loading
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    
    fetch(`${BASE_URL}/projects/${projectCode}/toggle-live/`, {
        method: "POST",
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ 
            is_active: {% if project.is_live %}false{% else %}true{% endif %} 
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => Promise.reject(err));
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Show success message
            if (typeof toastr !== 'undefined') {
                toastr.success(data.message);
            } else {
                alert(data.message);
            }
            // Reload after a short delay
            setTimeout(() => {
                location.reload();
            }, 500);
        } else {
            throw new Error(data.error || 'Failed to toggle project status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert(error.message || 'An error occurred. Please try again.');
        // Re-enable button and restore text
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
};

// School Results Toggle
document.querySelectorAll(".school-toggle-btn").forEach(btn => {
    btn.onclick = function(e) {
        e.preventDefault();
        const projectCode = this.dataset.projectCode;
        const schoolId = this.dataset.school;
        const originalText = this.innerHTML;
        
        // Disable button and show loading
        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        
        fetch(`${BASE_URL}/projects/${projectCode}/school/${schoolId}/toggle/`, {
            method: "POST",
            headers: {
                "X-CSRFToken": "{{ csrf_token }}",
                "Content-Type": "application/json"
            }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => Promise.reject(err));
            }
            return response.json();
        })
        .then(data => {
            if (data.ok) {
                // Show success message
                if (typeof toastr !== 'undefined') {
                    toastr.success(data.message);
                } else {
                    alert(data.message);
                }
                // Reload after a short delay
                setTimeout(() => {
                    location.reload();
                }, 500);
            } else {
                throw new Error(data.error || 'Failed to toggle school status');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert(error.message || 'An error occurred. Please try again.');
            // Re-enable button and restore text
            this.disabled = false;
            this.innerHTML = originalText;
        });
    };
});
</script>

{% endblock %}