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

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Transaction List</h3>
        </div>
        <div class="box-body">
            <table id="usertable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Transaction ID</th>
                    <th>Mobile number</th>
                    <th>Email</th>
                    <th>Created Date</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </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 type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>

    <script>
      $(document).ready(function () {
        let transaction_table = $('#usertable').DataTable({
          processing: true,
          serverSide: true,
          dom: 'Blfrtip',
          buttons: [
            {
              extend: 'excel',
              text: '<button class="btn btn-primary" style="margin-bottom:10px">Excel</button>',
              titleAttr: 'Excel',
              action: newExportAction,
            },
          ],
          ajax: {
            url: '/transaction/ajax/data',
            type: 'POST',
            data: function (d) {

            }
          },
          columns: [
            { data: 'firstname', name: 'firstname',orderable:false, },
            { data: 'lastname', name: 'lastname',orderable:false, },
            { data: 'transaction_id', name: 'transaction_id',orderable:false, },
            { data: 'mobile_number', name: 'mobile_number' ,orderable:false,},
            { data: 'email', name: 'email' ,orderable:false,},
            { data: 'created_at', name: 'created_at'},
          ],
          order: [],
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
        })

        function newExportAction (e, dt, button, config) {
          var self = this
          var oldStart = dt.settings()[ 0 ]._iDisplayStart
          dt.one('preXhr', function (e, s, data) {
            data.start = 0
            data.length = 2147483647
            dt.one('preDraw', function (e, settings) {
              if (button[ 0 ].className.indexOf('buttons-excel') >= 0) {
                $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                  $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                  $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config)
              }
              dt.one('preXhr', function (e, s, data) {
                settings._iDisplayStart = oldStart
                data.start = oldStart
              })
              setTimeout(dt.ajax.reload, 0)
              return false
            })
          })
          dt.ajax.reload()
        }
      })

    </script>

{% endblock script_content %}