@extends('user.index')

@section('content')
    <div id="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 examsection">
                <div id="examInfo">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="row">
                                <div class="col-md-4 col-sm-12"><img id="logo" src="{{ asset('images/logo.png') }}">
                                </div>
                                <div class="col-md-5 offset-md-3 col-sm-12"><br>
                                    <p> Drilling Well Control Programme - Level 3 <br> Equipment (Combined Surface and
                                        Subsea) </p>
                                    <div id="progrssBar"><span id="progress"></span></div>
                                    <div id="navigationprogressbox">0%</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12"><br>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="examSpecifics right" id="timerSection">
                                        <p>Time Remaining: 00:00:00</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 ">
                                    <div class="examSpecifics right" id="candidateDetails">

                                        <p class="ng-star-inserted"><span>
                                                Candidate: Test Candidate 3 </span><span>(CR-000000)</span><br><span>
                                                Language:English </span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><br>
                <div class="col-md-12">
                    <p id="redHeader" class="left" style="float: left;"> Thank you,
                        you have now completed your assessment. </p>
                </div>
                <div class="col-md-12">
                    <div id="questionsFlaggedData">

                    </div>
                </div>
                <div class="col-md-12">
                    <p style="clear: both; float: left;" class="left"> Please enter
                        any feedback you may have in the space below. Your feedback may be positive or negative
                        and may relate to any element of your assessment experience including the questions in
                        your assessment. </p>
                    <p style="clear: both; float: left;" class="left"> If you do not
                        wish to leave feedback please select the Skip Feedback button below. </p>
                </div>
                <div class="col-md-12">
                    <textarea id="txtFeedback" name="txtFeedback" questionid="General Feedback" rows="5" dir="ltr"
                        placeholder="General Feedback"></textarea>
                </div>
                <div class="col-md-12"><input id="subBtn" type="submit"
                        value="Submit Feedback &amp; Exit Assessment "><button id="skipBtn"> Skip
                        Feedback &amp; Exit Assessment </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .right {
            text-align: right;
        }

        p {
            color: #222cd0;
        }

        #subBtn {
            border-radius: 3px;
            color: #fff;
            background-color: #0772ba;
            border: 1px solid #0772ba;
            height: 32px;
            cursor: pointer;
            margin-top: 10px;
        }

        #txtFeedback {
            width: 100%;
        }

        #skipBtn {
            cursor: pointer;
            background: red;
            color: #fff;
            margin-left: 5px;
            padding: 3px;
            border: 1px solid red;
            border-radius: 3px;
            height: 32px;
        }

        #navigationprogressbox,
        #progrssBar {
            float: left;
            width: 85%;
            height: 35px;
            background-color: #e5e5e5;
            border: 1px solid #0772ba;
            position: relative;
        }

        #progress {
            content: "\a";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
        }

        #navigationprogressbox {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-weight: 400;
            vertical-align: middle;
            padding: 8px;
            float: left;
            border: 1px solid #0772ba;
            background-color: #0772ba;
            color: #fff;
            text-align: center;
            height: 35px;
            width: 15%;
        }

        #redHeader {
            color: red;
            font-weight: 700 !important;
        }

        #container {
            margin-right: 30px;
            margin-left: 30px;
            box-shadow: #aaa 0 0 30px;
            padding-left: 30px;
            padding-right: 30px;
            min-height: 100vh;
            font-family: Arial;
            font-size: 14px !important;
            font-weight: 400;
            line-height: 1.5;
            color: #222cd0;
            background-color: #fff7f0 !important;
        }

        #questionsFlaggedData,
        #responsesFlagged {
            text-align: left;
            border: 1px solid #aaa;
            margin-bottom: 20px;
            width: 100%;
        }
    </style>
@endsection