@using PlexRequests.UI.Helpers
@Html.Partial("_Sidebar")
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<PlexRequests.Core.SettingModels.LandingPageSettings>
@Html.LoadDateTimePickerAsset()
<div class="col-sm-8 col-sm-push-1">
    <form class="form-horizontal" method="POST" id="mainForm">
        <fieldset>
            <legend>Landing Page Settings</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>
                <small>If enabled then all users will be redirected to the landing page instead of the login page.</small>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    @if (Model.BeforeLogin)
                    {
                        <input type="checkbox" id="BeforeLogin" name="BeforeLogin" checked="checked"><label for="BeforeLogin">Show before the login</label>
                    }
                    else
                    {
                        <input type="checkbox" id="BeforeLogin" name="BeforeLogin"><label for="BeforeLogin">Show before the login</label>
                    }
                </div>
                <small>If enabled then this will show the landing page before the login page, if this is disabled the user will log in first and then see the landing page.</small>
            </div>

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

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

                </div>
            </div>

            <p class="form-group">Notice Message</p>
            <div class="form-group">
                <div>
                    <input type="text" class="form-control-custom form-control " id="NoticeMessage" name="NoticeMessage" placeholder="e.g. Plex will be down for maintaince" value="@Model.NoticeMessage">
                </div>
            </div>

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

                    @if (Model.EnabledNoticeTime)
                    {
                        <input type="checkbox" id="EnabledNoticeTime" name="EnabledNoticeTime" checked="checked"><label for="EnabledNoticeTime">Enable a time limit for the notices</label>
                    }
                    else
                    {
                        <input type="checkbox" id="EnabledNoticeTime" name="EnabledNoticeTime"><label for="EnabledNoticeTime">Enable a time limit for the notices</label>
                    }

                </div>
            </div>



            <div class="form-group">
                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" value="@Model.NoticeStart"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>

                </div>
            </div>

            <div class="form-group">
                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" value="@Model.NoticeEnd"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>

                </div>

            </div>



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

<script>
    $(function () {
        var $startDate = $('#startDate').datetimepicker();
        var $endDate = $('#endDate').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#startDate").on("dp.change", function (e) {
            $('#endDate').data("DateTimePicker").minDate(e.date);
        });
        $("#endDate").on("dp.change", function (e) {
            $('#startDate').data("DateTimePicker").maxDate(e.date);
        });

        $('#save').click(function (e) {
            var start = '';
            var end = '';
            if ($startDate.data("DateTimePicker").date()) {
                start = $startDate.data("DateTimePicker").date().toISOString();
            }
            if ($endDate.data("DateTimePicker").date()) {
                end = $endDate.data("DateTimePicker").date().toISOString();
            }

            e.preventDefault();

            var $form = $("#mainForm");

            var data = $form.serialize();
            data = data + "&noticeStart=" + start + "&noticeEnd=" + end;

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

    });
</script>