<template>
    <div class="git-div-container disp-style-col">

        <!--First Form-->
        <h3>ACCREDITATION AND PERMIT TO OPERATE</h3>
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="pull-left">
                <h5>Accreditation and Permit to Operate</h5>
                </div>
                <div class="">
                    <div></div>
                    <div>
                        <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>
                         &emsp;&emsp;&emsp;
                         <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round">Show Completed</span>
                    </label>
                        <!-- <button class="git-btn git-btn-success fa fa-user-plus pull-right" style="margin-left: auto; font-size: 60px"></button> -->
                    </div>
                
                </div>
                <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 type="search"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover table-fa-icon">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>PTO No.</th>
                    <th>Accreditation No.</th>
                    <th>Locator Name</th>
                    <th>Application Type.</th>
                    <th>Date Applied</th>
                    <th>Date Submitted</th>
                    <th>Date Paid</th>
                    <th>Application Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in orderedGroups" :key="data.id">
                    <td>{{ data.id }}</td>
                    <td>{{ data.pto_no }}</td>
                    <td>{{ data.accredit_no }}</td>
                    <td>{{ data.locator_name }}</td>
                    <td>{{ data.application_type }}</td>
                    <td>{{ data.date_applied }}</td>
                    <td>{{ data.date_submitted }}</td>
                    <td>{{ data.date_paid }}</td>
                    <td>{{ data.application_status }}</td>
                    <td style="text-align: center">
                        <i @click="editItem(data.id)" class="git-btn-table git-btn-info fa fa-pencil" aria-hidden="true"></i>
                        <i @click="deleteItem(data.id)" class="git-btn-table git-btn-warn fa fa-times" aria-hidden="true"></i>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="disp-style-row" style="margin-top: 10px">
                <label>Showing {{ (this.totalitems > 0 ? this.floor + 1 : 0) }} 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>
   


        <!-- Second Form -->
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="pull-left">
                <h5>Temporary Permit to Operate</h5>
                </div>
                <div class="">
                    <div></div>
                    <div>
                        <label style="margin-left: auto"><strong>YEAR:</strong>&nbsp;
                            <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>
                         &emsp;&emsp;&emsp;
                         <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round">Show Completed</span>
                    </label>
                        <!-- <button class="git-btn git-btn-success fa fa-user-plus pull-right" style="margin-left: auto; font-size: 60px"></button> -->
                    </div>
                
                </div>
                <div class="disp-style-row" style="margin-top: 10px">
                    <p>
                        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>
                    <label style="margin-left: auto">Search:&nbsp;<input type="search"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>TPTO No.</th>
                    <th>Locator Name</th>
                    <th>Application Type.</th>
                    <th>Date Applied</th>
                    <th>Date Paid</th>
                    <th>Application Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in orderedGroups" :key="data.id">
                    <td>{{ data.id }}</td>
                    <td>{{ data.pto_no }}</td>
                    <td>{{ data.locator_name }}</td>
                    <td>{{ data.application_type }}</td>
                    <td>{{ data.date_applied }}</td>
                    <td>{{ data.date_paid }}</td>
                    <td>{{ data.application_status }}</td>
                    <td style="text-align: center">
                        <i @click="editItem(data.id)" class="git-btn-table git-btn-info fa fa-pencil" aria-hidden="true"></i>
                        <i @click="deleteItem(data.id)" class="git-btn-table git-btn-warn fa fa-times" aria-hidden="true"></i>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="disp-style-row" style="margin-top: 10px">
                <label>Showing {{ (this.totalitems > 0 ? this.floor + 1 : 0) }} 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>

        <!-- Third Form -->
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="pull-left">
                <h5>TPTO for Exhibits</h5>
                </div>
                <div class="">
                    <div></div>
                    <div>
                        <label style="margin-left: auto"><strong>YEAR:</strong>&nbsp;
                            <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>
                         &emsp;&emsp;&emsp;
                         <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round">Show Completed</span>
                    </label>
                        <!-- <button class="git-btn git-btn-success fa fa-user-plus pull-right" style="margin-left: auto; font-size: 60px"></button> -->
                    </div>
                
                </div>
                <div class="disp-style-row" style="margin-top: 10px">
                    <p>
                        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>
                    <label style="margin-left: auto">Search:&nbsp;<input type="search"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Exhibit</th>
                    <th>Start</th>
                    <th>End</th>
                    <th>Exhibitor Count</th>
                    <th>Date Created</th>
                    <th>Action</th>
                    
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in exhibits" :key="data.id">
                    <td>{{ data.id }}</td>
                    <td>{{ data.exhibit }}</td>
                    <td>{{ data.start }}</td>
                    <td>{{ data.end }}</td>
                    <td>{{ data.exhibitor_count }}</td>
                    <td>{{ data.date_created }}</td>
                    <td style="text-align: center">
                        <i @click="editItem(data.id)" class="git-btn-table git-btn-info fa fa-pencil" aria-hidden="true"></i>
                        <i @click="deleteItem(data.id)" class="git-btn-table git-btn-warn fa fa-times" aria-hidden="true"></i>
                    </td>
                    
                </tr>
                </tbody>
            </table>
            <div class="disp-style-row" style="margin-top: 10px">
                <label>Showing {{ (this.totalitems > 0 ? this.floor + 1 : 0) }} 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>

        <!-- Last Form -->
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100% ;height: 180px" class="disp-style-col">
                <h5>Application Type Statistics For May</h5>
                
            </div>
        </div>


    </div>
