<!DOCTYPE html>
<html>

<head>
    <!-- Favicon-->
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png' )}}">
    <title>faceit :: Sign up</title>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
        <!--
        CSS
        ============================================= -->
        <link rel="stylesheet" href="{{ url_for('static',filename='css/linearicons.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/font-awesome.min.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">

        <!-- Stylesheets /-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css_team/style.css') }}" />
        <!-- Main stylesheet /-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css_team/bootstrap.css') }}">
        <!-- Grid framework /-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
        <!-- Open Sans /-->
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
        <!-- PT Sans Narrow /-->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- Font Awesome /-->

</head>
<style>
    /* mirror the image */

    video,
    canvas {
        transform: scale(-1, 1);
        /*For Firefox (& IE) */
        -webkit-transform: scale(-1, 1);
        /*for Chrome & Opera (& Safari) */
    }
</style>
<style type ="text/css">
#banner {
            height: 40%;
            width: 105%;
            background-color: black;

        }

#banner_tag {
    padding: 10px;
    position: relative;
    color: white;
    margin-left: 35%;
}

#myVideo{
    position: relative;
    border: 2px solid black;
    width: 30% ;
    height: 40%;
}
#camera-input{
    position: relative;
    margin-left:30%;
    margin-top:5%;
    margin-bottom:10%;
    padding: 3%;
    width:100%;
    height: 80%;
}
#button{
    position: relative;
    margin-left: 10%;
}
#form-input{
    position: relative;
    width: 50%;
    margin-left: 25%;
    margin-top: 5%;
}
.footer {
			height:20%;
			width : 100%;
			background-color:black;
}
.footer-align{
			padding:20px;
}
.footer-social{
    position: relative;
    margin-top:0%;
    margin-top:2%;
    margin-left:4%;
    width: 50%;
}
</style>
<body>
    <div id="banner" class="row fullscreen">
        <h2 id="banner_tag">Welcome to the Future </h2>
    </div>
    
    <div id="input">
        <div id="form-input" >
            <!-- <form id="login-detail" action="/signup_user" method="POST"> -->
            <form id="login-detail" >
                <div class="form-group" >
                    <label for="email_address" style="color:black; font-size:20pt;margin-bottom:10px;">Email address </label>
                    <input type="email" class="form-control" name ="exampleInputEmail1" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" style="font-size:17pt; height:40px;" required>
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                    <label for="name" style="color:black; font-size:20pt;margin-bottom:10px;">Name</label>
                    <input type="name" class="form-control" name="name" id="name" placeholder="Enter name" style="font-size:17pt; height:40px;" required>
                </div>
                <div class="form-group">
                    <label for="password" style="color:black; font-size:20pt;margin-bottom:10px;">Password</label>
                    <input type="password" class="form-control" name = "exampleInputPassword1" id="exampleInputPassword1" placeholder="Password" style="font-size:17pt; height:40px;" required>
                </div> 
            </form>
        </div>
        <div id ="camera-input">        
                <div id ="face-input">
                    <video id="myVideo"  autoplay></video>
                </div>
                <button id="button" class="btn btn-success" style="vertical-align:middle"> Sign up  </button>
        </div>
        
    </div>
        <footer class="footer" id="contact-us">
            <div class="footer-align">
                <h2 style="color:white;position:absolute; margin-left:40%;">Contact Us</h2>
                <br/>
                <div class="footer-social">
                    <a href="#">
                        <i class="fa fa-facebook"></i>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <i class="fa fa-twitter"></i>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <i class="fa fa-youtube"></i>
                    </a>
                </div>
            </div>
        </footer>
    
    <script>

        let v = document.getElementById("myVideo");
        let b = document.getElementById("button");
        //create a canvas to grab an image for upload
        let imageCanvas = document.createElement('canvas');
        let imageCtx = imageCanvas.getContext("2d");

        //Add file blob to a form and post
        function postFile(file) {
            // get form data
            email = document.getElementById("exampleInputEmail1").value
            pass = document.getElementById("exampleInputPassword1").value
            name = document.getElementById("name").value

            let formdata = new FormData();
            formdata.append("image", file);
            formdata.append("email", email);
            formdata.append("pass", pass);
            formdata.append("name", name);

            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/signup_user', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    var data = JSON.parse(this.responseText);
                    console.log(this.response);
                    if(data['duplicate'] == true){
                        alert('User already registered !');
                        resetFields();
                        window.location.href = "{{ url_for('sign_up')}}";
                    }
                    else if(data["face_present"] == true ) {
                        alert('User Registration Successful !');
                        window.location.href = "{{ url_for('dashboard')}}";
                    }
                    else {
                        alert('No face detected in the picture. Try again !');
                        window.location.href = "{{ url_for('sign_up')}}";
                    } 
                }
                else {
                    console.error(xhr);
                }
            };

            xhr.send(formdata);
        }
        
        // for clearing the form fields
        function resetFields(){
            document.getElementById("exampleInputEmail1").value = "";
            document.getElementById("exampleInputPassword1").value = "";
            document.getElementById("name").value = "";
        }

        //Get the image from the canvas
        function sendImagefromCanvas() {

            //Make sure the canvas is set to the current video size
            imageCanvas.width = v.videoWidth;
            imageCanvas.height = v.videoHeight;

            imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);

            //Convert the canvas to blob and post the file
            imageCanvas.toBlob(postFile, 'image/jpeg');
        }

        //Take a picture on click
        v.onclick = function () {
            console.log('click');
            sendImagefromCanvas();
        };

        //Take a picture on click
        b.onclick = function () {
            console.log('click');
            sendImagefromCanvas();
        };

        window.onload = function () {

            //Get camera video
            navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 }, audio: false })
                .then(stream => {
                    v.srcObject = stream;
                })
                .catch(err => {
                    console.log('navigator.getUserMedia error: ', err)
                });

        };

    </script>
</body>

</html>
