{% load i18n %}
<div class="sequence proctored-exam entrance" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      This exam is proctored.
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      To be eligible to earn credit for this course, you must take and pass the proctoring review for this exam.
    {% endblocktrans %}
  </p>
  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
    <a>
      {% trans "Continue to my proctored exam. I want to be eligible for credit." %}
    </a>
    <p>
      {% blocktrans %}
        You will be guided through steps to set up online proctoring software and to perform various checks.</br>
      {% endblocktrans %}
    </p>

    <i class="fa fa-arrow-circle-right"></i>
  </button>
  <button class="gated-sequence start-timed-exam" data-attempt-proctored=false>
    <a>
      {% trans "Take this exam without proctoring." %}
    </a>
      <i class="fa fa-arrow-circle-right"></i>
    <p>
      {% blocktrans %}
        I am not interested in academic credit.
      {% endblocktrans %}
    </p>
  </button>
</div>
<div class="proctored-exam-skip-confirm-wrapper hidden">
  <div class="proctored-exam-skip-confirm">
    <div class="msg-title">
      {% blocktrans %}
        Are you sure you want to take this exam without proctoring?
      {% endblocktrans %}
    </div>
    <div class="msg-content">
      {% blocktrans %}
        If you take this exam without proctoring, you will <strong> no longer be eligible for academic credit. </strong>
      {% endblocktrans %}
    </div>
    <div class="proctored-exam-skip-actions">
      <button class="proctored-exam-skip-confirm-button btn btn-primary btn-base" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}">
        {% trans "Continue Exam Without Proctoring" %}
      </button>
      <button class="proctored-exam-skip-cancel-button btn btn-default btn-base">
        {% trans "Go Back" %}
      </button>
    </div>
    <div class="clearfix"></div>
    </div>
</div>
{% include 'proctoring/seq_proctored_exam_footer.html' %}

<script type="text/javascript">
  var startProctoredExam = function(selector, exam_id, action_url, start_immediately, attempt_proctored) {
    $.post(
      action_url,
      {
        "exam_id": exam_id,
        "attempt_proctored": attempt_proctored,
        "start_clock": start_immediately
      },
      function(data) {
        // reload the page, because we've unlocked it
        location.reload();
      }
    ).fail(function(){
      enableClickEvent(selector);
      var msg = gettext(
        "There has been a problem starting your exam.\n\n" +
        "Possible reasons are that your account has not been fully activated,\n" +
        "you have are experiencing a network connection problem, or there has been\n" +
        "a service disruption. Please check these and try again."
      );
      alert(msg);
    });
  };

  var inProcess = false;

  var disableClickEvent = function (selector) {
    inProcess = true;
    $('body').css('cursor', 'wait');

    selector.each(function() {
      $( this ).css('cursor', 'wait');
    });

  };

  var enableClickEvent = function (selector) {
    inProcess = false;
    $('body').css('cursor', 'auto');
    selector.each(function() {
      $( this ).css('cursor', 'pointer');
    });
  };

  $('.start-timed-exam').click(
    function() {
      if (!inProcess) {
        disableClickEvent($(this));
        var attempt_proctored = $(this).data('attempt-proctored');

        if (!attempt_proctored) {
          enableClickEvent($(this));
          $(".proctored-exam.entrance").addClass('hidden');
          $(".proctored-exam-skip-confirm-wrapper").removeClass('hidden');
        } else {
          var action_url = $(this).data('ajax-url');
          var exam_id = $(this).data('exam-id');
          var start_immediately = $(this).data('start-immediately');
          startProctoredExam($(this), exam_id, action_url, start_immediately, attempt_proctored);
        }
      } else {
        return false;
      }
    }
  );
  $('.proctored-exam-skip-confirm-button').click(
    function(event){
      if (!inProcess) {
        // find the all the buttons and call disableClickEvent
        // on the events
        var events = $(this).parent().find('button');
        disableClickEvent(events);
        var action_url = $(this).data('ajax-url');
        var exam_id = $(this).data('exam-id');

        startProctoredExam(events, exam_id, action_url, true, false);
      } else {
        return false
      }
    }
  );
  $('.proctored-exam-skip-cancel-button').click(
    function(event){
      if (!inProcess) {
        enableClickEvent($(this));
        $(".proctored-exam.entrance").removeClass('hidden');
        $(".proctored-exam-skip-confirm-wrapper").addClass('hidden');
      } else {
        return false;
      }
    }
  )
</script>