{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% load mathfilters %}
    {% load humanize %}
    <div class="row">
    
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
      <div class="card-header">
                    <div class="button-list d-flex justify-content-end">
                               <button onclick="exportCSVExcel()" class="btn btn-info ">
    <span class="fa fa-download"></span>
    Export to excel
</button>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">

                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Member</th>
                                <th>Account Number</th>
                                <th>Date</th>
                                <th>amount Approved</th>
                                <th>Closed loan of</th>
                                <th>topup Duration</th>
                                <th>Status</th>
                                <th>Details</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for loanapp in loan_topups %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td>{{ loanapp.closed_loan.applicant.biodata.name }}</td>
                                    <td>{{ loanapp.closed_loan.account.acc_number }}</td>
                                    <td>{{ loanapp.topup_loan.approved_on |date:"d-m-Y"}}</td>
                                    <td> {{ loanapp.topup_loan.amount_approved }}</td>
                                    <td> {{ loanapp.closed_loan.amount_approved }}</td>

                                    <td>{{ loanapp.topup_loan.requested_duration }} {{ loanapp.loan_type.get_interval_display }}</td>
                                    <td>{{ loanapp.topup_loan.get_loan_status_display }}</td>
                                    <td>
                                        {% if loanapp.topup_loan is not None %}
                                        <a href="{% url 'loan_details' loanapp.topup_loan_id %}" class="btn btn-success btn-xs"> <i
                                                class="fa fa-eye"></i>Details</a>
                                            {% else %}
                                            <button type="button" class="btn btn-success btn-xs"><i
                                                class="fa fa-eye"></i>Details</button>
                                        {% endif %}

                                    </td>

                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
    </div>

    <script>
    function exportData(){
    /* Get the HTML data using Element by Id */
    var table = document.getElementById("basic-datatable");


    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            console.log(table.rows[r].cells[c].innerHTML);
        }
    }
    var rows =[];

      //iterate through rows of table
        4243


    for(var i=0,row; row = table.rows[i];i++){
        //rows would be accessed using the "row" variable assigned in the for loop
        //Get each cell value/column from the row
        column1 = row.cells[0].innerHTML;
        column2 = row.cells[1].innerHTML;
        column3 = row.cells[2].innerHTML;
        column4 = row.cells[3].innerHTML;
        column5 = row.cells[4].innerHTML;
        column6 = row.cells[5].innerHTML;
        column7 = row.cells[6].innerHTML;

    /* add a new records in the array */
        rows.push(
            [
                column1,
                column2,
                column3,
                column4,
                column5,
                column6,
                column7,
            ]
        );

        }
        csvContent = "data:text/csv;charset=utf-8,";
         /* add the column delimiter as comma(,) and each row splitted by new line character (\n) */
        rows.forEach(function(rowArray){
            row = rowArray.join(",");
            csvContent += row + "\r\n";
        });

        /* create a hidden <a> DOM node and set its download attribute */
        var encodedUri = encodeURI(csvContent);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "Loan Topups.csv");
        document.body.appendChild(link);
         /* download the data file named "Stock_Price_Report.csv" */
        link.click();
}
    </script>


    <script>
    function exportCSVExcel() {
	var tableElement = document.getElementById("basic-datatable");
	var sourceData = "data:text/csv;charset=utf-8,";
	var i = 0;
	while (row = tableElement.rows[i]) {
		sourceData += ([
			row.cells[0].innerText,
			row.cells[1].innerText,
			row.cells[2].innerText,
			row.cells[3].innerText,
			row.cells[4].innerText,
			row.cells[5].innerText,
			row.cells[6].innerText
		]).join(",") + "\r\n";
		i++;
	}
	window.location.href = encodeURI(sourceData);
}
    </script>
{% endblock %}