@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">
                            <div class="row">
                                <div class="col-md-4 offset-md-8 col-sm-12">
                                    <div id="timerSection"><br>
                                        <p>Time Remaining <span
                                                style="border: 1px solid #222cd0; padding: 3px;">00:00:00</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-4 offset-md-8  col-sm-12 ">
                                    <div 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><br><br>
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="content" class="left" style="float: left;">
                                <p id="welcomeHeader">Welcome to your Drilling Well Control
                                    Programme Level 3 Equipment Assessment</p><br>
                                <p id="cvrText">
                                <p>Welcome to the upedia demo for digital&nbsp;assessments.</p>
                                </p>
                                <p id="startText" class="ng-star-inserted mt-5">Please select
                                    the Start Exam button below to begin</p>
                                <div id="btns"><button class="input-button ng-star-inserted" style="float: left;">Start
                                        Exam</button></div>
                            </div>
                        </div>
                    </div><br><br>
                    <div class="row">
                        <div class="col-sm-12 text-right"><a class="footer-light" disabled="disabled" id="Exam1_hlEcom"
                                tabindex="-1" target="_blank">© eCom Scotland 2018</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        #examInfo {
            margin: 10px;
        }

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

        #progress {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
        }

        #navigationprogressbox {
            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%;
        }

        #welcomeHeader {
            color: red;
            margin-top: 50px;
            font-size: 14px;
        }

        #content {
            margin-top: 35px;
        }



        .hide {
            display: none;
        }

        #btnContinue,
        #startBtn {
            background: #597eba;
            color: #fff;
            border-radius: 5px;
            padding: 10px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid #597eba;
            width: 120px;
        }

        body {
            width: 100%;
            height: 100%;
        }


        .input-button {
            cursor: pointer;
            color: #f9fafe;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #486fb2;
            background: linear-gradient(to bottom, #99c3e9, #5271b4);
            padding: 6px 20px;
        }

        #container {
            font-weight: 400 !important;
            line-height: 1.5 !important;
            color: #222cd0 !important;
            background: #fff7f0 !important;
            font-size: 14px !important;
        }

        .text-right {
            text-align: right !important;
        }
    </style>
@endsection