{{@include("header", it)/}}

<style>
    .admin-icon svg {
        height: 20px;
        width: 20px;
        transform: scale(-1, 1);
        text-align: center;
    }
</style>

<svg style="display:none">
    <symbol id="fivem-icon" viewBox="0 0 342 430" style="fill: rgb(226, 144, 92);">
        <g transform="matrix(1,0,0,-1,-124.2,606.4)">
            <path d="m 125.8,215.9 85.1,0 c 1.9,0 7.4,18.3 16.7,54.9 32.3,112.4 50.9,178.1 55.7,197.2 l -54.9,54.1 -1.6,0 C 219.4,499 185.2,397.2 124.2,216.7 l 1.6,-0.8 z m 163.8,275.2 0.8,0 c 1.1,4.5 1.6,7.2 1.6,8 l 0,1.6 c -15.9,16.7 -33.7,34.5 -53.3,53.3 -2.1,-3.2 -3.2,-5.8 -3.2,-8 l 0,-0.8 c 19.9,-20.5 37.9,-38.5 54.1,-54.1 z M 393,429 l 0.8,0 c -10.9,34.5 -17.5,52.2 -19.9,53.3 L 254.6,600.8 c -1.3,0 -4.2,-8.5 -8.7,-25.4 L 393,429 Z m -22.3,65.3 0.8,0 c -24.4,74 -37.4,111.3 -39,112.1 l -73.2,0 0,-0.8 C 286.4,578 323.5,540.9 370.7,494.3 Z m 43.8,-128.1 0.8,0 c -2.7,13 -9,23.1 -19.1,30.2 -31,31.8 -62,62.8 -93,93 l -0.8,0 c 1.9,-10.9 6.1,-19.1 12.7,-24.7 l 99.4,-98.5 z m 50.1,-150.3 1.6,0.8 c -22.8,67.9 -35,102.9 -36.6,105 l -109.8,108.9 0,-0.8 c 4.2,-16.7 24.7,-88 61.2,-213.9 l 83.6,0 z" />
        </g>
    </symbol>
    <symbol id="discord-icon" viewBox="0 0 245 240" style="fill: #7289da;">
        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z" />
        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />
    </symbol>
    <symbol id="password-icon" viewBox="0 0 580 580" style="fill: rgb(194, 194, 59);">
        <path d="M463.748,48.251c-64.336-64.336-169.013-64.335-233.349,0.001c-43.945,43.945-59.209,108.706-40.181,167.461 L4.396,401.536c-2.813,2.813-4.395,6.621-4.395,10.606V497c0,8.291,6.709,15,15,15h84.858c3.984,0,7.793-1.582,10.605-4.395 l21.211-21.226c3.237-3.237,4.819-7.778,4.292-12.334l-2.637-22.793l31.582-2.974c7.178-0.674,12.847-6.343,13.521-13.521 l2.974-31.582l22.793,2.651c4.233,0.571,8.496-0.85,11.704-3.691c3.193-2.856,5.024-6.929,5.024-11.206V363h27.422 c3.984,0,7.793-1.582,10.605-4.395l38.467-37.958c58.74,19.043,122.381,4.929,166.326-39.046 C528.084,217.266,528.084,112.587,463.748,48.251z M421.313,154.321c-17.549,17.549-46.084,17.549-63.633,0 s-17.549-46.084,0-63.633s46.084-17.549,63.633,0S438.861,136.772,421.313,154.321z"/>
    </symbol>
