{{include("header")/}}


<div class="text-center mb-4">
    <h2>Settings</h2>
</div>


<div class="row justify-content-md-center">
    <div class="col-md-7 mw-col8">

        <!-- Settings Card -->
        <div class="card card-accent-danger">
            <div class="card-header font-weight-bold" style="border-bottom: 0px;">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-item nav-link {{activeTab=='global'|isActive}}" id="nav-global-tab" data-toggle="tab" href="#nav-global"
                            role="tab" aria-controls="nav-global" aria-selected="true">Global</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link {{activeTab=='fxserver'|isActive}}" id="nav-fxserver-tab" data-toggle="tab" href="#nav-fxserver"
                            role="tab" aria-controls="nav-fxserver" aria-selected="true">FXServer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link {{activeTab=='monitor'|isActive}}" id="nav-monitor-tab" data-toggle="tab" href="#nav-monitor"
                            role="tab" aria-controls="nav-monitor" aria-selected="true">Monitor/Restarter</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link {{activeTab=='discord'|isActive}}" id="nav-discord-tab" data-toggle="tab" href="#nav-discord"
                            role="tab" aria-controls="nav-discord" aria-selected="true">Discord</a>
                    </li>
                </ul>
            </div>

            <div class="card-body settings-card">
                <div class="tab-content" id="nav-tabContent">

                    <!-- Global Tab -->
                    <div class="tab-pane fade {{activeTab=='global'|isActive|tShow}}" id="nav-global" role="tabpanel"
                        aria-labelledby="nav-global-tab">
                        <div class="form-group row">
                            <label for="frmGlobal-serverName" class="col-sm-3 col-form-label">
                                Server Name
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmGlobal-serverName"
                                    value="{{global.serverName|undef}}" maxlength="24" placeholder="server name" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    A <strong>short</strong> server name to be used in txAdmin interface and Chat/Discord messages.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmGlobal-publicIP" class="col-sm-3 col-form-label">
                                Public IP
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmGlobal-publicIP"
                                    value="{{global.publicIP|undef}}" maxlength="32" placeholder="123.123.123.123" {{disableWrite}}>
                                    <span class="form-text text-muted">
                                        You can set this to be your public IP or a domain name. <br>
                                        This will only be used for discord messages.
                                    </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmGlobal-language" class="col-sm-3 col-form-label">
                                Language
                            </label>
                            <div class="col-sm-9">
                                <select class="form-control" id="frmGlobal-language" {{disableWrite}}>
                                    <option value="en" {{global.language=='en'|isSelected}}>English (default)</option>

                                    <option value="ar" {{global.language=='ar'|isSelected}}>Arabic</option>
                                    <option value="cs" {{global.language=='cs'|isSelected}}>Czech</option>
                                    <option value="da" {{global.language=='da'|isSelected}}>Danish</option>
                                    <option value="de" {{global.language=='de'|isSelected}}>German</option>
                                    <option value="es" {{global.language=='es'|isSelected}}>Spanish</option>
                                    <option value="fi" {{global.language=='fi'|isSelected}}>Finnish</option>
                                    <option value="fr" {{global.language=='fr'|isSelected}}>French</option>
                                    <option value="hu" {{global.language=='hu'|isSelected}}>Hungarian</option>
                                    <option value="lv" {{global.language=='lv'|isSelected}}>Latvian</option>
                                    <option value="nl" {{global.language=='nl'|isSelected}}>Dutch</option>
                                    <option value="pl" {{global.language=='pl'|isSelected}}>Polish</option>
                                    <option value="pt_BR" {{global.language=='pt_BR'|isSelected}}>Portuguese (Brazil)</option>
                                    <option value="ro" {{global.language=='ro'|isSelected}}>Romanian</option>
                                    <option value="ru" {{global.language=='ru'|isSelected}}>Russian</option>
                                    <option value="th" {{global.language=='th'|isSelected}}>Thai</option>
                                    <option value="tr" {{global.language=='tr'|isSelected}}>Turkish</option>
                                    <option value="zh" {{global.language=='zh'|isSelected}}>Chinese</option>

                                    <option value="custom" {{global.language=='custom'|isSelected}}>Custom (read the documentation)</option>
                                </select>
                                <span class="form-text text-muted">
                                    The language to use on Chat/Discord messages. <br>
                                    <b>Note:</b> For the Custom option, read the documentation.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmGlobal-verbose" class="col-sm-3 col-form-label">Verbose</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmGlobal-verbose"
                                        {{global.verbose}} {{disableWrite}}>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    By enabling verbosity you will see more detailed information in the terminal. <br>
                                    <b>Note:</b> Do not enable this unless you are troubleshooting errors.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmGlobal-save" {{disableWrite}}>
                                <i class="icon-check"></i> Save Global Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Global Tab -->

                    <!-- FXServer Tab -->
                    <div class="tab-pane fade {{activeTab=='fxserver'|isActive|tShow}}" id="nav-fxserver" role="tabpanel" aria-labelledby="nav-fxserver-tab">
                        <div class="form-group row">
                            <label for="frmFXServer-basePath" class="col-sm-3 col-form-label">Server Data Folder
                                <span class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmFXServer-basePath" value="{{fxserver.basePath|undef}}"
                                    placeholder="C:/Users/Admin/Desktop/server01" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    The folder that <strong>contains</strong> the <code>resources</code> and
                                    <code>cache</code> folders, usually it's here that you put your
                                    <code>server.cfg</code>.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-cfgPath" class="col-sm-3 col-form-label">CFG File Path
                                <span class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmFXServer-cfgPath" value="{{fxserver.cfgPath|undef}}"
                                    placeholder="C:/Users/Admin/Desktop/server01/server.cfg" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    The path to your server config file, usually named <code>server.cfg</code>. <br>
                                    This can either be absolute, or relative to the Server Data folder.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-commandLine" class="col-sm-3 col-form-label">
                                Additional Arguments
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmFXServer-commandLine" value="{{fxserver.commandLine|undef}}"
                                    placeholder="+set onesync_enableInfinity 1" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    Additional command-line arguments to pass to the FXServer instance.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-onesync" class="col-sm-3 col-form-label">OneSync</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmFXServer-onesync"
                                        {{fxserver.onesync|undef}} {{disableWrite}}>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Required if your server has more than 32 slots.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-autostart" class="col-sm-3 col-form-label">Autostart</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmFXServer-autostart"
                                        {{fxserver.autostart|undef}} {{disableWrite}}>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Start the server automatically after <strong>txAdmin</strong> starts.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-quiet" class="col-sm-3 col-form-label">Quiet</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmFXServer-quiet"
                                        {{fxserver.quiet|undef}} {{disableWrite}}>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Do not print FXServer's output to the terminal. You will still be able to use the
                                    Live Console.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmFXServer-save" {{disableWrite}}>
                                <i class="icon-check"></i> Save FXServer Settings
                            </button>
                        </div>
                    </div>
                    <!-- /FXServer Tab -->
                    
                    <!-- Monitor Tab -->
                    <div class="tab-pane fade {{activeTab=='monitor'|isActive|tShow}}" id="nav-monitor" role="tabpanel" aria-labelledby="nav-monitor-tab">
                        <div class="form-group row">
                            <label for="frmMonitor-schedule" class="col-sm-3 col-form-label">Scheduled Restarts</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmMonitor-schedule" value="{{monitor.restarter.schedule|undef}}"
                                    placeholder="05:00, 13:00" {{disableWrite}}>
                                <span class="form-text text-danger" id="frmMonitor-timezoneAlert"></span>
                                <span class="form-text text-muted">
                                    At which times of day to restart the server. Leave it blank to disable this feature. <br>
                                    The time MUST be in the 24-hour format with two digits for hours as well as
                                    minutes (<code>HH:MM</code>) and the times should be separated by commas. <br>
                                    <strong>Note:</strong> Make sure your schedule matches your server time and not your local time.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmMonitor-save" {{disableWrite}}>
                                <i class="icon-check"></i> Save Monitor/Restarter Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Monitor Tab -->

                    <!-- Discord Tab -->
                    <div class="tab-pane fade {{activeTab=='discord'|isActive|tShow}}" id="nav-discord" role="tabpanel" aria-labelledby="nav-discord-tab">
                        <div class="form-group row">
                            <label for="frmDiscord-enabled" class="col-sm-3 col-form-label">Enable Bot</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmDiscord-enabled"
                                        {{discord.enabled|undef}} {{disableWrite}}>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Enable Discord Integration.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-token" class="col-sm-3 col-form-label">Token <span
                                    class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmDiscord-token" value="{{discord.token|undef}}"
                                    maxlength="96" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    To get a token and the bot to join your server, follow these two guides:
                                    <a href="https://discordjs.guide/preparations/setting-up-a-bot-application.html"
                                        target="_blank" rel="noopener noreferrer">Setting up a bot application</a> and
                                    <a href="https://discordjs.guide/preparations/adding-your-bot-to-servers.html">Adding
                                        your bot to servers</a>.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-announceChannel" class="col-sm-3 col-form-label">Announcements <br>Channel ID</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" id="frmDiscord-announceChannel"
                                    value="{{discord.announceChannel|undef}}" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    The ID of the channel to send Announcements (eg server restarts). <br>
                                    Leave it blank to disable this feature. <br>
                                    To get the channel ID, go to Discord's settings and
                                    <a href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png"
                                    target="_blank" > enable developer mode</a>, then right-click on the channel name and select "Copy ID".
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-statusCommand" class="col-sm-3 col-form-label">
                                Status Command
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmDiscord-statusCommand" value="{{discord.statusCommand|undef}}"
                                    placeholder="/status" {{disableWrite}}>
                                <span class="form-text text-muted">
                                    The command that will trigger a status message from the bot.
                                </span>
                            </div>
                        </div>


                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmDiscord-save" {{disableWrite}}>
                                <i class="icon-check"></i> Save Discord Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Discord Tab -->

                </div>
            </div>


        </div>

    </div>
