@{
    var imageUrl = ViewBag.URLAttachment; 
}
<script src="~/lib/jquery/dist/jquery371.min.js"></script>
<link href="~/css/register.css" rel="stylesheet" />

<li class="profile">
    <div class="profile-details">
        <img src="@Url.Content("~/" + imageUrl)" alt="User Profile Image">
        <div class="name_job">
            <div class="name" style="margin-top:5px">@ViewBag.UserName</div>
            <div class="job">@ViewBag.UserRoles</div>
            <button type="button" class="btn btn-link" style="margin-bottom: 0rem; padding-left: 0px; padding-top:2px;" onclick="showUserProfile()">
                Update Profile
            </button>

        </div>
    </div>
    <button onclick="window.location.href='/Home/Logout'">
        Logout
        <i class="bx bx-log-out" id="log_out"></i>
        <span class="logout-text">Logout</span>
    </button>
</li>


<!-- Modal Update User Profile -->
<div class="modal fade" id="updateMyProfile" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header" style="background-color:teal">
                <div class="title" style="color:white; font-size:medium;">User Profile</div>
            </div>
            <div class="modal-body">
                <form id="userUpdateProfFormSidebar">
                    <div class="containerUserProp">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="profile-sidebar-portlet">
                                    <div class="profile-userpic">
                                        <img src="@Url.Content("~/" + imageUrl)" id="profilePictureImageSidebar" alt="profilePictureSidebar" width="250" class="img-fluid">
                               @*          <img id="profilePictureImageSidebar" alt="profilePictureSidebar" width="250" class="img-fluid"> *@
                                        <input type="file" id="profilePictureInputSidebar" accept="image/*" style="display: none;">
                                        
                                    </div>
                                    <div class="profile-usertitle" style="outline: none;">
                                     <div class="profile-usertitle-name">

                                            <input type="text" readonly style="background-color:white; padding:0 20px 0 5px; height:30px;" id="PFullNameSidebar" placeholder="FullName">
                                            <input type="text" readonly style="background-color:white; padding:0 20px 0 5px; height:30px;" id="PUserRoleSidebar" placeholder="None">
                                     </div>
                                        
                                    </div>
                                    <div class="profile-userbuttons">
                                        <button type="button" class="btn btn-info btn-sm">Follow</button>
                                        <button type="button" class="btn btn-info btn-sm">Message</button>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="portlet light bordered">
                                    <div class="portlet-title tabbable-line">
                                        <div class="caption caption-md">
                                            <i class="bi bi-globe theme-font d-none"></i>
                                            <span class="caption-subject font-blue-madison fw-bold text-uppercase">Your info</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#homeSidebar" role="tab">Detail</a>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profileSidebar" role="tab">Profile</a>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settingsSidebar" role="tab">Settings</a>
                                            </li>
                                        </ul>

                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="homeSidebar" role="tabpanel">

                                                <!-- Your form content for the 'Detail' tab -->
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="UserName">UserName</label>
                                                    <input type="text" readonly class="form-control" id="UserNameSidebar" placeholder="UserName">
                                                </div>
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="FullName">Full Name</label>
                                                    <input type="text" style="background-color:white;" class="form-control" id="FullNameSidebar" placeholder="FullName">
                                                </div>

                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="Email">Email address</label>
                                                    <input type="email" style="background-color:white;" class="form-control" id="EmailSidebar" placeholder="Email">
                                                </div>
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="Password">Password</label>
                                                    <input type="password" style="background-color:white;" class="form-control" id="PasswordSidebar" placeholder="Password">
                                                </div>

                                            </div>
                                            <div class="tab-pane" id="profileSidebar" role="tabpanel">
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="Address">Address</label>
                                                    <input type="text" style="background-color:white;" class="form-control" id="AddressSidebar" placeholder="Address">
                                                </div>
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <label for="PhoneNumber">Phone Number</label>
                                                    <input type="text" style="background-color:white;" class="form-control" id="PhoneNumberSidebar" placeholder="PhoneNumber">
                                                </div>

                                                <div class="form-group" style="margin-bottom:10px;">

                                                    <label for="Company">Company</label>
                                                    <input type="text" readonly style="background-color:white;" class="form-control" id="CompanySidebar" placeholder="Company">
                                                </div>

                                            </div>
                                            <div class="tab-pane" id="messagesSidebar" role="tabpanel">
                                                <!-- Content for the 'Messages' tab -->
                                            </div>
                                            <div class="tab-pane" id="settingsSidebar" role="tabpanel">
                                                <!-- Content for the 'Settings' tab -->
                                                <input type="hidden" id="UserIdSidebar">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button">
                            <input type="button" onclick="updateMyProfile()" value="Update">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="~/js/userprofile.js"></script>