@extends('layouts.admin')
@section('styles')
<style>
    h3{
        font-size: 22px;
        margin-bottom: 0px;
    }
    .details
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .details p
    {
        font-size: 20px;
        font-weight: 500;
    }
    .details label{
        font-size: 1.2rem;
        color: #6d6c6c;
    }
    p{
        margin-bottom: 5px;
    }
</style>
@endsection
@section('content')
<div class="card">
    <div class="card-header">
        <div class="details">
            <div>
                <h3>Quiz: {{$quiz->title}}</h3>
            </div>
           <div>
            <label>Remaining Time :</label>
            <input type="hidden" id="timeExamLimit" value="{{$quiz->time_limit}}">
            <input style="border:none;background-color: transparent;color:blue;font-size: 25px;" name="disp" type="text" class="clock" id="txt" value="00:00" size="5" readonly="true" />
           </div>
        </div>
    </div>

    <div class="card-body">
        <form method="post" id="submitAnswerFrm">
            <input type="hidden" name="quiz_id" id="quiz_id" value="{{$quiz->id}}">
            <input type="hidden" name="examAction" id="examAction" >
        <table class="align-middle mb-0 table table-borderless  table-hover" id="tableList">
            @foreach($quiz->questions as $key=>$ques)
            <tr>
                <td>
                    <p style="font-size: 1rem;margin-bottom:8px"><b>{{$key+1}} . {{$ques->question_bank->question}}</b></p>
                    <div class="row">
                    @foreach($ques->question_bank->options as $key2=>$option)
                    <div class="col-md-6">
                        <div class="form-group pl-4 ">
                            <input name="answer[{{$ques->question_bank->id}}]" value="{{$option->id}}" class="form-check-input" type="radio" value="" id="invalidCheck{{$option->id}}" required >
                            
                            <label class="form-check-label" for="invalidCheck{{$option->id}}">
                                {{$option->title}}
                            </label>
                        </div>  
                    </div>
                    @endforeach
                     </div>
                </td>
            </tr>
             @endforeach
            <tr>
                <td style="padding: 20px;">
                    <button type="button" class="btn btn-xlg btn-warning p-3 pl-4 pr-4" id="resetExamFrm">Reset</button>
                    <input name="submit" type="submit" value="Submit" class="btn btn-xlg btn-primary p-3 pl-4 pr-4 float-right" id="submitAnswerFrmBtn">
                </td>
            </tr>
      
        </table>
        </form>
    </div>
</div>
@endsection

@section('scripts')
@parent

<script>
 


// Select Time Limit
var mins
var secs;

function cd() {
  var timeExamLimit = $('#timeExamLimit').val();
  mins = 1 * m("" + timeExamLimit); // change minutes here
  secs = 0 + s(":01"); 
  redo();
}

function m(obj) {
  for(var i = 0; i < obj.length; i++) {
      if(obj.substring(i, i + 1) == ":")
      break;
  }
  return(obj.substring(0, i));
}

function s(obj) {
  for(var i = 0; i < obj.length; i++) {
      if(obj.substring(i, i + 1) == ":")
      break;
  }
  return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
  var disp;
  if(mins <= 9) {
      disp = " 0";
  } else {
      disp = " ";
  }
  disp += mins + ":";
  if(secs <= 9) {
      disp += "0" + secs;
  } else {
      disp += secs;
  }
  return(disp);
}

function redo() {
  secs--;
  if(secs == -1) {
      secs = 59;
      mins--;
  }
  $("input[name=disp]").val(dis(mins,secs));
  if((mins == 0) && (secs == 0)) {
    $('#examAction').val("autoSubmit");
     $('#submitAnswerFrm').submit();
  } else {
    cd = setTimeout("redo()",1000);
  }
}

function init() {
  cd();
}
window.onload = init;
var quiz_id= $('#quiz_id').val();
// Submit Answer
$(document).on('submit', '#submitAnswerFrm', function(){
  var examAction = $('#examAction').val();
  if(examAction != "")
  {
    Swal.fire({
        title: 'Time Out',
        text: "Answer submitting,please wait...",
        icon: 'warning',
        imageUrl: "https://www.boasnotas.com/img/loading2.gif",
        showCancelButton: false,
        allowOutsideClick: false,
        showConfirmButton: false,
    })
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var data= $(this).serialize();
   
        $.ajax({
            type: 'POST',
            url: "{{url('/quiz/exam')}}",
            data: {_token: CSRF_TOKEN,data:data},
            success: function (results) {
                swal.fire("Success!", results.res, "success");
                //window.location.href = "/all-courses"
                //return false;
            },
            error: function(results){
                swal.fire("Error!", results.responseJSON.res, "error");
                return false;
            }
        });
    }
    else
    {
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to submit your answer now?",
            icon: 'warning',
            showCancelButton: true,
            allowOutsideClick: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, submit now!',
            showLoaderOnConfirm: true,
            preConfirm: (login) => {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                var data= $(this).serialize();
                return  $.ajax({
                type: 'POST',
                url: "{{url('/quiz/exam')}}",
                data: {_token: CSRF_TOKEN,data:data},
                success: function (results) {
                    swal.fire("Success!", results.res, "success");
                },
                error: function(results){
                    swal.fire("Error!", results.responseJSON.res, "error");
                    return false;
                }
            });
            },

        }).then((result) => {
            //window.location.href = "/all-courses"
            return false;
        })
    }
return false;
});
</script>

@endsection