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

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Service</h3>
        </div>
        <div class="box-header">
            <div class="row">
                <div class="col-md-2 col-sm-2">
                    <select class="form-control" id="sitter_id">
                        <option value="">Sitter List</option>
                        {% for sitter in sitterList %}
                            <option value="{{ sitter.user_id }}">{{ sitter.firstname }} {{ sitter.lastname }}</option>
                        {% endfor %}
                    </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>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="datatable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>User Name</th>
                    <th>Sitter Name</th>
                    <th>Type</th>
                    <th>Start Date</th>
                    <th>End Time</th>
                    <th>Requested Date</th>
                    <th>Service Amount</th>
                    <th>Service Charge</th>
                    <th>Other Fee</th>
                    <th>Pickup Dropoff Fee</th>
                    <th>Grooming Fee</th>
                    <th>Discount</th>
                    <th>Total Amount</th>
                    <th>Action</th>
                </tr>
                </thead>
            </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>
      $(document).ready(function () {
        let service_table = $('#datatable').DataTable({
          dom: 'Blfrtip',
          processing: true,
          serverSide: true,
          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: '/service/ajax/data',
            type: 'POST',
            data: function (d) {
              d.sitter_id = $('#sitter_id').val()
            }
          },
          columns: [
            { data: 'username', name: 'username', orderable: false },
            { data: 'sitter_name', name: 'sitter_name', orderable: false },
            { data: 'service_type', name: 'service_type', orderable: false },
            { data: 'from_date', name: 'from_date' },
            { data: 'to_date', name: 'to_date' },
            { data: 'created_at', name: 'created_at' },
            { data: 'service_amount', name: 'service_amount' },
            { data: 'service_charge', name: 'service_charge' },
            { data: 'other_fee', name: 'other_fee' },
            { data: 'pickup_dropoff', name: 'pickup_dropoff' },
            { data: 'grooming', name: 'grooming' },
            { data: 'discount_amount', name: 'discount_amount' },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'action', name: 'action', orderable: false },
          ],
          order: [],
          lengthMenu: [[10, 25, 50], [10, 25, 50]]
        })

        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()
        }

        $('#filter').on('click', function () {
          service_table.ajax.reload(null, false)
        })
        $('#reset').on('click', function () {
          $('#sitter_id').val('')
          service_table.ajax.reload(null, false)
        })
      })
    </script>
{% endblock script_content %}