@extends("academy.layout")

@section("academy-css")
{!! resource('css/common/leveltest.css') !!}
@endsection

@section("academy-content")
	<div id="wrap" class="level-test result">
		<div class="contents">
			<div class="pageTitle">
				<h1>레벨 테스트 결과</h1>
			</div>
            <div class="innerArea max-width">
                <div class="wrap evaluation">
                    <h2>레벨 평가</h2>
                    <div class="roundArea">
                        <div class="roundBox all">
                            <p class="txt">추정 IELTS Band Score</p>
                            <p class="scoreTxt">{{ $user_level_info['bandscore'] }}</p>
                        </div>
                        <div class="roundBox score flex">
                            <div class="box">
                                <p>Voca Test</p>
                                <p class="bottom"><b class="voca"><span data-per="{{ $voca_score_per }}">{{ $voca_score }}</span>점</b>/30점</p>
                            </div>
                            <div class="box">
                                <p>Reading Test</p>
                                <p class="bottom"><b class="reading"><span data-per="{{ $reading_score_per }}">{{ $reading_score }}</span>점</b>/70점</p>
                            </div>
                            <div class="box">
                                <p>Total Score</p>
                                <p class="bottom"><b class="total"><span data-per="{{ $total_score_per }}">{{ $total_score }}</span>점</b>/100점</p>
                            </div>
                        </div>
                        <div class="roundBox graph">
                            <div class="chart">
                                <span class="txt txt1">Total</span>
                                <span class="txt txt2">Voca</span>
                                <span class="txt txt3">Reading</span>
                                <canvas id="myChart"></canvas>
                            </div>
                            <p class="bottomTxt">・레이더 차트는 달성한 점수를 퍼센트로 표시한 값입니다.</p>
                            <p class="bottomTxt"><em>・에세이 점수는 포함되지 않은 점수입니다.</em></p>
                        </div>
                        <div class="roundBox text">
                            <h3>Band Score Table에 따른 수준</h3>
                            <figure class="icon type-{{ $user_type }}"></figure>
                            <strong>{!! $user_level_info['study_type'] !!}</strong>
    						<p>{!! $user_level_info['score_desc'] !!}</p>
                        </div>
                    </div>
                </div>
                <div class="wrap guide">
                    <h2>맞춤형 학습 가이드</h2>
                    <div class="roundArea">
                        <div class="roundBox">
                            <ul class="dotList">
                                @foreach($user_level_info['study_guide'] as $item)
    							<li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                @if($user_recommand_course)
                <div class="wrap recommendation">
                    <h2>추천 상품</h2>
                    <h3>입문/기초 레벨에 적합한 <b>‘{{ $user_recommand_course['title'] }}’</b>을 추천 드립니다.</h3>
                    <div class="roundArea">
                        <div class="roundBox">
                            <a href="{{ $user_recommand_course['link'] }}" class="banner">
                                <picture class="pic">
                                    <source srcset="{{ $user_recommand_course['thumbnail'] }}" media="(min-width: 1200px)">
                                    <img src="{{ $user_recommand_course['thumbnail'] }}" alt="{{ $user_recommand_course['title'] }}">
                                </picture>
                                <div class="right">
                                    <ul class="dotList">
                                        @foreach($user_recommand_course['description'] as $item)
                                        <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>
                                    <div class="more">자세히 보기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 7.99996L7.99996 13.3333M13.3333 7.99996L8 2.66663M13.3333 7.99996L3 7.99996" stroke="#7D7B90" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <div class="checkOutBtn bottom-fix-btn">
                <div class="max-width"><button type="button" class="btn popupOn">정답 확인하기</button></div>
            </div>
        </div>

        <div class="popupArea">
            <div class="popupWrap">
                <div class="popup">
                    <div class="closeIcon closeBtn"></div>
                    <div class="textWrap">
                        <p class="title" id="lt_result_title">레벨테스트 정답 확인</p>
                        <div class="scrollWidth">
                            <div class="scrollWrap">
                                <div class="download"><a href="javascript:pdfdownload()" class="downloadBtn" download>다운로드</a></div>
                                <div class="listWrap">
                                    <div class="subject">
                                        <div class="box left">정답</div>
                                        <div class="box right">정답유무</div>
                                    </div>
                                    <ul class="list list1">
                                        <li class="sub-subject" id="lt_result_title1">어휘테스트</li>
                                        @for($i=1; $i<=8; $i++)
                                        <li>
                                            <div class="box left">{{ $grading_info[$i]['question'] }} <em>{{ $grading_info[$i]['correct_answer'] }}</em></div>
                                            <div class="box right">{!! $grading_info[$i]['correct_yn'] !!} <span>({{ $grading_info[$i]['user_answer'] }})</span></div>
                                        </li>
                                        @endfor
                                    </ul>
                                    <ul class="list list2">
                                        <li class="sub-subject" id="lt_result_title2">리딩테스트</li>
                                        @for($i=9; $i<=21; $i++)
                                        <li>
                                            <div class="box left">{!! $grading_info[$i]['question'] !!}</div>
                                            <div class="box right">{!! $grading_info[$i]['correct_yn'] !!} <span>({{ $grading_info[$i]['user_answer'] }})</span></div>
                                        </li>
                                        @endfor
                                    </ul>
                                    <ul class="list list3">
                                        <li class="sub-subject" id="lt_result_title3">에세이테스트</li>
                                        @for($i=22; $i<=26; $i++)
                                        <li>
                                            <div class="box left">Q.{{ $i }}</div>
                                            <div class="box right">{!! nl2br(e($grading_info[$i]['user_answer'])) !!}</div>
                                        </li>
                                        @endfor
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="popupClose closeBtn">확인</button>
                </div>
                <div class="dim"></div>
            </div>
        </div>

	</div>
