<?php
/**
  * Ahead WebSoft Technologies Pvt Ltd.
  * @copyright  Copyright 2006-2026 Ahead WebSoft Technologies Pvt Ltd.
  * @license    https://www.socialengine.com/policies
*/
?>
<?php if( $this->subject()->photo_id !== null ): ?>
  <div class="user_edit_photo_main">
    <?php if($this->viewer()->photo_id) { ?>
      <?php if (!empty($this->subject()->avatar_id)) { ?>
        <?php echo $this->htmlLink($this->viewer()->getHref(), $this->itemBackgroundPhoto($this->viewer(), 'thumb.profile'), '', array('id' => 'lassoImg')) ?>
      <?php } else { ?>
        <?php echo $this->itemPhoto($this->subject(), 'thumb.profile', "", array('id' => 'lassoImg')) ?>
      <?php } ?>
    <?php } else { ?>
      <?php echo $this->htmlLink($this->viewer()->getHref(), $this->itemBackgroundPhoto($this->viewer(), 'thumb.profile')) ?>
    <?php } ?>
  </div>
  <div class="image-preview-main">
    <?php if($this->viewer()->photo_id) { ?>
      <div id="preview-thumbnail" class="preview-thumbnail">
        <?php echo $this->htmlLink($this->viewer()->getHref(), $this->itemBackgroundPhoto($this->viewer(), 'thumb.icon'), '', array('id' => 'previewimage')) ?>
      </div>
    <?php } ?>
    <div id="thumbnail-controller" class="thumbnail-controller">
      <?php if ($this->subject()->getPhotoUrl() && empty($this->subject()->avatar_id))
      echo '<a href="javascript:void(0);" onclick="lassoStart();">'.$this->translate('Edit Profile Photo').'</a>';?>
    </div>
  </div>

  <div class="user_avatar_upload_btn choose_photo_btn">
		<a href="javascript:void(0);" id="selectPhotoBtn">
      <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>

  <script type="text/javascript">
    var orginalThumbSrc;
    var originalSize;
    var loader = scriptJquery.crtEle('img',{ src: en4.core.staticBaseUrl + 'application/modules/Core/externals/images/loading.gif'});
    var lassoCrop;
    
    var lassoSetCoords = function(coords)
    {
      scriptJquery('#coordinates').val(coords.x1 + ':' + coords.y1 + ':' + coords.width + ':' + coords.height); 
    }

    var lassoStart = function()
    {

      if(typeof lassoCrop != 'undefined') {
        lassoCrop.data("cropper").enable();
        
      } else {
      if( !orginalThumbSrc ) orginalThumbSrc = scriptJquery('#previewimage').src;
      originalSize = scriptJquery("#lassoImg").offset();

      lassoCrop = scriptJquery('#lassoImg').cropper({
        preview : ".preview-thumbnail",
        done: lassoSetCoords
      });
      
      scriptJquery('#previewimage').attr("src",scriptJquery('#lassoImg').attr("src"));
      }
      scriptJquery('#thumbnail-controller').html('<a href="javascript:void(0);" onclick="lassoCancel();"><?php echo $this->translate('cancel');?></a>');
      scriptJquery('#coordinates').val(10 + ':' + 10 + ':' + 58+ ':' + 58);
    }

    var lassoEnd = function() {
      scriptJquery('thumbnail-controller').html("<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...');?></div>");
      lassoCrop.data("cropper").disable();
      scriptJquery('#EditPhoto').trigger("submit");
    }

    var lassoCancel = function() {
      scriptJquery('#preview-thumbnail').html('<img id="previewimage" src="'+scriptJquery('#lassoImg').attr("src")+'"/>');
      scriptJquery('#thumbnail-controller').html('<a href="javascript:void(0);" onclick="lassoStart();"><?php echo $this->translate('Edit Profile Photo');?></a>');
      scriptJquery('#coordinates').val("");
      lassoCrop.data("cropper").disable();
    }
    
    var uploadSignupPhoto = function() {
      scriptJquery('#thumbnail-controller').html("<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...')?></div>");
      scriptJquery('#EditPhoto').trigger("submit");
      scriptJquery('#Filedata-wrapper').html("");
    }

		scriptJquery(document).ready(function() {
			scriptJquery('#Filedata-wrapper').hide();
			scriptJquery('#selectPhotoBtn').on('click', function() {
				scriptJquery('#Filedata').trigger('click');
			});
			scriptJquery('#Filedata').on('change', function() {
				if (this.files.length > 0) {
					scriptJquery('#thumbnail-controller').html(
						'<a href="javascript:void(0);" onclick="lassoEnd();"><?php echo $this->translate('Save Photo'); ?></a>'
					);
				}
			});
		});
  </script>

<?php endif; ?>
