@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
         Questions
    </h5>
@endsection

@section('content')

    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact">
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-10">
                        <a href="{{ route('cd-admin.download_set_questions_pdf',$questionSet->qestion_set_slug) }}" class="btn btn-info mr-2">
                            <span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Download.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M2,13 C2,12.5 2.5,12 3,12 C3.5,12 4,12.5 4,13 C4,13.3333333 4,15 4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,13 C20,12.4477153 20.4477153,12 21,12 C21.5522847,12 22,12.4477153 22,13 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 C2,15 2,13.3333333 2,13 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 8.000000) rotate(-180.000000) translate(-12.000000, -8.000000) " x="11" y="1" width="2" height="14" rx="1"/>
                                    <path d="M7.70710678,15.7071068 C7.31658249,16.0976311 6.68341751,16.0976311 6.29289322,15.7071068 C5.90236893,15.3165825 5.90236893,14.6834175 6.29289322,14.2928932 L11.2928932,9.29289322 C11.6689749,8.91681153 12.2736364,8.90091039 12.6689647,9.25670585 L17.6689647,13.7567059 C18.0794748,14.1261649 18.1127532,14.7584547 17.7432941,15.1689647 C17.3738351,15.5794748 16.7415453,15.6127532 16.3310353,15.2432941 L12.0362375,11.3779761 L7.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000004, 12.499999) rotate(-180.000000) translate(-12.000004, -12.499999) "/>
                                </g>
                            </svg><!--end::Svg Icon--></span>
                            Dowload File
                        </a>
                       
                    </div>
                </div>
            </div>
    </div>
    <!--end::Card-->
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact" data-card="true" id="kt_card_4">
        @foreach($questions as $question)
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12">
                    {{$loop->iteration}}. {!! strip_tags($question->question->question) !!}
                    <br>
                </div>
                <div class="col-lg-6">
                    @if(preg_split ("/\-/", base64_decode($question->question->key))[1]=='al')
                        <input type="checkbox" checked disabled/>
                    @else
                        <input type="checkbox" disabled/>
                    @endif
                    <label>{{$question->question->answer1}}</label>
                </div>
                <div class="col-lg-6">
                    @if(preg_split ("/\-/", base64_decode($question->question->key))[1]=='bi')
                        <input type="checkbox" checked disabled/>
                    @else
                        <input type="checkbox" disabled/>
                    @endif   
                    <label>{{$question->question->answer2}}</label>
                </div>
                <div class="col-lg-6">
                    @if(preg_split ("/\-/", base64_decode($question->question->key))[1]=='ga')
                        <input type="checkbox" checked disabled/>
                    @else
                        <input type="checkbox" disabled/>
                    @endif                    
                    <label>{{$question->question->answer3}}</label>
                </div>
                <div class="col-lg-6">
                    @if(preg_split ("/\-/", base64_decode($question->question->key))[1]=='th')
                        <input type="checkbox" checked disabled/>
                    @else
                        <input type="checkbox" disabled/>
                    @endif
                    <label>{{$question->question->answer4}}</label>
                </div>
                {{-- <div class="col-lg-6">
                    <label>Correct Answer: </label>
                    
                    <label>a</label>
                </div> --}}
            </div>
        </div>
        @endforeach
    </div>
    <!--end::Card-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    const button = document.getElementById('download-button');

    function generatePDF() {
        // Choose the element that your content will be rendered to.
        const element = document.getElementById('kt_card_4');
        // Choose the element and save the PDF for your user.
        let options={
            margin: 1,
            filename:"Set_Questions.pdf",
            image:{ type: "jpeg", quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF:{ unit:'in', format:'letter', orientation:'potrait' }
        }
        html2pdf().from(element).save();
    }

    button.addEventListener('click', generatePDF);
</script>
@endsection