</svg>


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


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

        <!-- Global Card -->
        <div class="card card-accent-primary">
            <div class="card-header float-left">
                <span style="font-size: large">All Admins</span>
                <button class="btn btn-sm btn-success float-right" type="button" id="btnAddAdmin">
                    <i class="icon-plus"></i> Add
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive text-center">

                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Auth</th>
                                <th>Permissions</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{@each(it.admins) => admin}}
                            <tr>
                                <td>{{admin.name}}</td>
                                <td>
                                    {{@if(admin.hasCitizenFX == true)}}
                                        <i class="admin-icon"><svg><use href="#fivem-icon"></use></svg></i>
                                    {{/if}}
                                    {{@if(admin.hasDiscord)}}
                                        <i class="admin-icon"><svg><use href="#discord-icon"></use></svg></i>
                                    {{/if}}
                                    <i class="admin-icon"><svg><use href="#password-icon"></use></svg></i>
                                </td>
                                <td>{{admin.perms}}</td>
                                <td class="tableActions">
                                    {{@if(admin.disableEdit)}}
                                        <button class="btn btn-sm btn-outline-secondary" disabled>
                                            <i class="icon-pencil"></i> Edit
                                        </button>
                                    {{#else}}
                                        <button class="btn btn-sm btn-outline-primary"
                                            onclick="getEditModal('{{admin.name}}')">
                                            <i class="icon-pencil"></i> Edit
                                        </button>
                                    {{/if}}
                                    &nbsp;
                                    {{@if(admin.disableDelete)}}
                                        <button class="btn btn-sm btn-outline-secondary" disabled>
                                            <i class="icon-trash"></i> Delete
                                        </button>
                                    {{#else}}
                                        <button class="btn btn-sm btn-outline-danger"
                                            onclick="deleteAdmin('{{admin.name}}')">
                                            <i class="icon-trash"></i> Delete
                                        </button>
                                    {{/if}}
                                </td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>


{{@include("footer", it)/}}


<!-- Add Admin Modal -->
<div class="modal fade" id="modAddAdmin" tabindex="-1" role="dialog" aria-labelledby="modAddAdminTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modAddAdminTitle">Add Admin</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="modAddAdmin-name" class="col-sm-3 col-form-label">
                        Username <br>
                        <small class="text-danger">(required)</small>
                    </label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input type="text" class="form-control" id="modAddAdmin-name" maxlength="20"
                                autocomplete="off" required>
                        </div>
                        <span id="modAddAdmin-id-description" class="form-text text-muted">
                            Must have between 3 and 20 characters and contain only letters and numbers. Case insensitive.
                        </span>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="modAddAdmin-citizenfxID" class="col-sm-3 col-form-label">
                        CitizenFX ID <br>
                        <small class="text-muted">(optional)</small>
                    </label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input type="text" class="form-control" id="modAddAdmin-citizenfxID" maxlength="20"
                                autocomplete="off" required>
                        </div>
                        <span class="form-text text-muted">
                            The admin's CitizenFX Forum username.
                        </span>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="modAddAdmin-discordID" class="col-sm-3 col-form-label">
                        Discord ID <br>
                        <small class="text-muted">(optional)</small>
                    </label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input type="number" class="form-control" id="modAddAdmin-discordID" autocomplete="off" required>
                        </div>
                        <span class="form-text text-muted">
                            The admin's Discord User ID. Follow <a href="https://support.discordapp.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID" target="_blank">this guide</a> if you don't know how to get the User ID.
                        </span>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">
                        Permissions
                    </label>
                    <div class="col-sm-9">
                        {{@each(it.allPermissions) => perm, key}}
                        <div class="form-check checkbox">
                            <input class="form-check-input" id="modAddAdmin-check{{key}}" type="checkbox" name="modAddAdmin-permissions[]"
                                value="{{perm[0]}}">
                            <label class="form-check-label" for="modAddAdmin-check{{key}}">{{perm[1]}}</label>
                        </div>
                        {{/each}}
                    </div>
                </div>

            </div>
            <div class="modal-footer text-center">
                <div class="mx-auto">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="modAddAdmin-save">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Add Admin Copy Password Modal -->
<div class="modal fade" id="modAddAdminPassword" tabindex="-1" role="dialog" aria-labelledby="modAddAdminTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modAddAdminTitle">Add Admin</h5>
            </div>
            <div class="modal-body text-center">
                <div class="form-group row">
                    <div class="col-sm-8 mx-auto">
                        <h4 class="text-success">Admin Saved!</h4>
                        <h6>Please copy the following temporary password:</h6>
                        <div class="input-group">
                            <input type="text" class="form-control text-center" id="modAddAdminPassword-pwd" readonly>
                        </div>
                        <span class="form-text text-muted">
                            The admin will be prompted to change his password on first login.
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-center">
                <div class="mx-auto">
                    <button type="button" class="btn btn-primary" onclick="window.location.reload(false);">Close & Refresh</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Edit Admin Modal -->
<div class="modal fade" id="modEditAdmin" tabindex="-1" role="dialog" aria-labelledby="modEditAdminTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modEditAdminTitle">Edit Admin</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modEditAdmin-body"></div>
            <div class="modal-footer text-center">
                <div class="mx-auto">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="modEditAdmin-save">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    //============================================== Show Add Modal
    $('#btnAddAdmin').click(function () {
        $('#modAddAdmin').modal('show');
    })


    //============================================== Delete Admin
    function deleteAdmin(name){
        if(!window.confirm('Are you sure you want to delete "' + name + '"?')){
            return;
        }

        var notify = $.notify({ message: '<p class="text-center">Deleting...</p>' }, {});
        $.ajax({
            type: "POST",
            url: '/adminManager/delete',
            timeout: timeoutMedium,
            data: {name: name},
            success: function (data) {
                if(data.message == 'refresh'){
                    window.location.reload(true);
                }else{
                    notify.update('progress', 0);
                    notify.update('type', data.type);
                    notify.update('message', data.message);
                }
            },
            error: function (xmlhttprequest, textstatus, message) {
                alert("Error processing request.");
            }
        });
    }


    //============================================== Show Edit Modal
    function getEditModal(name){
        $.ajax({
            type: "POST",
            url: '/adminManager/getModal',
            timeout: timeoutMedium,
            data: {name: name},
            success: function (data) {
                $('#modEditAdmin-body').html(data);
                $('#modEditAdmin').modal('show');
            },
            error: function (xmlhttprequest, textstatus, message) {
                alert("Error getting user information.");
            }
        });
    }


    //============================================== Edit Admin
    $('#modEditAdmin-save').click(function () {
        var permissions = new Array();
        $.each($("input[name='modEditAdmin-permissions[]']:checked"), function() {
            permissions.push($(this).val());
        });
        if(!permissions.length) permissions = false;
        let data = {
            name: $('#modEditAdmin-name').val().trim(),
            citizenfxID: $('#modEditAdmin-citizenfxID').val().trim(),
            discordID: $('#modEditAdmin-discordID').val().trim(),
            permissions: permissions
        }
        if (!data.name.length) {
            var notify = $.notify({ message: 'Unnable to detect username.' }, { type: 'warning' });
            return;
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/adminManager/edit',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                if(data.message == 'refresh'){
                    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);
            }
        });
    });


    //============================================== Add Admin
    $('#modAddAdmin-save').click(function () {
        var permissions = new Array();
        $.each($("input[name='modAddAdmin-permissions[]']:checked"), function() {
            permissions.push($(this).val());
        });
        if(!permissions.length) permissions = false;
        let data = {
            name: $('#modAddAdmin-name').val().trim(),
            citizenfxID: $('#modAddAdmin-citizenfxID').val().trim(),
            discordID: $('#modAddAdmin-discordID').val().trim(),
            permissions: permissions
        }
        if(data.name.length < 3) {
            return $.notify({ message: 'The Username is not long enough.' }, { type: 'warning' });
        }
        var notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/adminManager/add',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                if(data.message == 'refresh'){
                    window.location.reload(true);
                }else{
                    if(data.type == 'modalrefresh'){
                        notify.update('progress', 0);
                        notify.update('type', 'success');
                        notify.update('message', 'Saved!');
                        $('#modAddAdmin').modal('hide');
                        $('#modAddAdminPassword-pwd').val(data.password);
                        $('#modAddAdminPassword').modal('show');
                    }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);
            }
        });
    });
</script>
