<template>
    <div class="git-div-container disp-style-col">
        <!--PLACE DESIGN HTML HERE-->
        <h3>PROCESS ID&nbsp;<button class="git-btn:hover  fa fa-arrow-left" style="border:0px;" >&nbsp;BACK</button></h3>
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
            &nbsp;&nbsp;&nbsp;&nbsp;
                     Locator Gatepass
                <button class="git-btn git-btn-info fa fa-user-plus" style="margin-left: auto; font-size: 25px"></button>
               
                <div class="disp-style-row" style="margin-top: 10px">
                    <p>
                        <strong>MONTH:&nbsp;</strong>
                        <select id="month_entries">
                                        <option value="january">january</option>
                                        <option value="february">February</option>
                                        <option value="March">March</option>
                                        <option value="April">April</option>
                                        <option value="May">May</option>
                                        <option value="June">June</option>
                                        <option value="July">July</option>
                                        <option value="August">August</option>
                                        <option value="September">September</option>
                                        <option value="October">October</option>
                                        <option value="November">November</option>
                                        <option value="December">December</option>
                        </select>
                     </p>
                             <p>
                                   
                        <label style="margin-left: auto"><strong>YEAR:&nbsp;</strong>
                            <select id="cmb_year" @change="changeLimit()">
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                                <option value="2020">2020</option>
                                <option value="2019">2019</option>
                            </select>
                        </label>
                                     <button class="git-btn  ">show</button>
                                     <label class="switch">
                                        <input type="checkbox" style="margin-top: 20px;" checked>
                                           <span class="slider round">Show Completed</span>
                                           </label>
                             </p>
                    
                    <label style="margin-left: auto">Search:&nbsp;<input  type="search.txt"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover">
                <thead>
                <tr>
                    <th>Control <br>No.</th>
                    <th>Gatepass <br>No.</th>
                    <th>Gatepass <br>Entity</th>
                    <th>Vehicle <br>plate<br>No.</th>
                    <th>Date <br>Applied</th>
                    <th>Date <br>Recommended</th>
                    <th>date <br>Approve</th>
                    <th>Date paid</th>
                    <th>Date <br>INspected</th>
                    <th>OR <br>No</th>
                    <th>Status </th>
                    <th>Remarks</th>
                    <th>Action</th>
                   
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in orderedGroups" :key="data.id">
                    <td>{{ data.ugrp_control }}</td>
                    <td>{{ data.ugrp_gatepass_no }}</td>
                    <td>{{ data.ugrp_gatepass_entity }}</td>
                    <td>{{ data.ugrp_vehicle }}</td>
                    <td>{{ data.ugrp_date_applied }}</td>
                    <td>{{ data.ugrp_date_recommend}}</td>
                    <td>{{ data.ugrp_date_approve }}</td>
                    <td>{{ data.ugrp_date_paid }}</td>
                    <td>{{ data.ugrp_date_inspected }}</td>
                    <td>{{ data.ugrp_or_no }}</td>
                    <td>{{ data.ugrp_status }}</td>
                    <td>{{ data.ugrp_remarks }}</td>
                    <td>{{ data.ugrp_action }}</td>
                  
                    
                    
                </tr>
                </tbody>
            </table>
            <table class="table table-frozen-th table-hover">
              
            </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":1,"ugrp_control":"JUlius","id":3,"ugrp_gatepass_no":"27861215",
                "id":2,"ugrp_gatepass_entity":"Admins","id":4,"ugrp_vehicle":"5sd54s5",
                "id":5,"ugrp_date_applied":"2022","id":6,"ugrp_date_recommend":"2025",
                "id":7,"ugrp_date_approve":"3030","id":8,"ugrp_status":"baak",
                "id":9,"ugrp_date_paid":"sabado","id":77,"ugrp_remarks":"kastanan",
                "id":67,"ugrp_date_inspected":"kahapon","id":33,"ugrp_action":"programming",
                "id":45,"ugrp_or_no ":"325"
                },
                {"id":16,"ugrp_control":"managdag","id":3,"ugrp_gatepass_no":"27861215",
                "id":2,"ugrp_gatepass_entity":"Admins","id":4,"ugrp_vehicle":"5sd54s5",
                "id":5,"ugrp_date_applied":"2022","id":6,"ugrp_date_recommend":"2025",
                "id":7,"ugrp_date_approve":"3030","id":8,"ugrp_status":"baak",
                "id":9,"ugrp_date_paid":"sabado","id":77,"ugrp_remarks":"kastanan",
                "id":67,"ugrp_date_inspected":"kahapon","id":33,"ugrp_action":"programming",
                "id":45,"ugrp_or_no ":"325"
                } ,
                {"id":16,"ugrp_control":"managdag","id":3,"ugrp_gatepass_no":"27861215",
                "id":2,"ugrp_gatepass_entity":"Admins","id":4,"ugrp_vehicle":"5sd54s5",
                "id":5,"ugrp_date_applied":"2022","id":6,"ugrp_date_recommend":"2025",
                "id":7,"ugrp_date_approve":"3030","id":8,"ugrp_status":"baak",
                "id":9,"ugrp_date_paid":"sabado","id":77,"ugrp_remarks":"kastanan",
                "id":67,"ugrp_date_inspected":"kahapon","id":33,"ugrp_action":"programming",
                "id":45,"ugrp_or_no ":"325"
                }],
                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>

</style>    