@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 text-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{$grade->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>Subject</th>
                                    <th>Number 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">
                                @if(!empty($data))
                                    @foreach($data as $key => $val)
                                        <tr>
                                        <td>{{$val['name']}}</td>
                                        <td>{{$val['no_of_items']}}</td>
                                        <td>{{$val['mean']}}</td>
                                        <td>{{$val['mean_score']}}%</td>
                                        <td>{{$val['for_imp']}}</td>
                                        <td style="color: {{$val['standard_level']['color']}}">{{$val['standard_level']['grade']}}</td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if(!empty($data))
        @foreach($data as $key => $val)
            <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">{{$val['name']}} Standard level Percentage</h4>
                    </div>
                    <div class="card-body p-0">
                        <div>
                            <div id="subject_chart_{{$key}}" class="apex-charts" dir="ltr"></div>
                        </div>
                    </div><!-- end card body -->
                </div><!-- end card -->
            </div>
        @endforeach
    @endif
</div>
@endsection
@section('script')
<script src="{{asset('assets/backend/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
    $(document).ready(function(){
        @if(!empty($data))
            @foreach($data as $key => $val)
                @php 
                 $chart = $val['graph_data'];
                @endphp
                var options = {
                    series: [parseInt("{{count($chart['beginner'])}}"), parseInt("{{count($chart['familiar'])}}"), parseInt("{{count($chart['competent'])}}"),  parseInt("{{count($chart['master'])}}"), parseInt("{{count($chart['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("#subject_chart_{{$key}}"), options);
                chart.render();
            @endforeach
        @endif

        

    });

    $(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