</div>


{{include("footer")/}}


<script>
    //============================================== General
    let serverTimezone = "{{serverTimezone}}";
    let browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    if(serverTimezone !== browserTimezone){
        let msg = `Server's timezone: <b>${serverTimezone}</b> <br>
            Your timezone: <b>${browserTimezone}</b> <br>
            Make sure to adjust the times to match your expectations.`;
        $('#frmMonitor-timezoneAlert').html(msg);
    }


    //============================================== Global Settings
    $('#frmGlobal-save').click(function () {
        let data = {
            serverName: $('#frmGlobal-serverName').val().trim(),
            publicIP: $('#frmGlobal-publicIP').val().trim(),
            language: $('#frmGlobal-language').val(),
            verbose: $('#frmGlobal-verbose').is(':checked')
        }
        if (!data.serverName.length || !data.publicIP.length) {
            var notify = $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
            return;
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/settings/save/global',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                notify.update('progress', 0);
                notify.update('type', data.type);
                notify.update('message', data.message);
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    });


    //============================================== FXServer Settings
    $('#frmFXServer-save').click(function () {
        let data = {
            basePath: $('#frmFXServer-basePath').val().trim(),
            cfgPath: $('#frmFXServer-cfgPath').val().trim(),
            commandLine: $('#frmFXServer-commandLine').val().trim(),
            onesync: $('#frmFXServer-onesync').is(':checked'),
            autostart: $('#frmFXServer-autostart').is(':checked'),
            quiet: $('#frmFXServer-quiet').is(':checked')
        }
        if (!data.basePath.length || !data.cfgPath.length) {
            var notify = $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
            return;
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/settings/save/fxserver',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                notify.update('progress', 0);
                notify.update('type', data.type);
                notify.update('message', data.message);
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    });


    //============================================== Monitor Settings
    $('#frmMonitor-save').click(function () {
        let data = {
            schedule: $('#frmMonitor-schedule').val().trim()
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/settings/save/monitor',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                notify.update('progress', 0);
                notify.update('type', data.type);
                notify.update('message', data.message);
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    });


    //============================================== Discord Settings
    $('#frmDiscord-save').click(function () {
        let data = {
            enabled: ($('#frmDiscord-enabled').is(':checked') === true),
            token: $('#frmDiscord-token').val().trim(),
            announceChannel: $('#frmDiscord-announceChannel').val().trim(),
            statusCommand: $('#frmDiscord-statusCommand').val().trim()
        };
        if (data.enabled && (!data.token.length || !data.statusCommand.length)) {
            var notify = $.notify({ message: 'The fields with "*" are required when the bot is enabled.' }, { type: 'warning' });
            return;
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/settings/save/discord',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                notify.update('progress', 0);
                notify.update('type', data.type);
                notify.update('message', data.message);
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    });

</script>
