{% extends 'invoices/layout.html' %}

{% block body %}
<div class="container mt-5 mb-5">
  <h1>Invoices</h1>
  <br><br>


  <ul class="nav nav-tabs">
      <li class="nav-item"><a href="" data-target="#Pending" data-toggle="tab" class="nav-link active">Pending</a></li>
      <li class="nav-item"><a href="" data-target="#Sent" data-toggle="tab" class="nav-link">Sent</a></li>
  </ul>
  <div id="tabsJustifiedContent" class="tab-content">
      <div id="Pending" class="tab-pane fade active show">
          {{ invoice_table(invoices['pending_invoices'] ,'No pending invoices.', 'pending') }}
      </div>
      <div id="Sent" class="tab-pane show">
          {{ invoice_table(invoices['sent_invoices'] ,'No delivered invoices.', 'sent') }}
      </div>
  </div>

</div>
{% endblock %}


{% macro invoice_table(invoices ,no_invoice, status) %}
<div class="card">
  {% if invoices %}
  <br>
<table id={{status}} class="table" cellspacing="0" width="100%">
    <thead>
    <tr>
      <th>Invoice ID</th>
      <th>Customer</th>
      <th>Created at</th>
      <th>Invoiced at</th>
      <th>Nr samples</th>
      {% if status=='sent' %}
      <th>Price</th>
      {% endif %}
    </tr>
    </thead>
    <tbody>
    {% for invoice in invoices %}
    <tr>
      <td>
      <a href="{{ url_for('invoices.invoice', invoice_id=invoice.id) }}">
        {{ invoice.id }}
      </a>
      </td>
      <td>{{ invoice.customer.internal_id}} - {{ invoice.customer.name }}</td>
      <td>{% if invoice.created_at!=None %}{{ invoice.created_at.strftime('%Y-%m-%d') }}{% endif %}</td>
      <td>{% if invoice.invoiced_at!=None %} {{ invoice.invoiced_at.strftime('%Y-%m-%d')  }} {% endif %}</td>
      <td>{% if invoice.microbial_samples %}{{ invoice.microbial_samples|count }}{% else %}{{ invoice.samples|count }}{% endif %}</td>
      {% if status=='sent' %}
      <td>{{ invoice.price }}</td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
  </table>
  {% else %}
  <li class="list-group-item">{{no_invoice}}</li>
  {% endif %}
</div>
{% endmacro %}

{% block scripts %}
<script language="JavaScript">
$(document).ready(function() {
    var table = $('#pending').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf' ]
    } );
 
    table.buttons().container()
    
        .appendTo( "#pending_wrapper .col-md-6:eq(0)" );
} );

$(document).ready(function() {
    var table = $('#sent').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf']
    } );
 
    table.buttons().container()
    
        .appendTo( "#sent_wrapper .col-md-6:eq(0)" );
} );
</script>

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha384-KcyRSlC9FQog/lJsT+QA8AUIFBgnwKM7bxm7/YaX+NTr4D00npYawrX0h+oXI3a2" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" integrity="sha384-Z9D45cp3elqajO+xEyjRTIK1Gr3eYsXiyCPIKNog1sIQzpo2fqFDqFdADGiJjzOv" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" integrity="sha384-ldQcdLcQS6WdInz7/H5EvUsc+DFY6IZGZkAzFAOln7RKseNuPvXOm9txFW6hr8rI" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js" integrity="sha384-InGhHC4iQwCSI4wa3PVgVPfWoLTpBgiwEiv+FmB0T1BTYZ9FbJxAMGmZbUVQ/DcI" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js" integrity="sha384-H75Im0hYf95pyemFnfPSA3ISVz2lFzhujSTwYwoh/gGzYnm6bvRXmOQVvHxRFhZ2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" integrity="sha384-v9EFJbsxLXyYar8TvBV8zu5USBoaOC+ZB57GzCmQiWfgDIjS+wANZMP5gjwMLwGv" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js" integrity="sha384-Paxev/ZXC8K5hkrN2zGU8+PJPxYKAqi8eKCwvI5xD13GwcbhMk4QIo790520glRV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js" integrity="sha384-BCGmbto+GFdUdoEMOvpZKiu/l8U7bpvKL5nAFmhkXkDL3FOnCJ1nG3IPv+SjQlk+" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js" integrity="sha384-WtFdaYxU++8Oq5LgsqyTxQPpDakeNUYAC+ArPrWHkyIhlpP3UZWL6WhWKajlKzty" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js" integrity="sha384-6LRoAn1kvkBMPNsHa6Y/6XDwiX/0cU1FHViqG3kokG9eJ3y0xM1rjQNRxprscuX6" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js" integrity="sha384-l6tR/M/agtJNjE6Vt7Mf6tzz1nEStZBRPDOLRw6WEdpMvuJ6ZFnIcv0kQplNGWl1" crossorigin="anonymous"></script>

{% endblock %}

