@extends('candidate::layouts.master')
@section('pagetitle','Manage Interview')
@section('content')
<style>
	.overlay {
        background: 'grey';
    opacity: '0.75';
    min-height: 215px;
    display: -webkit-box;
    display: -ms-flexbox;
    /* display: flex; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    width: 285px;
    /* top: -16px; */
    background-color: grey;
     border-radius: 6px;

}
.overlay h3 {
   
    color: #ffffff;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
    width: '100%';
    text-transform: uppercase;

}
</style>	
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
	<!--begin::Post-->
	<div class="content flex-row-fluid mt-15" id="kt_content">



		<!-- <div class="text-end " > -->
			<span class="px-1 align-self-center text-nowrap text-dark fw-bolder mb-1 fs-6">Interviewing for {{ucfirst($question->position->name)}}</span> 
			<!-- </div> -->
			<!--begin::Row-->
			<div class="row p-3">
				<input type='hidden' name='cid' id='cid' value='{{ $enpt_candidid }}' >
                <input type='hidden' name='qid' id='qid' value='{{ $qid }}' >
                <input type='hidden' name='auth_token' id='auth_token' value='{{ $auth_token }}' >

				<div class="card card-bordered mb-5 mb-xl-8">

					<div class="card-header">
						<h3 class="card-title">Question @if (session('qstn_index')) {{ session('qstn_index') }} @endif:</h3>
						<div class="card-toolbar">

						</div>
					</div>
					<!--begin::Body-->
					<div class="card-body py-3 ">
						<!--begin::Table container-->

						<div class="table-responsive">
							<!--begin::Table-->
							<table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4">
								<!--begin::Table head-->
								<thead>
									<tr class="border-0">

									</tr>
								</thead>
								<!--end::Table head-->
								<!--begin::Table body-->
								<tbody>
									<tr>

										<td class="text-start d-flex flex-column flex-row-auto w-500px">
											<!-- <div class=" border-none py-3"> -->
												<a href="javascript:void(0);" style="padding-top:6rem !important;" class=" py-20 d-flex flex-column-auto h-1% text-dark fw-bolder  mb-1 fs-6 ">{{$question->question}}</a>
												<span class="text-muted fw-bold d-block"></span>
												<!-- </div> -->
											</td>


											<td  class="text-center" width="100" id='videoelement'>

												<!--begin::Card-->
												<div class="card overlay overlay-block" id='streamBlock'>
													<div class="card-body p-0">
														<div class="overlay-wrapper">
															<video id="streamVideo" playsinline autoplay muted  width="100%" height="auto"> </video> 
															  
														</div>
														<div class="overlay-layer card-rounded bg-dark bg-opacity-25">

															<h3 id='notrecording' style='display:none;'>Not Recording</h3>
															<h3 id='counter' style='display:none;font-size: 50px'></h3>
														</div>
													</div>
												</div>
												<!--end::Card-->

												<!--begin::Card-->
												<div class="card d-none overlay overlay-block" id='playblock' style="cursor:default;">
													<div class="card-body p-0">
															<div class="overlay-wrapper">
																<video id="playvideo"  width="100%" height="auto"> </video>  
															</div>
															<div class="overlay-layer card-rounded bg-dark bg-opacity-25 " id="custom-opacity">
                                                                <div class="videodiv">
                                                                    <img src="{{asset('media/svg/misc/video-play.svg')}}" class="h-60px "  id="videoplay" alt="">
                                                                </div>
                                                            </div>
													</div>
												</div>
												<!--end::Card-->






                                                    </td>


                                                </tr>
                                            </tbody>
                                            <!--end::Table body-->
                                        </table>
                                    </div>
                                    <!--end::Table-->
                                </div>
                                <!--end::Body-->
                                <div class="">
                            <!-- <div class="d-flex flex-stack">
                                <div class="d-flex flex-column mw-200px">
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="text-gray-700 fs-6 fw-bold me-2">90%</span>
                                        <span class="text-muted fs-8">Job Success</span>
                                    </div>
                                </div>

                                <a href="javascript:void(0);" class="btn btn-sm btn-primary">
                                    Start Recording
                                </a>
                            </div> -->

                            <div class="d-flex flex-stack flex-wrap gap-2 py-5 ps-8 pe-5 border-top">
                            	<!--begin::Actions-->
                            	<div class="d-flex align-items-center me-3">

                            		<div class="btn-group me-4">
                            			<span>Attempts Left: <span class="text-dark fw-bolder mb-1 fs-6 attempt" data-attempt="{{ $attempt_left }}">{{ $attempt_left }}</span></span>
                            		</div>

                            		<div class="btn-group me-4 px-5 timecount">
                            			<span>Time Left:<span class="text-dark fw-bolder mb-1 fs-6 countdown" data-timecount="{{$question->allowed_ans_time}}"> {{$question->allowed_ans_time}}M 0S</span></span>
                            		</div>


                            	</div>
                            	<a href="javascript:void(0);" class="text-muted fw-bolder mb-1 fs-6 backto_overview ">Back to Overview</a>
                            	<!--end::Actions-->
                            	<!--begin::Toolbar-->
                            	<div class="d-flex align-items-center ">

                            		<div class="startfunction">
                            			<button href="javascript:void(0);" id='record' class="btn btn-sm btn-primary startrecord">
                            				Start Recording
                            			</button>
                            			<button href="javascript:void(0);" class="btn btn-sm btn-danger stoprecord" style="display:none;" disabled>
                            				Stop Recording
                            			</button>
                            		</div>
                            		<div class="completefunction" style="display:none;">
                            			<button href="javascript:void(0);" class="btn btn-sm btn-warning retakerecord">
                            				Re-take
                            			</button>
                            			<button href="javascript:void(0);" class="btn btn-sm btn-primary completerecord">
                            				Done
                            			</button>
                            		</div>
                            	</div>

                            	<!--end::Toolbar-->
                            </div>
                            
                        </div>
                    </div>
                    <!--end::Tables Widget 5-->
                </div>
                <!--end::Row-->

            </div>
            <!--end::Post-->
        </div>
        <!--end::Container-->
        @endsection

        @section('scripts')
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="{{asset('js/candidate/record.js')}}"></script>
        @endsection