@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}}">
                    @php
                        $counter =1;
                    @endphp
                    @foreach($questions as $key => $question)
                        <div class="tab">
                            @if($lang == 'cn')
                                <p style="font-size: 1rem;">第{{$counter}}题 (共{{$total_questions}}题)</p>
                            @else
                                <p style="font-size: 1rem;">{{__('messages.question')}} {{$counter}} {{__('messages.of')}} {{$total_questions}}</p>
                            @endif
                            <p style="font-size: 1rem;">{{$question->question}}</p>
                            <div class="form-group">
                                @if($question->type == 'text')
                                    <input type="text" class="form-control" id="question_{{$question->id}}" name="question_{{$question->id}}" placeholder="Enter your answer">
                                @elseif($question->type == 'dropdown')
                                    <select class="form-control" id="question_{{$question->id}}" name="question_{{$question->id}}" onchange="changebrand()">
                                        @php
                                            $answer = explode('|', $question->choice_en);
                                        @endphp
                                        @foreach ($answer as $x => $value)
                                            @php
                                                $final = explode('-', $value);
                                            @endphp
                                            <option value="{{$final[0]}}">{{$final[1]}}</option>
                                        @endforeach
                                    </select>
                                @elseif($question->type == 'multi')
                                    <p class="checkerror" id="question_{{$question->id}}-error" style="display:none;">Please select an answer</p>
                                    @php
                                        $answer = explode('|', $question->choice);
                                    @endphp
                                    @foreach ($answer as $x => $value)
                                        @php
                                            $final = explode('-', $value);
                                        @endphp
                                        <label class="options">{{$final[1]}}
                                            <input type="radio" name="question_{{$question->id}}" value="{{$final[0]}}" oninput="this.className = ''">
                                            <span class="checkmark"></span>
                                        </label>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        @php
                            $counter++;
                        @endphp
                    @endforeach
                    <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) {
        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;
    }



</script>
@endsection