{{include("header")/}}

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


<div class="row justify-content-md-center">
    <div class="col-md-7 mw-col6">
        <div class="card card-accent-primary">
            <div class="card-header float-left">
                <span style="font-size: large">All Resources</span>
                <button class="btn btn-sm btn-primary float-right" type="button" id="btnRefresh" {{disableActions}}>
                    <i class="icon-refresh"></i> Reload & Refresh
                </button>
                <input class="form-control" type="text" name="resource" id="resourceInput" onkeyup="findResource()"
                    placeholder="Find resource by name..." style="margin-top: 1em;">
                <div class="row justify-content-md-center">
                    <span class="form-text text-muted" style="margin-top: calc(0.3rem + 2px)">
                        Default resources:
                    </span>
                    &nbsp;&nbsp;
                    <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                        <input type="checkbox" id="defResCheckbox" class="c-switch-input">
                        <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-md-center">
    <div class="col-sm-12 col-lg-7 mw-col8">
        <div class="card card-accent-primary table-responsive-sm">
            <table class="table table-hover table-outline mb-0">
                {{foreach(options.resGroups)}}
                    <thead class="thead-light" id="resList-card-{{@this.divName}}">
                        <tr>
                            <th class="text-break text-center" colspan="2">{{@this.subPath}}</th>
                        </tr>
                    </thead>
                    <tbody id="resList-cardBody-{{@this.divName}}"
                        aria-labelledby="resList-cardHeader-{{@this.divName}}">
                        {{each(@this.resources)}}
                        <tr id="res-{{@this.divName}}">
                            <td>
                                <strong style="word-wrap: break-word;">{{@this.name}}</strong>
                                {{if(@this.version!='')}}
                                    <em>{{@this.version}}</em>
                                {{/if}}
                                {{if(@this.author!='')}}
                                    by {{@this.author}}
                                {{/if}}
                                {{if(@this.description!='')}}
                                    <br>
                                    {{@this.description}}
                                {{/if}}
                            </td>

                            <td class="tableActions">
                                {{if(@this.status=='started')}}
                                <a class="btn btn-sm btn-outline-warning d-block d-md-inline-block mr-md-1 mb-1 mb-md-0 {{disableActions}}"
                                    href="#"
                                    onclick="btnCommand('ensure_res', '{{@this.name}}'); event.preventDefault();" {{disableActions}}>
                                    Restart
                                </a>
                                <a class="btn btn-sm btn-outline-danger d-block d-md-inline-block m-0 {{disableActions}}"
                                    href="#"
                                    onclick="btnCommand('stop_res', '{{@this.name}}'); event.preventDefault();" {{disableActions}}>
                                    Stop
                                </a>
                                {{#else}}
                                <a class="btn btn-sm btn-outline-success d-block d-md-inline-block {{disableActions}}"
                                    href="#"
                                    onclick="btnCommand('ensure_res', '{{@this.name}}'); event.preventDefault();" {{disableActions}}>
                                    Start
                                </a>
                                {{/if}}
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                {{/foreach}}
            </table>
        </div>
    </div>
</div>


{{include("footer")/}}




<script>
    //NOTE: breaking multiple lines because squirrelly is not respecting LF as line endings.
    //Change squirrelly tag: {{tags(--,--)/}}
    //intentionally 'blank' line
    const resGroupsJS = --resGroupsJS | safe--
    //Changing it back: --tags({{,}})/--
    //intentionally 'blank' line
    const defaultResources = [
        "webadmin",
        "race-test",
        "race",
        "channelfeed",
        "irc",
        "obituary-deaths",
        "obituary",
        "playernames",
        "mapmanager",
        "baseevents",
        "chat",
        "hardcap",
        "rconlog",
        "scoreboard",
        "sessionmanager",
        "spawnmanager",
        "fivem-map-hipster",
        "fivem-map-skater",
        "fivem",
        "fivem-awesome1501",
        "webpack",
        "yarn",
        "betaguns",
        "gameInit",
        "keks",
        "runcode",
    ]


    //============================================== Refresh List
    $('#btnRefresh').click(function () {
        var notify = $.notify({ message: '<p class="text-center">Executing Command...</p>' }, {});
        $.ajax({
            type: "POST",
            url: '/fxserver/commands',
            timeout: timeoutLong,
            data: { action: 'refresh_res', parameter: '' },
            success: function (data) {
                if(data.type !== 'danger'){
                    window.location.reload(true);
                }else{
                    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);
            }
        });
    })


    //============================================== Refresh button
    function btnCommand(action, parameter) {
        var notify = $.notify({ message: '<p class="text-center">Executing Command...</p>' }, {});
        $.ajax({
            type: "POST",
            url: '/fxserver/commands',
            timeout: timeoutMedium,
            data: { action, parameter },
            success: function (data) {
                if(data.type !== 'danger'){
                    window.location.reload(true);
                }else{
                    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);
            }
        });
    }

    //============================================== Search function
    function findResource() {
        var input, filter;
        input = document.getElementById("resourceInput");
        filter = input.value.toUpperCase();

        resGroupsJS.forEach(folder => {
            let hidden = 0;
            folder.resources.forEach(resource => {
                if (resource.name.toUpperCase().indexOf(filter) > -1) {
                    $(`#res-${resource.divName}`).show();
                } else {
                    hidden++;
                    $(`#res-${resource.divName}`).hide();
                }
            });
            if (folder.resources.length == hidden) {
                $(`#resList-card-${folder.divName}`).hide();
            } else {
                $(`#resList-card-${folder.divName}`).show();
            }
        });
    }

    //============================================== Hide defaults
    $('#defResCheckbox').click(function () {
        hideDefaultResources();
    });

    function hideDefaultResources() {
        if ($('#defResCheckbox').is(':checked')) {
            defaultResources.forEach(defRes => {
                $(`#res-${defRes}`).show();
                $(`#res-${defRes}`).removeClass("defaultRes");
            })
        } else {
            defaultResources.forEach(defRes => {
                $(`#res-${defRes}`).hide();
                $(`#res-${defRes}`).addClass("defaultRes");
            })
        }

        resGroupsJS.forEach(folder => {
            let hidden = 0;
            folder.resources.forEach(resource => {
                if ($(`#res-${resource.divName}`).hasClass("defaultRes")) {
                    hidden++;
                }
            });

            if (folder.resources.length == hidden) {
                $(`#resList-card-${folder.divName}`).hide();
            } else {
                $(`#resList-card-${folder.divName}`).show();
            }
        });
    }

    $(function () {
        hideDefaultResources();
    });
</script>
