<div class="row">
	<div class="col-lg-1"></div>
	<div class="col-lg-10">
		<div class="page-margin wow_creads_minstp wow__minstp step-one-active">
			<div class="line">
				<div class="line_sec"></div>
				<div class="dot one"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg></div>
				<div class="dot two"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg></div>
				<div class="dot three"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg></div>
			</div>
			<div class="steps">
				<div class="step step-one"><?php echo $wo['lang']['ad_media']; ?></div>
				<div class="step step-two"><?php echo $wo['lang']['info']; ?></div>
				<div class="step step-three"><?php echo $wo['lang']['follow']; ?></div>
			</div>
		</div>
		<div class="page-margin wow_content">	
			<div class="add-photo wow_usr_steps">
				<h2><?php echo $wo['lang']['add_photo'];?></h2>
				<h4><?php echo $wo['lang']['add_photo_des'];?></h4>
				<div class="upload-image" onclick="document.getElementById('avatar').click(); return false">
					<div class="upload-image-content">
						<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg><br>
						<?php echo $wo['lang']['upload_your_photo'];?>
					</div>
				</div>
				<div id="progress">
					<span id="percent">0%</span>
					<div class="progress">
						<div id="bar" class="progress-bar progress-bar-striped active"></div> 
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="continue-button wow_usr_steps_cont">
				<small class="skip-step" onclick="Wo_SkipStep('startup_image');"><?php echo $wo['lang']['start_up_skip'];?></small>
				<button class="btn con-button btn-main btn-mat btn-mat-raised" disabled onclick="Wo_NextStep();"><?php echo $wo['lang']['start_up_continue'];?></button>
			</div>
		</div>
	</div>
	<div class="col-lg-1"></div>
</div>

<form action="#" method="post" class="profile-avatar-changer" style="display:none">
    <input type="file" id="avatar" name="avatar" accept="image/x-png, image/jpeg" onchange="Wo_UpdateProfileAvatar();">
    <input type="hidden" name="user_id" id="user-id" value="<?php echo $wo['user']['user_id'];?>">
</form>
<script type="text/javascript">
var user_id = $('#user-id').val();
$(function () {
	var bar = $('#bar');
  var percent = $('#percent');
  var status = $('#status');
	$('form.profile-avatar-changer').ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=update_user_avatar_picture&s=start',

    beforeSend: function () {
      var percentVal = '0%';
      bar.width(percentVal);
      percent.html(percentVal);
    },
    uploadProgress: function (event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.width(percentVal);
      $('#progress').slideDown(200);
      if(percentComplete > 50) {
        percent.addClass('white');
      }
      percent.html(percentVal);
    },
    success: function (data) {
      if(data.status == 200) {
      	$('#progress').slideUp(200);
        $('.upload-image').html('<img src="' + data.img + '">');
        $('h2').text(data.big_text);
        var Title = $('<textarea />').html(data.small_text).text();
        $('h4').text(Title);
        $('.upload-image').css({'border': '0'});
        $('[id^=updateImage-' + user_id + ']').attr("src", data.img);
        $('.upload-image img').css({'padding': '2px', 'border-radius':'6px'});
        $('button').attr('disabled', false);
        $('.skip-step').hide();
      }
    }
  });
});
function Wo_UpdateProfileAvatar() {
  $("form.profile-avatar-changer").submit();
}
function Wo_NextStep() {
  $('button').attr('disabled', true);
  $('button').text("<?php echo $wo['lang']['please_wait'];?>");
  setTimeout(function() {
    window.location.href = '<?php echo Wo_SeoLink('index.php?link1=start-up');?>';
  }, 1000);
}
</script>