</template>
<script>
    export default{
        data() {
            return {
                //DATA HERE
                // ACCREDITATION AND PERMIT TO OPERATE DATA
                 order_group_asc: true,
                groups: [{
                "id":1,
                "pto_no":"LP22032",
                "accredit_no":"10211-212-98",
                "locator_name":"Located_name1",
                "application_type":"Sample_type",
                "date_applied":"10/25/2022",
                "date_submitted":"10/25/2022",
                "date_paid":"10/25/2022",
                "application_status":"Pending",
                },
                {"id":2,
                "pto_no":"LP22032-1",
                "accredit_no":"10211-212-98",
                "locator_name":"Located_name2",
                "application_type":"Sample_type",
                "date_applied":"10/25/2022",
                "date_submitted":"10/25/2022",
                "date_paid":"10/25/2022",
                "application_status":"Pending",
                },
                {"id":3,
                "pto_no":"LP22032-12",
                "accredit_no":"10211-212-918",
                "locator_name":"Located_name3",
                "application_type":"Sample_type3",
                "date_applied":"10/25/2022",
                "date_submitted":"10/25/2022",
                "date_paid":"10/25/2022",
                "application_status":"Cancelled",
                }
                ,
                {"id":4,
                "pto_no":"LP22032-12232",
                "accredit_no":"10211-21232-918",
                "locator_name":"Located_name34",
                "application_type":"Sample_type35",
                "date_applied":"11/21/2022",
                "date_submitted":"11/25/2022",
                "date_paid":"11/25/2022",
                "application_status":"Cancelled",
                }
                ],

                // EXHIBITS SAMPLE DATA
                exhibits:[{
                "id":1,
                "exhibit":"LP22032",
                "start":"10211-212-98",
                "end":"Located_name1",
                "exhibitor_count":"Sample_type",
                "date_created":"10/25/2022"
                },
                {
                "id":2,
                "exhibit":"LP22032232",
                "start":"1022311-223212-98",
                "end":"Located_name123",
                "exhibitor_count":"Sample_type232",
                "date_created":"10/20/2000"
                },
                {
                "id":3,
                "exhibit":"LP222032",
                "start":"10211-2125-9668",
                "end":"Located_name123",
                "exhibitor_count":"Sample_type2",
                "date_created":"10/25/2001"
                },
                {
                "id":4,
                "exhibit":"LP2202332",
                "start":"10211-21552-98",
                "end":"Located_name15",
                "exhibitor_count":"Sample_typ5e",
                "date_created":"11/05/2022"
                },
                ],
                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>    