@using PlexRequests.UI.Helpers
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<PlexRequests.Core.SettingModels.PlexSettings>
@Html.Partial("_Sidebar")
@{
    int port;
    if (Model.Port == 0)
    {
        port = 32400;
    }
    else
    {
        port = Model.Port;
    }
}
<div class="col-sm-8 col-sm-push-1">
    <form class="form-horizontal" method="POST" id="mainForm">
        <fieldset>
            <legend>Plex Settings</legend>

            <div class="form-group">
                <label for="Ip" class="control-label">Plex Hostname or IP</label>
                <div>
                    <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" value="@Model.Ip">
                </div>
            </div>

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

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

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

                </div>
            </div>

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

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

                </div>
                <small>If enabled we will be able to have a 100% accurate match, but we will be querying Plex for every single item in your library. So if you have a big library then this could take some time.</small>
            </div>

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

            <div class="form-group">
                <label for="authToken" class="control-label">Plex Authorization Token</label>
                <div class="">
                    <input type="text" class="form-control-custom form-control" id="authToken" name="PlexAuthToken" placeholder="Plex Auth Token" value="@Model.PlexAuthToken">
                </div>
            </div>

            <div class="form-group">
                <label for="username" class="control-label">Username and Password</label>
                <div>
                    <input type="text" class="form-control form-control-custom" id="username" name="Username" placeholder="username">
                </div>
                <br />
                <div>
                    <input type="password" class="form-control form-control-custom" id="password" name="Password" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="">
                    <button id="requestToken" class="btn btn-primary-outline">Request Token <i class="fa fa-key"></i></button>
                </div>
            </div>

            <div class="form-group">
                <div>
                    <button id="testPlex" type="submit" class="btn btn-primary-outline">Test Connectivity <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 base = '@Html.GetBaseUrl()';

        $('#testPlex').click(function (e) {
            e.preventDefault();
            var url = createBaseUrl(base, '/test/plex');
            var $form = $("#mainForm");

        	$('#spinner').attr("class", "fa fa-spinner fa-spin");
            $.ajax({
                type: $form.prop("method"),
                url: url,
                data: $form.serialize(),
                dataType: "json",
                success: function (response) {
        		$('#spinner').attr("class", "");
                    console.log(response);
                    if (response.result === true) {
                        generateNotify(response.message, "success");

        				$('#spinner').attr("class", "fa fa-check");
                        $('#authToken').val(response.authToken);
                    } else {
                        generateNotify(response.message, "warning");
        				$('#spinner').attr("class", "fa fa-times");
                    }
                },
                error: function (e) {

        		$('#spinner').attr("class", "fa fa-times");
                    console.log(e);
                    generateNotify("Something went wrong!", "danger");
                }
            });
        });

        $('#requestToken').click(function (e) {
            e.preventDefault();
            var $form = $("#mainForm");
            $.ajax({
                type: $form.prop("method"),
                url: "requestauth",
                data: $form.serialize(),
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    if (response.result === true) {
                        generateNotify("Success!", "success");
                        $('#authToken').val(response.authToken);
                    } else {
                        generateNotify(response.message, "warning");
                    }
                },
                error: function (e) {
                    console.log(e);
                    generateNotify("Something went wrong!", "danger");
                }
            });
        });

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

            var $form = $("#mainForm");
            $.ajax({
                type: $form.prop("method"),
                data: $form.serialize(),
                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");
                }
            });
        });

    });
</script>