<section id="profile" class="content_wrapper innerPage">
            <div class="container clearfix">
              <div class="image-upload">
                <h1><?php echo getLang('Pictures_Update'); ?></h1>
                <div class="profile-picture">
                  <h3><i class="fa fa-crop"></i> <?php echo getLang('Crop'); ?></h3>
                  <p><i class="fa fa-info-circle"></i> <?php echo getLang('Click_the_Upload_Photos_button_You_get_a_popup'); ?>. </p>
                  <div class="edit-pic">
                    <img src="<?php if($userImages['filename']!='' && file_exists(FCPATH.'assets/userfiles/'.$userImages['path'].'/320/'.$userImages['filename'].'.'.$userImages['extension'])){ echo base_url().'assets/userfiles/'.$userImages['path'].'/320/'.$userImages['filename'].'.'.$userImages['extension']; } else { echo base_url().'assets/images/default-avatar.jpg'; }?>" alt="" srcset="<?php if(!empty($userImages['filename']) && file_exists(FCPATH.'assets/userfiles/'.$userImages['path'].'/320/'.$userImages['filename'].'.'.$userImages['extension'])){ echo  base_url().'assets/userfiles/'.$userImages['path'].'/320/'.$userImages['filename'].'.'.$userImages['extension']; } else { echo base_url().'assets/images/default-avatar.jpg'; } ?> 1x">
                  </div>
                </div>

                <div class="profile-picture upload-picture">
                  <h3><?php echo getLang('Options'); ?></h3>
                  
                 <div class="upload-bttn-box">
                  <!--<div id="show_image_name"></div>-->
                  <form action="" method="post">
                    <button type="button" class="btn_gold" data-toggle="modal" data-target="#myModal2"><?php echo getLang('Upload_Photos'); ?></button>
                    
                    <input type="hidden" name="data" id="last_url">
                    <button type="submit" class="btn_gold" id="picSubmit" style="display:none;"><?php echo getLang('Save'); ?></button> 
                  </form>
                  </div>

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

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div id="modaldialog" class="html5imageupload" data-resize="true" data-width="500" data-height="500" style="width: 100%;">
              <input type="file" name="thumb" style="position: absolute;">
            </div>
          </div>
        </div>
      </div>
</div> 
<!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   -->
<style type="text/css">
#modaldialog img { max-width: inherit !important; }   
.modal-content{
  width: 65%;
    margin: 0 0 0 18%; 
}
.modal-dialog{
  /*width: 60%;*/
}
@media(min-width:767px){
.html5imageupload:after {
  line-height: 40px;
}
}
.tools .btn{width: auto;}
.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate3d(0, -25%, 0);
    -o-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0)
}

.modal.in .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
}

.modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
}

.modal-header .close {
    margin-top: -2px
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width:768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
    }
    .modal-sm {
        width: 300px
    }
}

@media (min-width:992px) {
    .modal-lg {
        width: 900px
    }
}
</style>  