@extends('layouts.app')

@section('style')
<link rel="stylesheet" href="{{ asset('assets/front/assets/css/countrySelect.css') }}" />
@endsection

@section('sub-header')
<div class="job-wrap">
    <h4 class="">Senior Software Specialist</h4>
    <ul>
        <li><img src="images/clock.png" alt="">Timer: <strong id="time_count"><span class="time_block">15</span>min
                <span class="time_block">00</span> sec</strong></li>
    </ul>
</div>
<p class="salary">Online Question Paper: <strong>Set A</strong></p>
@endsection

@section('content')

<div class="ugf-progress">
    <div id="time_count" class="progress justify-content-center">
        <!-- 01 Hour 33 Mins 12 Sec -->
    </div>
</div>
<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" role="alert">
                <h4 class="mb-2">Time is Up!</h4>
                <p>We are sorry to say, you are unable to answer all questions within due time. But your given answers
                    will forward to our HR. If you need any support pleasse contact with our support team.</p>
            </div>

            <div id="wizard_container">
                <div id="top-wizard">
                    <!-- <div id="progressbar" class="mb-5"></div> -->
                </div>
                <!-- /top-wizard -->
                <form id="wrapped" method="POST" enctype="multipart/form-data">
                    <input id="website" name="website" type="text" value="">
                    <!-- Leave for security protection, read docs for details -->
                    <div id="middle-wizard">
                        <div class="step">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="main_question mt-3 mb-4">
                                        <strong><span class="text-primary">1</span>/3</strong>
                                        What are the technical and additional skills that are needed to be a front-end
                                        developer?
                                    </h3>
                                    <div class="form-group">
                                        <label class="container_check version_2">Custom interface and layout
                                            <input type="checkbox" name="question_1[]"
                                                value="Custom interface and layout" class="required"
                                                onchange="getVals(this, 'question_1');">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_check version_2">Web site design
                                            <input type="checkbox" name="question_1[]" value="Web site design"
                                                class="required" onchange="getVals(this, 'question_1');">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_check version_2">Seo optimization
                                            <input type="checkbox" name="question_1[]" value="Seo optimization"
                                                class="required" onchange="getVals(this, 'question_1');">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_check version_2">CMS integrations (Wordpress)
                                            <input type="checkbox" name="question_1[]"
                                                value="CMS integrations (Wordpress)" class="required"
                                                onchange="getVals(this, 'question_1');">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /step-->
                        <div class="step">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="main_question mt-3 mb-4">
                                        <strong><span class="text-primary">2</span>/3</strong>
                                        What are the technical and additional skills that are needed to be a front-end
                                        developer?
                                    </h3>
                                    <div class="form-group">
                                        <label class="container_radio version_2">Custom interface and layout
                                            <input type="radio" name="question_2[]" value="Custom interface and layout"
                                                class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_radio version_2">Web site design
                                            <input type="radio" name="question_2[]" value="Web site design"
                                                class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_radio version_2">Seo optimization
                                            <input type="radio" name="question_2[]" value="Seo optimization"
                                                class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_radio version_2">CMS integrations (Wordpress)
                                            <input type="radio" name="question_2[]" value="CMS integrations (Wordpress)"
                                                class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /step-->
                        <div class="submit step">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="main_question mt-3 mb-4">
                                        <strong><span class="text-primary">3</span>/3</strong>
                                        What are the technical and additional skills that are needed to be a front-end
                                        developer?
                                    </h3>
                                    <div class="form-group">
                                        <input type="text" name="question_3[]" class="form-control required"
                                            placeholder="Enter Answer">
                                    </div>
                                    <div class="form-group">
                                        <textarea name="question_4[]" rows="8" cols="80" class="form-control required"
                                            placeholder="Enter Details Answer"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /step-->

                    </div>
                    <!-- /middle-wizard -->
                    <div id="bottom-wizard">
                        <button type="button" name="backward" class="btn btn-secondary backward">Prev</button>
                        <button type="button" name="forward" class="btn btn-primary forward">Next</button>
                        <button type="submit" name="process" class="btn btn-success submit">Submit</button>
                    </div>
                    <!-- /bottom-wizard -->
                </form>
            </div>
            <!-- /Wizard container -->
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/front/assets/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('assets/front/assets/js/jquery.wizard.js') }}"></script>
<script type="text/javascript">
// Time Count
$("#question_end").hide();

function countdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "Time is up!";
            $("#wizard_container").hide();
            $("#question_sug").hide();
            $("#question_end").show();
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = "<span class='time_block'>" + (hours ? hours + ':' + twoDigits(mins) : mins) +
                "</span> min <span class='time_block'>" + twoDigits(time.getUTCSeconds()) + "</span> seconds";
            setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }
    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();
}
countdown("time_count", 15, 0);

/*  Wizard */
jQuery(function($) {
    "use strict";
    $('form#wrapped').attr('action', 'kyc-complete.html');
    $("#wizard_container").wizard({
        stepsWrapper: "#wrapped",
        submit: ".submit",
        beforeSelect: function(event, state) {
            if ($('input#website').val().length != 0) {
                return false;
            }
            if (!state.isMovingForward)
                return true;
            var inputs = $(this).wizard('state').step.find(':input');
            return !inputs.length || !!inputs.valid();
        }
    }).validate({
        errorPlacement: function(error, element) {
            if (element.is(':radio') || element.is(':checkbox')) {
                error.insertBefore(element.next());
            } else {
                error.insertAfter(element);
            }
        }
    });
    //  progress bar
    $("#progressbar").progressbar();
    $("#wizard_container").wizard({
        afterSelect: function(event, state) {
            $("#progressbar").progressbar("value", state.percentComplete);
            $("#location").text("(" + state.stepsComplete + "/" + state.stepsPossible + ")");
        }
    });
});
</script>
@endsection