@extends('academy.layout')
@section('academy-css')
{!! resource('css/common/leveltest.css') !!}
@endsection
@section('academy-content')
{{ $process = '' }}
<div class="container">
    <div class="level-test-process" id="test-progress">
        <div class="wrapper">
            <ul>
                <li id="process-prepare">
                    준비
                </li>
                <li id="process-voca">
                    어휘<span class="mo-br-none"></span>테스트
                </li>
                <li id="process-reading">
                    리딩<span class="mo-br-none"></span>테스트
                </li>
                <li id="process-essay">
                    에세이<span class="mo-br-none"></span>테스트
                </li>
                <li id="process-result">
                    결과<span class="mo-br-none"></span>제출
                </li>
            </ul>
        </div>
    </div>
    <div id="level-test">
        <form name="level-test-form" method="post" action="/academy/level-test/{{ $num }}">
            @csrf
            @include('academy.level-test.test-'.$num)

            @if ($num != 'start' and $num != 'result')
                <div id="test-buttons" class="level-test-buttons">
                    <div class="wrapper">
                        @if ($num != 'score')
                            @php
                                $k = array_search($num, $test_sequence);
                                $idx = $k - 1;
                            @endphp
                            @switch($num)
                                @case('result')
                                    <a href="/academy/level-test/essay" class="btn-prev">이전</a>
                                    @break
                                @default
                                    <a href="/academy/level-test/{{ $test_sequence[$idx] }}" class="btn-prev">이전</a>
                            @endswitch
                        @endif
                        <button type="submit" class="btn-next">다음</button>
                    </div>
                </div>
            @endif
        </form>
    </div>
</div>
@endsection

@section('academy-script')
<script>
    function setProgress(num)
    {
        if (num && num != 'start') {
            $('#test-progress').show();
            if (num != 'start') $('#test-buttons').show();
            $('#test-progress .wrapper ul li').removeClass('active');
            if (num == 'score') $('#process-prepare').addClass('active');
            else if (num == 'voca1' || num == 'voca2' || num == 'voca3') $('#process-voca').addClass('active');
            else if (num == 'reading') $('#process-reading').addClass('active');
            else if (num == 'essay') $('#process-essay').addClass('active');
            else if (num == 'result') $('#process-result').addClass('active');
        } else {
            $('#test-progress').hide();
        }
    }

    $(document).ready(function(){
        @if (!empty($num))
            setProgress('{{ $num }}');
        @endif
    });
</script>
@endsection