<template>
    <div class="git-div-container disp-style-col">
        <!-- dayTOY -->
        <!--PLACE DESIGN HTML HERE-->
        <h2><i class="fa fa-id-card" aria-hidden="true"></i>Locator Unproccessed ID's</h2>
        <div style="width: 100%; margin-top: 10px; " class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                
                <div class="disp-style-row" style="margin-top: 10px">
                    <div>
                        <div class=""><h3>Filters: </h3></div>


                        <!-- <div> <p style="right; font-size = 15 "><br><br>
                        Show 
                        <select id="cmb_entries">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        Entries
                    </p></div> -->
                    </div>
                    
                   
                    <label style="margin-left: auto">Search:&nbsp;<input type="search"></label>
                </div>
                <div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round">Show Completed</span>
                    </label>
                </div>
            </div>
            <hr>
            <table class="table table-frozen-th table-hover">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>LOCATOR</th>
                        <th>ASSIGNED EMPLOYEE ID</th>
                        <th>EMPLOYEE NAME</th>
                        <th>DATE REQUESTED</th>
                        <th>DATE PAID</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="data in groups" :key="data.id">
                        <td>{{ data.id }}</td>
                        <td>{{ data.locator }}</td>
                        <td>{{ data.empId }}</td>
                        <td>{{ data.empname }}</td>
                        <td>{{ data.date }}</td>
                        <td>{{ data.datepaid }}</td>
                        <td>{{ data.status }}</td>
                        
                        <td ><button class="btn btn-primary"><i class="fa fa-fw fa-eye" ></i></button></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,
                groups: [{"id":19,
                "locator":"Federal Management & Maintenance Inc.",
                "empId":"FMMI-2020-09-013",
                "empname":"Granville Supsupin Periamesa",
                "date":"2022-08-08 ",
                "datepaid":"2022-09-02 16:18:01",
                "status":"For Processing"
                },
                {"id":1,
                "locator":"Federal Management & Maintenance Inc.",
                "empId":"FMMI-2020-09-025",
                "empname":"Niko Ryan Carino Nebres",
                "date":"2022-08-08 ",
                "datepaid":"2022-09-02 16:18:01",
                "status":"For Processing"
                },
                {"id":1,
                "locator":"Federal Management & Maintenance Inc.",
                "empId":"FMMI-2020-09-011",
                "empname":"Ariel Cojotan Dela Cruz",
                "date":"2022-08-08 ",
                "datepaid":"2022-09-02 16:18:01",
                "status":"For Processing"
                },
                {"id":1,
                "locator":"Federal Management & Maintenance Inc.",
                "empId":"FMMI-2020-09-012",
                "empname":"Santiago Castillo Mateo",
                "date":"2022-08-08 ",
                "datepaid":"2022-09-02 16:18:01",
                "status":"For Processing"
                },
                {"id":1,
                "locator":"Federal Management & Maintenance Inc.",
                "empId":"FMMI-2020-09-008",
                "empname":"Ancis Keith Miana Sidamon",
                "date":"2022-08-08 ",
                "datepaid":"2022-09-02 16:18:01",
                "status":"For Processing"
                },

                ],
                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() {
        },
        computed: {
            orderedGroups: function () { //FOR SORTING
                this.totaldisp = (this.ceil > this.totalitems ? this.totalitems : this.ceil);
                return _.orderBy(this.ceil ? this.groups.slice(this.floor, this.ceil) : this.groups, '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;
                }
            },
            editItem(id) {
            },
            deleteItem(id) {
            }
        }
    }
</script>
<style lang="css" scoped>
    .div-pages select{
        width: 50px;
        text-align: center;
    }
</style>    