@{
    ViewData["Title"] = $"{Model.ApplicationUser.UserName.Substring(0, 1).ToUpper() + Model.ApplicationUser.UserName.Substring(1, Model.ApplicationUser.UserName.Length - 1)} Profile";
}

@model ProfileViewModel

<div class="user-profile">
    <div class="profile-header-background">
        <img src=@Model.ApplicationUser.CoverImageUrl alt="Profile Header Background">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="profile-info-left">
                    <div class="text-center">
                        <img src=@Model.ApplicationUser.ImageUrl alt="Avatar" class="avatar img-circle" style="width: 270px; height: 250px">
                        <h2>@Model.ApplicationUser.FirstName @Model.ApplicationUser.LastName</h2>
                        @if (Model.ApplicationUser.IsBlocked == true)
                        {
                            <span class="label label-danger" style="font-size: medium; padding: 7px 40px 7px 40px"><i class="fas fa-user-slash"> Banned</i></span>
                        }

                        <h5>
                            <span class="userStatusDot" id="userStatusDot"></span>
                            <span id="@(Model.ApplicationUser.UserName)userSatus">
                                Online
                            </span>
                        </h5>

                        Rating: <span id="profileRating">@Model.RatingScore.ToString("F2")/5</span>
                        <div class="ratingStars" id="starScoreRating">
                            @*Here Goes Rating Stars*@
                        </div>
                        <h5 id="currentUsername">@@@Model.ApplicationUser.UserName</h5>
                    </div>
                    <div class="action-buttons">
                        <div class="row">
                            <div class="col-xs-6">
                                @if (User.Identity.Name == Model.ApplicationUser.UserName)
                                {
                                    <a asp-area="Identity" asp-page="/Account/Manage/Index" class="btn btn-primary btn-info btn-block"><i class="fas fa-edit"></i> Edit Profile</a>
                                }
                                else
                                {
                                    @if (!Model.ApplicationUser.IsFollowed)
                                    {
                                        <form asp-area="" asp-controller="Profile" asp-action="Follow" asp-route-username="@Model.ApplicationUser.UserName" method="post">
                                            <button type="submit" class="btn btn-success btn-block">
                                                <i class="fas fa-plus-circle"></i> Follow
                                            </button>
                                        </form>
                                    }
                                    else
                                    {
                                        <form asp-area="" asp-controller="Profile" asp-action="Unfollow" asp-route-username="@Model.ApplicationUser.UserName" method="post">
                                            <button type="submit" class="btn btn-danger btn-block">
                                                <i class="fas fa-minus-circle"></i> Unfollow
                                            </button>
                                        </form>
                                    }
                                }
                            </div>
                            <div class="col-xs-6">
                                @if (User.Identity.Name == Model.ApplicationUser.UserName)
                                {
                                    <a asp-route-tab="AllUsers" asp-area="" asp-controller="Profile" asp-action="Users" class="btn btn-primary btn-block"><i class="fas fa-users"></i> All Users</a>
                                }
                                else
                                {
                                    <a asp-area="PrivateChat" asp-controller="PrivateChat" asp-action="Index" asp-route-username="@Model.ApplicationUser.UserName" asp-route-group="@Model.ApplicationUser.GroupName" class="btn btn-primary btn-block">Message</a>
                                }
                            </div>
                        </div>
                        @if (User.Identity.Name == Model.ApplicationUser.UserName && Model.ApplicationUser.ActionsCount > 0)
                        {
                            <div style="margin-top: 15px">
                                <a asp-controller="Profile" asp-action="DeleteActivityHistory" asp-route-username="@User.Identity.Name" class="btn btn-danger btn-block"><i class="fas fa-trash"></i> Delete Activity History</a>
                            </div>
                        }
                        @if (User.Identity.Name == Model.ApplicationUser.UserName && !Model.HasAdmin)
                        {
                            <div style="margin-top: 15px">
                                <a asp-area="" asp-controller="Profile" asp-action="MakeYourselfAdmin" asp-route-username="@User.Identity.Name" class="btn btn-info btn-block"><i class="fas fa-user-shield"></i> Make Yourself Administrator</a>
                            </div>
                        }
                        @if (User.Identity.Name == Model.ApplicationUser.UserName && User.IsInRole(Roles.Administrator.ToString()))
                        {
                            <div style="margin-top: 15px">
                                <a asp-area="Administration" asp-controller="Dashboard" asp-action="Index" class="btn btn-success btn-block"><i class="fas fa-user-shield"></i> Administration Panel</a>
                            </div>
                        }
                        else
                        {
                            @if (User.Identity.Name == Model.ApplicationUser.UserName && User.IsInRole(Roles.Editor.ToString()))
                            {
                                <div style="margin-top: 15px">
                                    <a asp-area="Editor" asp-controller="AddCategory" asp-action="Index" class="btn btn-success btn-block"><i class="fas fa-feather-alt"></i> Create Category</a>
                                </div>
                            }
                        }
                    </div>
                    <div class="section">
                        <h3>About Me</h3>
                        <p>@Model.ApplicationUser.AboutMe</p>
                    </div>
                    <div class="section">
                        <h3>Roles</h3>
                        @foreach (var role in Model.ApplicationUser.Roles.OrderBy(x => x.RoleLevel))
                        {
                            @if (role.Name == Roles.Administrator.ToString())
                            {
                                <span class="label label-success">@role.Name</span>
                            }
                            @if (role.Name == Roles.Editor.ToString())
                            {
                                <span class="label label-primary">@role.Name</span>

                            }
                            @if (role.Name == Roles.Author.ToString())
                            {
                                <span class="label label-warning">@role.Name</span>

                            }
                            @if (role.Name == Roles.Contributor.ToString())
                            {
                                <span class="label label-info">@role.Name</span>

                            }
                            @if (role.Name == Roles.Subscriber.ToString())
                            {
                                <span class="label label-default">@role.Name</span>

                            }
                        }
                    </div>
                    <div class="section">
                        <h3>Personal Data</h3>
                        @if (Model.ApplicationUser.Country != null)
                        {
                            <p><i class="fas fa-flag"></i> Country: @Model.ApplicationUser.Country.Name</p>
                        }
                        @if (Model.ApplicationUser.State != null)
                        {
                            <p><i class="far fa-star"></i> State: @Model.ApplicationUser.State.Name</p>
                        }
                        @if (Model.ApplicationUser.City != null)
                        {
                            <p><i class="fas fa-building"></i> City: @Model.ApplicationUser.City.Name</p>
                        }
                        @if (Model.ApplicationUser.ZipCode != null)
                        {
                            <p><i class="fas fa-mail-bulk"></i> Zip Code: @Model.ApplicationUser.ZipCode.Code</p>
                        }
                        @if (Model.ApplicationUser.BirthDate != null)
                        {
                            <p><i class="fas fa-birthday-cake"></i> @(((DateTime)Model.ApplicationUser.BirthDate).ToString("dd-MMMM-yyyy"))</p>
                        }
                        @if (Model.ApplicationUser.PhoneNumber != null)
                        {
                            <p>
                                <i class="fas fa-phone"></i> (@Model.ApplicationUser.CountryCode?.Code) @Model.ApplicationUser.PhoneNumber

                                @if (User.Identity.Name == Model.ApplicationUser.UserName && Model.ApplicationUser.PhoneNumberConfirmed == false && Model.ApplicationUser.CountryCode?.Id != null)
                                {
                                    <a asp-area="Identity" asp-page="/Account/VerifyPhone">Verify Phone</a>
                                }
                            </p>
                        }
                    </div>
                    <div class="section">
                        <h3>Social</h3>
                        <ul class="list-unstyled">
                            @if (Model.ApplicationUser.GitHubUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.GitHubUrl target="_blank"><i class="fab fa-github"></i> GitHub</a></li>
                            }
                            @if (Model.ApplicationUser.StackoverflowUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.StackoverflowUrl target="_blank"><i class="fab fa-stack-overflow"></i> StackOverflow</a></li>
                            }
                            @if (Model.ApplicationUser.FacebookUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.FacebookUrl target="_blank"><i class="fab fa-facebook-square"></i> Facebook</a></li>
                            }
                            @if (Model.ApplicationUser.LinkedinUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.LinkedinUrl target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
                            }
                            @if (Model.ApplicationUser.TwitterUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.TwitterUrl target="_blank"><i class="fab fa-twitter-square"></i> Twitter</a></li>
                            }
                            @if (Model.ApplicationUser.InstagramUrl != null)
                            {
                                <li><a href=@Model.ApplicationUser.InstagramUrl target="_blank"><i class="fab fa-instagram"></i> Instagram</a></li>
                            }
                        </ul>
                    </div>
                    <div class="section">
                        <h3>Blog</h3>
                        <p>
                            <a asp-area="" asp-controller="UserPosts" asp-action="Index" asp-route-username="@Model.ApplicationUser.UserName" asp-route-filter=@UserPostsFilter.Created.ToString()>
                                <i class="fas fa-blog"></i> @Model.ApplicationUser.CreatedPosts Blog Posts
                            </a>
                        </p>
                        <p>
                            <a asp-area="" asp-controller="UserPosts" asp-action="Index" asp-route-username="@Model.ApplicationUser.UserName" asp-route-filter="@UserPostsFilter.Liked.ToString()">
                                <i class="fas fa-thumbs-up"></i> @Model.ApplicationUser.LikedPosts Posts Likes
                            </a>
                        </p>
                        <p>
                            <a>
                                <i class="far fa-comments"></i> @Model.ApplicationUser.CommentsCount Posts Comments
                            </a>
                        </p>
                    </div>
                    <div class="section">
                        <h3>Private Chat</h3>
                        <p>
                            <a asp-area="PrivateChat" asp-controller="CollectStickers" asp-action="Index">
                                <i class="fas fa-plus-circle"></i> Collect Stickers
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div style="margin-top: 10px;">
                    <partial name="_TempDataPartial" />
                </div>
                <div class="profile-info-right">
                    <ul class="nav nav-pills nav-pills-custom-minimal custom-minimal-bottom" id="myTab">
                        <li role="presentation" class="@(Model.ActiveTab == ProfileTab.Activities ? "active" : string.Empty )">
                            <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="Activities" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">ACTIVITIES</a>
                        </li>
                        <li role="presentation" class="@(Model.ActiveTab == ProfileTab.Followers ? "active" : string.Empty )">
                            <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="Followers" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">FOLLOWERS</a>
                        </li>
                        <li role="presentation" class="@(Model.ActiveTab == ProfileTab.Following ? "active" : string.Empty )">
                            <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="Following" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">FOLLOWING</a>
                        </li>
                        <li role="presentation" class="@(Model.ActiveTab == ProfileTab.Favorites ? "active" : string.Empty )">
                            <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="Favorites" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">FAVORITES</a>
                        </li>
                        @if (User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()) || User.Identity.Name == Model.ApplicationUser.UserName)
                        {
                            <li role="presentation" class="@(Model.ActiveTab == ProfileTab.PendingPosts ? "active" : string.Empty )">
                                <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="PendingPosts" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">PENDING</a>
                            </li>
                            <li role="presentation" class="@(Model.ActiveTab == ProfileTab.BannedPosts ? "active" : string.Empty )">
                                <a asp-route-username="@Model.ApplicationUser.UserName" asp-route-tab="BannedPosts" asp-route-page="@Model.Page" asp-area="" asp-controller="Profile" asp-action="SwitchToAllActivitiesTabs">BANNED</a>
                            </li>
                        }
                    </ul>
                    <div class="tab-content">
                        @switch (Model.ActiveTab)
                        {
                            case ProfileTab.Activities:
                                @await Component.InvokeAsync("Activities", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                break;
                            case ProfileTab.Following:
                                @await Component.InvokeAsync("Following", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                break;
                            case ProfileTab.Followers:
                                @await Component.InvokeAsync("Followers", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                break;
                            case ProfileTab.Favorites:
                                @await Component.InvokeAsync("Favorites", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                break;
                            case ProfileTab.PendingPosts:
                                @if (User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()) || User.Identity.Name == Model.ApplicationUser.UserName)
                                {
                                    @await Component.InvokeAsync("PendingPosts", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                }
                                break;
                            case ProfileTab.BannedPosts:
                                @if (User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()) || User.Identity.Name == Model.ApplicationUser.UserName)
                                {
                                    @await Component.InvokeAsync("BannedPosts", new { username = Model.ApplicationUser.UserName, page = Model.Page });
                                }
                                break;
                            default:
                                <h3 class="currentRatingScore">
                                    Your Latest Rate:
                                    <span id="latestScore">@Model.LatestScore</span>
                                </h3>
                                <partial name="_RateUserPartial" />
                                break;
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script src="~/js/userProfile/profileRating.js"></script>
    <script type="text/javascript" src="~/js/userProfile/userActionsScript.js"></script>
}