@using Chruch.Net.Models.IceBreak
@model Chruch.Net.Models.IceBreak.WhoIsSpyPlayer

@{
    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 (Model == null)
        {

            using (Html.BeginForm("WhoIsSpyPlayJoin", "IceBreak"))
            {
                <div class="row" data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
                    <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>

            }
        }
        else if (Model.IsDead)
        {

            <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">
                    抱歉，由於已被視為臥底，因此請先耐心等候此局結束
                </p>
            </div>
            using (Html.BeginForm())
            {
                <div class="row">

                    <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>

            }
        }
        else
        {

            switch (Model.GameStatus)
            {
                case WhoIsSpyProcess.WaitForPlayer:

                    <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">

                        <h1>等待遊戲開始</h1>

                    </div>
                    break;
                case WhoIsSpyProcess.Started:

                    <div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">

                        <h1>請仔細聆聽其他人的發言，來找出誰是臥底</h1>

                        <button id="btnViewAnswer" 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>


                    @section scripts{
                        <script>
        $("#btnViewAnswer").click(function(parameters) {
            swal({
                title: '<strong>請確認自己的答案</strong>',
                type: 'info',
                html:
                    '<img src="/Images/IceBreak/WhoIsSpy/@(Model.Answer.AnswerImage)">' +
                        '<h2>' +
                        '@(Model.Answer.AnswerCht)<br> ' +
                        '@(Model.Answer.AnswerChs)<br> ' +
                        '@(Model.Answer.AnswerEn)<br> ' +
                        '</h2>',
                showCloseButton: true,
                focusConfirm: false,
                confirmButtonText:
                    '<i class="fa fa-thumbs-up"></i> 收到!',
                confirmButtonAriaLabel: 'Thumbs up, great!'
            })
        });

                        </script>
                    }
                    break;
                case WhoIsSpyProcess.Votting:
                    <div class="g-bg-img-hero g-py-50" style="background-image: url(/images/svg/svg-bg3.svg);" data-animation="flipInY" data-animation-delay="1600" data-animation-duration="1500">

                        <div class="mx-auto g-max-width-600 g-overflow-hidden g-mb-40 g-font-size-30">
                            請投票下您神聖的 <span class="g-color-primary">@(Model.VoteAmount)</span>票
                        </div>

                        @using (Html.BeginForm("WhoIsSpyPlayVote", "IceBreak"))
                        {
                            @Html.HiddenFor(m => m.Id)
                            <div class="container">
                                <div class="btn-group justified-content g-mb-20">

                                    @foreach (var option in Model.VoteOption)
                                    {

                                        <label class="u-check g-pl-0">
                                            <input name="VoteTo" class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0 VoteTo" type="checkbox" value="@(option.Id)">
                                            <span class="btn btn-md btn-block u-btn-outline-lightgray g-color-white--checked g-bg-primary--checked rounded-0 g-font-size-18 g-py-10">@(option.Name)</span>
                                        </label>
                                    }

                                </div>

                                <div class="row">

                                    <div class="col">

                                        <button id="btnVote" 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 btnVote" type="button">送出</button>
                                    </div>
                                </div>
                            </div>

                        }
                    </div>

                    @section scripts{
                        <script>
                        $(".VoteTo").change(function () {


                                if(this.checked) {
                                        //Do stuff

                                        if ($('input.VoteTo:checked').length>@Model.VoteAmount) {
                                            swal("最多只能投 @(Model.VoteAmount) 票");
                                            this.checked = false;
                                            }

                                        }
                                    });


                            $(".btnVote").click(function () {

                                if ($('input.VoteTo:checked').length == @Model.VoteAmount) {

                                    $("#btnVote").parents("Form").submit();
                                } else {
                                    swal(
                                        '請確實投票',
                                        '每個人都要投滿 @(Model.VoteAmount) 票',
                                        'warning'
                                    );
                                }
                            });
                        </script>
                    }

                    break;
                case WhoIsSpyProcess.DisplayResult:


                    <div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">

                        <h1>請觀看大螢幕的投票結果</h1>

                    </div>
                    break;
                case WhoIsSpyProcess.End:


                    <div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">

                        <h1>本局遊戲結束</h1>

                    </div>
                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }


            <div class="g-mt-30" data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
                <div class="row">
                    <div class="col">

                        @using (Html.BeginForm("WhoIsSpyPlay","IceBreak"))
                        {
                            <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-16 text-uppercase g-rounded-30 mx-2 g-px-25 g-py-15" type="submit">重新整理</button>
                        }
                    </div>
                    <div class="col">

                        @using (Html.BeginForm("WhoIsSpyExit", "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" type="button" data-toggle="confirmExit">離開遊戲</button>

                        }
                    </div>
                </div>
            </div>

        }


    </div>
</section>

@section scripts2
                    {
    @if (Model != null)
    {

        <script>

        function checkGameRoomStatus() {


            $.ajax({method: "POST",url: "@Url.Action("CheckGameRoomStatu")",data: { id: "@(Model.RoomId.ToString())"}})
                .done(function( msg ) {
                                    if (msg != '@((int)Model.GameStatus)') {
                                        location.reload();
                                    } else {

                                        setTimeout(checkGameRoomStatus, 5000);
                                    }

                                });

                            }
                            @if (Model.GameStatus != WhoIsSpyProcess.Votting && !Model.IsDead)
        {
            @:$(function() {setTimeout(checkGameRoomStatus, 1000);});
        }
        </script>
    }


}