{% extends "header.html.twig" %}

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Referrals</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="usertable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>User Name</th>
                    <th>Referral Used By</th>
                    <th>Service Created User Name</th>
                    <th>Amount</th>
                </tr>
                </thead>
                <tbody>
                {% for referral in all_referrals %}

                    <tr>
                        <td>
                            {{ referral.user_id }}
                        </td>
                        <td>
                            {{ referral.referred_user_id }}
                        </td>
                        <td>
                            {{ referral.used_by }}
                        </td>
                        <td>{{ referral.amount }}</td>

                    </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                <tr>
                    <th>User Name</th>
                    <th>Referral Used By</th>
                    <th>Service Created User Name</th>
                    <th>Amount</th>
                </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
{% endblock body_content %}
{% block script_content %}
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#usertable').DataTable({
          'order': [],
          'dom': 'Bfrtip',
          'buttons': [
            'excel'
          ],
          initComplete: function () {
            this.api().columns().every(function () {
              var column = this
              var select = $('<select><option value=""></option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function () {
                  var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                  )
                  column
                    .search(val ? '^' + val + '$' : '', true, false)
                    .draw()
                })

              column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
              })
            })
          }
        })
        $('#usertable tfoot tr').insertBefore($('#usertable thead tr'))
      })
      setTimeout(function () {
        $('.dt-button').addClass('btn btn-primary')
      }, 300)
    </script>
{% endblock script_content %}