@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>
            @*<input id="advancedToggle" type="checkbox"/>*@ @*TODO*@
            <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">
                <div class="checkbox">

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

                </div>
                <small>
                    If enabled then we will lookup all episodes on your Plex server and store them in the local database. This will stop episode requests that already exist on Plex (that might not be in Sonarr).
                    Please be aware that this is a very resource intensive process and while the Plex Episode Cacher job is running the application may appear slow (Depending on the size of your Plex library).
                </small>
            </div>

            <div class="form-group">
                <label for="SubDir" class="control-label">Plex Base Url</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="MachineIdentifier" class="control-label">Machine Identifier</label>
                <div class="">
                    <input type="text" class="form-control-custom form-control" id="MachineIdentifier" name="MachineIdentifier" value="@Model.MachineIdentifier">
                </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 () {

        $("#advancedToggle").bootstrapSwitch();

        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");
                    } 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");
                }
            });
        });

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

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

                        $('#dbSpinner').attr("class", "fa fa-check");
                    } else {
                        generateNotify(response.message, "warning");
                        $('#dbSpinner').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>