@extends('layouts.app')

@section('content')
<style>
			.container
			{
				width: 50vw;
				/*text-align: center;*/
				margin: 0 auto;
				margin-top: 3vw;
			}

				.container h1
				{
					font-size: 42px;
					font-weight: 300;
					color: #0f3c4b;
					margin-bottom: 40px;
				}
				.container h1 a:hover,
				.container h1 a:focus
				{
					color: #39bfd3;
				}

				.container nav
				{
					margin-bottom: 40px;
				}
					.container nav a
					{
						border-bottom: 2px solid #c8dadf;
						display: inline-block;
						padding: 4px 8px;
						margin: 0 5px;
					}
					.container nav a.is-selected
					{
						font-weight: 700;
						color: #39bfd3;
						border-bottom-color: currentColor;
					}
					.container nav a:not( .is-selected ):hover,
					.container nav a:not( .is-selected ):focus
					{
						border-bottom-color: #0f3c4b;
					}

				.container footer
				{
					color: #92b0b3;
					margin-top: 40px;
				}
					.container footer p + p
					{
						margin-top: 1em;
					}
					.container footer a:hover,
					.container footer a:focus
					{
						color: #39bfd3;
					}

				.box
				{
					font-size: 1.25rem; /* 20 */
					background-color: #a8d8e3;
					position: relative;
					padding: 100px 20px;
				}
				.box.has-advanced-upload
				{
					outline: 2px dashed #92b0b3;
					outline-offset: -10px;

					-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
					transition: outline-offset .15s ease-in-out, background-color .15s linear;
				}
				.box.is-dragover
				{
					outline-offset: -20px;
					outline-color: #c8dadf;
					background-color: #fff;
				}
					.box__dragndrop,
					.box__icon
					{
						display: none;
					}
					.box.has-advanced-upload .box__dragndrop
					{
						display: inline;
					}
					.box.has-advanced-upload .box__icon
					{
						margin: 0 auto;
						width: 150px;
						height: 150px;
						display: block;
						margin-bottom: 40px;
					}

					.box.is-uploading .box__input,
					.box.is-success .box__input,
					.box.is-success2 .box__input,
					.box.is-error .box__input
					{
						visibility: hidden;
					}

					.box__uploading,
					.box__success,
					.box__success2,
					.box__error
					{
						display: none;
					}
					.box.is-uploading .box__uploading,
					.box.is-success .box__success,
					.box.is-success2 .box__success2,
					.box.is-error .box__error
					{
						display: block;
						position: absolute;
						top: 50%;
						right: 0;
						left: 0;

						-webkit-transform: translateY( -50% );
						transform: translateY( -50% );
					}
					.box__uploading
					{
						font-style: italic;
					}
					.box__success, .box__success2
					{
						-webkit-animation: appear-from-inside .25s ease-in-out;
						animation: appear-from-inside .25s ease-in-out;
					}
						@-webkit-keyframes appear-from-inside
						{
							from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
							75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
							to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
						}
						@keyframes appear-from-inside
						{
							from	{ transform: translateY( -50% ) scale( 0 ); }
							75%		{ transform: translateY( -50% ) scale( 1.1 ); }
							to		{ transform: translateY( -50% ) scale( 1 ); }
						}

					.box__success span, .box__success2 span { font-size: 1rem; }
					.box__restart
					{
						font-weight: 700;
					}
					.box__restart:focus,
					.box__restart:hover
					{
						color: #39bfd3;
					}

					.js .box__file
					{
						width: 0.1px;
						height: 0.1px;
						opacity: 0;
						overflow: hidden;
						position: absolute;
						z-index: -1;
					}
					.js .box__file + label
					{
						max-width: 80%;
						text-overflow: ellipsis;
						white-space: nowrap;
						cursor: pointer;
						display: inline-block;
						overflow: hidden;
					}
					.js .box__file + label:hover strong,
					.box__file:focus + label strong,
					.box__file.has-focus + label strong
					{
						color: #3d66c0;
					}
					.js .box__file:focus + label,
					.js .box__file.has-focus + label
					{
						outline: 1px dotted #000;
						outline: -webkit-focus-ring-color auto 5px;
					}
						.js .box__file + label *
						{
							/* pointer-events: none; */ /* in case of FastClick lib use */
						}

					.no-js .box__file + label
					{
						display: none;
					}

					.no-js .box__button
					{
						display: block;
					}
					.box__button
					{
						font-weight: 700;
						color: #e5edf1;
						background-color: #39bfd3;
						display: none;
						padding: 8px 16px;
						margin: 40px auto 0;
					}
						.box__button:hover,
						.box__button:focus
						{
							background-color: #0f3c4b;
						}


