<template>
    <div class="disp-center popup-vue-fit-md" style="overflow: auto; width: 420px"><!--NEED CLASSES FOR MODAL -->
        <!--NEED H4 FOR CLOSE BUTTON -->
        <h4 class="btnx"
            style="font-family: arial !important;"
            @click="_closePopup(this)">
            X
        </h4>
        <div>
            <h2 id="title" class="text-center">Edit User</h2>
            <hr style="margin: 10px 0"> 
            <div class="disp-style-col">
                <div class="disp-style-col div-conf" style="margin-bottom: 20px">
                    <label>Group Name
                        <input v-model="groupdata.ugrp_name" @keypress="_keypressEnter($event, () => { updateGroup() })" id="txt_grp_name" class="form-control" placeholder="Group name"> 
                    </label>
                    <label>Homepage
                        <input v-model="groupdata.ugrp_homepage" @keypress="_keypressEnter($event, () => { updateGroup() })" id="txt_homepage" class="form-control" placeholder="Homepage"> 
                    </label>
                    <label>Description
                        <textarea v-model="groupdata.ugrp_description" id="txt_desc" class="git-textarea" placeholder="Description"></textarea>
                    </label>
                </div>
                <button @click="updateGroup()" class="git-btn-modal git-btn-info">Save</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                //DATA HERE
                id: this.$popup_params[0].id,
                groupdata: {}
            }
        },
        mounted() {
            this.$loading(true);
            this._vueGETfromParam (
                'user_groups',
                'fetch_group',
                { id: this.id },
                response => {
                    this.groupdata = response[0];
                    this.$loading(false);
                }
            );
        },
        methods: {
            updateGroup() {
                this.$loading(true);
                var txt_grp_name = $('#txt_grp_name').val();
                var txt_homepage = $('#txt_homepage').val();
                var txt_desc = $('#txt_desc').val();

                //ERROR TRAP FIRST!
                if (txt_grp_name.length < 3) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Group name must be at least 3 characters long!'
                    });
                    this.$loading(false);
                    $('#txt_grp_name').select();
                    return;
                }
                if (txt_desc.length < 3) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Description must be at least 3 characters long!'
                    });
                    this.$loading(false);
                    $('#txt_desc').select();
                    return;
                }
                if (!this._validIndexpage($('#txt_homepage').val())) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Homepage must be a valid route name!'
                    });
                    this.$loading(false);
                    $('#txt_homepage').select();
                    return;
                }
                
                this._vueGETfromParam (
                    'user_groups',
                    'check_grpname',
                    { 
                        name: txt_grp_name,
                        id: this.id
                    },
                    response => {
                        if (response === 'true') {
                            this.showErrorMsg({
                                title: 'Error!',
                                message: 'Group name already taken!'
                            });
                            this.$loading(false);
                            $('#txt_grp_name').select();
                        }
                        else {
                            this._vueGETfromParam (
                                'user_groups',
                                'check_homepage',
                                { 
                                    homepage: txt_homepage,
                                    id: this.id
                                },
                                response => {
                                    if (response === 'true') {
                                        this.showErrorMsg({
                                            title: 'Error!',
                                            message: 'Homepage already taken!'
                                        });
                                        this.$loading(false);
                                        $('#txt_homepage').select();
                                    }
                                    else { //INSERT IF ALL GOOD!
                                        this._vuePATCH('user_groups',
                                            this.id,
                                            {
                                                ugrp_name: txt_grp_name,
                                                ugrp_homepage: txt_homepage,
                                                ugrp_description: txt_desc
                                            }, response => {
                                            if (response === 'success') {
                                                this.$fire({
                                                    title: "Success!",
                                                    text: "User group successfully updated!",
                                                    type: "success",
                                                    timer: 3000
                                                }).then(r => {
                                                    this.$loading(false);
                                                    this._closePopup('modal_admin_groups_edit');
                                                    this.$router.go(0); 
                                                });
                                            }
                                            else
                                                this.$alert("Error! " + JSON.stringify(response));
                                            }
                                        );
                                    }
                                }
                            );
                        }
                    }
                );
            }
        }
    }
</script>
<style lang="css" scoped>

</style>    