<div class="modal " id="profile-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    	  <div class="modal-dialog " >
		  
		  
<!--Image Cropit Start-->
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-preview"></div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <button class="rotate-ccw">Rotate counterclockwise</button>
      <button class="rotate-cw">Rotate clockwise</button>

      <button class="export" data-dismiss="modal">Export</button>
    </div>

    <script>
      $(function() {
        $('.image-editor').cropit({
          imageState: {
            src: 'http://lorempixel.com/500/400/',
          },
        });

        $('.rotate-cw').click(function() {
          $('.image-editor').cropit('rotateCW'); 
        });
        $('.rotate-ccw').click(function() {
          $('.image-editor').cropit('rotateCCW');
        });

        $('.export').click(function() {
			// var src = $("#profilePic").attr('src');
			// alert(src);
			$.ajax({
				type: "POST",
				url:  "creating-image.php",
				data: {
					user_id:	$('#user_id').val(),
					resume_id:	$('#resume_id').val(),
					img:	$('.image-editor').cropit('export')
				},
				dataType: "JSON",
				success: function(response) {
					// alert('Done');
					// $("#profilePic").attr("src", src);
					$("#profilePic").attr("src", $("#profilePic").attr('src')+"?"+Math.random());
					// alert(src);
				}
			});
          // var imageData = $('.image-editor').cropit('export');
          // window.open(imageData);
        });
      });
    </script>
<!--Image Cropit Ends-->
          <div class="row">
              <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-login">
                  <div class="panel-heading">
                  
                    <div class="row">
                         <button aria-label="Close" data-dismiss="modal" class="close" type="button">
                            x
                          </button>
                      <div class="col-xs-12 pad_0">
                        <a href="#" class="active" id="login-form-link">Photo</a>
                      </div>


                    </div>

                  </div>


                  <div class="panel-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="profile_image " style="background:url('img/profile.png')">
                        <a href="#" data-toggle="modal" data-target="#profile-modal">
                          
                        </a>
                      </div>

                          <div class="image-editor">
                              <div class="profile_custom text-center">
                                <div class="cropit-preview"></div>
                                 <input type="range" class="cropit-image-zoom-input margin_t3">
                                 <a id="upload_ex" href="#" class="comm_btn_design">accept</a>
                                 <a id="back_btn" href="#" class="comm_btn_design">back</a>
                              </div>
                             

                              <form class="text-center">
                                <span id="fileselector" >
                                    <label class=" upload_btn" for="upload-file-selector">
                                        <input id="upload-file-selector" type="file" class="cropit-image-input  margin_t3">
                                        <i class="fa fa-upload margin-correction"></i>upload file
                                    </label>
                                </span>
                              </form>
                              
                            </div>

                      </div>
                    </div>
                  </div>

                  <div class="panel-footer">
                          <div class="row">
                            <div class="col-lg-12">
                              <p class="text-center" style="margin: 0px;">You can Also add With</p>
                            </div>
                        <div class="login_with_wrp">
                          <div class="col-lg-12 text-center">
                            <div class="login_with login_facebook text-center">
                              <a href="#">
                                <span class="fui-facebook"></span><span>Facebook</span>
                              </a>
                            </div>
                          </div>

                        </div>
                    </div>

                </div>
			</div>
</div>
</div>
</div>
</div>