@extends('backend.layouts.app')
@section('head')
    <style>
        .apexcharts-yaxis-label {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            width: 100% !important;
            padding-right: 20px !important;
            text-align: left !important;
            max-width: none !important;
        }

        .apexcharts-yaxis {
            max-width: none !important;
            width: auto !important;
        }

        .apexcharts-yaxis-texts-g {
            transform: translateX(-10px) !important; /* Adjust as needed to give more space */
        }
    </style>
@endsection
@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">
                        <span class="card-title mb-0" style="color: darkgoldenrod; font-size: 32px; font-weight:500">{{$exam->title}} </span> <span>( Learning Competencies )</span>
                    </div>
                    @php
                        $logo = 'placeholder';
                        if(\Auth::user()->user_type == 'school' || \Auth::user()->user_type == 'admin'){
                            $logo = \Auth::user()->school_logo == null ? \Auth::user()->image : $logo;
                        }elseif(\Auth::user()->user_type == 'teacher'){
                            $logo = \Auth::user()->school->school_logo == null ? \Auth::user()->school->image : $logo;
                        }
                    @endphp
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <img src="{{uploaded_asset($logo)}}" alt="" style="height: 80px; width: auto;">
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <img src="{{uploaded_asset($logo)}}" alt="" style="height: 80px; width: auto;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <div class="row g-3 justify-content-start">
                    <!--end col-->
                    <div class="col-xxl-6 col-sm-6 ">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <th scope="row">Grade</th>
                                    <td>{{$exam->grade->name}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Section</th>
                                    @php
                                        $sections = \App\Models\Section::whereIn('id', json_decode($exam->section_id, true))->get();
                                    @endphp
                                    <td>@foreach ($sections as $val)
                                        <ul>
                                            <li>{{$val->name}}</li>
                                        </ul>
                                        
                                    @endforeach</td>
                                </tr>
                                <tr>
                                    <th scope="row">Date and Time</th>
                                    <td>{{date('d M Y, h:i A', strtotime($exam->date_and_time))}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Duration</th>
                                    @php
                                     $hour = floor($exam->duration / 60);
                                     $min = $exam->duration % 60;
                                    @endphp
                                    <td class="">{{$hour.': '.$min.'0 Hours'}}</td>
                                </tr>
                                </tbody>
                        </table>
                    </div>
                    <div class="col-xxl-6 col-sm-6 ">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <th scope="row">Instruction</th>
                                    <td>{{$exam->description}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
            </div>
        </div>
    </div>
    <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>#</th>
                                    <th>SECTIONS</th>
                                    <th>NO. OF ITEMS</th>
                                    <th>MEAN</th>
                                    <th>MEAN %</th>
                                    <th>FOR IMPROVEMENT</th>  
                                    <th>STANDARD LEVEL</th> 
                                    <th>Action</th> 
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if(!empty($data_sections))
                                    @foreach($data_sections as $key => $value)
                                        <tr>
                                            <td class="id">{{ $loop->iteration }}</td>
                                            <td>{{$value['name']}}</td>
                                            <td>{{$value['total_ques']}}</td>
                                            <td>{{$value['mean']}}</td>
                                            <td>{{$value['mean_score']}}%</td>
                                            <td>{{$value['for_improvement']}}%</td>
                                            <td style="color: {{$value['standard']['color']}}">{{$value['standard']['grade']}}</td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                        data-bs-placement="top" title="Section Reports">
                                                        <a href="{{route('report.section', [$value['id'], $exam->id])}}" class="text-primary d-inline-block edit-item-btn">
                                                            <i class="ri-bar-chart-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                
                                                </ul>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </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 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Graph Views</h4>
            </div>
            <div class="card-body p-0">
                <div>
                    <div id="sec_score" 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 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" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th>Competency</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 => $result)
                                    <tr>
                                        <td class="id">{{ $loop->iteration }}</td>
                                        <td>{!! $result['name'] !!}</td>
                                        <td>{{$result['score']}}%</td>
                                        <td style="color: {{$result['standard']['color']}}">{{$result['standard']['grade'] ?? 'N/A'}}</td>
                                    </tr>
                                @endforeach
                                @endif
                            </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 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Graph Views</h4>
            </div>
            <div class="card-body p-0">
                <div id="chart" class="apex-charts" dir="ltr"></div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div>
    @if(!empty($sec_compentencies))
        @foreach ($sec_compentencies as $section_name => $compentencies)
            <div class="col-lg-12">
                <div class="card" id="orderList">
                    <div class="card-header text-center border-0">
                        <div class="d-flex align-items-center">
                            <h5 class="mx-auto w-100">{{$section_name}}</h5>
                            <i class="fa fa-question-circle ml-auto"></i>
                       </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>#</th>
                                            <th>Competency</th>
                                            <th>Score %</th>
                                            <th>Standard Level</th>  
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all rnsTable">
                                    
                                        @if(!empty($compentencies))
                                            @foreach($compentencies as $key => $compentency)
                                                <tr>
                                                    <td class="id">{{ $loop->iteration }}</td>
                                                    <td>{{$compentency['name']}}</td>
                                                    <td>{{$compentency['score']}}%</td>
                                                    <td style="color: {{$compentency['standard']['color']}}">{{$compentency['standard']['grade']}}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            {{-- <div class="d-flex justify-content-end">
                                <div class="pagination-wrap hstack gap-2">
                                    <ul class="pagination listjs-pagination mb-0">

                                    </ul>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>

            </div>
        @endforeach
    @endif
    <!--end col-->
</div>
@endsection
@section('script')
<script src="{{asset('assets/backend/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
/** Section score chart */
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3', '#808080'];
var sec_score = {
          series: [{
            name: 'Mean%',
          data: [
            @if(!empty($data_sections))
                @foreach($data_sections as $value)
                    '{{$value['mean_score'].'%'}}',
                @endforeach
            @endif
          ]
        }],
          chart: {
          height: 350,
          type: 'bar',
          events: {
            click: function(chart, w, e) {
              // console.log(chart, w, e)
            }
          }
        },
        colors: [
            @if(!empty($data_sections))
                @foreach($data_sections as $value)
                    '{{$value['standard']['color']}}',
                @endforeach
            @endif
        ],
        plotOptions: {
          bar: {
            columnWidth: '45%',
            distributed: true,
          }
        },
        dataLabels: {
          enabled: true,
        },
        legend: {
          show: false
        },
        xaxis: {
          categories: [
            @if(!empty($data_sections))
                @foreach($data_sections as $value)
                    '{{$value['name']}}',
                @endforeach
            @endif
            
          ],
          labels: {
            style: {
              colors: [
                @if(!empty($data_sections))
                    @foreach($data_sections as $value)
                        '{{$value['standard']['color']}}',
                    @endforeach
                @endif
              ],
              fontSize: '12px'
            }
          }
        }
        };
        var chart = new ApexCharts(document.querySelector("#sec_score"), sec_score);
        chart.render();
      

/** Compentency chart */        
var options = {
    series: [{
        name: 'Scores',
        data: [
            @foreach($data as $key => $result)
                '{{$result['score']}}',
            @endforeach
        ]
    }],
    chart: {
        type: 'bar',
        height: 'auto',
        width: '100%',
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '70%',
            distributed: true,
            dataLabels: {
                position: 'bottom'
            },
        }
    },
    legend: {
        show: false,
    },
    colors: [
        @foreach($data as $key => $result)
            '{{$result['standard']['color']}}',    
        @endforeach
    ],
    dataLabels: {
        enabled: true,
        textAnchor: 'start',
        style: {
            colors: ['#fff']
        },
        formatter: function (val, opt) {
            return val;
        },
        offsetX: 0,
        dropShadow: {
            enabled: true
        }
    },
    stroke: {
        width: 1,
        colors: ['#fff']
    },
    xaxis: {
        categories: [
            @foreach($data as $key => $result)
                '{{$result['name']}}',
            @endforeach
        ],
    },
    yaxis: {
        labels: {
            show: true,
            align: 'right',
            minWidth: 0,
            maxWidth: 'none', // Adjust to make sure it accommodates your longest label
            style: {
                colors: ['#000'],
                fontSize: '14px',
                fontFamily: 'Helvetica, Arial, sans-serif',
                fontWeight: 400,
                cssClass: 'no-text-overflow',
            }
        }
    },
    grid: {
        padding: {
            left: 5 // Adjust this value as needed to ensure all text is visible
        }
    },
    tooltip: {
        theme: false,
        style: {
            fontSize: '12px',
            fontFamily: undefined
        }
    }
};


var chart = new ApexCharts(document.querySelector("#chart"), options);
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