{% extends "base.html" %}
{% block title %} Admin Dashboard {% endblock %}
{% block header %}
{% endblock %}
{% block content %}
    <div class="container">
        <br>
        <div class="display-4">Admin Dashboard</div>
        {# Admin logout #}
        <button class="float-end btn btn-primary">
            <a class="text-decoration-none text-body" href="{{ url_for('admin.admin_logout') }}">Log out</a>
        </button>
        <br>
        <hr>

        <div class="d-flex justify-content-between bg-light">
            {# Delete board #}
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <form>
                            <h3>Manage Board</h3>
                            <div class="mb-3">
                                <label class="form-label" for="Bid">Board ID</label>
                                <input class="form-control" type="text" name="Bid" id="Bid">
                            </div>
                        </form>
                        <button class="btn btn-primary btn-danger" onclick="manageTarget(0, 0);">Delete</button>
                        <button class="btn btn-primary" onclick="manageTarget(1, 0);">Restore</button>
                    </div>
                </div>
            </div>

            {# Delete post #}
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <form>
                            <h3>Manage Post</h3>
                            <div class="mb-3">
                                <label class="form-label" for="Pid">Post ID</label>
                                <input class="form-control" type="text" name="Pid" id="Pid">
                            </div>
                        </form>
                        <button class="btn btn-primary btn-danger" onclick="manageTarget(0, 1);">Delete</button>
                        <button class="btn btn-primary" onclick="manageTarget(1, 1);">Restore</button>
                    </div>
                </div>
            </div>

            {# Delete comment #}
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <form>
                            <h3>Manage Comment</h3>
                            <div class="mb-3">
                                <label class="form-label" for="Cid">Comment ID</label>
                                <input class="form-control" type="text" name="Cid" id="Cid">
                            </div>
                        </form>
                        <button class="btn btn-primary btn-danger" onclick="manageTarget(0, 2);">Delete</button>
                        <button class="btn btn-primary" onclick="manageTarget(1, 2);">Restore</button>
                    </div>
                </div>
            </div>

            {# Ban user #}
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <form>
                            <h3>Manage User</h3>
                            <div class="mb-3">
                                <label class="form-label" for="Uid">User ID</label>
                                <input class="form-control" type="text" name="Uid" id="Uid">
                                <label for="days">Length(days):</label>
                                <input type="text" class="form-control" name="days" id="days">
                            </div>
                        </form>
                        <button class="btn btn-primary btn-danger" onclick="manageUser(0);">Ban</button>
                        <button class="btn btn-primary" onclick="manageUser(1);">Unban</button>
                    </div>
                </div>
            </div>

            {# Create board #}
            <div class="card">
                <div class="card-body">
                    <h3>Craeate Board</h3>
                    <div style="height: 78%;display: flex; align-items: center; flex-direction: column; justify-content: center">
                    <button class="btn btn-primary btn-success" onclick="window.open('/admin/create');">Click to Navigate</button>
                    </div>
                </div>
            </div>

        </div>
        <br>

        {# Admin report handling #}
        <div class="container">
            <div class="display-6">Reports</div>
            <hr>


            {% for report in data['reports'] %}
                <div class="text-muted">Report ID: {{ report['Rid'] }}</div>
                <div class="text-muted">{{ report['target'] }}ID: {{ report['target_ID'] }}</div>
                <div class="text-muted">Reporter ID: {{ report['Uid'] }}</div>
                <div class="float-end blockquote-footer">{{ moment(report['timestamp']).fromNow() }}</div>
                <div class="lead">{{ report['reason'] }}</div>
                <form>
                    <input name="Rid" type="hidden" value="{{ report['Rid'] }}">
                </form>
                <button class="btn btn-outline-dark" data-rid="{{ report['Rid'] }}" onclick="resolve(this);">Resolve
                </button>
                <hr>
            {% endfor %}

            {# Pagination #}
            <nav {% if data['num_page'] <= 1 %}style="display: none"{% endif %}>
                <ul class="pagination justify-content-center">
                    <li class="page-item {% if data['page'] == 1 %}disabled{% endif %}">
                        <a class="page-link" href="javascript:setParam('page',{{ data['page'] - 1 }})"
                           tabindex="-1">Previous</a>
                    </li>

                    {% for i in range(1, 1 + data['num_page']) %}
                        <li class="page-item{% if i == data['page'] %} active {% endif %}">
                            <a class="page-link" href="javascript:setParam('page',{{ i }})">{{ i }}</a>
                        </li>
                    {% endfor %}

                    <li class="page-item {% if data['page'] == data['num_page'] %}disabled{% endif %}">
                        <a class="page-link" href="javascript:setParam('page',{{ data['page'] + 1 }})">Next</a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>
    <script>
        var target_dict = {
            0: "board",
            1: "post",
            2: "comment",
        }
        var cls_dict = {
            0: "Bid",
            1: "Pid",
            2: "Cid",
        }
        function manageTarget(action, target) {  // action: 0=delete, 1=restore; target: 0=board, 1=post, 2=comment
            let id = $('#'+cls_dict[target]).val().trim();
            $.ajax({
                method: 'post',
                url: "/admin/"+target_dict[target]+"/"+((action)?"restore":"delete"),
                dataType: 'json',
                data: {Bid: id, Pid: id, Cid: id},
                success: data => {
                    if (!data.status) {
                        alert(data.error.msg);
                    } else {
                        alert(((action)?'Restore ':'Delete ')+target_dict[target]+id+' successful!');
                    }
                    location.reload();
                }
            });
        }

        function resolve(ele) {
            let Rid = ele.getAttribute("data-rid");
            $.ajax({
                method: 'post',
                url: "/admin/report/resolve",
                dataType: 'json',
                data: {Rid: Rid},
                success: data => {
                    if (!data.status) {
                        alert(data.error.msg);
                    } else {
                        alert('Resolve successful!');
                    }
                    location.reload();
                }
            });
        }

        function manageUser(action) {  // action: 0=ban, 1=unban
            let Uid = $('#Uid').val().trim();
            let days = $('#days').val().trim();
            $.ajax({
                method: 'post',
                url: "/admin/user/"+((action)?"unban":"ban"),
                dataType: 'json',
                data: {Uid: Uid, days: days},
                success: data => {
                    if (!data.status) {
                        alert(data.error.msg);
                    } else {
                        alert(((action)?'Unban':'Ban')+' user'+Uid+' successful!');
                    }
                    location.reload();
                }
            });
        }
    </script>
{% endblock %}
