@extends('ielts.layout')

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

@section('ielts-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-writing">
                    영작<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="/ielts/level-test/{{ $num }}">
            @csrf
            @include('ielts.level-test.test-'.$num)

            @if ($num != 'start' and $num != 'result')
                <div id="test-buttons" class="level-test-buttons">
                    <div class="wrapper">
                        @if ($num != 'score')
                            @switch($num)
                                @case('result')
                                    <a href="/ielts/level-test/15" class="btn-prev">이전</a>
                                    @break
                                @default
                                    <a href="/ielts/level-test/{{ (is_numeric($num) and $num == 1) ? 'score' : $num - 1 }}" class="btn-prev">이전</a>
                            @endswitch
                        @endif
                        <button type="submit" class="btn-next">다음</button>
                    </div>
                </div>
            @endif
        </form>
    </div>
</div>
@endsection

@section('ielts-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 > 0 && num < 10) $('#process-voca').addClass('active');
            else if (num > 9 && num < 16) $('#process-writing').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