@using Chruch.Net.Models.IceBreak
@model  Chruch.Net.Models.IceBreak.WhoIsSpyGameRoom
@{
    Layout = "~/Views/Shared/_LayoutEmpty.cshtml";
    ViewBag.Title = "NLCC 破冰-誰是臥底(遊戲房)";
}
<section class="g-flex-centered g-bg-pos-center g-bg-img-hero g-pos-rel g-z-index-1 g-overflow-hidden g-height-100vh" style="background-image: url(/Images/IceBreak/img14.jpg);" data-calc-target="#js-header">
    <div class="g-pos-abs g-top-0 g-left-0" data-animation="fadeInDown" data-animation-delay="100" data-animation-duration="1500">
        <img class="img-fluid" src="/Images/IceBreak/img15.png" alt="Image Description">
    </div>
    <div class="g-pos-abs g-bottom-0 g-right-0" data-animation="fadeInUp" data-animation-delay="1800" data-animation-duration="1500">
        <img class="img-fluid" src="/Images/IceBreak/img16.png" alt="Image Description">
    </div>
    <div class="container text-center g-z-index-1">
        <div class="mb-4">
            <h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1000" data-animation-duration="1500">誰</h1>
            <h2 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1200" data-animation-duration="1500">是</h2>
            <h2 class="h2 d-inline-block g-color-red g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1400" data-animation-duration="1500">臥底</h2>
        </div>


        @if (string.IsNullOrWhiteSpace(Model.Id))
        {


            <div class="mx-auto g-max-width-600 g-overflow-hidden g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                <span class="g-font-size-30">
                    遊戲規則:
                </span>


                <br />
                1.角色：共有三個角色「<span class="g-color-red">臥底</span>、<span class="g-color-primary">平民</span>、白板」 <br /> (ps.白板為選用腳色)
                <br />
                2.每個人需依序描述自己手中的答案，請注意只能描述自己手中的答案 <br />
                (ps.所有人都不知道自己的身分，僅能透過他人的發言來判斷)
                <br />
                3.投票階段大家投給認為可能是臥底的人，最高票者將被視為臥底
                <br />
                4.當遊戲中所有臥底被抓出，則由<span class="g-color-primary">平民</span>獲勝， <br />
                若臥底剩餘人數大於等於平民，則由<span class="g-color-red">臥底</span>勝出
            </div>
            <div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">

                @using (Html.BeginForm("WhoIsSpyCreate", "IceBreak"))
                {
                    <div class="row">
                        <div class="col">
                            <label class="g-font-weight-700 g-mb-20 h5">遊戲房編號</label>
                            @Html.TextBoxFor(m => m.Id, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                        </div>
                        <div class="col">

                            <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">建立遊戲間</button>
                        </div>
                    </div>

                }

            </div>
        }
        else
        {

            
            using (Html.BeginForm("WhoIsSpyClose", "IceBreak"))
             {
                 <button class="btn u-shadow-v32 g-brd-black g-brd-2 g-color-black g-color-white--hover g-bg-transparent g-bg-black--hover g-font-size-16 g-rounded-30 g-py-10 mr-2 g-mt-0 g-pos-fix g-right-0 g-top-10" type="button" data-toggle="confirmExit">結束</button>

             }
            switch (Model.Status)
            {
                case WhoIsSpyProcess.WaitForPlayer:
                    
                    <div class="mb-4">
                        <h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1000" data-animation-duration="1500">遊戲房號：</h1>
                        <h2 class="h2 d-inline-block g-color-red g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1400" data-animation-duration="1500">@Model.Id</h2>
                    </div>

                    using (Html.BeginForm("WhoIsSpyStart", "IceBreak"))
                    {

                        @Html.HiddenFor(m => m.Id)
                        @Html.HiddenFor(m => m.Status)

                        <div class="row">
                            <div class="col">

                                <div id="qrcode"></div>
                            </div>
                            <div class="col">

                                <div class="row">
                                    <div class="col-4">

                                        <label class="g-font-weight-700 g-mb-20 h5">房間人數</label>
                                        <span id="lbPlayerAmount" class="g-color-red">@Model.TotalPlayer</span>
                                    </div>
                                    <div class="col-4">

                                        <label class="g-font-weight-700 g-mb-20 h5">臥底人數</label>
                                        @Html.TextBoxFor(m => m.SpyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                                    </div>
                                    <div class="col-4">

                                        <label class="g-font-weight-700 g-mb-20 h5">空白人數</label>
                                        @Html.TextBoxFor(m => m.EmptyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                                    </div>
                                    <div class="col g-mt-30">

                                        <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">開始遊戲</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h2 class="g-my-30">已加入房間:</h2>

                        <div id="playerList"></div>

                        @section scripts{
                            <script>
                                function checkGameRoomPlayerList() {
                                    $("#playerList").load("@Url.Action("WhoIsSpyGetPlayerList")",function(parameters) {

                                        $("#lbPlayerAmount").html($("#playerCount")[0].value);
                                        setTimeout(checkGameRoomPlayerList, 5000);
                                    });

                                }

                                $(function() {
                                    setTimeout(checkGameRoomPlayerList, 500);

                                    $('#qrcode').qrcode("@Url.Action("WhoIsSpyPlayJoin","IceBreak",new{id=Model.Id}, this.Request.Url.Scheme)");

                                });
                            </script>
                        }
                    }
                    break;
                case WhoIsSpyProcess.Started:


                    using (Html.BeginForm("WhoIsSpyNext", "IceBreak"))
                    {

                        <div class="mx-auto g-max-width-600 g-overflow-hidden">
                            <p class="g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                                各自發言階段:
                                <br />
                                請透過系統隨機順序發言
                            </p>
                        </div>

                        <div class="row">
                            <div class="col">

                                <button id="btnSpeak" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="button">開始發言</button>
                            </div>
                            <div class="col">

                                <button id="btnGoToNext" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15 disabled" type="button" onclick="GoToNextStep()">開始投票</button>
                            </div>
                        </div>

                        @section scripts{
                        <script>

                                $("#btnSpeak").click(function () {
                                    swal.mixin({
                                        confirmButtonText: 'Next &rarr;',
                                        showCancelButton: true,
                                        progressSteps: [
                                            @for (int i = 1; i < (Model.TotalPlayer-Model.Players.Count(p=>p.IsDead)); i++)
                                            {
                                                @Html.Raw($"'{i}',")
                                            }
                                            , @Html.Raw($"'{Model.TotalPlayer}',")
                                        ]
                                    }).queue([

                                        @foreach (var p in Model.Players)
                                        {
                                            if (!p.IsDead)
                                            {
                                                @Html.Raw($"'有請 {p.Name} 發言!',")
                                            }

                                        }
                                        
                                    ]).then((result) => {
                                        if (result.value) {
                                            swal({
                                                title: '全數發言完畢!',
                                                html:
                                                    '請使用您的手機來進行投票，找出誰是臥底!',
                                                confirmButtonText: 'OK!'
                                            }).then((result) => {
                                                $('#btnGoToNext').removeClass('disabled');
                                            });

                                        }
                                    });
                                });


                        </script>
                        }


                    }
                    break;
                case WhoIsSpyProcess.Votting:

                    <div class="mx-auto g-max-width-600 g-overflow-hidden">
                        <p class="g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                            各自投票階段:
                            <br />
                            請使用您的手機來投下您神聖的 <h1 class="g-color-primary">@Model.VoteAmount</h1> 票
                            <br />
                            <h1>以下人員尚未完成投票</h1>
                        </p>
                    </div>

                    <div id="playerList"></div>
                    <div class="row">
                        <div class="col">

                            <button id="btnGoToNext" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15 disabled" type="button" onclick="GoToNextStep()">揭開投票結果</button>
                        </div>
                    </div>
                    @section scripts{
                        <script>
                            function checkGameRoomPlayerList() {
                                $("#playerList").load("@Url.Action("WhoIsSpyGetPlayerVoteList")", function() {
                                    /* When load is done */
                                    if ($("#playerCount")[0].value==0) {

                                        $('#btnGoToNext').removeClass('disabled');
                                    } else {
                                        setTimeout(checkGameRoomPlayerList, 5000);
                                    }
                                });


                            }

                            $(function () { setTimeout(checkGameRoomPlayerList, 500); });
                        </script>
                    }

                    break;
                case WhoIsSpyProcess.DisplayResult:

                    <div class="mx-auto g-max-width-600 g-overflow-hidden">
                        <div class="g-color-black g-font-size-18 g-font-size-30 g-font-weight-600 g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                            恭喜以下 <span class="g-color-primary">候選人</span> 當選
                        </div>

                        <div class="row">

                            @foreach (var player in Model.Players.OrderByDescending(p => p.ReceviedVotes).Take(Model.VoteAmount))
                            {
                                <div class="col g-mb-30" data-animation="flipInY" data-animation-delay="@(1800+Model.Players.IndexOf(player)*20)" data-animation-duration="1500">
                                    <!-- Article -->
                                    <article class="text-center g-bg-white g-rounded-15 g-overflow-hidden g-transform-scale-1_05--hover g-transition-0_3">
                                        <!-- Article Header -->
                                        <header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
                                            <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
                                                <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"></path>
                                                <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"></path>
                                                <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"></path>
                                                <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"></path>
                                            </svg>
                                            <h1 class="h1 g-color-white g-letter-spacing-3 g-mb-20 text-uppercase g-font-size-50">@player.Name</h1>
                                            <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                                                <span class="g-valign-top g-font-size-default">$</span>
                                                @player.ReceviedVotes
                                                <span class="g-font-size-default">/ 當選票數</span>
                                            </strong>
                                        </header>
                                        <!-- End Article Header -->
                                        <!-- Article Content -->
                                        <div class="g-px-20 g-py-40">

                                            <button class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10 btnShowIdentity" type="button" value="@(player.IsSpy.ToString())">揭示身分</button>
                                        </div>
                                        <!-- End Article Content -->
                                    </article>
                                    <!-- End Article -->
                                </div>
                            }

                        </div>
                        <div class="row" data-animation="fadeInDown" data-animation-delay="1800" data-animation-duration="1500">
                            <div class="col">

                                <button id="btnGoToNext" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="button" onclick="GoToNextStep()">進行下一輪</button>
                            </div>
                        </div>

                    </div>
                    @section scripts{
                        <script>
                            $(".btnShowIdentity").click(function () {
                                if ($(this)[0].value == "True") {
                                    swal("你是大偵探!", "恭喜你們抓到了一位臥底!!", "success");
                                } else {

                                    swal("冤望阿!!", "你們這群暴民...就這樣害死了一位無辜的百姓!!", "error");
                                }
                            })
                        </script>
                    }

                    break;
                case WhoIsSpyProcess.End:

                    <div class="mx-auto g-max-width-600 g-overflow-hidden">

                        <div class="g-color-black g-font-size-18 g-font-size-30 g-font-weight-600 g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                            恭喜 <span class="g-color-primary g-font-size-30">@(Model.Players.Count(p => p.IsSpy && !p.IsDead) > 0 ? "臥底" : "平民")</span> 獲勝
                        </div>

                        <div class="row">

                            <div class="col g-mb-30" data-animation="flipInY" data-animation-delay="1800" data-animation-duration="1500">
                                <!-- Article -->
                                <article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
                                    <!-- Article Header -->
                                    <header class="g-bg-primary g-color-white-opacity-0_7 g-pa-20">
                                        <h3 class="g-color-white g-mb-5">平民的答案</h3>
                                        <em class="g-font-style-normal"></em>
                                    </header>
                                    <!-- End Article Header -->
                                    <!-- Article Image -->
                                    <img class="w-100" src="/Images/IceBreak/WhoIsSpy/@(Model.Answer.AnswerImage)" alt="Image Description">
                                    <!-- End Article Image -->
                                    <!-- Article Content -->
                                    <div class="g-pa-40">
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerCht)</strong>
                                        </div>
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerChs)</strong>
                                        </div>
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerEn)</strong>
                                        </div>
                                    </div>
                                    <!-- End Article Content -->
                                </article>
                                <!-- End Article -->
                            </div>

                            <div class="col g-mb-30" data-animation="flipInY" data-animation-delay="2000" data-animation-duration="1500">
                                <!-- Article -->
                                <article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
                                    <!-- Article Header -->
                                    <header class="g-bg-deeporange g-color-white-opacity-0_7 g-pa-20">
                                        <h3 class="g-color-white g-mb-5">臥底的答案</h3>
                                        <em class="g-font-style-normal"></em>
                                    </header>
                                    <!-- End Article Header -->
                                    <!-- Article Image -->
                                    <img class="w-100" src="/Images/IceBreak/WhoIsSpy/@(Model.SpysAnswer.AnswerImage)" alt="Image Description">
                                    <!-- End Article Image -->
                                    <!-- Article Content -->
                                    <div class="g-pa-40">
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerCht)</strong>
                                        </div>
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerChs)</strong>
                                        </div>
                                        <div class="g-mb-10">
                                            <strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerEn)</strong>
                                        </div>
                                    </div>
                                    <!-- End Article Content -->
                                </article>
                                <!-- End Article -->
                            </div>


                        </div>
                        <div class="g-px-20 g-py-5">

                            <button class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" type="button" onclick="GoToNextStep()">開始下一局</button>


                        </div>
                    </div>


                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }



        }



    </div>
</section>


@using (Html.BeginForm("WhoIsSpyNext", "IceBreak", FormMethod.Post, new { id = "GoToNextStepForm" }))
{

}

@section scripts2
{

    <script>
        function GoToNextStep() {
            $("#GoToNextStepForm").submit();
        }

    </script>

}