@extends('Training::layouts.app')

@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/front/assets/css/jquery-steps.min.css') }}">
@endpush

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                {{--                    <div id="question_sug" class="alert alert-warning mb-5" role="alert">--}}
                {{--                        <p>Exam Time: 15 Minutes</p>--}}
                {{--                        <p>The value of each question is equal to (10 * 1) = 10 numbers.</p>--}}
                {{--                        <p>You are being monitored by CCTV cameras, any kind of misconduct, answering with Google search--}}
                {{--                            or talking to each other may be considered as cancellation of your exam. </p>--}}
                {{--                    </div>--}}
                <div id="question_end" class="alert alert-danger mb-5 p-4" style="display: none;">
                    <h4 class="mb-2">Time is Up!</h4>
                    <div><a href="{{ route('training.dashboard.index') }}" class="btn btn-primary btn-sm mr-2">Back</a></div>
                    <p>We are sorry to say, you were unable to answer all questions within due time. But your given
                        answers will forward to our HR. If you need any support please contact with our support
                        team.</p>
                </div>

                <div class="step-app" id="demo">
                    <div class="step-content">
                        @foreach($trTestResponses as $trTestResponse)
                            <div class="step-tab-panel" data-step="step{{ $loop->iteration }}">
                                <div class="card">
                                    <div class="card-body">
                                        <h3 class="main_question mt-3 mb-4">
                                            <strong><span
                                                    class="text-primary">{{ $loop->iteration }}</span>/{{ $loop->count }}
                                            </strong>
                                            {{ $trTestResponse->question }}
                                        </h3>
                                        @if($trTestResponse->answered == 'No')
                                            <form class="step-form">
                                                <input type="hidden" name="question_id"
                                                       value="{{ $trTestResponse->tr_question_id }}">
                                                @if($trTestResponse->type == 'Multiselect')
                                                    @foreach($trTestResponse->options as $option)
                                                        <div class="form-group">
                                                            <label
                                                                class="container_check version_2">{{ $option }}
                                                                <input type="checkbox"
                                                                       name="answer[]"
                                                                       value="{{ $option }}" class="required">
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @elseif($trTestResponse->type == 'Radio')
                                                    @foreach($trTestResponse->options as $option)
                                                        <div class="form-group">
                                                            <label
                                                                class="container_radio version_2">{{ $option }}
                                                                <input type="radio"
                                                                       name="answer[]"
                                                                       value="{{ $option }}" class="required">
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @elseif($trTestResponse->type == 'Theory')
                                                    <div class="form-group">
                                                        <input type="text"
                                                               name="answer[]"
                                                               class="form-control required"
                                                               placeholder="Enter Answer">
                                                    </div>
                                                @endif
                                            </form>
                                        @else
                                            Answered already!
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="step-footer">
                        <button data-step-action="prev" class="btn btn-secondary step-btn">Previous</button>
                        <button data-step-action="next" class="btn btn-primary step-btn">Next</button>
                        <button data-step-action="finish" class="btn btn-success step-btn">Finish</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/front/assets/js/jquery.validate.js') }}"></script>
    <script src="{{ asset('assets/front/assets/js/jquery-steps.min.js') }}"></script>
    <script src="{{ asset('assets/front/assets/js/countdownTimer.min.js') }}"></script>

    <script type="text/javascript">
        $('#demo').steps({
            onChange: function (currentIndex, newIndex, stepDirection) {
                var stepForm = $('.step-tab-panel.active .step-form');
                var stepFormValidator = stepForm.validate();

                if (stepDirection === 'forward') {
                    if (stepForm.length > 0) {
                        if (!stepForm.valid()) return false;
                        $.ajax({
                            type: 'post',
                            url: "{{ route('training.tests.submit', [$trTestSchedule->id, base64_encode($trTestParticipant->selected_candidate_id)]) }}",
                            data: stepForm.serialize() + "&_token={{ csrf_token() }}",
                            success: function (time) {
                                //update time
                            }
                        });
                        return true;
                    }
                    return true;
                }
                if (stepDirection === 'backward') {
                    if (stepForm.length > 0) stepFormValidator.resetForm();
                }
                return true;
            },
            onFinish: function () {
                $(".step-app").remove();
                location.replace("{{ route('training.tests.success', $trTestSchedule->id) }}");
            }
        });

        let updateTime = (function () {
            $.ajax({
                type: 'post',
                url: "{{ route('training.tests.update-time', [$trTestSchedule->id, base64_encode($trTestParticipant->selected_candidate_id)]) }}",
                data: "_token={{ csrf_token() }}",
                success: function (time) {
                    //update time
                }
            });
        });

        $('#time_count').countdownTimer({
            seconds: {{ $trTestParticipant->time_left*60 }},
            onInterval: updateTime,
            onFinish: function () {
                updateTime();
                $(".step-app").remove();
                $("#question_end").show();
            }
        });
    </script>
@endpush