<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">Group Wise Clients List</h2>
                      </div>
                    </div>
                  </div>


                  <div class="content-wrapper">
                    <div class="card">
                      <div class="card-body">

                        <div class="row">
                          <div class="col-12">
                            <div class="table-responsive">
                              <table id="order-listing" class="table table-striped table-bordered table-hover">
                                <thead>
                                  <tr>
                                    <th>#</th>
                                    <th>Group Title</th>
                                    <th>Total Client No</th>
                                    <th>Action</th>
                                  </tr>
                                </thead>
                                <tbody>

                                  <% for(let i=0; i < data.length; i++) { %>
                                    <tr>
                                      <td>
                                        <%= i + 1 %>
                                      </td>
                                      <td>
                                        <%= data[i].group_title %>
                                      </td>
                                      <td>
                                        <%= data[i].total %>
                                      </td>
                                      <td>
                                        <button @click="getDataForPrint(<%= data[i].id %>)" class="btn btn-success "><i class="mdi mdi-telegram mr-1"></i>Download Client List</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://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/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>
        const options = [
          { value: 'chocolate', label: 'Chocolate' },
          { value: 'strawberry', label: 'Strawberry' },
          { value: 'vanilla', label: 'Vanilla' }
        ];
        new Vue({
          el: "#app",
          data() {
            return {
              printedArray: [],
              printedHeaderOBJ: {},
            };
          },
          mounted() {
            // get initial data
          },
          computed: {},
          methods: {
            // submit form
            getDataForPrint(id = 0) {

           //   const url = new URL(location.href);
           //   let id = url.pathname.split('/');
           //   id = id[id.length - 1];

              axios.post('<%= url %>client/group-wise-list/download', {
                "id": id
              })
                .then((response) => {
                  console.log(response);
                  console.log(response?.data?.data);
                  this.messageHint = response?.data?.message;
                  // this.toBePrintItems = this.items;
                  this.printedArray = response?.data?.data;

                  this.printedHeaderOBJ = {
                    generate_date_time: response.data.generate_date_time,
                    group_name: response.data.group_name,
                    id: response.data.id,
                  }

                  console.log("will call ")
                  this.downloadPDF();
                  console.log("called ")

                }, err => {
                  console.log(err);
                  if (err.response.data.success === false) {
                    console.log(err.response.data.success === false)
                    this.messageHint = err.response.data.message;
                  }
                })

              // test
              // console.log('recieve-amount'+)
            },


            // download pdf
            downloadPDF() {
              if (this.printedArray?.length > 0) {
                const columns = [
                  { title: "Name", dataKey: "name" },
                  { title: "Mobile", dataKey: "mobile_no" },
                  { title: "Discount", dataKey: "discount" },
                  { title: "Client Id", dataKey: "client_id" }
                ];

                var doc = new jsPDF('p', 'pt', 'a4', true);
                var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
                var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();

                var startingPage = doc.internal.getCurrentPageInfo().pageNumber;
                let printedHeaderOBJ = this.printedHeaderOBJ;
                doc.setFontSize(14);

                doc.text("Group Wise Client Report", (pageWidth / 2) - 40 , 50, { align: 'center' });
                doc.setFontSize(12);

                doc.text("Group Title: "+ printedHeaderOBJ.group_name, 50, 90, { align: 'right' });
                doc.text("Total Client: "+ this.printedArray.length, 50, 105, { align: 'right' });

                doc.autoTable(columns, this.printedArray, {
                  showHeader: true,
                  styles: { fontSize: 12 },
                  avoidPageSplit: true,
                  margin: { top: 130}, //304
                });

                // doc.setPage(startingPage);

                doc.setTextColor(100);
                doc.setFontSize(10);

                let pageCount = doc.internal.getNumberOfPages();
                console.log("page count: " + pageCount)
                for(var i = 1; i <= pageCount; i++) {
                  doc.setPage(i);
                  doc.text("Page " + i  + " of " +  pageCount, 50, pageHeight  - 10, {align: 'left'});
                  doc.text("Report Generate Time: "+ printedHeaderOBJ.generate_date_time, pageWidth/2, pageHeight  - 10, {align: 'right'});
              }

        
                doc.save(`group(${printedHeaderOBJ.group_name})-wise-list-report, Generate-time: ${printedHeaderOBJ.generate_date_time}.pdf`);
              } else {
                alert("No data to download");
              }
            },
          },
        });
      </script>

  </body>

</html>