<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">Recieve Report</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">
                                        <div class="table-responsive">
                                            <table id="order-listing" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Invoice</th>
                                                        <th>Receive Date</th>
                                                        <th>Article Qty</th>
                                                        <th>RWP Amount</th>
                                                        <th>NCA Amount</th>
                                                        <th>Discount</th>
                                                        <th>Total</th>
                                                        <th>Sub. Total</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                       <tr v-for="item,index in tblData" :key="item.id">
                                                        <td>{{'INV-'+item.invoice_id}}</td>
                                                        <td>{{ moment(item.receiving_date).format('DD/MM/YYYY ~ hh:mm A') }}</td>
                                                        <td>{{item.artical_qty}}</td>
                                                        <td>{{item.rwp_amount}}</td>
                                                        <td>{{item.nca_amount}}</td>
                                                        <td>{{item.discount}}</td>
                                                        <td>{{item.total}}</td>
                                                        <td>{{item.sub_total}}</td>
                                                        <td>
                                                            <button class="btn btn-primary" @click="getVoucher(item.invoice_id)">View</button>
                                                        </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>
      new Vue({
        el: '#app',
        data() {
          return {
            shopList: [],
            selectedShop: '',
            startDate: '',
            endDate: '',
            tblData: [],
          }
        },
        mounted() {
        this.getData();
        },
        computed: {
        },
        methods: {
           
            getData(){
            // get data
            axios.get(`<%= url %>shop/listApi`)
            .then(response => {
                // console.log(response);
                if(response?.data?.success === true){
                   this.shopList = response.data.data;
                    }else{
                        this.shopList = [];
                    }
                }) 
            },
            getVouchers(){
               axios.post(`<%= url %>invoice/receiveReport`,
                {
                    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}`;
            }
        },
      })
    </script>
  </body>

</html>