<!doctype html>
<html lang="en">

<head>
	<title>Peernet Upload file</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<link rel="stylesheet" href="templates/css/style.css">

</head>

<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #04AA6D;
    }
</style>

<body>
	<section class="ftco-section">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-12 col-lg-10">
					<div class="wrap d-md-flex">
						<div class="text-wrap p-4 p-lg-5 text-center d-flex align-items-centert">
							<div class="text w-100">
								<h2 class="Peernetblue">Upload file to peernet</h2>
								<br>
                                <br>
<!--								<form class="form-group" method="POST" action="/upload" enctype="multipart/form-data">-->
									<div class="form-group mb-3">
										<!-- <label for="formFileLg" class="form-label">Upload your file</label> -->
										<input class="btn btn-white btn-outline-white" id="formFileLg" type="file" name="file" required>
									</div>
									<input class="btn btn-white btn-outline-white" type="button" value="Submit" onclick="uploader()">
									{{ if .error }}
									<h3 style="color:red"> Error: {{ .error }} </h3>
									{{end}}
<!--								</form>-->

<!--                                <div id="myProgress">-->
<!--                                    <div id="myBar"></div>-->
<!--                                </div>-->
                                <br>
<!--                                <div class="progress">-->
<!--                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 3%"></div>-->
<!--                                </div>-->
<!--                                <h3 style="color:white"> or </h3>-->
<!--                                <h4 style="color:white">curl {{ .address }}/uploadCurl -F add=@&lt;file name&gt;</h4>-->
								<!-- <a href="#" class="btn btn-white btn-outline-white" tyle="color:#3ac4e2">Upload file</a> -->
                                <br>
								<br>
                                <!-- <h2>OR</h2>
                                <a href="#" class="btn btn-white btn-outline-white" style="color:#3ac4e2">Download Peernet browser</a>
                                <br> -->
                                <!-- <a style="color:#3ac4e2">This is to ensure the user can download file directly 
                                from your computer</a> -->
							</div>
						</div>
						<div class="login-wrap p-4 p-lg-5">
							<div class="d-flex">
								<div class="w-100">
									<h3 class="mb-4">File information</h3>
								</div>
								<div class="w-100">
						
								</div>
							</div>
							<form action="#" class="signin-form">
								<div class="form-group mb-3">
									<label class="label" for="name">File Name:</label>
									<p id="fileName"> {{ .filename }} </p>
								</div>
								<div class="form-group mb-3">
									<label class="label" for="name">File Size:</label>
									<p id="fileSize"> {{ .size }} bytes</p>
								</div>
<!--								<div class="form-group mb-3">-->
<!--									<label class="label" for="name">File Hash:</label>-->
<!--									{{ if .hash }}-->
<!--									<p> {{ .hash }} </p>-->
<!--									{{end}}-->
<!--								</div>-->
                                <div class="form-group mb-3">
									<label class="label" for="name">Sharable Link:</label>
                                    <br>
									<a href="{{ .link }}" style="color:#1d91ac" target="_blank" id="fileLink"></a>
								</div>
								<!-- <div class="form-group mb-3">
									<label class="label" for="password">Password</label>
									<input type="password" class="form-control" placeholder="Password" required>
								</div><div class="form-group mb-3">
									<label class="label" for="name">File Name:</label>
									<p>Test.txt</p>
								</div> -->
<!--								</div>-->
								<div class="form-group d-md-flex">
									<!-- <div class="w-50 text-left">
										<label class="checkbox-wrap checkbox-primary mb-0">Remember Me
											<input type="checkbox" checked>
											<span class="checkmark"></span>
										</label>
									</div>
									<div class="w-50 text-md-right">
										<a href="#">Forgot Password</a>
									</div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="js/jquery.min.js"></script>
	<script src="js/popper.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/main.js"></script>

    <script>
        // For the upload and progress bar
        // The first call will generate an upload ID
        // The second call will start the upload based
        // on the ID presented
        //

        var backendUrl = {{ .backendUrl }}
        function uploader() {
            var formData = new FormData();
            var uuid = generateUUID()
            formData.append("id", uuid);
            formData.append("file",  document.getElementById("formFileLg").files[0]);
            var request = new XMLHttpRequest();

            request.open("POST", "/upload");
            request.send(formData);
            //
            // setTimeout(function(){
            //     console.log(UploadTracker(uuid));
            // }, 100);


            request.onload = () => {
                if ( request.readyState == 4 &&  request.status == 200) {
                    let data =  request.response;
                    console.log(data);

                    data = JSON.parse(data)

                    document.getElementById("fileName").innerText = data["filename"]
                    document.getElementById("fileSize").innerText = data["size"] + " bytes"
                    document.getElementById("fileLink").innerText = data["filename"] + " link"
                    document.getElementById("fileLink").href = data["link"]

                } else {
                    console.log(`Error: ${ request.status}`);
                }
            };
        }

        function UploadTracker(uuid) {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open( "GET", "/uploadStatus?uuid=" + uuid, false ); // false for synchronous request
            xmlHttp.send( null );
            return xmlHttp.responseText;
        }

        // source: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
        function generateUUID() { // Public Domain/MIT
            var d = new Date().getTime();//Timestamp
            var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16;//random number between 0 and 16
                if(d > 0){//Use timestamp until depleted
                    r = (d + r)%16 | 0;
                    d = Math.floor(d/16);
                } else {//Use microseconds since page-load if supported
                    r = (d2 + r)%16 | 0;
                    d2 = Math.floor(d2/16);
                }
                return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
        }

    </script>

</body>

</html>