@model Church.Net.Entity.Vocabulary

@{
    ViewBag.title="Select Word";
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <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">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="row">

                <div class="col-md-6 g-mb-20--md">
                    @Html.LabelFor(model => model.PartOfSpeech, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EnumDropDownListFor(model => model.PartOfSpeech, htmlAttributes: new { @class = "w-100 u-select-v2 u-shadow-v19 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-30 g-py-12", @onchange = "PartOfSpeechChanged(value)" })
                    @Html.ValidationMessageFor(model => model.PartOfSpeech, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>
            </div>
            <div class="row">


                <div class="col-md-6 g-mb-20--md">
                    @Html.LabelFor(model => model.Word, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.Word, 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" } })
                    @Html.ValidationMessageFor(model => model.Word, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>

                <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 class="col-md-4 g-mb-20--md nounPlural">
                    @Html.LabelFor(model => model.NounPlural, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.NounPlural, 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" } })
                    @Html.ValidationMessageFor(model => model.NounPlural, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>

            </div>

            <div class="row verbForm" style="display:none">

                <div class="col-md-4 g-mb-20--md ">
                    @Html.LabelFor(model => model.VerbPast, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.VerbPast, 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" } })
                    @Html.ValidationMessageFor(model => model.VerbPast, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>

                <div class="col-md-4 g-mb-20--md ">
                    @Html.LabelFor(model => model.VerbParticiple, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.VerbParticiple, 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" } })
                    @Html.ValidationMessageFor(model => model.VerbParticiple, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>


            </div>

            <div class="row">
                <iframe id="frameDictionary" src="" class="g-width-100vw" style="height:500px;display:none"></iframe>
            </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.EditorFor(model => model.DefinitionEn, 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" } })
                    @Html.ValidationMessageFor(model => model.DefinitionEn, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>


                <div class="col-md-6 g-mb-20--md">
                    @Html.LabelFor(model => model.DefinitionCh, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.DefinitionCh, 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" } })
                    @Html.ValidationMessageFor(model => model.DefinitionCh, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>

            </div>
            <div class="row">


                <div class="col-md-6 g-mb-20--md">
                    @Html.LabelFor(model => model.ImagesUrl, htmlAttributes: new { @class = "g-font-weight-500 g-font-size-15 g-pl-30" })

                    @Html.EditorFor(model => model.ImagesUrl, 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" } })
                    @Html.ValidationMessageFor(model => model.ImagesUrl, "", new { @class = "form-control-feedback d-block g-bg-red g-color-white g-font-size-12 g-px-14 mt-0" })
                </div>

                <div class="col-md-6 g-mb-20--md">
                    <button type="button" class="btn btn-primary" onclick="QueryImage()">Query</button>
                </div>

            </div>






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


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

    </div>
}
@section scripts{
    <script>

        function PartOfSpeechChanged(value) {
            if (value == "2") {

                $('.verbForm').show('slow')
            } else {

                $('.verbForm').hide('slow')
            }


            if (value == "0") {

                $('.nounPlural').show('slow')
            } else {

                $('.nounPlural').hide('slow')
            }
        }

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

                $('#frameDictionary').show('fast');
                $('#frameDictionary').attr('src', 'https://dictionary.cambridge.org/us/dictionary/english-chinese-traditional/' + $("#Word").val());
                $("#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/' + $("#Word").val());
                $("#DefinitionEn").focus();
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#frameDictionary").offset().top
                }, 1000);
            }
        }
        function QueryImage() {
            if ($("#Word").val() !='') {
                
                
                var win = window.open("https://www.google.com/search?q=" + $("#Word").val() + "&hl=en&tbm=isch&source=lnt&sa=X&ved=0ahUKEwiQyc-w1NrjAhWRKn0KHYGgDf8QpwUIIw&biw=1368&bih=770&dpr=2", '_blank');
                if (win) {
                    //Browser has allowed it to be opened
                    $("#ImageUrl").focus()
                    win.focus();
                } else {
                    //Browser has blocked it
                    alert('Please allow popups for this website');
                }
            }
        }



    </script>
}