<?php 
	echo $this->Html->css(array('jquery-ui-1.10.3.custom','jquery-ui-timepicker-addon','jquery.awesome-cropper','/components/imgareaselect/css/imgareaselect-default'));
	
?>
<link rel="stylesheet" href="<?php echo $this->webroot?>uploadcrop/croppie.css" /> 
<link rel="stylesheet" href="<?php echo $this->webroot?>uploadcrop/croppie.min.css" />
<script src="<?php echo $this->webroot?>uploadcrop/croppie.js"></script> 

<script> 
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode != 45  && charCode > 31 && (charCode < 48 || charCode > 57))
      return false;

   return true;
} 
	$(document).ready(function(){
		//initial hide
		
		 $("#ProfileDob").datepicker({
	            dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-100:+0",
	            onSelect: function (date) {
                        $("p").css({"background-color": "yellow", "font-size": "200%"});
	                $('#CourseregisterEndDate').datepicker(date);
	            }
	        });

		 /* $("#ProfilePhone").keydown(function (e) {
	            // Allow: backspace, delete, tab, escape, enter and .
	            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
	               // Allow: Ctrl+A
	             (e.keyCode == 65 && e.ctrlKey === true) ||
	                 // Allow: Ctrl+C
	                 (e.keyCode == 67 && e.ctrlKey === true) ||
	                  // Allow: Ctrl+X
	                  (e.keyCode == 88 && e.ctrlKey === true) ||
	                   // Allow: home, end, left, right
	                   (e.keyCode >= 35 && e.keyCode <= 39)) {
	                    // let it happen, don't do anything
	                     return;
	                     }
	                      // Ensure that it is a number and stop the keypress
	                     if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
	                       e.preventDefault();
	                       }
	                     }); */
                
	});


   
</script>
<script type="text/javascript">

var path='<?php echo $this->webroot;?>';
var id='<?php echo $this->params['pass']['0'];?>';

$(document).ready(function () {
//$('.hidden').removeClass('hidden').addClass( 'active');

$(":file").change(function() {

    var file = this.files[0],  name = file.name, size = file.size, type = file.type;
    //Your validation	
	var imageType = new Array("image/png","image/jpeg", "image/gif", "image/bmp");
	
	if(jQuery.inArray(type, imageType )  == -1) {
		$("#status_msg").html("Valid file formats are: jpg, jpeg,png, gif").css('color', '#F00000');
		return false;
	}  else {
		$("#status_msg").html(" ");
		   if ($("#file-id").val() !== '') {

			
	} else {
		alert("Please select valid image.");
		return false;
	}
	}
	
});

});

</script>
<style type="text/css">
.navbar{border-radius: 0;background: #438EB9;color: #fff;}
.navbar .navbar-brand {color: #FFF;font-size: 24px;text-shadow: none;}	

.row {
    margin-right: 0px !important;
}
</style>

<style>
input, textarea,.uneditable-input {
    /*width: 81.50%;*/ 
}
select{
	 /*width: 83.85%;*/
}
body{
    min-width: 1300px;
}
.prolabel {
  float: left;
  width: 20%;
}
.proinput {
    width: 80%;
}
@media only screen and (max-device-width : 1367px) {
    #changeimage{
        /*width: 150px;*/
    }            
}

span b {font-size: .8em; font-weight: normal; padding: 8px 12px; border-radius: 5px; background: #3588C1; color: #fff; font-family: sans-serif;} 
 #profileimg{
 	width: 164px;
 }
 #profileimg2{
 	width: 90%
 }
</style> 

<div class="blocktitle"> Edit Profile</div>
<div class="tar borb">
    <a onclick="self.history.back();" href="#" class="btn btn-mini">Back</a>
</div>
<br>

