@extends('survey_master')

@section('title')
    <title>Survey Start</title>
@endsection

@section('content')
    <div class="container mt-3" style=" height:100%; margin:0; display:flex; flex-direction:column;">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-6">
                <ul class='nav' style="margin-bottom: 10px;">
                    <li>
                        <a href="{{ url('/lang/en') }} ">EN</a>|
                    </li>
                    <li>
                        <a href="{{ url('/lang/cn')}} ">CN</a>|
                    </li><li>
                        <a  href="{{ url('/lang/bm') }} ">BM</a>|
                    </li>
                </ul>
            </div>
        </div>
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-6">
                <form name="regForm" id="regForm" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="survey_id" value="{{$survey_id}}">

                    <div class="tab">
                        @if($lang == 'cn')
                            <p style="font-size: 1rem;">第 1 题 (共2题)</p>
                        @else
                            <p style="font-size: 1rem;">{{__('messages.question')}} 1 {{__('messages.of')}} 2</p>
                        @endif
                        <p style="font-size: 1rem;">{{__('messages.survey_question_1')}}</p>
                        <div class="form-group" >
                            <p class="checkerror" id="question_1-error" style="display:none;">{{__('messages.error_select_answer')}}</p>
                            <label class="options">{{__('messages.survey_question_1_ans_1')}}
                                <input type="radio" name="question_1" value="stronger" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{__('messages.survey_question_1_ans_2')}}
                                <input type="radio" name="question_1" value="smoother" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                    <div class="tab">
                        @if($lang == 'cn')
                            <p style="font-size: 1rem;">第 2 题 (共2题)</p>
                        @else
                            <p style="font-size: 1rem;">{{__('messages.question')}} 2 {{__('messages.of')}} 2</p>
                        @endif
                        <p style="font-size: 1rem;">{{__('messages.survey_question_2a')}}</p>
                        <div class="form-group" >
                            <p class="checkerror" id="question_2a-error" style="display:none;">{{__('messages.error_select_answer')}}</p>
                            <label class="options">{{__('messages.survey_question_2a_ans_1')}}
                                <input type="radio" name="question_2a" value="Yes" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{__('messages.survey_question_2a_ans_2')}}
                                <input type="radio" name="question_2a" value="No" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <br>
                        <br>
                        <p style="font-size: 0.6rem;">{{__('messages.survey_question_2_remarks')}}</p>
                    </div>
                    <div class="tab">
                        @if($lang == 'cn')
                            <p style="font-size: 1rem;">第 2 题 (共2题)</p>
                        @else
                            <p style="font-size: 1rem;">{{__('messages.question')}} 2 {{__('messages.of')}} 2</p>
                        @endif
                        <p style="font-size: 1rem;">{{__('messages.survey_question_2b')}}</p>
                        <div class="form-group" >
                            <p class="checkerror" id="question_2b-error" style="display:none;">{{__('messages.error_select_answer')}}</p>
                            <label class="options">{{__('messages.survey_question_2b_ans_1')}}
                                <input type="radio" name="question_2b" value="Yes" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{__('messages.survey_question_2b_ans_2')}}
                                <input type="radio" name="question_2b" value="No" oninput="this.className = ''">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <br>
                        <br>
                            <p style="font-size: 0.6rem;; text-align: center">{{__('messages.survey_question_2_remarks_2')}}</p>
                    </div>
                    <div class="thanks-message text-center" id="text-message">
                        <h3>Submitting..</h3>
                    </div>
                    <div style="overflow:auto; margin-top:15px;" id="nextprevious">
                        <div style="float:right;">
                            <button type="button" id="prevBtn" onclick="nextPrev(-1)"><i class="fas fa-arrow-left"></i></button>
                            <button type="button" id="nextBtn" onclick="nextPrev(1)"><i class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <footer style="  margin-top:auto;">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-md-6">
                    <p>{{__('messages.footer_disclaimer')}}</p>
                </div>
            </div>
        </footer>
    </div>
@endsection

@section('script')
    <script src="{{ asset('js/questionnaire.js') }}"></script>
    <script>
    function nextPrev(n) {
        if(currentTab == 0 ||  currentTab == 1 || currentTab == 2){
            var q1_ans = getCheckedCheckboxesFor('question_1');
            if(q1_ans[0] == 'stronger'){
                // Do nothing
            }else{
                if(n > 0){
                    n = 2;
                }else{
                    n =-2;
                }
            }
            console.log(n);
        }

        if( currentTab == 1 ){
            if(n == 1){
                n = 2;
            }else{
                n =-1;
            }
        }

        var x = document.getElementsByClassName("tab");
        if (n == 1 && !validateForm()) return false;
        x[currentTab].style.display = "none";
        currentTab = currentTab + n;

        if (currentTab >= x.length) {
            document.getElementById("nextprevious").style.display = "none";
            document.getElementById("text-message").style.display = "block";
            $('#regForm').submit();
        }
        showTab(currentTab);
    }

    function validateForm() {
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        if(y.length > 0){
            if(y[0].type== 'radio'){
                i = 0;
                var stopcheck = false;
                var questionname = y[0].name;

                do {
                    if (y[i].checked) {
                        stopcheck = true;
                    }else{
                        stopcheck = false;
                    }
                    i++
                }
                while (stopcheck == false && i < y.length);

                if(stopcheck == false ){
                    valid = false;
                    $('#'+questionname+'-error').show();
                }else{
                    $('#'+questionname+'-error').hide();
                }

            }else{
                for (i = 0; i < y.length; i++) {
                    if (y[i].value == "") {
                        y[i].className += " invalid";
                        valid = false;
                    }
                }
            }
        }
        return valid;
    }

    function getCheckedCheckboxesFor(checkboxName) {
        var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
        Array.prototype.forEach.call(checkboxes, function(el) {
            values.push(el.value);
        });
        return values;
    }


</script>
@endsection