<div class="container-home">
	<h3 class="recent-articles heading_all_sections_top">
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16.6256 3.12837L9.29145 10.4625L9.29886 14.7097L13.537 14.7022L20.8682 7.37102C21.5912 8.75426 22 10.3277 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C13.6689 1.99658 15.2423 2.40541 16.6256 3.12837ZM20.4853 2.09709L21.8995 3.5113L12.7071 12.7037L11.2954 12.7062L11.2929 11.2895L20.4853 2.09709Z" fill="currentColor"></path></svg>
			<span>{{LANG edit_app}}</span>
		</span>
	</h3>


			<div class="upload_video_bg_color">
				<div class="progress hidden">
		            <span class="percent">0%</span>
		            <div class="progress_bar_parent">
		                <div class="bar upload-progress-bar progress-bar active"></div> 
		            </div>
		            <div class="clear"></div>
		            <div class="text-center pt_prcs_vdo"></div>
		        </div>
				<form action="" class="step_2_form user-app-form" method="POST">
					<div class="user-app-alert"></div>
					<div class="form-group">
						<label for="app_id">{{LANG app_id}}</label>  
							<input id="app_id" type="text" placeholder="" class="form-control input-md" value="{{app_id}}" readonly>
					</div>
					<div class="form-group">
						<label for="app_secret">{{LANG app_secret}}</label>  
							<input id="app_secret" type="text" placeholder="" class="form-control input-md" value="{{app_secret}}" readonly>
					</div>
					<div class="form-group">
						<label for="app_name">{{LANG name}}</label>  
							<input id="app_name" name="app_name" type="text" placeholder="" class="form-control input-md" value="{{app_name}}">
					</div>
					<div class="form-group">
						<label for="app_website_url">{{LANG domain}}</label>  
							<input id="app_website_url" name="app_website_url" type="text" placeholder="" class="form-control input-md" value="{{app_website_url}}">
					</div>
					<div class="form-group">
						<label for="app_callback_url">{{LANG redirect_uri}}</label>  
							<input id="app_callback_url" name="app_callback_url" type="text" placeholder="" class="form-control input-md" value="{{app_callback_url}}">
					</div>
					<div class="form-group">
						<label for="app_description">{{LANG descritpion}}</label>  
							<textarea name="app_description" id="app_description" cols="30" rows="5" class="form-control">{{app_description}}</textarea>
					</div>
					<div class="">
						<div><label for="app-media">{{LANG thumbnail}}</label> <span class="help-block">jpg, png, gif</span> </div>
						
						<div class="media_custom_css mt-15" onclick="document.getElementById('app-media').click(); return false">
							<img src="{{CONFIG theme_url}}/img/upload_image.png">
							<span>{{LANG select_media}}</span>
						</div>
						
						<div class="blog" id="productimage-holder"><img src="{{app_avatar}}" alt='Picture' class="thumb-image"></div>
						
						<input id="app-media" name="app_avatar" type="file" class="hidden" accept="image/*">
						
					</div>
					<input type="hidden" name="id" value="{{id}}">
					<div class="mt-15">
						<button type="submit" id="submit-btn" class="btn btn-main upload_custom_new">{{LANG save}}</button>
					</div>
				</form>
			</div>


</div>

<script>

    var _Delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    function scrollToTop() {
        verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $('html');
        offset = element.offset();
        offsetTop = offset.top;
        $('html, body').animate({
            scrollTop: offsetTop
        }, 300, 'linear');
    }

  var bar         = $('.bar');
  var percent     = $('.percent');

	jQuery(document).ready(function($) {
		$("#app-media").on('change', function() {
			$("#productimage-holder").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture' class='thumb-image'>");
	  });

    $('.user-app-form').ajaxForm({
      url: '{{LINK aj/developers/edit}}?hash=' + $('.main_session').val(),
      dataType:"json",
      beforeSend: function() {
        if ($("#app-media").val()) {
          $(".user-app-alert").html($('.progress').clone(true).addClass('progress-clone').removeClass('hidden'));
          bar     = $('.progress-clone').find('.bar');
          percent = $('.progress-clone').find('.percent');
        }

        $('#submit-btn').attr('disabled', true).text("{{LANG please_wait}}");
        
      },
      uploadProgress: function(event, position, total, percentComplete) {
          if(percentComplete > 50) {
            percent.addClass('white');
          }
          var percentVal = percentComplete + '%';
          bar.width(percentVal);
          percent.html(percentVal);

          if (percentComplete == 100) {
            $(".user-app-alert").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        $('#submit-btn').removeAttr('disabled').text('{{LANG edit}}');
        if (data.status == 200){
          $(".user-app-alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            _Delay(function(){
            window.location.href = data.url;
          },2000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').text('{{LANG edit}}');
          $(".user-app-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
	});
</script>