<style type="text/css">
    /***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

    /* Profile container */
    .profile {
        margin: 20px 0;
    }

    /* Profile sidebar */
    .profile-sidebar {
        padding: 20px 0 10px 0;
        background: #fff;
    }

    .profile-userpic img {
        float: none;
        margin: 0 auto;
        width: 50%;
        height: 50%;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        border-radius: 50% !important;
    }

    .profile-usertitle {
        text-align: center;
        margin-top: 20px;
    }

    .profile-usertitle-name {
        color: #5a7391;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 7px;
    }

    .profile-usertitle-job {
        text-transform: uppercase;
        color: #5b9bd1;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .profile-userbuttons {
        text-align: center;
        margin-top: 10px;
    }

    .profile-userbuttons .btn {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 15px;
        margin-right: 5px;
    }

    .profile-userbuttons .btn:last-child {
        margin-right: 0px;
    }

    .profile-usermenu {
        margin-top: 30px;
    }

    .profile-usermenu ul li {
        border-bottom: 1px solid #f0f4f7;
    }

    .profile-usermenu ul li:last-child {
        border-bottom: none;
    }

    .profile-usermenu ul li a {
        color: #93a3b5;
        font-size: 14px;
        font-weight: 400;
    }

    .profile-usermenu ul li a i {
        margin-right: 8px;
        font-size: 14px;
    }

    .profile-usermenu ul li a:hover {
        background-color: #fafcfd;
        color: #5b9bd1;
    }

    .profile-usermenu ul li.active {
        border-bottom: none;
    }

    .profile-usermenu ul li.active a {
        color: #5b9bd1;
        background-color: #f6f9fb;
        border-left: 2px solid #5b9bd1;
        margin-left: -2px;
    }

    /* Profile Content */
    .profile-content {
        padding: 20px;
        background: #fff;
        min-height: 460px;
    }

</style>

<div class="row profile">

    <div class="col-md-3">
        <div class="profile-sidebar">
            <!-- SIDEBAR USERPIC -->
            <div class="profile-userpic">
                <img src="<?php echo base_url(); ?>assets/img/default.png" class="img-responsive" alt="">
            </div>
            <!-- END SIDEBAR USERPIC -->
            <!-- SIDEBAR USER TITLE -->
            <div class="profile-usertitle">                
                <div class="profile-usertitle-job"><?php if (!empty($user->DESIGNATION)) echo $user->DESIGNATION; ?></div>
            </div>
            <!-- END SIDEBAR USER TITLE -->
            <!-- SIDEBAR BUTTONS -->
            <!-- <div class="profile-userbuttons">
                <button type="button" class="btn btn-success btn-sm">Email</button>
                <button type="button" class="btn btn-danger btn-sm">Message</button>
            </div> -->
        </div>
            
    </div>
    <div class="col-md-9">
        <div class="profile-content">
            <h4 class="green">User Info</h4>

            <div class="ibox-content">
                <div class="table-responsive contentArea">
                    <table class="table table-striped table-bordered table-hover gridTable">

                        <tbody>
                        <tr>
                            <th>Name (English)</th>
                            <td>:</td>
                            <td><?php if (!empty($user->FULL_NAME)) echo $user->FULL_NAME ?></td>
                        </tr>                        
                        <tr>
                            <th>Biometric ID </th>
                            <td>:</td>
                            <td><?php if (!empty($user->BIOMETRIC_ID)) echo $user->BIOMETRIC_ID; ?>
                            </td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>:</td>
                            <td><i class="fa fa-envelope"></i> <?php if (!empty($user->EMAIL))echo $user->EMAIL; ?></td>
                        </tr>
                        <tr>
                            <th>Mobile</th>
                            <td>:</td>
                            <td><i class="fa fa-phone"></i> <?php if (!empty($user->MOBILE))echo $user->MOBILE; ?></td>
                        </tr>
                        <tr>
                            <th>User Group</th>
                            <td>:</td>
                            <td><?php if (!empty($user->USERGRP_NAME)) echo $user->USERGRP_NAME ?></td>
                        </tr>
                        <tr>
                            <th>User Level</th>
                            <td>:</td>
                            <td><?php if (!empty($user->UGLEVE_NAME)) echo $user->UGLEVE_NAME ?></td>
                        </tr>
                        <tr>
                            <th>User Name</th>
                            <td>:</td>
                            <td><?php if (!empty($user->USERNAME)) echo $user->USERNAME ?></td>
                        </tr>
                        <tr>
                            <th>Password.</th>
                            <td>:</td>
                            <td><?php if (!empty($user->USERPW)) //echo crypt($user->USERPW) ?></td>
                        </tr>                        
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        //to show the active menu function
        $('#navlist li').click(function (e) {
            e.preventDefault(); //prevent the link from being followed               
            $('#navlist li').removeClass('active');
            $(this).addClass('active');
        });

        $('#navlist li a').click(function () {
            var teacher_id = $("#USER_ID").attr('teacher-data-id');
            var action_uri = $(this).attr('data-action');
            $.ajax({
                type: 'post',
                url: "<?php echo base_url(); ?>/" + action_uri,
                data: {teacher_id: teacher_id},
                beforeSend: function () {
                    $(".profile-content").html("<img src='<?php echo base_url(); ?>assets/img/loader.gif' />");
                },
                success: function (data) {
                    $('.profile-content').html(data);
                }
            });
        });
    });
</script>