@extends('user.profiler.layouts.master', ["prevStep"=> $prevStep])
@section('title', 'Profiler')

@section('content')
    <div class="QuestionWrap">
        @for ($i = $qid; $i <= ($nextStep); $i++)

            <h3 class="p mb-20 question-progress-tracker{{$i}}">Question 1 of {{ $question_count }}</h3>
            <p class="p">Would you like to:</p>
            <h3 class="mb-30 question-h1 question-text{{$i}}"></h3>
            <div class="optionsWrap mb-20">

                @foreach($answer_options as $option => $value)
                    <div
                        class="options options{{$i}} @if(isset($explodedAnswers[$i-1])) {{($explodedAnswers[$i-1]==$option) ? "completed" : ""}} @endif"
                        data-id="{{$i}}">
                        <span class="index index{{$i}}">{{ $option }}</span>
                        <h3>{{ $value }}</h3>
                    </div>
                @endforeach
            </div>
        @endfor

        <div class="Next">
            <button class="start" id="nextQuestion">
                <a style="color: #fff" href="#">Next Question</a>
            </button>
            <button class="start" style="margin-left: 30px; display: none" id="lastQuestion">
                <a style="color: #fff" href="#">Finish</a>
            </button>
            {{--<h3>
                <a style="color: #4490ce" href="{{ route("user.profiler.completed") }}">Skip question</a>
            </h3>--}}
        </div>
    </div>

    <script>
        const Max_STEPS = null;
        let questions = null;
        let profile_answers = null;

        let currentStep = null;

        let startIteration = null;
        let endIteration = {{$nextStep}};

        let saveURL = "{{ route("user.profiler.save") }}";
        let nextURL = "{{ route("user.profiler.onboarding", ['qid' => $nextStep]) }}";
        let lastURL = "{{ route("user.profiler.completed") }}";
        let questionsPerPage = {{$questionsPerPage}};
    </script>
@endsection