@extends('backend.layouts.app')
@section('head')
    <style>
        #data_pdf{
            width: 100%;
            height: 100%;
        }
        #score_chart {
        width: 100%;
        height: 100%; /* Adjust height as needed */
    }
    </style>
@endsection
@section('content')

<div class="row" id="data_pdf">
    <div class="col-xl-12">
        <div class="card card-height-100">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{$student->name}}</h4>
                <button class="btn btn-primary" id="create_pdf">download</button>
            </div>
            <div class="card-body p-0">
                <div class="row">
                    <div class="col-xxl-12 col-xl-12">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tbody>
                                  <tr>
                                    <th scope="row">Student Name</th>
                                    <td>{{$student->name}}</td>
                                    <th scope="row">Student Score</th>
                                    <td>{{$score}}%</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">Student Grade</th>
                                    <td>{{$student->grade->name}}</td>
                                    <th scope="row">Standard Level</th>
                                    <td>{{$standard['grade']}}</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">Section</th>
                                    <td>{{$student->section->name}}</td>
                                    <th scope="row">Class Average Score</th>
                                    <td >{{$class_avg}}%</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">Exam Subject</th>
                                    <td class="">{{ $exam->title }}</td>
                                    <th scope="row">Class Ranking</th>
                                    <td >{{$student_rank+1}}</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">Exam Date</th>
                                    <td>{{ date('d F Y', strtotime($exam->date_and_time)) }}</td>
                                    <th scope="row">Class Size</th>
                                    <td >{{$student->section->students->count()}}</td>
                                  </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-xl-12" id="score_chart">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Student Score</h4>
                            </div>
                            <div class="card-body p-0 pb-2">
                                <div class="w-100">
                                    <div id="student_score" data-colors='["--vz-warning", "--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xxl-12 col-xl-12">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">COMPETENCY</th>
                                        <th scope="col">STANDARD LEVEL</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    @if(!empty($data))
                                        @foreach ($data as $value)
                                            <tr>
                                                <th scope="row">{{$loop->iteration}}</th>
                                                <td>{{$value['name']}}</td>
                                                <td style="color: {{$value['standard']['color']}}">{{$value['standard']['grade']}}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                  </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div> <!-- end col-->
   
</div>
@endsection
@section('script')
<!-- apexcharts -->
<script src="{{asset('assets/backend/libs/apexcharts/apexcharts.min.js')}}"></script>


<script>
$(document).ready(function () {
        var options = {
            series: [{
            name: 'Score',
            data: ['{{get_score($right_attempt, $total_ques)}}', '{{$class_avg}}'],
            colors: ['#3C8DBC', '#FF5733'],
            }],
            chart: {
            height: 350,
            type: 'bar',
            },
            plotOptions: {
            bar: {
                borderRadius: 0,
                width: 20,
                dataLabels: {
                position: 'top', // top, center, bottom
                },
            },
            },
            colors: ['#3C8DBC', '#FF5733'],
            dataLabels: {
            enabled: true,
            formatter: function (val) {
                return val + "%";
            },
            offsetY: -20,
            style: {
                fontSize: '12px',
                colors: ["#304758"]
            }
            },
            
            xaxis: {
            categories: ["Student Score", "Class Average Score"],
            position: 'top',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            crosshairs: {
                fill: {
                type: 'gradient',
                gradient: {
                    colorFrom: '#D8E3F0',
                    colorTo: '#BED1E6',
                    stops: [0, 100],
                    opacityFrom: 0.4,
                    opacityTo: 0.5,
                }
                }
            },
            tooltip: {
                enabled: true,
            }
            },
            yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: false,
                formatter: function (val) {
                return val + "%";
                }
            }
            
            },
            title: {
            text: '{{$exam->title}}',
            floating: true,
            offsetY: 330,
            align: 'center',
            style: {
                color: '#444'
            }
            }
            };
        var chart = new ApexCharts(
            document.querySelector("#student_score"),
            options
        );
        chart.render();

        document.getElementById('create_pdf').addEventListener('click', function () {
        var element = document.getElementById('data_pdf');
        var opt = {
                margin:       1,
                pagebreak: { mode: 'avoid-all', before: '#page2el' },
                filename:     'chart.pdf',
                image:        { type: 'jpeg', quality: 0.98 },
                html2canvas:  { scale: 4},
                jsPDF:        { unit: 'mm', format: 'tabloid', orientation: 'landscape' }
            };

            html2pdf().from(element).set(opt).save('chart.pdf');
    }); 
})
</script>
@endsection