@media all and (max-width: 960px) {
	.container {
		width: 80vw;
		margin-top: 3vw;
	}

	.box.has-advanced-upload {
		outline: 1px dashed #92b0b3;
	}

	.box {
		font-size: 0.8rem; /* 20 */
		padding: 60px 20px;
	}

	.box.has-advanced-upload .box__icon {
		width: 25vw;
		height: 25vw;
		margin-bottom: 5vw;
	}

	.box__success span, .box__success2 span { font-size: 0.7rem; }
}
</style>

	<div class="w60">
		<p><b>Create a unique fingerprint - hash imprint - for ANY file and validate later if its integrity is preserved on our Validate page.</b></p>
		<p>Your privacy is secured. The hash imprint is created in your browser and we do not store the file on our servers.</p>
	</div>

    <div role="main" ondrop="dropFile(event);" ondragover="dragOverHandler(event);" class="text-center">
        <div id="form" class="box has-advanced-upload">
		    <div class="box__input">
			    <img class="box__icon" src="http://everprove.com/demo/files/img/upload.png" />
			    <input type="file" name="files" id="file" onchange="selectFile(this.files[0])" class="box__file" style="display: none" data-multiple-caption="{count} files selected" />
			    <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
		    </div>

		    <div class="box__uploading">Processing&hellip;</div>
		    <div class="box__success">Done!</div>
		    <div class="box__error">Error! <span></span> <br /><a href="file" class="box__restart" role="button">Try again!</a></div>
        </div>
    </div>

    <div class="form-group" style="margin-top: 40px;">
        <label for="uploader" class="bmd-label-floating">{{ __('hash.uploader') }}</label>
        <input id="uploader" type="text" class="form-control" name="uploader" autocomplete="false" value="">
        <span class="invalid-feedback  offset-md-1" role="alert">
            <strong></strong>
        </span>
    </div>

    <div class="form-group">
        <label for="description" class="bmd-label-floating">{{ __('hash.description') }}</label>
        <input id="description" type="text" class="form-control" name="description" autocomplete="false" value="">
        <span class="invalid-feedback  offset-md-1" role="alert">
            <strong></strong>
        </span>
    </div>

    <div class="form-group" style="margin-top: 40px;">
        <label for="filename" class="bmd-label-floating">{{ __('hash.filename') }}</label>
        <input id="filename" type="text" class="form-control" name="uploader" autocomplete="false" value="">
        <span class="invalid-feedback  offset-md-1" role="alert">
            <strong></strong>
        </span>
    </div>

    <div class="form-group">
        <label for="hash" class="bmd-label-floating">{{ __('hash.hash') }}</label>
        <input id="hash" type="text" class="form-control" name="hash" autocomplete="false" value="">
        <span class="invalid-feedback  offset-md-1" role="alert">
            <strong></strong>
        </span>
    </div>

    <div id="main" class="w50">
		<button type="button" onclick="window.location.href='everdoc';" style="margin: 2vw 4vw; padding: 0.7vw 4vw; display: inline-block;">Back</button>
		<button id="button" type="button" onclick="window.location.href='{{ route('hash.fileparams') }}';" style="margin: 2vw 4vw; padding: 0.7vw 4vw; visibility: hidden; display: inline-block;">Next</button><br />
	  </div>
    </div>

@endsection

@push('scripts')
<script src="{{ asset('/js/sha256.jquery.debug.js') }}"></script>
<script>

    function saveFile(name, file) {
        var form = $( '.box' );
        var label = $( 'label[for=file]' );
        var errorMsg = $( '.box__error span' );

        label.text(name);

        if(file.size > 104857600)
        {
            form.addClass( 'is-error' );
            errorMsg.text( "Maximum allowed file size is 100MB" );
            return;
        }
        // preventing the duplicate submissions if the current one is in progress
        if( form.hasClass( 'is-uploading' ) ) return false;
        form.addClass( 'is-uploading' );
        form.removeClass( 'is-error' );

        var reader = new FileReader();
        reader.readAsBinaryString(file);

        reader.onload = function (evt) {
            form.removeClass( 'is-uploading' );

            var hash = $.sha256(reader.result);

            $('#filename').val(name);
            $('#hash').val(hash);
            form.addClass( 'is-success' );
            $("#button").css("visibility", "visible");
            /*
            $.ajax({url: "{{ route('hash.upload') }}", data: {"fn": name, "fh": hash}, success: function(result){
                form.addClass( 'is-success' );
                $("#button").css("visibility", "visible");
            }});
            */
        }

        reader.onerror = function (evt) {
            form.removeClass( 'is-uploading' );
            form.addClass( 'is-error' );
            errorMsg.text(reader.error.message);
        }
    }

    function selectFile(files) {
        saveFile(files.name, files)
    }

    function dropFile(ev) {

        ev.preventDefault();

        var form = $( '.box' );
        var errorMsg = $( '.box__error span' );

        var filename = "";

        if (ev.dataTransfer.items) {	// Use DataTransferItemList interface to access the file(s)
            var items = ev.dataTransfer.items;

            // only one file allowed (now)
            if(items.length > 1)
            {
                form.addClass( 'is-error' );
                errorMsg.text( "Please drop only one file" );
                return;
            }
            // If dropped items aren't files, reject them
            if (items[0].kind === 'file') {
                var file = items[0].getAsFile();
            }

            filename = items[0].getAsFile().name;
        } else {	// Use DataTransfer interface to access the file(s)
            var files = ev.dataTransfer.files;

            // only one file allowed (now)
            if(files.length > 1)
            {
                form.addClass( 'is-error' );
                errorMsg.text( "Please drop only one file" );
                return;
            }
            var file = files[0];

            filename = files[0].name;
        }

        saveFile(filename, file)
    }

    function dragOverHandler(ev) {
        // Prevent default behavior (Prevent file from being opened)
        ev.preventDefault();
    }
    </script>
@endpush