{% extends "header.html.twig" %}
{% block body_content %}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Normal User List</h3>
        </div>
        <div class="box-header">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-lg-2">
                    <select class="form-control" id="status">
                        <option value="">Status</option>
                        <option value="1">Active</option>
                        <option value="0">Deactivated</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-4 col-lg-2">
                    <input type="text" class="form-control" value="" placeholder="Date" id="date_range"/>
                </div>
                <div class="col-md-3 col-sm-4 col-lg-2 mt-2">
                    <button type="button" class="btn btn-primary" id="filter">Filter</button>
                    <button type="button" class="btn btn-danger ml-2" id="reset">Reset</button>
                </div>
            </div>
        </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>Mobile number</th>
                    <th>Email</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zipcode</th>
                    <th>How Did you Heard</th>
                    <th>Created Date</th>
                    <th>Status</th>
                    <th>Action</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 () {
        var start = moment('01/01/2020')
        var end = moment()

        function cb (start, end) {
          $('#date_range span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'))
        }

        $('#date_range').daterangepicker({
          startDate: start,
          endDate: end,
          ranges: {
            'All time': [start.format('MM/DD/YYYY'), end.format('MM/DD/YYYY')],
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          locale: {
            format: 'MM/DD/YYYY'
          }
        }, cb)
        cb(start, end)

        let datable_users = $('#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,
              exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
              },
            },
          ],
          ajax: {
            url: '/user/ajax/data',
            type: 'POST',
            data: function (d) {
              d.status = $('#status').val()
              d.date_range = $('#date_range').val()
            }
          },
          columns: [
            { data: 'firstname', name: 'firstname' },
            { data: 'lastname', name: 'lastname' },
            { data: 'mobile_number', name: 'mobile_number' },
            { data: 'email', name: 'email' },
            { data: 'city', name: 'city' },
            { data: 'state', name: 'state' },
            { data: 'zipcode', name: 'zipcode' },
            { data: 'how_did_you_hear', name: 'how_did_you_hear' },
            { data: 'created_at', name: 'created_at' },
            { data: 'status', name: 'status' },
            { data: 'action', name: 'action', orderable: false },
          ],
          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()
        }

        $(document).on('click', '.status-change', function () {
          var value_id = $(this).data('id')
          var status = $(this).data('status')
          var change = confirm('Are you sure you want to change status')
          if (change) {
            $.ajax({
              method: 'get',
              dataType: 'json',
              contentType: 'application/json',
              url: '/user/status/' + value_id + '/' + status,
              success: function (response) {
                datable_users.ajax.reload(null, false)
              },
              error: function (request, status, error) {
                datable_users.ajax.reload(null, false)
              },
            })
          }
        })
        $(document).on('click', '#filter', function () {
          datable_users.ajax.reload(null, false)
        })
        $(document).on('click', '#reset', function () {
          $('#status').val('')
          $('#date_range').val(start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'))
          datable_users.ajax.reload(null, false)
        })
      })

    </script>

{% endblock script_content %}