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

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Neighborhood User List</h3>
        </div>
        <div class="box-header">
            <div class="row">
                <div class="col-md-2 col-sm-2">
                    <select class="form-control" id="status">
                        <option value="">Approval Status</option>
                        <option value="1">Pending</option>
                        <option value="2">Verified</option>
                        <option value="3">Rejected</option>
                        <option value="4">Deactivated</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-2">
                    <select class="form-control" id="is_deliver_tshirt">
                        <option value="">T-shirt Delivered</option>
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-2">
                    <input type="text" class="form-control" value="" placeholder="Date" id="date_range"/>
                </div>
                <div class="col-md-3 col-sm-3">
                    <select class="form-control" id="payment_status">
                        <option value="">Payment Status</option>
                        <option value="paid">Paid</option>
                        <option value="unpaid">Unpaid</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-3">
                    <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">
            <div class="table-responsive">
                <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>T-shirt Delivered</th>
                        <th>Sitting Price</th>
                        <th>Boarding Price</th>
                        <th>Walking Price</th>
                        <th>Day Care Price</th>
                        <th>Created Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </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_sitter = $('#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',
              exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                format: {
                  body: function (data, row, column, node) {
                    // if it is select
                    if (column == 14) {
                      return $(data).find('option:selected').text()
                    } else return data
                  }
                }
              },
              action: newExportAction
            },
          ],
          ajax: {
            url: '/sitter/ajax/data',
            type: 'POST',
            data: function (d) {
              d.status = $('#status').val()
              d.is_deliver_tshirt = $('#is_deliver_tshirt').val()
              d.date_range = $('#date_range').val()
              d.payment_status = $('#payment_status').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: 'is_deliver_tshirt', name: 'fos_user.is_deliver_tshirt' },
            { data: 'sitting_price', name: 'sitting_price' },
            { data: 'boarding_price', name: 'boarding_price' },
            { data: 'walking_price', name: 'walking_price' },
            { data: 'day_care_price', name: 'day_care_price' },
            { data: 'created_at', name: 'created_at' },
            { data: 'status', name: 'fos_user.status' },
            { data: 'action', name: 'action', width: '13%', orderable: false },
          ],
          order: [],
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
          rowCallback: function (row, data, index) {
            if (data.is_verified == 2 && data.user_status == 0) {
              $('td', row).css('background-color', 'Orange')
            } else if (data.is_verified == 2) {
              $('td', row).css('background-color', '#90EE90')
            } else if (data.is_verified == 3) {
              $('td', row).css('background-color', 'pink')
            }
          }
        })

        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('change', '.status-change', function () {
          const value_id = $(this).data('id')
          const status = $(this).val()
          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) {
                //console.log('Respond was: ', response)
                datable_sitter.ajax.reload(null, false)
              },
              error: function (request, status, error) {
                datable_sitter.ajax.reload(null, false)
                //console.log('There was an error: ', request.responseText)
              },
            })
            //window.location.href = '/user/status/' + value_id + '/' + status
          }
        })

        $(document).on('click', '#filter', function () {
          datable_sitter.ajax.reload(null, false)
        })
        $(document).on('click', '#reset', function () {
          $('#status').val('')
          $('#date_range').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'))
          $('#is_deliver_tshirt').val('')
          $('#payment_status').val('')
          datable_sitter.ajax.reload(null, false)
        })
      })
    </script>

{% endblock script_content %}