@using PantheonRA.BackOffice.Enums

<div class="modal fade modal-clean" id="emailSettingsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row p-sm padding-bottom-none">
                        <div class="col-xs-10 no-padding">
                            <h3 class="p-l-10">@Loc.EmailSettingsForSendingAndReceiving</h3>
                        </div>
                        <div class="col-xs-2 text-right">
                            <a class="btn-transparent m-r-xs" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.EmailSettings)" title="@Loc.CheckInstructions"><i class="fas fa-question clickable-icon"></i></a>
                            <i class="fa fa-times clickable-icon" data-dismiss="modal" title="@Loc.Close"></i>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="email-settings-form">
                        <div class="row">
                            <div class="form-horizontal form-md p-l-10">
                                <input id="ClassName" name="ClassName" hidden />
                                <input id="UsePOP3Login" name="UsePOP3Login" hidden />
                                <input id="UseSMTPSend" name="UseSMTPSend" hidden />
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <label class="control-label">@Loc.ServerType</label>
                                        <select id="Service" name="Service" class="form-control custom-select ContentNoPadding" onchange="changeService()">
                                            <option value="pop3">@Loc.POP3Server</option>
                                            <option value="smtp">@Loc.SMTPServer</option>
                                            <option value="imap">@Loc.IMAPServer</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.ServerName</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control" id="Server" name="Server" placeholder="@Loc.ServerName" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3" id="portLabel">@Loc.POP3Port</label>
                                    <div class="col-xs-2">
                                        <input type="text" value="110" class="form-control" id="Port" name="Port" placeholder="@Loc.POP3Port" />
                                    </div>
                                    <label class="control-label col-xs-3 padding-left-none" id="defaultPort">(@Loc.Default 110)</label>

                                    <div class="text-right">
                                        <label class="control-label col-xs-2">@Loc.EmailTimeout</label>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="input-group">
                                            <input type="text" value="30" class="form-control" id="Timeout" name="Timeout" placeholder="@Loc.EmailTimeout" />
                                            <span class="input-group-addon">s</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.UserName</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control" id="Username" name="Username" placeholder="@Loc.UserName" />
                                    </div>
                                </div>
                                <div class="form-group" id="serialNumber-form-group">
                                    <label class="control-label col-xs-3">@Loc.Password</label>
                                    <div class="col-xs-9">
                                        <input type="password" class="form-control" id="Password" name="Password" placeholder="@Loc.Password" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.UseTLSOrSSL</label>
                                    <div class="col-xs-5 m-t-xs">
                                        <input type="checkbox" class="form-control js-switch emailSettingsSwitch" id="UseTLS" name="UseTLS" placeholder="@Loc.UseTLSOrSSL" checked />
                                    </div>

                                    <label class="control-label col-xs-2 padding-left-none">@Loc.UseSASL</label>
                                    <div class="col-xs-2 m-t-xs">
                                        <input type="checkbox" class="form-control js-switch emailSettingsSwitch" id="UseSASL" name="UseSASL" placeholder="@Loc.UseSASL" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.ForceTSL1_2</label>
                                    <div class="col-xs-4 m-t-xs">
                                        <input type="checkbox" class="form-control js-switch emailSettingsSwitch" id="ForceTLS12" name="ForceTLS12" placeholder="@Loc.ForceTSL1_2" />
                                    </div>
                                </div>
                                <div id="ehloContainer" hidden>
                                    <div class="form-group">
                                        <label class="control-label col-xs-3">@Loc.EHLO</label>
                                        <div class="col-xs-4 m-t-xs">
                                            <input type="checkbox" class="form-control js-switch emailSettingsSwitch" id="UseEHLO" name="UseEHLO" placeholder="@Loc.EHLO" />
                                        </div>
                                    </div>
                                </div>
                                <div id="outboxInboxContainer" hidden>
                                    <div class="form-group">
                                        <label class="control-label col-xs-3">@Loc.Outbox</label>
                                        <div class="col-xs-9">
                                            <input type="text" class="form-control" id="OutBox" name="OutBox" placeholder="@Loc.Outbox" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-3">@Loc.Inbox</label>
                                        <div class="col-xs-9">
                                            <input type="text" class="form-control" id="InBox" name="InBox" placeholder="@Loc.Inbox" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveEmailSettingsBtn" onclick="saveEmailSettings()"><i class="fa fa-save m-r-xs"></i>@Loc.Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var elems = Array.prototype.slice.call(document.querySelectorAll('.emailSettingsSwitch'));
        elems.forEach(function (html) {
            var switchery = new Switchery(html, { size: 'small' });
        });
    });

    function openEmailSettingsModal() {
        $("#email-settings-form")[0].reset();

        changeService();
        $('#emailSettingsModal').modal('show');

        $('#Service').on("change", function () {
            changeService()
        });
    }

    function displayServiceData() {
        if ($("#Service").val() === "pop3") {
            $("#portLabel").text("@Loc.POP3Port");
            $("#testBtnText").text("@Loc.TestPOP3");
            $("#defaultPort").text("(@Loc.Default 110)");
            $("#ehloContainer").attr("hidden", true);
            $("#outboxInboxContainer").attr("hidden", true);
        } else if ($("#Service").val() === "smtp") {
            $("#portLabel").text("@Loc.SMTPPort");
            $("#testBtnText").text("@Loc.TestSTMP");
            $("#defaultPort").text("(@Loc.Default 25)");
            $("#ehloContainer").attr("hidden", false);
            $("#outboxInboxContainer").attr("hidden", true);
        } else if ($("#Service").val() === "imap") {
            $("#portLabel").text("@Loc.IMAPPort");
            $("#testBtnText").text("@Loc.TestIMAP");
            $("#defaultPort").text("(@Loc.Default 993)");
            $("#ehloContainer").attr("hidden", true);
            $("#outboxInboxContainer").attr("hidden", false);
        }
    }

    function changeService() {
        $.get("@Url.Action("GetMailData", "Users")" + "?service=" + $("#Service").val(), function (response) {
            if (response.Error) {
                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    type: "alert",
                    text: response.Error,
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: "@Loc.Confirm",
                            closeOnAction: true,
                            type: 'primary'
                        }
                    ]
                });
                return;
            }

            displayServiceData();
            $("#ClassName").val(response.ClassName);
            $("#Server").val(response.Server);
            $("#Port").val(response.Port);
            $("#Username").val(response.Username);
            $("#Password").val(response.Password);
            $("#Timeout").val(response.Timeout ? response.Timeout / 1000 : 30);
            $("#UseSASL").prop("checked", response.UseSASL);
            $("#ForceTLS12").prop("checked", response.ForceTLS12);
            $("#UseTLS").prop("checked", response.UseTLS);
            $("#UseEHLO").prop("checked", response.UseEHLO);
            $("#UseSMTPSend").val(response.UseSMTPSend);
            $("#UsePOP3Login").val(response.UsePOP3Login);
            $("#OutBox").val(response.OutBox);
            $("#InBox").val(response.InBox);
        });
    }

    function testPOP3() {

    }

    function saveEmailSettings() {
        var formData = $("#email-settings-form").serializeArray();
        formData = changeFormDataValue(formData, 'Timeout', $("#Timeout").val() ? toNumber($("#Timeout").val()) * 1000 : 0);
        formData = changeFormDataValue(formData, 'UseSASL', $("#UseSASL").is(":checked"));
        formData = changeFormDataValue(formData, 'ForceTLS12', $("#ForceTLS12").is(":checked"));
        formData = changeFormDataValue(formData, 'UseTLS', $("#UseTLS").is(":checked"));
        formData = changeFormDataValue(formData, 'UseEHLO', $("#UseEHLO").is(":checked"));
        formData = changeFormDataValue(formData, 'UsePOP3Login', $("#UsePOP3Login").val() === "on");
        formData = changeFormDataValue(formData, 'UseSMTPSend', $("#UseSASL").val() === "on");

        $("#saveEmailSettingsBtn").find("i").addClass("fa-spinner fa-spin fa-fw");
        $.post('@Url.Action("PostMailData", "Users")', formData)
            .done(function (response) {
                $("#saveEmailSettingsBtn").find("i").removeClass("fa-spinner fa-spin fa-fw");

                if (response && response.Result === "true")
                    $().customModal({
                        destroyOnClose: true,
                        showCloseButton: true,
                        type: "success",
                        text: "@Loc.SettingsSuccessfullyUpdated",
                        buttons: [
                            {
                                icon: 'fa fa-check',
                                text: "@Loc.Confirm",
                                closeOnAction: true,
                                type: 'primary'
                            }
                        ]
                    });
            });
    }
</script>