{% extends "base-site.html" %}

{% block title %} Dashboard {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
    <style>
        .status {
            height: 20px;
            width: 20px;
        }
    </style>
{% endblock stylesheets %}

{% block content %}

    {% if data['status'] == 1 and data['data']['status'] == 1 %}
    <div class="row">
        <div class="col-md-12">
            <div class="card card-profile">
                <div class="card-body">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xl-3 col-lg-4 col-md-5">
                                    <img src="{{ data['data']['icon'] }}png" style="height: auto; width: 300px; margin: auto; display: block;" onmouseover="playGif(this)" onmouseout="stopGif(this)" data-is-animated="{{ data['data']['animated'] }}" data-src-url="{{ data['data']['icon'] }}">
                                </div>
                                <div class="col-xl-8 col-lg-8 col-md-7">
                                    <h2 class="card-title">{{ data['data']['name'] }}</h2>
                                    <h5 class="card-category text-gray">Created on {{ data['data']['created'] }}
                                        {% if data['data']['joined'] %}
                                            | Joined on {{ data['data']['joined'] }}
                                        {% endif %}
                                    </h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <h4>
                                                {{ data['data']['members'] }} Members | {{ data['data']['humans'] }} Humans | {{ data['data']['bots'] }} Bots<br>
                                                <img src="/static/assets/img/online.png" class="status"> {{ data['data']['online'] }}<br>
                                                <img src="/static/assets/img/idle.png" class="status"> {{ data['data']['idle'] }}<br>
                                                <img src="/static/assets/img/dnd.png" class="status"> {{ data['data']['dnd'] }}<br>
                                                <img src="/static/assets/img/offline.png" class="status"> {{ data['data']['offline'] }}<br>
                                            </h4>
                                        </div>
                                        <div class="col-6">
                                            <h4>
                                                <b>Owner</b>: {{ data['data']['owner'] }}<br>
                                                <b>Verification Level</b>: {{ data['data']['vl'] }}<br>
                                                <b>Region</b>: {{ data['data']['region'] }}<br>
                                                <b>Server ID</b>: {{ data['data']['id'] }}
                                            </h4>
                                        </div>
                                    </div>
                                    <h4>Your permissions: {{ data['data']['perms'] }}</h4>
                                    {% if data['data']['roleswarn'] %}
                                        <div class="alert alert-danger">
                                            <span><b> Warning - </b> You haven't registered any roles with the dashboard.  Please use <code>[p]dashboard roles create</code> to allow other people to use it.</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# Permission groups #}
        {% if 'botsettings' in data['data']['permslist'] %}
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-profile">
                        <div class="card-header">
                            <h6 class="card-category text-gray">Guild-specific bot settings</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="nav nav-pills flex-column" id="commandtabs" role="tablist" aria-orientation="vertical">
                                        <a class="nav-link taboption" id="serverprefix-tab" data-toggle="pill" href="#serverprefix" role="tab" aria-controls="serverprefix" aria-selected="false">Server prefix</a>
                                        <a class="nav-link taboption" id="adminroles-tab" data-toggle="pill" href="#adminroles" role="tab" aria-controls="adminroles" aria-selected="false">Admin roles</a>
                                        <a class="nav-link taboption" id="modroles-tab" data-toggle="pill" href="#modroles" role="tab" aria-controls="modroles" aria-selected="false">Mod roles</a>
                                    </div>
                                </div>
                                <div class="col-md-10">
                                    <div class="tab-content" id="botsettingTabContent">
                                        <!-- Start server prefix -->
                                        <div class="tab-pane fade" id="serverprefix" role="tabpanel" aria-labelledby="serverprefix-tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <h4 class="card-title">Set server prefix</h4>
                                                                    <p>Sets {{ botname }}'s server prefix(es)</p>
                                                                    <p>Syntax: <code><span class="prefix">{{ prefix[0] }}</span>set serverprefix</code></p>
                                                                </div>
                                                                <div class="col-sm-6 text-left">
                                                                    <div class="dropdown float-right">
                                                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="prefixdrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                            Prefix
                                                                        </a>
                
                                                                        <div class="dropdown-menu dropdown-menu-right prefixdiv" aria-labelledby="prefixdrop">
                                                                            {% for p in data['data']['prefixes'] %}
                                                                                <a class="dropdown-item clickable prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                                                            {% endfor %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-4 col-lg-5 col-md-6 col-12">
                                                                    <div class="form-group">
                                                                        <label>Prefixes</label>
                                                                        <ul id="prefixlist">
                                                                            {% for prefix in data['data']['prefixes']%}
                                                                                <li>
                                                                                    <div class="row">
                                                                                        <div class="col-md-10 col-8">
                                                                                            <input class="form-control prefixinput" value="{{ prefix }}">
                                                                                        </div>
                                                                                        <div class="col-md-1 col-1">
                                                                                            <span class="prefix-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                        <button class="btn" id="prefixupdate">Update Prefixes</button>
                                                                        <button class="btn" id="addprefix">Add Prefix</button>
                                                                        <br>
                                                                        <span id="prefixstatus"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End server prefix -->
                                        <!-- Start admin roles -->
                                        <div class="tab-pane fade" id="adminroles" role="tabpanel" aria-labelledby="adminroles-tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <h4 class="card-title">Set admin roles</h4>
                                                                    <p>Sets {{ botname }}'s admin roles in {{ data['data']['name'] }}</p>
                                                                    <p>Syntax: <code><span class="prefix">{{ prefix[0] }}</span>set addadminrole &ltrole&gt</code></p>
                                                                    <p>Syntax: <code><span class="prefix">{{ prefix[0] }}</span>set removeadminrole &ltrole&gt</code></p>
                                                                </div>
                                                                <div class="col-sm-6 text-left">
                                                                    <div class="dropdown float-right">
                                                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="prefixdrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                            Prefix
                                                                        </a>
                
                                                                        <div class="dropdown-menu dropdown-menu-right prefixdiv" aria-labelledby="prefixdrop">
                                                                            {% for p in data['data']['prefixes'] %}
                                                                                <a class="dropdown-item clickable prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                                                            {% endfor %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-4 col-lg-5 col-md-6 col-12">
                                                                    <div class="form-group">
                                                                        <label>Roles</label>
                                                                        <ul id="adminrolelist">
                                                                            {% for role in data['data']['adminroles']%}
                                                                                <li>
                                                                                    <div class="row">
                                                                                        <div class="col-md-10 col-8">
                                                                                            <input class="form-control adminroleinput" value="{{ role[1] }}" disabled=True data-id="{{ role[0] }}">
                                                                                        </div>
                                                                                        <div class="col-md-1 col-1">
                                                                                            <span class="admin-role-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                        <div class="buttondiv dropup">
                                                                            <button class="btn" id="adminroleupdate">Update Admin Roles</button>
                                                                            <button class="btn dropdown-toggle" href="#" role="button" id="roledrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="addadminrole" style="height: 40px; margin-top: 5px;">Add Admin Role</button>
                                                                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="roledrop">
                                                                                <div class="scrollable-menu">
                                                                                    {% for role in data['data']['roles'] %}
                                                                                        {% if role not in data['data']['adminroles'] %}
                                                                                            <a class="dropdown-item clickable adminroleoption" data-id="{{ role[0] }}">{{ role[1] }}</a>
                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <br>
                                                                        <span id="adminrolestatus"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End admin roles -->
                                        <!-- Start mod roles -->
                                        <div class="tab-pane fade" id="modroles" role="tabpanel" aria-labelledby="modroles-tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <h4 class="card-title">Set mod roles</h4>
                                                                    <p>Sets {{ botname }}'s mod roles in {{ data['data']['name'] }}</p>
                                                                    <p>Syntax: <code><span class="prefix">{{ prefix[0] }}</span>set addmodrole &ltrole&gt</code></p>
                                                                    <p>Syntax: <code><span class="prefix">{{ prefix[0] }}</span>set removemodrole &ltrole&gt</code></p>
                                                                </div>
                                                                <div class="col-sm-6 text-left">
                                                                    <div class="dropdown float-right">
                                                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="prefixdrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                            Prefix
                                                                        </a>
                
                                                                        <div class="dropdown-menu dropdown-menu-right prefixdiv" aria-labelledby="prefixdrop">
                                                                            {% for p in data['data']['prefixes'] %}
                                                                                <a class="dropdown-item clickable prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                                                            {% endfor %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-4 col-lg-5 col-md-6 col-12">
                                                                    <div class="form-group">
                                                                        <label>Roles</label>
                                                                        <ul id="modrolelist">
                                                                            {% for role in data['data']['modroles']%}
                                                                                <li>
                                                                                    <div class="row">
                                                                                        <div class="col-md-10 col-8">
                                                                                            <input class="form-control modroleinput" value="{{ role[1] }}" disabled=True data-id="{{ role[0] }}">
                                                                                        </div>
                                                                                        <div class="col-md-1 col-1">
                                                                                            <span class="mod-role-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                        <div class="buttondiv dropup">
                                                                            <button class="btn" id="modroleupdate">Update Mod Roles</button>
                                                                            <button class="btn dropdown-toggle" href="#" role="button" id="roledrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="addmodrole" style="height: 40px; margin-top: 5px;">Add Mod Role</button>
                                                                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="roledrop">
                                                                                <div class="scrollable-menu">
                                                                                    {% for role in data['data']['roles'] %}
                                                                                        {% if role not in data['data']['modroles'] %}
                                                                                            <a class="dropdown-item clickable modroleoption" data-id="{{ role[0] }}">{{ role[1] }}</a>
                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <br>
                                                                        <span id="modrolestatus"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End mod roles -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% elif data['status'] == 1 %}
        <div class="row">
            <div class="col-md-12">
                <div class="card card-profile">
                    <div class="card-body">
                        <h6 class="card-category text-gray">Guild not found</h6>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-11">
                                    <h5>The specified guild wasn't found.  Did you enter the URL correctly?</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <h5>Click <a href="/dashboard">here</a> to go to the dashboard, or <a href="/">here</a> to go home.</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="card card-profile">
                    <div class="card-body">
                        <h6 class="card-category text-gray">Error</h6>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-11">
                                    <h5>{{ data['message'] }}</h5>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <script>
        $(".prefix-option").click(function() {
            var prefix = $(this).text()
            $('.prefix').text(prefix)

            // Change others to inactive, and the correct ones to active
            $('.prefix-option').removeClass('active')
            var index = $(this).index()
            $(".prefixdiv").each(function(someotherindexidontneed) {
                $(this).children().eq(index).addClass('active')
            })
        })
        function playGif(elm) {
            var img = $(elm)
            if (img.attr('data-is-animated') === "True") {
                img.attr("src", `${img.attr("data-src-url")}gif`)
            }
        }
        function stopGif(elm) {
            var img = $(elm)
            if (img.attr('data-is-animated') === "True") {
                img.attr("src", `${img.attr("data-src-url")}png`)
            }
        }

        // Admin role controls
        $(document).on('click', '.admin-role-x', function() {
            var input = $(this).parent().siblings().first().children().first()
            $(".adminroleoption").parent().append(`
                <a class="dropdown-item clickable adminroleoption" data-id="${input.attr("data-id")}">${input.val()}</a>
            `)
            var li = $(this).parent().parent().parent()
            li.fadeOut(complete=function(){
                li.remove()
            })
        })

        $(document).on('click', '.adminroleoption', function() {
            var elm = $(this)
            $("#adminrolelist").append(`
                <li>
                    <div class="row">
                        <div class="col-md-10 col-8">
                            <input class="form-control adminroleinput" value="${elm.text()}" disabled=True data-id="${elm.attr("data-id")}">
                        </div>
                        <div class="col-md-1 col-1">
                            <span class="admin-role-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                        </div>
                    </div>
                </li>
            `)
            elm.remove()
        })

        $("#adminroleupdate").click(function() {
            $("#adminrolestatus").html("Loading...")
            var roles = []
            $(".adminroleinput").each(function(index, elm) {
                roles.push($(elm).attr("data-id"))
            })
            var xhr = new XMLHttpRequest();
            var url = "/api/adminroles"
            xhr.open("POST", url, true)
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4) { return }
                var json = JSON.parse(xhr.responseText)
                if (json.status === 0) {
                    $("#adminrolestatus").html(`Failed to update admin roles: ${json.message}`)
                } else if (json.status === 1 && json.data.status === 0) {
                    $("#adminrolestatus").html(`Failed to update admin roles: ${json.data.message}`)
                } else {
                    $("#adminrolestatus").html("Admin roles successfully updated.")
                }
            }
            var parts = window.location.pathname.split("/")
            var id = parts[parts.length - 1]
            var data = {
                "guild": id,
                "roles": roles
            }
            try {
                xhr.send(JSON.stringify(data))
            } catch(error) {
                console.log(error)
            }
        })

        // Mod role controls
        $(document).on('click', '.mod-role-x', function() {
            var input = $(this).parent().siblings().first().children().first()
            $(".modroleoption").parent().append(`
                <a class="dropdown-item clickable modroleoption" data-id="${input.attr("data-id")}">${input.val()}</a>
            `)
            var li = $(this).parent().parent().parent()
            li.fadeOut(complete=function(){
                li.remove()
            })
        })

        $(document).on('click', '.modroleoption', function() {
            var elm = $(this)
            $("#modrolelist").append(`
                <li>
                    <div class="row">
                        <div class="col-md-10 col-8">
                            <input class="form-control modroleinput" value="${elm.text()}" disabled=True data-id="${elm.attr("data-id")}">
                        </div>
                        <div class="col-md-1 col-1">
                            <span class="mod-role-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                        </div>
                    </div>
                </li>
            `)
            elm.remove()
        })

        $("#modroleupdate").click(function() {
            $("#modrolestatus").html("Loading...")
            var roles = []
            $(".modroleinput").each(function(index, elm) {
                roles.push($(elm).attr("data-id"))
            })
            var xhr = new XMLHttpRequest();
            var url = "/api/modroles"
            xhr.open("POST", url, true)
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4) { return }
                var json = JSON.parse(xhr.responseText)
                if (json.status === 0) {
                    $("#modrolestatus").html(`Failed to update mod roles: ${json.message}`)
                } else if (json.status === 1 && json.data.status === 0) {
                    $("#modrolestatus").html(`Failed to update mod roles: ${json.data.message}`)
                } else {
                    $("#modrolestatus").html("Mod roles successfully updated.")
                }
            }
            var parts = window.location.pathname.split("/")
            var id = parts[parts.length - 1]
            var data = {
                "guild": id,
                "roles": roles
            }
            try {
                xhr.send(JSON.stringify(data))
            } catch(error) {
                console.log(error)
            }
        })

        // Prefix Controls
        $(document).on('click', '.prefix-x', function() {
            var li = $(this).parent().parent().parent()
            li.fadeOut(complete=function(){
                li.remove()
            })
        })
        $("#addprefix").click(function() {
            $("#prefixlist").append(`
                <li>
                    <div class="row">
                        <div class="col-md-10 col-8">
                            <input class="form-control prefixinput">
                        </div>
                        <div class="col-md-1 col-1">
                            <span class="prefix-x clickable"><i class="tim-icons icon-simple-remove" style="float: right; margin-top: 10px;"></i></span>
                        </div>
                    </div>
                </li>
            `)
        })
        $("#prefixupdate").click(function() {
            $("#prefixstatus").html("Loading...")
            var prefixes = []
            $(".prefixinput").each(function(index, elm) {
                var text = $(elm).val()
                if (text) {
                    prefixes.push(text)
                }
            })
            var xhr = new XMLHttpRequest();
            var url = "/api/serverprefix"
            xhr.open("POST", url, true)
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4) { return }
                var json = JSON.parse(xhr.responseText)
                if (json.status === 0) {
                    $("#prefixstatus").html(`Failed to update prefixes: ${json.message}`)
                } else if (json.status === 1 && json.data.status === 0) {
                    $("#prefixstatus").html(`Failed to update prefixes: ${json.data.message}`)
                } else {
                    $("#prefixstatus").html("Prefixes successfully updated.")
                }
            }
            var parts = window.location.pathname.split("/")
            var id = parts[parts.length - 1]
            var data = {
                "guild": id,
                "prefixes": prefixes
            }
            try {
                xhr.send(JSON.stringify(data))
            } catch(error) {
                console.log(error)
            }
        })
    </script>
{% endblock javascripts %}