<html lang="en">

<%- include('../partials/header.ejs'); %>

  <body>

    <div class="container-scroller" id="app">

      <%- include ('../partials/nav.ejs') %>


        <div class="container-fluid page-body-wrapper">

          <%- include ('../partials/theme-setting') %>


            <%- include('../partials/sidebar.ejs') %>

              <div class="main-panel">
                <div class="content-wrapper p-0">

                    <div class="welcome-message">
                        <div class="d-lg-flex justify-content-between align-items-center">
                            <div class="pl-4">
                                <h2 class="text-white font-weight-bold mb-1">RWP Report Summery</h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- form -->
                    <div class="content-wrapper">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Select Shop</label>
                                                    <select class="form-control" id="exampleFormControlSelect1" v-model="selectedShop">
                                                      <option v-for="shop in shopList" :value="shop.id">
                                                       {{shop.name}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Start Date</label>
                                                    <input type="date" class="form-control" placeholder="Select Start Date" v-model="startDate">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">End Date</label>
                                                    <input type="date" class="form-control" placeholder="Select End Date" v-model="endDate">
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button class="btn btn-primary" @click="getVouchers">Search</button>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-12 text-lg-right">
                                        <button class="btn btn-primary" @click="downloadPDF" v-if="tblData?.length > 0">Download Report</button>
                                    </div>
                                    <div class="col-12">
                                        <div class="table-responsive">
                                            <table id="order-listing" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Shop</th>
                                                        <th>RWP</th>
                                                        <th>RWP Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                       <tr v-for="item,index in tblData" :key="item.id">
                                                        <td>{{index+1}}</td>
                                                        <td>{{item.shop_name}}</td>
                                                        <td>{{item.rwp}}</td>
                                                        <td>{{item.rwp_amount}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <%- include ('../partials/footer.ejs'); %>

              </div>
        </div>
    </div>

    <%- include('../partials/footer_js.ejs'); %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
      integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
      crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script> -->
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
    <script src="https://unpkg.com/jspdf-autotable@2.3.1/dist/jspdf.plugin.autotable.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            shopList: [],
            selectedShop: '',
            startDate: '',
            endDate: '',
            tblData: [],
          }
        },
        mounted() {
        this.getData();
        },
        computed: {
        },
        methods: {
           
            getData(){
            // get data
            axios.get(`<%= url %>shop/listApiWthALLShop`)
            .then(response => {
                if(response?.data?.success === true){
                   this.shopList = response.data.data;
                    }else{
                        this.shopList = [];
                    }
                }) 
            },
            getVouchers(){
               axios.post(`<%= url %>invoice/RWPReportSummary`,
                {
                    shop_id: this.selectedShop,
                    from_date: this.startDate,
                    to_date: this.endDate
                })
                .then(response => {
                    if(response?.data?.success === true){
                        this.tblData = response.data.data;
                        if(response?.data?.data?.length === 0){
                                swal.fire({
                                    title: 'Error',
                                    text: "No data found",
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                })
                            }
                        }else{
                            this.tblData = [];
                             swal.fire({
                                    title: "Warning",
                                    text: response?.data?.message,
                                    type: 'warning',
                                    confirmButtonText: 'Ok'
                                })
                        }
                    })
                .catch(function (error) {
                    swal.fire(
                    'Error!',
                    'Something went wrong.',
                    'error'
                    )
                })
            },

            getVoucher(id){
                location.href = `<%= url %>invoice/details/${id}`;
            },
            downloadPDF() {
                if(this.tblData?.length > 0){
                    // this.tblData.forEach(function(item,index){
                    //     item.receiving_date_modified = moment(item.receiving_date).format('DD/MM/YYYY ~ hh:mm A');
                    // });
                    const columns = [
                        { title: "Shop.", dataKey: "shop_name" },
                        { title: "RWP.", dataKey: "rwp" },
                        { title: "RWP Amount", dataKey: "rwp_amount" },
                    ];
                    
                    var doc = new jsPDF('p', 'pt');

                    var startingPage = doc.internal.getCurrentPageInfo().pageNumber;

                    doc.autoTable(columns, this.tblData, {
                        showHeader: 'firstPage',
                        styles: { fontSize: 10 },
                        avoidPageSplit: true,
                        margin: { top: 100 }
                    });
            
                    doc.save(`invoice.pdf`);
                }else {
                    alert("No data to download");
                }   
            },
        
        },
      })
    </script>
  </body>

</html>