<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">Non Conforming Articles (NCA)</h2>
                      </div>
                    </div>
                  </div>

                  <div class="content-wrapper">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="card px-2">
                          <div class="card-body">
                            <div class="container-fluid">
                              <div class="row">
                                <div class="col-lg-3">
                                  <div class="d-flex">
                                    <h2 class="text-right my-5">Voucher No: &nbsp;&nbsp;<%= data.inv_no %></h2>
                                  </div>
                                </div>
                                <div class="col-lg-9">
                                  <!-- <h3 class="text-right my-5">Voucher&nbsp;&nbsp;#INV-17</h3> -->
                                </div>
                              </div>
                              <hr>
                            </div>
                            <div class="container-fluid d-flex justify-content-between">
                              <div class="col-lg-3 pl-0">
                                <p class="mt-5 mb-2"><b>Shop Address</b></p>
                                <p>104,<br>Minare SK,<br>Canada, K1A 0G9.</p>
                              </div>
                              <div class="col-lg-3 pr-0">
                                <p class="mt-5 mb-2 text-right"><b>Client Details</b></p>
                                <p class="text-right"><%= data.client.name %><br> <%= data.client.address %><br> <%= data.client.mobile_no %></p>
                              </div>
                            </div>
                            <div class="container-fluid d-flex justify-content-between">
                              <div class="col-lg-3 pl-0">
                                <p class="mb-0 mt-5">Receiving Date : <%= moment(data.created_at).format('DD MMM, YYYY ( hh:mm A)') %></p>
                                <p>Delivery Date : <%= moment(data.delivery_date_time).format('DD MMM, YYYY') %></p>
                            </div>
                            </div>
                            <div class="d-flex">
                              <div class="container-fluid mt-12 d-flex justify-content-center col-lg-12">
                                <div class="table-responsive w-100">
                                  <table class="table">
                                    <thead>
                                      <tr class="bg-dark text-white">
                                        <th>#</th>
                                        <th class="text-right">Product</th>
                                        <th class="text-right">Type</th>
                                        <th class="text-right">S/I*</th>
                                        <th class="text-right">Rate</th>
                                        <th class="text-right">Qty</th>
                                        <th class="text-right">RFT Qty</th>
                                        <th class="text-right">Amount</th>
                                        <th class="text-right">RWP</th>
                                        <th class="text-right">RWP Reason</th>
                                        <th class="text-right">NCA</th>
                                        <th class="text-right">NCA Amount</th>
                                        <th class="text-right">NCA Reason</th>
                                        <th class="text-right">Action</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr v-for="item,index in tblData.items" class="text-right">
                                        <td class="text-left">{{index+1}}</td>
                                        <td>{{item.product_name}}</td>
                                        <td>{{item.product_prices_type_title}}</td>
                                        <td>{{item.service_instructions_title}}</td>
                                        <td>{{item.price}}</td>
                                        <td>{{item.qty}}</td>
                                        <td>{{item.rft_quantity}}</td>
                                        <td>{{item.total}}</td>
                                        <td>{{item.rwp}}</td>
                                        <td>{{item.rwp_reason}}</td>
                                        <td>{{item.nca}}</td>
                                        <td>{{item.nca_amount}}</td>
                                        <td>{{item.nca_reason}}</td>
                                        <td>
                                          <button class="btn btn-sm btn-outline-primary" 
                                          @click.prevent="editAction(invID,item.id,item.nca,item.nca_reason, item.nca_amount)">
                                          Edit
                                        </button>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                               
                              </div>
                            </div>
                            <div class="container-fluid mt-5 w-100">
                              <p class="text-right mb-2">Sub-Total amount: <%= data.sub_total %> Tk</p>
                              <p class="text-right">Discount (<%= data.discount_percent %>%) : <%= data.discount_amount %> TK</p>
                              <!-- <h4 class="text-right mb-5">Total : <%= data.total %> TK</h4> -->
                              <h4 v-if="tblData.total !== undefined" class="text-right">
                                {{ tblData.total }} Tk
                              </h4>
                              <h4 v-else class="text-right mb-5">Total : <%= data.total %> TK</h4>
                              
                              <hr>
                            </div>
                            <div class="container-fluid w-100">
                              <button class="btn btn-sm btn-outline-primary" @click.prevent="saveAction">Save</button>
                              <a href="#" class="btn btn-primary float-right mt-4 ml-2"><i
                                  class="mdi mdi-close mr-1"></i>Close</a>
                              <a href="#" class="btn btn-success float-right mt-4"><i
                                  class="mdi mdi-undo mr-1"></i>Return</a>
                            </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 {
              clientName: '',
              clientInputData: '',
              clientId: undefined,
              clientDetails: {},
              invID: '<%= data.id %>',
              tblData: [],  
            }
          },
          mounted() {
            // console.log(this.invID);
            this.getTblDetails();
          },
          computed: {
          },
          methods: {
            async getClientInfo() {
              this.clientId = undefined;
              this.clientName = '';
              await axios({
                method: 'post',
                url: '<%= url %>client/clientSearch',
                data: {
                  searchData: this.clientInputData,
                }
              }).then(async (response) => {
                if (response.data.success === true && response.data.data.length > 0) {
                  this.clientDetails = response.data.data[0];
                  this.clientId = this.clientDetails.id;
                  this.clientName = this.clientDetails.name;
                } else {
                  this.clientDetails = {};
                  this.clientId = undefined;
                  this.clientName = '';
                }
              }).catch(function (response) {
                console.log(response);
              });
            },

            getClientName() {
              return this.clientName;
            },
            getTblDetails(){
              axios.post('<%= url %>nca/process-data', {
                id: this.invID
              }).then(response => {
                if (response.data.success === true) {
                  this.tblData = response.data.data;
                  // console.log(this.tblData);
                }
                else this.tblData = [];
              });
            },
            editAction(invID, id, nca, nca_reason, nca_amount) {
              swal.fire({
                title: 'Edit Invoice',
                html:
                  '<div class="form-group">' +
                  '<label for="nca">NCA</label>' +
                  '<input type="text" class="form-control" id="nca" value="' + nca + '">' +
                  '</div>' +
                  '<div class="form-group">' +
                  '<label for="nca_reason">NCA Reason</label>' +
                  '<input type="text" class="form-control" id="nca_reason" value="' + nca_reason + '">' +
                  '</div>'+
                  '<div class="form-group">' +
                  '<label for="nca_amount">NCA Amount</label>' +
                  '<input type="number" min="0" class="form-control" id="nca_amount" value="' + nca_amount + '">' +
                  '</div>',
                focusConfirm: false,
                showCancelButton: true,
                confirmButtonText: 'Submit',
                cancelButtonText: 'Cancel',
                preConfirm: () => {
                  return {
                    nca: document.getElementById('nca').value,
                    nca_reason: document.getElementById('nca_reason').value,
                    nca_amount: document.getElementById('nca_amount').value,
                    id: id
                  }
                }
              }).then((result) => {
                if (result.value) {
                  // console.log(result.value);
                  let invoice_id = invID;
                  let item_list = [{
                    id: result.value.nca,
                    nca_reason: result.value.nca_reason,
                    nca_amount: result.value.nca_amount,
                    nca_no: result.value.id
                  }];
                  let data = {
                    invoice_id: invoice_id,
                    item_list: item_list
                  };
                  
                  if(nca_amount != 0 && !isNaN(parseInt(nca_amount)) ){
                    
                  }

                  this.tblData.items = this.tblData.items.map(item => {
                    if (item.id === result.value.id) {
                      item.nca = result.value.nca;
                      item.nca_reason = result.value.nca_reason;
                      item.nca_amount = result.value.nca_amount;
                    }
                    return item;
                  });
                }
              })
            },
            saveAction(){
              let invoice_id = this.invID;
              let item_list = this.tblData.items.map(item => {
                return {
                  id: item.id,
                  nca_no: Number(item.nca),
                  nca_reason: item.nca_reason,
                  nca_amount: item.nca_amount
                }
              });
              console.log(item_list);
              let data = {
                invoice_id: invoice_id,
                item_list: item_list
              };
              console.log(data);
              axios.post('<%= url %>nca/process', data).then(response => {
                if (response.data.success === true) {
                  swal.fire({
                    title: 'Success',
                    text: 'NCA has been saved',
                    type: 'success',
                    confirmButtonText: 'OK'
                  })
                  this.getTblDetails();
                }
                else this.getTblDetails();
              });
            },
          }
        })
      </script>

  </body>

</html>