
<div class="container-fluid dashboard-content">
    <!-- Header -->
    {% set title = "All PIs Usage" %}
    {% set navigation = [('Reports', ''), ('All Pis Usage', '')] %}
    {% include 'include_header.html' %}


    <div class="row col-12 mb-4 ml-0 pl-0">
        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3 ml-0 mb-1 pl-0">
            <div class="row">
                <div class="col text-right" style="margin-top: 7px;">
                    <h5> Date Range </h5>
                </div>
                <div class="col col-auto nopadding">
                    <input class="form-control" type="text" name="daterange" value="{{ start }} - {{ end }}" />
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        {% set range_str = "(%s - %s)"|format(start, end)  %}
        <!-- Overall table -->
        <div class="col-9">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="table-pis" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>name</th>
                                <th>surname</th>
                                <th>email</th>
                                <th>university</th>
                                <th>bookings</th>
                                <th>days</th>
                                <th>users</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for pi in pi_list %}
                            <tr>
                                <td>{{ pi['first_name'] }}</td>
                                <td>{{ pi['last_name'] }}</td>
                                <td>{{ pi['email'] }}</td>
                                <td>{{ pi['university'] }}</td>
                                <td>{{ pi['bookings'] }}</td>
                                <td>{{ pi['days'] }}</td>
                                <td>{{ pi['users']|length }}</td>
                            </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- Overall table -->
    </div>
</div>


<script>
    var start_date = new Date({{ start|tojson }});
    var end_date  = new Date({{ end|tojson }});

    $('#table-pis').DataTable({
    sDom: 'Brtip',
    //sDom: 'lrtip',
    paging: false,
    info: false,
    buttons: [
        {
            extend: 'copy',
            text: 'Copy to clipboard'
        },
        {
            extend: 'csv',
            title: 'pi_usage'
        },
        {
            extend: 'excel',
            title: 'pi_usage'
        },
        {
            extend: 'pdf',
            title: 'pi_usage'
        },
        'print'
    ],
    //ordering: false,
        order: [[3, 'asc'], [5, 'desc']]
});

    $('.datetimepicker-input').datetimepicker({
        format: 'YYYY/MM/DD'
    });

    $('input[name="daterange"]').daterangepicker({
        "locale": {
            "format": "YYYY/MM/DD",
            "firstDay": 1
        },
        opens: 'left'
    }, function(start, end, label) {
        //console.log("A new date selection was made: " + start.format('YYYY/MM/DD') + ' to ' + end.format('YYYY/MM/DD'));
        const base_url = "{{ url_for_content('report_pis_usage') | safe }}";
        window.location.href = base_url + "&start=" + start.format('YYYY/MM/DD') + "&end=" + end.format('YYYY/MM/DD');
    });

</script>