<style>
    .btn-outline {
        background-color: transparent;
        color: inherit;
        transition: all .5s;
    }

    .btn-primary.btn-outline {
        color: #428bca;
    }

    .btn-success.btn-outline {
        color: #5cb85c;
    }

    .btn-info.btn-outline {
        color: #5bc0de;
    }

    .btn-warning.btn-outline {
        color: #f0ad4e;
    }

    .btn-danger.btn-outline {
        color: #d9534f;
    }

    .btn-primary.btn-outline:hover,
    .btn-success.btn-outline:hover,
    .btn-info.btn-outline:hover,
    .btn-warning.btn-outline:hover,
    .btn-danger.btn-outline:hover {
        color: #fff;
    }
    #profile-pic-upload{

    }
</style>

<div class="well">
    <div class="row">
        <h3 class="text-info">Profile</h3>
        <hr>
        <div class="col-md-4 col-md-push-1">
            <?php if(isset($profile[0]['image']) and $profile[0]['image']!==NULL){ ?>
            <p class="text-center">
                <?php 
                echo '<img src="data:image/*;base64,'.base64_encode($profile[0]['image']).'" alt=..." class="img-circle" style="height: 110px;width: 110px" >';?>
                
            </p>
          <?php  }  else { ?>
            <p class="text-center"><img src="<?=  base_url('miraAppLogo/Mira/MIRA_UGANDA.jpg')?>" alt="..." class="img-circle" style="height: 110px;width: 110px"></p>
         <?php   }
            ?>
            
            <p class="text-center"><a><button class="btn btn-primary btn-outline profile-pic-upload">Upload&nbsp;Profile&nbsp;Picture</button></a></p>
        </div>
        <div class="col-md-7 col-md-push-1">
            <?php if (isset($profile) and $profile) { ?>
                <p><b>User Id:</b>&nbsp;<?= $profile[0]['user_login_id'] ?></p>
                <p><b>Name:</b>&nbsp;<?= $profile[0]['user_name'] ?></p>
                <p><b>Region Name:</b>&nbsp;<?= $profile[0]['region_name'] ?></p>
                <p><b>DOB:</b>&nbsp;<?= date('d-m-Y', strtotime($profile[0]['date_of_birth'])) ?></p>
                <?php if ($profile[0]['gender'] === 1) { ?>
                    <p><b>Gender:</b>&nbsp;Male</p>
                <?php } elseif ($profile[0]['gender'] === 2) { ?>
                    <p><b>Gender:</b>&nbsp;Female</p>
                <?php } ?>    
                <p><b>Mobile:</b>&nbsp;<?= $profile[0]['mobile'] ?></p>
                <p><b>Email Id:</b>&nbsp;<a ><?= $profile[0]['email'] ?></a></p>
            <?php } ?>

            <p><b>Address:</b></p>
            <p style="margin-left: 70px"><b>Village:&nbsp;<?= $profile[0]['address'] ?></b><br><b>District:</b>&nbsp;<?= $profile[0]['district_code'] ?><br><b>Pincode:</b><?= $profile[0]['pincode'] ?></p>
            <p class="text-right"><a><button class="btn btn-primary btn-outline">Update&nbsp;Profile</button></a></p>    
        </div>
    </div>
</div>




<div class="modal fade" id="profile-pic-upload" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title" id="Heading">Upload Profile Picture</h4>
            </div>
            <form action="<?= base_url('profile_pic_submit')?>" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="user_login_id" value="<?=$profile[0]['user_login_id']?>">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-10 col-md-push-1">
                            <div class="form-group">
                                <div class="input-group">
                                    <input name="profile_pic_upload" type="file" class="filestyle" data-buttonText="Choose Profil Picture">
                                </div>                    
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="modal-footer ">
                    <div class="row">
                        <div class="col-md-6 col-md-push-3">
                            <button id="update-user" type="submit" class="btn btn-warning" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
                        </div>
                        <div class="col-md-1 col-md-push-3 spinner" id="user_update_spinner" style="display: none;margin-top: 5px">
                            <i class="fa fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>

</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.profile-pic-upload').click(function () {
            $('#profile-pic-upload').css({
                top: $('.profile-pic-upload').offset().top - 150,
                left: $('.profile-pic-upload').offset().left - 65,
                width: 600
            });
            $('#profile-pic-upload').modal('show');
        });
    });
</script>


