<?php
   require_once("../session_check.php");
   require_once("../../classes/main_classes.php");

  //OBJECTS
  $retrieveObj=new RETRIEVE();
  
  $get_profile_info=$retrieveObj->retriever("users","*","user_id",$user_id,"fetch");

  if($get_profile_info=="1020"){
    die("<p class='alert alert-warning'>Something went wrong</p>");
  }
?>

<h4 class="page-title">
	<span class="la la-user"></span>
	Profile
</h4>
<div class="row">
	<div class="col-md-12 mb-3">
		<div class="container emp-profile">
            <div class="row">
                <div class="col-md-4">
                    <div class="profile-img">
                        <p class="text-center" id="profilePhotoContainer">
                            <?php
                                if($get_profile_info->photo==""){
                                    echo '<span class="nav-link" href="#"><i class="fas fa-user fa-5x text-primary" data-toggle="collapse" data-target="#profile_pic_form_container"></i></span>';
                                }else{
                                    echo '<img id="profile_picture" src="../img/profile_pictures/'.$get_profile_info->photo.'?'.date("Y-m-d").time().'" height="150px" class="mr-1 shadow-lg rounded p-1" data-toggle="collapse" data-target="#profile_pic_form_container">';
                                }
                            ?>
                        </p>
                        <!--div class="collapse border border-primary rounded p-2" id="profile_pic_form_container">
                            <div id="changePhotoResponse"></div>
                            <form id="profile_pic_form">
                              <div id="uploaded_image"></div>
                              <input  class="form-control" type="file" name="updateProfileImage" id="upload_image">
                              <div id="uploaded_image"></div>
                              <!--p class="text-right my-1">
                                <input type="hidden" name="user_id" value="<?php echo $user_id; ?>">
                                <button onclick="changeProfilePicture()" type="submit" class="btn btn-primary"><i class="fas fa-edit"></i> Update</button>
                              </p--
                            </form
                          </div-->
                        <div class="file btn btn-lg btn-primary">
                            <div id="uploaded_image"></div>
                            Change Photo
                            <input type="file" name="updateProfileImage" id="upload_image"/>
                        </div>
                    </div>
                    <div class="profile-work">
                        <div class="mt-2 card rounded">
			            	<div class="card-body">
			            		<p class="mb-0 lead text-center"><a href="#" data-toggle="collapse" data-target="#change_password_container" class="text-primary"> CHANGE PASSWORD </a></p>
			                    <div id="change_password_container" class="card-body px-1 collapse" >
			                      	<div id="changePassResponse" ></div>
			                      	<input class="form-control my-2" type="password" id="Cpassword" placeholder="Current Password">
			                    	<input class="form-control my-2" type="password" id="Npassword" placeholder="New Password">
			                    	<input class="form-control my-2" type="password" id="Rpassword" placeholder="Re-enter new Password">

				                    <p class="">
				                      	<button href="#" class="btn btn-primary btn-block" onclick="return false" onmousedown="change_password()"><span class="fas fa-edit"></span> Change</button>
				                    </p>
			                    </div>
			            	</div>
		                 </div>
                    </div>
                </div>
                <div class="col-md-8" id="profile_mode_view_id">
                    
                </div>
            </div>
        </div>
	</div>
</div>


<div id="uploadimageModal" class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Upload & Crop Image</h4>
          </div>
          <div class="modal-body">
            <div class="row">
            <div class="col-md-8 text-center">
              <div id="image_demo" style="width:350px; margin-top:30px"></div>
            </div>
            <div class="col-md-4" style="padding-top:30px;">
              <br />
              <br />
              <br/>
              <button class="btn btn-success crop_image">Crop & <br>Upload Image</button>
          </div>
        </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
      </div>
    </div>
</div>


<script>  
$(document).ready(function(){
    profile_readonly_mode_view()

  $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'square' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });
  


  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: "viewport", 
      format: "png",
      quality: 1
    }).then(function(response){
      $.ajax({
        url:"includes_/profile/upload.php",
        type: "POST",
        data:{"image": response},
        
            cache: false,
           
        success:function(data)
        { 
          $('#uploadimageModal').modal('hide');
          if(data==1){
            $("#changePhotoResponse").html("<p id='changePhotoResponseMin' class='alert alert-success'>Your profile picture updated</p>");
            $("#changePhotoResponseMin").fadeOut(5000,"swing",null)

            //.................
            d=new Date();

            if(document.getElementById("profile_picture")!==null){
              $("#profile_picture").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }else{
              $("#profilePhotoContainer").html("<img id='profile_picture' height='150px' class='mr-1' data-toggle='collapse' data-target='#profile_pic_form_container'>")
              $("#profile_picture").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }

            if(document.getElementById("sub_profile_picture")!==null){
              $("#sub_profile_picture").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }else{
              $("#profilePhotoSubContainer").html("<img id='sub_profile_picture' class='rounded-circle' height='30px' data-toggle='collapse' data-target='#profile_pic_form_container'>")
              $("#sub_profile_picture").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }

            if(document.getElementById("sub_profile_picture2")!==null){
              $("#sub_profile_picture2").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }else{
              $("#profilePhotoSubContainer2").html("<img id='sub_profile_picture2' class='rounded-circle' height='30px'>")
              $("#sub_profile_picture").attr("src","../img/profile_pictures/photo"+<?php echo $user_id ?>+".png?timestamp"+d.getTime())
            }
            //.........................
          }else if(data==0){
            $("#changePhotoResponse").html("<p id='changePhotoResponseMin' class='alert alert-danger'>Failed to update your Profile</p>");
            $("#changePhotoResponseMin").fadeOut(5000,"swing",null)
          }
          //$('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>
