<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-8">
                                <h2 class="text-white font-weight-bold mb-1">Bill</h2>
                            </div>
                            <div class="pl-4">
                                <a class="btn btn-primary align-items-right" href="<%= url %>bill/list"> Previous bill records </a>
                            </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-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Net Mending Charge</label>
                                                    <input type="number" class="form-control" min="0"
                                                        max="30000000" value="0" step="any" placeholder="Net Mending Charge" v-model="netMendingCharge"  @change="netMendingCharge74Calculate"
                                                        required />
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Add : 74% of Net Mending Charge</label>
                                                    <input type="number" class="form-control" min="0"  v-model="netMendingCharge74"
                                                        max="30000000" value="0" step="any" placeholder="Add : 74% of Net Mending Charge" readonly
                                                        required />
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Add : Cost of accessories (Mending) </label>
                                                    <input type="number" class="form-control" min="0"   v-model="costOfAccessoriesMending"
                                                        max="30000000" value="0" step="any" placeholder="Add : Cost of accessories (Mending) "
                                                        required />
                                                </div>
                                            </div>


                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Less : Compensation (If any)</label>
                                                    <input type="number" class="form-control" min="0"  v-model="lessCompensation"
                                                        max="30000000" value="0" step="any" placeholder="Less : Compensation (If any)"
                                                        required />
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Less : Additional Share of Service @ 5% on the Last Month’s bill :</label>
                                                    <input type="number" class="form-control" min="0"   v-model="additionalShareOfService"
                                                        max="30000000" value="0" step="any" placeholder="Less : Additional Share of Service @ 5% on the Last Month’s bill :"
                                                        required />
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Add : Additional Charge @ 5% on arrer :</label>
                                                    <input type="number" class="form-control" min="0"  v-model="additionalCharge"
                                                        max="30000000" value="0" step="any" placeholder="Add : Additional Charge @ 5% on arrer :"
                                                        required />
                                                </div>
                                            </div>
                                            <!-- bankName -->

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">Bank Name</label>
                                                    <input type="text" class="form-control" min="0"  v-model="bankName"
                                                        max="" step="any" placeholder="Please give bank name."
                                                        required />
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1">A/C Number</label>
                                                    <input type="text" class="form-control" min="0"  v-model="accountNumber"
                                                        max="" step="any" placeholder="Please give bank name."
                                                        required />
                                                </div>
                                            </div>

                                           
                                        
                                            <div class="col-12">
                                                <button class="btn btn-primary" @click="voucherGenerate">Search</button>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-12 text-lg-right">
                                        <button class="btn btn-primary" @click="downloadPDF" v-if="tblData?.length > 0 && this.tempAlreadySaveFlag != true">Save and Download Report.</button>
                                        <button class="btn btn-primary" @click="downloadPDF" v-if="tblData?.length > 0 && this.tempAlreadySaveFlag == true"> Download Report.</button>
                                    </div>

                                 

                                    <div class="col-8" v-if="finalInvoiceOutput != undefined">
                                        <div class="table-responsive">
                                            <table id="order-listingsadasd" class="table">
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Voucher Qty</td>
                                                        <td>{{ tblData[0]?.total_invoice }} </td>
                                                        <!-- <td>{{ amount.quantity }} </td> -->
                                                    </tr>
                                                    
                                                    <tr>
                                                        <td>Total Item Qty</td>
                                                        <!-- <td>{{ tblData[0]?.total_invoice }} </td> -->
                                                        <td>{{ amount.quantity }} </td>
                                                    </tr>

                                                    <tr>
                                                        <td> Net Sales Amount</td>
                                                        <td> {{ finalInvoiceOutput[0] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td> Net Mending Charge </td>
                                                        <td>{{ finalInvoiceOutput[1] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>  74% of Net Sales Amount : </td>
                                                        <td>{{ finalInvoiceOutput[2] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>  Add : 74% of Net Mending Charge : </td>
                                                        <td>{{ finalInvoiceOutput[3] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>  Add : Cost of accessories (Mending) : </td>
                                                        <td>{{ finalInvoiceOutput[4] }}</td>
                                                    </tr>

                                                    <tr>
                                                        <td> Total 165,216.84 Rounded off</td>
                                                        <td>{{ finalInvoiceOutput[5] }}</td>
                                                    </tr>

                                                    <tr>
                                                        <td>  Less : Compensation (If any) :</td>
                                                        <td>{{ finalInvoiceOutput[6] }}</td>
                                                    </tr>

                                                    <!-- <tr>
                                                        <td> </td>
                                                        <td>{{ finalInvoiceOutput[7] }}</td>
                                                    </tr> -->

                                                    <tr>
                                                        <td>  Total Receivable for the Period</td>
                                                        <td>{{ finalInvoiceOutput[7] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>  Less : Additional Share of Service @ 5% on the Last Month’s bill : </td>
                                                        <td>{{ finalInvoiceOutput[8] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>  Add : Additional Charge @ 5% on arrer :  </td>
                                                        <td>{{ finalInvoiceOutput[9] }}</td>
                                                    </tr>

                                                    <tr>
                                                        <td> Net Receivable for the Period   </td>
                                                        <td>{{ finalInvoiceOutput[10] }}</td>
                                                    </tr>

                                                    <tr>
                                                        <td> TOTAL </td>
                                                        <td style="font-weight: bold">{{ finalInvoiceOutput[11] }}</td>
                                                    </tr>
                                       
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <!-- <div class="col-12">
                                        <div class="table-responsive">
                                            <table id="order-listing" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Invoice</th>
                                                        <th>Article Qty</th>
                                                        <th>RWP Qty</th>
                                                        <th>RWP Amount</th>
                                                        <th>NCA Qty</th>
                                                        <th>NCA Amount</th>
                                                        <th>Sub. Total</th>
                                                        <th>Discount</th>
                                                        <th>Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                       <tr v-for="item,index in tblData" :key="item.id">
                                                        <td>{{item.total_invoice}}</td>
                                                        <td>{{item.artical_qty}}</td>
                                                        <td>{{item.rwp}}</td>
                                                        <td>{{item.rwp_amount}}</td>
                                                        <td>{{item.nca}}</td>
                                                        <td>{{item.nca_amount}}</td>
                                                        <td>{{item.sub_total}}</td>
                                                        <td>{{item.discount}}</td>
                                                        <td>{{item.total}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div> -->

                                    <!-- <div class="col-12 mt-5"> 
                                        <div class="container-fluid mt-5 w-100" v-if="amount?.total">
                                            <p class="text-right">Total RWP Qty: {{amount.totalRwp}} </p> 
                                            <p class="text-right">Total RWP Amount: {{amount.totalRwpAmount}} TK </p> 
                                            <p class="text-right">Total Qty : {{amount.quantity}} </p> 
                                            <p class="text-right">Sub Total  : {{amount?.subTotal}} TK</p> 
                                            <h4 class="text-right mb-5">Total : {{amount?.total}} TK</h4>
                                        </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@2.3.1/dist/jspdf.es.min.js"></script> -->
    <!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script> -->
    <script src="https://unpkg.com/jspdf-autotable@3.5.14/dist/jspdf.plugin.autotable.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            shopList: [],
            selectedShop: '',
            startDate: '',
            endDate: '',
            tblData: [],
            netMendingCharge : 0,
			netMendingCharge74 : 0,
			costOfAccessoriesMending : 0,
			lessCompensation : 0,
			additionalShareOfService : 0,
			additionalCharge : 0,
            finalInvoiceOutput: undefined,
            bankName: "United Commercial Bank Limited",
            accountNumber: "0722 101 000000598",
            willPrintFlag: false,
            tempAlreadySaveFlag: false,
            bill_no: "",
            amount: {
                total : '',
                subTotal : '',
                totalRwp: 0,
                totalRwpAmount: 0,
                quantity: 0,
            }
          }
        },
        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;
                   

                   if(this.shopList.length > 0) {
                    this.selectedShop = this.shopList[0].id;
                   } 

                    }else{
                        this.shopList = [];
                    }
                }) 
            },

            async voucherGenerate(){
                this.tempAlreadySaveFlag = false;
                this.willPrintFlag = false;
                await this.getVouchers(false);
            },

            async netMendingCharge74Calculate(){
                this.netMendingCharge74 = this.netMendingCharge * .74;
                console.log("come")
            },

            async getVouchers(willSave){
               await axios.post(`<%= url %>invoice/billReport`,
                {
                    shop_id: this.selectedShop,
                    from_date: this.startDate,
                    to_date: this.endDate,
                    netMendingCharge: this.netMendingCharge,
					netMendingCharge74: this.netMendingCharge74,
					costOfAccessoriesMending: this.costOfAccessoriesMending,
					lessCompensation: this.lessCompensation,
					additionalShareOfService: this.additionalShareOfService,
					additionalCharge: this.additionalCharge,
                    willSave: willSave,
                    bankName: this.bankName,
                    accountNumber: this.accountNumber
                })
                .then(response => {
                    if(response?.data?.success === true){

                        if(willSave == true){
                            this.tempAlreadySaveFlag = true;
                            this.willPrintFlag = true;
                        }

                        this.tblData = response.data.data;
                        this.amount.subTotal = response.data.cumulativeSubTotal;
                        this.amount.total = response.data.cumulativeTotal;
                        this.amount.totalRwp = response.data.totalRwp;
                        this.amount.totalRwpAmount = response.data.totalRwpAmount;
                        this.amount.quantity = response.data.quantity;
                        this.finalInvoiceOutput = response.data.finalResult;
                        this.bill_no = response.data?.bill_no;
                        if(response?.data?.data?.length === 0){
                                swal.fire({
                                    title: 'Error',
                                    text: "No data found",
                                    type: 'error',
                                    confirmButtonText: 'Ok'
                                })
                            }
                        }else{
                            if(willSave == true){
                                    this.tempAlreadySaveFlag = false;
                                    this.willPrintFlag = false;
                            }

                            this.tblData = [];
                            this.finalInvoiceOutput = undefined;
                             swal.fire({
                                    title: "Warning",
                                    text: response?.data?.message,
                                    type: 'warning',
                                    confirmButtonText: 'Ok'
                                })
                        }
                    })
                .catch(function (error) {
                    if( willSave == true){
                            this.tempAlreadySaveFlag = false;
                            this.willPrintFlag = false;
                    }
                    swal.fire(
                    'Error!',
                    'Something went wrong.',
                    'error'
                    )
                })
            },

            getVoucher(id){
                location.href = `<%= url %>invoice/details/${id}`;
            },

            async downloadPDF() {

                if(this.tempAlreadySaveFlag != true){
                    await this.getVouchers(true);
                }


                if(this.willPrintFlag){

                let shopName = "For all shop.";
                let tableHight = 0;
                let tableMeta = null;

                if( this.selectedShop === 0){
                    shopName = "For all shop.";
                } else {
                    for(let i = 0 ; i < this.shopList.length; i++){
                        if(this.selectedShop === this.shopList[i].id ){
                            shopName = this.shopList[i].name;
                    }
                   }
                }


                if(this.tblData?.length > 0){

                    // let defaultHight1 = 30;
                    // let defaultWight1 = 15;
                    // let defaultWight2 = 200;
                    // let defaultWight3 = 329;

                    // let defaultBoxHight1 = 20;
                    // let defaultBoxWight1 = 20;

                    let defaultHight1 = 90;
                    let defaultWight1 = 35;
                    let defaultWight2 = 230;
                    let defaultWight3 = 369;

                    let defaultBoxHight1 = 60;
                    let defaultBoxWight1 = 35;
                    
                    
                    
                var doc = new jsPDF('p', 'pt');

                var startingPage = doc.internal.getCurrentPageInfo().pageNumber;
                var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
                var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();

                doc.text("Bill", (pageWidth/2) - 5 , 33 + defaultHight1, { align: 'center' });
                doc.setFontSize(12);

                doc.text("Bill No: " + this.bill_no , defaultWight1 , 50 + defaultHight1, { align: 'center' });
          
                doc.text("Shop Name: ", defaultWight1,  75 + defaultHight1, { align: 'center' });
                doc.text( shopName , defaultWight2 ,  75 + defaultHight1, { align: 'center' });

                doc.setFontSize(9.5);

                doc.text("Date: ", defaultWight1,  100 + defaultHight1, { align: 'center' });
                doc.text( moment(Date()).format('DD MMMM, YYYY'), defaultWight2 ,  100 + defaultHight1, { align: 'center' });

                doc.text("Billing Period: " , defaultWight1,  125 + defaultHight1, { align: 'center' });

                doc.text(  moment(this.startDate).format('DD MMMM, YYYY') + " to " +   moment(this.endDate).format('DD MMMM, YYYY'),
                       defaultWight2 ,  125 + defaultHight1, { align: 'center' });

                doc.text("Voucher Qty: ", defaultWight1,  145 + defaultHight1, { align: 'center' });
                doc.text(this.tblData[0].total_invoice + "", defaultWight2 ,  145 + defaultHight1, { align: 'center' });
               
                doc.text("Total Item Qty: ", defaultWight1,  160 + defaultHight1, { align: 'center' });
                doc.text(this.amount.quantity + "", defaultWight2 ,  160 + defaultHight1, { align: 'center' });


                doc.setFontSize(8.5);

                doc.text("Net Sales Amount: ", defaultWight1,  190 + defaultHight1, { align: 'center' });
                doc.text(this.finalInvoiceOutput[0] + "" , defaultWight3 ,  190 + defaultHight1, { align: 'right' });
                
                
                doc.text("Net Mending Charge: " , defaultWight1,  200 + defaultHight1, { align: 'center' });
                doc.text(this.finalInvoiceOutput[1] + "" , defaultWight3 ,  200 + defaultHight1, { align: 'right' });
                
                doc.text("74% of Net Sales Amount : " , defaultWight1,  230 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[2] , defaultWight3 ,  230 + defaultHight1, { align: 'center' });
                
                doc.text("Add : 74% of Net Mending Charge : " , defaultWight1,  245 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[3] , defaultWight3 ,  245 + defaultHight1, { align: 'center' });


                doc.text("Add : Cost of accessories (Mending) : ", defaultWight1,  260 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[4] , defaultWight3 ,  260 + defaultHight1, { align: 'center' });
               
                doc.text("Total Taka ", defaultWight1,  275 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[5] , defaultWight3 ,  275 + defaultHight1, { align: 'center' });
               
                doc.text("Less : Compensation (If any) : ", defaultWight1,  290 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[6] , defaultWight3 ,  290 + defaultHight1, { align: 'center' });
               
                doc.text("Total Receivable for the Period:", defaultWight1,  305 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[7] , defaultWight3 ,  305 + defaultHight1, { align: 'center' });
              
                doc.text("Less : Additional Share of Service @ 5% on the Last Month’s bill : " , defaultWight1,  320 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[8] , defaultWight3 ,  320 + defaultHight1, { align: 'center' });
               
                doc.text("" + this.finalInvoiceOutput[9] , defaultWight3 ,  335 + defaultHight1, { align: 'center' });
              
              
                doc.text("Add : Additional Charge @ 5% on arrer :" , defaultWight1,  350 + defaultHight1, { align: 'center' });
                doc.text("" + this.finalInvoiceOutput[10] , defaultWight3 ,  350 + defaultHight1, { align: 'center' });
                doc.text("Net Receivable for the Period: " , defaultWight1,  365 + defaultHight1, { align: 'center' });
                doc.setFont(undefined, 'bold');
                doc.text("" + this.finalInvoiceOutput[11] , defaultWight3 ,  365 + defaultHight1, { align: 'center' });
               
                doc.setFont(undefined, 'normal');
                doc.setFontSize(11);
                doc.text("( TK. " + this.finalInvoiceOutput[12] + " ONLY. )"  , defaultWight1 ,  390 + defaultHight1, { align: 'center' });
                
                doc.text("Please pay in Cash or A/C payee cheque infavour of Topclean Bangladesh Limited &"  , defaultWight1 ,  405 + defaultHight1, { align: 'center' });
                doc.text("Deposit into our Bank account as detail below :"  , defaultWight1 ,  420 + defaultHight1, { align: 'center' });
               

                doc.setFontSize(9);
                doc.text("Bank Details"  , defaultWight1 ,  450 + defaultHight1, { align: 'center' });
                doc.text("Topclean Bangladesh Limited"  , defaultWight1 ,  465 + defaultHight1, { align: 'center' });
                
                doc.text("A/C # " + this.accountNumber  , defaultWight1 ,  485 + defaultHight1, { align: 'center' });
                doc.text( this.bankName , defaultWight1 ,  500 + defaultHight1, { align: 'center' });

                
                doc.text( "------------------------------------------------------" , defaultWight1 ,  560 + defaultHight1, { align: 'center' });
                doc.text( "Authorized Signature" , defaultWight1 + 40 ,  570 + defaultHight1, { align: 'center' });
                doc.text( "Note: If any Query about the bill, please contact with the signatory without any hesitation." , defaultWight1 ,  595 + defaultHight1, { align: 'center' });

                // Box drowing 
                // start width, start height,  box width, box height
                doc.rect( (defaultBoxWight1 + 310), (defaultBoxHight1 + 250), 80, 45);
                doc.rect( (defaultBoxWight1 + 310), (defaultBoxHight1 + 325), 80, 30);
                doc.rect( (defaultBoxWight1 -5), (defaultBoxHight1 + 503), 180, 30);


                let pageCount = doc.internal.getNumberOfPages();
                for(var i = 1; i <= pageCount; i++) {
                      doc.setPage(i);
                      doc.setTextColor(100);
                      doc.setFontSize(10);
                      doc.text("Page " + i  + " of " +  pageCount, 50, pageHeight  - 10, {align: 'left'});
                      doc.text(Date(), pageWidth/2 - 30, pageHeight  - 10, {align: 'right'});
                  }

                

                  let startDate =  moment(this.startDate).format('DD MMMM, YYYY');
                  let endDate =  moment(this.startDate).format('DD MMMM, YYYY');

                  this.willSave = false;

                  doc.save(`Bill Report Shop ${shopName}, ${startDate} to ${endDate}.pdf`);
                }else {
                    alert("No data to download");
                }  

                } else {

                }

          
            },
          
        },
      })
    </script>
  </body>

</html>