@model Church.Net.Entity.Vocabulary

@{
    ViewBag.title = "Apply";
}


<div class="g-bg-img-hero g-bg-pos-top-center g-pos-rel g-z-index-1 g-mt-minus-100" style="background-image: url(/Images/svg/svg-bg5.svg);">
    <div class="container g-pt-150 g-pb-30">
        <div class="row center">


            @Html.Partial("~/Areas/English/Views/Shared/_SpellPractice.cshtml", Model)


        </div>
        @using (Html.BeginForm("ApplyNext"))
        {
            <div class="form-group" id="divNextQuiz" style="display:none">

                <div class="row">
                    <iframe id="frameDictionary" src="" class="g-width-100vw" style="height:500px;display:none"></iframe>
                    <div class="col-md-2 g-mb-20--md">
                        <button type="button" class="btn u-btn-outline-primary" onclick="QueryWord()">Query</button>
                        <button type="button" class="btn u-btn-outline-primary" onclick="QueryWord2()">Query</button>
                    </div>
                </div>

                <div class="row">


                    <div class="col-md-6 g-mb-20--md">
                        @Html.LabelFor(model => model.DefinitionEn, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })
                        @Html.HiddenFor(model=>model.Id)
                        @Html.EditorFor(model => model.PracticeSentence, new { htmlAttributes = new { @class = "form-control u-shadow-v19 g-brd-none g-bg-white g-font-size-16 g-rounded-30 g-px-30 g-py-13 g-mb-30", @multiLine = "true" } })
                    </div>



                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Next" class="btn btn-default" />
                    </div>
                </div>
            </div>


        }


        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

    </div>

</div>



@section scripts{
    <script>
    $(function(){
        SetUpSpellingQuitze('@Model.Word','divNextQuiz');
    })

        function QueryWord() {
            if ($("#Word").val() != '') {


                $('#frameDictionary').show('fast');
                $('#frameDictionary').attr('src', 'https://dictionary.cambridge.org/us/dictionary/english-chinese-traditional/@Model.Word');
                $("#DefinitionEn").focus();
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#frameDictionary").offset().top
                }, 1000);
            }
        }

        function QueryWord2() {
            if ($("#Word").val() != '') {


                $('#frameDictionary').show('fast');
                $('#frameDictionary').attr('src', 'https://dict.cn/@Model.Word');
                $("#DefinitionEn").focus();
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#frameDictionary").offset().top
                }, 1000);
            }
        }
    </script>
}