<?php 
$images = array();
for ($i=0; $i < 100 ; $i++) { 
  $rand = rand(1,30);
  if (!in_array($rand, $images) && count($images) < 4) {
    $images[] = $rand;
  }
  if (count($images) == 4) {
    break;
  }
}
 ?>
<div class="add-photo sun_startup">
	<div class="text-center">
		<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="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19,6 L19,4 L21,4 L21,6 L23,6 L23,8 L21,8 L21,10 L19,10 L19,8 L17,8 L17,6 L19,6 Z M6.93701956,5.8453758 C7.00786802,5.74688188 7.08655595,5.62630624 7.18689462,5.46372136 C7.24312129,5.37261385 7.44826978,5.03326386 7.48180256,4.97841198 C8.31078556,3.62238733 8.91339479,3 10,3 L15,3 L15,5 L10,5 C9.91327186,5 9.64050202,5.28172235 9.18819752,6.02158802 C9.15916322,6.06908141 8.95096113,6.41348258 8.88887147,6.51409025 C8.76591846,6.71331853 8.66374696,6.86987867 8.56061313,7.0132559 C8.1123689,7.63640757 7.66434207,8 7.0000003,8 L4,8 C3.44771525,8 3,8.44771525 3,9 L3,18 C3,18.5522847 3.44771525,19 4,19 L20,19 C20.5522847,19 21,18.5522847 21,18 L21,12 L23,12 L23,18 C23,19.6568542 21.6568542,21 20,21 L4,21 C2.34314575,21 1,19.6568542 1,18 L1,9 C1,7.34314575 2.34314575,6 4,6 L6.81619668,6 C6.84948949,5.96193949 6.89029794,5.91032846 6.93701956,5.8453758 Z M12,18 C9.23857625,18 7,15.7614237 7,13 C7,10.2385763 9.23857625,8 12,8 C14.7614237,8 17,10.2385763 17,13 C17,15.7614237 14.7614237,18 12,18 Z M12,16 C13.6568542,16 15,14.6568542 15,13 C15,11.3431458 13.6568542,10 12,10 C10.3431458,10 9,11.3431458 9,13 C9,14.6568542 10.3431458,16 12,16 Z"/></svg><br><?php echo $wo['lang']['upload_your_photo'];?>
        	</div>
        </div>
		<!-- <div class="ui horizontal divider"><?php echo $wo['lang']['or'];?>&nbsp;</div> -->
		
		<!-- <div class="sun_choose_pics">
			<p><?php echo $wo['lang']['choose_image'];?></p>
			<ul class="mb0 list-unstyled">
				<li>
					<label>
						<input type="radio" onchange="Wo_UpdateProfileAvatar();" name="pro-pic" value="<?php echo($images[0]) ?>">
						<img src="<?php echo $wo['config']['site_url'].'/upload/photos/'.$images[0].'.jpg';?>" alt="">
					</label>
				</li>
				<li>
					<label>
						<input type="radio" onchange="Wo_UpdateProfileAvatar();" name="pro-pic" value="<?php echo($images[1]) ?>">
						<img src="<?php echo $wo['config']['site_url'].'/upload/photos/'.$images[1].'.jpg';?>" alt="">
					</label>
				</li>
				<li>
					<label>
						<input type="radio" onchange="Wo_UpdateProfileAvatar();" name="pro-pic" value="<?php echo($images[2]) ?>">
						<img src="<?php echo $wo['config']['site_url'].'/upload/photos/'.$images[2].'.jpg';?>" alt="">
					</label>
				</li>
				<li>
					<label>
						<input type="radio" onchange="Wo_UpdateProfileAvatar();" name="pro-pic" value="<?php echo($images[3]) ?>">
						<img src="<?php echo $wo['config']['site_url'].'/upload/photos/'.$images[3].'.jpg';?>" alt="">
					</label>
				</li>
			</ul>
		</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>
	<div class="continue-button">
		<small class="skip-step" onclick="Wo_SkipStep('startup_image');"><?php echo $wo['lang']['skip'];?></small>
		<button class="btn con-button btn-main" disabled onclick="$('form.profile-avatar-changer').submit();"><?php echo $wo['lang']['start_up_continue'];?></button>
	</div>
	<div class="clear"></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="readURL(this);">
    <input type="hidden" name="selected_image" id="selected_image" value="0">
    <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) {
        if (data.img != '') {
          $('.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);
        }
      	$('#progress').slideUp(200);
        $('button').attr('disabled', false);
        $('.skip-step').hide();
        window.location.href = '<?php echo Wo_SeoLink('index.php?link1=start-up');?>';
      }
    }
  });
});
function Wo_UpdateProfileAvatar() {
  $('button').attr('disabled', false);
  radio = document.querySelector('input[name="pro-pic"]:checked').value;
  $('#selected_image').val(radio);
 
  //$("form.profile-avatar-changer").submit();
}
function readURL(input) {
  $('button').attr('disabled', false);
  if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('.upload-image').html('<img src="' + e.target.result + '">');
      };

      reader.readAsDataURL(input.files[0]);
  }
}
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>