<?php 
$cookie_name = $this->Xin_model->get_cookie_name();
$session = $this->session->userdata($cookie_name);
$domain_url = $this->Xin_model->domain_url();
if($profile_picture!='' && $profile_picture!='no file') {

    $profile_picture =$domain_url.'uploads/profile/'.$profile_picture;
}
else {
    
    $profile_picture =$domain_url.'uploads/profile/default_male.jpg';
}?>
<div class="row">
    <div class="col-xl-4">
        <div class="card">
            <div class="card-body">
                <div class="profile-details text-center">
                    <img src="<?php echo $profile_picture?>" alt="" class="img-fluid img-90 rounded-circle blur-up lazyloaded">
                    <h5 class="f-w-600 mb-0"><?php echo $name?></h5>
                    <span><?php echo $email?></span>
                    <div class="social">
                        <div class="form-group btn-showcase">
                            <button class="btn social-btn btn-fb d-inline-block"> <i class="fa fa-facebook"></i></button>
                            <button class="btn social-btn btn-twitter d-inline-block"><i class="fa fa-google"></i></button>
                            <button class="btn social-btn btn-google d-inline-block me-0"><i class="fa fa-twitter"></i></button>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="project-status">
                    <h5 class="f-w-600">Employee Status</h5>
                    <div class="media">
                        <div class="media-body">
                            <h6>Performance<span class="pull-right">80%</span></h6>
                            <div class="progress sm-progress-bar">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: 90%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-body">
                            <h6>Overtime <span class="pull-right">60%</span></h6>
                            <div class="progress sm-progress-bar">
                                <div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-body">
                            <h6>Leaves taken<span class="pull-right">70%</span></h6>
                            <div class="progress sm-progress-bar">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 70%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-8">
        <div class="card tab2-card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-material" id="top-tab" role="tablist">
                    <li class="nav-item"><a class="nav-link active" id="top-basic-tab" data-bs-toggle="tab" href="#top-basic" role="tab" aria-controls="top-basic" aria-selected="true"><i data-feather="user" class="me-2"></i>Basic Information</a>
                    </li>
                    <li class="nav-item"><a class="nav-link" id="profile-top-tab" data-bs-toggle="tab" href="#top-profile" role="tab" aria-controls="top-profile" aria-selected="false"><i data-feather="image" class="me-2"></i>Profile Picture</a>
                    </li>
                    <!--<li class="nav-item"><a class="nav-link" id="contact-top-tab" data-bs-toggle="tab" href="#top-contact" role="tab" aria-controls="top-contact" aria-selected="false"><i data-feather="settings" class="me-2"></i>Contact</a>
                    </li>-->
                    <li class="nav-item"><a class="nav-link" id="password-top-tab" data-bs-toggle="tab" href="#top-password" role="tab" aria-controls="top-password" aria-selected="false"><i data-feather="lock" class="me-2"></i>Password</a>
                    </li>
                </ul>
                <div class="tab-content" id="top-tabContent">
                    <div class="tab-pane fade show active" id="top-basic" role="tabpanel" aria-labelledby="top-basic-tab">
                        <h5 class="f-w-600">Basic Information</h5>
                        <form id="basic_info" action="<?php echo site_url("profile/user_basic_info") ?>" name="basic_info" method="post">
                            <input type="hidden" name="user_id" value="<?php echo $session['user_id'];?>">
                            <input type="hidden" name="u_basic_info" value="UPDATE">
                            <div class="table-responsive basic-table">
                                <table class="table table-borderless">
                                    <tbody>
                                    <tr>
                                        <td>Name:</td>
                                        <td><input class="form-control" placeholder="Your Name" name="full_name" type="text" value="<?php echo $name;?>"></td>
                                    </tr>
                                    <tr>
                                        <td>Email:</td>
                                        <td><input class="form-control" placeholder="Email" name="email" type="text" value="<?php echo $email;?>"></td>
                                    </tr>
                                    <tr>
                                        <td>Mobile Number:</td>
                                        <td><input class="form-control" placeholder="Phone Number" name="contact_no" type="text" value="<?php echo $contact_no;?>"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <button type="submit" class="btn btn-primary save">Save</button>
                            </div>
                       </form>
                    </div>
                    <div class="tab-pane fade" id="top-profile" role="tabpanel" aria-labelledby="top-profile-tab">
                        <h5 class="f-w-600">Profile Picture</h5>
                        <form id="f_profile_picture" action="<?php echo site_url("profile/profile_picture") ?>" name="profile_picture" method="post">
                            <input type="hidden" name="user_id" id="user_id" value="<?php echo $session['user_id'];?>">
                            <input type="hidden" name="session_id" id="session_id" value="<?php echo $session['user_id'];?>">
                            <input type="hidden" name="u_profile_picture" value="UPDATE">
                            <div class="table-responsive profile-table">
                                <table class="table table-borderless">
                                    <tbody>
                                    <tr>
                                        <td>
                                            <img src="<?php echo $profile_picture?>" alt="" class="img-fluid img-90 rounded-circle blur-up lazyloaded">
                                        </td>
                                        <td>
                                            <div class="form-group mb-0">
                                                <label for="validationCustom02" class="mb-1"> Image :</label>
                                                <input class="form-control" name="p_file" id="p_file" type="file">
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <button type="submit" class="btn btn-primary save">Save</button>
                            </div>
                       </form>
                    </div>
                    <div class="tab-pane fade" id="top-password" role="tabpanel" aria-labelledby="top-password-tab">
                        <h5 class="f-w-600">Change Password</h5>
                        <form id="e_change_password" action="<?php echo site_url("users/change_password") ?>" name="e_change_password" method="post">
                            <input type="hidden" name="user_id" value="<?php echo $session['user_id'];?>">
                            <input type="hidden" name="u_basic_info" value="UPDATE">
                            <div class="table-responsive password-table">
                                <table class="table table-borderless">
                                    <tbody>
                                    <tr>
                                        <td><?php echo $this->lang->line('xin_e_details_enpassword');?>:</td>
                                        <td><input class="form-control" placeholder="<?php echo $this->lang->line('xin_e_details_enpassword');?>" name="new_password" type="password"></td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $this->lang->line('xin_e_details_ecnpassword');?>:</td>
                                        <td><input class="form-control" placeholder="<?php echo $this->lang->line('xin_e_details_ecnpassword');?>" name="new_password_confirm" type="password"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <button type="submit" class="btn btn-primary save">Save</button>
                            </div>
                       </form>
                    </div>
                    <div class="tab-pane fade" id="top-contact" role="tabpanel" aria-labelledby="contact-top-tab">
                        <div class="account-setting">
                            <h5 class="f-w-600">Notifications</h5>
                            <div class="row">
                                <div class="col">
                                    <label class="d-block" for="chk-ani">
                                        <input class="checkbox_animated" id="chk-ani" type="checkbox">
                                        Allow Desktop Notifications
                                    </label>
                                    <label class="d-block" for="chk-ani1">
                                        <input class="checkbox_animated" id="chk-ani1" type="checkbox">
                                        Enable Notifications
                                    </label>
                                    <label class="d-block" for="chk-ani2">
                                        <input class="checkbox_animated" id="chk-ani2" type="checkbox">
                                        Get notification for my own activity
                                    </label>
                                    <label class="d-block mb-0" for="chk-ani3">
                                        <input class="checkbox_animated" id="chk-ani3" type="checkbox" checked="">
                                        DND
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="account-setting deactivate-account">
                            <h5 class="f-w-600">Deactivate Account</h5>
                            <div class="row">
                                <div class="col">
                                    <label class="d-block" for="edo-ani">
                                        <input class="radio_animated" id="edo-ani" type="radio" name="rdo-ani" checked="">
                                        I have a privacy concern
                                    </label>
                                    <label class="d-block" for="edo-ani1">
                                        <input class="radio_animated" id="edo-ani1" type="radio" name="rdo-ani">
                                        This is temporary
                                    </label>
                                    <label class="d-block mb-0" for="edo-ani2">
                                        <input class="radio_animated" id="edo-ani2" type="radio" name="rdo-ani" checked="">
                                        Other
                                    </label>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary">Deactivate Account</button>
                        </div>
                        <div class="account-setting deactivate-account">
                            <h5 class="f-w-600">Delete Account</h5>
                            <div class="row">
                                <div class="col">
                                    <label class="d-block" for="edo-ani3">
                                        <input class="radio_animated" id="edo-ani3" type="radio" name="rdo-ani1" checked="">
                                        No longer usable
                                    </label>
                                    <label class="d-block" for="edo-ani4">
                                        <input class="radio_animated" id="edo-ani4" type="radio" name="rdo-ani1">
                                        Want to switch on other account
                                    </label>
                                    <label class="d-block mb-0" for="edo-ani5">
                                        <input class="radio_animated" id="edo-ani5" type="radio" name="rdo-ani1" checked="">
                                        Other
                                    </label>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary">Delete Account</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>