{% extends 'exam_layout.html' %}
{% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='sdk.js') }}"></script>
<script>var tid = "{{test_id}}";</script>
<main>
  <section class="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
             <div class="container">
                     <div class="col-12 d-flex align-items-center justify-content-center">
                         <div class="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-900">
                             <div class="text-center text-md-center mb-4 mt-md-0">
                                 <div class="card-body">
                                  <div class="row">
                                    <div class="col"><span><h4 class="display-6">Name: {{session['name']}}</h4></span></div>
                                    <div class="col"><span><h4 class="display-6">Email: {{session['email']}}</h4></span></div>
                                  </div>
                                  </div>
                             </div>
                             <div class="row">
                              <div class="form-group col-3">
                                <div class="mb-0 h6">
                                  SUBJECT: {{subject}}
                                  </div>
                                  </div>
                                  <div class="form-group col-3">
                                    <div class="mb-0 h6">
                                      TOPIC: {{topic}}
                                      </div>
                                      </div>
                                      <div class="form-group col-3">
                                        <div class="mb-0 h6">
                                          EXAM-ID: {{test_id}}
                                          </div>
                                          </div>
                                          <div class="form-group col-3">
                                            <div class="mb-0 h6">
                                              TIME LEFT:<div id="time">{{duration}}                                                </div>
                                              </div>
                            </div>
                            </div>
               <div class="card-body">
                             <form action="" method="POST" id="prac" class="mt-4">
                              {% for test in callresults %}
                                 <div class="form-group">
                                     <div class="mb-0 h4">
                                      Q. {{test['qid']}} {{test['q']}} [MAX MARKS: {{test['marks']}}]
                                     </div>
                                 </div>
                                 <div class="form-group">
                                  <div class="mb-0 h3">
                                    <div data-id="example-widget" data-widget="4bada29b6d7c88d59406aa65c3d823ae"></div>                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="h6" for="exampleFormControlTextarea1">Code Entered By You:</label>
                                <textarea id="codeByStudent" name="codeByStudent" class="form-control" rows="6" columns="50" readonly></textarea>
                                </div>
                                <div class="form-group">
                                <label class="h6" for="exampleFormControlTextarea1">Input Entered By You:</label>
                                <textarea id="inputByStudent" name="inputByStudent" class="form-control" rows="6" columns="50" readonly></textarea>
                                </div>
                                <div class="form-group">
                                <label class="h6" for="exampleFormControlTextarea1">Execution Status:</label>
                                <textarea id="executedByStudent" name="executedByStudent" class="form-control" rows="2" columns="50" readonly></textarea>
                                </div>                         
      <input type="hidden" name="test_id" value="{{ test_id }}">
      <input type="submit" class="btn btn-primary" value="Finish Exam">
    
      {% endfor %}
          </form>

          <div class="form-group">
            <div class="container">
              <div class="justify-content-center align-items-center">
                <div id ="livecheck" style="width:320px; height:320px; display: none;">
                  <script src="https://tokbox.com/embed/embed/ot-embed.js?embedId=2020dbd9-0a89-472d-a60b-ca12ddfd48bc&room={{test_id}}"></script>
              </div>
              </div>
            </div>
        
          <div class="form-group">
            <div class="container" id ="videocheck" style="display: none;">
              <div class="justify-content-center align-items-center">
              <video id="stream" width="320" height="320">
                <canvas id="capture" width="320" height="320"></canvas>
              </video>
              </div>
              </div>
            </div>

     
    </div>
   </div>
   <div>
   </div>
 </div>
 </section>
 </main>
  <script type="text/javascript" src="{{ url_for('static', filename='apppractical.js') }}"></script>
  <script>
    var vid = "{{proctortypep}}";
console.log(vid)
if(vid == "0")
{
  document.getElementById('videocheck').style.display = "block"
  startStreaming();
  captureSnapshot();
}
else
{
  document.getElementById('livecheck').style.display = "block"
}
    </script>
  <footer id="sticky-footer" class="py-4">
    <div class="d-flex text-center justify-content-center align-items-center" role="contentinfo">
                  <p class="font-weight-bold font-medium mb-0">Copyright © MyProctor.ai
                      <span class="current-year"><script>document.write(new Date().getFullYear())</script></span>. All rights reserved.</p>
    </div><br>
    <div class="d-flex text-center justify-content-center align-items-center" role="contentinfo">
          <p class="font-weight-bold font-small mb-0"><span>Made with &#128151 By NARENDER KESWANI</span></p>
  </div>
  </footer>
{% endblock %}