{% include 'main-nav.html' %}
{% block content %}
{% load static %}


        <!-- start body header -->
        <div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title">Invoices</h1>
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-md-flex justify-content-between">
                                    <ul class="nav nav-tabs b-none">
                                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#Invoice-list">Invoice List</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Invoice-detail">Invoice Detail</a></li>
                                    </ul>
                                    <div class="d-flex align-items-center sort_stat">
                                        <div class="d-flex">
                                            <span class="bh_income">2,5,1,8,3,6,7,5,3,6,7,5</span>
                                            <div class="ml-2">
                                                <p class="mb-0 font-11">MY INCOME</p>
                                                <h5 class="font-16 mb-0">$5,510</h5>
                                            </div>
                                        </div>
                                        <div class="d-flex ml-3">
                                            <span class="bh_traffic">5,8,9,10,5,2,5,8,9,10</span> 
                                            <div class="ml-2">
                                                <p class="mb-0 font-11">SITE TRAFFIC</p>
                                                <h5 class="font-16 mb-0">53% Up</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mt-2">
                                    <input type="text" class="form-control search" placeholder="Search...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="Invoice-list" role="tabpanel">
                        <div class="table-responsive">
                        <table id="display" class="display responsive nowrap" width="100%">
                            <thead>
                                <tr>
                                    <th>invoice_id</th>
                                    <th>view</th>
                                    <th>Download</th>
                                    <th>username</th>
                                    <th>planname</th>
                                    <th>payment_total</th>
                                    <th>Customer's Name</th>
                                    <th>payment_date</th>
                                    <th>payment_status</th>
                                    <th>pending_reason</th>
                                    <th>phone</th>
                                    <th>location</th>
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody >
                            <script>

                                      $(document).ready(function () {
                                          $('#display').DataTable({
                                              type:'GET',
                                              "ajax": '{% url 'BillingMerchant_list' %}',
                                              "columns": [
                                            { "data" : "id" },
                                             { "data" : "id" ,
                                            render: function (data, type, row, meta) {
                                            var ID = row[0];
                                            return '<a class="text-decoration-none" href="{% url "pdf_view" %}?id='+row.id+'">view pdf</a>';
                                            }
                                        },
                                          { "data" : "id" ,
                                            render: function (data, type, row, meta) {
                                            var ID = row[0];
                                            return '<a class="text-decoration-none" href="{% url "invoice_pdf" %}">Download</a>';
                                            }
                                        },  

                                            { "data" : "username"},
                                            { "data" : "planname" },
                                            { "data" : "payment_total" },
                                            { "data" : "first_name" },
                                            { "data" : "payment_date"},
                                            { "data" : "payment_status"},
                                            { "data" : "pending_reason"},
                                            { "data" : "pin"},
                                            { "data" : "payer_address_name"},
                                            { "data" : "pin" }
                                        ],
                                        columnDefs: [{
                                        targets: [-1], render: function (data, type, row, meta) {
                                               var ID = row[0];
                                                return '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal22" data-date="'+row.payment_date+'" data-user="'+row.id+'"  data-whatever="'+row.first_name+'" data-invoiceno="'+row.id+'" data-planname="'+row.planname+'" data-payment_total="'+row.payment_total+'" data-phone="'+row.pin+'" data-status="'+row.payment_status+'"><i class="fe fe-edit"></i></button>'

                                        },

                                    }],

                                });
                            });
                        </script>
                            </tbody>
                        </table>
                    </div>
                        </div>  
                    </div>
                        </div>  

                   


<script type="text/javascript" language="javascript" src="https://nightly.datatables.net/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css">
{% include 'footer.html' %}
        {%endblock%}