@extends('candidate::layouts.master')
@section('pagetitle','Manage Interview')
@section('content')
<!--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="d-flex align-items-center bg-primary rounded p-5 mb-7">

            <!--begin::Title-->
            <div class="flex-grow-1 pt-1 me-2 text-gray-100">
                <span class="fw-bolder text-gray-100 fs-6">Recommended:</span> Test your camera & microphone before beginning your interview
            </div>
            <!--end::Title-->
            <!--begin::Lable-->
            <a href="javascript:void(0);" class="fw-bolder text-white py-1 " data-bs-toggle="modal" data-bs-target="#mdldevice_test"><u>Run Test</u></a>
            <!--end::Lable-->
        </div>

        <!-- <div class="text-end " > -->
            <span class="px-1 align-self-center text-nowrap text-dark fw-bolder mb-1 fs-6">Interviewing for {{ucfirst($position->name)}}</span> 
            <!-- </div> -->
            <!--begin::Row-->
            @if(isset($questions_det))
            @foreach($questions_det as $key => $question)
            <div class="row p-3">
                <!--begin::Tables Widget 5-->
                <div class="card card-bordered mb-5 mb-xl-8">

                    <div class="card-header">
                        <h3 class="card-title">Question {{$key+1}}:</h3>
                        @if($question['attempt_exist'])
                        <div class="card-toolbar">
                             <button type="submit" class="btn btn-sm btn-success" ><i class="fa fa-check"></i>Completed</button>
                        </div>
                        @endif
                    </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 body-->
                                <tbody>
                                    <tr>

                                        <td class="text-start d-flex flex-column flex-row-auto w-200px">
                                            <!-- <div class=" border-none py-3"> -->
                                                <a href="#" 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 ">
                                                <!-- <div class="border-gray-200 border-dotted px-1 py-3"> -->
                                                    <span class="text-muted fw-bolder d-block">Attempts:</span>
                                                    <span class="text-dark fw-bolder mb-1 fs-3" data-kt-countup="true" data-kt-countup-value="{{$question['attempt_left']}}">{{$question['attempt_left']}}</span>
                                                    <!-- </div> -->
                                                </td>

                                                <td  class="text-center">
                                                    <!-- <div class="border-gray-200 border-dotted px-1 py-3"> -->
                                                        <span class="text-muted fw-bolder d-block">Time Limit:</span>
                                                        <span class="text-dark fw-bolder mb-1 fs-3" >{{$question['max_time']}}M 0S</span>
                                                        <!-- </div> -->
                                                    </td>

                                                    <td  class="text-center" width="240">

                                                        @if($question['record_file'] != '')

                                                        <div class="card overlay overflow-hidden "  >
                                                            <div class="card-body p-0">
                                                                <div class="overlay-wrapper">
                                                                    <video src="{{asset('uploads/candidates/recording/'.$question['record_file'])}}"id="upload_videotag{{$key}}" width="240" class="d-lg-block"   style="float:right;">
                                                                        Your browser does not support the video tag.
                                                                    </video>
                                                                </div>
                                                                <div class="overlay-layer card-rounded bg-dark bg-opacity-25 " id="custom-opacity{{$key}}" style="opacity:1">
                                                                    <div class="videodiv" data-keyval="{{$key}}">
                                                                        <img src="{{asset('media/svg/misc/video-play.svg')}}" class="h-60px "  id="videoplay{{$key}}" alt="" >
                                                                    </div>
                                                                    <div class="videodivpause" data-keyval="{{$key}}">
                                                                        <img src="{{asset('media/svg/misc/pause.png')}}" class="h-30px "  id="videopause{{$key}}" style="display:none; opacity:0.5;" >
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @else
                                                        <div class="border-gray-100 border  py-16 bg-dark bg-opacity-25 d-none d-lg-block">
                                                            <span class="text-dark fw-bolder d-block">
                                                            {{Str::upper('UnAnswered')}}</span>
                                                            <span class="text-dark fw-bolder mb-1 fs-3"></span>
                                                        </div>
                                                        @endif




                                                    </td>


                                                </tr>
                                            </tbody>
                                            <!--end::Table body-->
                                        </table>
                                    </div>
                                    <!--end::Table-->
                                </div>
                                <!--end::Body-->
                                 @if($completion != '3') 
                                <div class="card-footer quiz-footer text-end">

                                    @if($question['attempt_exist'] && $question['attempt_left'] > 0 )
                                     <button type="submit" class="btn btn-sm btn-warning qstndetail" data-url="/ques/{{encryptId($question['id'])}}" data-indexid="{{$key}}" >
                                        ReTake
                                    </button>
                                    @elseif(!$question['attempt_exist'])

                                        <button type="submit" class="btn btn-sm btn-primary qstndetail" data-url="/ques/{{encryptId($question['id'])}}" data-indexid="{{$key}}" >
                                        Start
                                    </button>

                                    @endif

                                </div>
                                @endif
                            </div>
                            <!--end::Tables Widget 5-->
                        </div>
                        @endforeach
                        @endif
                        <!--end::Row-->
                 @if($qcompleted &&  $completion != '3')       
                <div class="row p-3 text-center">   
                       <div class='col-md-12'>     
                            <button type="submit" class="btn btn-sm btn-primary px-12 " data-bs-toggle="modal" data-bs-target="#kt_modal_completeall" data-backdrop="static" data-keyboard="false">Submit</button>  
                         </div>
                    </div>
                @endif    


                        <!-- Modal start -->
                        <div class="modal fade" tabindex="-1" id="mdldevice_test">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Testing your Camera & Microphone</h5>

                                        <!--begin::Close-->
                                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                                            <span class="svg-icon svg-icon-2x">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                                </svg>
                                            </span>
                                        </div>
                                        <!--end::Close-->
                                    </div>

                                    <div class="modal-body">
                                        <p class="mb-7">Move in front of your camera and speak so we can detect your camera & microphone.</p>
                                        <div class="row">
                                            <div class="col-6 pt-10">

                                                <p>Testing your microphone 

                                                    <span id='elem_mic'>    
                                                        <span class="checkmedia spinner-border text-success spinner-border-sm align-middle ms-2"></span>
                                                        
                                                    </span>
                                                </p>
                                                <p>Testing your camera 
                                                    <span  id='elem_camera'> 
													    <span class="checkmedia spinner-border spinner-border-sm align-middle text-success ms-2"></span>
                                                        <i class="fa fa-check text-success d-none"></i>
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-6" id='elem_strvideo'>
                                                <video id="test_video" playsinline autoplay muted  width="100%" height="auto"> </video>
                                               
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <p class='text-danger d-none failedblock'> We're having trouble connecting to your hardwares, Please try again or switch to different device.</p>
                                        <button type="button" class="btn btn-primary  d-none successblock" data-bs-dismiss="modal">Continue</button>
                                        <button type="button" class="btn btn-danger failedblock d-none" id='retry'>Retry</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal end -->

                        <!-- Modal completeall -->
                        <div class="modal fade" tabindex="-1" id="kt_modal_completeall" >
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                   
                                <div class="modal-header border-0 pt-10 pb-2">
                                    <h5 class="modal-title">Are you sure your ready to submit your answers?</h5>
                                </div>
                                    <div class="modal-body py-2">
                                        
                                        <p>If you'd like to review your answers or re-take a question, click 'Not Yet' to go back to the main screen.</p>
                                    </div>

                                    <div class="modal-footer border-0">
                                        <input type="hidden" name="candid_id" value="{{Auth::user()->id}}" id="candid_id"> 
                                        <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Not Yet</button>
                                        <button type="button" class="btn btn-primary allqstn_submit">
                                            <span class="indicator-label">Submit</span>
                                            <span class="indicator-progress">Please wait...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <!-- Modal completeall end-->

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

                @section('scripts')
                <script src="{{asset('js/candidate/candidate.js')}}"></script>
                <script src="{{asset('js/candidate/device_test.js')}}"></script>
                @endsection