<button class="btn btn-primary mb-2" onclick="export2csv()">Download csv</button>
<div class="col-md-12">
    <h4><div class="badge badge-info float-right " style="text-align: ">Total Row: {{ $otc_payment_logs->count() }}</div></h4>

</div>
<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>C Name</th>
                <th>username</th>
                <th>Reseller</th>
                <th>POP</th>
                <th>MR ID</th>
                <th>Entry BY</th>
                <th>Col By</th>
                <th>Package</th>
                <th style="max-width: 150px">Description</th>
                <th>Amount</th>
                <th>Diacount</th>


            </tr>


            @foreach ($otc_payment_logs as $p)
                    <tr>
                        <td>{{ $p->id }}</td>
                        <td class="text-center">{{ date('d-M-Y h:i:s A', strtotime($p->otc_payment_date)) }}</td>

                        <td>{{ $p->client->clientsinfo->clients_name ?? '' }}</td>
                        <td>{{ $p->client->userid ?? '' }}</td>
                        <td>{{ $p->client->pop->reseller->name ?? '' }}</td>
                        <td>{{ $p->client->pop->popname ?? '' }}</td>
                        <td>{{ $p->billpayment->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 style="max-width: 150px">{{$p->billpayment->description ?? ""}}</td>
                        <td class="text-right"> {{ $p->otc_payment }}</td>
                        <td class="text-right"> {{ $p->otc_discount }}</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"><b>Total:</b> </td>
                <td class="text-right"><b>{{ $otc_payment_logs->sum('otc_payment') }} TK</b></td>
                <td class="text-right"><b>{{ $otc_payment_logs->sum('otc_discount') }} TK</b></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", "otcReport.csv");
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }

    </script>
