@using System.Linq
@using PlexRequests.Core.Models
@using PlexRequests.UI.Helpers
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<PlexRequests.Core.SettingModels.EmailNotificationSettings>
@Html.Partial("_Sidebar")
@{
    int port;
    if (Model.EmailPort == 0)
    {
        port = 25;
    }
    else
    {
        port = Model.EmailPort;
    }
}
<div class="col-sm-8 col-sm-push-1">
    <form class="form-horizontal" method="POST" id="mainForm">
        <fieldset>
            <legend>Email Notifications</legend>
            <div class="form-group">
                <div class="checkbox">

                    @if (Model.Enabled)
                    {
                        <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                    }
                    else
                    {
                        <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                    }

                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">

                    @if (Model.EnableUserEmailNotifications)
                    {
                        <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications" checked="checked"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
                    }
                    else
                    {
                        <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
                    }

                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">

                    @if (Model.Authentication)
                    {
                        <input type="checkbox" id="Authentication" name="Authentication" checked="checked"><label for="Authentication">Enable SMTP Authentication</label>
                    }
                    else
                    {
                        <input type="checkbox" id="Authentication" name="Authentication"><label for="Authentication">Enable SMTP Authentication</label>
                    }

                </div>
            </div>
            <small>Please note that if user notifications is enabled, the email will get sent with the SMTP set-up below.</small>
            <div class="form-group">
                <label for="EmailHost" class="control-label">SMTP Host name or IP</label>
                <div class="">
                    <input type="text" class="form-control form-control-custom " id="EmailHost" name="EmailHost" placeholder="localhost" value="@Model.EmailHost">
                </div>
            </div>

            <div class="form-group">
                <label for="EmailPort" class="control-label">SMTP Port</label>

                <div class="">
                    <input type="text" class="form-control form-control-custom " id="EmailPort" name="EmailPort" placeholder="Port Number" value="@port">
                </div>
            </div>


            <div class="form-group">
                <label for="EmailSender" class="control-label">Email Sender</label>
                <div>
                    <input type="text" class="form-control form-control-custom " id="EmailSender" name="EmailSender" value="@Model.EmailSender">
                </div>
            </div>
            <div class="form-group">
                <label for="RecipientEmail" class="control-label">Email Recipient</label>
                <div>
                    <input type="text" class="form-control form-control-custom " id="RecipientEmail" name="RecipientEmail" value="@Model.RecipientEmail">
                </div>
            </div>



            <div class="form-group">
                <label for="EmailUsername" class="control-label">Username</label>
                <div>
                    <input type="text" class="form-control form-control-custom " id="EmailUsername" name="EmailUsername" value="@Model.EmailUsername">
                </div>
            </div>

            <div class="form-group">
                <label for="EmailPassword" class="control-label">Password</label>
                <div>
                    <input type="password" class="form-control form-control-custom " id="EmailPassword" name="EmailPassword" value="@Model.EmailPassword">
                </div>
            </div>

            @* <!--Accordion Item-->
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    @for (var i = 0; i < Model.Message.Count; i++)
                    {
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="@(i)headingOne">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#@(i)collapseOne" aria-controls="@(i)collapseOne">
                                    @Model.Message[i].NotificationType.ToString()
                                </a>
                            </h4>
                        </div>
                        <div id="@(i)collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="@(i)headingOne">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="@(Model.Message[i])" class="control-label"> @Model.Message[i].NotificationType.ToString() Subject</label>
                                    <div>
                                        <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Subject)" name="Message[@(i)].Subject" value="@(Model.Message[i].Subject)">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="@(Model.Message[i].Body)" class="control-label">@Model.Message[i].NotificationType.ToString() Body</label>
                                    <div>
                                        <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Body)" name="Message[@(i)].Body" value="@(Model.Message[i].Body)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    }
                </div>*@

            <div class="form-group">
                <div>
                    <button id="testEmail" type="submit" class="btn btn-primary-outline">Test <div id="spinner"></div></button>
                </div>
            </div>

            <div class="form-group">
                <div>
                    <button id="save" type="submit" class="btn btn-primary-outline">Submit</button>
                </div>
            </div>
        </fieldset>

    </form>
</div>

<script>
    $(function () {

        var auth = $('#Authentication').prop('checked');
        changeUsernameAndPassword(auth);


        $("#Authentication")
          .change(function () {
              auth = $('#Authentication').prop('checked');
              changeUsernameAndPassword(auth);
          });

        var base = '@Html.GetBaseUrl()';
        $('#save').click(function (e) {
            e.preventDefault();
            var port = $('#EmailPort').val();
            if (isNaN(port)) {
                generateNotify("You must specify a valid Port.", "warning");
                return;
            }

            var $form = $("#mainForm");
            var data = $form.serialize();

            $.ajax({
                type: $form.prop("method"),
                data: data,
                url: $form.prop("action"),
                dataType: "json",
                success: function (response) {
                    if (response.result === true) {
                        generateNotify(response.message, "success");
                    } else {
                        generateNotify(response.message, "warning");
                    }
                },
                error: function (e) {
                    console.log(e);
                    generateNotify("Something went wrong!", "danger");
                }
            });
        });

        $('#testEmail').click(function (e) {
            $('#spinner').attr("class", "fa fa-spinner fa-spin");

            var url = createBaseUrl(base, '/admin/testemailnotification');
            e.preventDefault();
            var port = $('#EmailPort').val();
            if (isNaN(port)) {
                generateNotify("You must specify a valid Port.", "warning");
                return;
            }
            var $form = $("#mainForm");
            $.ajax({
                type: $form.prop("method"),
                data: $form.serialize(),
                url: url,
                dataType: "json",
                success: function (response) {
                    if (response.result === true) {
                        $('#spinner').attr("class", "fa fa-check");
                        generateNotify(response.message, "success");
                    } else {
                        $('#spinner').attr("class", "fa fa-times");
                        generateNotify(response.message, "warning");
                    }
                },
                error: function (e) {
                    console.log(e);
                    $('#spinner').attr("class", "fa fa-times");
                    generateNotify("Something went wrong!", "danger");
                }
            });
        });
        function changeUsernameAndPassword(checked) {
            var $userName = $('#EmailUsername');
            var $password = $('#EmailPassword');
            if (!checked) {
                disableElement($userName);
                disableElement($password);
            } else {
                enableElement($userName);
                enableElement($password);
            }
        };

        function disableElement(element) {
            element.attr('disabled', 'disabled');
            element.removeClass('form-control-custom');
            element.addClass('form-control-custom-disabled');
        }

        function enableElement(element) {
            element.removeAttr('disabled', 'disabled');
            element.addClass('form-control-custom');
            element.removeClass('form-control-custom-disabled');
        }


    });
</script>