@extends('front.layout')

@section('content')
<div class="row">
	<div class="col-md-8 col-md-offset-2">

		

		  {!! Form::open(array( 'method' => 'post','id'=>'ajaxForm')) !!}
		  <div class="box">
		    <div class="box-footer">
			<div class="col-md-10 pull-left">
			<div id="progressbar-container" class="progress progress-striped active hidden">
  					<div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="0"></div>
				</div>
			</div>
			<div class="col-md-2 pull-right">
				<button id="submit-btn" type="submit" class="pull-right btn btn-success ladda-button" data-style="zoom-in"><span class="ladda-label"><i class="fa fa-save"></i> {{ trans('backpack::crud.add') }}</span></button>
			</div>
		    </div><!-- /.box-footer-->
		  </div><!-- /.box -->
		  {!! Form::close() !!}
	</div>
</div>

@endsection

@section('custom_scripts')
<script src="{{ asset('js') }}/bootstrap-progressbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var isUploadInProgress = new Boolean(false);;
	$("#ajaxForm").on('submit',(function(e){
        e.preventDefault();
        var form = document.forms.namedItem("ajaxForm"); // high importance!, here you need change "yourformname" with the name of your form
        var formdata = new FormData(form); // high importance!
		var timerCall;
		$('#progressbar-container').removeClass('hidden');
		$('#progress-bar').progressbar({display_text: 'fill'});
		isUploadInProgress = true;
        $.ajax({
            async: true,
            type: "POST",
            dataType: "json", // or html if you want...
            contentType: false, // high importance!
            url: $('#ajaxForm').attr('action'), // you need change it.
            data: formdata, // high importance!
            processData: false, // high importance!
            success: function (data) {
            	clearInterval(timerCall);
            	$('#progressbar-container').removeClass('active');
            	isUploadInProgress = false;
                //alert('success');

            },
            //timeout: 10000
        });
        $('#submit-btn').attr('disabled','disabled');

        timerCall = setInterval(function(){
        	$.ajax({
                async: true,
                type: "POST",
                dataType: "json", // or html if you want...
                //contentType: false, // high importance!
                url: '{{ action('HomeController@getProgressPercentage') }}',
                data: { 'user_session_id': '1'}, // high importance!
                //processData: false, // high importance!
                success: function (data) {
                	$('#progress-bar').attr('data-transitiongoal',data.percentage);
                	$('#progress-bar').progressbar({display_text: 'fill'});
                },
                //timeout: 10000
            });
            }, 1500);
    }));

	window.onbeforeunload = function() {
		if(isUploadInProgress === true){
 			return 'You have uploads going on!';
 		}else{
 			return null;
 		}
	    
	}
	
});
</script>

@endsection