EDU/Website/NEducation/Views/Home/_ModalRanking.cshtml

<link type="text/css" rel="stylesheet" href="~/Content/assets/css/ranking.css " />

@using NEducation.Content.Texts;
@model NEducation.Models.RankingModel


<div class="modal-dialog ranking-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <span class="modal-button-close" data-dismiss="modal"></span>
            <!-- begin top rank content-->
            <div class="row ranking-content">
                <div class="col-md-6">
                    <div class="row subtitle">
                        <div class="col-xs-12 ">
                            <div class="line-orange"></div>
                            <p class="ranking-subtitle">TOP 3</p>
                        </div>
                    </div>

                    <div class="row top-rank-group">
                        @if (Model.ranking.listRanking != null && Model.ranking.listRanking.Count >= 2)
                        {
                            <!--begin second item-->
                            <div class="col-xs-12 col-sm-4 col-md-4 top-ranking-item">
                                <div class="text-center" style="height: 300px; padding-top: 40px;">
                                    <div class="top-rank top-rank-second">
                                        <p>2</p>
                                    </div>
                                    <div class="top-rank-info top-rank-info-second">
                                        @*<p class="rank-avatar">
                                            <img src="@Model.ranking.listRanking[1].picture" />
                                        </p>*@
                                        <p class="rank-name"><a href="#">@Model.ranking.listRanking[1].fullName</a></p>
                                        <div class="rank-number-group rank-number-group-second">
                                            <div class="top-rank-word">
                                                <p>Tổng điểm</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[1].totalScore</p>
                                            </div>
                                            <div class="top-rank-time">
                                                <p>Ngày sinh</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[1].birthday</p>
                                            </div>
                                            @*<div class="top-rank-times">
                                                    <p class="top-rank-number">736</p>
                                                    <p>Lần</p>
                                                </div>*@
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                        <!--end second item-->
                        <!--begin first item-->
                        @if (Model.ranking.listRanking != null && Model.ranking.listRanking.Count >= 1)
                        {
                            <div class="col-xs-12 col-sm-4 col-md-4 top-ranking-item">
                                <div class="text-center" style="height: 300px;">
                                    <div class="top-rank">
                                        <p>1</p>
                                    </div>
                                    <div class="top-rank-info">
                                        <div>
                                            <p class="cup-img-group">
                                                <img class="cup-img" src="~/Content/assets/imgs/cup-image.png" />
                                            </p>
                                        </div>
                                        @*<p class="rank-avatar">
                                            <img src="@Model.ranking.listRanking[0].picture" />
                                        </p>*@
                                        <p class="rank-name"><a href="#">@Model.ranking.listRanking[0].fullName</a></p>
                                        <div class="rank-number-group">
                                            <div class="top-rank-word">
                                                <p>Tổng điểm</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[0].totalScore</p>
                                            </div>
                                            <div class="top-rank-time">
                                                <p>Ngày sinh</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[0].birthday</p>
                                            </div>
                                            @*<div class="top-rank-times">
                                                    <p class="top-rank-number">3311</p>
                                                    <p>Lần</p>
                                                </div>*@
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                        <!--end first item-->
                        <!--begin third item-->
                        @if (Model.ranking.listRanking != null && Model.ranking.listRanking.Count >= 3)
                        {
                            <div class="col-xs-12 col-sm-4 col-md-4 top-ranking-item">
                                <div class="text-center" style="height: 300px; padding-top: 80px;">
                                    <div class="top-rank top-rank-third">
                                        <p>3</p>
                                    </div>
                                    <div class="top-rank-info top-rank-info-third">
                                        @*<p class="rank-avatar">
                                            <img src="@Model.ranking.listRanking[2].picture" />
                                        </p>*@
                                        <p class="rank-name"><a href="#">@Model.ranking.listRanking[2].fullName</a></p>
                                        <div class="rank-number-group rank-number-group-third">
                                            <div class="top-rank-word">
                                                <p>Tổng điểm</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[2].totalScore</p>
                                            </div>
                                            <div class="top-rank-time">
                                                <p>Ngày sinh</p>
                                                <p class="top-rank-number">@Model.ranking.listRanking[2].birthday</p>
                                            </div>
                                            @*<div class="top-rank-times">
                                                    <p class="top-rank-number">2227</p>
                                                    <p>Lần</p>
                                                </div>*@
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="row subtitle">
                        <div class="col-xs-12">
                            <div class="line-green"></div>
                            <p class="ranking-subtitle">TOP 5</p>
                        </div>
                    </div>

                    <!--begin ranking item-->
                    @if (Model.ranking.listRanking != null && Model.ranking.listRanking.Count >= 4)
                    {
                        for (int i = 3; i < Model.ranking.listRanking.Count; i++)
                        {
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="ranking-item">
                                        <div class="">
                                            <div class="col-xs-1 ranking-item-rank">
                                                <p>@(i + 1)</p>
                                            </div>
                                            <div class="col-xs-5 ranking-item-info">
                                                <p>
                                                    @*<span style="background: #5200EF;" class="text-avatar">P</span>*@

                                                    <a href="#"><span>@Model.ranking.listRanking[i].users</span></a>
                                                </p>
                                            </div>
                                            <div class="col-xs-2 ranking-item-word">
                                                <div class="">
                                                    <p class="word-number">@Model.ranking.listRanking[i].totalScore</p>
                                                    <p class="word-text">Point</p>
                                                </div>

                                            </div>
                                            <div class="col-xs-2 ranking-item-word">
                                                <div class="">
                                                    <p class="word-number">23/06/1995</p>
                                                    <p class="word-text">Date</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        }
                    }
                    <!--end ranking item-->
                </div>
            </div>
            <!-- begin top rank content-->
            <!--begin user rank content-->
            @{if (@Model.currentRanking != null)
                {
                    <div class="row subtitle">
                        <div class="col-xs-12 ">
                            <div class="line-blue"></div>
                            <p class="user-ranking-subtitle">@Lang.Rank</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7">
                            <!--begin ranking item-->
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="ranking-item user-ranking-item">
                                        <div class="">
                                            <div class="col-xs-7">
                                                <div class="row">
                                                    <div class="col-xs-2 ranking-item-rank">
                                                        <p class="user-item-rank-number">@Model.currentRanking.seq</p>
                                                    </div>
                                                    <div class="col-xs-10 ranking-item-info">
                                                        <p>
                                                            @*<span style="background: #4c87ed;" class="text-avatar">T</span>*@
                                                            <a href="#"><span>@Model.currentRanking.msisdn.Substring(3)</span></a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-5">
                                                <div class="row">
                                                    <div class="col-xs-4 ranking-item-word">
                                                        <div class="">
                                                            <p class="word-number">@Model.currentRanking.totalScore</p>
                                                            <p class="word-text">@Lang.Point</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!--end ranking item-->
                        </div>
                        <div class="col-md-5">
                            <div class="row">
                                <div class="col-md-7 col-sm-7">
                                    <p class="ranking-msg text-right">@Lang.TryYourBest</p>
                                </div>
                                <div class="col-md-5 col-sm-5 text-right img-msg">
                                    <img src="~/Content/assets/imgs/rank-msg-img.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }

            <!--end user rank content-->
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->