@extends('index')
@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">

                    <div class="page-title-box d-md-flex justify-content-md-between align-items-center">
                        <h4 class="page-title">{{ $title }}</h4>
                        <div class="">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">Admin</a></li>
                                <li class="breadcrumb-item active">Marks Report</li>
                            </ol>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            @include('layouts.flashmessages')
                                        </div>
                                    </div>
                                </div>
                                <div class="row card-body">
                                    <div class="row justify-content-center">

                                        <div class="col-sm-3">
                                            <label for="classSelect" class="form-label">Class</label>
                                            <select class="form-select" id="classSelect" onchange="getDivisions(this.value)" required>
                                                <option value="">Select Class</option>
                                                @foreach($classes as $class)
                                                    <option value="{{ $class->classId }}" data-name="{{ $class->className }}">{{ $class->className }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-sm-3">
                                            <label for="divisionSelect" class="form-label">Division</label>
                                            <select class="form-select" id="divisionSelect" required>
                                                <option value="">Select Division</option>
                                            </select>
                                        </div>

                                        <div class="col-sm-3">
                                            <label for="examSelect" class="form-label">Exams</label>
                                            <select class="form-select" id="examSelect" required>
                                                <option value="">Select Exam</option>
                                            </select>
                                        </div>

                                        <div class="col-sm-3">
                                            <button type="button" class="btn btn-primary mt-3" id="viewMarksBtn">View Marks</button>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <div id="reportContainer"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('contentjs')
<script>
$(document).ready(function () {

    // When class changes, load divisions
    $('#classSelect').on('change', function () {
        var classId = $(this).val();
        getDivisions(classId);
        $('#examSelect').html('<option value="">Select Exam</option>');
        $('#reportContainer').empty();
    });

    $('#divisionSelect').on('change', function () {
        var classId = $('#classSelect').val();
        var divisionId = $(this).val();
        getExams(classId, divisionId);

        $('#reportContainer').empty();
    });

    $('#viewMarksBtn').on('click', function () {
        var classId = $('#classSelect').val();
        var divisionId = $('#divisionSelect').val();
        var examId = $('#examSelect').val();

        if (!classId || !divisionId || !examId) {
            alert('Please select Class, Division, and Exam before viewing marks.');
            return;
        }
        // alert('Class ID: ' + classId + ', Division ID: ' + divisionId + ', Exam ID: ' + examId); // Debugging alert
        var url = "{{ url('/') }}/getMarksReport";

        $('#reportContainer').html('<p class="text-muted">Loading...</p>');

        $.get(url, {
            classId: classId,
            divisionId: divisionId,
            examId: examId
        })
        .done(function (response) {
            renderReport(response);
        })
        .fail(function () {
            $('#reportContainer').html('<p class="text-danger">Failed to load marks report.</p>');
        });
    });

});

function getDivisions(classId) {
    var divisionDropdown = $('#divisionSelect');

    if (!classId) {
        divisionDropdown.html('<option value="">Select Division</option>');
        return;
    }

    var url = "{{ url('/') }}/getDivisions/" + classId;

    $.get(url)
        .done(function (data) {
            divisionDropdown.empty();
            divisionDropdown.append('<option value="">Select Division</option>');
            $.each(data, function (index, division) {
                divisionDropdown.append(
                    `<option value="${division.id}" data-name="${division.name}">${division.name}</option>`
                );
            });
        })
        .fail(function () {
            divisionDropdown.html('<option value="">Select Division</option>');
        });
}

function getExams(classId, divisionId) {
    var examDropdown = $('#examSelect');

    if (!classId || !divisionId) {
        examDropdown.html('<option value="">Select Exam</option>');
        return;
    }
    // alert('Class ID: ' + classId + ', Division ID: ' + divisionId); // Debugging alert
    var url = "{{ url('/') }}/getExams/" + classId + "/" + divisionId;

    $.get(url)
        .done(function (data) {
            examDropdown.empty();
            examDropdown.append('<option value="">Select Exam</option>');
            $.each(data, function (index, exam) {
                examDropdown.append(
                    `<option value="${exam.EId}" data-name="${exam.examName}">${exam.examName}</option>`
                );
            });
        })
        .fail(function () {
            examDropdown.html('<option value="">Select Exam</option>');
        });
}

function renderReport(response) {
    var container = $('#reportContainer');
    container.empty();

    if (!response || response.status !== 'success' || !response.data || !response.data.students.length) {
        container.html('<p class="text-muted">No data found.</p>');
        return;
    }

    var data = response.data;

    var html = '<div class="table-responsive"><table class="table table-bordered align-middle text-center mb-0">';
    html += '<thead class="table-light"><tr>';
    html += '<th></th><th class="text-start">Roll No</th><th class="text-start">Student Name</th>';
    html += '<th>Total</th><th>%</th><th>Rank</th></tr></thead><tbody>';

    data.students.forEach(function (student, idx) {
        var rowId = 'student-detail-' + idx;

        html += '<tr class="student-toggle-row" style="cursor:pointer" data-target="#' + rowId + '">';
        html += '<td><i class="fas fa-chevron-right toggle-icon"></i></td>';
        html += '<td class="text-start">' + student.rollno + '</td>';
        html += '<td class="text-start">' + student.student_name + '</td>';
        html += '<td>' + student.total_scored + '/' + student.total_max + '</td>';
        html += '<td>' + student.percentage + '%</td>';
        html += '<td><span class="badge bg-primary-subtle text-primary">' + student.rank + '</span></td>';
        html += '</tr>';

        html += '<tr id="' + rowId + '" class="student-detail-row" style="display:none;">';
        html += '<td colspan="6" class="p-0">';
        html += '<div class="p-3 bg-light">';
        html += '<table class="table table-sm table-bordered mb-0 bg-white">';
        html += '<thead><tr><th class="text-start">Subject</th><th>Scored</th><th>Max</th><th>%</th></tr></thead><tbody>';

        student.subjects.forEach(function (subj) {
            var display = subj.attendence_status === 'Absent'
                ? '<span class="text-danger">Absent</span>'
                : (subj.scored_marks !== null ? subj.scored_marks : '-');
            var pct = subj.percentage !== null ? subj.percentage + '%' : '-';

            html += '<tr>';
            html += '<td class="text-start">' + subj.subject_name + '</td>';
            html += '<td>' + display + '</td>';
            html += '<td>' + subj.max_mark + '</td>';
            html += '<td>' + pct + '</td>';
            html += '</tr>';
        });

        html += '</tbody></table></div></td></tr>';
    });

    html += '</tbody></table></div>';
    container.html(html);

    // Toggle behavior
    $('.student-toggle-row').on('click', function () {
        var target = $($(this).data('target'));
        var icon = $(this).find('.toggle-icon');

        target.slideToggle(150);
        icon.toggleClass('fa-chevron-right fa-chevron-down');
    });
}
</script>
@endsection