@extends('layout.athlete')
@section('content')
    <!-- Athlete question -->
    <div class="card card--lg">
        <div class="card__header">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <h4>Question</h4>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-8">
                    <div class="progress-stats progress-stats--top-labels mb-0 progress-question-bar">
                        <div class="progress__label text-transform-normal"><small>Question Progress</small></div>
                        <div class="progress">
                            <div class="progress__bar progress__bar-width-25" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4"></div>
                        </div>
                        <div class="progress__number">Step 1 on 4</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card__content p-20">
            <div class="row">
                <!-- Tab menu -->
                <div class="navbar hide">
                    <div class="navbar-inner">
                        <ul class="nav nav-pills">
                            <li class="active">
                                <a href="#question1" data-toggle="tab" data-step="1" data-percent="25">question 1</a>
                            </li>
                            <li>
                                <a href="#question2" data-toggle="tab" data-step="2" data-percent="50">question 2</a>
                            </li>
                            <li>
                                <a href="#question3" data-toggle="tab" data-step="3" data-percent="75">question 3</a>
                            </li>
                            <li>
                                <a href="#question4" data-toggle="tab" data-step="4" data-percent="100">question 4</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="question1">
                        @foreach($questions->slice(0)->take(5) as $k1 => $question1)
                            <div class="col-md-12">
                                <div class="form-group">
                                    <h6 class="widget__title">#0{{ $k1+1 }} - {{ $question1->question }}</h6>
                                    @if($question1->response_flag)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option1" > true
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option2"> false
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @elseif($question1->response_ranking)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option1" > Totally Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option2"> Somewhat Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option3"> Neutral
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option4"> Somewhat Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question1->question }}" value="option5"> Absolutely Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @else
                                        OOPS
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        <div class="col-sm-12">
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary btn-sm next" data-dismiss="modal">Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade in" id="question2">
                        @foreach($questions->slice(5)->take(5) as $k2 => $question2)
                            <div class="col-md-12">
                                <div class="form-group">
                                    <h6 class="widget__title">#0{{ $k2+1 }} - {{ $question2->question }}</h6>
                                    @if($question2->response_flag)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option1" > true
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option2"> false
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @elseif($question2->response_ranking)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option1" > Totally Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option2"> Somewhat Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option3"> Neutral
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option4"> Somewhat Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question2->question }}" value="option5"> Absolutely Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @else
                                        OOPS
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        <div class="col-sm-12">
                            <div class="pull-left">
                                <button type="button" class="btn btn-primary btn-sm prev">Prev</button>
                            </div>
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary btn-sm next" >Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade in" id="question3">
                        @foreach($questions->slice(10)->take(5) as $k3 => $question3)
                            <div class="col-md-12">
                                <div class="form-group">
                                    <h6 class="widget__title">#0{{ $k3+1 }} - {{ $question3->question }}</h6>
                                    @if($question3->response_flag)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option1" > true
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option2"> false
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @elseif($question3->response_ranking)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option1" > Totally Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option2"> Somewhat Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option3"> Neutral
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option4"> Somewhat Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question3->question }}" value="option5"> Absolutely Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @else
                                        OOPS
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        <div class="col-sm-12">
                            <div class="pull-left">
                                <button type="button" class="btn btn-primary btn-sm prev">Prev</button>
                            </div>
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary btn-sm next" >Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade in" id="question4">
                        @foreach($questions->slice(15)->take(5) as $k4 => $question4)
                            <div class="col-md-12">
                                <div class="form-group">
                                    <h6 class="widget__title">#0{{ $k4+1}} - {{ $question4->question }}</h6>
                                    @if($question4->response_flag)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option1" > true
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option2"> false
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @elseif($question4->response_ranking)
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option1" > Totally Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option2"> Somewhat Agree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option3"> Neutral
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option4"> Somewhat Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                        <label class="radio radio-inline">
                                            <input type="radio" name="{{ $question4->question }}" value="option5"> Absolutely Disagree
                                            <span class="radio-indicator"></span>
                                        </label>
                                    @else
                                        OOPS
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        <div class="col-sm-12">
                            <div class="pull-left">
                                <button type="button" class="btn btn-primary btn-sm prev">Prev</button>
                            </div>
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary btn-sm" >Complete</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
    <!-- Athlete question / End -->
@endsection