{% extends 'website/_layouts/base.html' %}

{% load static %}

{% block style %}
    <link rel="stylesheet" href="{% static 'css/jquery.dataTables.min.css' %}" type="text/css">

    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" type="text/css">

 <style>
     tr.odd td:first-child, tr.even td:first-child {
         padding-left: 4em;
    }
 </style>
{% endblock %}

{% block content %}

<!-- Breadcrumbs-->
<ol class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="#">Dashboard</a>
    </li>
    <li class="breadcrumb-item active">Relatórios </li>
</ol>

<!-- DataTables Example -->
<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-table"></i>  Relatórios
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    {% for f in fields %}

                    <th>{{f}}</th>
                    {% endfor %}

                </tr>
                </thead>
                <tfoot>
                <tr>
                    {% for f in fields %}

                    <th>{{f}}</th>
                    {% endfor %}

                </tr>
                </tfoot>
                <tbody>
                {% for row in json %}
                <tr>
                    {% for valor in row.fields.values %}

                    <td>{{ valor }}</td>
                    {% endfor %}
                </tr>

                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>

<p class="small text-center text-muted my-5">
  <em>More table examples coming soon...</em>
</p>
{% endblock %}

{% block script %}

<script>
    $(document).ready(function (){
        $('#example').DataTable({
            order: [[2, 'asc'], [1, 'asc']],
        rowGroup: {
            dataSrc: [0,1],
        },
            columnDefs: [ {
            targets: [ 1, 2 ],
            visible: false ,
        } ],
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        dom: 'Bfrtip',
        buttons: [
            'pageLength',
            {
                extend: 'colvis',
                collectionLayout: 'fixed two-column'
            },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'print', 'pdf', 'csv'
                ],
            },
        ] ,
        "scrollX": true,
            "responsive": true,
            expandable: true


    });
});

</script>
    <script src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js" ></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>

{% endblock %}