<?php if($this->data['Profile']['id'] === $loggedUser['profile_id']):?>
	
	<div class="w97p pdl10 prf">
		<div class="profile-display"> 
                    <div class="profiles form">
						<?php echo $this->Form->create('Profile',array('type'=>'file','class'=>'form-inline','id'=>'upload_form','role'=>'form')); ?>
						<?php echo $this->Form->input('id');?>
				<div class="row-fluid"> 
                <div class="col-md-3 col-sm-3 col-xm-3" style="width: 25%; max-width: 100%; margin-bottom: 20px;">  
				        <?php if (!empty($profiles['Profile']['link1'])) { ?>
				            <img id="profileimg" src="<?php echo $profiles['Profile']['link1']; ?>"/>
				            <div style="clear: both;"></div>
				            <label id="profileimg2" onclick="deleteProimg(<?php echo $profiles['Profile']['id']; ?>);" style="font-weight:normal;margin-top:7px;"><span id="remove1" class="btn w100p">Remove Image</span><span id="remove2" style="display:none">Removing... <img src="<?php echo $this->webroot?>img/ajax-loader.gif"/ ></span></label> 
				        <?php } else { ?>
				            <div class="image-upload">
				                <label for="file-upload">
				                    <img src="<?php echo $this->webroot?>images/iconfoqas1.png" id="profileimg">
				                </label>    
				                <input type="file" class="file-upload" id="file-upload" 
				                    name="Profile[image]" accept="image/*">
				            </div>                                                      
				            <div style="clear:both;"></div>
				            <div id="uploaded_image"></div>
				        <?php } ?>    
				    <div style="clear:both;height:10px;"></div>  
						<div style="top:2px;"> </div>
						<div id="status_msg"> </div>
				<?php 
				//echo $this->Html->link('Cancel','javascript:void(0);', array('id' => 'cancel','class'=>'btn btn-small','style'=>'width:100%; margin-top:10px; max-width: 150px;'));
				//echo $this->Html->link('Change Image','javascript:void(0);', array('id' => 'changeimage','class'=>'btn btn-small','style'=>'display:block; margin-top:10px; max-width: 150px;'));
				//echo $this->Form->input('Image',array('type'=>'file','onChange'=>'validate(this.value)', 'class' =>'mws-textinput','label' => false));
				?>
                </div>
                	<div class="col-md-9 col-sm-9 col-xm-9">
                        <div class="col-md-12 mrt10">
                          <label class="prolabel">First Name</label>
						   <?php echo $this->Form->input('Profile.fname',array('label'=>false,'class'=>'col-md-9 proinput','style'=>'height:26px;','required'=>'required'));?> 
						  </div>
                        <div class="col-md-12 mrt10">
                          <label class="prolabel">Last Name</label>
						   <?php echo $this->Form->input('Profile.lname',array('label'=>false,'class'=>'col-md-9 proinput','style'=>'height:26px;','required'=>'required'));?> 
						  </div>					 
  							<div class="col-md-12 mrt10">
                          <label class="prolabel">Email</label>
						   <?php echo $this->Form->input('User.username',array('label'=>false,'readonly'=>'readonly','class'=>'col-md-9 proinput','style'=>'height:26px;'));?> 
						  </div>
   							<div class="col-md-12 mrt10">
                           <label class="prolabel">Phone</label>
						   <?php echo $this->Form->input('Profile.phone',array('label'=>false,'onkeypress'=>'return isNumberKey(event)','class'=>'col-md-9 proinput','style'=>'height:26px;'));?> 
						  </div>
						   <div class="col-md-12 mrt10">
	
	                      <label class="prolabel">Gender</label>
						   <?php echo $this->Form->input('Profile.gender',array('label'=>false,'type'=>'select','empty'=>'Please select','options'=>$gender,'class'=>'col-md-9 proinput','style'=>'height:26px;  padding-left: 0;'));?> 
	
						  </div>
						   <div class="col-md-12 mrt10">
	                       <label class="prolabel">Date of Birth</label>
						   <?php echo $this->Form->input('Profile.dob',array('label'=>false,'type'=>'text','class'=>'col-md-9 proinput','style'=>'height:26px;','autocomplete'=>'off'));?> 
						  </div>
						   <div class="col-md-12 mrt10">
                           <label class="prolabel">Country</label>
						   <?php echo $this->Form->input('Profile.country_id',array('label'=>false,'type'=>'select','options'=>$countries,'class'=>'col-md-9 proinput','style'=>'height:26px;  padding-left: 0;','required'=>'required'));?> 
						  </div>
						  <div class="col-md-12 mrt10">
                          <label class="prolabel">About Me</label>
                        <?php echo $this->Form->input('Profile.aboutMe',array('label'=>false,'type'=>'textarea','class'=>'col-md-9','style'=>'width:80%; resize:vertical;padding-left:3px;','value'=>strip_tags($this->data['Profile']['aboutMe'])));?> 
  						</div>
  
                        <div style="float: right;padding-right: 15px;" class="mrt10"> 
                        		<a class="btn btn-mini" onclick="self.history.back();" href="#" >Cancel</a>
  							<input type="submit" class="btn btn-mini" value="Save">
                        </div>
					</div>
				</div>
			<?php echo $this->Form->end(); ?>
			</div>
		</div>
		</div>
		