@endsection

@section("academy-script")
	<script src="https://s3.dualstack.ap-northeast-2.amazonaws.com/lib.edmeducation.com/chartjs/chart.js"></script>
    <script src="https://s3.dualstack.ap-northeast-2.amazonaws.com/lib.edmeducation.com/pdfmake/pdfmake.min.js"></script>
    <script src="https://s3.dualstack.ap-northeast-2.amazonaws.com/lib.edmeducation.com/pdfmake/custom_vfs.js"></script>
	<script>
		/*******************************************
			그래프
		*******************************************/
		function calculatePercentage(part, whole) {
			return Math.round((part / whole) * 100);
		}

		let ctx = document.getElementById('myChart'),
            totalNum = document.querySelector('.roundBox.score .total span').dataset.per,
            readingNum = document.querySelector('.roundBox.score .reading span').dataset.per,
            vocaNum = document.querySelector('.roundBox.score .voca span').dataset.per;

        // 모든 점수가 0점일 때
        if(totalNum && readingNum && vocaNum == '0'){
            document.querySelector('.roundBox.graph .chart').classList.add('zero');
        }else{
            document.querySelector('.roundBox.graph .chart').classList.remove('zero');
        }

		new Chart(ctx,  {
			type: 'radar',
			data: {
				labels: ['Total', 'Reading', 'Voca'],
				datasets: [{
					fill: true,
					label: '',
					data: [calculatePercentage(totalNum,100), calculatePercentage(readingNum,100), calculatePercentage(vocaNum,100)],
					borderWidth: 2,
					backgroundColor: 'rgba(51, 157, 255,0.1)',
					borderColor: '#339DFF',
					pointBorderWidth : '0',
				}]
			},
			options: {
				responsive : false,
				scales: {
					r: {
						grid: {
							circular: true,
						},
						pointLabels: {
							display: false,
						},
						ticks: {
							callback: function() {return ""},
							backdropColor: "rgba(0, 0, 0, 0)"
						},
					},
				},
				scale: {
					beginAtZero: true, // 0부터 시작되게 설정
					min: 0, // 최소값 설정
					max: 100, // 최대값 설정
					stepSize: 33.3333333, // 간격 설정 (선택 사항)
				},
				plugins: {
					tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.formattedValue + '%';
                            }
                        }
                    },
					legend: {
						display: false, //레전드 비활성화
					},
				},
			}
		});

        function pdfdownload() {
            const today = new Date().toISOString().slice(0, 10).replace(/-/g, '');
            const filename = `${today} 레벨테스트.pdf`;

            pdfMake.fonts = {
                NotoSansKR: {
                    normal: 'NotoSansKR-Regular.ttf',
                    bold: 'NotoSansKR-Bold.ttf'
                }
            };

            const tableLayoutStyle = {
                hLineWidth: () => 1,
                vLineWidth: () => 1,
                hLineColor: () => '#DEDFE5',
                vLineColor: () => '#DEDFE5',
                paddingLeft: () => 0,
                paddingRight: () => 0,
                paddingTop: () => 4,
                paddingBottom: () => 0
            };

            const vocabBody = [
                [
                    { text: $('.popupArea .listWrap > .subject .left').text(), fillColor: '#F0F0F2', color: '#7D7B90', fontSize: 12, bold: true, alignment: 'center', valign: 'middle' },
                    { text: $('.popupArea .listWrap > .subject .right').text(), fillColor: '#F0F0F2', color: '#7D7B90', fontSize: 12, bold: true, alignment: 'center', valign: 'middle' }
                ],
                @for($i=1; $i<=8; $i++)
                [
                    {
                        alignment: 'center',
                        fontSize: 11,
                        valign: 'middle',
                        stack: [
                            { text: '{{ $grading_info[$i]["question"] }}', color: '#40404E' },
                            { text: '{{ $grading_info[$i]["correct_answer"] }}', color: '#FF5959' }
                        ]
                    },
                    {
                        stack: [
                            { text: '{{ strip_tags($grading_info[$i]['correct_yn']) }}', fontSize: 11, alignment: 'center', color: '#40404E' },
                            { text: '({{ $grading_info[$i]["user_answer"] }})', fontSize: 10, alignment: 'center', color: '#7D7B90' }
                        ]
                    }
                ],
                @endfor
            ];

            const writingBody = [
                @for($i=9; $i<=21; $i++)
                [
                    { text: `{!! $grading_info[$i]["question"] !!}`, fontSize: 11, alignment: 'left', margin: [10, 0, 10, 0] },
                    {
                        stack: [
                            { text: '{{ strip_tags($grading_info[$i]['correct_yn']) }}', fontSize: 11, alignment: 'center', color: '#40404E' },
                            { text: '({{ $grading_info[$i]["user_answer"] }})', fontSize: 9, alignment: 'center', color: '#7D7B90' }
                        ]
                    }
                ],
                @endfor
            ];

            const essayBody = [
                @for($i=22; $i<=26; $i++)
                [
                    { text: 'Q.{{ $i }}', alignment: 'center', fontSize: 11, margin: [10, 0, 10, 0] },
                    { text: `{!! $grading_info[$i]["user_answer"] !!}`, fontSize: 11, alignment: 'left', margin: [10, 0, 10, 0] }
                ],
                @endfor
            ];

            const docDefinition = {
                content: [
                    { text: $('#lt_result_title').text(), fontSize: 17, bold: true, alignment: 'center', margin: [0, 0, 0, 16] },

                    { text: $('#lt_result_title1').text(), style: 'sectionHeader' },
                    {
                        table: { widths: ['*', '*'], body: vocabBody },
                        layout: tableLayoutStyle
                    },
                    { text: '', pageBreak: 'before' },
                    { text: $('#lt_result_title2').text(), style: 'sectionHeader', margin: [0, 20, 0, 0] },
                    {
                        table: { widths: ['80%', '20%'], body: writingBody },
                        layout: tableLayoutStyle
                    },

                    { text: '', pageBreak: 'before' },
                    { text: $('#lt_result_title3').text(), style: 'sectionHeader' },
                    {
                        table: { widths: ['auto', '*'], body: essayBody },
                        layout: tableLayoutStyle
                    }
                ],
                styles: {
                    sectionHeader: { fontSize: 14, bold: true, fillColor: '#F8F8F8', margin: [0, 0, 0, 10] }
                },
                defaultStyle: {
                    font: 'NotoSansKR',
                    fontSize: 14,
                    color: '#40404E',
                    lineHeight: 1.43
                }
            };

            pdfMake.createPdf(docDefinition).download(filename);
        }

	</script>
@endsection