<template>
    <div class="git-div-container disp-style-col sc4">
        <!--PLACE DESIGN HTML HERE-->
        <h3>Group List</h3>
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <span @click="_addPopup('modal_admin_groups_add', { })" style="margin-left: auto; font-size: 32px"><i class="git-btn-fa git-btn-success fa fa-user-plus"></i></span>
                <div class="disp-style-row" style="margin-top: 10px">
                    <p>
                        Show 
                        <select id="cmb_entries" @change="changeLimit()">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        Entries
                    </p>
                    <label style="margin-left: auto">Search:&nbsp;<input v-model="txt_search" type="search" @change="changeLimit()"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover table-fa-icon">
                <thead>
                <tr>
                    <th style="width: 320px" @click="reorderGroup()">Name</th>
                    <th style="width: 260px">Home Page</th>
                    <th style="width: fill-content">Description</th>
                    <th style="width: 124px"></th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="data in orderedGroups" :key="data.id">
                        <td>{{ data.ugrp_name }}</td>
                        <td>{{ data.ugrp_homepage }}</td>
                        <td>{{ data.ugrp_description }}</td>
                        <td style="text-align: center">
                            <div class="disp-style-row">
                                <span @click="_addPopup('modal_admin_groups_edit', { id: data.id })">
                                    <i class="git-btn-table git-btn-info fa fa-pencil" aria-hidden="true"></i>
                                </span>
                                <span @click="deleteItem(data.id)">
                                    <i class="git-btn-table git-btn-warn fa fa-times" aria-hidden="true"></i>
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="disp-style-row" style="margin-top: 10px">
                <label>Showing {{ this.floor }} to {{ this.totaldisp }} out of {{ this.totalitems }} entries</label>
                <div style="disp-style-row; margin-left: auto" class="div-pages">
                    <button class="git-btn" @click="movePage(false, true)">Prev</button>
                    <select @change="movePage(false, false, $event.target.value)">
                        <option v-for="index in this.page" :key="index" :id="'btn_page' + index" :selected="index === currpage">{{index}}</option>
                    </select>
                    <button class="git-btn" @click="movePage(true)">Next</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //DATA HERE
                order_group_asc: true,
                txt_search: '',
                groups: [],
                floor: 0, //FOR PAGE ALGORITHM
                ceil: 10, //FOR PAGE ALGORITHM
                limit: 10, //FOR PAGE ALGORITHM
                totalitems: 0, //FOR PAGE ALGORITHM
                totaldisp: 10, //FOR PAGE ALGORITHM
                currpage: 1, //FOR PAGE ALGORITHM
                page: 0 //FOR PAGE ALGORITHM
            }
        },
        mounted() {
            this.$loading(true);
            $("body").css({ 'cursor': 'wait' });
            
            this._vueGETfromParam(
                'user_groups',
                'fetch_group',
                {},
                response => {
                    this.groups = response;
                    this.totalitems = this.groups.length;
                    this.page = Math.ceil(this.totalitems / this.limit);
                    $("#btn_page" + this.currpage).addClass('git-btn-active');
                    this.$loading(false);
                    $("body").css({ 'cursor': 'default' });
                }
            );
        },
        computed: {
            orderedGroups: function () { //FOR SORTING
                var tmpGrp = this.groups.filter(d => d.ugrp_name.toLowerCase().includes(this.txt_search.toLowerCase()));

                this.limit = (typeof $('#cmb_entries').val() === 'undefined' ? 10 : parseInt($('#cmb_entries').val()));
                this.totalitems = tmpGrp.length;
                this.totaldisp = (this.ceil > this.totalitems ? this.totalitems : this.ceil);

                tmpGrp = this.ceil ? tmpGrp.slice(this.floor, this.ceil) : tmpGrp;

                return _.orderBy(tmpGrp, 'ugrp_name', (this.order_group_asc ? 'asc' : 'desc'));
            }
        },
        methods: {
            reorderGroup() {
                this.order_group_asc = !this.order_group_asc;
            },
            changeLimit() { //ENTRIES ALGORITHM
                this.limit = parseInt($('#cmb_entries').val());
                this.totaldisp = (this.ceil > this.totalitems ? this.totalitems : this.ceil);
                this.page = Math.ceil(this.totalitems / this.limit);
                this.ceil = this.limit;
                this.floor = 0;
                this.currpage = 1;
            },
            movePage(next = false, prev = false, to = -1) { //MOVE PAGE ALGORITHM
                if (next && this.ceil < this.totalitems) {
                    this.floor += this.limit;
                    this.ceil += this.limit;
                    this.currpage++;
                }
                else if (prev && this.floor > 0) {
                    this.floor -= this.limit;
                    this.ceil -= this.limit;
                    this.currpage--;
                }
                else if (to > 0) {
                    this.floor = (to * this.limit) - this.limit;
                    this.ceil = (to * this.limit);
                    this.currpage = to;
                }
            },
            deleteItem(id) {
                this.$confirm("Are you sure you want to delete `" + this.groups.find(data => data.id === id).ugrp_name + "`?",
                    "Confirm",
                    "warning").then(r => {
                        this._vueDelete(
                            'user_groups',
                            id,
                            response => {
                                if (response === 'success') {
                                    this.groups = this._softDelete(this.groups, id);
                                    this.showSuccessMsg({
                                        title: 'Success!',
                                        message: 'Item deleted!'
                                    });
                                }
                            }
                        );
                    }
                );
            }
        }
    }
</script>
<style lang="css" scoped>
    .div-pages select{
        width: 50px;
        text-align: center;
    }
</style>    