@if(checkSettings('enforce-download-permission') != 'enable' || auth()->user()->can('payment-report-download'))
<button class="btn btn-primary mb-2" onclick="export2csv()">Download csv</button>
@endif

<div id="paymenthistory" class="mt-10">
    <div class="table-responsive">
        <table class="table table-bordered " id="tableDownload">
            <tr>
              <th>CID</th>
                <th>Username</th>
                <th>total bill</th>
                <th>total paid</th>
                <th>Due</th>


                <th>Due Amount</th>
            </tr>

            @php($totalDue = 0 )

            @foreach ($list as $key =>  $p)

            {{-- @if( ($p['dueAmount'] ?? 0 ) > ( $p['due'] ?? 0)) --}}


            <tr>
              <td>{{ $key }}</td>
              <td>{{ $p['userid'] ?? 0 }} </td>
              <td class="bill">{{ $p['total_bill'] ?? 0}} </td>
              <td class="paid">{{ $p['total_paid'] ?? 0 }} </td>
              <td class="due">{{  ($p['total_bill'] ?? 0) - ($p['total_paid'] ?? 0) }} </td>
              <td class="dueamount">{{ $p['dueAmount'] ?? 0 }} </td>
          </tr>

          {{-- @endif --}}

           
            @endforeach
            
            <tr>
              <td></td>
                <td  class="text-right">Total: </td>
                <td  class="totalBill"></td>
                <td  class="totalPaid"></td>
                <td class="totaldue"> TK</td>
                <td class="totaldueamount"> TK</td>
            </tr>
            <tr>
              <td></td>
              <td  class="text-right">Total Amount: </td>
              
              <td  colspan="2" class="countdue"></td>
              <td class="actualdue"></td>
              <td class="actualdueamount"></td>
          </tr>


        </table>
    </div>
</div>
<script>

  $(function(){
    let totalbill = 0;
    let totalpaid = 0;
    let due = 0;
    let countdue = 0;
    let dueamount = 0;
    
    
    $('.bill').each(function(){
    var amount = parseInt($(this).text()) > 0 ? parseInt($(this).text()) : 0;
      totalbill += amount;
    });



    $('.paid').each(function(){
      var amount = parseInt($(this).text()) > 0 ? parseInt($(this).text()) : 0;
      totalpaid += amount;
    });

    $('.due').each(function(){
      var amount = parseInt($(this).text()) > 0 ? parseInt($(this).text()) : 0;
      due += amount;
    });

    $('.dueamount').each(function(){
      var amount = parseInt($(this).text()) > 0 ? parseInt($(this).text()) : 0;
      dueamount += amount;
    });

    countdue = totalbill - totalpaid;


    $('.totalPaid').text(totalpaid);

    $('.totaldue').text(due);

    
    $('.totalBill').text(totalbill);

    $('.countdue').text(countdue);

    $('.totaldueamount').text(dueamount);


  })

    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>