<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">Vouchers List</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>#</th>
                                                        <th>Receive Date</th>
                                                        <th>Delivery Date</th>
                                                        <th>Voucher</th>
                                                        <th>Total Amount</th>
                                                        <!-- <th>Status</th> -->
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                       <tr v-for="item,index in tblData" :key="item.id">
                                                        <td>{{index+1}}</td>
                                                        <td>{{item.updated_at}}</td>
                                                        <td>{{item.delivery_date_time}}</td>
                                                        <td>{{'INV-'+item.id}}</td>
                                                        <td>{{item.sub_total}}</td>
                                                        <!-- <td>{{item.status}}</td> -->
                                                        <td>
                                                            <button class="btn btn-primary" @click="getVoucher(item.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>
      new Vue({
        el: '#app',
        data() {
          return {
            shopList: [],
            selectedShop: '',
            startDate: '',
            endDate: '',
            tblData: [],
          }
        },
        mounted() {
        this.getData();
        },
        computed: {
        },
        methods: {
            // readyForDelivery(id) {
            //     console.log('id', id);
            //     swal.fire({
            //         title: 'Are you sure?',
            //         text: "Are you ready for delivery?",
            //         type: 'warning',
            //         showCancelButton: true,
            //         confirmButtonColor: '#3085d6',
            //         cancelButtonColor: '#d33',
            //         confirmButtonText: 'Yes, Proceed!'
            //     }).then((result) => {
            //         if (result.value) {
            //         axios.post('<%= url %>factory/delivery-to-customer/',
            //         {
            //             invoice: id
            //         })
            //         .then(response => {
            //             console.log(response);
            //             if(response?.data?.success === true){
            //                 swal.fire({
            //                     title: 'Success!',
            //                     text: response.data.message,
            //                     type: 'success',
            //                     confirmButtonText: 'OK'
            //                 }).then(function(){
            //                     window.location.reload();
            //                 })
            //                 }else{
            //                     swal.fire({
            //                         title: 'Error!',
            //                         text: response.data.message,
            //                         type: 'error',
            //                         confirmButtonText: 'OK'
            //                     })
            //                 }
            //             })
            //         .catch(function (error) {
            //             swal.fire(
            //             'Error!',
            //             'Something went wrong.',
            //             'error'
            //             )
            //         });
            //         }
            //     })
            // },
            
            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/oneTofive`,
                {
                    shop_id: this.selectedShop,
                    from_date: this.startDate,
                    to_date: this.endDate
                })
                .then(response => {
                    // console.log(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>