@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">
                        <span class="card-title mb-0" style="color: darkgoldenrod; font-size: 32px; font-weight:500">{{$exam->title}}</span><span>( Competency Comparison )</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>
            </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 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-nowrap align-middle" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th>COMPETENCY</th>
                                    @foreach($section_data as $sk=>$sv)
                                        <th scope="col" colspan="2">{{$sv}} . Correct % and Standard Level</th>
                                    @endforeach 
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                               
                                @if(!empty($results))
                                @foreach($results as $k=>$v)
                                
                                    <tr>
                                        <td class="id">{{ $loop->iteration }}</td>

                                        <td>{{$v['name']}}</td>
                                        @foreach($v['sections'] as $sdk=>$sdv)
                                            @php
                                            $grade = get_standard_grade($sdv['score']);
                                            @endphp
                                            <td>{{$sdv['score']}}%</td>
                                            <td style="color: {{$grade['color']}}">{{$grade['grade'] ?? 'N/A'}}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end col-->
</div>
@endsection
@section('script')
    <script>
        $(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