@extends('backend.layouts.app')
@section('content')
<div class="row mb-2">
    <div class="col-sm text-end">
        <button type="button" class="btn btn-warning" id="create_pdf">Download Report</button>
    </div>
</div>
<div class="row" id="data_pdf">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        
                        <h5 class="card-title mb-0"></h5>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">

                    </ul>

                    <div class="table-responsive table-card mb-1">
                        <table class="table table-bordered align-middle">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>Subject</th>
                                    <th>NO. OF ITEMS</th>
                                    <th>MEAN</th>
                                    <th>MEAN %</th>
                                    <th>FOR IMPROVEMENT</th>  
                                    <th>STANDARD LEVEL</th> 
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                <tr>
                                  <td>{{!is_null($exam->subject) ? $exam->subject->name : 'N/A'}}</td>
                                  <td>{{$exam->questions->count()}}</td>
                                  <td>{{$mean}}</td>
                                  <td>{{$mean_score}}%</td>
                                  <td>{{ 100 - $mean_score}} %</td>
                                  <td style="color: {{$standard_level['color']}}">{{$standard_level['grade']}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xxl-12 col-xl-12">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Standard Level Percentage</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="standard_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{$student->grade->name}} - {{$student->section->name}}</h4>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">

                    </ul>

                    <div class="table-responsive table-card mb-1">
                        <table class="table table-bordered align-middle">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>Student Name</th>
                                    <th>Points</th>
                                    <th>Available points</th>
                                    <th>% Score</th>
                                    <th>Standard Level</th>  
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if(!empty($data))
                                    @foreach($data as $key => $val)
                                        <tr>
                                        <td>{{$val['name']}}</td>
                                        <td>{{$val['right_attempt']}}</td>
                                        <td>{{$val['total_ques']}}</td>
                                        <td>{{$val['score']}}%</td>
                                        <td style="color: {{$val['standard']['color']}}">{{$val['standard']['grade']}}</td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-danger">BEGINNING</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="beginner_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-danger">BEGINNING</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="beginner_level_compare" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <!-- STudent for familiar level  -->
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-warning">FAMILIAR</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="familiar_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-warning">FAMILIAR</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="familiar_level_compare" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <!-- STudent for competent level  -->
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-warning">COMPETENT</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="competent_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-warning">COMPETENT</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="competent_level_compare" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <!-- master level -->
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-success">MASTER</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="master_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-success">MASTER</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="master_level_compare" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <!-- advance level -->
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-primary">ADVANCE</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="advance_level_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-height-100 p-5">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Students in the <span class="text-primary">ADVANCE</span> level</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="advance_level_compare" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    <!-- compentecies data  -->
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Student Average Score and Standard Level</h4>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">

                    </ul>

                    <div class="table-responsive table-card mb-1">
                        <table class="table table-bordered align-middle">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>Student Name</th>
                                    <th>Average Score</th>
                                    <th>Standard Level</th>  
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if(!empty($data))
                                    @foreach($data as $key => $val)
                                        <tr>
                                        <td>{{$val['name']}}</td>
                                        <td>{{$val['score']}}%</td>
                                        <td style="color: {{$val['standard']['color']}}">{{$val['standard']['grade']}}</td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{asset('assets/backend/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
    $(document).ready(function(){
        var beg = "{{count($beginner)}}";
        beg = parseInt(beg);
        var options = {
            series: [beg, parseInt("{{count($familiar)}}"), parseInt("{{count($competent)}}"),  parseInt("{{count($master)}}"), parseInt("{{count($advance)}}")],
            chart: {
            width: 520,
            type: 'pie',
            },
            labels: ['Beginner', 'Familiar', 'Competent', 'Master', 'Advanced'],
            colors: ['#fc3003', '#fce303', '#fc7703', '#5bab38', '#3e64c9'],
            responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                width: 200
                },
                legend: {
                position: 'bottom'
                }
            }
            }]
            };
            var chart = new ApexCharts(document.querySelector("#standard_level_chart"), options);
            chart.render();

        /**Beginner Level Chart */

        var beginner_level = {
          series: [{
            name: 'Score',
            data: [
                @if(!empty($beginner))
                    @foreach($beginner as $st)
                        parseInt("{{$st['score']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 350
            },
            colors: ['#FF5733'],
            plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
            }
            },
            dataLabels: {
            enabled: false
            },
            xaxis: {
            categories: [
                @if(!empty($beginner))
                    @foreach($beginner as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            }
        };

        var chart = new ApexCharts(document.querySelector("#beginner_level_chart"), beginner_level);
        chart.render();

        /**Compare beginners data */
        var options = {
          series: [{
            name: 'Points',
            data: [
                @if(!empty($beginner))
                    @foreach($beginner as $st)
                        parseInt("{{$st['right_attempt']}}"),
                    @endforeach
                @endif
            ]
            },{
            name: 'Available Points',
            data: [
                @if(!empty($beginner))
                    @foreach($beginner as $st)
                        parseInt("{{$st['total_ques']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 430
            },
            plotOptions: {
            bar: {
                horizontal: true,
                dataLabels: {
                position: 'top',
                },
            }
            },
            dataLabels: {
            enabled: true,
            offsetX: -6,
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
            },
            stroke: {
            show: true,
            width: 1,
            colors: ['#fff']
            },
            tooltip: {
            shared: true,
            intersect: false
            },
            xaxis: {
            categories: [
                @if(!empty($beginner))
                    @foreach($beginner as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            },
        };

        var chart = new ApexCharts(document.querySelector("#beginner_level_compare"), options);
        chart.render();

        /**Familiar level chart */
        var familiar_level = {
          series: [{
            name: 'Score',
            data: [
                @if(!empty($familiar))
                    @foreach($familiar as $st)
                        parseInt("{{$st['score']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 350
            },
            colors: ['#fce303'],
            plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
            }
            },
            dataLabels: {
            enabled: false
            },
            xaxis: {
            categories: [
                @if(!empty($familiar))
                    @foreach($familiar as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            }
        };

        var chart = new ApexCharts(document.querySelector("#familiar_level_chart"), familiar_level);
        chart.render();

        /**Compare familiar data */
        var familiar_compare = {
          series: [{
            name: 'Points',
            data: [
                @if(!empty($familiar))
                    @foreach($familiar as $st)
                        parseInt("{{$st['right_attempt']}}"),
                    @endforeach
                @endif
            ]
            },{
            name: 'Available Points',
            data: [
                @if(!empty($familiar))
                    @foreach($familiar as $st)
                        parseInt("{{$st['total_ques']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 430
            },
            plotOptions: {
            bar: {
                horizontal: true,
                dataLabels: {
                position: 'top',
                },
            }
            },
            dataLabels: {
            enabled: true,
            offsetX: -6,
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
            },
            stroke: {
            show: true,
            width: 1,
            colors: ['#fff']
            },
            tooltip: {
            shared: true,
            intersect: false
            },
            xaxis: {
            categories: [
                @if(!empty($familiar))
                    @foreach($familiar as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            },
        };

        var chart = new ApexCharts(document.querySelector("#familiar_level_compare"), familiar_compare);
        chart.render();

        /**Competent level chart */
        var competent_level = {
          series: [{
            name: 'Score',
            data: [
                @if(!empty($competent))
                    @foreach($competent as $st)
                        parseInt("{{$st['score']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 350
            },
            colors: ['#fc7703'],
            plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
            }
            },
            dataLabels: {
            enabled: false
            },
            xaxis: {
            categories: [
                @if(!empty($competent))
                    @foreach($competent as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            }
        };

        var chart = new ApexCharts(document.querySelector("#competent_level_chart"), competent_level);
        chart.render();

        /**Compare competent data */
        var competent_compare = {
          series: [{
            name: 'Points',
            data: [
                @if(!empty($competent))
                    @foreach($competent as $st)
                        parseInt("{{$st['right_attempt']}}"),
                    @endforeach
                @endif
            ]
            },{
            name: 'Available Points',
            data: [
                @if(!empty($competent))
                    @foreach($competent as $st)
                        parseInt("{{$st['total_ques']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 430
            },
            plotOptions: {
            bar: {
                horizontal: true,
                dataLabels: {
                position: 'top',
                },
            }
            },
            dataLabels: {
            enabled: true,
            offsetX: -6,
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
            },
            stroke: {
            show: true,
            width: 1,
            colors: ['#fff']
            },
            tooltip: {
            shared: true,
            intersect: false
            },
            xaxis: {
            categories: [
                @if(!empty($competent))
                    @foreach($competent as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            },
        };
        var chart = new ApexCharts(document.querySelector("#competent_level_compare"), competent_compare);
        chart.render();

        /**Master level chart */
        var master_level = {
          series: [{
            name: 'Score',
            data: [
                @if(!empty($master))
                    @foreach($master as $st)
                        parseInt("{{$st['score']}}"),
                    @endforeach
                @endif
            ]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        colors: ['#5bab38'],
        plotOptions: {
          bar: {
            borderRadius: 4,
            horizontal: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        xaxis: {
          categories: [
            @if(!empty($master))
                @foreach($master as $st)
                    '{{$st['name']}}',
                @endforeach
            @endif
          ],
        }
        };

        var chart = new ApexCharts(document.querySelector("#master_level_chart"), master_level);
        chart.render();

        /**Compare master data */
        var master_compare = {
          series: [{
            name: 'Points',
            data: [
                @if(!empty($master))
                    @foreach($master as $st)
                        parseInt("{{$st['right_attempt']}}"),
                    @endforeach
                @endif
            ]
            },{
            name: 'Available Points',
            data: [
                @if(!empty($master))
                    @foreach($master as $st)
                        parseInt("{{$st['total_ques']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 430
            },
            plotOptions: {
            bar: {
                horizontal: true,
                dataLabels: {
                position: 'top',
                },
            }
            },
            dataLabels: {
            enabled: true,
            offsetX: -6,
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
            },
            stroke: {
            show: true,
            width: 1,
            colors: ['#fff']
            },
            tooltip: {
            shared: true,
            intersect: false
            },
            xaxis: {
            categories: [
                @if(!empty($master))
                    @foreach($master as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            },
        };
        var chart = new ApexCharts(document.querySelector("#master_level_compare"), master_compare);
        chart.render();

        /**Advance level chart */
        var advance_level = {
          series: [{
            name: 'Score',
            data: [
                @if(!empty($advance))
                    @foreach($advance as $st)
                        parseInt("{{$st['score']}}"),
                    @endforeach
                @endif
            ]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        colors: ['#3e64c9'],
        plotOptions: {
          bar: {
            borderRadius: 4,
            horizontal: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        xaxis: {
          categories: [
            @if(!empty($advance))
                @foreach($advance as $st)
                    '{{$st['name']}}',
                @endforeach
            @endif
          ],
        }
        };

        var chart = new ApexCharts(document.querySelector("#advance_level_chart"), advance_level);
        chart.render();

        /**Compare advance data */
        var advance_compare = {
          series: [{
            name: 'Points',
            data: [
                @if(!empty($advance))
                    @foreach($advance as $st)
                        parseInt("{{$st['right_attempt']}}"),
                    @endforeach
                @endif
            ]
            },{
            name: 'Available Points',
            data: [
                @if(!empty($advance))
                    @foreach($advance as $st)
                        parseInt("{{$st['total_ques']}}"),
                    @endforeach
                @endif
            ]
            }],
            chart: {
            type: 'bar',
            height: 430
            },
            plotOptions: {
            bar: {
                horizontal: true,
                dataLabels: {
                position: 'top',
                },
            }
            },
            dataLabels: {
            enabled: true,
            offsetX: -6,
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
            },
            stroke: {
            show: true,
            width: 1,
            colors: ['#fff']
            },
            tooltip: {
            shared: true,
            intersect: false
            },
            xaxis: {
            categories: [
                @if(!empty($advance))
                    @foreach($advance as $st)
                        '{{$st['name']}}',
                    @endforeach
                @endif
            ],
            },
        };
        var chart = new ApexCharts(document.querySelector("#advance_level_compare"), advance_compare);
        chart.render();

    });

    $(document).ready(function(){
        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