<?php
/**
  * Ahead WebSoft Technologies Pvt Ltd.
  * @copyright  Copyright 2006-2026 Ahead WebSoft Technologies Pvt Ltd.
  * @license    https://www.socialengine.com/policies
*/
?>
<div class="user_edit_photo_main">
  <?php 
    if (isset($_SESSION['TemporaryProfileImg'])){
      echo '<img src="'.$_SESSION['TemporaryProfileImg'].'" alt="" id="lassoImg"/>';
    }
    else
      echo '<span class="bg_item_photo bg_thumb_profile bg_item_photo_user bg_item_nophoto" id="lassoImg"></span>';
    ?>
</div>
<br/>
  <div class="image-preview-main">
    <?php if (isset($_SESSION['TemporaryProfileImg'])){?>
      <div id="preview-thumbnail" class="preview-thumbnail">
        <?php echo '<img class ="thumb_icon item_photo_user thumb_icon" src="'.$_SESSION['TemporaryProfileImgSquare'].'" alt="Profile Photo" id="previewimage" />  <br />';?>  
      </div>
      <div id="thumbnail-controller" class="thumbnail-controller">
        <?php
          if (isset($_SESSION['TemporaryProfileImg'])){
            echo '<a href="javascript:void(0);" onclick="lassoStart();">'.$this->translate('Edit Profile Photo').'</a>';
          }
        ?>
      </div>
    <?php }    ?>
  </div>

	<div class="user_avatar_upload_btn choose_photo_btn">
		<a href="javascript:void(0);" id="selectSignupPhotoBtn">
      <i>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 14L3.23384 14.6626C4.144 17.2413 4.59908 18.5307 5.63742 19.2654C6.67576 20 8.0431 20 10.7778 20H13.2222C15.9569 20 17.3242 20 18.3626 19.2654C19.4009 18.5307 19.856 17.2413 20.7662 14.6626L21 14" stroke="#14B8A6" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M12 4V14M12 4C11.2998 4 9.99153 5.9943 9.5 6.5M12 4C12.7002 4 14.0085 5.9943 14.5 6.5" stroke="#14B8A6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </i>
      <span><?php echo $this->translate('Select Photo'); ?></span>
    </a>
  </div>

  <br/>
  <div>
    <?php 
      $settings = Engine_Api::_()->getApi('settings', 'core');
      
      if (isset($_SESSION['TemporaryProfileImg']) && $settings->getSetting('user.signup.photo', 0) == 1){
        echo '<button name="done" id="done" type="submit" onClick="javascript:finishForm();">Save Photo</button>';
      }
    ?>
  </div>
  <script type="text/javascript">
    var loader = scriptJquery.crtEle('img',{ src: en4.core.staticBaseUrl + 'application/modules/Core/externals/images/loading.gif'});;
    var orginalThumbSrc;
    var originalSize;
    var lassoCrop;

    var lassoSetCoords = function(coords)
    {
      scriptJquery('#coordinates').val(coords.x1 + ':' + coords.y1 + ':' + coords.width + ':' + coords.height);
    }
    var myLasso;
    var lassoStart = function()
    {
      if( !orginalThumbSrc ) orginalThumbSrc = scriptJquery('#previewimage').attr('src');

      scriptJquery('#lassoImg').cropper({
        preview : ".preview-thumbnail",
        done: lassoSetCoords
      });

      originalSize = scriptJquery("#lassoImg");
      var sourceImg = scriptJquery('#lassoImg').attr("src");
      scriptJquery('#previewimage').attr("src",scriptJquery('#lassoImg').attr("src"));
      scriptJquery('#coordinates').val(10 + ':' + 10 + ':' + 58+ ':' + 58);

      scriptJquery('#thumbnail-controller').html('<a href="javascript:void(0);" onclick="lassoEnd();"><?php echo $this->translate('Apply Changes');?></a>');
    }

    var uploadSignupPhoto =function(){
      scriptJquery('#uploadPhoto').val(true);
      scriptJquery('#thumbnail-controller').html("<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...');?></div>");
			scriptJquery('#image_id').val('');
      scriptJquery('.signup_account_form').trigger("submit");
      scriptJquery('#Filedata-wrapper').html("");
			
    }
    var lassoEnd = function(){
      scriptJquery('#lassoImg').css('display', 'block');
      scriptJquery('#thumbnail-controller').html('<a href="javascript:void(0);" onclick="lassoStart();"><?php echo $this->string()->escapeJavascript($this->translate('Edit Profile Photo'));?></a>');
      scriptJquery('#lassoMask').remove();
    }

		scriptJquery(document).ready(function() {
			scriptJquery('#Filedata-wrapper').hide();
			scriptJquery('#selectSignupPhotoBtn').on('click', function() {
				scriptJquery('#Filedata').trigger('click');
			});
			scriptJquery('#Filedata').on('change', function() {
				if (this.files.length > 0) {
					uploadSignupPhoto();
				}
			});
		});
  </script>
