@Master['master.html']
@Model['TestOrderViewModel']
@Section['Content']
<div name="UpperSection" id="UpperSection">
    <form class="mt-3" method="post" action="/Orders/Test">
        <div class="row mt-2">
            <div class="control-group mb-3">
                <div class="controls">
                    <button type="button" class="btn btn-primary" onclick="generateParsedHtml();">Testemail anzeigen</button>
                    <button type="submit" class="btn btn-primary">Testemail schicken</button>
                </div>
            </div>
        </div>

        @If.TestValidationInfo.Invalid
        <div class="alert alert-danger" role="alert">Ihre Eingaben sind ungültig, bitte korrigieren!</div>
        @EndIf

        <div class="row mt-2">
            <h4>
                <small class="text-muted">@Model.Name</small>
            </h4>
        </div>
        <input type="hidden" id="Id" name="Id" value="@Model.Id">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <small id="RecipientEmailForTestEmailHelp" class="form-text text-muted">E-Mail-Empfänger der Testmail</small>
                    <input type="text" class="form-control @If.TestValidationInfo.RecipientEmailForTestEmailIsInvalid is-invalid @EndIf" id="RecipientEmailForTestEmail" name="RecipientEmailForTestEmail" value="@!Model.RecipientEmailForTestEmail" aria-describedby="RecipientEmailForTestEmailHelp" placeholder="Bitte eingeben.">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="form-group">
                    <small id="TestModeHelp" class="form-text text-muted">Testmodus</small>
                    <select name="TestMode" class="form-control" id="TestMode" Name="TestMode" placeholder="Testmodus bitte auswählen.">
                        @Each.TestModeOptions
                        <option value="@Current.Value" @If.IsSelected selected @EndIf>@Current.Name</option>
                        @EndEach
                    </select>
                </div>
            </div>
        </div>

        <div class="row" id="rowTestEmailNumber">
            <div class="col">
                <div class="form-group">
                    <small id="TestEmailNumberHelp" class="form-text text-muted">Welche E-Mail aller vorhandenen Datensätze soll getestet werden?</small>
                    <input type="number" class="form-control @If.TestValidationInfo.TestEmailNumberIsInvalid is-invalid @EndIf" id="TestEmailNumber" name="TestEmailNumber" value="@!Model.TestEmailNumber" aria-describedby="TestEmailNumberHelp" placeholder="Bitte eingeben.">
                </div>
            </div>
        </div>
    </form>
</div>

<div id="PleaseWait" name="PleaseWait" style="display:none">
    <div class="row">
        <div class="col d-flex justify-content-center" >
            <img src="/static/PleaseWait.gif" />
        </div>
    </div>
</div>

<div id="TestOutput" name="TestOutput" style="visibility:hidden">
    <div class="row">
        <div class="col-2">Email:</div>
        <div class="col-10" id="TestMaxCount" name="TestMaxCount"></div>
    </div>
    <div class="row">
        <div class="col-2">Wird gesendet:</div>
        <div class="col-10" id="IsSent" name="IsSent"></div>
    </div>
    <div class="row">
        <div class="col-2">From:</div>
        <div class="col-10" id="TestFrom" name="TestFrom"></div>
    </div>
    <div class="row">
        <div class="col-2">To:</div>
        <div class="col-10" id="TestTo" name="TestTo"></div>
    </div>
    <div class="row" id="TestCcRow" name="TestCcRow">
        <div class="col-2">Cc:</div>
        <div class="col-10" id="TestCc" name="TestCc"></div>
    </div>
    <div class="row" id="TestBccRow" name="TestBccRow">
        <div class="col-2">Bcc:</div>
        <div class="col-10" id="TestBcc" name="TestBcc"></div>
    </div>
    <div class="row" id="TestAttachmentsRow" name="TestAttachmentsRow">
        <div class="col-2">Anhänge:</div>
        <div class="col-10" id="TestAttachments" name="TestAttachments"></div>
    </div>
    <div class="row">
        <div class="col-2">Subject:</div>
        <div class="col-10" id="TestSubject" name="TestSubject"></div>
    </div>
    <div class="row">
        <div class="col" id="TestBody" name="TestBody">
            <iframe srcdoc="" id="TestBodyFrame" name="TestBodyFrame" style="width:100%;height:100%;"></iframe>
        </div>
    </div>
</div>

<script>
    function initializePage() {
        $('#TestMode').on('change', function () {
            var selectVal = $("#TestMode option:selected").val();
            // We show #rowTestEmailNumber when option 0 is selected
            if (selectVal == 0) {
                $('#rowTestEmailNumber').show();
            }
            else {
                $('#rowTestEmailNumber').hide();
            }
        });
    }

    function generateParsedHtml() {
        var orderId = $("#Id").val();
        var testEmailNo = $("#TestEmailNumber").val();
        $("#TestOutput").css("visibility", "hidden");
        $("#PleaseWait").css("display", "inherit");

        //Calculate the height of IFrame and resize
        var wh = window.innerHeight;
        var whUpper = $("#UpperSection").height();
        // 410 = height in pixels of header + footer
        var iframeHeight = wh - whUpper - 410;
        $("#TestBodyFrame").height(iframeHeight);

        $.ajax({
            url: "/Orders/GenerateTestHtml",
            data: {
                Id: orderId,
                TestEmailNumber: testEmailNo
            },
            dataType: "html",
            type: "POST",
        }).done(function (result) {
            var resultObj = JSON.parse(result);
            $("#TestBodyFrame").prop("srcdoc", resultObj.Body);
            $("#TestMaxCount").text(testEmailNo + " / " + resultObj.MaxCountOfEmails).html();
            if (resultObj.IsSent) {
                $("#IsSent").text("Ja");
            } else {
                $("#IsSent").text("Nein");
            }
            $("#TestFrom").text(resultObj.From).html();
            $("#TestTo").text(resultObj.To).html();
            $("#TestCc").text(resultObj.Cc).html();
            if (resultObj.Cc != null && resultObj.Cc != "") {
                $("#TestCcRow").css("display", "flex");
            } else {
                $("#TestCcRow").css("display", "none");
            }
            $("#TestBcc").text(resultObj.Bcc).html();
            if (resultObj.Bcc != null && resultObj.Bcc != "") {
                $("#TestBccRow").css("display", "flex");
            } else {
                $("#TestBccRow").css("display", "none");
            }
            var atts = ""
            for (i = 0; i < resultObj.AttachedFiles.length; i++) {
                atts = atts + resultObj.AttachedFiles[i].FileName + "<BR>";
            }
            $("#TestAttachments").html(atts);
            if (resultObj.AttachedFiles.length > 0) {
                $("TestAttachmentsRow").css("display", "flex");
            } else {
                $("TestAttachmentsRow").css("display", "none");
            }
            $("#TestSubject").text(resultObj.Subject).html();

            // setting the iframe height according to its inner content
            //var iframeHeight = $('#TestBodyFrame').contents().height();
            //$("#TestBodyFrame").height(iframeHeight);

            $("#PleaseWait").css("display", "none");
            $("#TestOutput").css("visibility", "visible");
        }
        );
    }
</script>
@EndSection