<?php endif;?> 

<?php 
	echo $this->Html->script(array('jquery-ui-1.10.3.custom','timepicker-addon','jquery.form.min','jquery.awesome-cropper','/components/imgareaselect/scripts/jquery.imgareaselect'));
?>

<script> 
    var path = '<?php echo $this->webroot; ?>';
    /*Image Crop Start*/
    $(function() {
        var croppie = null;
        var el = document.getElementById('resizer');

        $.base64ImageToBlob = function(str) { 
            var blob = str; 
            return blob;
        }

        $.getImage = function(input, croppie) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {  
                    croppie.bind({
                        url: e.target.result,
                    });
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#file-upload").on("change", function(event) {
            $("#myModal").modal();
            // Initailize croppie instance and assign it to global variable
            croppie = new Croppie(el, {
                    viewport: {
                        width: 150,
                        height: 150,
                        type: 'square'
                    },
                    boundary: { 
                        height: 300
                    },
                    enableOrientation: true
                });
            $.getImage(event.target, croppie); 
        });

        $("#upload").on("click", function() {
            croppie.result('base64').then(function(base64) {
                $('#img').show();
                $('#imgapply').hide();
                
                $("#profileimg").attr("src","<?php echo $this->webroot; ?>img/loading.gif");

                var response =$.base64ImageToBlob(base64); 

                $.ajax({
                    type: 'POST',
                    url: path+'profiles/proimgupload',
                    data:{"image": response}, 
                    
                    success: function(data) {  
                        $("#myModal").modal("hide");   
                        if (data == "uploaded") { 
                            location.reload();
                        } else {
                            $("#profileimg").attr("src","<?php echo $this->webroot?>img/foqas_cry.png"); 
                            alert("Awww…. Don’t Cry. Something went wrong, Please try again!");
                            location.reload();
                        }
                    } 
                });
            });
        });

        // To Rotate Image Left or Right
        $(".rotate").on("click", function() {
            croppie.rotate(parseInt($(this).data('deg'))); 
        });

        $('#myModal').on('hidden.bs.modal', function (e) {
            // This function will call immediately after model close
            // To ensure that old croppie instance is destroyed on every model close
            setTimeout(function() { croppie.destroy(); }, 100);
        })

    });
    /*Image Crop End*/

    function deleteProimg(id) {  
        var confirmation = confirm("Are you sure you want to remove this Photo?");
        if (confirmation == true) { 
            $('#remove2').show();
            $('#remove1').hide(); 
            $.ajax({
                type: 'POST',
                url: path + 'profiles/updatestatus',
                data: {id: id},
                success: function (data) { 
                    location.reload();
                }
            });  
        }  
    }

</script> 

<!-- The Modal fro Image crop -->
<style type="text/css">
	.modal{
	width: 602px;
	bottom: unset
}
 .modal-dialog{
 	margin: 0px;
 }
</style>
<div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header --> 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="document.getElementById('file-upload').value = ''">&times;</button>
                <h4 class="modal-title">Crop & Upload Institutions Logo</h4>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div id="resizer"></div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-mini" data-dismiss="modal" onclick="document.getElementById('file-upload').value = ''">Cancel</button>
                <button class="btn btn-mini" id="upload"><span id="imgapply">Apply</span><span id="img" style="display:none">Loading <img src="<?php echo $this->webroot?>img/ajax-loader.gif"/ ></span></button>
                <button class="btn rotate float-lef btn-mini" data-deg="90" > 
                <i class="fa fa-undo"></i></button>
                <button class="btn rotate float-right btn-mini" data-deg="-90" > 
                <i class="fa fa-repeat"></i></button> 
            </div>
        </div>
    </div>
</div>
