<button class="btn btn-primary mb-2" onclick="export2csv()">Download csv</button>

<div id="paymenthistory" class="mt-10">
    <div class="table-responsive">
        <table class="table table-bordered " id="tableDownload">
            <tr>
                <th>#id</th>
                <th>Date</th>
                <th>Type</th>
                <th>C Name</th>
                <th>username</th>
                <th>Reseller</th>
                <th>POP</th>
                <th>MR ID</th>
                <th>Col By</th>
                <th>Entry BY</th>
                <th>Package</th>
                <th>Amount</th>
                <th>Discount</th>
                <th>Due</th>
            </tr>

            @php($totalDue = 0 )
            @foreach ($list as $p)
                    <tr>
                        <td>{{ $p->id }}</td>
                        <td class="text-center">{{ date('d-M-Y h:i:s A', strtotime($p->created_at)) }}</td>
                        <td>{{ $p->income->head->name ?? '' }}</td>
                        <td>{{ $p->clientsinfo->clients_name ?? '' }}</td>
                        <td>{{ $p->clients->userid ?? '' }}</td>
                        <td>{{ $p->clients->pop->reseller->name ?? '' }}</td>
                        <td>{{ $p->clients->pop->popname ?? '' }}</td>
                        <td>{{ $p->money_receipt_number }}</td>
                        <td>{{ $p->user->name ?? '' }}</td>
                        <td class="text-center">{{ $p->employee->name ?? '' }}</td>
                        <td> {{ $p->clients->packages->package_name ?? '' }}</td>
                        <td class="text-right"> {{ $p->paid_amount }}</td>
                        <td class="text-right"> {{ $p->discount_amount }}</td>
                        <td class="text-right">
                             {{ $p->clients->customerAccount->dueAmount > 0 ? $p->clients->customerAccount->dueAmount : 0 }}
                            @php($totalDue+= ($p->clients->customerAccount->dueAmount > 0 ? $p->clients->customerAccount->dueAmount : 0) )
                             {{-- @php() --}}
                        </td>
                    </tr>
           
            @endforeach
            
            <tr class="hidden">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td  class="text-right">Total Amount: </td>
                <td class="text-right">{{ $list->sum('paid_amount') }} TK</td>
                <td class="text-right">{{ $list->sum('discount_amount') }} TK</td>
                <td class="text-right">{{ $totalDue }} TK</td>
            </tr>
        </table>
    </div>
</div>
<script>

    function export2csv() {
      let data = "";
      const tableData = [];
      const rows = document.querySelectorAll("table#tableDownload tr");
      for (const row of rows) {
        const rowData = [];
        for (const [index, column] of row.querySelectorAll("th, td").entries()) {
          // To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
          if ((index + 1) % 3 === 0) {
            rowData.push('"' + column.innerText + '"');
          } else {
            rowData.push(column.innerText);
          }
        }
        tableData.push(rowData.join(","));
      }
      data += tableData.join("\n");
      const a = document.createElement("a");
      a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
      a.setAttribute("download", "data.csv");
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    
    </script>