{% extends 'layout.html' %}
{% block body %}
<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-650">
                            <div class="text-center text-md-center mb-4 mt-md-0">
                                <h1 class="mb-0 h3">Create an Account</h1>
                            </div>
							<img src="{{ url_for('static', filename='personal_information.png') }}">
                            <div class="card-body">
							    <form action="" method="POST" class="mt-4">
                                    <div class="form-group">
                                      <label for="email">EMAIL</label>
                                      <div class="input-group mb-4">
                                          <div class="input-group-prepend">
                                              <span class="input-group-text"><span class="fas fa-envelope"></span></span>
                                          </div>
                                          <input name="email" type="email" class="form-control" id="email" placeholder="example@company.com" aria-label="email address" required>   
                                      </div>
                                  </div>
                                  <div class="form-group">
                                    <label for="name">NAME</label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-user"></span></span>
                                        </div>
                                        <input name="name" class="form-control" id="name" placeholder="John Doe" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                  <label for="password">PASSWORD</label>
                                  <div class="input-group mb-4">
                                      <div class="input-group-prepend">
                                          <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                      </div>
                                      <input name="password" type="text" class="form-control" id="password" style="-webkit-text-security:disc;" placeholder="Password" aria-label="Password" required>
                                  </div>
                              </div>
                            <div class="form-group">
                                <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Choose User Type</label>
                                <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref" name="user_type" required>
                                    <option value="student">Student</option>
                                    <option value="teacher">Professor</option>
                                </select>
                            </div>
                            <div class="form-group">
                            <video id="stream" width="370" height="320">
                                <canvas id="capture" width="370" height="320">
                                </canvas>
                              </video>
                              <br>
                                <button id="btn-capture" type="button" class="btn btn-primary justify-content-center">Capture Image</button>
                            <br><br>
                                <div id="snapshot"></div>
                            <input type="hidden" id="image_hidden" name="image_hidden">
                            </div>
      <input type="submit" class="btn btn-primary form-group justify-content-center" value="Register">
    </form>
    <p>Already have an account?
        <a href="/login" >Click here</a>.
      </p>
  </div>
  <div>
  </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script>
    // The buttons to start & stop stream and to capture the image
    //var btnStart = document.getElementById( "btn-start" );
    //var btnStop = document.getElementById( "btn-stop" );
    var btnCapture = document.getElementById( "btn-capture" );

    // The stream & capture
    var stream = document.getElementById( "stream" );
    var capture = document.getElementById( "capture" );
    var snapshot = document.getElementById( "snapshot" );
    
    // The video stream
    var cameraStream = null;
    
    btnCapture.addEventListener( "click", captureSnapshot );

    // Attach listeners
    
    // Start Streaming
    function startStreaming() {
    
      var mediaSupport = 'mediaDevices' in navigator;
    
      if( mediaSupport && null == cameraStream ) {
    
        navigator.mediaDevices.getUserMedia( { video: true } )
        .then( function( mediaStream ) {
    
          cameraStream = mediaStream;
    
          stream.srcObject = mediaStream;
    
          stream.play();
        })
        .catch( function( err ) {
    
          console.log( "Unable to access camera: " + err );
        });
      }
      else {
    
        alert( 'Your browser does not support media devices.' );
    
        return;
      }
    }
    
    // Stop Streaming
    function stopStreaming() {
    
      if( null != cameraStream ) {
    
        var track = cameraStream.getTracks()[ 0 ];
    
        track.stop();
        stream.load();
    
        cameraStream = null;
      }
    }
    
    function captureSnapshot() {
    
      if( null != cameraStream ) {
    
        var ctx = capture.getContext( '2d' );
        var img = new Image();
    
        ctx.drawImage( stream, 0, 0, capture.width, capture.height );
      
        img.src		= capture.toDataURL( "image/png" );
        img.width	= 370;
        img.height	= 320;
        //console.log(capture.toDataURL( "image/png" ));
        snapshot.innerHTML = '';
    
        snapshot.appendChild( img );
        var d1 = capture.toDataURL("image/png");
        var res = d1.replace("data:image/png;base64,", "");
        console.log(res);
        snapshot.innerHTML = '';
        snapshot.appendChild( img );
        $("#image_hidden").val(res)    

      }
    }
    window.onload = function() {
       startStreaming();
       captureSnapshot();
    }
    
    </script>
{% endblock %}