@extends('ielts.layout')

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

@section('ielts-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>Writing Test</p>
    							<p class="bottom"><b class="writing"><span data-per="{{ $writing_score_per }}">{{ $writing_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">Writing</span>
    							<canvas id="myChart"></canvas>
    						</div>
    						<p class="bottomTxt">・레이더 차트는 달성한 점수를 퍼센트로 표시한 값입니다.</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">
    						<h3><figure class="icon1"></figure>대상</h3>
    						<ul class="dotList">
                                @foreach($user_level_info['target'] as $item)
    							<li>{{ $item }}</li>
                                @endforeach
    						</ul>
    					</div>
    					<div class="roundBox">
    						<h3><figure class="icon2"></figure>학습전략</h3>
    						<ul class="dotList">
                                @foreach($user_level_info['strategy'] as $item)
                                <li>{{ $item }}</li>
                                @endforeach
    						</ul>
    					</div>
    					<div class="roundBox order">
    						<h3><figure class="icon3"></figure>추천학습 순서</h3>
    						<ul class="order">
                                @foreach($user_level_info['study_flow'] as $idx => $item)
                                    @php
                                    $item = preg_replace('/\s+/', ' <br class="pc-br">', $item, 1);
                                    @endphp
                                <li><span>Step{{ $idx+1 }}</span>{!! $item !!}</li>
                                @endforeach
    						</ul>
    						<p>{!! $user_level_info['study_desc'] !!}</p>
    					</div>
					</div>
				</div>
				<div class="wrap recommendation">
					<h2>추천 상품</h2>
					<div class="roundArea">
                        @foreach($user_level_info['products'] as $idx => $item)
					    <div class="roundBox">
    						<a href="{{ $item['link'] }}" class="banner">
    							<div class="title">
    								<p>{{ $item['sub_title'] }}</p>
    								<strong>{{ $item['title'] }}</strong>
    							</div>
    							<picture class="pic">
    								<source srcset="{{ $item['thumbnail'] }}" media="(min-width: 1200px)">
    								<img src="{{ $item['thumbnail'] }}" alt="입문 올패스">
    							</picture>
    							<ul class="dotList">
                                    @foreach($item['sub_copy'] as $sub_item)
    								<li>{{ $sub_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>
    						</a>
    					</div>
                        @endforeach
					</div>
				</div>
			</div>

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

        @if(!is_null($counponid))
		<div class="bottom-sheetArea">
			<div class="bottom-sheet type2 verChange active">
				<div class="slidingWrap">
                    <div class="stopPopup">
                        <button type="button" class="btn left todayPopupClose">오늘 하루 그만 보기</button>
                        <button type="button" class="btn right closeBtn"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.00031 3.99977L12.0005 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/><path d="M11.9997 3.99977L3.99947 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg></button>
                    </div>
					<div class="max-width">
						<div class="event">
							<img src="{{ env('AWS_S3_IMG_URL') }}/common/level-test/popup-img1.png" alt="베스트 강좌 쿠폰 발급 완료">
                            @if($user_id > 0)
                            <p>마이페이지> 쿠폰 내역을 확인하세요!</p>
                            @else
                            <p>카카오톡에서 <b>[쿠폰번호]</b>를 확인하세요!</p>
                            @endif
						</div>
						<div class="buttonWrap">
							<a href="#none" class="btn close closeBtn">확인</a>
						</div>
					</div>
				</div>
				<div class="dim"></div>
			</div>
		</div>
        @endif

        <div class="popupArea">
            <div class="popupWrap">
                <div class="popup">
                    <div class="closeIcon closeBtn"></div>
                    <div class="textWrap">
                        <p class="title">레벨테스트 정답 확인</p>
                        <div class="scrollWidth">
                            <div class="scrollWrap">
                                <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">어휘테스트</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">영작테스트</li>
                                        @for($i=9; $i<=15; $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>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="popupClose closeBtn">확인</button>
                </div>
                <div class="dim"></div>
            </div>
        </div>
	</div>
@endsection

@section('ielts-script')
	<script src="https://s3.dualstack.ap-northeast-2.amazonaws.com/lib.edmeducation.com/chartjs/chart.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,
            writingNum = document.querySelector('.roundBox.score .writing span').dataset.per,
            vocaNum = document.querySelector('.roundBox.score .voca span').dataset.per;

        // 모든 점수가 0점일 때
        if(totalNum && writingNum && 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', 'Writing', 'Voca'],
				datasets: [{
					fill: true,
					label: '',
					data: [calculatePercentage(totalNum,100), calculatePercentage(writingNum,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, //레전드 비활성화
					},
				},
			}
		});

        @if(!is_null($counponid))
		/*******************************************
			오늘 하루 그만 보기 (팝업)
		*******************************************/
		var toggleMainPopup = function() {

			/* 쿠키 제어 함수 정의 */
			var handleCookie = {
				// 쿠키 쓰기
				// 이름, 값, 만료일
				setCookie: function (name, val, exp) {
                    var date = new Date();

                    // 만료 시간 구하기(exp를 ms단위로 변경)
                    date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);

                    // 실제로 쿠키 작성하기
                    document.cookie = name + "=" + val + ";expires=" + date.toUTCString() + ";";
				},
				// 쿠키 읽어오기(정규식 이용해서 가져오기)
				getCookie: function (name) {
                    var value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
                    return value ? value[2] : null;
				}
			};

			/* 쿠키 읽고 화면 보이게 */
			if (handleCookie.getCookie("resultPopup") == "y") {
                $('.bottom-sheetArea').removeClass('show');
				$(".bottom-sheet").removeClass("active");
			} else {
                $('.bottom-sheetArea').addClass('show');
				$(".bottom-sheet").addClass("active");
			}

			/* 오늘하루 보지 않기 버튼 */
			$(".bottom-sheet .todayPopupClose").on("click", function () {
				handleCookie.setCookie("resultPopup", "y", 1);
				$(this).parents(".bottom-sheetArea").removeClass("show").find('.bottom-sheet').removeClass('active');
			});
		}

		$(function() {
		    toggleMainPopup();
		});
        @endif
	</script>
@endsection