@extends('Admin.Layout.Master')

@section('content-header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h1>Statistics</h1>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-info">
                <h4>Exam Performance</h4>
            </div>
            <div class="card-body">
                <div style="margin: auto;">
                    <canvas id="examChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>


    <div class="card">
        <div class="card-header bg-info">
            <h4>Subjectwise Performance</h4>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($subjects as $subject)
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ $subject->subject_name }}</h5>
                                <canvas id="{{ Str::slug($subject->subject_name) }}-chart"></canvas>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Exam Bar Chart
        const examData = @json($exam);
        const examNames = examData.map(exam => exam.exam_name);
        const securedMarks = examData.map(exam => exam.secured_marks);
        const examCtx = document.getElementById('examChart').getContext('2d');
        const examChart = new Chart(examCtx, {
            type: 'bar',
            data: {
                labels: examNames,
                datasets: [{
                    label: 'Secured Marks',
                    data: securedMarks,
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        reverse: true // Reverse the Y-axis
                    }
                }
            }
        });


        // Subject-wise Pie Charts
        @foreach($subjects as $subject)
            var subjectctx = document.getElementById('{{ Str::slug($subject->subject_name) }}-chart');
            if (subjectctx) {
                var chart = new Chart(subjectctx.getContext('2d'), {
                    type: 'pie',
                    data: {
                        labels: ['Correct', 'Wrong', 'Remaining'],
                        datasets: [{
                            data: [
                                {{ $subject->total_correct_answer }},
                                {{ $subject->total_wrong_questions }},
                                {{ $subject->total_subject_questions - ($subject->total_correct_answer + $subject->total_wrong_questions) }}
                            ],
                            backgroundColor: ['#2ECE89', '#F5365C', '#FFC107'],
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Performance in {{ $subject->subject_name }}'
                            }
                        }
                    }
                });
            }
        @endforeach
    </script>
@endpush