@extends('backend.layouts.app')
@section('content')
@dump('working');

    <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">
                <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>( Section Level)</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_name = \App\Models\Section::whereIn(
                                                'id',
                                                json_decode($exam->section_id, true),
                                            )->get();
                                        @endphp
                                        <td>
                                            @foreach ($sections_name 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))
                                        @foreach($data 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>
        <!--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